/* Study Pill — the page-level stylesheet.
 *
 * Everything colour and type now comes from tokens.css. The block below is a
 * COMPATIBILITY LAYER: a dozen stylesheets and page <style> blocks were written
 * against short names (--paper, --ink, --coral), so each one is aliased to its
 * token rather than renamed across the app in the same change that alters what
 * it renders as.
 *
 * These were not aliases before. They were a SECOND PALETTE with its own
 * values, and it had drifted: --coral sat at oklch(60%...) here, five points
 * lighter than the token, which is the exact value tokens.css records as
 * failing AA at 3.97:1; and --pine was #10B981, the emerald that file says was
 * removed for measuring 2.29:1. Because app.css loads after tokens.css, the
 * failing values were the ones on screen — on every page, in both themes.
 */
:root {
  --paper: var(--sp-paper);
  --paper-2: var(--sp-paper-2);
  --paper-edge: var(--sp-paper-edge);
  --ink: var(--sp-ink);
  --ink-2: var(--sp-ink-2);
  --ink-soft: var(--sp-ink-soft);
  --rule: var(--sp-rule);
  --rule-soft: var(--sp-rule-soft);
  --coral: var(--sp-coral);
  --coral-2: var(--sp-coral-2);
  --coral-deep: var(--sp-coral-deep);
  --highlight: var(--sp-coral-soft);
  --highlight-soft: var(--sp-coral-soft);
  --pine: var(--sp-pine);
  --pine-soft: var(--sp-pine-soft);
  --cream: var(--sp-cream);

  /* Elevation system — three tiers, all gentle */
  --lift-1: var(--sp-lift-1);
  --lift-2: var(--sp-lift-2);
  --lift-3: var(--sp-lift-3);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
html { scroll-behavior: smooth; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sp-font-prose);
  /* Fluid, not fixed: 17px at a 1440 desktop, easing to 16px on phones and
     18px on very wide screens — the marketing face scales the way the app
     face already does, instead of shipping one px value to every device. */
  font-size: clamp(16px, 12px + 0.35vw, 18px);
  line-height: 1.55;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* CLIP, NOT HIDDEN. Owner, on his phone: "most header scrols when you
     scroll". Both headers were already declared correctly - `.sp-app-bar` and
     `nav.top` are both `position: sticky; top: 0` - and this one line defeated
     them everywhere.
     `overflow-x: hidden` makes the element a SCROLL CONTAINER, so a sticky
     descendant sticks to that box instead of the viewport, which in practice
     means it does not stick at all. `overflow-x: clip` prevents the same
     sideways scroll WITHOUT creating a scroll container, so sticky survives.
     The reason the declarations looked right in review and failed on a real
     phone: the bug was never in the header. */
  overflow-x: clip;
}
@supports (font-variation-settings: normal) {
  .mono, .stat .big, .card .price, .pack-card .meta, .phone-ui .q-meta,
  .nav-links a.cta, .btn { font-variant-numeric: tabular-nums; }
}
body {
  background-image:
    radial-gradient(circle at 20% 10%, oklch(88% 0.04 70 / .35) 0, transparent 40%),
    radial-gradient(circle at 85% 70%, oklch(88% 0.04 70 / .25) 0, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 35px, oklch(80% 0.03 75 / .06) 35px 36px);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.mono { font-family: var(--sp-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.display { font-family: var(--sp-font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 0.94; }
.italic-display { font-family: var(--sp-font-display); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hand { font-family: var(--sp-font-display); color: var(--coral); }
/* UI chrome: Inter for anything that isn't display prose */
.ui-sans { font-family: var(--sp-font-ui); }

/* ---------- PAGE FRAME ---------- */
.page {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
  position: relative;
}

/* ---------- NAV ---------- */
nav.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--rule-soft);
  position: sticky; top: 0; z-index: 40;
  background: oklch(96.5% 0.018 85 / .78);
  backdrop-filter: saturate(1.2) blur(16px);
  -webkit-backdrop-filter: saturate(1.2) blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .pill {
  width: 30px; height: 30px; border-radius: 15px;
  background: linear-gradient(100deg, var(--coral) 0 50%, var(--highlight) 50% 100%);
  box-shadow: inset 0 -2px 0 oklch(0 0 0 / .12), var(--lift-1);
  transform: rotate(-18deg);
  position: relative; flex-shrink: 0;
}
.brand .pill::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(circle at 30% 30%, oklch(100% 0 0 / .35), transparent 50%);
}
.brand .name { font-family: var(--sp-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.brand .tag { font-family: var(--sp-font-ui); font-size: 10px; color: var(--ink-soft); letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 28px; font-family: var(--sp-font-ui); }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; position: relative; transition: color .15s var(--ease-out); }
.nav-links a:hover { color: var(--coral); }
.nav-links a.cta {
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: var(--radius-sm);
  font-family: var(--sp-font-ui); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  text-transform: none;
  box-shadow: var(--lift-1);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s var(--ease-out);
}
.nav-links a.cta:hover { background: var(--coral); color: var(--paper); transform: translateY(-1px); box-shadow: var(--lift-2); }
.nav-links a.cta:active { transform: translateY(0); box-shadow: var(--lift-1); }
.nav-links a.cta { white-space: nowrap; }
/* Drop the user's first name from the "Continue · Victory →" CTA on phones —
   it pushes the pill wide enough to wrap text inside itself. The "Continue →"
   text alone is enough; the user knows who they're logged in as. */
@media (max-width: 720px) {
  .nav-links a.cta .cta-name { display: none; }
}
/* Mobile menu toggle */
.nav-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; color: var(--ink); }
.nav-toggle svg { display: block; }

/* ---------- MARGIN NUMBERS (§) ---------- */
.section-mark {
  position: absolute; left: 0; top: 0;
  font-family: var(--sp-font-mono);
  font-size: 11px; color: var(--ink-soft); letter-spacing: .12em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 8px 0;
}

/* ---------- HERO ---------- */
.hero {
  padding: clamp(40px, 7vw, 88px) 0 40px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.hero-eyebrow .line { flex: 1; height: 1px; background: var(--rule); max-width: 80px; }

.hero h1 {
  font-family: var(--sp-font-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.hero h1 .marker {
  position: relative; display: inline-block; padding: 0 .08em;
}
.hero h1 .marker::before {
  content: ''; position: absolute; inset: 8% -4%;
  background: var(--highlight);
  z-index: -1;
  transform: skewX(-3deg) rotate(-.8deg);
  box-shadow: 0 1px 0 oklch(0 0 0 / .05);
}
.hero h1 .it { font-family: var(--sp-font-display); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.hero h1 .coral { color: var(--coral); }

.hero-sub {
  grid-column: 2;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-bottom: 8px;
  position: relative;
}
.hero-sub::before {
  content: '¶'; position: absolute; left: -28px; top: 2px;
  font-family: var(--sp-font-display); color: var(--coral); font-size: 22px;
}
.hero-sub em { font-style: normal; background: var(--highlight-soft); padding: 0 3px; }

.hero-under {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  gap: 24px;
}
.btn {
  font-family: var(--sp-font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
  cursor: pointer; border: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: var(--lift-2);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--lift-3); filter: brightness(1.04); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--lift-1); }
.btn-ghost { color: var(--ink); border: 1px solid var(--rule); background: var(--paper); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--lift-1); }
.btn-ghost:active { transform: translateY(0); }
.btn .arrow { transition: transform .2s var(--ease-out); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

.hero-proof {
  font-family: var(--sp-font-mono); font-size: 11px;
  color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.hero-proof .check { color: var(--pine); font-size: 14px; }
.hero-proof-right { justify-self: end; text-align: right; }

.marginalia {
  position: absolute;
  font-family: var(--sp-font-display);
  color: var(--coral);
  font-size: 22px;
  line-height: 1.1;
  transform: rotate(-4deg);
  pointer-events: none;
}
.marg-1 { bottom: 8%; right: 0; transform: rotate(4deg); max-width: 160px; }
@media (max-width: 1200px) { .marg-1 { display: none; } }

/* EXAM COUNTDOWN STRIP */
.countdown-strip {
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
  overflow: hidden;
}
.countdown-strip .label {
  font-family: var(--sp-font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}
.ticker {
  overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.ticker-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: scroll 40s linear infinite;
  font-family: var(--sp-font-display); font-size: 18px; font-style: italic;
  color: var(--ink-2);
}
/* A drawn dot, not the U+2731 dingbat that used to sit here: text glyphs
   standing in for graphics render differently on every OS and read as
   clip-art next to the brand faces. */
.ticker-track span::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--coral);
  margin-right: 12px; vertical-align: middle;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- SECTION HEADER STYLE ---------- */
section { position: relative; padding: clamp(60px, 10vw, 120px) 0; }
.sec-num {
  font-family: var(--sp-font-mono);
  font-size: 12px;
  color: var(--coral); letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.sec-num::after { content: ''; flex: 1; height: 1px; background: var(--rule); max-width: 180px; }
.sec-h {
  font-family: var(--sp-font-display);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 14ch;
  margin-bottom: 40px;
}
.sec-h .it { font-family: var(--sp-font-display); font-style: italic; }

/* ---------- FEATURES (textbook chapter cards) ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.feature {
  padding: 32px 28px;
  position: relative;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--lift-1);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: var(--rule); }
.feature .num {
  font-family: var(--sp-font-mono); font-size: 11px;
  color: var(--coral); letter-spacing: .14em;
  margin-bottom: 18px; font-variant-numeric: tabular-nums;
}
.feature h3 {
  font-family: var(--sp-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  line-height: 1.15;
}
.feature p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.feature .glyph {
  width: 52px; height: 52px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sp-font-display); font-size: 26px;
  color: var(--coral);
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--lift-1);
  transition: transform .22s var(--ease-out), border-color .22s var(--ease-out);
}
.feature:hover .glyph { transform: rotate(-6deg) scale(1.05); border-color: var(--coral); }

/* stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.stat {
  padding: 28px 24px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--lift-1);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.stat .big {
  font-family: var(--sp-font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stat .big .sup { font-family: var(--sp-font-display); font-style: italic; color: var(--coral); font-size: .6em; vertical-align: super; }
.stat .cap { font-family: var(--sp-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px; }

/* ---------- HOW IT WORKS ---------- */
.how {
  background: var(--paper-2);
  position: relative;
}
.how::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, oklch(70% 0.05 70 / .15) 31px 32px);
  pointer-events: none;
}
.how-inner { position: relative; z-index: 1; }
.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 40px;
}
.how-steps { display: flex; flex-direction: column; gap: 4px; }
.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: padding .25s ease;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step .n {
  font-family: var(--sp-font-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--ink-soft);
  letter-spacing: -0.03em;
  transition: color .2s ease;
}
.step h4 { font-family: var(--sp-font-display); font-weight: 600; font-size: 22px; margin-bottom: 6px; letter-spacing: -.01em; }
.step p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.step.active .n { color: var(--coral); font-weight: 500; }
.step.active h4 { color: var(--coral); }

/* phone mock */
.phone-wrap {
  position: sticky; top: 40px;
  display: flex; justify-content: center;
}
.phone {
  width: 300px; height: 600px;
  background: oklch(14% 0.015 60);
  border-radius: 42px;
  padding: 14px;
  box-shadow:
    0 2px 0 oklch(0 0 0 / .05),
    0 30px 60px -20px oklch(0 0 0 / .35),
    inset 0 0 0 1px oklch(30% 0.02 60);
  position: relative;
  transform: rotate(-2deg);
}
.phone::before {
  content:''; position:absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 22px; background: oklch(8% 0 0); border-radius: 20px; z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}
.phone-ui {
  padding: 44px 18px 18px;
  height: 100%;
  display: flex; flex-direction: column;
}
.phone-ui .chip {
  align-self: flex-start;
  background: var(--highlight);
  font-family: var(--sp-font-mono); font-size: 9px;
  padding: 4px 8px; border-radius: 3px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 14px;
}
.phone-ui h5 {
  font-family: var(--sp-font-display); font-size: 20px; font-weight: 600;
  line-height: 1.15; letter-spacing: -.015em; margin-bottom: 12px;
}
.phone-ui .q-meta { font-family: var(--sp-font-mono); font-size: 9px; color: var(--ink-soft); letter-spacing: .1em; margin-bottom: 14px; }
.phone-ui .opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: auto; }
.phone-ui .opt {
  border: 1px solid var(--rule);
  padding: 10px 12px; border-radius: 8px;
  font-size: 12px; display: flex; gap: 10px; align-items: center;
  background: var(--paper);
}
.phone-ui .opt .k { font-family: var(--sp-font-mono); font-size: 9px; width: 16px; height: 16px; background: var(--cream); border-radius: 3px; display: grid; place-items: center; }
.phone-ui .opt.right { border-color: var(--pine); background: oklch(95% 0.05 155); color: var(--pine); }
.phone-ui .opt.right .k { background: var(--pine); color: white; }
.phone-ui .bar {
  height: 4px; background: var(--cream); border-radius: 2px; overflow: hidden; margin-top: 14px;
}
.phone-ui .bar > i { display: block; height: 100%; width: 62%; background: var(--coral); }
.phone-ui .bottom-meta { display: flex; justify-content: space-between; font-family: var(--sp-font-mono); font-size: 9px; color: var(--ink-soft); margin-top: 8px; letter-spacing: .08em; }
.phone-caption {
  position: absolute; bottom: -30px; right: -30px;
  font-family: var(--sp-font-display); color: var(--coral); font-size: 22px; transform: rotate(4deg);
  max-width: 180px;
}

/* ---------- TESTIMONIAL BAND ---------- */
.testi {
  padding: clamp(60px, 10vw, 120px) 0;
}
.testi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 8px; }
.testi-card {
  padding: 32px 28px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--lift-1);
  display: flex; flex-direction: column; gap: 20px;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.testi-card:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.testi-card .stars { color: var(--coral); letter-spacing: 2px; }
.testi-card blockquote {
  font-family: var(--sp-font-display); font-size: 20px; line-height: 1.35;
  letter-spacing: -.01em; font-weight: 400; color: var(--ink);
}
.testi-card blockquote .hl { background: var(--highlight-soft); padding: 0 2px; }
.testi-card .attr { font-family: var(--sp-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-soft); text-transform: uppercase; margin-top: auto; }
.testi-card .attr b { color: var(--ink); font-weight: 500; }

/* ---------- PRICING (index-card style) ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: var(--lift-1);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--lift-3); border-color: var(--ink); }
.card.featured { background: var(--ink); color: var(--paper); }
.card.featured .mono, .card.featured p { color: oklch(80% 0.02 60); }
.card.featured .line { background: oklch(40% 0.02 60); }
.card .pin {
  position: absolute; top: -10px; right: 24px;
  background: var(--coral); color: var(--paper);
  font-family: var(--sp-font-mono); font-size: 10px; padding: 4px 10px; letter-spacing: .1em; text-transform: uppercase;
  transform: rotate(4deg);
}
.card h4 { font-family: var(--sp-font-display); font-size: 24px; font-weight: 600; margin-bottom: 4px; letter-spacing: -.01em; }
.card .price {
  font-family: var(--sp-font-display); font-size: 56px; font-weight: 500;
  letter-spacing: -0.03em; margin: 16px 0 6px; line-height: 1;
}
.card .price .cur { font-size: .45em; vertical-align: super; margin-right: 3px; color: var(--coral); }
.card .price .per { font-size: .22em; color: var(--ink-soft); font-family: var(--sp-font-mono); margin-left: 4px; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.card.featured .price .per { color: oklch(70% 0.02 60); }
.card .line { height: 1px; background: var(--rule); margin: 20px 0; }
.card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; }
.card ul li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; }
.card ul li::before { content: '+'; color: var(--coral); font-family: var(--sp-font-mono); font-weight: 600; }
.card.featured ul li::before { color: var(--coral-2); }
.card .btn { justify-content: center; width: 100%; }
.card.featured .btn-primary { background: var(--coral); }
.card.featured .btn-ghost { color: var(--paper); border-color: var(--paper); }
.card.featured .btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* The line that keeps the listed price honest. The prices on this page are
   STUDENT prices; when the education cutoff is switched on, an unverified new
   account pays double. Saying so here means the page can never quote a number
   the wallet contradicts. Quiet by design — it is a condition, not a pitch. */
.student-price-note {
  font-family: var(--sp-font-ui);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: -2px 0 0;
  max-width: 30ch;
}
.card.featured .student-price-note { color: oklch(78% 0.02 60); }

/* ---------- COUNTRY-AWARE PRICING ----------
   The shell's <head> script stamps html.gh-pricing (Africa/Accra clock) or
   html.intl-pricing (everyone else) before first paint. The DEFAULT — script
   blocked, or an ancient browser throwing on Intl — is GHS numbers with the
   neutral wallet line: mobile-money operator names appear only once Ghana is
   positively confirmed, so an international visitor never sees them, not
   even for a frame. */
.p-usd, .pay-gh { display: none; }
html.intl-pricing .p-usd { display: inline; }
html.intl-pricing .p-ghs { display: none; }
html.gh-pricing .pay-gh { display: inline; }
html.gh-pricing .pay-intl { display: none; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--rule); margin-top: 40px; }
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
  cursor: pointer;
  display: grid; grid-template-columns: 40px 1fr 40px; gap: 20px;
  align-items: start;
}
.faq-item .n { font-family: var(--sp-font-mono); font-size: 11px; color: var(--coral); padding-top: 6px; }
.faq-item h5 { font-family: var(--sp-font-display); font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.faq-item .a { font-size: 15px; color: var(--ink-2); margin-top: 10px; line-height: 1.6; max-width: 60ch;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease; }
.faq-item.open .a { max-height: 240px; opacity: 1; }
.faq-item .tog { font-family: var(--sp-font-display); font-size: 28px; color: var(--ink); text-align: right; line-height: 1; transition: transform .2s ease; padding-top: 2px; }
.faq-item.open .tog { transform: rotate(45deg); color: var(--coral); }

/* ---------- CTA BAND ---------- */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  margin-top: 80px;
}
.cta-band .inner {
  padding: clamp(60px, 8vw, 120px) 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: end;
}
.cta-band h2 {
  font-family: var(--sp-font-display); font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.9; letter-spacing: -0.035em;
}
.cta-band h2 .hl { background: var(--highlight); color: var(--ink); padding: 0 .1em; }
.cta-band h2 .it { font-family: var(--sp-font-display); font-style: italic; }
.cta-band p { color: oklch(80% 0.02 60); font-size: 17px; line-height: 1.55; margin-bottom: 24px; }
.cta-band .btn-primary { background: var(--coral); }
.cta-band .btn-ghost { color: var(--paper); border-color: var(--paper); }
.cta-band .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- FOOTER ---------- */
footer.site {
  background: var(--ink);
  color: var(--paper);
  padding: 60px 0 40px;
  border-top: 1px solid oklch(30% 0.02 60);
}
footer.site .inner { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; }
footer.site h6 { font-family: var(--sp-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: oklch(70% 0.02 60); margin-bottom: 18px; font-weight: 500; }
footer.site ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
footer.site a { color: oklch(88% 0.02 60); text-decoration: none; font-size: 14px; }
footer.site a:hover { color: var(--highlight); }
footer.site .brand-col p { color: oklch(70% 0.02 60); font-size: 14px; line-height: 1.55; max-width: 32ch; margin-top: 12px; }
.footer-bottom {
  margin-top: 60px; padding-top: 24px; border-top: 1px solid oklch(30% 0.02 60);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--sp-font-mono); font-size: 11px; color: oklch(65% 0.02 60); letter-spacing: .06em;
}
.footer-bottom .colophon { font-style: italic; font-family: var(--sp-font-display); font-size: 14px; letter-spacing: 0; }

/* ---------- SCOPED PROSE PAGES (about, pricing, cohort_join) ---------- */
.prose-page { padding: 56px 0 96px; }
.prose-page .eyebrow {
  font-family: var(--sp-font-mono); font-size: 12px; color: var(--coral);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px;
}
.prose-page h1 {
  font-family: var(--sp-font-display); font-weight: 500;
  font-size: clamp(40px, 6vw, 72px); line-height: 0.95; letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.prose-page h1 .it { font-family: var(--sp-font-display); font-style: italic; }
.prose-page .lead { font-size: 19px; color: var(--ink-2); max-width: 60ch; margin-bottom: 32px; }
.prose-page h2 {
  font-family: var(--sp-font-display); font-weight: 600;
  font-size: 28px; letter-spacing: -.015em;
  margin: 36px 0 12px;
  border-bottom: 1px solid var(--rule); padding-bottom: 8px;
}
.prose-page p, .prose-page li { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.prose-page ol, .prose-page ul { margin: 12px 0 20px 24px; }
.prose-page li { margin-bottom: 6px; }
.prose-page code {
  background: var(--paper-2); border: 1px solid var(--rule);
  padding: 2px 8px; border-radius: 4px;
  font-family: var(--sp-font-mono); font-size: 0.9em;
}
.prose-page strong { color: var(--ink); font-weight: 600; }

/* ---------- DENSITY ---------- */
.dense section { padding: clamp(40px, 7vw, 80px) 0; }
.dense .hero { padding: clamp(28px, 5vw, 60px) 0 20px; }
.dense .feature { padding: 28px 24px; }

/* ---------- RESPONSIVE ---------- */
/* Big screens: cap typography so lines stay readable */
@media (min-width: 1600px) {
  html, body { font-size: 18px; }
  .hero h1 { font-size: clamp(72px, 7vw, 148px); }
  .sec-h { font-size: clamp(48px, 5vw, 88px); }
}

/* Tablet */
@media (max-width: 1100px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .testi-grid { grid-template-columns: 1fr; gap: 16px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  footer.site .inner { grid-template-columns: 1.5fr repeat(2, 1fr); gap: 36px 24px; }
}

/* Mobile */
@media (max-width: 900px) {
  .page { padding: 0 clamp(18px, 5vw, 32px); }
  .page::before, .page::after { display: none; }
  nav.top { padding: 12px 0; }
  .nav-links { gap: 14px; }
  .nav-links a:not(.cta) { display: none; }
  .brand .tag { display: none; }
  .brand .name { font-size: 20px; }

  .hero { grid-template-columns: 1fr; padding: clamp(32px, 8vw, 64px) 0 24px; gap: 24px; }
  .hero h1 { font-size: clamp(44px, 11vw, 84px); line-height: .95; }
  .hero-sub { grid-column: 1; font-size: 17px; max-width: none; }
  .hero-sub::before { display: none; }
  .hero-under { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .hero-proof-right { justify-self: start; text-align: left; }

  section { padding: clamp(48px, 12vw, 80px) 0; }
  .sec-h { font-size: clamp(32px, 8vw, 52px); margin-bottom: 28px; }

  .features-grid, .stats-row, .testi-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature, .stat, .testi-card { padding: 26px 22px; }
  .stat .big { font-size: clamp(36px, 10vw, 56px); }

  .how-grid { grid-template-columns: 1fr; gap: 40px; }
  .phone-wrap { position: static; }
  .phone { transform: none; margin: 0 auto; }

  .cta-band .inner { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .cta-band h2 { font-size: clamp(36px, 10vw, 68px); }
  .cta-band .actions { flex-direction: column; align-items: stretch; }
  .cta-band .btn { justify-content: center; }

  footer.site { padding: 48px 0 28px; }
  footer.site .inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }

  .countdown-strip { grid-template-columns: 1fr; gap: 12px; padding: 14px 0; }

  .step { grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; }
  .step .n { font-size: 40px; }
  .step h4 { font-size: 19px; }

  .marginalia, .marg-1 { display: none; }

  .btn { padding: 14px 22px; width: auto; }

  .packs-head { flex-direction: column; align-items: flex-start; }
}

/* Small phones */
@media (max-width: 480px) {
  html, body { font-size: 16px; }
  .card { padding: 24px 20px; }
  .card .price { font-size: 44px; }
  .hero h1 { font-size: clamp(38px, 12vw, 64px); }
  .ticker-track { font-size: 16px; gap: 32px; }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- DARK THEME ----------
   Opt-in via `html[data-theme="dark"]`. The toggle lives in base.html's nav.
   Strategy: override the semantic tokens on :root so every `var(--paper|--ink|…)`
   reference swaps automatically, then patch the handful of hardcoded oklch()
   backgrounds (nav translucency, body gradient) that would otherwise stay light.
   Callout surfaces that were already dark on paper (footer, .card.featured,
   .phone shell) intentionally keep their palette — they already look correct
   against the dark body.  */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: var(--sp-paper);
  --paper-2: var(--sp-paper-2);
  --paper-edge: var(--sp-paper-edge);
  --ink: var(--sp-ink);
  --ink-2: var(--sp-ink-2);
  --ink-soft: var(--sp-ink-soft);
  --rule: var(--sp-rule);
  --rule-soft: var(--sp-rule-soft);
  --coral: var(--sp-coral);
  --coral-2: var(--sp-coral-2);
  --coral-deep: var(--sp-coral-deep);
  --highlight: var(--sp-coral-soft);
  --highlight-soft: var(--sp-coral-soft);
  --pine: var(--sp-pine);
  --pine-soft: var(--sp-pine-soft);
  --cream: var(--sp-cream);

  --lift-1: var(--sp-lift-1);
  --lift-2: var(--sp-lift-2);
  --lift-3: var(--sp-lift-3);
}
html[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 20% 10%, oklch(30% 0.05 70 / .35) 0, transparent 40%),
    radial-gradient(circle at 85% 70%, oklch(28% 0.05 280 / .25) 0, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 35px, oklch(100% 0 0 / .03) 35px 36px);
}
html[data-theme="dark"] nav.top {
  background: oklch(16% 0.015 60 / .82);
}
html[data-theme="dark"] .how::before {
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, oklch(100% 0 0 / .05) 31px 32px);
}
html[data-theme="dark"] .phone-ui .opt.right {
  background: oklch(30% 0.08 155);
}
html[data-theme="dark"] .btn-primary { color: oklch(14% 0.015 60); }
html[data-theme="dark"] .btn-ghost { background: var(--paper-2); }
html[data-theme="dark"] .btn-ghost:hover { background: var(--ink); color: var(--paper); }
/* Marketing hero + features shouldn't print pure-white text boxes */
html[data-theme="dark"] .feature,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .pack-card,
html[data-theme="dark"] .card {
  background: var(--paper-2);
}

/* Theme toggle button (lives in nav.top) */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  margin-right: 8px;
  transition: background .15s ease, border-color .15s ease;
  font-family: var(--sp-font-ui);
}
.theme-toggle:hover { background: var(--paper-2); border-color: var(--ink-soft); }
.theme-toggle:active { transform: scale(.94); }