/* EasyHerd site styles. Generated from the design canvas, November 9, 2026. */
body{margin:0;background:#F4F4F2}
a{color:#111315}a:hover{color:#3A3E42}
@keyframes eh-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{animation:eh-marquee 48s linear infinite}
@keyframes eh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float{animation:eh-float 7s ease-in-out infinite}
@keyframes eh-bob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-2deg) translateY(10px)}}
.bob{animation:eh-bob 5.5s ease-in-out infinite}
.bob2{animation:eh-float 6s ease-in-out infinite 1s}
@keyframes eh-spin{from{transform:rotate(-12deg)}to{transform:rotate(-12deg) translateY(-18px)}}
.spin{animation:eh-spin 4s ease-in-out infinite alternate}
@keyframes eh-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.rise{animation:eh-rise .9s cubic-bezier(.2,.7,.2,1) both}
@supports (animation-timeline: view()){
.rv{animation:eh-rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
}
@media (prefers-reduced-motion: reduce){.marquee,.float,.bob,.bob2,.spin,.rise,.rv{animation:none!important}}
input::placeholder{color:rgba(255,255,255,0.4)}

.hz-line{display:block;overflow:hidden}
.hz-line>span{display:block;animation:hz-up .9s cubic-bezier(.16,1,.3,1) both}
@keyframes hz-up{from{transform:translateY(105%)}to{transform:none}}
@keyframes hz-fade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hz-phone{from{opacity:0;transform:translateY(90px) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes hz-punch{0%{opacity:0;transform:scale(1.7) rotate(-34deg)}55%{opacity:1;transform:scale(.9) rotate(-6deg)}75%{transform:scale(1.04) rotate(-9deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes hz-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.hz-a{animation:hz-fade .5s cubic-bezier(.2,.7,.2,1) both}
.hz-b{animation:hz-fade .6s cubic-bezier(.2,.7,.2,1) .6s both}
.hz-c{animation:hz-fade .6s cubic-bezier(.2,.7,.2,1) .7s both}
.hz-phone{animation:hz-phone 1s cubic-bezier(.16,1,.3,1) .4s both}
.hz-tag{animation:hz-punch .6s cubic-bezier(.34,1.56,.64,1) 1.2s both}
.hz-pop{animation:hz-pop .3s cubic-bezier(.2,.7,.2,1) 1.5s both}
@keyframes st-ripple{0%{transform:scale(0);opacity:0}8%{transform:scale(0);opacity:.55}14%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
@keyframes st-press{0%{transform:none}9%{transform:none}10.5%{transform:scale(.95)}12.5%{transform:none}100%{transform:none}}
@keyframes st-sheet{0%{transform:translateY(105%)}13%{transform:translateY(105%)}18%{transform:translateY(0)}46%{transform:translateY(0)}50%{transform:translateY(105%)}100%{transform:translateY(105%)}}
@keyframes st-d1{0%{opacity:0}23.9%{opacity:0}24%{opacity:1}50%{opacity:1}50.1%{opacity:0}100%{opacity:0}}
@keyframes st-d2{0%{opacity:0}29.9%{opacity:0}30%{opacity:1}50%{opacity:1}50.1%{opacity:0}100%{opacity:0}}
@keyframes st-d3{0%{opacity:0}35.9%{opacity:0}36%{opacity:1}50%{opacity:1}50.1%{opacity:0}100%{opacity:0}}
@keyframes st-caret{0%{opacity:1}4%{opacity:0}8%{opacity:1}12%{opacity:0}16%{opacity:1}20%{opacity:0}24%{opacity:1}28%{opacity:0}32%{opacity:1}36%{opacity:0}40%{opacity:1}44%{opacity:0}100%{opacity:0}}
@keyframes st-save{0%{transform:none}42%{transform:none}43.5%{transform:scale(.96)}45%{transform:none}100%{transform:none}}
@keyframes st-roll{0%{transform:translateY(0)}50%{transform:translateY(0)}53%{transform:translateY(-50%)}97%{transform:translateY(-50%)}100%{transform:translateY(0)}}
@keyframes st-row{0%{max-height:0;opacity:0}50%{max-height:0;opacity:0}55%{max-height:60px;opacity:1}97%{max-height:60px;opacity:1}100%{max-height:0;opacity:0}}
@keyframes st-toast{0%{transform:translateY(220px)}51%{transform:translateY(220px)}55%{transform:translateY(0)}73%{transform:translateY(0)}76%{transform:translateY(220px)}100%{transform:translateY(220px)}}
@keyframes st-off{0%{opacity:1}68%{opacity:1}70%{opacity:0}98%{opacity:0}100%{opacity:1}}
@keyframes st-send{0%{opacity:0}68%{opacity:0}70%{opacity:1}79%{opacity:1}81%{opacity:0}100%{opacity:0}}
@keyframes st-done{0%{opacity:0}79%{opacity:0}81%{opacity:1}98%{opacity:1}100%{opacity:0}}
@keyframes st-bars{0%{opacity:.25}66%{opacity:.25}70%{opacity:1}98%{opacity:1}100%{opacity:.25}}
@keyframes st-step0{0%{opacity:.32}0%{opacity:.32}0.1%{opacity:1}13%{opacity:1}13.1%{opacity:.32}100%{opacity:.32}}
@keyframes st-step1{0%{opacity:.32}13%{opacity:.32}13.1%{opacity:1}46%{opacity:1}46.1%{opacity:.32}100%{opacity:.32}}
@keyframes st-step2{0%{opacity:.32}46%{opacity:.32}46.1%{opacity:1}64%{opacity:1}64.1%{opacity:.32}100%{opacity:.32}}
@keyframes st-step3{0%{opacity:.32}64%{opacity:.32}64.1%{opacity:1}80%{opacity:1}80.1%{opacity:.32}100%{opacity:.32}}
@keyframes st-step4{0%{opacity:.32}80%{opacity:.32}80.1%{opacity:1}99%{opacity:1}99.1%{opacity:.32}100%{opacity:.32}}
@keyframes st-fill0{0%{transform:scaleX(0)}0%{transform:scaleX(0)}13%{transform:scaleX(1)}99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes st-fill1{0%{transform:scaleX(0)}13%{transform:scaleX(0)}46%{transform:scaleX(1)}99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes st-fill2{0%{transform:scaleX(0)}46%{transform:scaleX(0)}64%{transform:scaleX(1)}99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes st-fill3{0%{transform:scaleX(0)}64%{transform:scaleX(0)}80%{transform:scaleX(1)}99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes st-fill4{0%{transform:scaleX(0)}80%{transform:scaleX(0)}99%{transform:scaleX(1)}99%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes sy-dot0{0%{left:0%;opacity:0}30%{left:0%;opacity:0}32%{left:0%;opacity:1}58%{left:100%;opacity:1}60%{left:100%;opacity:0}100%{left:100%;opacity:0}}
@keyframes sy-dot1{0%{left:0%;opacity:0}36%{left:0%;opacity:0}38%{left:0%;opacity:1}64%{left:100%;opacity:1}66%{left:100%;opacity:0}100%{left:100%;opacity:0}}
@keyframes sy-dot2{0%{left:0%;opacity:0}42%{left:0%;opacity:0}44%{left:0%;opacity:1}70%{left:100%;opacity:1}72%{left:100%;opacity:0}100%{left:100%;opacity:0}}
@keyframes sy-a{0%{opacity:1}28%{opacity:1}30%{opacity:0}98%{opacity:0}100%{opacity:1}}
@keyframes sy-b{0%{opacity:0}28%{opacity:0}30%{opacity:1}74%{opacity:1}76%{opacity:0}100%{opacity:0}}
@keyframes sy-c{0%{opacity:0}74%{opacity:0}76%{opacity:1}98%{opacity:1}100%{opacity:0}}
@keyframes sy-cloud{0%{color:#5A5E62}74%{color:#5A5E62}77%{color:#22C55E}98%{color:#22C55E}100%{color:#5A5E62}}
@keyframes sy-bars{0%{opacity:.2}26%{opacity:.2}30%{opacity:1}98%{opacity:1}100%{opacity:.2}}
@property --wd{syntax:'<integer>';initial-value:10;inherits:false}
@keyframes wd-count{0%{--wd:10}8%{--wd:10}88%{--wd:0}100%{--wd:0}}
.wd-num{animation:wd-count 9s steps(10,end) infinite;counter-reset:wd var(--wd)}
.wd-num::after{content:counter(wd)}
@keyframes wd-seg0{0%{background:#B7791F}8%{background:#B7791F}9.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-seg1{0%{background:#B7791F}16%{background:#B7791F}17.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-seg2{0%{background:#B7791F}24%{background:#B7791F}25.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-seg3{0%{background:#B7791F}32%{background:#B7791F}33.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-seg4{0%{background:#B7791F}40%{background:#B7791F}41.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-seg5{0%{background:#B7791F}48%{background:#B7791F}49.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-seg6{0%{background:#B7791F}56%{background:#B7791F}57.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-seg7{0%{background:#B7791F}64%{background:#B7791F}65.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-seg8{0%{background:#B7791F}72%{background:#B7791F}73.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-seg9{0%{background:#B7791F}80%{background:#B7791F}81.5%{background:rgba(107,69,0,0.18)}99%{background:rgba(107,69,0,0.18)}100%{background:#B7791F}}
@keyframes wd-band{0%{opacity:1}88%{opacity:1}91%{opacity:0;transform:scale(.97)}98%{opacity:0}100%{opacity:1}}
@keyframes wd-clear{0%{opacity:0;transform:translateY(12px)}89%{opacity:0;transform:translateY(12px)}92%{opacity:1;transform:none}98%{opacity:1}100%{opacity:0}}
@media (max-width: 640px){.spcard{height: 560px!important}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.15s!important;animation-iteration-count:1!important;animation-delay:0s!important}}

@media (max-width: 640px){.navlink{display:none}.phonewrap{padding:20px 0!important;width:100%}.bob{left:-14px!important;top:330px!important}.bob2{right:-6px!important}}

html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #F2C230;outline-offset:3px}
[hidden]{display:none!important}

/* species card swap: 420 ms, arrive curve */
.sp-tab{background:#E9E9E6;color:#111315;transition:background .24s cubic-bezier(.2,.7,.2,1),color .24s cubic-bezier(.2,.7,.2,1)}
.sp-tab.is-on{background:#111315;color:#FFFFFF}
.sp-card{transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1)}
.sp-card.is-on{opacity:1;transform:none}
.sp-card.is-before{opacity:0;transform:translateY(-28px);pointer-events:none}
.sp-card.is-after{opacity:0;transform:translateY(28px);pointer-events:none}

/* record story: on wide screens the section is pinned and scroll drives it */
.story{padding:0 0 clamp(80px,10vw,140px) 0}
@media (min-width: 960px) and (min-height: 700px) and (prefers-reduced-motion: no-preference){
  .story.scrub{height:320vh;padding:0}
  .story.scrub .story-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center}
  .story.scrub .story-stick *{animation-play-state:paused!important;animation-delay:calc(var(--p,0) * -10s)!important}
}

/* reveals where scroll-driven animation is not supported */
.no-sdt .rv{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.no-sdt .rv.rv-in{opacity:1;transform:none}

/* waitlist confirmation */
@keyframes done-punch{0%{opacity:0;transform:scale(1.7) rotate(-34deg)}55%{opacity:1;transform:scale(.9) rotate(-6deg)}75%{transform:scale(1.04) rotate(-9deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
.done-tag{animation:done-punch .6s cubic-bezier(.34,1.56,.64,1) both}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.sp-card,.sp-tab{transition-duration:.15s}.no-sdt .rv{opacity:1;transform:none}}