/* ==========================================================================
   valvomo.dev v3 — testers page. Builds on style.css; only what the home page doesn't have.
   ========================================================================== */

.scene-t{
  --dino:clamp(104px,min(15vw,24vh),230px);
  min-height:92vh;min-height:92svh;
}
.scene-t .title{font-size:clamp(64px,min(19vw,23vh),300px);}
.lede{
  margin-top:clamp(16px,2.6vh,28px);max-width:30ch;text-align:center;
  font-size:clamp(20px,2.2vw,28px);line-height:1.25;
  animation:fade .8s var(--ease-out) .5s both;
}
.lede em{font-style:italic;}

/* ---------- bugs: one crawls in along the ground and the dinosaur gets it ---------- */
.ground-wrap{position:relative;width:100vw;flex:none;}
.ground-wrap .ground{width:100%;}
.bug{display:block;color:var(--ink);shape-rendering:crispEdges;}
.ground-wrap .bug{
  --bugw:calc(var(--dino) * .3);
  position:absolute;left:0;bottom:2px;width:var(--bugw);height:auto;
  animation:crawl 3.2s steps(26) .5s both;
}
.ground-wrap .bug path{animation:skitter .24s steps(2) infinite;}
@keyframes crawl{
  0%{transform:translateX(calc(var(--bugw) * -1.2));}
  90%{transform:translateX(calc(50vw - var(--dino) / 2 - var(--bugw) * .55));opacity:1;}
  100%{transform:translateX(calc(50vw - var(--dino) / 2 - var(--bugw) * .4)) scale(0);opacity:0;}
}
@keyframes skitter{50%{transform:translateY(-1px);}}

/* ---------- sections ---------- */
.sec{max-width:1480px;margin:0 auto;padding:clamp(80px,13vh,150px) var(--gutter) 0;}
.sec .work-title{font-size:clamp(56px,10.5vw,170px);}
.sec .work-note{max-width:28ch;}

/* how it works */
.steps{list-style:none;margin-top:clamp(36px,6vw,80px);border-top:1px solid var(--ink);}
.steps li{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px clamp(28px,5vw,88px);
  padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--hair);
}
.step-head{display:flex;gap:18px;align-items:baseline;}
.step-head span{font-family:var(--mono);font-size:11px;letter-spacing:.22em;font-weight:600;flex:none;}
.step-head h3{font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.02em;}
.step-head h3 em{font-style:italic;}
.steps p{font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:46ch;}
.steps p+p{margin-top:10px;}
.steps a,.prose a,.faq a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px;}
.note{
  display:inline-block;margin-top:12px;padding:7px 12px;border:1px solid var(--hair);border-radius:999px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}

/* what's in it for you */
.perks{
  list-style:none;margin-top:clamp(36px,6vw,80px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);
}
.perks li{background:var(--paper);padding:clamp(22px,2.6vw,34px);}
.perks .bug{width:27px;margin-bottom:22px;}
.perks h3{font-weight:400;font-style:italic;font-size:clamp(26px,2.4vw,34px);line-height:1.05;letter-spacing:-.015em;}
.perks p{margin-top:12px;font-size:18px;line-height:1.45;}

/* rewards */
.split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);
  margin-top:clamp(36px,6vw,80px);align-items:start;
}
.prose p{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:46ch;}
.prose p+p{margin-top:14px;}
.split .case-facts{margin-top:0;}
.split .case-facts dd{font-size:18px;line-height:1.4;}

/* the test that's open right now */
.now{
  margin-top:clamp(36px,6vw,80px);padding:clamp(22px,3vw,40px);
  border:1px solid var(--ink);border-radius:14px;
  box-shadow:18px 22px 0 -1px var(--tint);
}
.now .case-meta::after{transform:none;}
.now-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,88px);padding-top:clamp(22px,3vw,40px);}
.now .case-name{font-size:clamp(40px,5.2vw,84px);}
.now .case-name em{font-style:italic;}
.now .case-facts{margin-top:0;}
.now .pill{margin-right:10px;}

/* faq */
.faq{margin-top:clamp(36px,6vw,80px);border-top:1px solid var(--ink);max-width:980px;}
.faq details{border-bottom:1px solid var(--hair);}
.faq summary{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;cursor:pointer;list-style:none;
  padding:20px 0;font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--mono);font-size:18px;flex:none;transition:transform .4s var(--ease-out);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{padding:0 0 22px;font-size:clamp(18px,1.5vw,20px);line-height:1.5;max-width:60ch;}
.faq details p+p{margin-top:-10px;}

.outro{padding-top:clamp(100px,16vh,180px);}

/* ---------- reveals (same rhythm as the home page) ---------- */
.js .sec[data-reveal] .steps,.js .sec[data-reveal] .perks,.js .sec[data-reveal] .split,
.js .sec[data-reveal] .now,.js .sec[data-reveal] .faq{
  opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out) .15s,transform .8s var(--ease-out) .15s;
}
.js .sec[data-reveal].in .steps,.js .sec[data-reveal].in .perks,.js .sec[data-reveal].in .split,
.js .sec[data-reveal].in .now,.js .sec[data-reveal].in .faq{opacity:1;transform:none;}

/* ---------- small screens ---------- */
@media (max-width:1080px){
  .perks{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:860px){
  .steps li,.split,.now-grid{grid-template-columns:1fr;}
  .now .pill{margin-top:22px;}
}
@media (max-width:600px){
  .perks{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .step-head{flex-direction:column;gap:8px;}
}

@media (prefers-reduced-motion:reduce){
  .lede{animation:none;}
  .ground-wrap .bug{display:none;}
  .faq summary::after{transition:none;}
}

/* ---------- the buddy: a second dinosaur that follows you down the page (js/testers.js) ---------- */
.buddy{position:fixed;left:0;bottom:14px;z-index:20;width:clamp(54px,5.6vw,84px);pointer-events:none;will-change:transform;}
.buddy-in{transition:transform .7s var(--ease-out),opacity .5s var(--ease-out);}
.buddy.off .buddy-in{transform:translateY(170%);opacity:0;}
.buddy-body{aspect-ratio:30/23;color:var(--ink);pointer-events:auto;cursor:pointer;}
.buddy.off .buddy-body{pointer-events:none;}
.buddy-body svg{display:block;width:100%;height:100%;overflow:visible;}
.buddy-body.right svg{transform:scaleX(-1);}
.buddy-say{
  --tail:50%;
  position:absolute;bottom:calc(100% + 12px);left:0;white-space:nowrap;
  padding:7px 11px 6px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .25s;
}
.buddy-say::after{
  content:"";position:absolute;top:100%;left:var(--tail);width:8px;height:8px;margin:-4px 0 0 -4px;
  background:var(--paper);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg);
}
.buddy-in:has(.dino-acc) .buddy-say{bottom:calc(100% + 4px + clamp(54px,5.6vw,84px) / 3);} /* clear a seasonal hat (js/dino.js) */
.buddy-say.show{opacity:1;animation:pop .4s var(--ease-out);}
@keyframes pop{from{scale:.5;}}
.buddy-bug{
  position:fixed;left:0;bottom:14px;z-index:19;color:var(--ink);pointer-events:none;
  opacity:0;transition:opacity .2s;
}
.buddy-bug.on{opacity:1;}
.buddy-bug svg{display:block;width:100%;height:auto;}
.buddy-coin{
  position:fixed;z-index:21;pointer-events:none;
  font-family:var(--mono);font-weight:700;font-size:20px;line-height:1;
  animation:coin 1.2s var(--ease-out) forwards;
}
@keyframes coin{to{transform:translateY(-80px) rotate(-12deg);opacity:0;}}
@media print{.buddy,.buddy-bug{display:none;}}