:root{--navy:#073763;--navy2:#052A4C;--gold:#E8C766;--gold2:#C9A84C;--ink:#FFFFFF;--mute:#A9C4DE;--green:#2BD97E;--red:#FF6B6B;--card:rgba(255,255,255,.07);--line:rgba(255,255,255,.16)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth}
body{background:var(--navy);color:var(--ink);font-family:Manrope,"Segoe UI",Arial,sans-serif;font-size:clamp(17px,1.5vw,24px);line-height:1.45}
.board{min-height:100vh;scroll-snap-align:start;padding:clamp(28px,5vh,64px) clamp(28px,6vw,110px);display:flex;flex-direction:column;justify-content:center;position:relative;border-bottom:1px solid rgba(255,255,255,.04)}
.kicker{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(11px,1vw,15px);letter-spacing:.18em;text-transform:uppercase;color:var(--gold2);margin-bottom:14px}
h1{font-family:Montserrat,sans-serif;font-weight:900;font-size:clamp(28px,3.6vw,58px);line-height:1.08;color:var(--gold);margin-bottom:clamp(18px,3vh,34px);max-width:22ch}
h1 small{display:block;color:var(--ink);font-size:.55em;font-weight:700;margin-top:10px;letter-spacing:0}
h2{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(16px,1.6vw,24px);color:var(--gold);margin-bottom:10px}
.big{font-family:Montserrat,sans-serif;font-weight:900;font-size:clamp(26px,3vw,48px);line-height:1.15;max-width:26ch}
.big em{font-style:normal;color:var(--gold)}
.sub{color:var(--mute);font-size:.9em;margin-top:12px;max-width:60ch}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(12px,1.6vw,24px);margin-top:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,1.8vw,28px)}
.card h2{margin-bottom:8px}
.card p,.card li{font-size:.92em}
.card.good{border-color:rgba(43,217,126,.55)}
.card.bad{border-color:rgba(255,107,107,.55)}
.card.gold{border-color:rgba(232,199,102,.7);background:rgba(232,199,102,.08)}
ul{list-style:none}
li{padding:6px 0 6px 30px;position:relative}
li::before{content:"→";position:absolute;left:0;color:var(--gold);font-weight:800}
.good li::before{content:"✓";color:var(--green)}
.bad li::before{content:"✗";color:var(--red)}
.flow{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:10px}
.step{flex:1 1 150px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;position:relative}
.step b{display:block;font-family:Montserrat,sans-serif;font-size:.7em;letter-spacing:.14em;color:var(--gold2);margin-bottom:6px}
.step span{font-size:.92em}
.step::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--gold);font-weight:900;font-size:1.2em}
.step:last-child::after{content:""}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin-top:10px}
.vs .mid{font-family:Montserrat,sans-serif;font-weight:900;color:var(--gold);font-size:1.4em}
.num{font-family:Montserrat,sans-serif;font-weight:900;font-size:clamp(40px,6vw,96px);color:var(--gold);line-height:1}
.pill{display:inline-block;border:1.5px solid var(--gold2);color:var(--gold);border-radius:999px;padding:6px 16px;font-family:Montserrat,sans-serif;font-weight:800;font-size:.7em;letter-spacing:.1em;margin:4px 6px 4px 0}
.quote{border-left:5px solid var(--gold);padding:8px 0 8px 22px;font-size:1.15em;font-weight:600;margin-top:12px;max-width:40ch}
.note{margin-top:18px;color:var(--mute);font-size:.8em}
.hooks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px 26px}
.hooks div{padding:9px 0;border-bottom:1px solid var(--line);font-size:.92em}
.hooks div b{color:var(--gold);display:block;font-family:Montserrat,sans-serif;font-size:.78em;letter-spacing:.08em}
.frame{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px;align-items:end;justify-items:center}
.ratio{height:40vh;width:auto;max-width:100%;border:2px solid var(--gold2);border-radius:12px;position:relative;background:rgba(255,255,255,.05);display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:8px;font-family:Montserrat,sans-serif;font-weight:800;font-size:.7em;line-height:1.25}
.ratio i{position:absolute;left:0;right:0;background:rgba(255,107,107,.28);border:1px dashed var(--red);font-style:normal;font-size:.6em;text-align:center;color:#ffd0d0}
.counter{position:fixed;right:22px;bottom:18px;font-family:Montserrat,sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;color:var(--mute);background:rgba(5,42,76,.8);padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
.help{position:fixed;left:22px;bottom:18px;font-size:12px;color:var(--mute);opacity:.7}
.check{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:8px 24px}
.check div{padding:8px 0 8px 36px;position:relative;border-bottom:1px solid var(--line);font-size:.92em}
.check div::before{content:"☐";position:absolute;left:0;color:var(--gold);font-size:1.2em;top:4px}
.cover{background:radial-gradient(900px 500px at 50% -100px,#0E4E85,var(--navy))}
.cover h1{max-width:none;font-size:clamp(34px,5vw,80px)}
.tag{display:inline-block;background:var(--gold);color:#1A1206;font-family:Montserrat,sans-serif;font-weight:900;font-size:.65em;letter-spacing:.12em;padding:5px 12px;border-radius:8px;margin-right:8px;vertical-align:middle}
.tag.d{background:var(--green);color:#04120B}
.lessons{columns:2;column-gap:40px;font-size:.85em}
.lessons div{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--line)}
.lessons div a{color:var(--ink);text-decoration:none}
.lessons div a:hover{color:var(--gold)}
.lessons .m{color:var(--mute);font-size:.8em;margin-left:8px}
@media(max-width:700px){.lessons{columns:1}.frame{grid-template-columns:1fr}.vs{grid-template-columns:1fr}.vs .mid{text-align:center}}