/* Funnel design system — "Manifesto" layout (mobile-first).
   Every color/font is a token. Defaults below = the "midnight-magenta" theme.
   A theme file in assets/themes/ overrides these tokens; load it AFTER this file. */
:root{
  /* brand */
  --accent:#f1128f; --accent-2:#ff4fb0; --accent-glow:rgba(241,18,143,.45); --accent-soft:rgba(241,18,143,.18); --on-accent:#fff;
  --cta2:#c6ff3d; --on-cta2:#0a0a0c; --cta2-glow:rgba(198,255,61,.35);       /* contrasting "stand-out" color */
  /* surfaces */
  --bg:#0a0a0c; --bg2:#121216; --bg3:#1b1b21; --line:#2a2a32; --hero-bg:#000; --bar-bg:#000; --media-bg:#000;
  --glass:rgba(10,10,12,.94); --overlay:rgba(0,0,0,.8); --input-bg:#0d0d11; --tint:rgba(255,255,255,.04);
  /* text */
  --text:#f5f5f7; --text-2:#d8d8de; --muted:#a3a3ad; --strong:#fff;
  --paper:#f4f2ef; --ink:#121212;                                             /* story band */
  --chip-on:#fff; --on-chip-on:#000;                                          /* active section-nav pill */
  /* status */
  --green:#19c37d; --red:#ff5c5c; --gold:#ffd34d;
  --need-bg:#3b0d25; --need-text:#ffc2e2; --ph-text:#f7c3df;
  /* type */
  --display:"Anton",Impact,"Arial Narrow",sans-serif; --display-case:uppercase; --display-weight:400; --display-track:.01em; --display-lh:1.05;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,Consolas,monospace;
  /* shape */
  --radius:18px; --btn-radius:4px; --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.narrow{max-width:760px}
.c{text-align:center}
section{padding:72px 0}
.alt{background:var(--bg2)}
h1,h2,h3,h4{margin:0 0 16px;line-height:1.05}
.dsp{font-family:var(--display);font-weight:var(--display-weight);text-transform:var(--display-case);letter-spacing:var(--display-track)}
h2.dsp{font-size:clamp(36px,6.4vw,66px);line-height:calc(var(--display-lh) - .07)}
h3.dsp{font-size:clamp(28px,4vw,42px)}
p{margin:0 0 18px}
.lede{font-size:clamp(18px,2.2vw,21px);color:var(--text-2)}
.muted{color:var(--muted)}
.pk{color:var(--accent)}
.kick{display:inline-block;font:700 13px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.micro{font:700 12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.prose p{font-size:18px;color:var(--text-2)}
.prose p b,.prose p strong,.strong{color:var(--strong)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);color:var(--on-accent);text-decoration:none;border:0;cursor:pointer;
  font:var(--display-weight) clamp(19px,2.4vw,23px)/1.1 var(--display);letter-spacing:.06em;text-transform:var(--display-case);padding:19px 34px;border-radius:var(--btn-radius);
  box-shadow:0 0 0 1px var(--accent-2),0 12px 40px var(--accent-glow);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--accent-2),0 18px 50px var(--accent-glow)}
.btn:after{content:"→"}
.btn.block{width:100%}
.link{font:700 13px var(--mono);letter-spacing:.14em;color:var(--accent-2);text-decoration:none;text-transform:uppercase}
.link:after{content:" →"}
.cta{display:flex;flex-direction:column;align-items:center;margin-top:30px}

/* ticker */
.ticker{background:var(--accent);color:var(--on-accent);overflow:hidden;white-space:nowrap;padding:9px 0;font:700 13px var(--mono);letter-spacing:.06em}
.ticker div{display:inline-block;animation:tk 45s linear infinite}
.ticker span{margin:0 22px}.ticker span:before{content:"★★★★★ ";color:var(--gold)}
@keyframes tk{to{transform:translateX(-50%)}}

/* top bar */
.bar{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,4vw,40px);background:var(--bar-bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:var(--display-weight) 18px var(--display);letter-spacing:.1em;text-decoration:none;color:var(--strong);text-transform:var(--display-case)}
.brand svg,.brand img{width:auto;height:34px}
.brand svg{width:30px}
.bar .lnk{font:700 12px var(--mono);letter-spacing:.14em;padding:10px 16px;border-radius:3px;text-decoration:none;background:var(--cta2);color:var(--on-cta2);box-shadow:0 6px 22px var(--cta2-glow);transition:transform .15s}
.bar .lnk:hover{transform:translateY(-1px)}

/* hero: headline, then an unobstructed video strip, then sub + CTA */
.hero{position:relative;overflow:hidden;background:var(--hero-bg)}
.hero .headline{text-align:center;padding:30px 16px 26px;background:radial-gradient(700px 300px at 50% 100%,var(--accent-soft),transparent 70%)}
.hero .headline h1{margin-bottom:0}
.vframe{position:relative;width:100%;aspect-ratio:16/9;max-height:300px;background:var(--media-bg);overflow:hidden;border-top:1px solid var(--line)}
@media (min-width:800px){.vframe{aspect-ratio:auto;height:clamp(280px,32vw,400px);max-height:none}}
.vstrip{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px clamp(16px,4vw,40px);background:var(--bg2);border-bottom:1px solid var(--line)}
.vstrip .caption{margin:0;min-height:0;justify-content:flex-start;flex:1 1 300px}
.vstrip .controls{padding:0}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
.slide.on{opacity:1}
.slide video,.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide.on img.kb{animation:kb 8s ease-out forwards}
@keyframes kb{from{transform:scale(1.15)}to{transform:scale(1)}}
.hero .in{position:relative;z-index:3;padding:30px 16px;text-align:center}
.caption{display:flex;align-items:flex-end;justify-content:center;max-width:760px}
.caption span{font:700 clamp(14px,1.8vw,16px)/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--strong);border-left:3px solid var(--accent);padding:2px 0 2px 12px;opacity:0;transform:translateY(8px);transition:.5s}
.caption span.on{opacity:1;transform:none}
.hero h1{font-size:clamp(38px,6.4vw,84px);line-height:var(--display-lh-hero,1.08);max-width:1040px;margin:6px auto 18px}
.hero .sub{max-width:660px;margin:0 auto 26px;color:var(--text-2);font-size:clamp(17px,2.2vw,20px)}
.controls{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 16px 18px}
.controls button{background:var(--bg3);border:1px solid var(--line);color:var(--strong);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:18px}
.dots{display:flex;gap:6px}
.dots i{width:28px;height:3px;background:var(--line);border-radius:2px;position:relative;overflow:hidden;cursor:pointer}
.dots i.on:after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;animation:bar var(--dur,6s) linear forwards}
@keyframes bar{from{transform:scaleX(0)}}
.phases{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);max-width:860px;margin:0 auto;width:100%;border-top:1px solid var(--line)}
.phases div{padding:14px 8px 18px;font-size:14px;color:var(--muted);text-align:center}
.phases b{display:block;color:var(--strong);font:700 12px var(--mono);letter-spacing:.1em;margin-bottom:2px}

/* sticky section nav */
.secnav{position:sticky;top:0;z-index:40;display:flex;justify-content:safe center;gap:4px;padding:10px;background:var(--glass);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.secnav a{flex:0 0 auto;font:700 11px var(--mono);letter-spacing:.12em;text-decoration:none;padding:8px 12px;border-radius:999px;color:var(--muted)}
.secnav a.on{background:var(--chip-on);color:var(--on-chip-on)}
.secnav a.buy{background:var(--accent);color:var(--on-accent)}

/* story statements */
.story{background:var(--paper);color:var(--ink)}
.story p{font:500 clamp(26px,4.2vw,46px)/1.25 var(--body);letter-spacing:-.02em;max-width:920px;margin:0 auto;padding:13vh 16px;text-align:center}
.story p em{font-style:normal;color:var(--accent)}
.story p+p{padding-top:0}

/* problem */
.split{display:grid;gap:34px;align-items:center}
.split .pic{border-radius:var(--radius);overflow:hidden;position:relative}
.split .pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--accent-soft))}
.xlist,.clist{list-style:none;padding:0;margin:0 0 22px}
.xlist li,.clist li{position:relative;padding:0 0 14px 32px;font-size:17px}
.xlist li:before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:900}
.clist li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.pull{border-left:4px solid var(--accent);padding:6px 0 6px 20px;font:600 clamp(20px,2.6vw,26px)/1.35 var(--body);color:var(--strong);margin:28px 0}

/* pillars */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.pillars div{background:var(--bg3);border:1px solid var(--line);border-radius:16px;padding:22px}
.pillars b{display:block;font:var(--display-weight) 48px/1 var(--display);color:var(--accent)}
.pillars h3{font:var(--display-weight) 26px var(--display);text-transform:var(--display-case);letter-spacing:.03em;margin:8px 0 6px}
.pillars p{color:var(--muted);font-size:15px;margin:0}

/* first / then / finally */
.ftf{display:grid;gap:22px}
.ftf .card{display:grid;border-radius:var(--radius);overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.ftf .txt{padding:30px}
.ftf .txt p{color:var(--text-2)}
.ftf .pic{min-height:260px;background:var(--media-bg) center/cover no-repeat}

/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp .hd{padding:16px;border-radius:12px;font:var(--display-weight) clamp(18px,2.4vw,24px) var(--display);letter-spacing:.04em;text-transform:var(--display-case)}
.cmp .hd.us{background:var(--accent);color:var(--on-accent)}.cmp .hd.them{background:var(--bg3);color:var(--muted)}
.cmp .cell{padding:15px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:15px;display:flex;gap:10px;line-height:1.45}
.cmp .cell.us:before{content:"✓";color:var(--green);font-weight:900}
.cmp .cell.them{color:var(--muted)}.cmp .cell.them:before{content:"✕";color:var(--red);font-weight:900}

/* reviews */
.wall{columns:1;column-gap:16px}
.rv{break-inside:avoid;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
.rv .who{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rv .who img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.rv .who small{display:block;color:var(--green);font:700 11px var(--mono);letter-spacing:.1em}
.rv h4{margin:0 0 8px;font-size:17px}
.rv .st{color:var(--gold);letter-spacing:2px;font-size:14px}
.rv p{color:var(--text-2);font-size:15px;margin:0}

/* offer */
.offer{display:grid;gap:30px;align-items:center;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:2px solid var(--accent);border-radius:22px;padding:26px 20px;box-shadow:0 30px 90px var(--accent-soft)}
.mods{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.mods li{display:flex;gap:12px;background:var(--tint);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--text-2)}
.mods li b{display:block;color:var(--strong);font-size:16px}
.mods .n{font:var(--display-weight) 20px var(--display);color:var(--accent);min-width:28px}
.price{display:flex;align-items:baseline;gap:14px;margin:6px 0 18px;flex-wrap:wrap}
.price s{color:var(--muted);font-size:24px}
.price b{font:var(--display-weight) 70px/1 var(--display);color:var(--strong)}
.secure{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:14px;color:var(--muted);font-size:13px}
.secure img{height:22px;width:auto}

/* guarantee, founder */
.duo{display:grid;gap:34px;align-items:center}
.seal{width:200px;height:200px;border-radius:50%;border:3px dashed var(--accent);display:grid;place-items:center;text-align:center;margin:0 auto;font:var(--display-weight) 22px/1.1 var(--display);letter-spacing:.04em;text-transform:var(--display-case)}
.seal b{display:block;font-size:64px;color:var(--accent)}
.founder img{border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;width:100%}

/* two paths */
.paths{display:grid;gap:16px;margin-top:30px}
.paths .card{border-radius:16px;padding:26px;border:1px solid var(--line);background:var(--bg2)}
.paths .card.go{border:2px solid var(--accent);background:linear-gradient(180deg,var(--accent-soft),transparent)}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;font-weight:700;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:16px;color:var(--accent);font-size:26px}
.faq details[open] summary:after{content:"–"}
.faq details p{color:var(--text-2)}

/* placeholders / builder notes */
.need{background:var(--need-bg);color:var(--need-text);border:1px dashed var(--accent);border-radius:4px;padding:1px 6px;font:700 12px var(--mono)}
.ph{border:2px dashed var(--accent);border-radius:14px;padding:20px;color:var(--ph-text);font:14px/1.5 var(--mono);background:repeating-linear-gradient(45deg,var(--accent-soft) 0 12px,transparent 12px 24px)}
.ph strong{display:block;color:var(--strong);font:var(--display-weight) 20px var(--display);letter-spacing:.04em;margin-bottom:6px}

/* modal popups */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:var(--overlay);backdrop-filter:blur(4px)}
.modal.open{display:flex;animation:fade .2s ease}
.modal-box{position:relative;width:100%;max-width:470px;background:var(--bg2);border:1px solid var(--accent);border-radius:20px;padding:32px 22px 24px;text-align:center;box-shadow:0 30px 80px var(--accent-soft)}
.modal-box h2{font-size:clamp(28px,6vw,38px)}
.modal-close{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--muted);font-size:28px;cursor:pointer;line-height:1}
.modal form{display:grid;gap:12px;margin-top:16px}
.modal input{width:100%;padding:15px 16px;border-radius:10px;border:1px solid var(--line);background:var(--input-bg);color:var(--text);font:500 16px var(--body)}
.modal input:focus{outline:2px solid var(--accent);border-color:transparent}
.modal .fine{font-size:12px;color:var(--muted);margin:8px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.steps-bar{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.steps-bar span{width:60px;height:5px;border-radius:9px;background:var(--line)}.steps-bar span.on{background:var(--accent)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--glass);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%;padding:14px;font-size:18px}

footer{border-top:1px solid var(--line);padding:34px 16px 90px;text-align:center;color:var(--muted);font-size:13px}
footer p{max-width:760px;margin:0 auto 10px}
footer a{color:var(--muted)}

/* ---------- funnel pages: checkout, upsells, thank-you ---------- */
.fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);background:var(--bar-bg)}
.fbar .safe{font:700 11px var(--mono);letter-spacing:.12em;color:var(--muted)}
.alert{background:var(--cta2);color:var(--on-cta2);text-align:center;font:700 14px/1.4 var(--body);padding:11px 16px}
.progress{display:flex;gap:6px;max-width:520px;margin:0 auto 10px}
.progress span{flex:1;height:5px;border-radius:9px;background:var(--line)}
.progress span.done{background:var(--green)}.progress span.on{background:var(--accent)}
.plabels{display:flex;justify-content:space-between;max-width:520px;margin:0 auto 26px;font:700 10px var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.uhero{padding:40px 0 30px;text-align:center;background:radial-gradient(700px 360px at 50% 0,var(--accent-soft),transparent 70%)}
.uhero h1{font-size:clamp(36px,6vw,68px);line-height:var(--display-lh);max-width:960px;margin:0 auto 18px}
.uhero .sub{max-width:680px;margin:0 auto;color:var(--text-2);font-size:clamp(17px,2.2vw,20px)}
.media{max-width:900px;margin:30px auto 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--media-bg) center/cover no-repeat}
.media video,.media img{width:100%;height:100%;object-fit:cover}
.buybox{max-width:620px;margin:0 auto;text-align:center;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:2px solid var(--accent);border-radius:20px;padding:28px 20px}
.buybox .price{justify-content:center}
.co-grid{display:grid;gap:26px;padding:34px 0 60px}
.summary{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.summary .item{display:flex;gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.summary .item img{width:96px;border-radius:8px}
.summary .item b{display:block}
.mini-g{display:flex;gap:14px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.mini-g .seal{width:84px;height:84px;font-size:12px;flex:0 0 auto;border-width:2px}
.mini-g .seal b{font-size:26px}
.ty-steps{display:grid;gap:14px;max-width:760px;margin:0 auto}
.ty-steps .card{display:flex;gap:16px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:20px}
.ty-steps .n{flex:0 0 44px;height:44px;border-radius:12px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:var(--display-weight) 22px var(--display)}

/* smart-skip veil + preview-only demo buttons */
.skip-veil{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;text-align:center;color:var(--muted)}
.skip-veil .spin{width:42px;height:42px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin:0 auto 14px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.demo-tc{display:grid;gap:10px;margin-top:14px}
.demo-tc .btn{width:100%}
.demo-tc a{color:var(--muted);font:500 14px var(--body);text-decoration:underline;text-align:center}
.demo-tag{display:inline-block;background:var(--cta2);color:var(--on-cta2);font:700 10px var(--mono);letter-spacing:.12em;padding:2px 6px;border-radius:3px;margin-bottom:6px}

@media (prefers-reduced-motion:reduce){.ticker div,.slide.on img.kb{animation:none}}
@media (min-width:800px){
  section{padding:100px 0}
  .split{grid-template-columns:5fr 6fr}
  .ftf .card{grid-template-columns:1fr 1fr}.ftf .card:nth-child(2) .pic{order:-1}
  .wall{columns:3}
  .offer{grid-template-columns:5fr 6fr;padding:46px}
  .duo{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:repeat(4,1fr)}
  .paths{grid-template-columns:1fr 1fr}
  .sticky-cta{display:none}
  footer{padding-bottom:40px}
  .co-grid{grid-template-columns:7fr 5fr;align-items:start}
}
/* placeholders sitting on a dark media box stay readable in light themes */
.media .ph{color:#e8e8ee}.media .ph strong{color:#fff}
.demo-tc a.btn{color:var(--on-accent);text-decoration:none;font:var(--display-weight) 19px/1.1 var(--display)}
/* ticker without review stars (for books with no reviews yet) */
.ticker.plain span:before{content:"✦ ";color:inherit;opacity:.7}
/* 4-step phase row */
.phases.four{grid-template-columns:repeat(4,1fr);max-width:960px}
/* quote card used in place of a photo */
.quote-card{background:var(--bg3);border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:var(--radius);padding:34px 28px;font:var(--display-weight) clamp(24px,3.4vw,34px)/1.25 var(--display);color:var(--strong);text-transform:none}
.quote-card small{display:block;margin-top:16px;font:600 14px var(--body);color:var(--muted)}
.tools{display:grid;gap:14px}
.tools .rv h4{color:var(--strong)}
@media (min-width:800px){.tools{grid-template-columns:repeat(3,1fr)}.tools > :last-child:nth-child(3n+1){grid-column:2}}
/* initials avatar when no customer photo is available */
.rv .who .av{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:700 16px var(--body);flex:0 0 auto}
/* zig-zag story rows: media on one side, words on the other, alternating */
.zz{padding:72px 0}
.zz .head{text-align:center;max-width:760px;margin:0 auto 44px}
.zz-row{display:grid;gap:22px;align-items:center;margin-bottom:46px}
.zz-row:last-of-type{margin-bottom:0}
.zz-media{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--media-bg);box-shadow:0 18px 50px rgba(0,0,0,.14)}
.zz-media img,.zz-media video{width:100%;height:100%;object-fit:cover;display:block}
.zz-text .kick{margin-bottom:10px}
.zz-text h3{font-size:clamp(26px,3.2vw,38px);line-height:var(--display-lh);margin-bottom:14px}
.zz-text p{color:var(--text-2);font-size:18px;margin:0 0 14px}
.zz .cta{margin-top:50px}
@media (min-width:800px){
  .zz{padding:100px 0}
  .zz-row{grid-template-columns:1fr 1fr;gap:56px;margin-bottom:70px}
  .zz-row.rev .zz-media{order:2}
}
/* 3D ebook mockup from a flat cover image */
.book3d{perspective:1600px;display:flex;justify-content:center;padding:10px 0 20px}
.book3d img{width:min(360px,80%);aspect-ratio:2/3;object-fit:cover;border-radius:4px 10px 10px 4px;transform:rotateY(-18deg) rotateX(2deg);box-shadow:-2px 0 0 rgba(255,255,255,.25) inset,18px 24px 50px rgba(0,0,0,.35),4px 6px 12px rgba(0,0,0,.25);transition:transform .4s}
.book3d img:hover{transform:rotateY(-6deg)}

/* pillars: keep the 2-column grid inside phone widths */
.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
.pillars h3{font-size:clamp(19px,5vw,26px);overflow-wrap:anywhere}
@media (max-width:420px){.pillars div{padding:16px}}
@media (min-width:800px){.pillars{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* thank-you cards: let long emails/links wrap on phones */
.ty-steps .card>div{min-width:0;overflow-wrap:anywhere}
/* checkout: keep the summary inside the screen (long product names and emails wrap) */
.co-grid>*{min-width:0}.summary{overflow-wrap:anywhere}

/* ---------- upsell/downsell pages: hero with price card, module cards, buy buttons (tools/upsell-dr.js) ---------- */
.up-hero{padding:30px 0 44px}
.up-grid{display:grid;gap:24px;text-align:left;margin-top:6px}
.up-grid>*{min-width:0}
.up-hero h1{font-size:clamp(32px,4.4vw,54px);line-height:var(--display-lh);margin:0 0 14px;max-width:none}
.up-hero .sub{margin:0 0 22px;max-width:none}
.up-hero .media{margin:0;max-width:none}
.up-card .buybox{text-align:left;padding:24px 22px;max-width:none;margin:0;box-shadow:0 24px 60px var(--accent-soft)}
.up-card .buybox h2{margin-bottom:8px}
.up-card .buybox .kick{display:block}
.up-card .buybox .price{justify-content:flex-start;margin:8px 0 14px}
.up-card .buybox .price b{font-size:clamp(48px,6vw,64px)}
.up-card .clist{margin:0 0 18px}.up-card .clist li{font-size:15px;padding-bottom:9px}
.up-card .save{display:inline-block;background:var(--cta2);color:var(--on-cta2);font:700 12px/1.3 var(--mono);letter-spacing:.08em;padding:5px 9px;border-radius:4px;margin-bottom:12px;text-transform:uppercase}
.up-copy{grid-area:copy}.up-card{grid-area:card}.up-media{grid-area:media}
.up-grid{grid-template-areas:"copy" "card" "media"}
.up-copy .sub{margin-bottom:0}
@media (min-width:960px){.up-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"copy card" "media card";gap:24px 44px;align-items:start}.up-card{position:sticky;top:16px}}
.up-cta{text-align:center;margin-top:36px}
.up-cta .micro{margin-top:12px}
.mod-grid{display:grid;gap:16px;margin-top:30px}
@media (min-width:700px){.mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.mod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mod-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.alt .mod-card{background:var(--bg)}
.mod-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.mod-card>div{padding:18px 20px 20px}
.mod-card .n{font:700 12px var(--mono);letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.mod-card h3{font:var(--display-weight) 22px/1.2 var(--display);text-transform:var(--display-case);letter-spacing:var(--display-track);margin:6px 0 8px;color:var(--strong)}
.mod-card p{color:var(--text-2);font-size:15px;margin:0}
.player{display:flex;gap:16px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.player img{width:78px;border-radius:6px;flex:0 0 auto;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.player>div{flex:1;min-width:0}
.player b{display:block;color:var(--strong);font-size:17px}
.player .muted{display:block;font-size:14px}
.player audio{width:100%;margin-top:10px}
.up-offer-pic img{width:100%;border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.paths .card p:only-child{margin:0}
.up-save{margin-top:10px;font:700 13px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.up-card .price .muted b{color:var(--strong)}
.up-once{padding:56px 0}
.once-card{text-align:center;border:2px dashed var(--accent);border-radius:22px;padding:34px 22px;background:var(--bg2)}
.once-card h2{font-size:clamp(28px,4.4vw,44px)}
.once-price{display:flex;justify-content:center;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 18px}
.once-price s{color:var(--muted);font-size:26px}
.once-price b{font:var(--display-weight) clamp(46px,7vw,68px)/1 var(--display);color:var(--strong)}
.once-price span{align-self:center;background:var(--accent);color:var(--on-accent);font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:6px}
.once-card p{max-width:620px;margin:0 auto 14px;color:var(--text-2);font-size:18px}
.once-card .btn{margin-top:10px}

/* qa-fix: start */
/* headings and ledes: balanced line breaks, no one-word last lines */
h1,h2,h3,.dsp,.buybox h2{text-wrap:balance}
.sub,.lede,.prose p,.zz-text p,.card p,.pull{text-wrap:pretty}
/* comparison table: both headers the same fill, weight and height; the winning side gets a gold edge, not a solid slab */
.cmp .hd.hd{display:flex;align-items:center;gap:10px;min-height:54px;padding:12px 15px;background:var(--bg3);border:1px solid var(--line);
  color:var(--strong);box-shadow:none;font:700 clamp(15px,1.9vw,18px)/1.25 var(--body);letter-spacing:.01em;text-transform:none}
.cmp .hd.hd:before{font-weight:900;flex:0 0 auto}
.cmp .hd.hd.us{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.cmp .hd.hd.us:before{content:"✓";color:var(--green)}
.cmp .hd.hd.them:before{content:"✕";color:var(--red)}
/* the two "paths" cards: same fill and text color; the good path gets the accent border */
.paths .card,.paths .card.go{background:var(--bg3);border:1px solid var(--line)}
.paths .card.go{border:1px solid var(--accent);box-shadow:inset 0 3px 0 var(--accent)}
.paths .card .muted{color:var(--text-2)}
/* price boxes: only the price itself is big; the note sits on its own line; no empty strike-through gap */
.price b{font:inherit;color:var(--strong)}
.price > b{font:var(--display-weight) 70px/1 var(--display)}
.up-card .buybox .price > b{font-size:clamp(48px,6vw,64px)}
.price s:empty,.once-price s:empty{display:none}
.price .muted{flex-basis:100%}
.price .muted b,.up-card .buybox .price .muted b{font:inherit;font-weight:700;color:var(--strong)}
/* stat cards: never break a word mid-way */
.pillars h3{overflow-wrap:normal;word-break:normal;hyphens:manual}
/* section nav: only the active item is filled; "buy" is an outline */
.secnav a.buy{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.secnav a.buy.on{background:var(--accent);color:var(--on-accent)}
/* thank-you: the member-area link is the one action, so it is a real button */
.ty-steps a.btn{margin-top:12px}
/* emails and long words: wrap only when they must, never mid-word for no reason */
.summary{overflow-wrap:break-word}
.ty-steps{grid-template-columns:minmax(0,1fr)}
.ty-steps .card>div{min-width:0;overflow-wrap:anywhere}
a[href^="mailto:"]{overflow-wrap:anywhere;word-break:normal}
/* legal and prose pages: section headings in the site's display face, with room above */
.prose h2:not(.dsp){font-family:var(--display);font-weight:var(--display-weight);margin-top:36px}
/* phones: the logo stays on one line */
@media (max-width:520px){.fbar .brand,.bar .brand{font-size:12px;letter-spacing:.12em;white-space:nowrap}.bar .lnk{white-space:nowrap}}
/* body text, list items and card titles: no one-word last lines */
p,li,h4,.mods b,.quote-card{text-wrap:pretty}
/* offer card: the cover sits centered beside the list instead of leaving an empty column under it */
.offer > div:first-child:not(.up-offer-pic){align-self:center !important;position:static !important}
/* course outline: the module list lines up with the copy and stat cards above it */
.wrap[style*="max-width:900px"] > .ftf{max-width:728px;margin-inline:auto}
/* stat cards: titles reserve two lines so the cards read as one row */
.pillars h3{min-height:2.4em;display:flex;align-items:flex-start}
@media (max-width:759px){.pillars h3{min-height:2.4em}}
/* centered checklists */
#check .clist{max-width:640px;margin-inline:auto}
/* quote source and footer links */
.quote-card small{font-size:14px;color:var(--text-2)}
footer a{white-space:nowrap}
/* audio sample: a square crop of the course title card instead of the book cover */
.player img{width:128px;aspect-ratio:16/9;object-fit:cover} /* the 16:9 course frame, uncropped */
@media (max-width:400px){.player img{width:104px}}
/* stat cards: a word value (e.g. "Offline") never pushes the card wider than the screen */
.pillars > div{min-width:0}
.pillars b{overflow-wrap:normal}
@media (max-width:520px){.pillars b{font-size:clamp(26px,8vw,40px)}}
/* "purchases are final" note under course and audio buy boxes */
.micro.final{margin-top:8px;font:500 13px/1.45 var(--body);letter-spacing:0;text-transform:none;color:var(--text-2)}
/* phones: compact buttons so price labels fit on one line where possible; header keeps its gap */
@media (max-width:520px){.btn{font-size:16px;padding:15px 18px}.bar{gap:12px}.bar .lnk{padding:8px 10px;font-size:11px;letter-spacing:.1em}.cmp .hd.hd{font-size:14px}}
/* upsell heroes: the copy and the preview sit together at the top; the tall price card no longer stretches the gap between them */
@media (min-width:960px){.up-grid{grid-template-rows:auto 1fr}.up-media{align-self:start}}
/* long notes under buttons read as sentences, not tiny caps */
.up-cta .micro,.cta .micro{font:500 13px/1.45 var(--body);letter-spacing:0;text-transform:none}
/* card titles: comfortable leading on two lines */
.rv h4{line-height:1.3}
/* side-by-side seal: big enough for its column */
.duo .seal{width:clamp(180px,24vw,260px);height:clamp(180px,24vw,260px)}
/* popup: once the form is replaced by the success message, the fine print goes too */
form:not(:has(input)) + .fine{display:none}
/* thank-you: emails wrap at the @ (a <wbr> in the markup), never mid-word */
.ty-steps a[href^="mailto:"],.ty-steps b{overflow-wrap:normal}
/* a narrow intro and the stat cards under it share one column */
.narrow.prose + .pillars{max-width:760px;margin-left:auto;margin-right:auto}
/* self-check: the list and the callout under it share one edge */
#check .pull{max-width:640px;margin-left:auto;margin-right:auto}
/* footers: room for the link row on one line */
footer p{max-width:920px}
/* four-up stat cards: titles sized to fit two lines */
@media (min-width:760px){.pillars h3{font-size:clamp(18px,1.6vw,22px)}}
/* notes under buttons: readable, not faint */
.up-cta .micro{color:var(--text-2)}
/* offer picture fills its column; paired cards center their copy */
.offer:has(.up-offer-pic){align-items:stretch}.up-offer-pic{align-self:stretch;min-height:320px}.up-offer-pic img{width:100%;height:100%;object-fit:cover;object-position:var(--offer-pos,center 30%)}
.paths .card{display:flex;flex-direction:column;justify-content:flex-start}
/* hero price card: the two notes under the buttons read as one block of plain sentences */
.up-card .micro{font:500 13px/1.45 var(--body);letter-spacing:0;text-transform:none;color:var(--text-2)}
.up-card .micro.final{margin-top:4px}
/* short lines that tend to strand a word */
.alert,.micro,.up-card a,summary,.faq summary,.mod-card h3,.mod-card p{text-wrap:balance}
.mod-card .n,.ftf details summary .muted{white-space:nowrap}
/* the guarantee seal keeps its words inside the ring */
.duo .seal{font-size:clamp(15px,1.6vw,20px)}
.duo .seal b{font-size:clamp(52px,6vw,72px)}
@media (max-width:520px){
  .duo .seal{width:200px;height:200px}
  /* phones: every call-to-action block and its note centered */
  .cta{align-items:center !important;text-align:center}
  .ivory .duo{gap:12px}
  .secnav{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  footer{font-size:12px}
}
/* price card notes: centered under the centered buttons, natural wrapping, a little air before the final-sale line */
.up-card .micro{text-align:center;text-wrap:wrap}
.up-card .micro.final{margin-top:10px}
/* module cards: titles reserve two lines so the body text in a row starts level */
@media (min-width:760px){.mod-card h3{min-height:2.5em}}
/* legal and long-prose pages: plain wrapping, no early breaks */
.narrow.prose > p,.narrow.prose li{text-wrap:wrap}
/* order summary on small phones: cover above the title so the subtitle has room */
@media (max-width:420px){.summary .item{flex-direction:column;align-items:flex-start}.summary .item img{width:110px}}
/* phones: the header logo and button always fit on one row */
@media (max-width:420px){.bar .brand{font-size:11px;letter-spacing:.08em;min-width:0}.bar .lnk{padding:7px 9px;font-size:10px;letter-spacing:.06em;flex:0 0 auto}}
/* hero step strip on phones: labels stay on one line */
@media (max-width:520px){.phases div{min-width:0;padding-left:4px;padding-right:4px}.phases b{font-size:10px;letter-spacing:.06em;min-height:2.6em;display:flex;align-items:flex-end;justify-content:center;text-wrap:balance}}
/* four-up stat cards: the big value sized to its card, never past the edge */
@media (min-width:760px){.pillars b{font-size:clamp(28px,2.8vw,40px);white-space:nowrap}}
/* eight module cards sit 4 + 4 on desktop instead of 3 + 3 + 2 */
@media (min-width:960px){.mod-grid:has(> .mod-card:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
/* checkout summary: the support address never splits */
.summary a[href^="mailto:"]{white-space:nowrap}
/* phones: course and upsell hero headlines a size smaller */
@media (max-width:480px){.uhero h1{font-size:clamp(28px,8.2vw,34px)}}
/* long buttons on phones: balanced line breaks, no stranded arrow */
@media (max-width:520px){.btn{text-wrap:balance;text-align:center;line-height:1.25}.btn:after{content:none}}
/* checkout guarantee line on phones: smaller seal so the support email fits; it may break after the @ */
.mini-g p{min-width:0}
@media (max-width:480px){.mini-g{gap:12px}.mini-g .seal{width:64px;height:64px;font-size:10px}.mini-g .seal b{font-size:20px}}
/* a long course title in a price box: short name as the heading, subtitle smaller underneath */
.buybox h2 .subt{display:block;font-family:var(--body,inherit);font-size:max(15px,.42em);font-weight:500;line-height:1.35;letter-spacing:0;margin-top:8px;opacity:.85;text-wrap:balance}
/* five module cards on desktop: 3 on top, the last 2 centered underneath instead of a gap at the end */
@media (min-width:960px){.mod-grid:has(> .mod-card:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}.mod-grid:has(> .mod-card:nth-child(5):last-child) > .mod-card{grid-column:span 2}.mod-grid:has(> .mod-card:nth-child(5):last-child) > .mod-card:nth-child(4){grid-column:2 / span 2}}
/* buttons: centered text and balanced lines at every width; the fbar status label never wraps */
.btn{text-align:center;text-wrap:balance}
.fbar .safe{white-space:nowrap}
@media (max-width:400px){.fbar .safe{font-size:10px;letter-spacing:.06em}}
/* a 3-column card grid whose last card sits alone: center it */
@media (min-width:800px){.tools > :last-child:nth-child(3n+1){grid-column:2}}
/* stat cards: number, title and description each share a row across the set, so descriptions start level */
@supports (grid-template-rows:subgrid){.pillars > div{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}.pillars > div > h3{align-self:start}}
/* popup headlines: capped size and balanced lines, so a narrow modal never stacks one word per line */
.modal-box h2,.modal-box h2.dsp{font-size:clamp(26px,3.4vw,40px);line-height:1.12;text-wrap:balance}
/* qa-fix: end */