/* ============================================================
   SetList marketing site — V6 "One save's biography"
   Ported from the approved V6 draft 13 artifact, Aug 12 2026.

   TYPE DISCIPLINE (DECISIONS #13):
   The quantized ramp in brand-kit/tokens.css is the source of truth.
   Nothing here picks a font-size by eye. Every size is either
     (a) a named ramp step,
     (b) a named site-scale display step, or
     (c) a ramp step multiplied by one of two documented scales:
         --mock  (0.85) product-UI recreations — the phone/card mocks are
                 a true uniform reduction of real app screens
         --chrome(0.70) simulated feed/social chrome — deliberately dense
   If you need a size that is none of the above, that is a bug: add a
   named step here rather than inventing a value at the call site.
   ============================================================ */

/* ---------- self-hosted fonts (no third-party CDN: see BACKLOG #6) ---------- */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/bsd-700.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/bsd-800.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/manrope-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/dmmono-500.woff2) format('woff2')}

:root{
  /* Surfaces / ink — mirrors brand-kit/tokens.css */
  --bg:#FFFFFF; --deep:#F7F8FA; --surface:#F2F3F6;
  --border:#E3E5EA; --border-hi:#C6CBD6;
  --ink:#0A0B0E; --muted:#6F7480; --muted-hi:#5F626B;
  --blue:#1A5FBF; --blue-b:#2A7FEF; --blue-wash:#2A7FEF14;
  --green:#17A863;
  /* semantic exercise-type colors (TYPE_COLOR in App.jsx) */
  --c-str:#2A7FEF; --c-car:#E2703A; --c-cor:#B8860B; --c-mob:#14A38B; --c-ply:#8E5BD4;

  --disp:'Big Shoulders Display',sans-serif;
  --body:'Manrope',sans-serif;
  --mono:'DM Mono',monospace;

  /* ---- the ramp (brand-kit/tokens.css) ---- */
  --t-label:11px;  /* uppercase labels only */
  --t-sm:13px;     /* secondary copy, mono data, chips */
  --t-body:15px;   /* workhorse body */
  --t-md:17px;     /* emphasis, section headers */
  --t-lg:19px;     /* card titles */

  /* ---- derived scales (see header) ---- */
  --mock:.85;
  --chrome:.70;
  --m-label:calc(var(--t-label) * var(--mock));
  --m-sm:calc(var(--t-sm) * var(--mock));
  --m-body:calc(var(--t-body) * var(--mock));
  --m-md:calc(var(--t-md) * var(--mock));
  --m-lg:calc(var(--t-lg) * var(--mock));
  --c-label:calc(var(--t-label) * var(--chrome));
  --c-sm:calc(var(--t-sm) * var(--chrome));

  /* ---- site display steps (poster scale — 4 named roles only) ---- */
  --d-hero:clamp(46px,7.4vw,96px);
  --d-tally:clamp(56px,10vw,140px);
  --d-tally-sm:clamp(40px,6vw,84px);
  --d-h2:clamp(32px,4.6vw,52px);
  --d-step:clamp(34px,3.4vw,46px);
  /* Wordmark has three contexts and each needs its own step — bumping only the header
     is what left the footer looking tiny. Started at 25/19/19, which read as an
     oversight next to a 96px H1. */
  --d-wordmark:clamp(38px,3.6vw,52px);/* header — the brand's main statement */
  --d-wordmark-footer:30px;           /* footer — quieter, but still a signature */
  --d-wordmark-mini:22px;             /* sticky bar — compact by design */

  --snap:cubic-bezier(.25,.6,.2,1);
  --soft:cubic-bezier(.3,.7,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}

/* grid children must be allowed to shrink below content width */
.hero>*,.anatomy>*,.demogrid>*,.traingrid>*,.creator>*,.donegrid>*,.steps>*{min-width:0}
h1,h2,p,.step .t,.step .d{overflow-wrap:break-word}

.wrap{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.wordmark{font-family:var(--disp);font-weight:800;font-size:var(--d-wordmark)}
.wordmark b{color:var(--blue)}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-hi)}
/* mono is the data voice. An eyebrow that is a sentence belongs in Manrope. */
.eyebrow-sentence{font-family:var(--body);font-weight:700;font-size:var(--t-sm);letter-spacing:.01em;text-transform:none;color:var(--muted-hi)}
h1{font-family:var(--disp);font-weight:800;font-size:var(--d-hero);line-height:.98;margin:12px 0 18px;text-wrap:balance}
h1 .b{color:var(--blue)}
h2{font-family:var(--disp);font-weight:800;font-size:var(--d-h2);line-height:1.02;margin:8px 0 12px;text-wrap:balance}
p.sub{color:var(--muted-hi);font-size:var(--t-md);margin:.4em 0 1em;max-width:56ch}
section{padding:96px 0 0}
@media(max-width:760px){section{padding:64px 0 0}}
.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.replay{margin-top:12px;background:none;border:0;font-family:var(--mono);font-size:var(--t-label);color:var(--blue);cursor:pointer;padding:0}
.replay:hover{text-decoration:underline}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- CTA ---------- */
.cta{display:flex;gap:10px;margin-top:20px;max-width:440px}
.cta input{flex:1;min-width:0;border:1px solid var(--border-hi);border-radius:14px;padding:14px 15px;font-size:var(--t-body);font-family:var(--body);color:var(--ink);background:var(--bg)}
.cta input::placeholder{color:var(--muted)}
.cta input:focus{outline:none;border-color:var(--blue-b);box-shadow:0 0 0 3px var(--blue-wash)}
.cta button{background:var(--blue-b);color:#fff;border:0;border-radius:14px;padding:14px 20px;font-size:var(--t-body);font-weight:700;font-family:var(--body);flex:none;cursor:pointer}
.cta button:hover{background:var(--blue)}
.cta button[disabled]{opacity:.62;cursor:default}
/* Honeypot: out of flow, off-screen, out of the tab order and the a11y tree.
   Never type=hidden --- bots skip those and fill visible text inputs. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}
/* Injected by main.js under each form, so the three CTAs keep their own
   layout contexts and nothing shifts until there is something to say. */
.ctamsg{margin-top:9px;font-size:var(--t-sm);font-family:var(--body);line-height:1.45}
.ctamsg[hidden]{display:none}
.ctamsg.err{color:#B4232A}
.ctamsg.ok{color:var(--muted)}
.platline{font-weight:700;font-size:var(--t-body);color:var(--ink);margin:-2px 0 0;max-width:46ch}
.platline .moat{font-weight:500;color:var(--blue)}
.microline{font-size:var(--t-sm);line-height:1.5;color:var(--muted-hi);margin-top:12px;display:flex;align-items:baseline;gap:8px}
.microline .dot{width:7px;height:7px;border-radius:50%;background:var(--blue-b);flex:none;position:relative;top:-1px}
.microline b{font-weight:700;color:var(--ink)}

.minibar{position:fixed;top:0;left:0;right:0;z-index:60;background:#FFFFFFF5;border-bottom:1px solid var(--border);transform:translateY(-110%);transition:transform .35s var(--snap)}
.minibar.on{transform:none}
.minibar .in{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:10px 24px}
.minibar .wordmark{font-size:var(--d-wordmark-mini)}
.minibar a{background:var(--blue-b);color:#fff;border-radius:11px;padding:8px 16px;font-size:var(--t-sm);font-weight:700;text-decoration:none}
.minibar a:hover{background:var(--blue)}

/* ============ S1 HERO — THE TAP ============ */
/* padding-TOP only. A `padding:44px 0 0` shorthand here would zero out .wrap's
   horizontal padding (same specificity, later in source) — which pushed the whole
   hero 24px left of the header and put the text flush against the edge below 1170px. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center;padding-top:44px}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:10px}}
.stagev6{position:relative;min-height:480px}
@media(max-width:900px){.stagev6{min-height:430px}}

.reel{position:absolute;top:0;left:4%;width:min(250px,58%);aspect-ratio:9/14;border-radius:20px;overflow:hidden;border:1px solid var(--border-hi);transform:rotate(-5deg);transition:transform .8s var(--soft),opacity .8s ease,filter .8s ease;z-index:2;background:var(--deep);will-change:transform,opacity}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .shade{position:absolute;inset:auto 0 0 0;height:52%;background:linear-gradient(transparent,#0A0B0Ec9)}
.reel .cap{position:absolute;left:12px;right:12px;bottom:34px;color:#fff;font-size:var(--m-body);line-height:1.45}
.reel .cap b{display:block;font-size:var(--m-label);margin-bottom:3px}
.reel .savedpill,.reel .platpill{position:absolute;top:12px;background:#0A0B0Eb8;color:#fff;border-radius:999px;padding:4px 10px;font-family:var(--mono);font-size:var(--c-label);letter-spacing:.08em}
.reel .savedpill{right:12px}
.reel .platpill{left:12px}
.stagev6.s2 .reel{transform:rotate(0deg)}
.stagev6.s4 .reel{opacity:.35;filter:saturate(.4)}

/* ---- s3: EXTRACTION PERFORMED (§D). A read-line sweeps the reel and the messy
        caption dissolves — then the structured rows take its place in s4.
        This is the beat that shows what the product actually does. ---- */
.reel .scan{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--blue-b) 20%,var(--blue-b) 80%,transparent);
  box-shadow:0 0 22px 5px #2A7FEF55;pointer-events:none;z-index:3}
.stagev6.s3 .reel .scan{animation:scan 1.1s var(--soft) forwards}
@keyframes scan{
  0%  {opacity:0;top:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{opacity:0;top:100%}
}
.reel .cap{transition:opacity .55s ease,transform .55s var(--soft),filter .55s ease}
.stagev6.s3 .reel .cap,.stagev6.s4 .reel .cap{opacity:0;transform:translateY(-6px);filter:blur(3px)}

.sharerow{position:absolute;left:0;right:26%;top:56%;background:#FFFFFF;border:1px solid var(--border);border-radius:18px;padding:14px;display:flex;gap:14px;justify-content:center;opacity:0;transform:translateY(10px);transition:all .6s var(--soft);z-index:4;will-change:transform,opacity}
.sharerow .app{width:52px;text-align:center}
.sharerow .app i{width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--border);margin:0 auto 5px;font-style:normal;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--m-label);color:var(--muted)}
.sharerow .app.sl i{background:var(--ink);border-color:var(--ink);color:#fff;font-family:var(--disp);font-weight:800;font-size:var(--m-sm)}
.sharerow .app span{font-size:var(--c-label);color:var(--muted-hi)}
.sharerow .app.sl span{font-weight:700;color:var(--ink)}
.stagev6.s2 .sharerow{opacity:1;transform:none}
.stagev6.s3 .sharerow{opacity:0;transform:translateY(-8px)}

/* ---- the tap: the beat the hero is remembered by, so it is given room ---- */
.sharerow .app.sl{position:relative}
.tapdot{position:absolute;left:50%;top:22px;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:#2A7FEF33;border:2px solid var(--blue-b);
  transform:scale(.4);opacity:0;pointer-events:none;z-index:2}
/* Deliberately unhurried: the finger arrives, hovers, presses, releases.
   Total 2.2s with a 1.1s lead-in so the share sheet can be READ first. */
.stagev6.s2 .tapdot{animation:tap 2.2s var(--soft) 1.1s}
@keyframes tap{
  0%   {opacity:0;transform:scale(.3)}
  18%  {opacity:1;transform:scale(1.05)}         /* arrives */
  32%  {opacity:1;transform:scale(1)}            /* settles, hovers */
  50%  {opacity:1;transform:scale(.82)}          /* the press */
  58%  {opacity:1;transform:scale(.82)}          /* held — this is the beat */
  74%  {opacity:.85;transform:scale(1.2)}        /* release */
  100% {opacity:0;transform:scale(1.5)}
}
/* the icon reacts to being pressed — without this the tap reads as decoration */
.stagev6.s2 .sharerow .app.sl i{animation:press 2.2s var(--soft) 1.1s}
@keyframes press{
  0%,32% {transform:scale(1)}
  50%,58%{transform:scale(.88)}
  70%    {transform:scale(1.08)}
  100%   {transform:scale(1)}
}
.stagev6.s2 .sharerow .app.sl span:last-child{animation:slwake 2.2s var(--soft) 1.1s forwards}
@keyframes slwake{0%,45%{color:var(--ink)}62%,100%{color:var(--blue)}}

.wcard{position:absolute;right:0;top:8%;width:min(340px,72%);background:var(--bg);border:1.5px solid var(--ink);border-radius:22px;padding:18px 18px 10px;z-index:4;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .9s var(--soft),transform .9s var(--soft);will-change:transform,opacity}
.stagev6.s4 .wcard{opacity:1;transform:none}
.wcard .ttl{font-family:var(--disp);font-weight:800;font-size:24px;line-height:1;margin-bottom:8px}
.byline{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--border-hi);display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.zoomA{transform:scale(2.1);transform-origin:50% 12%}
.byline .h{font-size:var(--m-body);font-weight:700}
.byline .pf{font-family:var(--mono);font-size:var(--m-label);color:var(--muted)}
.exrow{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--border);opacity:0;transform:translateY(9px)}
/* slower, wider stagger — the rows arriving one at a time IS the explanation */
.stagev6.s4 .exrow{animation:popin .8s var(--soft) forwards}
@keyframes popin{to{opacity:1;transform:none}}
.exrow .play{width:24px;height:24px;border-radius:50%;background:var(--blue-wash);border:1px solid var(--blue-b);color:var(--blue-b);display:inline-flex;align-items:center;justify-content:center;font-size:var(--c-label);flex:none}
.exrow .nm{font-weight:700;font-size:var(--m-body);flex:1;min-width:0}
.exrow .dose{font-family:var(--mono);font-size:var(--m-sm);color:var(--muted-hi);flex:none}
.exrow .ts{font-family:var(--mono);font-size:var(--m-sm);color:var(--blue);flex:none}
.startbtn{background:var(--blue-b);color:#fff;border-radius:12px;padding:11px;text-align:center;font-family:var(--disp);font-weight:700;font-size:var(--m-md);margin:10px 0 8px;opacity:0;transform:translateY(7px)}
.stagev6.s4 .startbtn{animation:popin .7s var(--soft) 1.5s forwards}

/* ---------- how-it-works strip ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:64px;border-top:1px solid var(--border);padding-top:34px}
@media(max-width:760px){.steps{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:44px}}
.step .n{font-family:var(--disp);font-weight:800;font-size:var(--d-step);line-height:1;color:var(--blue-b);letter-spacing:.02em}
.step .t{font-weight:700;font-size:var(--t-lg);margin-top:10px}
.step .d{font-size:var(--t-body);color:var(--muted-hi);margin-top:6px;line-height:1.55}
.stepnote{font-size:var(--t-sm);color:var(--muted);margin-top:26px}

@media(max-width:900px){
  .stagev6{min-height:0;height:auto;display:flex;flex-direction:column;gap:14px;align-items:center}
  .reel,.sharerow,.wcard,.tapdot{position:static;width:100%;max-width:340px;margin:0 auto}
  .reel{aspect-ratio:9/10;transform:none;opacity:1}
  .stagev6.s4 .reel{opacity:1;filter:none;aspect-ratio:9/6}
  .sharerow{display:none}
  .stagev6.s2 .sharerow{display:flex;transform:none}
  .stagev6.s3 .sharerow,.stagev6.s4 .sharerow{display:none}
  .tapdot{display:none}
  .wcard{opacity:1;transform:none;transition:none}
}

/* ============ S2 FOLDER ============ */
.tallyhead{font-family:var(--disp);font-weight:800;font-size:var(--d-tally);line-height:.95;letter-spacing:.01em}
.tallyhead.done{color:var(--blue-b)}
.tallyhead.done .lbl{color:var(--blue)}
.tallyhead .lbl{display:block;font-family:var(--mono);font-weight:500;font-size:var(--t-sm);letter-spacing:.16em;color:var(--muted-hi);margin-top:6px}
.tgrid{display:grid;grid-template-columns:auto auto;gap:8px 56px;align-items:end}
@media(max-width:760px){.tgrid{gap:8px 30px}}
/* The LABEL arrives first and the number stays hidden, so you read what is being
   counted before it starts moving. JS removes .labels-first when the count begins.
   Only the number is affected — the label must stay visible, that is the whole point. */
.tallyhead .num{display:inline-block;transition:opacity .45s ease,transform .45s var(--soft)}
.tgrid.labels-first .num{opacity:0;transform:translateY(8px)}
.tgrid.labels-first .lbl{opacity:1}
.folder{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px;align-items:start}
@media(max-width:900px){.folder{grid-template-columns:repeat(2,1fr)}}
.fcard{border-radius:14px;overflow:hidden;border:1px solid var(--border);opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s var(--soft),filter 1.2s ease;will-change:transform,opacity}
.folder.in .fcard{opacity:1;transform:none}
.fcard .hd{display:flex;align-items:center;gap:6px;padding:9px 10px 7px}
.fcard .hd .av{width:19px;height:19px;border-radius:50%;background:var(--surface);border:1px solid var(--border-hi);font-family:var(--mono);font-size:var(--c-label);display:flex;align-items:center;justify-content:center;color:var(--muted-hi);flex:none}
.fcard .hd .hn{font-size:var(--c-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard .hd .pb{margin-left:auto;font-family:var(--mono);font-size:var(--c-label);letter-spacing:.09em;color:var(--muted-hi);border:1px solid var(--border);border-radius:999px;padding:2px 6px;flex:none}
.fcard .ph{aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.fcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.fcard .mt{padding:9px 11px 11px}
.fcard .t{font-weight:700;font-size:var(--m-body);line-height:1.3}
.fcard .st{font-family:var(--mono);font-size:var(--c-label);color:var(--muted-hi);margin-top:4px}
.fcard.tall .ph{aspect-ratio:3/4}
.fcard.wide{grid-column:span 2}
.fcard.wide .ph{aspect-ratio:16/7}
.folder.aged .fcard{filter:grayscale(.85);opacity:.55}
.folder.aged .fcard .st{color:var(--c-car)}
/* The fixture card is the argument of the whole section — it has to WIN the wall,
   not merely fail to fade. It lifts, keeps its colour, gains a green edge, and its
   stamp is promoted from a 7.7px whisper to a readable badge. */
.fcard.alive{transition:opacity .6s ease,transform .6s var(--soft),filter 1.2s ease,box-shadow .6s ease}
.folder.aged .fcard.alive{filter:none;opacity:1;transform:translateY(-6px) scale(1.035);
  border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.folder.aged .fcard.alive .st{
  color:var(--green);font-size:var(--t-label);font-weight:700;letter-spacing:.02em;
  font-family:var(--body);margin-top:6px}
.folder.aged .fcard.alive .t{color:var(--ink)}

/* ============ S3 ANATOMY ============ */
.anatomy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media(max-width:900px){.anatomy{grid-template-columns:minmax(0,1fr);gap:30px}}
.bigcard{background:var(--bg);border:1.5px solid var(--ink);border-radius:24px;padding:22px 22px 12px;position:relative}
.bigcard .ttl{font-family:var(--disp);font-weight:800;font-size:30px;line-height:1;margin-bottom:10px}
.bigcard .exrow{opacity:1;transform:none;padding:11px 0}
.bigcard .exrow .nm{font-size:var(--m-md)}
.cue{margin:10px 0 6px;font-size:var(--m-body);color:var(--muted-hi);border-left:2px solid var(--border-hi);padding-left:12px}
.cue .who{font-family:var(--mono);font-size:var(--m-label);color:var(--muted);display:block}
.feat{display:flex;gap:12px;align-items:flex-start;margin-top:20px}
.feat .fi{width:30px;height:30px;border-radius:50%;background:var(--blue-wash);border:1px solid var(--blue-b);color:var(--blue-b);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.feat .fi svg{width:16px;height:16px}
.feat .ft{font-size:var(--t-body);line-height:1.5;color:var(--muted-hi)}
.feat .ft b{color:var(--ink);font-weight:700}
.mech{font-size:var(--t-sm);color:var(--muted);margin-top:26px}
.demoflag{display:flex;align-items:center;gap:7px;background:var(--blue-wash);border:1px solid #2A7FEF3D;border-radius:10px;padding:8px 11px;margin:2px 0 10px;font-size:var(--m-sm);color:var(--blue);font-weight:700}

/* ============ S4 DEMO ============ */
.demowrap{background:var(--deep);border-radius:32px;padding:56px 24px;margin-top:26px}
@media(max-width:760px){.demowrap{padding:40px 16px;border-radius:24px}}
.demogrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:center;max-width:1000px;margin:0 auto}
@media(max-width:900px){.demogrid{grid-template-columns:minmax(0,1fr);gap:30px}}
.phone{position:relative;width:min(330px,100%);margin:0 auto;border:1.5px solid var(--ink);border-radius:30px;padding:9px;background:var(--bg)}
.scr{position:relative;border-radius:22px;overflow:hidden;background:var(--bg)}
.app{font-size:var(--m-body);padding:14px 12px 12px}
.apphead{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.iconbtn{width:28px;height:28px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted-hi);font-size:var(--m-body);flex:none;background:var(--bg)}
.apptitle{font-family:var(--disp);font-weight:800;font-size:var(--m-lg);flex:1}
.clockchip{font-family:var(--mono);font-size:var(--m-body);color:var(--blue);background:var(--blue-wash);border-radius:9px;padding:3px 8px;flex:none}
.excard{border:1px solid var(--blue-b);border-radius:14px;padding:11px;margin-top:8px}
.excard.q{border-color:var(--border-hi);margin-top:10px}
.excard.q .repline{margin-top:0;margin-bottom:7px}
.excard .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.excard .exnm{font-family:var(--disp);font-weight:800;font-size:var(--m-md)}
.excard .cnt{font-family:var(--mono);font-size:var(--m-label);color:var(--muted-hi)}
.demorow{display:flex;justify-content:space-between;align-items:center;background:var(--blue-wash);border:1px solid var(--blue-b);border-radius:10px;padding:8px 10px;margin-bottom:9px;cursor:pointer}
.demorow:hover{background:#2A7FEF2E}
.demorow .wl{font-family:var(--mono);font-size:var(--m-label);color:var(--blue)}
.demorow .fs{font-family:var(--mono);font-size:var(--c-label);color:var(--muted-hi)}
.setline{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.setline .sl{font-family:var(--mono);font-size:var(--c-label);color:var(--muted);width:15px;flex:none}
.setchip{flex:1;border:1px solid var(--border-hi);border-radius:10px;padding:7px 10px;font-family:var(--mono);font-size:var(--m-sm);text-align:center;position:relative;overflow:hidden;color:var(--muted-hi)}
.setchip.done{border-color:#17A86355;color:var(--green)}
.setchip.active{border-color:var(--blue-b);color:var(--blue)}
.setchip.active .fill{position:absolute;inset:0;background:var(--blue-wash);transform-origin:left;transform:scaleX(0);transition:transform 1s linear}
.setchip .txt{position:relative}
.setline .ck{width:22px;height:22px;border-radius:8px;border:1px solid var(--border-hi);flex:none;display:flex;align-items:center;justify-content:center;font-size:var(--m-sm);color:transparent;background:var(--bg);transition:all .3s var(--snap)}
.setline .ck.on{background:#17A8631A;border-color:var(--green);color:var(--green)}
.sheet{position:absolute;inset:0;background:#0D0F14;color:#fff;transform:translateY(101%);transition:transform .65s var(--soft);display:flex;flex-direction:column;border-radius:22px;will-change:transform}
.demo-open .sheet{transform:translateY(0)}
.sh-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 14px 10px}
.sh-head .t{font-family:var(--disp);font-weight:800;font-size:var(--m-lg)}
/* was #6F7480 on #0D0F14 — ~4:1 at 9px, unreadable. --muted is tuned for contrast
   against WHITE; on the dark sheet it has to be lifted. */
.sh-head .s{font-family:var(--mono);font-size:var(--m-label);letter-spacing:.1em;text-transform:uppercase;color:#C6CBD6;margin-top:3px}
.sh-x{width:26px;height:26px;border-radius:9px;background:#1C1F26;color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--m-sm);flex:none;cursor:pointer}
.sh-video{flex:1;position:relative;background:#000;min-height:230px}
.sh-video img,.sh-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.sh-video .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#0A0B0Eb8;border:1px solid #ffffff44;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--m-md)}
.sh-slice{display:flex;justify-content:space-between;align-items:center;background:#12203A;border:1px solid var(--blue-b);border-radius:10px;margin:12px 14px 0;padding:8px 11px}
.sh-slice .l{font-size:var(--m-sm);font-weight:700;color:#fff}
.sh-slice .l i{font-style:normal;color:var(--blue-b);margin-right:6px}
.sh-slice .r{font-family:var(--mono);font-size:var(--m-label);color:var(--blue-b)}
.sh-track{position:relative;height:4px;border-radius:2px;background:#23262E;margin:12px 14px 0}
.sh-track .sl2{position:absolute;left:43%;width:12%;top:0;bottom:0;background:var(--blue-b);border-radius:2px;opacity:.45}
.sh-track .ph2{position:absolute;top:50%;left:43%;width:10px;height:10px;border-radius:50%;background:var(--blue-b);transform:translate(-50%,-50%);transition:left 3.4s linear}
.sh-cue{background:#14161C;border-radius:12px;margin:11px 14px 14px;padding:10px 12px}
.sh-cue .k{font-family:var(--mono);font-size:var(--c-label);letter-spacing:.1em;text-transform:uppercase;color:#6F7480}
.sh-cue .q{font-size:var(--m-sm);color:#D7D9DE;margin-top:5px}
.demostep{font-family:var(--mono);font-size:var(--t-label);color:var(--muted-hi);text-align:center;margin-top:12px;min-height:18px}
.demoask{max-width:440px;margin:26px auto 0;text-align:center;opacity:0;transform:translateY(8px);transition:all .8s var(--soft)}
.demoask.on{opacity:1;transform:none}
.demoask .line{font-family:var(--disp);font-weight:800;font-size:var(--t-lg);margin-bottom:12px}
.demoask .cta{margin:0 auto}

/* ============ S5 TRAINING ============ */
.traingrid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:56px;align-items:center}
@media(max-width:900px){.traingrid{grid-template-columns:minmax(0,1fr);gap:30px}.traingrid .tx{order:1}.traingrid .tv{order:2}}
.runbox{border:1px solid var(--border-hi);border-radius:18px;padding:16px;max-width:360px;margin:0 auto}
.runrow{display:flex;align-items:center;gap:12px}
.bignum{font-family:var(--mono);font-size:42px;line-height:1;min-width:110px}
.runmeta{flex:1}
.runmeta .nm{font-weight:700;font-size:var(--m-md)}
.runmeta .set{font-family:var(--mono);font-size:var(--m-sm);color:var(--muted-hi)}
.check{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-hi);flex:none;display:flex;align-items:center;justify-content:center;color:transparent;font-size:var(--m-lg);transition:all .3s var(--snap)}
.check.on{background:#17A8631A;border-color:var(--green);color:var(--green)}
.bar{height:6px;border-radius:3px;background:var(--surface);margin-top:14px;overflow:hidden}
.bar i{display:block;height:100%;width:0%;background:var(--blue-b);border-radius:3px}
.runbox.buzz{animation:buzz .45s ease}
@keyframes buzz{0%,100%{transform:translateX(0)}30%{transform:translateX(-2px)}60%{transform:translateX(2px)}}
.repline{display:flex;align-items:center;gap:8px;margin-top:12px}
.repline .sl{font-family:var(--mono);font-size:var(--c-label);color:var(--muted);width:15px;flex:none}
.repbox{flex:1;border:1px solid var(--border-hi);border-radius:10px;padding:7px;font-family:var(--mono);font-size:var(--m-sm);text-align:center;color:var(--muted-hi)}
.repline .check{width:22px;height:22px;font-size:var(--m-sm);border-radius:8px}

/* ============ S6 CREATOR ============ */
.creator{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media(max-width:900px){.creator{grid-template-columns:minmax(0,1fr);gap:30px}}
.crcard{border:1px solid var(--border-hi);border-radius:20px;padding:20px}
.crhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.crhead .avatar{width:52px;height:52px}
.crhead .h{font-family:var(--disp);font-weight:800;font-size:var(--t-lg)}
.crhead .l{font-family:var(--mono);font-size:var(--m-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.srcchip{margin-left:auto;font-family:var(--mono);font-size:var(--m-label);border:1px solid var(--border-hi);border-radius:999px;padding:5px 10px;color:var(--muted-hi)}
.crstats{display:flex;gap:20px;margin:2px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.crstats .cs .v{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--blue-b);line-height:1}
.crstats .cs .k{font-family:var(--mono);font-size:var(--c-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-hi);margin-top:3px}
.wrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--border)}
.wrow:first-of-type{border-top:0}
.wrow .wt{flex:1;min-width:0}
.wrow .wt .t{font-family:var(--disp);font-weight:800;font-size:var(--m-lg);line-height:1.05}
.wrow .wt .m{font-family:var(--mono);font-size:var(--c-label);color:var(--muted-hi);margin-top:3px}
.wrow .chev{color:var(--border-hi);font-size:var(--m-lg);flex:none}
/* exact app type chips (App.jsx .tychip) */
.tychip{display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:999px;padding:5px 11px;font-size:var(--m-body);font-weight:700;flex:none;white-space:nowrap}
.wrow .tychip{min-width:108px;justify-content:center}
.tychip svg{width:15px;height:15px;flex:none}
.tychip.c-strength{border-color:#2A7FEF55;color:#1A5FBF;background:#2A7FEF12}
.tychip.c-cardio{border-color:#E2703A55;color:#C25520;background:#E2703A12}

/* ============ S7 + S8 FINALE (dark) ============ */
.finale{margin-top:96px;background:var(--ink);color:#fff;padding:88px 0 0;position:relative;overflow:hidden}
@media(max-width:760px){.finale{margin-top:64px;padding-top:60px}}
.finale .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;filter:grayscale(1)}
.finale .tintblue{position:absolute;inset:0;background:var(--blue);opacity:.16;mix-blend-mode:multiply}
.finale .inner{position:relative;max-width:1120px;margin:0 auto;padding:0 24px}
.finale h2{color:#fff}
.finale p.sub{color:#B9BCC4}
.finale .eyebrow{color:var(--muted)}
.donegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media(max-width:900px){.donegrid{grid-template-columns:minmax(0,1fr);gap:34px}}
.compcard{background:#fff;color:var(--ink);border-radius:22px;padding:24px 20px;text-align:center;max-width:380px;margin:0 auto;opacity:0;transform:translateY(10px);transition:all .9s var(--soft)}
.compcard.on{opacity:1;transform:none}
.donenum{display:inline-block;transition:opacity .3s ease,transform .3s ease}
.donenum.swap{opacity:0;transform:translateY(-6px)}
.compcard .cwm{font-family:var(--disp);font-weight:800;font-size:var(--t-md)}
.compcard .cwm b{color:var(--blue)}
.compcard .kick{font-family:var(--mono);font-size:var(--m-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-hi);margin-top:2px}
.compcard .cph{width:84px;height:84px;border-radius:50%;margin:14px auto 0;overflow:hidden;border:3px solid var(--blue-b)}
.compcard .cph img{width:100%;height:100%;object-fit:cover}
.compcard .ckb{width:24px;height:24px;border-radius:50%;background:var(--blue-b);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--m-sm);margin:-14px auto 0;position:relative;border:2px solid #fff}
.compcard .hh{font-family:var(--disp);font-weight:800;font-size:23px;margin-top:8px}
.compcard .wt{font-size:var(--m-body);color:var(--muted-hi)}
.compcard .strk{font-family:var(--mono);font-size:var(--t-label);color:var(--muted-hi);margin-top:10px}
.compcard .tagline{font-family:var(--mono);font-size:var(--m-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-hi);margin-top:12px}
.ticker{margin-top:22px}
.ticker .tallyhead{font-size:var(--d-tally-sm);color:#fff}
.ticker .tallyhead.done{color:var(--blue-b)}
.ticker .lbl{color:var(--muted)}
.ticker .tallyhead.done .lbl{color:var(--blue-b)}
.closeblock{position:relative;max-width:640px;margin:0 auto;padding:88px 24px 96px;text-align:left}
@media(max-width:760px){.closeblock{padding:60px 24px 72px}}
.closecard{background:#fff;color:var(--ink);border-radius:18px;padding:18px;margin-top:22px}
.closecard .microline b{color:var(--ink)}
footer{position:relative;background:var(--ink);border-top:1px solid #1C1F26;padding:26px 0 46px}
footer .in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
footer .wordmark{color:#fff;font-size:var(--d-wordmark-footer)}
footer .links{font-size:var(--t-sm);display:flex;gap:22px}
footer .links a{color:var(--muted);text-decoration:none}
footer .links a:hover{color:var(--border-hi)}
.legal{max-width:1120px;margin:0 auto;padding:22px 24px 0}
.legal p{font-size:var(--t-label);line-height:1.65;color:var(--muted-hi);max-width:none;margin:0 0 8px}
.legal p b{color:var(--muted);font-weight:700}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001s !important;transition-duration:.001s !important}}