@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Layout: same system as the TraderOS site. One idea per screen, huge centered headlines, one product-style window per section, black throughout, gold as the only accent. Committed dark look, not theme-switched. */
:root{
  --black:#05070C; --panel:#0E131F; --panel-2:#141A29; --line:#1F2638;
  --fg:#F2F4F7; --muted:#8A93A6;
  --gold:#FFC83D; --gold-ink:#1A1300; --up:#22D38A; --down:#FF5468; --warn:#FFA83A; --violet:#9E8BFF;
  --sans:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--black);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--black)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 26px;font:600 16px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;background:none;color:inherit}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-line{border-color:var(--line);color:var(--fg)}
.btn-line:hover{border-color:var(--muted)}
.kicker{font-size:15px;font-weight:600;color:var(--gold);letter-spacing:-.01em}

/* nav */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--black) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
nav.top .wrap{display:flex;align-items:center;gap:28px;padding-block:14px}
.logo{font-weight:700;font-size:19px;color:var(--fg);text-decoration:none;letter-spacing:-.04em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo i{width:10px;height:10px;border-radius:3px;background:var(--gold);display:block;transform:rotate(45deg)}
.logo span{color:var(--muted);font-weight:500}
.navlinks{display:flex;gap:24px;font-size:14.5px;color:var(--muted)}
.navlinks a{color:inherit;text-decoration:none}.navlinks a:hover{color:var(--fg)}
.navr{margin-left:auto}
@media (max-width:820px){.navlinks{display:none}}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 30%,transparent),var(--gold));pointer-events:none}

/* hero */
.hero{position:relative;overflow:hidden;text-align:center}
.hero canvas{position:absolute;inset:auto 0 0 0;width:100%;height:62%;display:block;pointer-events:none}
.hero .wrap{position:relative;padding-block:clamp(72px,11vw,128px) clamp(150px,20vw,240px);display:grid;justify-items:center;gap:22px}
.lockup{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;font:500 13px var(--mono);color:var(--muted)}
.lockup .brand{color:var(--fg)}.lockup .brand b{color:var(--gold);font-weight:600}
.lockup em{font-style:normal;color:var(--muted)}
.tag{font:500 11.5px var(--mono);border:1px solid var(--line);padding:3px 10px;border-radius:999px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.term{font:500 14px var(--mono);color:var(--muted);background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-height:38px;display:inline-flex;align-items:center;gap:8px;max-width:100%}
.term .pr{color:var(--gold)}
.term .caret{width:8px;height:16px;background:var(--gold);display:inline-block;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.term .ok{color:var(--up)}
.hero h1{font-size:clamp(40px,6.4vw,80px);max-width:20ch}
.hero h1 .dim{color:var(--muted)}
.hero .sub{display:grid;gap:10px;max-width:50ch}
.hero .sub p{font-size:clamp(17px,2vw,20px);color:var(--muted)}
.hero .sub p.strong{color:var(--fg)}
.note{font-size:13px;color:var(--muted)}

/* signup */
.signup{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:min(480px,100%)}
.signup input{flex:1 1 220px;min-width:0;background:var(--black);border:1px solid var(--line);border-radius:999px;color:var(--fg);padding:14px 20px;font:15px var(--sans)}
.signup input:focus{outline:none;border-color:var(--gold)}
.signup input::placeholder{color:var(--muted)}
.signup .err{flex-basis:100%;color:var(--down);font-size:13px}
.signup .fine{flex-basis:100%;font-size:12px;color:var(--muted)}
.signup .fine a{color:var(--muted)}
.signup .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.signup .cf-turnstile{flex-basis:100%;display:flex;justify-content:center}
.signup button[disabled]{opacity:.6;cursor:progress}
.joined{display:flex;align-items:center;gap:12px;border:1px solid color-mix(in srgb,var(--up) 45%,var(--line));background:color-mix(in srgb,var(--up) 8%,var(--black));border-radius:999px;padding:12px 20px;font-size:15px;animation:pop .3s ease}
.joined i{width:22px;height:22px;border-radius:50%;background:var(--up);display:grid;place-items:center;flex:none}
.joined i::after{content:"";width:9px;height:5px;border-left:2px solid var(--black);border-bottom:2px solid var(--black);transform:rotate(-45deg) translate(1px,-1px)}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* chapter heads */
body > section{position:relative;z-index:2;background:var(--black)}
.chapter{padding-block:clamp(72px,10vw,120px) 0;text-align:center}
.chapter .wrap{display:grid;justify-items:center;gap:16px}
.chapter h2{font-size:clamp(36px,6vw,72px)}
.chapter p{color:var(--muted);font-size:18px;max-width:46ch}
.glow{background:radial-gradient(60% 50% at 50% 0%, color-mix(in srgb,var(--gold) 16%,transparent), transparent 70%)}
.stagebox{padding-block:44px 0}

/* product window */
.win{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 40px 120px -40px #000}
.winbar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font:500 13px var(--mono);color:var(--muted)}
.winbar b{color:var(--fg);font-family:var(--sans);font-size:15px}
.winbar .tag{margin-left:auto}
.pill{font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.pass{background:color-mix(in srgb,var(--up) 16%,transparent);color:var(--up);border-color:transparent}
.pill.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);border-color:transparent}
.pill.fail{background:color-mix(in srgb,var(--down) 16%,transparent);color:var(--down);border-color:transparent}
.pill.gold{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold);border-color:transparent}
.coachline{border-top:1px solid var(--line);padding:16px 18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;font-size:15px}
.coachline .who{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);padding-top:3px;white-space:nowrap}
@media (max-width:560px){.coachline{grid-template-columns:1fr}}

/* who */
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding-top:52px;align-items:start}
@media (max-width:900px){.who{grid-template-columns:1fr;gap:36px}}
.story{display:grid;gap:16px;font-size:18px;color:var(--muted);max-width:56ch}
.story p:first-child{color:var(--fg);font-size:20px}
.story strong{color:var(--fg);font-weight:600}
.side{display:grid;gap:14px}
.hosts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:420px){.hosts{grid-template-columns:1fr}}
.host-gold{--c:var(--gold)}.host-violet{--c:var(--violet)}
.host{background:linear-gradient(180deg,var(--panel),var(--black));border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;gap:14px}
.host .mono{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font:700 26px var(--mono);color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.host h3{font-size:24px}
.host p{color:var(--muted);font-size:14px}
.host small{font:500 11.5px var(--mono);color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.host small b{color:var(--c);font-weight:600}
.backed{border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));background:color-mix(in srgb,var(--gold) 5%,var(--panel));border-radius:22px;padding:20px 22px;display:grid;gap:10px;font-size:15px;color:color-mix(in srgb,var(--fg) 85%,transparent)}
.backed .lbl{display:flex;align-items:center;gap:8px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.backed .lbl i{width:8px;height:8px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.inbox{margin-top:44px}
.mail{display:grid;grid-template-columns:10px 64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);font-size:15px}
.mail:last-of-type{border-bottom:0}
.mail .dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.mail .wk{font:600 13px var(--mono);color:var(--gold)}
.mail .subj{min-width:0}
.mail .subj small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.inbox .foot{border-top:1px solid var(--line);padding:12px 18px;font:500 12px var(--mono);color:var(--muted)}
@media (max-width:560px){.mail{grid-template-columns:10px minmax(0,1fr) auto}.mail .wk{grid-column:2;grid-row:1}.mail .subj{grid-column:2}.mail .pill{grid-row:1;grid-column:3}}

/* trap: glossary vs chart */
.gwin .gtabs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
.seg{display:flex;background:var(--black);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{background:none;border:0;color:var(--muted);font:500 13px var(--sans);padding:7px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--gold);color:var(--gold-ink);font-weight:600}
.gbody{display:grid;grid-template-columns:260px minmax(0,1fr)}
@media (max-width:760px){.gbody{grid-template-columns:1fr}.book{order:2;border-right:0!important;border-top:1px solid var(--line)}}
.book{border-right:1px solid var(--line);padding:18px;display:grid;gap:14px;align-content:start}
.book .lbl{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.book .def{font-size:17px;line-height:1.4;letter-spacing:-.01em}
.book .def::before{content:"\201C";color:var(--gold)}.book .def::after{content:"\201D";color:var(--gold)}
.chk{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;border-top:1px solid var(--line);padding-top:12px}
.gchart{position:relative;padding:14px 8px 8px 14px;min-width:0}
.gchart svg{width:100%;height:auto;display:block;cursor:crosshair;touch-action:manipulation}
.gchart.done svg{cursor:default}
.gask{position:absolute;left:24px;top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 13px var(--sans);background:color-mix(in srgb,var(--black) 80%,transparent);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 14px;max-width:calc(100% - 90px);animation:hintbob 2.2s ease-in-out infinite}
.gask span{color:var(--gold)}
.gask button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:4px 10px;font:500 12px var(--sans);cursor:pointer}
.gask button:hover{color:var(--fg);border-color:var(--muted)}
@keyframes hintbob{50%{transform:translateY(-3px)}}
.coachline .again{align-self:center}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-top:44px;text-align:left}
@media (max-width:760px){.why{grid-template-columns:1fr;gap:20px}}
.why div{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:16px;align-content:start}
.why b{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.why span{color:color-mix(in srgb,var(--fg) 85%,transparent);font-size:16.5px}

/* statement: words light up */
#statement .st-stick{padding-block:clamp(40px,5vw,64px)}
#statement .words{margin:0 auto;max-width:18ch;text-align:center;font-size:clamp(34px,5.6vw,72px);font-weight:600;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
#statement .words span{opacity:var(--w,1);transition:opacity .15s linear}
#statement .words span.hl{color:var(--gold);display:inline-block;position:relative;margin-inline:calc(.14em * var(--f,0));transform:scale(calc(1 + .04 * var(--f,0)));text-shadow:0 0 calc(28px * var(--f,0)) color-mix(in srgb,var(--gold) 55%,transparent)}
#statement .words span.hl::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.06em;border-radius:1em;background:var(--gold);transform:scaleX(var(--f,0));transform-origin:0 50%}
/* pinned only for a short runway (35vh), centered in the screen, so there's little empty space around it */
#statement.tall{height:calc(var(--sth,240px) + 35vh)}
#statement.tall .st-stick{position:sticky;top:var(--stt,30vh)}

/* series: a block of copy */
#series .chapter{padding-top:clamp(48px,6vw,80px)}
.copyblock{max-width:30ch;margin:0 auto;padding-top:36px;display:grid;gap:22px;text-align:center;font-size:clamp(22px,2.8vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.22;text-wrap:balance}
.copyblock p{color:var(--muted)}
.copyblock p.lead{color:var(--fg)}
.copyblock i{display:block;width:44px;height:2px;border-radius:2px;background:var(--gold);margin:6px auto}
.copyblock p.closer span{color:var(--gold)}

/* final */
.final{position:relative;overflow:hidden;text-align:center;margin-top:clamp(40px,6vw,80px)}
.final::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 85% at 50% 100%,rgba(255,200,61,.16),rgba(255,200,61,.05) 40%,rgba(5,7,12,0) 70%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);mask-image:linear-gradient(to bottom,transparent,#000 45%);opacity:var(--cv,1);transform:scale(calc(.85 + .15 * var(--cv,1)));transform-origin:50% 100%}
.final canvas{position:absolute;inset:auto 0 0 0;width:100%;height:70%;pointer-events:none;z-index:1}
.final .wrap{position:relative;z-index:2;padding-block:clamp(90px,12vw,150px) clamp(120px,16vw,200px);display:grid;justify-items:center;gap:20px}
.final h2{font-size:clamp(40px,7vw,84px)}
.final p.lead{color:var(--muted);font-size:18px;max-width:42ch}
.final .kicker{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase}
footer{position:relative;z-index:2;background:var(--black);border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:12.5px}
footer .wrap{display:grid;gap:8px}

/* motion: scroll reveal, spotlight, gold line */
.rv{--r:1;opacity:calc(.4 + .6 * var(--r));transform:translateY(calc((1 - var(--r)) * 36px)) scale(calc(.955 + .045 * var(--r)));will-change:transform,opacity}
html.rv-off .rv{opacity:1;transform:none}
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--gold) 11%,transparent),transparent 60%)}
.spot:hover::after{opacity:1}
.goldline{position:absolute;left:0;top:0;width:90px;pointer-events:none;z-index:6;overflow:visible}
.goldline path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 70%,transparent))}
.goldline path.ghost{stroke:color-mix(in srgb,var(--gold) 14%,transparent);filter:none}
.goldline circle.node{fill:var(--black);stroke:color-mix(in srgb,var(--gold) 30%,transparent);stroke-width:1.4;transition:fill .3s ease,stroke .3s ease}
.goldline circle.node.lit{fill:var(--gold);stroke:var(--gold)}
.goldline circle.head{fill:var(--gold);filter:drop-shadow(0 0 8px var(--gold))}
@media (max-width:1259px){.goldline{display:none}}
@media (prefers-reduced-motion:reduce){.term .caret,.gask{animation:none}.spot::after{display:none}.joined{animation:none}}
@media (max-width:700px){.hero .wrap{padding-top:56px;padding-bottom:120px;gap:18px}.chapter{padding-top:clamp(56px,14vw,80px)}}
/* privacy page */
.legal{display:grid;gap:14px;max-width:68ch;padding-block:56px 80px}
.legal h1{font-size:clamp(36px,6vw,56px)}
.legal h2{font-size:20px;letter-spacing:-.02em;margin-top:14px}
.legal p{color:color-mix(in srgb,var(--fg) 85%,transparent)}
