:root{
  /* Same palette as pages.css and index.html (light reading areas, dark header/footer bands). */
  --ink:#1C1D2B; --purple:#5B47C9; --purple-dark:#3E2F9E; --lift:#8B7FD6; --lavender:#B5ABFC;
  --soft:#F3F1F8; --line:rgba(28,29,43,0.10); --text:#1C1D2B; --muted:#5F6274; --white:#FFFFFF; --paper:#FBFAFD;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:17px/1.6 Inter,system-ui,-apple-system,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--purple)} a:hover{color:var(--purple-dark)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px}
.skip:focus{left:8px;z-index:10}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:64px 0}
.topbar{background:var(--ink);color:#fff;padding:12px 0}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar a{color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.brand{letter-spacing:.14em}
.topnav{display:flex;gap:18px;flex-shrink:0}
.topnav a{display:inline-block;padding:12px 0;white-space:nowrap}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin:0 0 10px}
.eyebrow-light{color:var(--lavender)}
.h1{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-0.025em;line-height:1.05;font-size:clamp(36px,5.6vw,64px);margin:0 0 20px;color:var(--ink)}
.h2{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:1.1;font-size:clamp(28px,3.8vw,40px);margin:0 0 20px;color:var(--ink)}
.light{color:#fff}
.lead{font-size:20px;margin:0 0 24px}
.note{font-size:15px;color:var(--muted)}
.measure{max-width:760px}
.kicker{font-weight:700;font-size:19px}
.sub{color:var(--muted);margin-top:-10px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0}
.btn{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:12px 26px;border-radius:10px;background:var(--purple);color:#fff;font-weight:700;font-size:17px;text-decoration:none;border:0}
.btn:hover{background:var(--purple-dark);color:#fff}
.btn-dark{background:var(--ink)} .btn-dark:hover{background:#2a2a33}
.btn-lift{background:var(--lift)}
.btn-off{background:#E9E6EF;color:var(--muted);cursor:default}
.btn-off small{font-weight:600}
.hero-band{padding-top:48px}
.hero{display:flex;flex-wrap:wrap;gap:44px;align-items:center}
.hero-main{flex:999 1 500px;min-width:0}
.hero-side{flex:1 1 260px;min-width:0;display:flex;justify-content:center}
.stats{display:flex;flex-wrap:wrap;gap:32px;margin:28px 0 8px}
.stat-n{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:40px;line-height:1;color:var(--purple)}
.stat-l{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cover{border-radius:8px;box-shadow:0 14px 34px rgba(11,11,15,.18);display:block}
.cover-lg{width:min(320px,80vw)} .cover-md{width:200px} .cover-sm{width:120px}
.cover-type{aspect-ratio:2/3;background:var(--purple);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:8% 9%;text-align:left}
.ct-series{font-size:.62em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lavender)}
.ct-title{font-weight:700;font-size:1.9em;line-height:1.02}
.ct-sub{font-size:.7em;color:#EFE8F8}
.ct-brand{font-size:.55em;font-weight:700;letter-spacing:.16em}
.cover-md.cover-type{font-size:13px} .cover-lg.cover-type{font-size:19px} .cover-sm.cover-type{font-size:8px}
.band-soft{background:var(--soft)}
.band-dark{background:var(--ink);color:#fff}
.band-dark p{color:#E4DFEE}
.band-purple{background:var(--purple);color:#fff}
.band-purple p{color:#EFE8F8}
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:24px 0}
.voice{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.who{font-size:13px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:.08em}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.card{border:1px solid #E5E5EA;border-radius:14px;padding:24px;background:#fff}
.card-strong{border:2px solid var(--purple);background:#F7F5FD}
.card h3{margin:0 0 12px;font-size:20px}
.card ul{margin:0;padding-left:20px;display:grid;gap:8px}
.learn-card{border-top:3px solid var(--lift);padding-top:14px}
.learn-card h3{font-size:18px;margin:0 0 6px;color:#fff}
.learn-card p{margin:0}
.ch{font-size:13px;color:var(--lavender);margin-top:6px}
.split{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.split-main{flex:999 1 460px;min-width:0}
.split-side{flex:1 1 220px}
.about p{max-width:780px}
.faq-list{display:grid;gap:12px;max-width:820px}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.faq summary{font-weight:700;cursor:pointer;min-height:28px}
.faq p{margin:10px 0 0}
.buybox{border:2px solid var(--purple);border-radius:18px;padding:32px;display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.buybox-cover{flex:1 1 200px;display:flex;justify-content:center}
.buybox-main{flex:999 1 380px;min-width:0}
.buybox ul{padding-left:20px;display:grid;gap:6px;margin:0 0 18px}
.close .wrap{max-width:820px}
.rel-row{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:36px}
.rel-card{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--text);border:1px solid #E5E5EA;border-radius:12px;padding:12px;flex:1 1 300px;min-width:0;font-weight:700}
.rel-card small{font-weight:400;color:var(--muted)}
.rel-card:hover{border-color:var(--purple)}
.sample img{border:1px solid #E5E5EA;border-radius:8px}
.sample figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.math{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0}
.math-i{border:1px solid #E5E5EA;border-radius:12px;padding:16px;text-align:center}
.tool-l{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;color:var(--purple)}
blockquote.card{margin:0}
blockquote footer{font-weight:700;margin-top:8px}
.foot a{color:var(--purple)}
.foot{padding:36px 0;text-align:center;font-size:14px;color:var(--muted);border-top:1px solid #EEE}
.foot-brand{font-weight:700;letter-spacing:.14em;color:var(--ink)}
.foot-links,.foot-note{margin-top:10px}
@media (max-width:600px){section{padding:48px 0}.buybox{padding:22px}}