:root{
  --night:#1A1917; --night-deep:#121110; --street:#0D0D0C;
  --amber:#C9A25E; --amber-deep:#A9844A;
  --paper:#FAF6EC; --paper-2:#F2EBDA; --ink:#25282C; --muted:#5C6168; --gold:#A8812F; --rule:#DED2B6;
  --serif:"Source Serif 4", Georgia, serif; --sans:"Source Sans 3", "Segoe UI", Arial, sans-serif;
  --measure:40rem;
}
*{box-sizing:border-box}
html{font-size:20px; scroll-behavior:smooth}
@media (max-width:480px){html{font-size:19px}}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1rem/1.6 var(--serif); -webkit-text-size-adjust:100%}
img{max-width:100%; height:auto; display:block}
a{color:var(--night)}
:focus-visible{outline:3px solid var(--amber-deep); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px} .skip:focus{left:1rem; top:1rem; background:#fff; padding:.5rem 1rem; z-index:20}
h1,h2,h3{font-family:var(--serif); line-height:1.15; color:var(--night); margin:0 0 .6rem}
h2{font-size:clamp(1.6rem,4.5vw,2.2rem); font-weight:700}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
.wrap{max-width:calc(var(--measure) + 2rem); margin:0 auto; padding:0 1rem}
section{padding:3.5rem 0}
.lede{font-size:1.1rem; color:var(--muted)}
.fine{font-family:var(--sans); font-size:.8rem; color:var(--muted)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:3rem; padding:.7rem 1.6rem;
  background:var(--amber); color:var(--night-deep); font:700 1.05rem/1.2 var(--sans); text-decoration:none;
  border:0; border-radius:10px; cursor:pointer; box-shadow:0 2px 0 var(--amber-deep)}
.btn:hover{background:#D6B171}
.btn-big{font-size:1.2rem; min-height:3.5rem; width:100%; max-width:22rem}
.btn-quiet{background:var(--night); color:#fff; box-shadow:none} .btn-quiet:hover{background:var(--night-deep)}

/* promo */
.promo{background:var(--amber); color:var(--night-deep); text-align:center; font:600 .9rem/1.4 var(--sans); padding:.6rem 1rem}
.promo p{margin:0}

/* hero */
.hero{background:#141414; color:#F3EBD8; position:relative; overflow:hidden}
.hero-inner{max-width:62rem; margin:0 auto; padding:3rem 1rem 1rem; display:grid; grid-template-columns:1.25fr .9fr; gap:2.5rem; align-items:center}
.kicker{font-family:var(--sans); font-weight:600; color:var(--amber); margin-bottom:.4rem}
.hero h1{color:#FAF6EC; font-size:clamp(2.4rem,7vw,3.8rem); font-weight:700; letter-spacing:-.01em}
.promise{font-size:1.2rem; max-width:30rem}
.price-line{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin:1.2rem 0 1rem; font-family:var(--sans)}
.was{color:inherit; opacity:.7; font-size:1.2rem}
.now{font-size:2rem; font-weight:700}
.badge{background:var(--amber); color:var(--night-deep); font-size:.75rem; font-weight:700; padding:.2rem .55rem; border-radius:6px}
.hero .fine{color:#C9D2DC; margin-top:1rem; max-width:28rem}
.hero-cover{margin:0; justify-self:center; max-width:19rem}
.hero-cover img{border-radius:4px; box-shadow:0 22px 50px rgba(0,0,0,.6)}
.street{display:block; width:100%; height:90px; margin-top:1rem}
.street .win rect{fill:var(--amber)}
@media (prefers-reduced-motion:no-preference){
  .street .win rect{opacity:0; animation:lamp .5s ease-out forwards}
  .street .win rect:nth-child(1){animation-delay:.6s}.street .win rect:nth-child(2){animation-delay:1s}
  .street .win rect:nth-child(3){animation-delay:1.3s}.street .win rect:nth-child(4){animation-delay:1.45s}.street .win rect:nth-child(5){animation-delay:1.8s}
  @keyframes lamp{to{opacity:1}}
}
@media (max-width:760px){
  .hero-inner{grid-template-columns:1fr; padding-top:2rem; gap:1.5rem}
  .hero-cover{order:-1; max-width:12rem; justify-self:start}
}

/* stats */
.stats{background:var(--street); color:#E9E2D0; padding:1.4rem 0}
.stats ul{list-style:none; margin:0 auto; padding:0 1rem; max-width:62rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:1rem; font:400 .85rem/1.3 var(--sans)}
.stats b{display:block; font:700 1.5rem/1.1 var(--serif); color:var(--amber)}
@media (max-width:760px){.stats ul{grid-template-columns:repeat(3,1fr)}}
.stats li[hidden]{display:none}

/* quiz */
fieldset{border:0; padding:0; margin:0 0 1.4rem}
legend{font-weight:700; color:var(--night); margin-bottom:.4rem; font-size:1.05rem}
.quiz label{display:flex; gap:.7rem; align-items:center; padding:.55rem .8rem; margin:.3rem 0; background:#fff; border:1px solid var(--rule); border-radius:10px; cursor:pointer; font-family:var(--sans)}
.quiz input[type=radio]{width:1.3rem; height:1.3rem; accent-color:var(--night); flex:none}
.quiz label:has(input:checked){border-color:var(--night); box-shadow:inset 0 0 0 1px var(--night)}
#quiz-result{margin-top:1.5rem}
.pick{background:#fff; border-left:5px solid var(--amber); border-radius:8px; padding:1rem 1.2rem; margin:.8rem 0}
.pick h3{margin-bottom:.2rem}
.pick p{margin:0; font-family:var(--sans); color:var(--muted)}

/* inside */
.inside{background:var(--paper-2)}
.pages{max-width:62rem; margin:1rem auto 0; padding:0 1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
.pages figure{margin:0}
.zoom{all:unset; cursor:zoom-in; display:block; border-radius:3px; box-shadow:0 6px 18px rgba(30,43,59,.18)}
.zoom:focus-visible{outline:3px solid var(--amber-deep); outline-offset:3px}
.pages figcaption{font:400 .85rem/1.4 var(--sans); color:var(--muted); margin-top:.6rem}
@media (max-width:760px){.pages{grid-template-columns:repeat(2,1fr)}}
dialog{border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh}
dialog::backdrop{background:rgba(16,24,34,.85)}
dialog img{max-height:90vh; width:auto}
dialog .close{position:absolute; top:.5rem; right:.5rem; font:700 .9rem var(--sans); padding:.5rem .9rem; border:0; border-radius:8px; background:#fff; cursor:pointer}

/* math */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0}
.compare .col{background:#fff; border:1px solid var(--rule); border-radius:12px; padding:1.2rem}
.compare .col:last-child{border-color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber)}
.compare .big{font:700 1.6rem/1.2 var(--serif); color:var(--night)}
.compare p:last-child{margin:0; font-size:.9rem}
@media (max-width:620px){.compare{grid-template-columns:1fr}}

/* lists */
.ticks{list-style:none; padding:0}
.ticks li{padding-left:2rem; position:relative; margin:.6rem 0}
.ticks li::before{content:""; position:absolute; left:.2rem; top:.45rem; width:.95rem; height:.5rem; border:solid var(--gold); border-width:0 0 3px 3px; transform:rotate(-45deg)}
.hl{list-style:none; padding:0; margin:0 0 1.5rem}
.hl li{display:grid; grid-template-columns:4.2rem 1fr; gap:.6rem; padding:.7rem 0; border-bottom:1px solid var(--rule)}
.pg{font:700 .85rem/1.9 var(--sans); color:var(--gold)}
.steps{padding-left:1.4rem} .steps li{margin:.5rem 0}
.plain{font-weight:600}

/* buy */
.buy{background:var(--night); color:#F3EBD8}
.buybox h2{color:#FAF6EC}
.gets{padding-left:1.2rem} .gets li{margin:.35rem 0}
.promo-note{font-family:var(--sans); color:var(--amber)}
.guarantee{margin-top:1.4rem; background:rgba(255,255,255,.06); border-left:4px solid var(--amber); padding:1rem 1.2rem; border-radius:8px}

/* faq */
details{border-bottom:1px solid var(--rule); padding:.4rem 0}
summary{cursor:pointer; font-weight:700; color:var(--night); padding:.6rem 0; list-style-position:outside}
details p{margin:.2rem 0 .9rem}

/* forms */
.ask label, .waitlist label{display:block; font:600 .95rem var(--sans); margin:.9rem 0 .3rem}
input[type=email], input:not([type]), textarea{width:100%; font:1rem var(--sans); padding:.7rem .8rem; border:1.5px solid #B9AE96; border-radius:8px; background:#fff; color:var(--ink)}
.ask button{margin-top:1rem}
.hp{position:absolute; left:-9999px}
.waitlist{background:var(--paper-2)}
.waitlist .row{display:flex; gap:.6rem; flex-wrap:wrap} .waitlist .row input{flex:1 1 14rem}

/* reviews */
.review{background:#fff; border-radius:10px; padding:1rem 1.2rem; margin:.8rem 0}
.review cite{display:block; font:600 .85rem var(--sans); color:var(--muted); font-style:normal; margin-top:.4rem}

.foot{background:var(--street); color:#C9D2DC; padding:2rem 0 6rem; font-family:var(--sans); font-size:.9rem}
.foot a{color:#E9E2D0; margin-right:1.2rem}
.foot .fine{color:#9AA6B3}

/* sticky mobile bar */
.sticky{position:fixed; left:0; right:0; bottom:0; display:none; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background:var(--street); color:#F3EBD8; font:700 1.1rem var(--sans);
  transform:translateY(110%); transition:transform .25s ease; z-index:10}
.sticky small{display:block; font-weight:400; font-size:.75rem; color:#C9D2DC}
.sticky.show{transform:none}
@media (max-width:760px){.sticky{display:flex}}
@media (prefers-reduced-motion:reduce){.sticky{transition:none} html{scroll-behavior:auto}}

/* legal pages */
.legal{padding:3rem 0}
.legal h1{font-size:2rem}

/* sections that are also .wrap keep their vertical rhythm */
section.wrap{padding:3.5rem 1rem}
.highlights .btn, .math .btn{margin-top:.5rem}
.sticky small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:11rem}

/* upgrades */
.hero h1{font-size:clamp(2.1rem,6vw,3.3rem)}
.hero .once{font-family:var(--sans); font-weight:600; color:var(--amber); margin:-.6rem 0 1.1rem}
.checkout-note{font-family:var(--sans); font-size:.85rem; color:#C9D2DC; margin-top:1rem; max-width:30rem}
.maker p{max-width:38rem}
.proof blockquote{background:#fff; border-left:5px solid var(--gold); border-radius:8px; padding:1rem 1.2rem; margin:.8rem 0}
.proof blockquote p{margin:0}
.proof cite{display:block; font:600 .85rem var(--sans); color:var(--muted); font-style:normal; margin-top:.4rem}

/* host (AI presenter) */
.maker{display:grid; grid-template-columns:1fr; gap:0 2rem}
.maker.has-host{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); max-width:64rem}
.maker.has-host h2{grid-column:1 / -1}
.maker.has-host .host{grid-row:2; grid-column:1}
.maker.has-host .maker-text{grid-row:2; grid-column:2; align-self:start}
.host{margin:0 0 1.2rem}
.host-media{position:relative; border-radius:14px; overflow:hidden; background:var(--night); aspect-ratio:16/9; box-shadow:0 18px 40px rgba(30,43,59,.22)}
.host-media img, .host-media iframe, .host-media video{display:block; width:100%; height:100%; object-fit:cover; border:0}
.host-play{position:absolute; left:.7rem; right:.7rem; bottom:.7rem; display:flex; align-items:center; gap:.5rem; justify-content:center;
  min-height:2.9rem; border:0; border-radius:10px; background:var(--amber); color:var(--night-deep); font:700 .95rem var(--sans); cursor:pointer}
.host-play svg{width:1.2rem; height:1.2rem; fill:currentColor}
.host figcaption{margin-top:.6rem; font-family:var(--sans); font-size:.9rem; line-height:1.4}
.host figcaption b{display:block; font-size:1.05rem; color:var(--night)}
.host figcaption span{display:block; color:var(--muted)}
.host figcaption small{display:block; margin-top:.4rem; font-size:.78rem; color:var(--muted)}
@media (max-width:760px){
  .maker.has-host{grid-template-columns:1fr}
  .maker.has-host .host, .maker.has-host .maker-text{grid-column:1; grid-row:auto}
  .host{max-width:none}
}

#video-dlg{width:min(56rem,94vw)}
#video-dlg .video-box{aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden}
#video-dlg iframe, #video-dlg video{width:100%; height:100%; border:0; display:block}

[hidden]{display:none !important}

.maker-sub{font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--muted); margin:-.2rem 0 1.2rem}
.maker-text b{color:var(--night)}