/* Pick The Outcome: one-page site. Mobile first. */
:root{
  --ink:#050a12;
  --night:#07101c;
  --navy:#0a1727;
  --panel:#0d1b2d;
  --panel2:#112338;
  --line:rgba(160,190,230,.13);
  --line2:rgba(160,190,230,.24);
  --text:#e9eef5;
  --soft:#c6d2e1;
  --muted:#93a5bc;
  --c-green:#8BE36A;
  --c-green-ink:#08150a;
  --c-yellow:#F2D641;
  --c-red:#EC124B;
  --c-red-hot:#ff2c62;
  --c-blue:#2f7bff;
  --c-amber:#F3AC44;
  --f-display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:16px;
  --maxw:1180px;
  --head-h:60px;
  --r:16px;
}
@media (min-width:640px){:root{--gut:28px}}
@media (min-width:1100px){:root{--gut:40px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 8px)}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 14px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;font-synthesis:none;text-transform:uppercase;margin:0;letter-spacing:.005em;line-height:.92}
button{font:inherit;color:inherit}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.g{color:var(--c-green)}
.y{color:var(--c-yellow)}
.rd{color:var(--c-red-hot)}
.am{color:var(--c-amber)}
.nw{white-space:nowrap}
:focus-visible{outline:3px solid var(--c-green);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--c-green);color:var(--c-green-ink);padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:10px}

/* ---------- film grain + rain ---------- */
.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
#rain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:55;opacity:.6}

/* ---------- labels: our HUD tags ---------- */
.hud-tag{display:inline-flex;align-items:stretch;gap:6px;font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.hud-tag b{display:inline-flex;align-items:center;background:var(--c-red);color:#fff;padding:5px 7px 5px 8px;border-radius:3px;font-weight:800}
.hud-tag span{display:inline-flex;align-items:center;border:1.5px solid rgba(255,255,255,.75);color:#fff;padding:3.5px 7px;border-radius:3px}
.hud-tag.dim span{border-color:var(--line2);color:var(--soft)}
.kicker{font-family:var(--f-mono);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- buttons ---------- */
.btn,a.gumroad-button.btn{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:10px 16px;border-radius:12px;text-decoration:none;cursor:pointer;text-align:center;line-height:1;
  font-family:var(--f-display);font-weight:400;font-size:20px;letter-spacing:.03em;text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;-webkit-tap-highlight-color:transparent}
.btn small{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;opacity:.8}
.btn .bi{display:inline-flex;align-items:center;gap:8px}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn-go,a.gumroad-button.btn-go{background:var(--c-green);color:var(--c-green-ink);border:0;box-shadow:0 10px 30px rgba(139,227,106,.22),inset 0 -3px 0 rgba(0,0,0,.18);font-family:var(--f-display);border-radius:12px;padding:10px 16px}
.btn-go:hover,a.gumroad-button.btn-go:hover{background:#9bef7b;color:var(--c-green-ink);transform:translateY(-2px);box-shadow:0 14px 36px rgba(139,227,106,.32),inset 0 -3px 0 rgba(0,0,0,.18)}
.btn-go:active,a.gumroad-button.btn-go:active{transform:translateY(0);box-shadow:0 6px 18px rgba(139,227,106,.25),inset 0 -2px 0 rgba(0,0,0,.18)}
a.gumroad-button .logo-full{display:none!important}
.btn-line{background:rgba(5,10,18,.55);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;max-width:470px}
.btn-row .btn{font-size:18px;padding:10px 10px}
.btn-row .btn svg{width:13px;height:13px}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:50;height:var(--head-h);background:rgba(5,10,18,.74);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.head .wrap{height:100%;display:flex;align-items:center;gap:12px}
.mark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#fff;flex:0 0 auto}
.mark-ab{display:inline-flex;gap:3px}
.mark-ab i{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:4px;font-family:var(--f-display);font-style:normal;font-size:13px;line-height:1}
.mark-ab i:first-child{background:var(--c-yellow);color:#111}
.mark-ab i:last-child{background:var(--c-red);color:#fff}
.mark-t{font-family:var(--f-display);font-size:18px;letter-spacing:.04em;line-height:1;text-transform:uppercase;white-space:nowrap}
.nav{display:none;gap:24px;margin-left:28px}
.nav a{font-size:14px;font-weight:600;color:var(--soft);text-decoration:none}
.nav a:hover{color:#fff}
.head-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.danger{display:flex;align-items:center;gap:7px}
.danger-l{display:none;font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--soft)}
.danger-m{display:flex;gap:2.5px}
.danger-m i{display:block;width:8px;height:11px;border-radius:1.5px;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.38);transition:background-color .25s ease,box-shadow .25s ease}
.danger-m i.on{background:var(--c-red);box-shadow:0 0 7px rgba(236,18,75,.75)}
.danger.max .danger-m i.on{animation:blink .43s steps(1,end) infinite}
@keyframes blink{0%{opacity:1}50%{opacity:.28}100%{opacity:1}}
.motion-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;min-width:36px;padding:0 9px;border-radius:9px;border:1px solid var(--line2);background:rgba(255,255,255,.03);cursor:pointer}
.motion-btn:hover{border-color:rgba(255,255,255,.5)}
.motion-btn .ic{position:relative;width:12px;height:12px}
.motion-btn .ic::before,.motion-btn .ic::after{content:"";position:absolute;top:0;width:4px;height:12px;background:#fff;border-radius:1px}
.motion-btn .ic::before{left:1px}.motion-btn .ic::after{right:1px}
.motion-off .motion-btn .ic::before{left:2px;width:0;height:0;background:none;border-radius:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--c-green)}
.motion-off .motion-btn .ic::after{display:none}
.motion-btn .tx{display:none;font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
a.gumroad-button.btn.head-cta{display:none}
@media (min-width:420px){.danger-l{display:inline}}
@media (max-width:359px){.mark-t{font-size:16px}.mark-ab i{width:17px;height:17px}}
@media (min-width:960px){
  .nav{display:flex}
  .motion-btn .tx{display:inline}
  a.gumroad-button.btn.head-cta{display:inline-flex}
  a.gumroad-button.btn.head-cta{min-height:38px;padding:8px 14px;font-size:16px;border-radius:9px}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:clip;padding:22px 0 60px;isolation:isolate}
.hero-scene{position:absolute;left:0;right:0;top:30%;bottom:0;z-index:-1;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.hero-scene img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;opacity:.8}
.hero-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 40%,rgba(5,10,18,.15),rgba(5,10,18,.7) 70%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(80% 50% at 10% 0%,rgba(47,123,255,.12),transparent 60%),radial-gradient(70% 40% at 100% 10%,rgba(236,18,75,.10),transparent 60%),var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center}
.hero-copy{position:relative}
.hero .hud-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:18px}
.hero h1{margin:0 0 18px}
.h1-fare{display:block;color:var(--c-green);font-size:clamp(84px,25.5vw,176px);line-height:.9;margin-bottom:2px;letter-spacing:.01em;text-shadow:0 0 40px rgba(139,227,106,.18)}
.h1-seal{display:block;color:#fff;font-size:clamp(56px,16.8vw,112px);line-height:.9}
.h1-q{display:block;margin-top:12px;font-size:clamp(31px,9vw,56px);line-height:.95;color:#fff}
.h1-q .y{color:var(--c-yellow)}
.h1-q .rd{color:var(--c-red-hot)}
.hero-pitch{font-size:17px;line-height:1.5;color:var(--soft);max-width:33ch;margin:0 0 22px}
.hero-pitch strong{color:#fff;font-weight:700}
.hero-note{margin:14px 0 0;white-space:nowrap;font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* phone */
.phone-stage{position:relative;justify-self:center;width:min(66vw,290px);margin:6px 0 0}
.phone-glow{position:absolute;left:50%;top:44%;width:190%;height:85%;transform:translate(-50%,-50%);pointer-events:none;z-index:-1}
.phone-glow i{position:absolute;inset:0;border-radius:50%;filter:blur(36px);opacity:0}
.phone-glow .r{background:radial-gradient(closest-side,rgba(236,18,75,.85),rgba(236,18,75,0));transform:translateX(-18%);animation:lbr 1.1s ease-in-out infinite}
.phone-glow .b{background:radial-gradient(closest-side,rgba(47,123,255,.85),rgba(47,123,255,0));transform:translateX(18%);animation:lbb 1.1s ease-in-out infinite}
@keyframes lbr{0%,100%{opacity:.75}50%{opacity:.08}}
@keyframes lbb{0%,100%{opacity:.08}50%{opacity:.8}}
.phone-floor{position:absolute;left:50%;bottom:-34px;width:140%;height:70px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(160,190,255,.25),transparent);filter:blur(8px);pointer-events:none;z-index:-1}
.phone{position:relative;border-radius:14% / 6.6%;padding:3.6%;background:linear-gradient(145deg,#26364c,#0c1522 45%,#1a2738);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.screen{position:relative;aspect-ratio:9/16;border-radius:10.5% / 5.9%;overflow:hidden;background:#060b13}
.screen video,.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen::after{content:"";position:absolute;top:2.2%;left:50%;width:30%;height:3.3%;transform:translateX(-50%);background:#000;border-radius:99px;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.chip{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(6,12,22,.86);border:1px solid var(--line2);border-radius:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.chip-vote{bottom:13%;right:-15%;color:#fff}
.chip-vote svg{width:14px;height:14px}
.chip-vote .y{color:var(--c-yellow)}.chip-vote .rd{color:var(--c-red-hot)}
.phone-cap{margin:16px 0 0;text-align:center;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (min-width:900px){
  .hero{padding:56px 0 90px;min-height:min(calc(100svh - var(--head-h)),940px);display:flex;align-items:center}
  .hero>.wrap{width:100%}
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px}
  .hero-scene{top:0;left:auto;width:64%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 85%,rgba(0,0,0,.6) 100%),linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 38%);}
  .hero-scene img{object-position:50% 34%}
  .hero-scene::after{background:linear-gradient(90deg,var(--ink) 0%,rgba(5,10,18,.55) 30%,rgba(5,10,18,.1) 60%,rgba(5,10,18,.25) 100%)}
  .phone-stage{width:min(318px,26vw);margin:0}
  .phone{transform-origin:50% 60%}
  .h1-fare{font-size:clamp(110px,12.5vw,178px)}
  .h1-seal{font-size:clamp(70px,8vw,116px)}
  .h1-q{font-size:clamp(38px,4.1vw,58px)}
  .hero-pitch{font-size:19px;max-width:36ch}
  .btn-row{grid-template-columns:auto auto;justify-content:start}
  .btn-row .btn{min-width:210px;padding:12px 22px;font-size:20px}
  .btn-row .btn svg{width:15px;height:15px}
}

/* ---------- sections ---------- */
.sec{position:relative;padding:72px 0}
.sec-head{margin-bottom:30px}
.sec-head .hud-tag{margin-bottom:16px}
.sec h2{font-size:clamp(46px,13.2vw,96px);line-height:.9;color:#fff}
.sec-sub{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--soft);max-width:44ch}
@media (min-width:900px){.sec{padding:100px 0}.sec-sub{font-size:19px}
  .sec-head.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px 48px;align-items:end}
  .sec-head.split .hud-tag{grid-column:1 / -1;justify-self:start;margin-bottom:0}
  .sec-head.split .sec-sub{margin:0 0 6px}
}

/* ---------- proof ---------- */
.proof{background:linear-gradient(180deg,var(--ink),var(--night) 40%,var(--ink));border-top:1px solid var(--line)}
.stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.stat{position:relative;background:linear-gradient(180deg,rgba(17,35,56,.85),rgba(13,27,45,.85));border:1px solid var(--line);border-radius:var(--r);padding:18px 16px 16px;overflow:hidden}
.stat-n{display:block;font-family:var(--f-display);font-size:clamp(46px,13vw,80px);line-height:.9;color:var(--c-green);letter-spacing:.01em}
.stat-n .u{font-size:.55em;margin-left:4px;color:var(--c-green)}
.stat-l{display:block;margin-top:10px;font-size:14px;line-height:1.4;color:var(--soft);font-weight:500}
.stat-l b{color:#fff;font-weight:700}
.stat-big{grid-column:1 / -1;padding:22px 18px 18px}
.stat-wide{grid-column:1 / -1;display:flex;align-items:center;gap:16px}
.stat-wide .stat-l{margin-top:0}
.stat-big .stat-n{font-size:clamp(76px,23vw,150px)}
.plat{margin-top:16px}
.plat-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.06);gap:2px}
.plat-bar i{display:block;height:100%;width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.plat-bar .ig{background:linear-gradient(90deg,#f2d641,#ff8a3d,#ec124b)}
.plat-bar .tt{background:linear-gradient(90deg,#25f4ee,#8BE36A)}
.plat-bar .yt{background:#ff3b3b}
.in .plat-bar .ig{width:47.04%}
.in .plat-bar .tt{width:51.35%}
.in .plat-bar .yt{width:1.6%;min-width:4px}
.plat-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;padding:0;list-style:none;font-family:var(--f-mono);font-size:11.5px;font-weight:600;color:var(--soft);letter-spacing:.04em}
.plat-key li{display:inline-flex;align-items:center;gap:7px}
.plat-key li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--c)}
.proof-note{margin:18px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:76ch}
.proof-note strong{color:var(--soft)}
@media (min-width:900px){
  .stats{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .stat-big{grid-column:auto;grid-row:span 1}
  .stat-wide{grid-column:auto;display:block}
  .stat-wide .stat-l{margin-top:10px}
  .stat-big .stat-n{font-size:clamp(84px,8vw,124px)}
  .stat{padding:24px 22px 20px}
  .stat-n{font-size:clamp(56px,5vw,80px)}
}

/* ---------- film bands (video backdrops) ---------- */
.band{position:relative;height:clamp(210px,58vw,560px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 62%,transparent 100%)}
.band video,.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,10,18,.1),rgba(5,10,18,.25))}
.band::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(130% 90% at 50% 45%,transparent 45%,rgba(5,10,18,.75))}
.band-cap{position:absolute;right:var(--gut);top:16px;z-index:2;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(5,10,18,.55);padding:5px 8px;border-radius:5px}
.band-cap::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-red-hot);margin-right:7px;vertical-align:1px;animation:blink 1.2s steps(1,end) infinite}
.after-band{margin-top:clamp(-120px,-14vw,-60px);position:relative;z-index:2}
@media (min-width:900px){
  .band{height:460px}
  .band video,.band img{left:50%;width:min(1120px,100%);transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
  .band-cap{right:calc(50% - 540px)}
  .after-band{margin-top:-130px}
}

/* ---------- story ---------- */
.story{padding-top:0;background:var(--ink)}
.eps{list-style:none;margin:8px 0 0;padding:0;position:relative}
.eps::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:0;border-left:2px dashed rgba(243,172,68,.45)}
.ep{position:relative;padding-left:44px;margin:0 0 44px}
.ep-dot{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:8px;background:var(--c-amber);color:#1b1205;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:16px;box-shadow:0 0 0 4px var(--ink),0 0 20px rgba(243,172,68,.45)}
.ep-card{display:grid;grid-template-columns:38% minmax(0,1fr);gap:0 16px;background:linear-gradient(180deg,rgba(17,35,56,.75),rgba(10,23,39,.75));border:1px solid var(--line);border-radius:18px;padding:16px;overflow:hidden}
.ep-media{grid-column:1;grid-row:1;align-self:start;border-radius:14px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.ep-head{grid-column:2;grid-row:1;align-self:center}
.ep-text{grid-column:1 / -1;margin-top:16px}
.ep-text p:last-child{margin-bottom:0}
.ep-media .screen{border-radius:0}
.ep-media .screen::after{display:none}
.ep .hud-tag{margin:2px 0 12px}
.ep h3{font-size:clamp(30px,8.6vw,52px);color:#fff;margin:0}
.ep p{font-size:15.5px;line-height:1.55;color:var(--soft)}
.ep p strong{color:#fff}
.vote{grid-column:1 / -1;margin-top:16px;background:rgba(5,10,18,.55);border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px}
.ep .vote-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin:0 0 12px;font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vrow{margin:0 0 12px}
.vrow-t{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:14px;font-weight:600;color:#fff;line-height:1.3}
.vrow-t .lt{flex:0 0 26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:16px}
.vrow-a .lt{background:var(--c-yellow);color:#111}
.vrow-b .lt{background:var(--c-red);color:#fff}
.vrow-t .n{margin-left:auto;font-family:var(--f-mono);font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--soft)}
.vbar{height:10px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.vbar i{display:block;height:100%;width:0;border-radius:99px;transition:width 1.6s cubic-bezier(.2,.8,.2,1) .15s}
.vrow-a .vbar i{background:var(--c-yellow);box-shadow:0 0 14px rgba(242,214,65,.5)}
.vrow-b .vbar i{background:var(--c-red)}
.in .vrow-a .vbar i{width:71.1%}
.in .vrow-b .vbar i{width:28.9%}
.verdict{display:inline-flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 10px;border-radius:6px;border:1.5px solid var(--c-green);color:var(--c-green);font-family:var(--f-display);font-size:17px;letter-spacing:.04em;text-transform:uppercase;transform:rotate(-1.5deg)}
.ep .vote-note{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (min-width:900px){
  .eps::before{left:17px}
  .ep{padding-left:64px;margin-bottom:56px}
  .ep-dot{width:36px;height:36px;font-size:20px;border-radius:10px}
  .ep-card{grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:0 32px;padding:26px}
  .ep-media{grid-row:1 / span 3}
  .ep-head{grid-column:2;align-self:start}
  .ep-head h3{margin-top:2px}
  .ep-text{grid-column:2;margin-top:16px}
  .ep p{font-size:17px}
  .vote{grid-column:2;margin-top:18px}
}

/* decision */
.decide{position:relative;margin-top:16px;border-radius:24px;border:1px solid var(--line2);background:radial-gradient(100% 70% at 50% 0%,rgba(47,123,255,.13),transparent 60%),radial-gradient(90% 60% at 50% 100%,rgba(236,18,75,.12),transparent 60%),var(--night);padding:26px 18px 22px;overflow:hidden;isolation:isolate}
.decide-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;grid-template-areas:"head" "phone" "act"}
.d-head{grid-area:head}.decide .phone-stage{grid-area:phone}.d-act{grid-area:act}
.decide .phone-stage{width:min(58vw,260px)}
.decide h2{font-size:clamp(46px,13vw,90px)}
.decide h2 .y{color:var(--c-yellow)}.decide h2 .rd{color:var(--c-red-hot)}
.decide-lead{margin:14px 0 0;font-size:16.5px;color:var(--soft);max-width:40ch}
.choices{margin-top:4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:14px;text-decoration:none;background:rgba(5,10,18,.6);border:2px solid var(--line2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.choice svg{width:26px;height:26px}
.choice b{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,7.4vw,38px);line-height:.95;letter-spacing:.02em}
.choice span{font-size:13px;line-height:1.35;color:var(--soft);font-weight:600}
.choice small{margin-top:auto;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.choice-a{border-color:rgba(242,214,65,.55)}
.choice-a b,.choice-a svg{color:var(--c-yellow)}
.choice-b{border-color:rgba(236,18,75,.6)}
.choice-b b,.choice-b svg{color:var(--c-red-hot)}
.choice-a:hover{border-color:var(--c-yellow);box-shadow:0 0 26px rgba(242,214,65,.25);transform:translateY(-2px)}
.choice-b:hover{border-color:var(--c-red-hot);box-shadow:0 0 26px rgba(236,18,75,.3);transform:translateY(-2px)}
.choice-a{animation:pulseA 2.2s ease-in-out infinite}
.choice-b{animation:pulseB 2.2s ease-in-out infinite}
@keyframes pulseA{0%,100%{box-shadow:0 0 0 rgba(242,214,65,0)}25%{box-shadow:0 0 22px rgba(242,214,65,.28)}50%{box-shadow:0 0 0 rgba(242,214,65,0)}}
@keyframes pulseB{0%,100%{box-shadow:0 0 0 rgba(236,18,75,0)}50%,60%{box-shadow:0 0 0 rgba(236,18,75,0)}75%{box-shadow:0 0 22px rgba(236,18,75,.32)}}
.decide-cta{margin:16px 0 0;font-size:15px;color:#fff;font-weight:600}
.fine{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (min-width:900px){
  .decide{padding:48px 48px 44px}
  .decide-grid{grid-template-columns:300px minmax(0,1fr);gap:8px 56px;grid-template-areas:"phone head" "phone act";align-items:end}
  .d-act{align-self:start}
  .decide .phone-stage{width:290px}
  .choice{padding:18px}
  .choice span{font-size:14.5px}
}

/* ---------- guide ---------- */
.guide{padding-top:0;background:linear-gradient(180deg,var(--ink),var(--night) 30%,var(--night) 80%,var(--ink))}
.guide-top{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:center}
.box-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 22px;padding:0;list-style:none}
.box-chips li{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--soft);background:rgba(255,255,255,.02)}
.box-chips li b{color:var(--c-green);font-weight:800}
.pages{position:relative;height:clamp(300px,92vw,470px);max-width:520px;width:100%;justify-self:center}
.page{position:absolute;top:6%;width:56%;aspect-ratio:640/905;border-radius:6px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);background:#fff;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.page img{width:100%;height:100%;object-fit:cover}
.page-1{left:0;transform:rotate(-8deg) translateY(6%)}
.page-2{left:22%;z-index:2;transform:rotate(0) translateY(-2%)}
.page-3{right:0;transform:rotate(8deg) translateY(8%)}
.pages:hover .page-1{transform:rotate(-11deg) translate(-4%,4%)}
.pages:hover .page-3{transform:rotate(11deg) translate(4%,6%)}
.pages-cap{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:44px}
.card{position:relative;background:linear-gradient(180deg,rgba(17,35,56,.8),rgba(12,25,41,.8));border:1px solid var(--line);border-radius:var(--r);padding:20px 18px 18px;transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:rgba(139,227,106,.35)}
.card-n{display:inline-block;font-family:var(--f-mono);font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--c-green);margin-bottom:12px}
.card h3{font-size:clamp(26px,7vw,32px);color:#fff;line-height:.98;margin:0 0 10px}
.card p{font-size:15px;color:var(--soft);margin:0}
.lesson{margin-top:12px;border:1.5px dashed rgba(243,172,68,.6);background:linear-gradient(180deg,rgba(243,172,68,.07),rgba(243,172,68,.02));border-radius:var(--r);padding:22px 18px 18px}
.lesson .hud-tag b{background:var(--c-amber);color:#1b1205}
.lesson h3{font-size:clamp(28px,7.6vw,40px);color:#fff;margin:14px 0 14px}
.lesson-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}
.lesson-col{background:rgba(5,10,18,.5);border:1px solid var(--line);border-radius:12px;padding:14px}
.lesson-col h4{margin:0 0 8px;font-family:var(--f-mono);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-amber)}
.lesson-col p{margin:0;font-size:15px;color:var(--soft)}
.lesson-col p strong{color:#fff}
.track{margin:14px 0 2px}
.track-bar{position:relative;height:12px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.track-bar i{position:absolute;top:0;bottom:0;left:54.17%;width:16.67%;border-radius:99px;background:var(--c-amber);box-shadow:0 0 16px rgba(243,172,68,.6);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .2s}
.in .track-bar i{transform:scaleX(1)}
.motion-off .track-bar i{transition:none}
.track-x{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--f-mono);font-size:10px;color:var(--muted);letter-spacing:.04em}
.lesson-foot{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.made{margin:26px 0 0;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--soft);max-width:64ch}
.made svg{flex:0 0 22px;width:22px;height:22px;color:var(--c-green);margin-top:1px}
.guide-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.guide-cta .btn{min-width:240px}
.guide-cta p{margin:0;font-size:14px;color:var(--muted)}
@media (min-width:700px){.cards{grid-template-columns:1fr 1fr}.lesson-grid{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:900px){
  .guide-top{grid-template-columns:1fr 1fr;gap:56px}
  .pages{order:-1;height:470px}
  .cards{grid-template-columns:1fr 1fr 1fr;gap:14px}
  .card{padding:24px 22px 22px}
  .lesson{padding:28px 28px 22px}
}

/* ---------- price ---------- */
.price{overflow:clip;isolation:isolate}
.price-bg{position:absolute;left:0;right:0;top:0;height:460px;z-index:-1;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 70% 42% at 50% 50%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 70% 42% at 50% 50%,#000 25%,transparent 78%)}
.price-bg video{position:absolute;left:50%;top:50%;width:max(100%,720px);height:auto;aspect-ratio:9/16;max-width:none;transform:translate(-50%,-69%);opacity:1}
.price-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,18,.2),rgba(5,10,18,.45))}
.price .sec-head{text-align:center}
.price .sec-head .hud-tag{justify-content:center}
.price .sec-sub{margin-left:auto;margin-right:auto}
.ticket{position:relative;max-width:540px;margin:0 auto;background:linear-gradient(180deg,#10223a,#0b1829);border:1px solid var(--line2);border-radius:20px;padding:24px 20px 22px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.ticket::before,.ticket::after{content:"";position:absolute;top:118px;width:22px;height:22px;border-radius:50%;background:var(--ink);border:1px solid var(--line2)}
.ticket::before{left:-12px;clip-path:inset(0 0 0 50%)}
.ticket::after{right:-12px;clip-path:inset(0 50% 0 0)}
.t-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;height:100px}
.t-label{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.t-price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.t-price b{font-family:var(--f-display);font-weight:400;font-size:76px;line-height:.85;color:var(--c-green);letter-spacing:.01em}
.t-price span{font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.t-stamp{flex:0 0 auto;text-align:center;border:2px solid rgba(139,227,106,.7);color:var(--c-green);border-radius:8px;padding:7px 9px;font-family:var(--f-mono);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.35;transform:rotate(4deg)}
.t-cut{height:0;border-top:2px dashed var(--line2);margin:18px -20px 18px}
.t-lines{margin:0;padding:0;list-style:none}
.t-lines li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.4;color:#fff}
.t-lines li:last-child{border-bottom:0}
.t-lines .k{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.t-lines .v small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.early{margin:16px 0 18px;padding:14px;border:1.5px dashed rgba(243,172,68,.7);border-radius:12px;background:rgba(243,172,68,.06)}
.early-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.early-h .code{font-family:var(--f-mono);font-weight:800;font-size:15px;letter-spacing:.16em;color:#1b1205;background:var(--c-amber);padding:5px 9px;border-radius:5px}
.early-h span:not(.code){font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-amber)}
.early p{margin:0;font-size:14.5px;color:var(--soft)}
.early p strong{color:#fff}
.ticket .btn{width:100%;min-height:62px;font-size:23px}
.t-fine{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center}
@media (min-width:900px){.price-bg{height:640px}.ticket{padding:30px 30px 26px}.t-cut{margin:20px -30px}.ticket::before,.ticket::after{top:124px}}

/* ---------- faq ---------- */
.faq{background:var(--ink)}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:900px){.faq-layout{grid-template-columns:380px minmax(0,1fr);gap:48px;align-items:start}.faq h2{font-size:84px}.faq-layout .sec-head{position:sticky;top:calc(var(--head-h) + 30px)}}
.qa{border:1px solid var(--line);border-radius:14px;background:rgba(13,27,45,.6);overflow:hidden}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 16px;font-weight:700;font-size:16.5px;line-height:1.35;color:#fff}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:0 0 14px;height:14px;margin-left:auto;background:linear-gradient(var(--c-green),var(--c-green)) center/14px 2px no-repeat,linear-gradient(var(--c-green),var(--c-green)) center/2px 14px no-repeat;transition:transform .25s ease}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{background:rgba(255,255,255,.02)}
.qa div{padding:0 16px 18px;color:var(--soft);font-size:15.5px;line-height:1.6}
.qa div p:last-child{margin:0}
@media (min-width:900px){.qa summary{padding:20px 22px;font-size:18px}.qa div{padding:0 22px 20px;font-size:16.5px}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:46px 0 120px;background:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:26px}
.foot-tag{margin:12px 0 0;color:var(--muted);font-size:14.5px}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.socials a{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--line2);border-radius:10px;text-decoration:none;font-weight:600;font-size:14.5px;color:#fff}
.socials a:hover{border-color:#fff}
.socials svg{width:18px;height:18px}
.foot-small{font-size:13px;line-height:1.6;color:var(--muted)}
.foot-small a{color:var(--soft)}
.foot-small p{margin:0 0 6px}
@media (min-width:900px){.foot{padding-bottom:56px}.foot-grid{grid-template-columns:1.1fr 1fr 1.2fr;align-items:start}}

/* ---------- sticky buy bar (phones) ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:52;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(5,10,18,0),rgba(5,10,18,.92) 30%);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.buybar.show{transform:translateY(0);pointer-events:auto}
.buybar-in{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;max-width:520px;margin:0 auto}
.buybar .btn{min-height:52px;font-size:19px;flex-direction:row;gap:10px}
.buybar .btn-line{padding:8px 14px;font-size:16px}
.buybar .btn small{font-size:11px;opacity:.85}
@media (min-width:960px){.buybar{display:none}}

/* ---------- scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}

/* ---------- motion off (toggle or reduced motion) ---------- */
.motion-off *,.motion-off *::before,.motion-off *::after{animation-play-state:paused!important}
.motion-off .grain{animation:none}
.motion-off #rain{display:none}
.motion-off .phone,.motion-off .choice-a,.motion-off .choice-b{animation:none}
.motion-off .phone-glow .r{animation:none;opacity:.55}
.motion-off .phone-glow .b{animation:none;opacity:.45}
.motion-off .js .reveal,.js.motion-off .reveal{opacity:1;transform:none;transition:none}
.motion-off .plat-bar i,.motion-off .vbar i{transition:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Phones held sideways and other short, wide screens: size the big type by height too, so the hero fits */
@media (orientation: landscape) and (max-height: 560px){
  .h1-fare{font-size:min(25.5vw,26vh,176px)}
  .h1-seal{font-size:min(16.8vw,17vh,112px)}
  .h1-q{font-size:min(9vw,9.5vh,56px);margin-top:8px}
  .sec h2{font-size:min(13.2vw,17vh,96px)}
  .decide h2{font-size:min(13vw,17vh,90px)}
  .stat-big .stat-n{font-size:min(23vw,26vh,150px)}
  .stat-n{font-size:min(13vw,15vh,80px)}
  .phone-stage,.decide .phone-stage{width:min(230px,46vh)}
  .band{height:min(58vw,70vh,560px)}
  .hero{min-height:auto;padding-top:28px;padding-bottom:48px}
}

/* guide section: a phone showing what you'll make, in place of paper pages */
.make-stage{justify-self:center;width:min(64vw,270px)}
@media (min-width:900px){.make-stage{order:-1;width:min(300px,24vw)}}
.t-price small.t-then{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* Breathing room (Sid, 21 Oct: "a bit squished together") */
.hero h1{margin:0 0 26px}
.h1-fare{line-height:.98;margin-bottom:12px}
.h1-seal{line-height:.98}
.h1-q{margin-top:18px;line-height:1.05}
.hero-pitch{line-height:1.6;margin:0 0 30px}
.hero-note{margin-top:18px}
.hero .phone-stage{margin-top:40px}
.sec{padding:92px 0}
.sec-head{margin-bottom:40px}
.sec h2{line-height:.98}
.sec-sub{line-height:1.6}
.card,.ep,.qa{margin-bottom:6px}
@media (max-width:520px){
  .h1-fare{font-size:clamp(76px,22.5vw,150px)}
  .h1-seal{font-size:clamp(52px,15vw,100px)}
  .h1-q{font-size:clamp(29px,8.4vw,50px)}
  .btn-row{grid-template-columns:1fr;gap:14px;max-width:none}
  .btn-row .btn{padding:16px 18px}
}
@media (min-width:900px){.sec{padding:120px 0}}
@media (max-width:520px){.btn-row .btn-go{order:-1}}

/* keep decorative layers (phone glow, floor light, grain) inside the screen, so phones never slide sideways */
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
.hero,.sec,.decide,.buybar{overflow-x:clip}

/* phones: skip the heaviest effects (they make scrolling stutter and slow the first screen) */
@media (max-width:600px){
  .grain{display:none}
  .chip,.buybar,.buybar-in,.phone-stage *,.head,.head *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}