:root{--chart-bg:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 400 400' fill='none' stroke='%2329444A' stroke-width='.6'%3E%3Ccircle r='190'/%3E%3Ccircle r='150'/%3E%3Ccircle r='96'/%3E%3Cpath d='M0-200V200M-200 0H200M-141-141 141 141M141-141-141 141' stroke-width='.5'/%3E%3Cpath d='M0-190 14-14 190 0 14 14 0 190-14 14-190 0-14-14Z' stroke-width='.8'/%3E%3Cpath d='M-70-170 70 170M70-170-70 170M-170-70 170 70M170-70-170 70' stroke-width='.3'/%3E%3C/svg%3E") no-repeat -8% 112%/min(980px,120vw),
linear-gradient(rgba(41,68,74,.22) 1px,transparent 1px) 0 0/64px 64px,
linear-gradient(90deg,rgba(41,68,74,.22) 1px,transparent 1px) 0 0/64px 64px;--midnight:#071116;--slate:#102229;--teal:#29444A;--gold:#C88A45;--bronze:#9B6232;--champagne:#E3B878;--ivory:#F4EFE6;--silver:#9BA7A9;
--metal:linear-gradient(100deg,#9B6232 0%,#C88A45 38%,#E3B878 72%,#F3D39B 100%);
--serif:"Libre Caslon Display",Georgia,serif;--ital:"Libre Caslon Text",Georgia,serif;--sans:"Hanken Grotesk",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--gut:clamp(20px,5vw,72px);--side:0px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0}
body{margin:0;background:var(--midnight);color:var(--ivory);font:400 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{display:none;content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 400 400' fill='none' stroke='%2329444A' stroke-width='.6'%3E%3Ccircle r='190'/%3E%3Ccircle r='150'/%3E%3Ccircle r='96'/%3E%3Cpath d='M0-200V200M-200 0H200M-141-141 141 141M141-141-141 141' stroke-width='.5'/%3E%3Cpath d='M0-190 14-14 190 0 14 14 0 190-14 14-190 0-14-14Z' stroke-width='.8'/%3E%3Cpath d='M-70-170 70 170M70-170-70 170M-170-70 170 70M170-70-170 70' stroke-width='.3'/%3E%3C/svg%3E") no-repeat -8% 112%/min(980px,120vw),
linear-gradient(rgba(41,68,74,.22) 1px,transparent 1px) 0 0/64px 64px,
linear-gradient(90deg,rgba(41,68,74,.22) 1px,transparent 1px) 0 0/64px 64px;opacity:.55}
a{color:var(--champagne)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--midnight);padding:8px 14px;font:500 14px var(--mono);text-decoration:none}.skip:focus{top:40px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut);position:relative}
.preview-bar{position:fixed;top:0;left:0;right:0;z-index:60;height:28px;background:var(--gold);color:var(--midnight);font:500 11px/28px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.top{position:fixed;top:28px;left:0;right:0;z-index:50;height:52px;background:var(--midnight);border-bottom:1px solid var(--teal)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:none;margin:0}
.mark{text-decoration:none;display:flex;align-items:baseline;gap:10px}
.mark b{font:400 20px var(--serif);letter-spacing:.2em;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.mark span{font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.back{font:400 13px var(--mono);color:var(--champagne);text-decoration:none;letter-spacing:.06em}
main{position:relative;z-index:1}
/* panels */
.panel{min-height:100svh;display:flex;flex-direction:column;position:relative;padding-top:80px;border-bottom:1px solid var(--teal)}
.inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 0 36px}
.panel .wrap{width:100%}
.eyebrow{font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin:0 0 18px}
.bearing{font:400 12px var(--mono);letter-spacing:.18em;color:var(--silver);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.bearing::before{content:"";width:28px;height:1px;background:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1.02;margin-bottom:18px}
h2{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.08;margin-bottom:22px;max-width:20ch}
h2.sm{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:14px}
h3{font-size:1.5rem;line-height:1.2;margin-bottom:8px}
em{font-family:var(--ital);font-style:italic;color:var(--champagne)}
h1 em{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.lede{font-size:1.1rem;color:var(--ivory);opacity:.92;max-width:58ch;margin:0 0 22px}
.note{font:400 13px var(--mono);color:var(--silver);letter-spacing:.04em}
.tag,.role,.step{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);display:block;margin-bottom:10px}
/* bar */
.bar{position:sticky;bottom:0;z-index:20;background:var(--midnight);border-top:1px solid var(--teal)}
.bar .wrap{max-width:none;margin:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.btn{display:inline-block;background:var(--metal);color:var(--midnight);font:600 15px var(--sans);letter-spacing:.02em;padding:13px 26px;text-decoration:none;border-radius:2px;transition:filter .2s}
.btn:hover{filter:brightness(1.1)}.btn:active{filter:brightness(.85)}
.next{font:500 13px var(--mono);letter-spacing:.06em;color:var(--ivory);background:none;border:1px solid var(--teal);padding:12px 18px;border-radius:2px;cursor:pointer;display:inline-flex;gap:10px;align-items:center;transition:border-color .2s,color .2s}
.next:hover{border-color:var(--champagne);color:var(--champagne)}
/* hero */
.hero .grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.plate{margin:0;padding:10px;border:1px solid var(--gold);background:var(--slate);max-width:340px;justify-self:center;position:relative}
.plate img{display:block;width:100%;height:auto}
.plate figcaption{font:400 10px var(--mono);letter-spacing:.16em;color:var(--silver);padding:10px 2px 0;text-align:center}
.logos{margin-top:18px}.hero .inner{padding-top:12px;padding-bottom:16px}.hero .lede{margin-bottom:14px}.logos-h{font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--silver);margin:0 0 10px}
.logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.logo-ph{border:1px dashed var(--teal);padding:8px 8px;font:400 11px/1.4 var(--mono);color:var(--silver);text-align:center}
/* cells */
.cols{display:grid;gap:1px;background:var(--teal);border:1px solid var(--teal);margin-top:28px}
.c3{grid-template-columns:repeat(3,1fr)}
.cell{background:var(--slate);padding:30px}.cell p{margin:0;color:var(--silver)}
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.check{list-style:none;margin:0;padding:0}
.check li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--teal);color:var(--silver);font-size:16px;line-height:1.5}
.check li b{display:block;color:var(--ivory);font-weight:600;font-size:17px}
.check li::before{content:"";position:absolute;left:0;top:19px;width:18px;height:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5 7 13.5 15 4.5' fill='none' stroke='%23E3B878' stroke-width='2'/%3E%3C/svg%3E")}
.inc{columns:2;column-gap:48px}.inc li{break-inside:avoid;padding:10px 0 10px 34px}.inc li::before{top:15px}
/* course plot */
.plot{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.plot::before{content:"";position:absolute;left:8px;right:12%;top:8px;height:1px;background:var(--gold)}
.plot li{position:relative;padding:34px 28px 0 0}
.wp{position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;background:var(--midnight);border:2px solid var(--gold)}
.plot li h3{font-size:1.35rem}.plot li p{margin:0;color:var(--silver);font-size:16px}
.plot .done .wp{background:var(--champagne);border-color:var(--champagne);box-shadow:0 0 0 5px rgba(227,184,120,.18),0 0 22px 4px rgba(227,184,120,.45)}
.plot .done .step{color:var(--champagne)}.plot .step{color:var(--silver)}
/* tabs */
.tabs{margin-top:30px;max-width:760px}
[role=tablist]{display:flex;border-bottom:1px solid var(--teal);overflow-x:auto}
[role=tab]{font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--silver);background:none;border:0;border-bottom:2px solid transparent;padding:14px 20px;cursor:pointer;margin-bottom:-1px;white-space:nowrap}
[role=tab][aria-selected=true]{color:var(--champagne);border-bottom-color:var(--gold)}
[role=tab]:hover{color:var(--ivory)}
.tp{background:var(--slate);padding:34px;border:1px solid var(--teal);border-top:0;min-height:200px}
.tp[hidden]{display:none}.tp p{margin:0;font-size:1.1rem;max-width:52ch}
/* compare table */
.tablewrap{margin-top:22px;border:1px solid var(--teal)}
table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
th{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--silver);text-align:left;padding:12px 18px;background:var(--slate)}
th.us{color:var(--champagne)}
td{padding:9px 18px;border-top:1px solid var(--teal);color:var(--silver);vertical-align:top}
td:first-child{font:500 12px var(--mono);letter-spacing:.06em;color:var(--ivory);width:22%}
td:nth-child(2)::before{content:"\2014";margin-right:10px;color:var(--teal)}
td.us{color:var(--ivory);background:rgba(200,138,69,.07)}
td.us::before{content:"";display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-2px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5 7 13.5 15 4.5' fill='none' stroke='%23E3B878' stroke-width='2.4'/%3E%3C/svg%3E")}
/* founders */
.founders{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.card{background:var(--slate);border:1px solid var(--teal);padding:28px}
.card p{margin:0;color:var(--silver);font-size:16px}
.avatar{width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font:400 20px var(--serif);color:var(--champagne);margin-bottom:16px}
.res{border-style:dashed}
/* book */
.final{margin:30px 0 8px;font-size:2rem}
details{border-bottom:1px solid var(--teal)}
summary{cursor:pointer;list-style:none;padding:13px 28px 13px 0;font-weight:600;font-size:16px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:11px;font:400 20px var(--mono);color:var(--gold)}
details[open] summary::after{content:"\2212"}
details p{margin:0 0 14px;color:var(--silver);font-size:15.5px;line-height:1.55}
.last footer{margin-top:36px;border-top:1px solid var(--teal);padding:20px 0;font:400 12px/1.7 var(--mono);color:var(--silver)}
.last footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.last footer a{color:var(--silver);margin-left:18px}
.last .inner{justify-content:flex-start;padding-top:20px}
/* dial */
.dial{position:fixed;right:clamp(16px,2.4vw,40px);top:50%;transform:translateY(-50%);z-index:40;width:236px;text-align:center}
.dial-box{position:relative;width:236px;height:236px;--r:112px}
.dial-svg{position:absolute;inset:14px;width:208px;height:208px;overflow:visible}
.dial-svg .bz{fill:var(--midnight);stroke:var(--steel,#29444A);stroke-width:1.5}.dial-svg .bz2{fill:none;stroke:#29444A;stroke-width:.6}
.cl{stroke:#29444A;stroke-width:.5}.tk{stroke:#9BA7A9;stroke-width:.8}.tk.maj{stroke:#E3B878;stroke-width:1.2}
.needle{transition:transform .6s cubic-bezier(.3,.8,.25,1);transform:rotate(0deg)}
.dial-svg .bz{stroke:#29444A}
.lbl{position:absolute;left:calc(50% + var(--r)*sin(var(--a)) + var(--dx,0px));top:calc(50% - var(--r)*cos(var(--a)));transform:translate(-50%,-50%);font:400 10px var(--mono);letter-spacing:.06em;color:var(--silver);background:none;border:0;padding:4px;cursor:pointer;line-height:1}
.lbl:hover{color:var(--champagne)}.lbl[aria-current]{color:var(--champagne);font-weight:500}
.readout{font:400 11px/1.4 var(--mono);letter-spacing:.1em;color:var(--champagne);margin-top:6px}
.pill{display:none}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:var(--slate);border:1px solid var(--gold);color:var(--ivory);padding:12px 20px;font:500 13px var(--mono);opacity:0;pointer-events:none;transition:all .25s;z-index:90}.toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:900px){
html{scroll-snap-type:none}
.panel{scroll-snap-align:start;scroll-snap-stop:normal}
.panel .wrap,.bar .wrap,.top .wrap{padding-right:calc(var(--gut) + 250px)}
.top .wrap{padding-right:var(--gut)}
.bar .wrap{padding-left:var(--gut)}
.hero .wrap{max-width:1320px}
}
@media (min-width:900px) and (max-width:1199px){.dial{width:190px}.dial-box{width:190px;height:190px;--r:90px}.dial-svg{inset:12px;width:166px;height:166px}.panel .wrap,.bar .wrap{padding-right:calc(var(--gut) + 200px)}.hero .grid{gap:32px}}
@media (max-width:899px){
html{scroll-snap-type:none}
.panel{scroll-snap-align:start}
.dial{display:none}
.pill{display:flex;position:fixed;top:92px;right:12px;z-index:45;align-items:center;gap:8px;background:var(--slate);border:1px solid var(--teal);border-radius:20px;padding:4px 12px 4px 4px;font:500 12px var(--mono);color:var(--champagne)}
.pill svg{width:26px;height:26px}.pill .bz{fill:var(--midnight);stroke:#29444A;stroke-width:5}
body{font-size:17px}
.hero .grid,.two{grid-template-columns:1fr;gap:28px}
.plate{max-width:260px}
.logo-row{grid-template-columns:repeat(2,1fr)}
.c3,.founders{grid-template-columns:1fr}
.inc{columns:1}
.plot{grid-template-columns:1fr;margin-top:32px;padding-left:4px}
.plot::before{left:12px;right:auto;top:8px;bottom:60px;width:1px;height:auto}
.plot li{padding:0 0 26px 40px}.plot .wp{left:4px}
thead{display:none}table,tbody,tr,td{display:block;width:100%}
tr{border-top:1px solid var(--teal);padding:8px 0}td{border:0;padding:3px 14px}td:first-child{width:100%;color:var(--champagne)}
td[data-l]{padding-left:14px}
td[data-l]::after{content:none}
.bar .wrap{padding-left:16px;padding-right:16px}
.btn{padding:12px 16px;font-size:14px}.next{padding:11px 12px;font-size:11px}
.next span{display:none}
h2{max-width:none}
.tp{padding:24px}
}
@media (max-width:420px){.next{font-size:10.5px}}
@media (prefers-reduced-motion:reduce){.needle{transition:none}*{scroll-behavior:auto!important}}
/* legal */
.legal .doc{max-width:760px;padding-top:130px;padding-bottom:60px}
.legal main{z-index:1}
.legal h1{font-size:2.6rem}.legal h2{font-size:1.5rem;margin:30px 0 8px;max-width:none}
.legal p{color:var(--silver)}
.draft{border:1px solid var(--gold);color:var(--champagne);font:500 12px var(--mono);padding:10px 14px;margin:16px 0}
.legal footer{border-top:1px solid var(--teal);padding:20px 0;font:400 12px var(--mono);color:var(--silver);position:relative;z-index:1}
.legal footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}.legal footer a{margin-left:16px;color:var(--silver)}
@media (min-width:900px){.inc li{padding:8px 0 8px 32px;font-size:14.5px;line-height:1.4}.inc li b{font-size:16px}.inc li::before{top:12px}#included .lede{margin-bottom:8px}#included h2{margin-bottom:14px}}
@media (min-width:900px){#compare td{padding:6px 18px;font-size:14px}#compare th{padding:9px 18px}#compare h2{margin-bottom:10px}#compare .tablewrap{margin-top:10px}}

/* ★ ONE SCREEN PER PANEL on desktop (Kyle, 2026-10-06: the page stopped between sections with two
   button bars showing). Each panel is exactly the viewport; if its content is longer, only the
   content area scrolls, and the page always moves a whole screen. */
@media (min-width:900px){
  .panel{height:100vh;height:100svh;min-height:0;overflow:hidden}
  .inner{min-height:0;overflow-y:auto;overscroll-behavior:contain;justify-content:safe center;scrollbar-width:thin;scrollbar-color:var(--teal) transparent}
  .bar{position:static;flex:none}
}
@media (min-width:900px) and (max-height:920px){
  .inner{padding:14px 0 18px}
  h1{font-size:clamp(2.3rem,3.9vw,3.5rem);margin-bottom:12px}
  h2{font-size:clamp(1.8rem,2.9vw,2.7rem);margin-bottom:14px}
  h3{font-size:1.3rem}
  .lede{font-size:1rem;margin-bottom:14px}
  .eyebrow{margin-bottom:10px}.bearing{margin-bottom:8px}
  body{font-size:16.5px;line-height:1.55}
}

html[data-snap-jump]{scroll-snap-type:none!important}
/* Fit "What's included" and the compare log on one screen (no inner scroll = no sticky feel). */
@media (min-width:900px){
  .inc{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
  .inc li{padding:7px 0 7px 30px}
  #compare .tablewrap{margin-top:6px}
  #compare td{padding:5px 16px;font-size:13.5px;line-height:1.35}
  #compare th{padding:7px 16px}
}
@media (min-width:900px){#included .lede{display:none}#included .inner{padding-top:6px;padding-bottom:8px}}
@media (min-width:900px) and (min-height:860px){#included .lede{display:block}}

/* ★ bluego parity (Kyle 2026-10-06, still "sticky"): no fixed full-screen background (repainted every
   frame on scroll), no nested scroll boxes inside snap panels, overflow clipped not hidden. */
.panel{background:inherit}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background:var(--chart-bg)}
main{isolation:isolate}
@media (min-width:900px){.inner{overflow:visible!important;overscroll-behavior:auto}}

/* Kyle 2026-10-06 (later): snap back ON so every section lands fully in view — but snap-stop NORMAL so a
   swipe keeps its momentum (snap-stop:always was what felt sticky). Desktop mandatory, phones proximity. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}