/* ==========================================================================
   Evidence homepage - Full Elevate brand. Tokens from ../brand/elevate-tokens.css
   Spacing (margin/padding/gap) is on the 4px grid per the brand rule.
   ========================================================================== */
:root{--dur:.18s;}   /* local UI timing (elevate-tokens defines --dur-reveal/--ease-silk) */
html{scroll-behavior:auto;}   /* Lenis owns smoothing; base + chrome styles live in site.css */
body{overflow-x:hidden;}
/* near-invisible copy-variant toggle (review aid) */
.copy-toggle{position:fixed;right:8px;bottom:8px;z-index:200;width:10px;height:10px;padding:0;border:0;border-radius:50%;background:var(--slate-300);opacity:.14;cursor:pointer;transition:opacity .2s ease;}
.copy-toggle:hover{opacity:.5;}
.eyebrow{font-size:15px;font-weight:600;color:var(--green-700);margin:0 0 16px;letter-spacing:.01em;}
/* base, buttons, nav, mega-menus + footer now live in site.css (shared chrome) */

/* ---------- hero ---------- */
.field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;transition:opacity .5s ease;}
.field--dim{opacity:0;}
.field--front{z-index:3;}   /* the big FIRE dot + globe render here, in front of the slides */
/* dark-green backdrop for the globe section (technical = dark mode); fades in/out with the globe */
.darkbg{position:fixed;inset:0;z-index:2;background:var(--surface-dark);opacity:0;pointer-events:none;}
/* no z-index on .story, so its positioned children compete with the front canvas (z3):
   slides sit at z1 (behind the globe), the globe copy at z5 (in front of the globe). */
.story{position:relative;}
.beat{position:relative;min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px 64px;}
.beat__scrim{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(46% 40% at 50% 42%, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.32) 52%, rgba(255,255,255,0) 74%);}
.beat__scrim--scan{background:radial-gradient(50% 44% at 50% 46%, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.40) 52%, rgba(255,255,255,0) 76%);}
.beat--hero{min-height:100vh;}   /* hero owns the first screen - next copy stays below the fold */
.hero__copy{position:relative;z-index:1;max-width:880px;}
/* funky warranty seal */
.seal{position:relative;margin:0 auto 24px;width:138px;height:138px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--lime);background:radial-gradient(120% 120% at 50% 12%, color-mix(in srgb, var(--forest) 72%, var(--lime) 28%) 0%, var(--forest) 58%);box-shadow:0 22px 46px -14px color-mix(in srgb, var(--forest) 60%, transparent),0 4px 14px color-mix(in srgb, var(--forest) 22%, transparent),inset 0 0 0 1.5px color-mix(in srgb, var(--lime-300) 55%, transparent);}
.seal::before{content:"";position:absolute;inset:8px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lime-300) 26%, transparent);}
.seal__up{font-size:14px;font-weight:600;color:var(--lime-300);letter-spacing:.01em;}
.seal__big{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:0.95;letter-spacing:-0.02em;color:var(--lime);}
.seal__sub{font-size:14px;font-weight:600;color:var(--lime-300);letter-spacing:.05em;}
@media(max-width:880px){.seal{width:124px;height:124px;}.seal__big{font-size:42px;}}
/* no text glows anywhere - the beat scrims carry legibility over the dot field */
.hero__h{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,7vw,92px);line-height:1.02;letter-spacing:-0.035em;color:var(--ink);margin:0;}
.hero__sub{font-size:20px;line-height:1.55;color:var(--ink);max-width:30em;margin:24px auto 0;}
.hero__lead{font-size:24px;line-height:1.5;color:var(--ink);max-width:34em;margin:24px auto 0;}
.hero__qs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;max-width:42em;margin:16px auto 0;}
.hero__amp{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink);}
.hl{position:relative;z-index:-1;background:var(--lime-300);color:var(--forest);font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.3;border-radius:7px;padding:4px 12px;text-shadow:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;}   /* z-index:-1: the pill never covers the previous line's descenders */
.hl--grape{background:var(--grapefruit);color:var(--grapefruit-companion);}
.hero__cta{display:flex;gap:16px;justify-content:center;margin-top:36px;flex-wrap:wrap;}
/* ===== Beat 2: the FIREs slide ===== */
.beat--scan{min-height:140vh;}
.fires{position:relative;z-index:1;width:100%;max-width:1040px;margin:0 auto;text-align:center;}
.fires__h{font-family:var(--font-display);font-weight:700;font-size:clamp(48px,7vw,96px);line-height:1;letter-spacing:-0.04em;color:var(--ink);margin:0;}
.fires__expand{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.6vw,34px);line-height:1.1;letter-spacing:-0.02em;color:var(--ink);margin:8px 0 0;}
.fires__expand .fa{color:var(--lime);}   /* Fi R E -> spells FIRE in the brand accent */
.fires__sub{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,40px);line-height:1.1;letter-spacing:-0.02em;color:var(--ink);margin:24px 0 0;}
.fires__box{position:relative;background:var(--lime-300);border-radius:var(--radius-card);margin:32px auto 0;padding:28px;text-align:left;}
.fires__panel{position:relative;background:rgba(255,255,255,0.30);border-radius:20px;height:428px;padding:48px 0;}
/* the floating stat cards (Iteration-2 lime cards). Drop shadow is the agreed exception
   to the no-shadow rule for this hero moment: X0 Y25 blur50 spread-12 #002E11 @24% */
.fires__card{position:absolute;width:300px;box-shadow:0 25px 50px -12px color-mix(in srgb, var(--forest) 24%, transparent);}
/* desktop overlap: FRE is the raised front card (title clear); positions swapped vs the
   DOM order, which stays FRE-first so the stacked mobile view lists FRE first. */
.fires__card--fre{top:48px;left:50%;transform:translateX(-50%);z-index:4;}   /* centre, on top */
.fires__card--aff{top:152px;left:9%;z-index:2;}    /* side cards symmetric (9% each) so the trio centres */
.fires__card--fin{top:152px;right:9%;z-index:5;}   /* highest in the panel */
.fires__featsh{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,40px);letter-spacing:-0.025em;color:var(--forest);text-align:center;margin:40px 0 0;}
.fires__feats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;padding:24px;}
.feat{text-align:left;}
.feat__ic{display:inline-flex;width:32px;height:32px;border-radius:12px;background:var(--forest);color:var(--lime-300);align-items:center;justify-content:center;margin-bottom:12px;}   /* glyph matches the box bg - knockout look */
.feat__ic svg{width:28px;height:28px;stroke-width:2.6;}
.feat h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-0.01em;color:var(--forest);margin:0 0 8px;}
.feat p{font-size:15px;line-height:1.5;color:var(--forest);margin:0;}
@media(max-width:880px){
  .fires__panel{height:auto;display:flex;flex-direction:column;gap:16px;background:transparent;}
  .fires__card{position:static;width:auto;transform:none;}
  .fires__feats{grid-template-columns:1fr;}
}

/* ===== stat cards (ported from the App showcase) ===== */
.w{border-radius:var(--radius-card);padding:24px;display:flex;flex-direction:column;}
.w--card{background:#fff;}
.w__head{display:flex;align-items:center;gap:8px;margin-bottom:24px;}
.w__name{font-size:16px;font-weight:600;line-height:1.25;color:var(--slate-600);margin-right:auto;}
.w__ic{flex:none;width:20px;height:20px;color:var(--slate-500);display:inline-flex;}
.w__ic svg{width:20px;height:20px;}
.w__num{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-0.03em;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;}
.w__cur{font-size:0.46em;font-weight:700;margin-right:0.06em;margin-top:0.16em;}
.w__sub{font-size:14px;color:var(--slate-500);margin-top:12px;}
.w__foot{font-size:14px;line-height:1.4;color:var(--slate-600);margin-top:12px;}
.w__foot strong{color:var(--ink);font-weight:700;}
.w__foot .pos{color:var(--green-700);font-weight:700;}
.it2 .w__ic{width:32px;height:32px;border-radius:12px;background:var(--lime-100);color:var(--forest);align-items:center;justify-content:center;}
.it2 .w__ic svg{width:28px;height:28px;stroke-width:2.6;}
.w__demo{font-size:14px;font-weight:600;line-height:1.2;color:var(--lemon-companion);background:var(--lemon);padding:4px 8px;border-radius:var(--radius-pill);}
.w__info{flex:none;width:16px;height:16px;color:var(--slate-500);display:inline-flex;}
.w__info svg{width:16px;height:16px;}
/* "FIRE" tag that floats by each ignited ember (tangerine pairing) */
.fire-tag{position:fixed;left:0;top:0;z-index:5;pointer-events:none;background:var(--tangerine);color:var(--tangerine-companion);font-family:var(--font-body);font-weight:700;font-size:14px;line-height:1;letter-spacing:.04em;padding:4px 8px;border-radius:var(--radius-pill);white-space:nowrap;transition:opacity .15s ease;}

/* globe beat - copy at top, globe fills the field behind */
.beat--globe{min-height:120vh;}
/* copy is FIXED-centred and fully JS-driven (see home.js) - it physically cannot scroll. Lines fade
   + slide in line-by-line on entry, then leave one-by-one as the globe explodes. transition:none so
   the per-frame scroll-driven updates apply instantly (the ease-in-out easing lives in the JS). */
.globe__copy{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:780px;padding:0 24px;text-align:center;z-index:5;pointer-events:none;}   /* in front of the globe (front canvas z3) */
.beat--globe .r{transition:none;}
/* globe copy: dark-mode deck reveal - white text, fade + slide-up (the base .r motion), staggered line by line */
.beat--globe .globe__h,.beat--globe .hero__lead{color:#fff;}
.beat--globe .globe__h{margin:0 0 32px;}                       /* generous spacing between the three headline lines */
.beat--globe .globe__h .hl{font-size:inherit;line-height:1.12;}   /* highlight sits at the headline size */
.hero__h .hl{font-size:inherit;line-height:1.15;}   /* "dollars" rides at full headline size */
/* forest blurred oval behind the lead: erases the globe dots under the text (the copy
   layer is z5, the globe's front canvas z3 - the oval rides between text and dots) */
.beat--globe .hero__lead{position:relative;z-index:2;margin:0 auto 8px;font-size:20px;max-width:22em;}
.beat--globe .hero__lead::before{content:"";position:absolute;left:50%;top:50%;width:124%;height:220%;transform:translate(-50%,-50%);background:var(--forest);border-radius:50%;filter:blur(28px);z-index:-1;}
.beat--globe .globe__h + .hero__lead{margin-top:36px;}         /* gap between the two groups */
.globe__h{position:relative;z-index:2;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5vw,48px);line-height:1.1;letter-spacing:-0.03em;color:var(--ink);margin:0;}
.globe__sub{font-size:18px;line-height:1.55;color:var(--ink);max-width:40em;margin:20px auto 0;}
/* the globe slide's CTA: lime pill so it carries on the forest backdrop */
.globe__cta{margin:32px 0 0;}
.globe__cta .btn{background:var(--lime);color:var(--forest);}
.globe__cta .btn:hover{background:var(--lime-300);}

/* financial beat - a fixed, scroll-scrubbed TWO-message slide (240vh of scrub room).
   The copy layer is fixed like the globe and warranty; JS drives every opacity AND a
   centering offset: stage 1 centres question + widget, then the question floats out
   while the widget rides UP and the board-meeting copy fades in underneath it. */
.beat--fin{min-height:240vh;margin-top:-60vh;}   /* still overlaps the globe's tail */
.fin__copy{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:960px;padding:0 24px;text-align:center;z-index:1;pointer-events:none;opacity:0;}
/* z2 keeps the messages above the widget's glow even mid-fade (opacity < 1 would
   otherwise flatten them to the widget's own paint level and the glow washes the text) */
.fin__msg{opacity:0;position:relative;z-index:2;}
.fin__msg--2{margin-top:48px;}   /* the board copy hangs below the widget */
/* msg2's support line: quiet body copy - the board line below is the real highlight */
.fin__note{font-size:20px;line-height:1.5;color:var(--ink);max-width:38em;margin:0 auto 24px;}
.fin__h{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.4vw,46px);line-height:1.12;letter-spacing:-0.025em;color:var(--ink);margin:0 auto 12px;max-width:20ch;}
/* the pill line carries headline-size type in both messages (plain text + pill share it) */
.fin__line{position:relative;z-index:2;margin:24px 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5vw,48px);line-height:1.2;letter-spacing:-0.03em;color:var(--ink);}
.fin__line .hl{font-size:inherit;line-height:1.2;}
.fin__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 auto 32px;max-width:640px;}
.fdot{display:inline-flex;align-items:center;gap:8px;background:var(--fill-1);border-radius:var(--radius-pill);padding:8px 16px;font-weight:700;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;}
.fdot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tangerine-companion);}
.fin__cta{margin:32px 0 0;}
.fin__tiles{position:relative;z-index:0;display:grid;grid-template-columns:1fr;max-width:440px;margin:48px auto 0;}
.fintile{min-height:224px;padding:32px;}   /* ~25% smaller so the slide fits the CTA below the board copy */
.fintile .w__ic{width:36px;height:36px;border-radius:12px;}
.fintile .w__ic svg{width:28px;height:28px;}
.fintile .w__name{font-size:18px;}
/* soft grey blurred oval behind the tile so the white card stands out on the white page */
.fin__tiles::before{content:"";position:absolute;left:50%;top:50%;width:112%;height:128%;transform:translate(-50%,-50%);background:var(--fill-2);border-radius:50%;filter:blur(48px);z-index:-1;}   /* tighter: never reaches the copy above */
.fin__tiles .w__num{font-size:clamp(44px,7vw,84px);padding-top:16px;}
@media(max-width:640px){.fin__tiles{grid-template-columns:1fr;}}
.tile{border-radius:var(--radius-card);padding:28px 32px;text-align:left;}
.tile--risk{background:var(--fill-1);}
.tile--retired{background:var(--lime-100);}
.tile__label{display:block;font-size:15px;font-weight:600;color:var(--slate-600);margin-bottom:8px;}
.tile__big{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.tile--risk .tile__big{color:var(--grapefruit-companion);}
.tile--retired .tile__big{color:var(--green-700);}
.tile__sub{font-size:15px;color:var(--slate-600);margin-top:16px;}
.tile__sub--down{color:var(--green-700);font-weight:600;}

/* ---------- warranty: a scroll-scrubbed takeover (see home.js) ----------
   fixed full-viewport layer; the dark card scales up to fill the screen, the "We'll bet $5M"
   claim cross-fades into the bigger "first" line, the shield gains "up to $5M", then the
   third paragraph. All opacities/scale are driven per-frame in JS (no CSS transitions). */
.beat--warranty{min-height:320vh;}   /* extra tail so the CTA dwells ~half a viewport once assembled */
.warr{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;}
/* dark-lime-on-lime pairing: lime-300 surface, Forest text + Forest highlight pills */
.warr__bg{position:absolute;left:50%;top:50%;width:min(780px,90vw);height:440px;transform:translate(-50%,-50%) scale(1);transform-origin:center;background:var(--lime-300);border-radius:28px;}
.warr__stage{position:relative;z-index:2;width:100%;max-width:960px;padding:0 24px;text-align:center;color:var(--forest);display:flex;flex-direction:column;align-items:center;}
.warr__lockup{display:inline-flex;align-items:center;margin-bottom:32px;opacity:0;}   /* appears with stage B */
/* the stamp seal: a tilted circular guarantee mark (chosen direction 1) - forest face,
   lime figures, an embossed inner ring; the tilt keeps it human */
.warr__seal{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:168px;height:168px;border-radius:50%;transform:rotate(-6deg);color:var(--lime);background:radial-gradient(120% 120% at 50% 12%, color-mix(in srgb, var(--forest) 72%, var(--lime) 28%) 0%, var(--forest) 58%);box-shadow:0 22px 46px -14px color-mix(in srgb, var(--forest) 55%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--lime-300) 55%, transparent);}
.warr__seal::before{content:"";position:absolute;inset:8px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lime-300) 30%, transparent);}
.warr__seal-up{font-size:15px;font-weight:600;color:var(--lime-300);}
.warr__seal-big{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:1;letter-spacing:-0.02em;}
.warr__seal-sub{font-size:15px;font-weight:600;color:var(--lime-300);letter-spacing:.04em;}
@media(max-width:880px){.warr__seal{width:148px;height:148px;}.warr__seal-big{font-size:48px;}}
.warr__head{position:relative;width:100%;}
.warr__first,.warr__claim{font-family:var(--font-display);font-weight:700;letter-spacing:-0.03em;color:var(--forest);margin:0 auto;}
.warr__first{position:relative;font-size:clamp(34px,5.4vw,72px);line-height:1.2;max-width:18ch;opacity:0;}
/* normal centred block (NOT flex - flex turned the sentence's words into separate columns) */
.warr__claim{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:clamp(28px,4vw,52px);line-height:1.2;max-width:22ch;}
/* the WOW highlight: a Forest pill with lime text, at the surrounding text's own size */
.warr .hl,.warr__amt{background:var(--forest);color:var(--lime-300);font-family:var(--font-display);font-weight:700;font-size:inherit;line-height:1;border-radius:0.16em;padding:0.04em 0.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.warr__para{font-size:20px;line-height:1.55;color:var(--forest);max-width:640px;margin:32px auto 0;opacity:0;}
.warr__link{margin-top:24px;opacity:0;}

/* ---------- Mythos: particles assemble the Claude mark, burst, distil to FIREs (see home.js) ---------- */
.beat--mythos{min-height:220vh;}   /* one copy scene now - the particle arc compresses with it */
/* tangerine surface, dark-tangerine text + highlight pill (the secondary pairing) */
.mythbg{position:fixed;inset:0;z-index:2;background:var(--tangerine);opacity:0;pointer-events:none;}
.myth{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;color:var(--tangerine-companion);}
/* one copy scene, dead-centred in the viewport; the particles play around and behind it */
.myth__copy{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0 auto;max-width:960px;padding:0 24px;text-align:center;opacity:0;}   /* wide enough for the headline's pill line */
.myth__h{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,52px);line-height:1.3;letter-spacing:-0.03em;color:var(--tangerine-companion);margin:0 auto;}
@media(min-width:880px){.myth__h .hl{white-space:nowrap;}}   /* desktop: the highlight never breaks - it drops to its own single line */
.myth__p{font-size:30px;line-height:1.5;color:var(--tangerine-companion);max-width:30em;margin:20px auto 0;}
/* the closer line: the slide's subheadline - second to the headline, above the CTA.
   Hierarchy by size and weight only (no pill), per the skim ladder: h -> closer -> CTA */
.myth__sub2{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,32px);line-height:1.3;letter-spacing:-0.02em;color:var(--tangerine-companion);max-width:24em;margin:28px auto 0;}
.myth .hl{background:var(--tangerine-companion);color:var(--tangerine);font-family:var(--font-display);font-weight:700;font-size:inherit;line-height:1;border-radius:0.16em;padding:0.04em 0.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
/* the CTA wears the page's tangerine coding: dark-companion fill, tangerine label */
.myth__cta{margin-top:24px;background:var(--tangerine-companion);color:var(--tangerine);}
.myth__cta:hover{background:#fff;color:var(--tangerine-companion);}

/* ---------- three messages: stacking cards (each row pins + the next stacks over it) ---------- */
/* pulled up into the warranty beat's empty tail: card 1's position-gated fade then begins
   the moment the warranty layer hits 0 - no dead white stretch between the two slides, and
   no overlap either (the card stays at 0 opacity until the warranty has fully dissolved) */
.stack-sec{position:relative;z-index:1;background:var(--canvas);padding:var(--space-2xl) 24px;margin-top:-44vh;}
.stack-list{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:120px;}
/* spacer INSIDE the sticky containing block: the stacked trio holds pinned ~half a viewport
   after the third card lands, before the Mythos wash starts to arrive */
.stack-list::after{content:"";height:40vh;}
.srow{position:sticky;display:flex;gap:48px;align-items:center;padding:48px;border-radius:32px;overflow:hidden;}
.srow:nth-child(1){top:96px;}
.srow:nth-child(2){top:128px;}
.srow:nth-child(3){top:160px;}
.srow--lime{background:var(--lime-300);}
.srow--lemon{background:var(--lemon);}
.srow--blueberry{background:var(--blueberry);}
.srow__h{flex:1;font-family:var(--font-display);font-weight:700;font-size:clamp(36px,4.4vw,64px);line-height:1.05;letter-spacing:-0.02em;margin:0;}
.srow--lime .srow__h{color:var(--forest);}
.srow--lemon .srow__h{color:var(--lemon-companion);}
.srow--blueberry .srow__h{color:var(--blueberry-companion);}
.srow__panel{flex:1;display:flex;align-items:center;justify-content:center;min-height:400px;background:rgba(255,255,255,0.32);border-radius:32px;padding:48px;overflow:hidden;}
.srow__stack{position:relative;width:400px;max-width:100%;}
.srow__front{position:relative;z-index:2;}
.srow__behind{position:absolute;left:50%;top:42%;width:100%;height:100%;background:#fff;border-radius:24px;z-index:1;}
.swidget{width:100%;border-radius:24px;}
/* the white card + the widget each carry a shadow in the row's dark companion colour at 24% */
.srow--lime .swidget,.srow--lime .srow__behind{box-shadow:0 25px 50px -12px color-mix(in srgb, var(--forest) 24%, transparent);}
.srow--lemon .swidget,.srow--lemon .srow__behind{box-shadow:0 25px 50px -12px color-mix(in srgb, var(--lemon-companion) 24%, transparent);}
.srow--blueberry .swidget,.srow--blueberry .srow__behind{box-shadow:0 25px 50px -12px color-mix(in srgb, var(--blueberry-companion) 24%, transparent);}
.swidget--lime{background:var(--lime-300);}
.swidget--lime .w__name,.swidget--lime .w__num,.swidget--lime .w__foot,.swidget--lime .w__foot strong{color:var(--forest);}
.swidget--lime .w__ic{background:rgba(255,255,255,0.55);}
.w__fic{flex:none;width:16px;height:16px;display:inline-flex;}
.w__fic svg{width:16px;height:16px;}
.warr-foot{display:flex;align-items:center;gap:4px;}
@media(max-width:820px){
  .srow{position:static;flex-direction:column;align-items:flex-start;padding:28px;gap:28px;}
  .stack-list{gap:28px;}
  .stack-list::after{display:none;}   /* no stacking on mobile - no hold spacer either */
  .srow__panel{width:100%;min-height:320px;}
}

/* ---------- three firsts ---------- */
.firsts{padding:var(--space-2xl) 0;background:var(--canvas);position:relative;z-index:1;}
.sect__h{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1.05;letter-spacing:-0.03em;color:var(--ink);margin:0 0 var(--space-lg);}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:880px){.fgrid{grid-template-columns:1fr;}}
.fcard{background:var(--fill-1);border-radius:var(--radius-card);padding:36px;}
.fcard--green{background:var(--lime-300);}
.fcard__ic{display:inline-flex;width:52px;height:52px;border-radius:14px;background:#fff;color:var(--forest);align-items:center;justify-content:center;margin-bottom:24px;}
.fcard--green .fcard__ic{background:var(--forest);color:var(--lime);}
.fcard__ic svg{width:26px;height:26px;}
.fcard h3{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-0.02em;color:var(--ink);margin:0 0 12px;}
.fcard p{font-size:17px;line-height:1.55;color:var(--ink);margin:0;}
.fcard--green h3,.fcard--green p{color:var(--forest);}

/* ============ POST-STORY SECTIONS (firsts / who / fight / founders / closer) ============
   normal-flow slides after the Mythos beat; z1 + canvas bg keep the fixed story layers behind */
.hx{position:relative;z-index:1;background:var(--canvas);padding:var(--space-xl) 24px;}
.hx__in{max-width:1200px;margin:0 auto;}
.hx-h{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.6vw,56px);line-height:1.2;letter-spacing:-0.03em;color:var(--ink);margin:0;text-align:center;}
.hx-p{font-size:18px;line-height:1.6;color:var(--ink);max-width:680px;margin:32px auto 0;text-align:center;}
.hx-p .hl{font-size:inherit;}   /* mid-sentence pills ride at body size, no line-height bump */

/* the five firsts: one band per product, each wearing its own pairing */
.frsts__list{display:flex;flex-direction:column;gap:12px;margin-top:var(--space-md);}
.frst{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:24px;align-items:center;border-radius:var(--radius-card);padding:32px 40px;}
@media(max-width:880px){.frst{grid-template-columns:1fr;gap:8px;padding:24px;}}
.frst__name{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.02em;}
.frst__ic{flex:none;display:inline-flex;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;background:rgba(255,255,255,0.14);}   /* soft chip on the dark fills */
.frst__ic svg{width:32px;height:32px;stroke-width:2.4;}
.frst p{font-size:17px;line-height:1.5;margin:0;}
/* the dark side of each pairing: companion fill, bright-hue text */
.frst--graph{background:var(--tangerine-companion);color:var(--tangerine);}
.frst--surface{background:var(--blueberry-companion);color:var(--blueberry);}
.frst--scan{background:var(--grapefruit-companion);color:var(--grapefruit);}
.frst--report{background:var(--lemon-companion);color:var(--lemon);}
.frst--warranty{background:var(--forest);color:var(--lime-300);}

/* who needs Evidence: three audiences */
.who__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--space-md);}
@media(max-width:880px){.who__grid{grid-template-columns:1fr;}}
.whoc{background:var(--fill-1);border-radius:var(--radius-card);padding:36px;display:flex;flex-direction:column;}
.whoc__ic{display:inline-flex;width:44px;height:44px;border-radius:14px;background:var(--lime-100);color:var(--forest);align-items:center;justify-content:center;margin-bottom:20px;}
.whoc__ic svg{width:36px;height:36px;stroke-width:2.4;}
.whoc h3{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-0.02em;color:var(--ink);margin:0 0 12px;}
.whoc p{font-size:17px;line-height:1.55;color:var(--ink);margin:0 0 20px;}
.whoc a{margin-top:auto;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--green-700);}
.whoc a:hover{text-decoration:underline;}

/* fight FIREs and win: the board quote is the page's dark punctuation */
.fight__lead{font-family:var(--font-display);font-weight:700;font-size:22px;}
.fight__quote{background:var(--surface-dark);color:var(--lime-300);border-radius:var(--radius-card);max-width:920px;margin:var(--space-md) auto 0;padding:56px;font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,40px);line-height:1.35;letter-spacing:-0.02em;text-align:center;}
@media(max-width:880px){.fight__quote{padding:32px;}}
.fight__close{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1.4;color:var(--ink);text-align:center;max-width:32em;margin:40px auto 0;}
.fight__close .hl{font-size:inherit;}

/* founders - an intro takeover: a quiet slate card grows to fill the screen (the
   warranty move, without the fruit), the intro line floats up and out, then the
   founder cards + the Tenable line + CTA ride in under the same wash */
.beat--fndrs{min-height:280vh;}
.fnd{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;}
.fnd__bg{position:absolute;left:50%;top:50%;width:760px;max-width:86vw;height:420px;border-radius:var(--radius-card);background:var(--lime-100);}   /* slate fills vanish against the white page; the lightest lime reads as a wash */
.fnd__stage{position:relative;width:100%;max-width:1080px;margin:0 auto;padding:0 24px;text-align:center;}
.fnd__intro{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);}
.fnd__h{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5vw,56px);line-height:1.12;letter-spacing:-0.03em;color:var(--ink);margin:0;}
.fnd__p{font-size:20px;line-height:1.55;color:var(--ink);max-width:34em;margin:24px auto 0;}
.fnd__main{opacity:0;position:relative;z-index:1;}   /* own stacking context: the ten-line's hl pill (z -1) must not slip behind the takeover wash */
.fnd .fndr{background:#fff;text-align:left;}
.fnd .fndrs__grid{margin-top:0;}
.fnd .fndrs__ten{margin:40px auto 0;}
.fnd .fndrs__link{margin:24px 0 0;}
/* small screens: the takeover unrolls into normal flow (no fixed stage to overflow) */
@media(max-width:880px){
  .beat--fndrs{min-height:0;}
  .fnd{position:static;display:block;opacity:1 !important;pointer-events:auto !important;padding:96px 0;}
  .fnd__bg{display:none;}
  .fnd__intro{position:static;opacity:1 !important;transform:none !important;}
  .fnd__main{opacity:1 !important;transform:none !important;margin-top:48px;}
}
.fndrs__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:var(--space-md);}
@media(max-width:880px){.fndrs__grid{grid-template-columns:1fr;}}
.fndr{background:var(--fill-1);border-radius:var(--radius-card);padding:36px;}
.fndr__head{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
/* headshot slot: lime-100 chip placeholder now; a real <img> drops straight in (object-fit cover) */
.fndr__photo{flex:none;display:flex;width:88px;height:88px;border-radius:24px;background:var(--lime-100);color:var(--forest);align-items:center;justify-content:center;overflow:hidden;}
.fndr__photo svg{width:48px;height:48px;stroke-width:2;}
.fndr__photo img{width:100%;height:100%;object-fit:cover;display:block;}
.fndr h3{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-0.02em;color:var(--ink);margin:0;}
.fndr p{font-size:17px;line-height:1.55;color:var(--ink);margin:0;}
.fndrs__ten{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.8vw,32px);line-height:1.4;letter-spacing:-0.02em;color:var(--ink);text-align:center;max-width:30em;margin:var(--space-lg) auto 0;}
.fndrs__ten .hl{font-size:inherit;}
.fndrs__link{text-align:center;margin:32px 0 0;}
.fndrs__link a{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--green-700);}
.fndrs__link a:hover{text-decoration:underline;}

/* closer: the lime signature surface sends them to the demo */
.closer__panel{background:var(--lime-300);border-radius:var(--radius-card);padding:80px 56px;text-align:center;color:var(--forest);}
@media(max-width:880px){.closer__panel{padding:48px 24px;}}
.closer__h{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.4vw,60px);line-height:1.1;letter-spacing:-0.03em;margin:0 auto;max-width:20em;}
/* on the lime surface the pill inverts: forest fill, lime label (z 0: the base pill's
   z -1 would paint behind the panel's own background and vanish) */
.closer .hl{z-index:0;background:var(--forest);color:var(--lime-300);font-size:inherit;line-height:1;border-radius:0.16em;padding:0.04em 0.2em;}
.closer__p{font-size:18px;line-height:1.6;max-width:42em;margin:24px auto 0;}
.closer__btn{margin-top:32px;}

/* footer moved to site.css (shared chrome) */

/* ---------- reveal ---------- */
.r{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-silk),transform .6s var(--ease-silk);}
.r.in{opacity:1;transform:none;}
/* opacity-only reveal for elements that carry their own positioning transform (the floating cards) */
.rf{opacity:0;transition:opacity .55s var(--ease-silk);}
.rf.in{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .r{opacity:1;transform:none;transition:none;}
  .rf{opacity:1;transition:none;}
  .nav{transition:none;}
  html{scroll-behavior:auto;}
}