/* site.theme "modern": dark, clean, phone first. Laid over style.css (same markup), so "theme" off = the classic page. */
@font-face{font-family:Anton;src:url('/assets/fonts/Anton-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-SemiBold.ttf') format('truetype');font-weight:400 600;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Black.ttf') format('truetype');font-weight:800 900;font-display:swap}
:root{--paper:#0B0B0C;--ink:#F4F2EF;--card:#151517;--soft:#111113;--line:#25252A;--muted:#9C9AA0;
 --accent:#E0303B;--accent-light:#E8646C;--accent2:#E0303B;--glow:rgba(224,48,59,.18)}
body{font:400 18px/1.65 Inter,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:-.005em;color:#D9D6D1}
h1,h2,h3,h4,.brand,.btn,.opt b,.opt .pr,summary,.secs b,.parts b,.grid2 h3,.fit h3,.toc h4,.toc .v,.stats b,.mbar b,
.save,.chip,.secs i,.doc h1,.doc h2{font-family:Inter,system-ui,sans-serif}
h1,h2,h3{color:var(--ink)}
.kicker{font:700 12.5px/1.3 Inter,sans-serif;letter-spacing:2.2px;color:var(--accent)}
.fine{color:#7E7C82}

/* top */
.ticker{background:var(--accent);color:#fff;font:700 12px/1.3 Inter,sans-serif;letter-spacing:1.8px}
nav.top{background:rgba(11,11,12,.82);border-bottom:1px solid var(--line)}
.brand{font:800 13px/1.1 Inter,sans-serif;letter-spacing:1.4px;color:var(--ink)}
nav.top .links a{color:#C9C6C1;font-size:15px}
.btn{font:800 13px/1 Inter,sans-serif;letter-spacing:1px;border-radius:10px;padding:14px 22px;
 box-shadow:0 8px 24px rgba(224,48,59,.28)}

/* hero */
.hero{padding:70px 0 90px;background:radial-gradient(900px 520px at 25% 30%,var(--glow),transparent 70%),var(--paper)}
.hero .wrap{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.hero .covers{position:sticky;top:110px;margin-top:24px}
/* the buy box right under the promise; the long paragraph and the quote come after it */
.hero .wrap>div:last-child{display:flex;flex-direction:column}
.hero #buy{order:1;margin-top:6px}
.hero .wrap>div:last-child>.fine{order:2}
.hero .chips{order:3;margin:26px 0 0}
.hero .quote{order:4;margin:30px 0 8px}
.hero .wrap>div:last-child>p:not(.reach):not(.fine){order:5}
.covers.one{aspect-ratio:auto;perspective:1600px}
.covers.one figure{position:relative;left:auto;top:auto;width:78%;margin:0 auto;transform:rotateY(-14deg) rotateX(3deg);
 transform-style:preserve-3d}
.covers.one figure:before{content:"";position:absolute;left:-14px;top:3px;bottom:3px;width:14px;
 background:linear-gradient(90deg,#000,#2a2a2a);transform:rotateY(-90deg);transform-origin:right}
.covers img{border-radius:3px 6px 6px 3px;box-shadow:24px 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04)}
h1.title{font:400 clamp(52px,6.6vw,96px)/.95 Anton,Impact,sans-serif;letter-spacing:.5px;margin:14px 0 18px}
.subline.subhead{font:500 20px/1.5 Inter,sans-serif;color:#E8E5E0;margin-top:0}
.quote{border-left-color:var(--accent);font-style:normal;font-weight:600;font-size:19px;color:var(--ink)}
.quote small{color:var(--muted)}
.hero p{color:#BDBAB5;font-size:17px}
.chip{border:1px solid #3A3A40;color:#E8E5E0;border-radius:999px;font:700 11.5px/1 Inter,sans-serif;padding:9px 14px;background:#141416}
.reach{color:var(--muted);font-size:15px}.reach b{color:var(--ink)}

/* buy box */
.opt{background:var(--card);border:1px solid var(--line);border-radius:14px}
.opt.main{background:linear-gradient(135deg,#E44953,#B82730);border:0;border-radius:16px;padding:24px 26px;
 box-shadow:0 18px 40px rgba(224,48,59,.32)}
.opt.main b{font:800 20px/1.2 Inter,sans-serif;color:#fff}
.opt.main .pr{font:400 52px/1 Anton,Impact,sans-serif}
.opt:hover{box-shadow:0 22px 46px rgba(224,48,59,.4)}
.ticks{color:#BDBAB5;font-size:15.5px}
.ticks b{color:var(--ink)}
.ticks li:before{color:var(--accent)}

/* stats band */
.stats{background:#0F0F11;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink)}
.stats b{font:400 44px/1.05 Anton,Impact,sans-serif;color:var(--accent)}
.stats span{font:700 11.5px/1.35 Inter,sans-serif;letter-spacing:1.6px;color:var(--muted)}

/* sections */
section.s{padding:96px 0;border-top:1px solid var(--line)}
section.s.alt{background:var(--soft)}
section.s h2{font:400 clamp(36px,4.4vw,60px)/1.02 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.4px;margin:12px 0 18px}
.lead{font-size:19.5px;color:#CFCCC7}
.parts div,.secs div,.outcomes li,.comments figure,.math{background:var(--card);border:1px solid var(--line);border-radius:16px}
.parts b,.secs b{color:var(--ink);font-weight:800}
.parts span,.secs span{color:var(--muted)}
.grid2 h3{font-weight:800;font-size:20px}
.grid2 p,details p{color:#BDBAB5}
.math{border-left:4px solid var(--accent)}
.outcomes li{color:#DAD7D2}
.secs i{font:800 11.5px/1 Inter,sans-serif;letter-spacing:1.4px}
.cardsgrid img,.pages img{border-radius:12px;border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.45)}
.cardsgrid figcaption{color:var(--muted)}
.origin blockquote{font:400 clamp(30px,3.2vw,44px)/1.1 Anton,Impact,sans-serif;text-transform:uppercase;color:var(--ink)}
.origin p{color:#C9C6C1}
.sign{color:var(--muted);font-style:normal}
.about img{filter:none;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.45)}
.ai{border:1px solid #3A3A40;border-radius:14px;background:#141416;color:#C9C6C1}
.pull{font:400 26px/1.2 Anton,Impact,sans-serif;text-transform:uppercase;color:var(--ink)}
.toc{color:#CFCCC7}
.toc li{border-bottom:1px solid #1F1F23}
.toc h4{font:800 12px/1.3 Inter,sans-serif}
.comments blockquote{color:#E2DFDA}
.comments figcaption{color:var(--muted)}
.fit h3{font-weight:800}
.fit li{color:#CFCCC7}
details{border-bottom:1px solid var(--line)}
summary{font:700 18px/1.4 Inter,sans-serif;color:var(--ink)}
.final{background:radial-gradient(700px 380px at 50% 0%,var(--glow),transparent 70%),var(--paper)}
footer{background:#070708;color:#8E8C91;border-top:1px solid var(--line)}
footer .tag{border-color:#3A3A40;font-family:Inter,sans-serif}
.mbar{background:rgba(11,11,12,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.mbar b{font:400 24px/1 Anton,Impact,sans-serif;color:var(--ink)}
.fromvid{background:#121214;border-bottom:1px solid var(--line)}
.fromvid h2{font:800 26px/1.2 Inter,sans-serif}
.fromvid img{border-radius:14px}
.doc h1{font:400 48px/1.05 Anton,Impact,sans-serif;text-transform:uppercase}
.doc h2{font-weight:800}
.doc p,.doc li{color:#CFCCC7}

/* new: the four gear categories */
.gear{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.gear article{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
 transition:transform .15s ease,border-color .15s ease}
.gear article:hover{transform:translateY(-3px);border-color:#3A3A40}
.gear img{aspect-ratio:16/10;object-fit:cover;width:100%;border-bottom:1px solid var(--line)}
.gear div{padding:18px 20px 22px}
.gear h3{font:400 30px/1 Anton,Impact,sans-serif;text-transform:uppercase;margin:0 0 6px}
.gear .ln{font:700 12px/1.3 Inter,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.gear p{margin:0;font-size:15.5px;line-height:1.55;color:#BDBAB5}

/* new: the comparison */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:34px}
.vs .side{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px}
.vs .side.win{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 50px rgba(224,48,59,.18)}
.vs .lab{font:700 12px/1 Inter,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.vs .price{font:400 72px/1 Anton,Impact,sans-serif;color:var(--ink);margin:10px 0 18px}
.vs .win .price{color:var(--accent)}
.vs ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.vs li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #1F1F23;padding-bottom:10px;font-size:15.5px}
.vs li span{color:var(--muted)}
.vs li b{color:var(--ink);font-weight:700;text-align:right}
.vs .mid{display:flex;align-items:center;font:400 34px/1 Anton,Impact,sans-serif;color:#4A4A50}

@media (max-width:900px){
 .hero{padding:34px 0 60px}
 .hero .wrap{display:flex;flex-direction:column-reverse;gap:34px}
 .covers.one{max-width:300px}
 .covers.one figure{width:100%;transform:rotateY(-10deg)}
 .gear{grid-template-columns:1fr 1fr}
 .vs{grid-template-columns:1fr}
 .vs .mid{justify-content:center}
}
@media (max-width:560px){
 h1.title{font-size:56px}
 .gear{grid-template-columns:1fr}
 section.s{padding:68px 0}
 .vs .price{font-size:58px}
}
.hero p.fine,.hero #buy p.fine{font-size:13.5px;color:#7E7C82}