/* ================================================================
   LUMEN8 redesign — shared stylesheet
   Tokens per STYLE.md. Fonts served from the site's own build.
   ================================================================ */

@font-face{font-family:Syne;src:url(_next/static/media/syne_latin-s.p.14tvuu96~wkr0.woff2) format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Outfit;src:url(_next/static/media/outfit_latin-s.p.0gx2haw2tmll8.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Cormorant;src:url(_next/static/media/cormorant_garamond_latin-s.p.10ked.7w885.g.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Cormorant;src:url(_next/static/media/cormorant_garamond_italic_latin-s.p.0jox806dnq5~c.woff2) format('woff2');font-weight:300 700;font-style:italic;font-display:swap}

:root{
  --ink:#0a0a0a; --surface:#151515; --surface2:#1a1a1a; --border:#262626;
  --cream:#f0ede8; --muted:#b8b4ae; --dim:#737373;
  --gold:#c8a96e; --gold-bright:#d4b97e; --coral:#e0796b;
  --syne:Syne,sans-serif; --corm:Cormorant,serif; --outfit:Outfit,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font:300 16px/1.65 var(--outfit);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--gold);color:var(--ink)}
img{max-width:100%}
a{color:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---- film grain over everything, very quiet ---- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- type system ---- */
.eyebrow{font:600 11px/1 var(--syne);letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.sec-head{margin-bottom:44px}
.sec-head .eyebrow{display:block;margin-bottom:16px}
.sec-head h2{font:700 clamp(30px,4.4vw,46px)/1.08 var(--syne);letter-spacing:-.01em;max-width:18ch}
.sec-head .sub{font:italic 500 clamp(18px,2.1vw,22px)/1.45 var(--corm);color:var(--muted);max-width:52ch;margin-top:14px}
section{padding:104px 0}

/* ---- buttons ---- */
.btn{display:inline-block;font:600 13px/1 var(--syne);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:999px;padding:17px 30px;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--border);color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:rgb(10 10 10/.78);backdrop-filter:blur(14px);border-bottom:1px solid rgb(38 38 38/.6)}
.nav-in{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo img{height:20px;display:block}
.nav-links{display:flex;align-items:center;gap:32px;font:400 13px/1 var(--outfit);letter-spacing:.06em}
.nav-links a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--cream)}
.nav-links a.btn-gold,.nav-links a.btn-gold:hover{color:var(--ink)}
.nav .btn{padding:12px 22px}

/* ---- reveal animations ----
   .lv = load reveal (hero, staggered via --d)
   .rv = scroll reveal — pure CSS scroll-driven, visible by default
         so no-JS, old browsers, and full-page captures always see content */
@keyframes lvIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.lv{animation:lvIn .8s ease both;animation-delay:var(--d,0s)}
/* .rv intentionally has no hidden state: content must render without JS,
   in captures, and in print. Motion lives in the marquee + flywheel instead. */

/* ================================================================
   HERO
   ================================================================ */
.hero{position:relative;padding:96px 0 60px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.hero h1{font:800 clamp(42px,6.2vw,76px)/1.02 var(--syne);letter-spacing:-.02em;margin:22px 0 26px}
.hero h1 em{font:italic 500 .95em/1 var(--corm);color:var(--gold);letter-spacing:0}
.hero .lede{font:300 clamp(16px,1.6vw,19px)/1.7 var(--outfit);color:var(--muted);max-width:54ch;margin-bottom:36px}
.hero .lede b{color:var(--cream);font-weight:500}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:22px;font:400 12px/1.6 var(--outfit);color:var(--dim);letter-spacing:.04em}

/* phone-card marquee */
.mq{position:relative;display:flex;gap:18px;height:640px;transform:rotate(3deg);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.mq-col{display:flex;flex-direction:column;gap:18px;animation:mqUp 20s linear infinite}
.mq-col.rev{animation:mqDown 24s linear infinite}
@keyframes mqUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes mqDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.ph{flex:none;width:172px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--surface)}
.ph-media{position:relative;aspect-ratio:9/16;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 25% 12%, hsl(var(--h) 28% 33% / .9), transparent 62%),
    radial-gradient(130% 100% at 80% 92%, hsl(var(--h) 34% 18%), transparent 66%),
    linear-gradient(160deg,#1c1c1c,#101010)}
.ph-media::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph-hook{position:relative;z-index:1;font:italic 500 13px/1.35 var(--corm);color:var(--cream);padding:0 14px;text-align:center}
.ph-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid var(--border);font:500 9px/1 var(--syne);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ph-meta .dot{width:6px;height:6px;border-radius:99px;background:var(--dim)}
.ph.win{border-color:var(--gold)}
.ph.win .dot{background:var(--gold)}
.ph.win .ph-meta{color:var(--gold-bright)}
.mq-caption{position:absolute;bottom:-6px;right:0;z-index:2;font:italic 500 15px/1.4 var(--corm);color:var(--muted);background:rgb(10 10 10/.85);border:1px solid var(--border);border-radius:10px;padding:10px 16px;transform:rotate(3deg)}

/* ---- logo strip ---- */
.logos{padding:56px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.logos p{font:400 11px/1 var(--outfit);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);text-align:center;margin-bottom:30px}
.logo-row{display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.logo-row img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.5;transition:opacity .2s}
.logo-row img:hover{opacity:.9}

/* ================================================================
   FLYWHEEL
   ================================================================ */
.fw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.fw-stage{position:relative;width:min(440px,90vw);aspect-ratio:1;margin:0 auto}
.fw-ring{position:absolute;inset:52px;border:1px dashed #3a3a3a;border-radius:50%;animation:spin 60s linear infinite}
.fw-ring i{position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px;border-radius:99px;background:var(--dim);opacity:.7;transform:rotate(var(--a)) translateX(var(--r))}
.fw-ring i.gold{background:var(--gold);opacity:1;box-shadow:0 0 14px rgb(200 169 110/.5)}
.fw-ring i.kill{background:var(--coral);opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
.fw-core{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.fw-core b{display:block;font:800 34px/1 var(--syne);letter-spacing:.02em}
.fw-core span{display:block;font:400 11px/1 var(--outfit);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-top:10px}
.fw-node{position:absolute;display:grid;place-items:center;text-align:center;width:112px;margin:-16px 0 0 -56px;font:700 11px/1 var(--syne);letter-spacing:.18em;text-transform:uppercase}
.fw-node small{display:block;font:400 10px/1.5 var(--outfit);letter-spacing:.03em;text-transform:none;color:var(--dim);margin-top:7px}
.fw-node.n1{top:0;left:50%}
.fw-node.n2{top:50%;left:100%;margin-left:-52px}
.fw-node.n3{top:100%;left:50%;margin-top:-30px}
.fw-node.n4{top:50%;left:0;margin-left:-4px}
.fw-steps{counter-reset:fw;display:flex;flex-direction:column;gap:0}
.fw-step{position:relative;padding:26px 0 26px 66px;border-top:1px solid var(--border)}
.fw-step:last-child{border-bottom:1px solid var(--border)}
.fw-step::before{counter-increment:fw;content:"0" counter(fw);position:absolute;left:0;top:24px;font:700 15px/1 var(--syne);color:var(--gold);letter-spacing:.06em}
.fw-step h3{font:700 16px/1.3 var(--syne);letter-spacing:.02em;margin-bottom:7px}
.fw-step p{font:300 14px/1.65 var(--outfit);color:var(--muted);max-width:46ch}

/* ================================================================
   ROUND READOUT (carousel)
   ================================================================ */
#round{background:linear-gradient(180deg,transparent,rgb(21 21 21/.55) 18%,rgb(21 21 21/.55) 82%,transparent)}
.rd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.rd-tag{display:inline-block;font:600 10px/1 var(--syne);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);border:1px solid var(--border);border-radius:999px;padding:7px 12px;margin-left:14px;vertical-align:middle}
.tally{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font:400 12px/1 var(--outfit);letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.tally b{color:var(--cream);font-weight:600}
.tally .w b{color:var(--gold)}
.rd-nav{display:flex;gap:8px;flex:none}
.rd-nav button{width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:none;color:var(--cream);font-size:18px;cursor:pointer;transition:border-color .2s,color .2s}
.rd-nav button:hover{border-color:var(--gold);color:var(--gold)}
.rail{display:flex;align-items:flex-end;gap:20px;overflow-x:auto;padding:34px 4px 24px;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{scroll-snap-type:none;cursor:grabbing}
.card{flex:none;width:250px;scroll-snap-align:start;border:1px solid var(--border);border-radius:14px;background:var(--ink);overflow:hidden;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-4px)}
.card--video{width:232px}
.cd-media{position:relative;aspect-ratio:4/5;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 20% 10%, hsl(var(--h) 28% 32% / .9), transparent 60%),
    radial-gradient(120% 100% at 85% 90%, hsl(var(--h) 34% 19%), transparent 65%),
    linear-gradient(160deg,#1c1c1c,#101010)}
.card--video .cd-media{aspect-ratio:9/16}
.cd-media::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.cd-fmt{position:absolute;top:10px;left:10px;z-index:1;font:500 10px/1 var(--outfit);letter-spacing:.12em;color:var(--muted);background:rgb(10 10 10/.7);border:1px solid var(--border);border-radius:999px;padding:6px 10px;text-transform:uppercase}
.cd-play{width:52px;height:52px;border-radius:999px;border:1px solid rgb(240 237 232/.5);display:grid;place-items:center;color:var(--cream)}
.cd-play svg{margin-left:3px}
.cd-data{padding:14px 16px 16px;border-top:1px solid var(--border)}
.cd-r1{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cd-code{font:700 13px/1 var(--syne);letter-spacing:.08em}
.cd-status{font:600 9px/1 var(--syne);letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:4px}
.cd-hook{font:italic 500 16px/1.35 var(--corm);color:var(--cream);min-height:2.7em;margin-bottom:12px}
.cd-r2{display:flex;align-items:center;justify-content:space-between;gap:8px;font:400 11px/1.3 var(--outfit);color:var(--dim)}
.cd-persona{border:1px solid var(--border);border-radius:999px;padding:5px 9px;letter-spacing:.04em;white-space:nowrap}
.cd-metric{text-align:right}
.is-killed{opacity:.45}
.is-killed .cd-media{filter:grayscale(.65)}
.is-killed .cd-status{color:var(--coral);border:1px solid rgb(224 121 107/.35)}
.is-iterating .cd-status{color:var(--cream);border:1px solid var(--dim)}
.is-winner{border-color:var(--gold);box-shadow:0 0 44px rgb(200 169 110/.13)}
.is-winner .cd-status{color:var(--ink);background:var(--gold)}
.is-winner .cd-code,.is-winner .cd-metric{color:var(--gold-bright)}
.progress{height:1px;background:var(--border)}
.progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .15s linear}
.rd-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px;flex-wrap:wrap}
.rd-foot .note{font:400 13px/1.5 var(--outfit);color:var(--dim);max-width:52ch}
.link-gold{font:600 13px/1 var(--syne);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid rgb(200 169 110/.35);padding-bottom:6px;transition:color .2s,border-color .2s}
.link-gold:hover{color:var(--gold-bright);border-color:var(--gold-bright)}

/* ================================================================
   COMPARISON TABLE
   ================================================================ */
.cmp-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:16px}
.cmp{width:100%;min-width:820px;border-collapse:collapse;font:300 14px/1.5 var(--outfit)}
.cmp th,.cmp td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.cmp thead th{font:700 12px/1.4 var(--syne);letter-spacing:.1em;text-transform:uppercase;background:var(--surface);color:var(--muted)}
.cmp thead th.you{color:var(--ink);background:var(--gold)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp td:first-child{font-weight:500;color:var(--cream);white-space:nowrap}
.cmp td{color:var(--dim)}
.cmp td.you{color:var(--cream);background:rgb(200 169 110/.07);border-left:1px solid rgb(200 169 110/.25);border-right:1px solid rgb(200 169 110/.25)}
.cmp td.you b{color:var(--gold-bright);font-weight:600}

/* ================================================================
   FRIDAY READOUT (proof artifact)
   ================================================================ */
.rep-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.rep-card{border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:0 30px 80px rgb(0 0 0/.5)}
.rep-top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);font:600 11px/1 var(--syne);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.rep-top b{color:var(--gold)}
.rep-body{padding:22px}
.rep-row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px dashed #2e2e2e;font:400 13px/1.5 var(--outfit)}
.rep-row:last-child{border-bottom:none}
.rep-row span{color:var(--dim)}
.rep-row b{font-weight:500;color:var(--cream);text-align:right}
.rep-row b.gold{color:var(--gold-bright)}
.rep-row b.coral{color:var(--coral)}
.rep-list{margin-top:6px;font:300 13px/1.7 var(--outfit);color:var(--muted)}
.rep-list li{margin-left:18px}
.rep-points{display:flex;flex-direction:column;gap:26px}
.rep-point h3{font:700 16px/1.3 var(--syne);margin-bottom:7px}
.rep-point p{font:300 14px/1.65 var(--outfit);color:var(--muted);max-width:52ch}

/* ================================================================
   OFFER
   ================================================================ */
.of-card{border:1px solid rgb(200 169 110/.4);border-radius:20px;background:linear-gradient(170deg,#161514,#100f0e);padding:clamp(28px,4vw,52px);box-shadow:0 0 80px rgb(200 169 110/.06)}
.of-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}
.of-card h3{font:700 clamp(22px,2.6vw,30px)/1.15 var(--syne);margin:14px 0 10px}
.of-card .of-sub{font:italic 500 18px/1.5 var(--corm);color:var(--muted);margin-bottom:26px}
.of-incl{list-style:none;display:flex;flex-direction:column;gap:12px;font:300 14px/1.5 var(--outfit);color:var(--muted)}
.of-incl li{padding-left:26px;position:relative}
.of-incl li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.of-incl li b{color:var(--cream);font-weight:500}
.of-days{display:flex;flex-direction:column}
.of-day{display:grid;grid-template-columns:74px 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--border);font:300 14px/1.55 var(--outfit);color:var(--muted)}
.of-day:last-of-type{border-bottom:1px solid var(--border)}
.of-day b{font:700 12px/1.4 var(--syne);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.of-cta{margin-top:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.of-cta small{font:400 12px/1.6 var(--outfit);color:var(--dim)}

/* ================================================================
   FAQ
   ================================================================ */
.faq{max-width:820px;margin:0 auto}
.faq details{border-top:1px solid var(--border)}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;font:700 16px/1.4 var(--syne)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--outfit);color:var(--gold);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 26px;font:300 15px/1.7 var(--outfit);color:var(--muted);max-width:64ch}

/* ================================================================
   CLOSE + FOOTER
   ================================================================ */
.close{text-align:center;padding:130px 0}
.close h2{font:700 clamp(34px,5vw,58px)/1.05 var(--syne);letter-spacing:-.015em;max-width:20ch;margin:18px auto 16px}
.close h2 em{font:italic 500 .95em/1 var(--corm);color:var(--gold)}
.close p{font:italic 500 19px/1.5 var(--corm);color:var(--muted);max-width:46ch;margin:0 auto 36px}
.footer{border-top:1px solid var(--border);padding:44px 0;font:400 13px/1.6 var(--outfit);color:var(--dim)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-in img{height:18px;filter:none}
.foot-links{display:flex;gap:26px}
.foot-links a{text-decoration:none;color:var(--dim);transition:color .2s}
.foot-links a:hover{color:var(--cream)}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.ct-hero{padding:88px 0 36px}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;padding-bottom:104px}
.ct-form{border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:clamp(24px,3vw,40px)}
.ct-form h3{font:700 20px/1.3 var(--syne);margin-bottom:6px}
.ct-form .hint{font:400 13px/1.6 var(--outfit);color:var(--dim);margin-bottom:26px}
.f-field{margin-bottom:18px}
.f-field label{display:block;font:600 10px/1 var(--syne);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.f-field input,.f-field select,.f-field textarea{width:100%;background:var(--ink);border:1px solid var(--border);border-radius:10px;color:var(--cream);font:300 15px/1.5 var(--outfit);padding:14px 16px;transition:border-color .2s}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--gold)}
.f-field textarea{min-height:120px;resize:vertical}
.f-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-form .btn{width:100%;text-align:center;border:none;cursor:pointer;margin-top:6px}
.f-note{margin-top:16px;font:400 12px/1.6 var(--outfit);color:var(--dim);text-align:center}
.f-note a{color:var(--muted)}
.ct-chips{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 40px}
.chip{font:500 11px/1 var(--outfit);letter-spacing:.06em;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:9px 14px}
.chip b{color:var(--gold);font-weight:600}
.ct-steps{counter-reset:ct}
.ct-step{position:relative;padding:22px 0 22px 62px;border-top:1px solid var(--border)}
.ct-step:last-child{border-bottom:1px solid var(--border)}
.ct-step::before{counter-increment:ct;content:"0" counter(ct);position:absolute;left:0;top:21px;font:700 14px/1 var(--syne);color:var(--gold)}
.ct-step h4{font:700 15px/1.3 var(--syne);margin-bottom:6px}
.ct-step p{font:300 13.5px/1.65 var(--outfit);color:var(--muted);max-width:46ch}

/* ================================================================
   RESPONSIVE + MOTION
   ================================================================ */
@media (max-width:960px){
  .hero-grid,.fw-grid,.rep-grid,.of-grid,.ct-grid{grid-template-columns:1fr}
  .mq{height:420px;transform:rotate(0);margin-top:10px}
  .nav-links .nl{display:none}
  section{padding:80px 0}
}
@media (max-width:640px){
  .card{width:200px}
  .card--video{width:186px}
  .cd-hook{font-size:15px}
  .rd-head{flex-direction:column;align-items:flex-start}
  .f-2col{grid-template-columns:1fr}
  .fw-stage{width:min(330px,86vw)}
  .fw-ring{inset:42px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .mq-col,.fw-ring{animation:none}
  .card,.card:hover,.btn{transition:none;transform:none}
  .progress i{transition:none}
}

/* ================================================================
   V2 — CSS wordmark, deliverables trio, tightened flywheel
   ================================================================ */
.brand{font:800 19px/1 var(--syne);letter-spacing:.16em;color:var(--cream);text-decoration:none;white-space:nowrap}
.brand .flip{display:inline-block;transform:scaleX(-1);color:var(--gold)}
.brand.sm{font-size:15px}

/* deliverables */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dl-card{border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:24px;transition:transform .25s,border-color .25s}
.dl-card:hover{transform:translateY(-4px);border-color:#3a3a3a}
.dl-vis{height:230px;display:grid;place-items:center;margin-bottom:20px}
.frame{position:relative;border:1px solid #333;border-radius:10px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 25% 12%, hsl(var(--h) 26% 30% / .9), transparent 62%),
    linear-gradient(160deg,#1d1d1d,#111)}
.frame::after{content:"";position:absolute;inset:0;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.frame .bar{position:absolute;left:12px;right:12px;border-radius:4px;background:rgb(240 237 232/.16)}
.frame .bar.b1{top:14px;height:9px;width:64%}
.frame .bar.b2{top:30px;height:6px;width:42%}
.frame .cta{position:absolute;left:12px;bottom:12px;height:20px;width:56%;border-radius:999px;background:var(--gold);opacity:.85}
.fr-static{width:172px;aspect-ratio:4/5}
.fr-video{width:126px;aspect-ratio:9/16}
.fr-video .play{position:absolute;inset:0;display:grid;place-items:center}
.fr-video .play i{width:40px;height:40px;border-radius:999px;border:1px solid rgb(240 237 232/.55);display:grid;place-items:center;color:var(--cream);font-style:normal;font-size:11px;padding-left:2px}
.fr-video .cap{position:absolute;left:12px;right:12px;bottom:30px;height:6px;border-radius:3px;background:rgb(240 237 232/.3)}
.fr-video .cap.c2{bottom:18px;width:60%}
.fr-lander{width:100%;max-width:250px;aspect-ratio:16/11;border-radius:8px}
.fr-lander .chrome{position:absolute;top:0;left:0;right:0;height:18px;background:#222;display:flex;gap:4px;align-items:center;padding:0 8px}
.fr-lander .chrome i{width:5px;height:5px;border-radius:99px;background:#444}
.fr-lander .bar.b1{top:30px}
.fr-lander .bar.b2{top:46px}
.fr-lander .cta{width:34%;height:16px}
.dl-card h3{font:700 19px/1.2 var(--syne);margin-bottom:8px}
.dl-card>p{font:300 14px/1.6 var(--outfit);color:var(--muted);margin-bottom:16px}
.dl-chips{display:flex;flex-wrap:wrap;gap:8px}
.dl-chips span{font:500 10.5px/1 var(--outfit);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--border);border-radius:999px;padding:7px 11px}

/* tightened flywheel rows */
.fw-line{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:19px 0;border-top:1px solid var(--border);align-items:baseline}
.fw-line:last-child{border-bottom:1px solid var(--border)}
.fw-line b{font:700 13px/1 var(--syne);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fw-line span{font:300 15px/1.55 var(--outfit);color:var(--muted)}

/* hero proof line */
.hero-proof{margin-top:26px;font:italic 500 15px/1.5 var(--corm);color:var(--dim)}

@media (max-width:960px){
  .dl-grid{grid-template-columns:1fr}
  .dl-vis{height:200px}
}
@media (prefers-reduced-motion:reduce){
  .dl-card,.dl-card:hover{transition:none;transform:none}
}

/* v3 — real lander shot in the frame */
.fr-lander{width:172px;aspect-ratio:9/14;max-width:none}
.fr-lander .shot{position:absolute;left:0;right:0;top:18px;height:calc(100% - 18px);width:100%;object-fit:cover;object-position:top;z-index:0}
.fr-lander .chrome{z-index:1}

/* v3.1 — mobile overflow fixes (QA) */
.hero-grid>*{min-width:0}
@media (max-width:640px){
  .ph{width:148px}
  .mq{gap:14px}
  .mq-caption{right:8px;font-size:13px}
}
@media (max-width:420px){
  .hero h1 span{white-space:normal!important}
}
@media (max-width:640px){
  .fw-node.n2{margin-left:-108px}
  .fw-node{width:96px;margin-left:-48px}
  .fw-node.n2{margin-left:-96px}
}
@media (max-width:360px){
  .nav .btn{padding:11px 14px;font-size:11px;letter-spacing:.06em}
  .ph{width:126px}
}
@media (max-width:340px){
  .brand{font-size:14px;letter-spacing:.1em}
  .nav-in{padding:14px 16px;gap:10px}
  .nav .btn{padding:10px 11px;font-size:10px;letter-spacing:.04em}
  .wrap{padding:0 16px}
}
.foot-links{flex-wrap:wrap;justify-content:center}
html{overflow-x:clip}
.brand .g8{color:var(--gold)}
.fr-video .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* v6 — deliverable cards: full-bleed media, no chips */
.dl-card{padding:0;overflow:hidden}
.dl-vis{height:310px;margin-bottom:0;border-bottom:1px solid var(--border);
  background:radial-gradient(90% 100% at 50% 0%,#1a1a1a,transparent 70%)}
.dl-body{padding:22px 24px 26px}
.dl-body h3{margin-bottom:8px}
.dl-body p{font:300 14px/1.6 var(--outfit);color:var(--muted);margin:0}
.fr-static{width:196px}
.fr-video{width:152px}
.fr-lander{width:196px}
.fr-hook{position:relative;z-index:1;font:italic 500 17px/1.4 var(--corm);color:var(--cream);padding:0 18px;text-align:center;margin-top:34%}

/* v7 — lander pans down on hover */
.fr-lander .shot{height:auto;min-height:0;object-fit:unset;transition:transform 6s ease}
.fr-lander:hover .shot,.fr-lander:focus-within .shot{transform:translateY(calc(-100% + 264px))}
@media (prefers-reduced-motion:reduce){
  .fr-lander .shot{transition:none}
  .fr-lander:hover .shot{transform:none}
}

/* v8 — problem section + CTA bands */
.pain{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:26px}
.pain-card h3{font:700 17px/1.3 var(--syne);margin-bottom:10px}
.pain-card p{font:300 14px/1.65 var(--outfit);color:var(--muted);margin:0}
.pain-close{margin-top:28px;font:italic 500 19px/1.5 var(--corm);color:var(--gold)}
.band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgb(21 21 21/.5)}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:34px;padding-bottom:34px;flex-wrap:wrap}
.band-in p{font:italic 500 clamp(17px,2vw,21px)/1.4 var(--corm);color:var(--cream);margin:0}
@media (max-width:960px){.pain{grid-template-columns:1fr}}

/* v9 — hero flywheel ring replaces the placeholder marquee */
.hero-fw{position:relative;width:min(500px,88vw);aspect-ratio:1;margin:0 auto;justify-self:center}
.hero-fw .fw-ring{inset:44px}
.hero-fw .fw-core b{font-size:44px}
@media (max-width:960px){.hero-fw{width:min(330px,85vw)}.hero-fw .fw-ring{inset:30px}
  .hero-fw .fw-ring i{--r:135px!important}.hero-fw .fw-core b{font-size:32px}}

/* v10 — scroll reveals (JS-gated, capture-safe) + sticky contact steps */
.pre{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.pre.in{opacity:1;transform:none}
@media (min-width:961px){.ct-side{position:sticky;top:96px;align-self:start}}
@media (prefers-reduced-motion:reduce){.pre{opacity:1;transform:none;transition:none}}

/* v11 — real creative in the hero marquee */
.ph img,.ph video{width:100%;display:block}
.fr-static .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* v12 — layout polish */
.dl-vis{height:330px}
.fr-static{width:220px}
.fr-lander{width:210px}
.fr-video{width:158px}

/* v13 — layered flywheel animation */
@keyframes spinRev{to{transform:rotate(-360deg)}}
@keyframes goldPulse{0%,100%{box-shadow:0 0 10px rgb(200 169 110/.35)}50%{box-shadow:0 0 24px rgb(200 169 110/.9)}}
@keyframes killBreathe{0%,100%{opacity:.5}50%{opacity:.1}}
.fw-ring.inner{inset:96px;border-color:#232323;animation:spinRev 42s linear infinite}
.fw-ring.inner i{width:6px;height:6px;margin:-3px;opacity:.45}
.fw-ring i.gold{animation:goldPulse 2.6s ease-in-out infinite}
.fw-ring i.kill{animation:killBreathe 6.5s ease-in-out infinite;animation-delay:var(--kd,0s)}
.fw-core .live{display:inline-block;width:7px;height:7px;border-radius:99px;background:var(--gold);margin-right:8px;animation:goldPulse 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .fw-ring.inner,.fw-ring i.gold,.fw-ring i.kill,.fw-core .live{animation:none}
}

/* v14 spacing */
.hero-proof{margin-top:32px}

/* v16 — proof stat tiles */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:26px 24px}
.stat b{display:block;font:800 clamp(30px,3.4vw,44px)/1 var(--syne);letter-spacing:-.01em;margin-bottom:12px}
.stat b.gold{color:var(--gold)}
.stat span{font:300 13.5px/1.55 var(--outfit);color:var(--muted)}
.stat-note{margin-top:22px;font:italic 500 15px/1.5 var(--corm);color:var(--dim)}
@media (max-width:960px){.stat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.stat-grid{grid-template-columns:1fr}}


/* v17 — week-by-week learning strip */
.wk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.wk-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:24px}
.wk-card.win{border-color:rgb(200 169 110/.45)}
.wk-bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin-bottom:18px}
.wk-bars b{flex:1;height:8%;background:#2e2e2e;border-radius:3px 3px 0 0}
.wk-bars b.g{background:var(--gold)}
.wk-card small{display:block;font:600 10px/1 var(--syne);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.wk-card h4{font:700 16px/1.3 var(--syne);margin-bottom:8px}
.wk-card p{font:300 13.5px/1.6 var(--outfit);color:var(--muted);margin:0}
@media (max-width:960px){.wk-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.wk-grid{grid-template-columns:1fr}}


/* v18 — modern flywheel step cards + lander depth */
.fs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fs-card{border:1px solid var(--border);border-radius:16px;padding:26px 24px;background:linear-gradient(160deg,rgb(255 255 255/.04),rgb(255 255 255/0) 55%),var(--surface);transition:transform .25s,border-color .25s}
.fs-card:hover{transform:translateY(-3px);border-color:rgb(200 169 110/.45)}
.fs-card b{display:block;font:800 13px/1 var(--syne);color:var(--gold);letter-spacing:.18em;margin-bottom:14px}
.fs-card h4{font:700 17px/1.2 var(--syne);margin-bottom:9px}
.fs-card p{font:300 13.5px/1.65 var(--outfit);color:var(--muted);margin:0}
.fr-lander{box-shadow:0 24px 60px rgb(0 0 0/.55),0 0 0 1px rgb(255 255 255/.06)}
.fr-lander .chrome{background:linear-gradient(#2a2a2a,#1e1e1e)}
@media (max-width:640px){.fs-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fs-card,.fs-card:hover{transition:none;transform:none}}


/* v18.1 — two-tile proof band */
.stat-grid{grid-template-columns:repeat(2,1fr);max-width:760px}


/* v19 — four-tile proof band returns */
.stat-grid{grid-template-columns:repeat(4,1fr);max-width:none}
@media (max-width:960px){.stat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.stat-grid{grid-template-columns:1fr}}


/* ---- Sparkles: tiny gold flitters, decorative only ---- */
.sparkles{position:fixed;inset:0;z-index:1;pointer-events:none}
.sparkles i{position:absolute;left:var(--x);top:var(--y);width:var(--s,2px);height:var(--s,2px);border-radius:50%;background:var(--gold-bright);opacity:0;box-shadow:0 0 5px 1px rgb(212 185 126/.95),0 0 14px 3px rgb(200 169 110/.45);animation:twinkle var(--d,5.5s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.sparkles i::before,.sparkles i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:linear-gradient(90deg,transparent,rgb(240 237 232/.8),transparent);transform:translate(-50%,-50%)}
.sparkles i::after{transform:translate(-50%,-50%) rotate(90deg)}
@keyframes twinkle{0%,76%,100%{opacity:0;transform:scale(.25)}84%{opacity:1;transform:scale(1)}92%{opacity:.45;transform:scale(.55)}}
@media (max-width:640px){.sparkles i:nth-child(n+17){display:none}}
@media (prefers-reduced-motion:reduce){.sparkles{display:none}}

/* ---- Ambient glow: blurred gold light pools behind everything ---- */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
 radial-gradient(58vw 42vw at 12% 16%,rgb(200 169 110/.08),transparent 62%),
 radial-gradient(66vw 50vw at 90% 58%,rgb(200 169 110/.065),transparent 62%),
 radial-gradient(52vw 38vw at 48% 102%,rgb(224 121 107/.05),transparent 60%),
 radial-gradient(44vw 32vw at 72% 6%,rgb(240 237 232/.04),transparent 60%)}


/* v20 — proof band de-chromed, hero proof line given presence */
.stat-grid{grid-template-columns:repeat(3,1fr);gap:40px;max-width:940px}
.stat{border:none;border-radius:0;background:none;padding:24px 20px 6px 0;border-top:1px solid rgb(200 169 110/.4)}
.stat b{font-size:clamp(44px,4.8vw,62px);margin-bottom:14px}
.stat span{font-size:14px}
.stat-note{font:600 11px/1.7 var(--syne);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:34px}
.hero-proof{font:600 11px/1.7 var(--syne);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media (max-width:960px){.stat-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
@media (max-width:640px){.stat-grid{grid-template-columns:1fr;gap:22px}}


/* v21 — flywheel page: diagram legend + week-bar contrast */
.fw-legend{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:4px auto 0;font:300 12.5px/1.4 var(--outfit);color:var(--dim)}
.fw-legend span{display:inline-flex;align-items:center;gap:7px}
.fw-legend i{width:8px;height:8px;border-radius:99px;background:var(--dim);opacity:.7;flex:none}
.fw-legend i.k{background:var(--coral);opacity:.6}
.fw-legend i.g{background:var(--gold);opacity:1;box-shadow:0 0 8px rgb(200 169 110/.5)}
.wk-bars b{background:#3f3f3f}
.fw-grid > .fw-stage{grid-column:1;grid-row:1}
.fw-grid > .fw-legend{grid-column:1;grid-row:2;align-self:start}
.fw-grid > .fs-grid{grid-column:2;grid-row:1 / span 2}
@media (max-width:960px){
  .fw-grid > .fw-stage,.fw-grid > .fw-legend,.fw-grid > .fs-grid{grid-column:1;grid-row:auto}
}