/* =============================================================================
   Evalify homepage — V2 craft + motion layer  (A/B variant, loads AFTER site.css)
   Reuses every site.css token + component. Adds motion choreography, an elevated
   hero (live stat count-ups + the real 6-segment Clearance Score speedometer), and
   a section-by-section creative pass. New files only — the live homepage
   (index.html, site.css) is never touched. NO copy is changed.
   ========================================================================== */

/* ---------- scroll-reveal motion ---------- */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal.s1{transition-delay:.06s}.reveal.s2{transition-delay:.12s}
.reveal.s3{transition-delay:.18s}.reveal.s4{transition-delay:.24s}
.reveal.s5{transition-delay:.30s}.reveal.s6{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- elevated hero ---------- */
.hero{background:
  radial-gradient(1200px 560px at 78% -22%, oklch(0.72 0.15 170 / .20), transparent 60%),
  radial-gradient(820px 460px at 4% 118%, oklch(0.72 0.15 170 / .10), transparent 55%),
  var(--bg)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(oklch(0.52 0.05 180 / .05) 1px,transparent 1px),
    linear-gradient(90deg,oklch(0.52 0.05 180 / .05) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(1000px 520px at 76% 2%,#000,transparent 72%);
  mask-image:radial-gradient(1000px 520px at 76% 2%,#000,transparent 72%)}
.hero .hwrap{position:relative;z-index:1;padding-top:54px;padding-bottom:58px;align-items:center}
h1 .hl{background:linear-gradient(100deg,var(--primary-d),var(--green) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

@keyframes v2rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hcopy>*{animation:v2rise .72s cubic-bezier(.16,1,.3,1) both}
.hcopy .eyebrow{animation-delay:.02s}
.hcopy h1{animation-delay:.10s}
.hcopy .deck{animation-delay:.20s}
.hcopy .hero-cta{animation-delay:.30s}
.hcopy .hstats{animation-delay:.40s}
.heroshot{animation:v2rise .8s cubic-bezier(.16,1,.3,1) both;animation-delay:.22s}
@media(prefers-reduced-motion:reduce){.hcopy>*,.heroshot{animation:none}}

/* hero stat strip (numbers count up on load — facts already stated on the page) */
.hstats{display:flex;gap:30px 34px;margin-top:32px;flex-wrap:wrap}
.hstat b{display:block;font-family:var(--ft);font-size:28px;font-weight:700;
  letter-spacing:-.022em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.hstat span{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:500}

/* hero visual */
.heroshot{position:relative}
/* the card + badge float as ONE unit (on .hs-stage) so the badge keeps its exact position over
   the card's score as it bobs — it never slides over the summary text (Nick's note on the drift). */
.hs-stage{animation:v2float 7.5s ease-in-out infinite;animation-delay:1.5s}
@keyframes v2float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.hs-stage{animation:none}}

/* ---------- the real Evalify Clearance Score speedometer (matches the product gauge) ----------
   Geometry + colours ported 1:1 from components/deck/view/summary/score-gauge.tsx:
   six neumorphic pill segments (#C00000 worst -> #3AA661 best) at -75/-45/-15/15/45/75,
   a tapered needle + hub, 250/900 labels, and the score below coloured by its band. */
/* .hs-stage wraps the card + badge so the badge anchors to the CARD, not the whole .heroshot
   (which also holds the "See the full report" link below) — the earlier overlap-on-the-link bug.
   The badge sits over the card's own score, lower-left, peeking off the left edge. It never
   covers the FTO opinion (right), the summary (top), or the link (below the card). */
.hs-stage{position:relative}
/* link to the bottom-right so the badge owns the bottom-left and never collides with it */
.heroshot{display:flex;flex-direction:column}
.heroshot .hs-link{align-self:flex-end;margin-top:18px}
.gauge-badge{position:absolute;left:-18px;bottom:-46px;width:156px;background:var(--card);
  border:1px solid var(--line);border-radius:15px;padding:9px 13px 11px;z-index:3;
  box-shadow:0 18px 40px rgba(20,45,38,.28), inset 0 1px 0 #fff;
  animation:badgePop .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:.12s}
/* opaque + already covering the card's printed score from frame 0 — NO opacity fade and no
   downward offset — so the static gauge on the brief never flashes before the live one.
   It just pops in with a scale (the whole heroshot fades in together above it). */
@keyframes badgePop{0%{transform:scale(.82)}100%{transform:scale(1)}}
.gauge-badge .gl{font-family:var(--ft);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:2px}
.pgauge{position:relative;width:124px;height:76px;margin:0 auto}
.pg-inner{position:absolute;top:0;left:0;width:300px;height:184px;transform:scale(.413);transform-origin:top left}
.pg-seg{position:absolute;left:121px;top:9px;width:58px;height:34px;border-radius:13px;
  transform-origin:29px 141px;transform:rotate(var(--rot));
  box-shadow:0 5px 7px rgba(0,0,0,.20),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 6px rgba(0,0,0,.22)}
/* glow pulse on the landing band (the amber "Conditional" segment) just as the needle settles */
.pg-seg:nth-child(3){animation:bandGlow 1.05s ease-in-out 2.35s 2}
@keyframes bandGlow{
  0%,100%{box-shadow:0 5px 7px rgba(0,0,0,.20),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 6px rgba(0,0,0,.22),0 0 0 0 rgba(237,125,49,0)}
  50%{box-shadow:0 5px 7px rgba(0,0,0,.20),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 6px rgba(0,0,0,.22),0 0 15px 3px rgba(237,125,49,.9)}}
.pg-needle{position:absolute;left:141px;top:60px;width:18px;height:100px;z-index:5;
  background:linear-gradient(90deg,#454a53 0%,#2c313a 55%,#181c22 100%);
  clip-path:polygon(50% 0,92% 100%,8% 100%);
  transform-origin:9px 100px;transform:rotate(-15.75deg);
  animation:needleSweep 1.5s cubic-bezier(.33,.9,.42,1) both;animation-delay:1.05s}
/* sweep up from the floor, overshoot past the mark, then settle on 498 (the amber band) */
@keyframes needleSweep{0%{transform:rotate(-90deg)}70%{transform:rotate(-9deg)}
  86%{transform:rotate(-18.5deg)}100%{transform:rotate(-15.75deg)}}
.pg-hub{position:absolute;left:130px;top:140px;width:40px;height:40px;border-radius:50%;z-index:6;
  background:radial-gradient(circle at 38% 32%,#5b616b,#23272e);
  box-shadow:0 4px 8px rgba(0,0,0,.38),inset 0 2px 3px rgba(255,255,255,.28),inset 0 -3px 4px rgba(0,0,0,.32)}
.pg-min,.pg-max{position:absolute;top:154px;font-family:var(--fb);font-size:12px;color:#64748b;font-variant-numeric:tabular-nums}
.pg-min{left:16px}.pg-max{right:16px}
.gval{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:2px}
.gval b{font-family:var(--ft);font-size:25px;font-weight:800;line-height:1;color:#ED7D31;font-variant-numeric:tabular-nums}
.gverdict{font-family:var(--ft);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#ED7D31;background:rgba(237,125,49,.14);border-radius:20px;padding:3px 10px}
@media(prefers-reduced-motion:reduce){.gauge-badge,.pg-needle,.pg-seg:nth-child(3){animation:none}}

/* ---------- PROBLEM — the red accent bars draw in ---------- */
.prob .probgrid div{border-top-color:transparent;position:relative}
.prob .probgrid div::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:100%;
  background:oklch(0.58 0.19 25 / .55);transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.prob.in .probgrid div::before{transform:scaleX(1)}
.prob.in .probgrid div:nth-child(2)::before{transition-delay:.12s}
.prob.in .probgrid div:nth-child(3)::before{transition-delay:.24s}

/* ---------- SOLUTION — a green accent draws down each card ---------- */
.sol{position:relative;overflow:hidden}
.sol::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary);
  transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.16,1,.3,1) .1s}
.sol.in::before{transform:scaleY(1)}

/* ---------- ZERO-RETENTION — grid texture + the green bars draw in ---------- */
.privacy{position:relative;overflow:hidden}
.privacy::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(640px 320px at 85% -10%,#000,transparent 70%);
  mask-image:radial-gradient(640px 320px at 85% -10%,#000,transparent 70%)}
.privacy>*{position:relative;z-index:1}
.privacy .p .bar{transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1) .15s}
.privacy.in .p .bar{transform:scaleX(1)}
.privacy.in .p:nth-child(2) .bar{transition-delay:.32s}
.privacy.in .p:nth-child(3) .bar{transition-delay:.48s}

/* ---------- HOW IT WORKS — connector line + the icon tiles pop in ---------- */
@media(min-width:861px){
  .steps{position:relative}
  .steps::before{content:"";position:absolute;left:8%;right:8%;top:37px;height:2px;z-index:0;
    background:linear-gradient(90deg,transparent,oklch(0.72 0.15 170 / .45),transparent)}
  .step{position:relative;z-index:1}
}
@keyframes nPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.step .n{opacity:0}
.step.in .n{animation:nPop .6s cubic-bezier(.34,1.56,.64,1) .12s both}
@media(prefers-reduced-motion:reduce){.step .n{opacity:1}.step.in .n{animation:none}}

/* ---------- COMPARISON — the Evalify column is emphasised ---------- */
table.cmp th.ev,table.cmp td.ev{background:oklch(0.72 0.15 170 / .06)}
table.cmp th.ev{border-bottom:2px solid var(--primary)}
table.cmp td.ev{box-shadow:inset 3px 0 0 oklch(0.72 0.15 170 / .35)}
table.cmp tbody tr{transition:background .15s}
table.cmp tbody tr:hover td{background:oklch(0.72 0.15 170 / .09)}

/* ---------- PRICING — a glow on the recommended tier ---------- */
.tier.best{position:relative;overflow:hidden}
.tier.best::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 220px at 50% -25%,oklch(0.72 0.15 170 / .14),transparent 70%)}
.tier.best>*{position:relative;z-index:1}
.tier.best:hover{transform:translateY(-6px) scale(1.01)}

/* ---------- FAQ — smooth open + state ---------- */
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
details[open] .a{animation:faqIn .32s ease}
details{transition:border-color .2s,box-shadow .2s}
details[open]{border-color:oklch(0.72 0.15 170 / .4);box-shadow:0 10px 30px rgba(20,45,38,.07)}
summary{transition:color .15s}
summary:hover{color:var(--primary-d)}

/* ---------- FINAL CTA — a green glow from the top of the dark band ---------- */
.final{position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(720px 340px at 50% -12%,oklch(0.72 0.15 170 / .24),transparent 64%)}
.final .wrap{position:relative;z-index:1}

/* ---------- depth + micro-interaction polish ---------- */
.feat,.doc,.q,.rcard,.tier,.step{
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s}
.feat:hover,.step:hover{transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(20,45,38,.10);border-color:oklch(0.72 0.15 170 / .5)}
.doc:hover,.q:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(20,45,38,.10)}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-45%;width:38%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .55s ease}
.btn-primary:hover::after{left:135%}
@media(prefers-reduced-motion:reduce){
  .feat:hover,.step:hover,.doc:hover,.q:hover,.tier.best:hover{transform:none}
  .btn-primary::after{display:none}
  .prob .probgrid div::before,.sol::before,.privacy .p .bar{transition:none}
}

/* ---------- hero responsive ---------- */
@media(max-width:940px){
  .gauge-badge{left:auto;right:8px;bottom:-14px;width:176px}
  .hstats{gap:22px 26px}
  .hstat b{font-size:25px}
}
@media(max-width:420px){
  .gauge-badge{width:166px;right:4px}
}