/* Study Pill — warm-paper / textbook design system.
   Typography pairing: Inter for UI chrome (nav, buttons, meta, form), Newsreader
   + Instrument Serif for display, Literata for long-form prose, JetBrains Mono
   for counters, Caveat for marginalia. Accent green mirrors the ecosystem
   primary (#10B981) for correct / success signals. */
:root {
  --paper: oklch(96.5% 0.018 85);
  --paper-2: oklch(94% 0.025 82);
  --paper-edge: oklch(88% 0.035 80);
  --ink: oklch(18% 0.02 60);
  --ink-2: oklch(32% 0.02 60);
  --ink-soft: oklch(48% 0.02 60);
  --rule: oklch(84% 0.025 75);
  --rule-soft: oklch(88% 0.02 75 / .6);
  --coral: oklch(60% 0.215 25);
  --coral-2: oklch(70% 0.2 30);
  --coral-deep: oklch(35% 0.15 25);
  --highlight: oklch(93% 0.17 98);
  --highlight-soft: oklch(95% 0.12 98 / .65);
  --pine: #10B981;
  --pine-soft: oklch(95% 0.06 160);
  --cream: oklch(92% 0.04 85);

  /* Elevation system — three tiers, all gentle */
  --lift-1: 0 1px 2px oklch(18% 0.02 60 / .05);
  --lift-2: 0 2px 4px oklch(18% 0.02 60 / .04), 0 8px 24px oklch(18% 0.02 60 / .06);
  --lift-3: 0 4px 8px oklch(18% 0.02 60 / .05), 0 20px 48px oklch(18% 0.02 60 / .10);

  --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: 'Literata', Georgia, serif;
  font-size: 17px;
  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;
  overflow-x: hidden;
}
@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: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.display { font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -0.025em; line-height: 0.94; }
.italic-display { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hand { font-family: 'Caveat', cursive; color: var(--coral); }
/* UI chrome: Inter for anything that isn't display prose */
.ui-sans { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* ---------- 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: 'Newsreader', serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.brand .tag { font-family: 'Inter', system-ui, sans-serif; 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: 'Inter', system-ui, sans-serif; }
.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: 'Inter', system-ui, sans-serif; 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: 'JetBrains Mono', monospace;
  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: 'Newsreader', serif;
  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: 'Instrument Serif', serif; 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: 'Newsreader', serif; 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: 'Inter', system-ui, sans-serif;
  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: 'JetBrains Mono', monospace; 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: 'Caveat', cursive;
  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: 'JetBrains Mono', monospace; 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: 'Newsreader', serif; font-size: 18px; font-style: italic;
  color: var(--ink-2);
}
.ticker-track span::before { content: '✱'; color: var(--coral); margin-right: 12px; font-style: normal; }
@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: 'JetBrains Mono', monospace;
  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: 'Newsreader', serif;
  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: 'Instrument Serif', serif; 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: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--coral); letter-spacing: .14em;
  margin-bottom: 18px; font-variant-numeric: tabular-nums;
}
.feature h3 {
  font-family: 'Newsreader', serif;
  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: 'Newsreader', serif; 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: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stat .big .sup { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--coral); font-size: .6em; vertical-align: super; }
.stat .cap { font-family: 'JetBrains Mono', monospace; 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: 'Newsreader', serif;
  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: 'Newsreader', serif; 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: 'JetBrains Mono', monospace; font-size: 9px;
  padding: 4px 8px; border-radius: 3px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 14px;
}
.phone-ui h5 {
  font-family: 'Newsreader', serif; font-size: 20px; font-weight: 600;
  line-height: 1.15; letter-spacing: -.015em; margin-bottom: 12px;
}
.phone-ui .q-meta { font-family: 'JetBrains Mono', monospace; 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: 'JetBrains Mono', monospace; 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: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-soft); margin-top: 8px; letter-spacing: .08em; }
.phone-caption {
  position: absolute; bottom: -30px; right: -30px;
  font-family: 'Caveat', cursive; 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: 'Newsreader', serif; 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: 'JetBrains Mono', monospace; 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: 'JetBrains Mono', monospace; font-size: 10px; padding: 4px 10px; letter-spacing: .1em; text-transform: uppercase;
  transform: rotate(4deg);
}
.card h4 { font-family: 'Newsreader', serif; font-size: 24px; font-weight: 600; margin-bottom: 4px; letter-spacing: -.01em; }
.card .price {
  font-family: 'Newsreader', serif; 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: 'JetBrains Mono', monospace; 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: 'JetBrains Mono', monospace; 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); }

/* ---------- 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: 'JetBrains Mono', monospace; font-size: 11px; color: var(--coral); padding-top: 6px; }
.faq-item h5 { font-family: 'Newsreader', serif; 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: 'Newsreader', serif; 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: 'Newsreader', serif; 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: 'Instrument Serif', serif; 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: 'JetBrains Mono', monospace; 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: 'JetBrains Mono', monospace; font-size: 11px; color: oklch(65% 0.02 60); letter-spacing: .06em;
}
.footer-bottom .colophon { font-style: italic; font-family: 'Instrument Serif', serif; font-size: 14px; letter-spacing: 0; }

/* ---------- SCOPED PROSE PAGES (about, pricing, cohort_join) ---------- */
.prose-page { padding: 56px 0 96px; }
.prose-page .eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--coral);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px;
}
.prose-page h1 {
  font-family: 'Newsreader', serif; 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: 'Instrument Serif', serif; font-style: italic; }
.prose-page .lead { font-size: 19px; color: var(--ink-2); max-width: 60ch; margin-bottom: 32px; }
.prose-page h2 {
  font-family: 'Newsreader', serif; 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: 'JetBrains Mono', monospace; 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: oklch(16% 0.015 60);
  --paper-2: oklch(20% 0.018 60);
  --paper-edge: oklch(26% 0.02 60);
  --ink: oklch(96% 0.015 85);
  --ink-2: oklch(86% 0.02 80);
  --ink-soft: oklch(72% 0.025 78);
  --rule: oklch(32% 0.02 70);
  --rule-soft: oklch(30% 0.02 70 / .6);
  --coral: oklch(72% 0.2 28);
  --coral-2: oklch(78% 0.2 32);
  --coral-deep: oklch(60% 0.18 26);
  --highlight: oklch(80% 0.17 98 / .28);
  --highlight-soft: oklch(80% 0.17 98 / .16);
  --pine: #2DE3A8;
  --pine-soft: oklch(30% 0.09 160);
  --cream: oklch(22% 0.02 82);

  --lift-1: 0 1px 2px oklch(0% 0 0 / .35);
  --lift-2: 0 2px 4px oklch(0% 0 0 / .35), 0 8px 24px oklch(0% 0 0 / .45);
  --lift-3: 0 4px 8px oklch(0% 0 0 / .40), 0 20px 48px oklch(0% 0 0 / .55);
}
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: 'Inter', system-ui, sans-serif;
}
.theme-toggle:hover { background: var(--paper-2); border-color: var(--ink-soft); }
.theme-toggle:active { transform: scale(.94); }