/* ─── AI Uni — Shared Stylesheet ─── */

/* ─── THE FACES · SELF-HOSTED, no runtime font CDN ────────────────────────
   This was an @import from fonts.googleapis.com — a third-party, render-blocking
   request on the largest-contentful-paint path of every shared-CSS page, and a
   visitor request leaked to Google on every view. The faces are now vendored as
   latin-subset VARIABLE woff2 under public/fonts/ (5 files, ~364 KB total) and
   served from our own origin.

   Declared here so all ~142 shared-CSS pages get them with no per-page edit —
   including Cinzel, which the AIU two-shadow wordmark (.aiu-brand, R-131 canon)
   needs on every page via assets/nav.js + assets/footer.js. styles.css loads
   AFTER any per-page font <link>, so these declarations win the cascade and the
   CDN's font binaries are never fetched. The per-page <link> is removed from the
   /news pages in this change; the rest of the marketing pages still carry theirs
   and are queued as their own lane.

   NEWSREADER is the reading face (--font-reading). Production Type, SIL Open Font
   Licence 1.1 — free to embed and self-host. The licence ships beside the files at
   fonts/Newsreader-OFL.txt and the copyright notice is retained. "Newsreader" is a
   Reserved Font Name and these are the UNMODIFIED upstream latin-subset builds
   (web subsetting for serving only), so the name is kept honestly. */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/newsreader-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/newsreader-italic-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/familjen-grotesk-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/cinzel-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-var.woff2') format('woff2');
}

:root {
  /* AIU brand — Daylight Aurora (light-primary). Retargeted from the rust-era
     palette; warm-tan grounds are BANNED site-wide per AIU-STYLE-GUIDE §1.
     Warmth now lives in gilt DETAILS only (rules, eyebrows, accents), never
     grounds. Reskin is presentation-only: 130 pages consume these tokens, so
     this single retarget reskins the whole shared-CSS site at once. */
  --ink: #14171D;                    /* AIU ink */
  --paper: #FAFBFD;                  /* AIU --g0 cool light (replaces the banned warm-tan ground) */
  --accent: #1B4F8A;                 /* AIU azure — interactive/link/CTA register (replaces rust) */
  --accent-light: #F0F3F8;           /* AIU --g2 cool secondary ground (replaces the warm tint) */
  --gilt: #8A6210;                   /* AIU institutional warm — eyebrows/lintels/accents */
  --muted: #545B68;                  /* AIU --dim */
  --muted-body: #444B59;             /* AIU --mid; 8.1:1 on --paper, use for normal-size body text */
  --rule: rgba(138,98,16,.24);       /* soft gilt hairline (warmth in details, not grounds) */
  --highlight: rgba(138,98,16,.16);  /* soft gilt highlight */
  /* Until 2026-07-27 these two were the SAME declaration, byte for byte — the
     "display" register was not a display face, it was the body face at a larger
     size and a lighter weight. That is half of what FOUNDER's "the font is boring
     and the delivery is dry" was measuring. --font-reading is the third register
     and the one that carries running prose on the reading surfaces. */
  --font-display: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; /* UI + marketing headline face */
  --font-body: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;    /* UI + marketing body face */
  /* THE READING FACE — Newsreader, variable opsz 6–72 / wght 200–800.
     PERMITTED on reading content only: .news-article* and .news-card-title.
     FORBIDDEN in nav, buttons, chips, forms and every UI label. A reading face in
     the chrome is how a fourth family stops being a decision and starts being a
     leak. */
  --font-reading: 'Newsreader', ui-serif, 'Iowan Old Style', Charter, Georgia, serif;
  /* The accent rung that is safe UNDER 16px on the reading surfaces. */
  --reading-ink: #1B1F27;
  --font-institutional: 'Cinzel', Georgia, serif;   /* AIU institutional caps register */
  --font-mono: 'JetBrains Mono', monospace;
  /* AIU wordmark ghost pair (R-131 two-shadow canon — matches public/index.html
     + intranet/app/aiu-v3.css): azure left ghost · bronze right ghost. */
  --c-az: #86A9D6;
  --c-ag: #8B6A3A;
  /* THE REVERSED PAIR — the values an object uses when its GROUND does not follow
     the theme. This site has reversed bands (a dark section inside a light page,
     and, because the ink/paper pair swaps, a light section inside a dark one). On
     such a band every secondary token needs the OPPOSITE theme's value, so the pair
     is declared once here and once in the dark block, and the ~40 rules that paint
     the reversed ground just point at it.
     --ink-rev is an r,g,b TRIPLE rather than a colour because the 109 call sites
     that used the old hardcoded rgba(237,241,247,a) each carry their own alpha. */
  --ink-rev: 237, 241, 247;
  --accent-rev: #9FC4E8;
  --muted-rev: #97A1B0;
  --muted-body-rev: #B7C0CD;
  --rule-rev: rgba(222, 232, 245, 0.13);
}

/* ─── THE DARK REGISTER — LANDED, NOT ARMED ───────────────────────────────────
   ARMING CRITERION, so this cannot quietly become dead code: a page arms dark by
   loading `/theme-boot.js`, which is what sets `data-theme` and what makes the
   chrome scripts render their theme switch. NO page on this stylesheet loads it
   yet, so every rule below is inert today and nothing here changes a single
   rendered pixel.

   WHY IT IS NOT ARMED, measured rather than argued. Wiring the boot was tried in
   this same pass and then backed out, because `node scripts/global-style-audit.mjs`
   scored the result: 3 new AA failures on /news, 9 on /courses, 9 on a /majors
   page — several at 1:1 — against a clean baseline. Root cause, found by the audit
   and not by eye: this sheet has ~33 REVERSED bands (a section that paints --ink as
   its ground, so it is dark on a light page and light on a dark one), and their
   text is drawn with 13 different alpha rungs of a single ink literal. That ramp
   was authored light-ink-on-dark. Inverted it does not clear AA: `rgba(ink, .5)`
   composited on a light band measures 3.31:1 against a 4.5:1 floor, and no choice
   of base colour fixes it, because the alpha is at the call site.

   Making it clear needs the 44 `color:` rungs re-authored onto a small number of
   AA-clear steps — a typographic-hierarchy decision across the marketing site, and
   therefore a Designer call, not a Builder token swap. It is wave-2 row 1 with the
   failing rows attached: docs/design/S94-GLOBAL-ROLLOUT-WAVE1-SCAN-2026-07-31.md.

   What DID land, because it is the substrate that decision needs: the token pair
   (the swap below), the reversed pair (--*-rev), and the 109 hardcoded reversed-ink
   literals tokenised so they can flip at all. Re-deriving those by hand is exactly
   the work this saves.
   ──────────────────────────────────────────────────────────────────────────────
   AIU-STYLE-GUIDE §2 (the theme law): light-first everywhere, DARK ALWAYS
   AVAILABLE, choice persists. Every page on this stylesheet is light-ONLY —
   measured, not assumed: the audit read the same body background in both themes on
   /courses, /news and every /majors page, because there was no dark block to read.
   A visitor who chose dark anywhere else in the suite arrives here and gets white.

   ─── the original note, still accurate for what the swap does ─────────────────
   AIU-STYLE-GUIDE §2 (the theme law): light-first everywhere, DARK ALWAYS
   AVAILABLE, choice persists. Every page on this stylesheet was light-ONLY until
   now — measured, not assumed: `node scripts/global-style-audit.mjs` read the
   same body background in both themes on /courses, /news and every /majors page,
   because there was no dark block to read. A visitor who chose dark anywhere else
   in the suite arrived here and got white.

   WHY A TOKEN SWAP IS THE WHOLE FIX, AND WHY THAT IS NOT LUCK. This sheet is an
   INVERTED-PAIR system: `--ink` is used 35x as a background and 35x as a colour,
   `--paper` 31x as a background and 44x as a colour. Everywhere one is the
   ground the other is the text — so exchanging the two VALUES flips all 70 uses
   coherently, and a reversed band (the dark hero on a light page) stays reversed
   rather than becoming an unreadable light-on-light block. That property is what
   makes this a ~20-line change instead of a 5,000-line audit; it was checked
   before it was relied on, not after.

   Values are the style guide's §1 nocturne-aurora set, not new colours. The gilt
   small-text resolution rides along: light-mode gilt stays the accessible
   `#5C4108`-class value via --gilt, dark gilt is `#D8B470` (8.2-9.0:1, §1).
   CVD: this is a LIGHTNESS inversion. No hue encodes any meaning here, so
   nothing in it can collapse under deuteranopia or protanopia. ─────────────── */
[data-theme="dark"] {
  --ink: #EDF1F7;                    /* §1 dark --ink */
  --paper: #0E1116;                  /* §1 dark --g0 */
  --accent: #9FC4E8;                 /* §1 dark --az-text — AA on the nocturne ground */
  --accent-light: #1B212C;           /* §1 dark --g2 */
  --gilt: #D8B470;                   /* §1 dark gilt — already 8.2-9.0:1, unchanged by the §1 fix */
  --muted: #97A1B0;                  /* §1 dark --dim */
  --muted-body: #B7C0CD;             /* §1 dark --mid */
  --rule: rgba(222, 232, 245, 0.13); /* §1 dark --line */
  --highlight: rgba(216, 180, 112, 0.16);
  --reading-ink: #EDF1F7;
  /* The reversed pair, inverted: in dark theme a reversed band is LIGHT, so
     everything on it takes the light-theme values. */
  --ink-rev: 20, 23, 29;
  --accent-rev: #1B4F8A;
  --muted-rev: #545B68;
  --muted-body-rev: #444B59;
  --rule-rev: rgba(138, 98, 16, 0.24);
}
/* The reading surfaces re-declare their own cool rule + red accent pair further
   down this sheet (the .news-listing / .news-card / .news-article block). Those
   are scoped declarations, so they do NOT inherit the swap above and need their
   own dark values — a hairline derived from light-mode --ink is invisible on a
   dark ground. The red pair keeps its LIGHT-mode job (structure, never state) and
   is lifted for contrast rather than re-hued: the register is unchanged. */
[data-theme="dark"] .news-listing,
[data-theme="dark"] .news-card,
[data-theme="dark"] .news-article {
  --rule: rgba(222, 232, 245, 0.13);
  --rule-strong: rgba(222, 232, 245, 0.24);
  --read-accent: #E8705F;
  --read-accent-strong: #F08A79;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Focus styles — WCAG 2.2 AA compliance ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
  background: var(--ink);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ─── UTILITY ─── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ─── NAV ─── */
/* THE SHARED NAV IS A BAR, NOT A CARD (§10a BAR RULE). It carries `gl gl--bar` in
   the markup that nav.js builds and generate-static-chrome.mjs pre-renders.

   It had a film and one flat hard-coded fill and nothing else — no rim, no ladder,
   no gradient — which is exactly the shape FOUNDER caught on the Today page ("the
   glass got applied to the label but the border still has a white line and no
   gradient"), on a different site.

   Three deletions: the hard-coded `rgba(var(--ink-rev),.94)` (a light-only literal — it
   is why this bar stayed pale even where a dark register existed, and the material's
   per-theme body replaces it), the local `backdrop-filter` (the material owns the
   film, at 28px, 20px on a phone), and the bottom hairline — `.gl--bar` draws a
   UNIFORM bottom boundary as part of the material, and a hairline left on top of it
   is literally the white line.

   SCOPED, NEVER A BARE ELEMENT (revise round, independent Designer, 2026-07-31).
   This rule used to read `nav { position: fixed; top:0; left:0; right:0 }`, which
   is a claim about EVERY `<nav>` on any page that loads this sheet — including a
   nav NESTED inside another component. The ten /majors/* pages load both this
   sheet and /assets/catalog-nav.css, and the catalog nav's own register is a real
   `<nav class="cnav-reg">` inside a flex row. The bare selector (0,0,1) beat
   nothing in `.cnav-reg` (which never declares `position`), so the register was
   yanked out of its row and pinned to the viewport, printing "Majors · Research ·
   News" on top of the AIU wordmark at 375 AND 1280. It was already wrong on main;
   moving the opaque fill off this rule in this PR is what made it VISIBLE.

   The two selectors below are the site nav BY CONSTRUCTION, not by convention:
   assets/nav.js sets both (`nav.className = 'gl gl--bar'` + `data-chrome="nav"`),
   and generate-static-chrome.mjs pre-renders both into all 131 marketing pages.
   A nested component nav carries neither, so it can never be captured again.
   Do not widen this back to a bare element. */
nav.gl--bar,
nav[data-chrome="nav"] {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

/* The theme switch nav.js adds where the shared theme system is loaded. Sized to the
   44px tap floor via width/height directly (the 16px glyph stays put, centered by the
   flex box below — same hit-box-growth pattern as nav .hamburger above); the state is
   aria-pressed + the swapped glyph, never hue (§19.2 — FOUNDER is red/green colourblind). */
.nav-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; padding: 0;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--muted-body); cursor: pointer;
}
.nav-theme:hover { border-color: var(--muted); color: var(--ink); }
.nav-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-theme .nav-moon { display: none; }
[data-theme="dark"] .nav-theme .nav-sun { display: none; }
[data-theme="dark"] .nav-theme .nav-moon { display: block; }

nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

nav .logo {
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* AIU two-shadow wordmark (R-131 canon — chromatic-split-shadow recipe,
   FOUNDER-ruled; the flat AIU/ni + triangle mark is RETIRED). Cinzel 800 caps
   in --ink with two ghost layers pulled from data-text="AIU": azure --c-az
   offset left, bronze --c-ag offset right, 0.58 opacity at 0.042em offset —
   the ratified values from intranet/app/aiu-v3.css .brand/.brand-display and
   public/index.html's inline .aiu-brand. Multiply blend on light surfaces,
   screen on the dark footer. Markup REQUIRES data-text="AIU" (the
   pseudo-elements read it). Injected site-wide by assets/nav.js +
   assets/footer.js — never hand-author per page. */
nav .logo.aiu-brand,
.aiu-brand {
  position: relative;
  display: inline-block;
  isolation: isolate; /* LOAD-BEARING: scopes z-index:-1 so ghosts don't vanish behind the surface */
  font-family: 'Cinzel', var(--font-institutional);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  --brand-blend: multiply;
  --ghost-op: 0.58;
  --brand-shadow-offset: 0.042em;
}

.aiu-brand::before,
.aiu-brand::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
  pointer-events: none;
  mix-blend-mode: var(--brand-blend);
  opacity: var(--ghost-op);
  z-index: -1;
}

.aiu-brand::before {
  transform: translateX(calc(-1 * var(--brand-shadow-offset)));
  color: var(--c-az);
}

.aiu-brand::after {
  transform: translateX(var(--brand-shadow-offset));
  color: var(--c-ag);
}

/* Dark-context override — wordmark on --ink footer background: body lifts to
   --paper, ghost blend switches multiply → screen so the azure/bronze pair
   reads on near-black (same dark-surface switch as aiu-v3.css). */
footer .logo.aiu-brand,
footer .aiu-brand {
  display: inline-block;
  font-size: 24px;
  color: var(--paper);
  --brand-blend: screen;
}

nav .cta-nav {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.2s;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

nav .cta-nav:hover { background: var(--accent); }

nav .hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  /* 44×44, the §18 tap floor. It shipped 36×36 — under the floor on the ONE control
     that stands between a phone visitor and four of this bar's destinations. The bars
     inside stay 20×2; only the hit box grew. */
  width: 44px;
  height: 44px;
}
/* Keyboard-visible focus on the control (Appendix A.1 — part of the §19 hard veto).
   It had none, which on a bar where it is the only route to four links means a
   keyboard user could not see where they were. */
nav .hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

nav .hamburger span,
nav .hamburger span::before,
nav .hamburger span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform 0.2s;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

nav .hamburger span::before,
nav .hamburger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
}

nav .hamburger span::before { top: -6px; }
nav .hamburger span::after { top: 6px; }

/* ─── NAV LINKS ─── */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }

/* ─── HERO ─── */
.hero {
  padding: 6rem 0 2rem;
  background: var(--accent-light);
  border-bottom: none;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.2s forwards;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 1.08;
  font-weight: 400;
  max-width: 14ch;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.4s forwards;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 38ch;
  line-height: 1.6;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.6s forwards;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.8s forwards;
}

.hero-cta-note {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-meta {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.8s forwards;
}

.hero-meta-item {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 0.2rem;
}

/* ─── SECTION LABEL ─── */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ─── THREE QUESTIONS ─── */
.three-questions {
  padding: 4rem 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.tq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
}

.tq-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.tq-card p {
  font-size: 0.92rem;
  color: var(--muted-body);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.tq-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
}

.tq-link:hover { text-decoration: underline; }

/* ─── PROBLEM ─── */
.problem {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
}

.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.problem h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  max-width: 16ch;
}

.problem-text {
  color: var(--muted);
  font-size: 1rem;
}

.problem-text p + p { margin-top: 1rem; }

.problem-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.problem-stat {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}

.problem-stat strong {
  font-size: 1.1rem;
  color: var(--accent);
}

.problem-closer {
  margin-top: 1.5rem;
  font-weight: 500;
  color: var(--ink) !important;
}

.not-list {
  list-style: none;
  margin-top: 2rem;
  padding: 0;
}

.not-list li {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  font-size: 0.95rem;
}

.not-list li strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.15rem;
}

.not-list li span { color: var(--muted-body); }

/* ─── THESIS ─── */
.thesis {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.thesis blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.3;
  max-width: 26ch;
  font-style: italic;
}

.thesis .attribution {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── TUTOR ─── */
.tutor {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.tutor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.tutor h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.tutor-desc {
  color: rgba(var(--ink-rev),0.65);
  margin-bottom: 2rem;
}

.tutor-demo {
  background: rgba(var(--ink-rev),0.06);
  border: 1px solid rgba(var(--ink-rev),0.1);
  padding: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.8;
}

.tutor-demo .msg-student {
  color: rgba(var(--ink-rev),0.5);
}

.tutor-demo .msg-tutor {
  color: var(--paper);
  margin-top: 0.8rem;
}

.tutor-demo .msg-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.tutor-demo .msg-label.student-label { color: rgba(var(--ink-rev),0.3); }
.tutor-demo .msg-label.tutor-label { color: var(--accent); }

.tutor-features {
  list-style: none;
  padding: 0;
}

.tutor-features li {
  padding: 1rem 0;
  border-top: 1px solid rgba(var(--ink-rev),0.1);
}

.tutor-features li strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 0.3rem;
}

.tutor-features li span {
  font-size: 0.9rem;
  color: rgba(var(--ink-rev),0.55);
}

/* ─── WORK IS THE PROMPTING ─── */
.work-is {
  padding: 5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.work-is h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.work-is-intro {
  color: var(--muted);
  max-width: 700px;
  margin-bottom: 3rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.work-is-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.work-is-three {
  grid-template-columns: 1fr 1fr 1fr;
}

.work-is-panel {
  padding: 2rem;
  font-size: 0.88rem;
  line-height: 1.7;
  border: 1px solid var(--rule);
  background: rgba(10,10,10,0.04);
}

.work-is-panel.student-version {
  background: rgba(34,120,60,0.06);
  border-color: rgba(34,120,60,0.25);
}

.work-is-panel-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.work-is-panel.student-version .work-is-panel-label {
  color: #1a6b35;
}

.work-is-panel p {
  color: var(--ink);
  line-height: 1.7;
}

.work-is-takeaway {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 700px;
}

/* ─── HONESTY ─── */
.honesty {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
}

.honesty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.honesty h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
}

.honesty-text { color: var(--muted-body); }
.honesty-text p + p { margin-top: 1rem; }

.honesty-examples {
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}

.honesty-examples li {
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.honesty-examples .icon { font-size: 1rem; line-height: 1.4; }
.honesty-examples .example-text { color: var(--muted-body); }

/* ─── PRICING COMPARISON (homepage) ─── */
.pricing {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
}

.pricing h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.pricing-intro {
  color: var(--muted);
  max-width: 45ch;
  margin-bottom: 3rem;
}

.pricing-comparison {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 2rem;
}

.pricing-col {
  background: var(--paper);
  padding: 2rem;
  text-align: center;
}

.pricing-col.featured {
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.pricing-col h3 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.pricing-col.featured h3 { color: var(--accent); }
.pricing-col:not(.featured) h3 { color: var(--muted); }

.pricing-amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin-bottom: 0.3rem;
}

.pricing-period {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.pricing-col.featured .pricing-period { color: rgba(var(--ink-rev),0.5); }

.pricing-detail {
  font-size: 0.85rem;
  line-height: 1.5;
}

.pricing-col.featured .pricing-detail { color: rgba(var(--ink-rev),0.6); }
.pricing-col:not(.featured) .pricing-detail { color: var(--muted); }

.pricing-cta-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.pricing-cta-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.pricing-cta-note a {
  color: var(--accent);
  text-decoration: none;
}

.pricing-cta-note a:hover { text-decoration: underline; }

/* ─── ORG TEASER ─── */
.org-teaser { padding: 3rem 0; border-bottom: 1px solid var(--rule); background: var(--accent-light); }

/* ─── FOR ORGANIZATIONS PAGE ─── */
.org-config { padding: 5rem 0; border-bottom: 1px solid var(--rule); }
.org-audiences { padding: 5rem 0; border-bottom: 1px solid var(--rule); }
.org-process { padding: 5rem 0; border-bottom: 1px solid var(--rule); }
.org-examples { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.tour-flow { display: flex; flex-direction: column; }
.tour-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.tour-step:last-child { border-bottom: none; }
.tour-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  margin-top: 0.15rem;
}
.tour-content h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}
.tour-content p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ─── TIMELINE ─── */
.timeline {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
  background: var(--accent-light);
}

.timeline h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  margin-bottom: 3rem;
}

.timeline-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.track {
  padding: 2.5rem;
}

.track h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  font-weight: 400;
}

.track-duration {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.track p { color: var(--muted); font-size: 0.9rem; }

/* ─── COURSES TEASER (homepage) ─── */
.courses-teaser {
  padding: 5rem 0;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--ink);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.courses-teaser-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.courses-teaser h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
}

.courses-teaser-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.courses-teaser-link:hover { opacity: 0.75; }

.courses-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(var(--ink-rev),0.08);
  margin-bottom: 1.5rem;
}

.teaser-col-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid rgba(var(--ink-rev),0.08);
}

.teaser-col-header h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.2rem;
}

.teaser-col-header span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.teaser-courses {
  padding: 0 1.5rem;
}

.teaser-course-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(var(--ink-rev),0.06);
  font-size: 0.85rem;
  color: rgba(var(--ink-rev),0.6);
}

a.teaser-course-row { text-decoration: none; color: inherit; }
a.teaser-course-row:hover { color: var(--accent); }

.teaser-course-row:first-child { border-top: none; }

.teaser-course-num {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(var(--ink-rev),0.55);
  flex-shrink: 0;
}

.teaser-majors {
  padding: 0 1.5rem;
}

.teaser-major-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(var(--ink-rev),0.06);
  font-size: 0.85rem;
  color: rgba(var(--ink-rev),0.6);
}

a.teaser-major-row { text-decoration: none; color: inherit; }
a.teaser-major-row:hover { color: var(--accent); }
.teaser-major-row:first-child { border-top: none; }

.teaser-major-num {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(var(--ink-rev),0.55);
  flex-shrink: 0;
  width: 4rem;
}

.teaser-total {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--ink-rev),0.3);
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--ink-rev),0.06);
}

/* ─── SETUP CALLOUT ─── */
.setup-callout {
  padding: 3rem 0;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(var(--ink-rev),0.15);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.setup-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.setup-once h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.setup-steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.setup-steps li {
  counter-increment: step;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: rgba(var(--ink-rev),0.7);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.setup-steps li::before {
  content: counter(step);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  flex-shrink: 0;
  width: 1.2rem;
}

.setup-steps li strong {
  color: var(--paper);
  font-weight: 500;
}

.setup-platforms {
  font-size: 0.8rem;
  color: rgba(var(--ink-rev),0.5);
  margin-top: 1rem;
}

.setup-every {
  text-align: center;
  padding: 2rem;
  border: 1px solid rgba(var(--ink-rev),0.1);
  border-radius: 8px;
  background: rgba(var(--ink-rev),0.03);
}

.setup-flow {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-top: 0.75rem;
  line-height: 1.3;
}

.setup-flow-sub {
  font-size: 0.9rem;
  color: rgba(var(--ink-rev),0.5);
  margin-top: 0.5rem;
}

/* ─── ADA: accent text on dark backgrounds ─── */
/* #1B4F8A azure on --paper = AA PASS (light-ground interactive) */
/* #9FC4E8 light-azure on --ink = AA PASS (dark-band accent) */
.courses-teaser .section-label,
.course-project .section-label,
.plans .section-label { --accent: #9FC4E8; }
.courses-teaser .courses-teaser-link,
.courses-teaser .teaser-live-badge,
.setup-callout .setup-label,
.setup-callout .setup-steps li::before { color: #9FC4E8; }

/* Dark-band accent (AIU two-tier): on --ink grounds the light-ground azure
   (#1B4F8A) drops below AA, so every dark hero/section/card re-derives --accent
   to the AIU dark-mode light-azure (#9FC4E8, AA on --ink). This mirrors the
   original rust two-tier design (base rust for light, brighter rust for dark). */
.about-hero, .courses-hero, .final-cta,
.layer-card.dark, .mode-card, .mastery-callout, .adapt-col.fixed-col,
.cmap-col, .project-example, .rubric-item, .career-card {
  --accent: #9FC4E8;
}

/* ─── INLINE PRICING (homepage) ─── */
.pricing-inline {
  padding: 4rem 0;
  border-bottom: 1px solid var(--rule);
}

.pricing-inline h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.pi-intro {
  color: var(--muted);
  max-width: 50ch;
  margin-bottom: 2.5rem;
}

.pi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 640px;
}

.pi-card {
  padding: 2rem;
  background: var(--paper);
}

.pi-card.featured {
  background: var(--accent);
  color: var(--paper);
}

.pi-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.pi-card.featured h3 { color: var(--paper); }

.pi-amount {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.pi-amount span {
  font-size: 1rem;
  opacity: 0.7;
}

.pi-card.featured .pi-amount { color: #fff; }
.pi-card.featured .pi-amount span { opacity: 1; }

.pi-period {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.pi-card.featured .pi-period { color: var(--paper); }

.pi-features {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.pi-features li {
  padding: 0.35rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}

.pi-card.featured .pi-features li {
  color: var(--paper);
  border-top-color: rgba(255,255,255,0.15);
}

.pi-compare {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.pi-compare a {
  color: var(--accent);
  text-decoration: none;
}

.pi-compare a:hover { text-decoration: underline; }

/* ─── CURRICULUM TEASER: LIVE / PLANNED ─── */
.teaser-course-row.live {
  color: var(--paper);
  font-weight: 500;
}

.teaser-course-row.planned {
  color: rgba(var(--ink-rev),0.5);
}

.teaser-major-row.planned {
  color: rgba(var(--ink-rev),0.5);
}

.teaser-course-row {
  transition: background 0.15s ease;
}

.teaser-course-row:hover {
  background: rgba(255,255,255,0.05);
}

.teaser-major-row {
  transition: background 0.15s ease;
}

.teaser-major-row:hover {
  background: rgba(255,255,255,0.05);
}

.teaser-live-badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
  flex-shrink: 0;
}

.teaser-standalone {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--ink-rev),0.08);
}

.teaser-standalone .teaser-course-row {
  border-top: none;
}

/* ─── WORK IS THE PROMPTING: COMPACT ─── */
.work-is-compact {
  max-width: 640px;
}

.work-is-compact p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

.work-is-compact p + p {
  margin-top: 1rem;
}

.work-is-compact .work-is-takeaway {
  margin-top: 1rem;
}

/* ─── FULL CURRICULUM MAP (courses page) ─── */
.curriculum-map {
  padding: 5rem 0;
  background: var(--ink);
  color: var(--paper);
  --accent: #9FC4E8; /* ADA: #9FC4E8 light-azure on --ink = AA PASS */
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.curriculum-map .section-label { margin-bottom: 2rem; }

.cmap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(var(--ink-rev),0.08);
}

.cmap-col { background: var(--ink);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.cmap-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(var(--ink-rev),0.1);
}

.cmap-header h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.cmap-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.cmap-courses { padding: 0 2rem; }

.cmap-row {
  display: block;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(var(--ink-rev),0.08);
  text-decoration: none;
  transition: background 0.15s;
}

.cmap-row:first-child { border-top: none; }
.cmap-row:hover .cmap-name { color: var(--accent); }

.cmap-num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(var(--ink-rev),0.35);
  display: block;
  margin-bottom: 0.15rem;
}

.cmap-name {
  font-size: 0.92rem;
  color: var(--paper);
  display: block;
  transition: color 0.15s;
}

.cmap-desc {
  font-size: 0.78rem;
  color: rgba(var(--ink-rev),0.5);
  display: block;
  margin-top: 0.15rem;
}


.cmap-row.live { border-left: 3px solid var(--accent); padding-left: 0.75rem; }

.cmap-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.3rem;
}



.cmap-major-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cmap-major-card {
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
}



.cmap-major-card .major-num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(var(--ink-rev),0.35);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.cmap-major-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.25;
  font-weight: 400;
  margin-bottom: 0.4rem;
  color: var(--paper);
}

.cmap-major-card .major-replaces {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.cmap-major-card p {
  font-size: 0.8rem;
  color: rgba(var(--ink-rev),0.6);
  line-height: 1.5;
  flex: 1;
}

.cmap-major-card .major-careers {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(var(--ink-rev),0.08);
  font-size: 0.72rem;
  color: rgba(var(--ink-rev),0.45);
}

.cmap-major-card .major-careers strong {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--ink-rev),0.6);
  display: block;
  margin-bottom: 0.2rem;
}

.cmap-totals {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--ink-rev),0.4);
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(var(--ink-rev),0.08);
}

/* ─── MAJORS (light bg cards) ─── */
.majors {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
}

.majors h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.majors-intro {
  color: var(--muted);
  max-width: 50ch;
  margin-bottom: 3rem;
}

.major-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.major-card {
  background: var(--paper);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

a.major-card {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

a.major-card:hover { background: var(--accent-light); }

.major-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.major-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.major-replaces {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.major-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}

.major-careers {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--muted);
}

.major-careers strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  display: block;
  margin-bottom: 0.3rem;
}

/* ─── TWO LAYERS ─── */
.layers { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.layers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.layer-card { background: var(--paper); padding: 2.5rem; }
.layer-card.dark { background: var(--ink); color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.layer-card h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.layer-card .layer-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.layer-card.dark .layer-sub { color: var(--accent); }
.layer-card:not(.dark) .layer-sub { color: var(--accent); }

.layer-card ul { list-style: none; padding: 0; }

.layer-card ul li {
  padding: 0.5rem 0;
  border-top: 1px solid;
  font-size: 0.9rem;
}

.layer-card.dark ul li { border-color: rgba(var(--ink-rev),0.12); color: rgba(var(--ink-rev),0.7); }
.layer-card:not(.dark) ul li { border-color: var(--rule); color: var(--muted); }
.layer-card ul li a { color: inherit; text-decoration: none; }
.layer-card ul li a:hover { color: var(--accent); }

/* ─── CTA ─── */
.final-cta {
  padding: 6rem 0;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.final-cta h2 em { font-style: italic; color: var(--accent); }

.final-cta p {
  color: rgba(var(--ink-rev),0.55);
  max-width: 40ch;
  margin: 0 auto 2.5rem;
}

.btn-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.btn-cta:hover { background: #16406F; transform: translateY(-1px); }

.final-sub {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--ink-rev),0.5);
}

/* ─── PLATFORM TOUR ─── */
.platform-tour { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.tour-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 600px;
  margin: 2.5rem auto 0;
}
.tour-grid > div { display: flex; flex-direction: column; }
.tour-grid > div > div:first-child { flex: 1; display: flex; flex-direction: column; }
.tour-grid > div > div:first-child > div:last-child { flex: 1; }

/* ─── SESSION TIMELINE ─── */
.session-timeline {
  margin-top: 2.5rem;
  max-width: 600px;
}

.session-timeline h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.timeline-row {
  display: flex;
  gap: 1.5rem;
  padding: 0.6rem 0;
  border-left: 2px solid var(--rule);
  padding-left: 1.5rem;
  position: relative;
}

.timeline-row::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.85rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  min-width: 2.5rem;
  font-weight: 500;
}

.timeline-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── BETWEEN SESSIONS ─── */
.between-sessions { padding: 5rem 0; border-bottom: 1px solid var(--rule); }
.between-sessions .portfolio-desc { color: var(--muted); }
.between-sessions .tutor-demo { background: rgba(10,10,10,0.04); border: 1px solid var(--rule); }
.between-sessions .demo-label { color: var(--muted); }
.between-sessions .portfolio-example { border-top-color: var(--rule); }
.between-sessions .portfolio-example span { color: var(--muted); }

/* ─── FOOTER ─── */
footer {
  padding: 2rem 0;
  background: var(--ink);
  border-top: 1px solid rgba(var(--ink-rev),0.08);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer .logo { display: flex; align-items: center; }

footer .logo img {
  opacity: 0.4;
  filter: invert(1) grayscale(1);
}

footer .logo-inverted img {
  filter: brightness(0) invert(0.85);
  opacity: 1;
}

footer .legal {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: rgba(var(--ink-rev),0.5);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  gap: 1rem;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(var(--ink-rev),0.5);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: rgba(var(--ink-rev),0.7); }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── DETAIL PAGE: BACK STRIP ─── */
.back-strip {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  margin-top: 60px;
}

.back-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.back-link:hover { color: var(--accent); }

/* ─── PAGE HERO (internal pages) ─── */
.page-hero {
  padding: 10rem 0 5rem;
  border-bottom: 2px solid var(--ink);
}

.page-hero .hero-eyebrow {
  opacity: 1;
  animation: none;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

.page-hero h1 em { font-style: italic; color: var(--accent); }

.page-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 48ch;
  line-height: 1.6;
}

/* keep .hiw-hero as alias */
.hiw-hero {
  padding: 10rem 0 5rem;
  border-bottom: 2px solid var(--ink);
}

.hiw-hero .hero-eyebrow { opacity: 1; animation: none; }

.hiw-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

.hiw-hero h1 em { font-style: italic; color: var(--accent); }

.hiw-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 48ch;
  line-height: 1.6;
}

/* ─── HOW IT WORKS: PHASES ─── */
.phases { padding: 5rem 0; border-bottom: 1px solid var(--rule); background: var(--accent-light); }

.phases h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.phases-intro { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.phase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.phase-card { background: var(--paper); padding: 2rem; }

.phase-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.phase-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.phase-weight {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.phase-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.5rem; }

.phase-example {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
}

.phase-example strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  display: block;
  margin-bottom: 0.4rem;
}

.phase-example span { color: var(--muted); line-height: 1.55; }

/* ─── HOW IT WORKS: TUTOR MODES ─── */
.tutor-modes {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.tutor-modes h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.modes-intro { color: rgba(var(--ink-rev),0.55); max-width: 50ch; margin-bottom: 3rem; }

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(var(--ink-rev),0.1);
  border: 1px solid rgba(var(--ink-rev),0.1);
  margin-bottom: 3rem;
}

.mode-card { background: var(--ink); padding: 1.5rem;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.mode-card h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.mode-card p { font-size: 0.88rem; color: rgba(var(--ink-rev),0.55); line-height: 1.55; }
.mode-card-subtitle { font-style: italic; margin-bottom: 0.25rem; color: rgba(var(--ink-rev),0.4) !important; font-size: 0.8rem !important; }

.hiw-demo { max-width: 700px; }

.hiw-demo .msg-student + .msg-tutor,
.hiw-demo .msg-tutor + .msg-student { margin-top: 0.8rem; }

.demo-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rev),0.25);
  margin-bottom: 1rem;
}

/* ─── HOW IT WORKS: MASTERY ─── */
.mastery { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.mastery h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.mastery-intro { color: var(--muted); max-width: 55ch; margin-bottom: 3rem; }
.mastery-levels { margin-bottom: 3rem; }

.mastery-level {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

.level-marker {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--level-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.level-info strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.level-info span { font-size: 0.88rem; color: var(--muted); }

.mastery-callout { background: var(--ink); color: var(--paper); padding: 2rem;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.mastery-callout strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.75rem;
}

.mastery-callout p { font-size: 0.92rem; color: rgba(var(--ink-rev),0.65); line-height: 1.6; max-width: 60ch; }

/* ─── HOW IT WORKS: BLOOM'S TAXONOMY ─── */
.blooms-explainer { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.blooms-explainer h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.blooms-intro { color: var(--muted); max-width: 55ch; margin-bottom: 2.5rem; }
.blooms-scale { margin-bottom: 3rem; }

.blooms-level {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}

.blooms-level strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.blooms-level span { font-size: 0.92rem; color: var(--muted); }

/* ─── COURSE PAGES: OBJECTIVE HEADER + FOOTNOTE ─── */
.objective-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

.objective-header h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0;
}

.objective-col-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.blooms-footnote {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 1rem;
  padding-top: 0.5rem;
}

.blooms-help {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--muted);
  text-decoration: none;
  vertical-align: super;
  margin-left: 0.2rem;
}

.blooms-help:hover { color: var(--accent); }

/* ─── REAL SESSION ─── */
.real-session {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.real-session h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.real-session-intro {
  color: rgba(var(--ink-rev),0.65);
  max-width: 700px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.real-session-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2.5rem;
}

.real-session-flow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

.real-session-step {
  background: rgba(var(--ink-rev),0.05);
  border: 1px solid rgba(var(--ink-rev),0.1);
  padding: 1.5rem;
}

.real-session-step strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.real-session-step p { font-size: 0.88rem; color: rgba(var(--ink-rev),0.55); line-height: 1.55; }

/* ─── HOW IT WORKS: RETENTION ─── */
.retention { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.retention h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.retention-intro { color: var(--muted); max-width: 55ch; margin-bottom: 3rem; }

.retention-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.retention-card { background: var(--paper); padding: 2rem; }

.retention-card h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.retention-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }

/* ─── HOW IT WORKS: PORTFOLIO ─── */
.portfolio {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.portfolio h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.portfolio-desc { color: rgba(var(--ink-rev),0.55); margin-bottom: 2rem; }

.portfolio-example {
  padding: 0.8rem 0;
  border-top: 1px solid rgba(var(--ink-rev),0.1);
  font-size: 0.82rem;
  line-height: 1.6;
}

.portfolio-example strong {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.2rem;
}

.portfolio-example span { color: rgba(var(--ink-rev),0.5); }

/* ─── HOW IT WORKS: CUSTOMIZATION ─── */
.customization { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.customization h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.customization-intro { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.adapt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.adapt-col { background: var(--paper); padding: 2rem; }
.adapt-col.fixed-col { background: var(--ink); color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.adapt-col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.adapt-col:not(.fixed-col) h3 { color: var(--accent); }
.adapt-col.fixed-col h3 { color: var(--accent); }

.adapt-list { list-style: none; padding: 0; }

.adapt-list li {
  padding: 0.6rem 0;
  border-top: 1px solid;
  font-size: 0.88rem;
  line-height: 1.5;
}

.adapt-col:not(.fixed-col) .adapt-list li { border-color: var(--rule); color: var(--muted); }
.adapt-col.fixed-col .adapt-list li { border-color: rgba(var(--ink-rev),0.1); color: rgba(var(--ink-rev),0.6); }
.adapt-list li strong { color: var(--ink); }
.adapt-col.fixed-col .adapt-list li strong { color: var(--paper); }

/* ─── HOW IT WORKS: PACE ─── */
.pace-intro { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

/* ─── DOCS HUB ─── */
.docs-hub-links {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 0.8rem 0;
  position: sticky;
  top: 60px;
  z-index: 90;
}

.docs-hub-links ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.docs-hub-links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
  padding: 0.3rem 0;
}

.docs-hub-links a:hover { color: var(--accent); }

.docs-section {
  padding: 4rem 0;
  border-bottom: 1px solid var(--rule);
}

.docs-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 0.8rem;
  font-weight: 400;
}

.docs-section h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  margin-top: 2.5rem;
}

.docs-section h3:first-of-type { margin-top: 2rem; }

.docs-section p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: 1rem;
}

.docs-section .section-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.docs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.docs-step {
  background: rgba(10,10,10,0.03);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.5rem;
}

.docs-step-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.docs-step h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.docs-step p { font-size: 0.85rem; color: var(--muted); line-height: 1.55; max-width: none; }

.troubleshooting-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.troubleshooting-list li {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--rule);
  margin-bottom: 0.75rem;
  background: rgba(10,10,10,0.02);
  border-radius: 0 6px 6px 0;
}

.troubleshooting-list li strong {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.troubleshooting-list li p {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0;
  line-height: 1.5;
}

.faq-list {
  max-width: 700px;
  margin: 2rem 0;
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  line-height: 1.4;
}

.faq-question:hover { color: var(--accent); }

.faq-question::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.2s;
}

.faq-item.open .faq-question::after {
  content: '\2212';
}

.faq-answer {
  display: none;
  padding-bottom: 1.2rem;
}

.faq-item.open .faq-answer { display: block; }

.faq-answer p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: 0.5rem;
}

.faq-answer p:last-child { margin-bottom: 0; }

.community-card {
  background: var(--ink);
  color: var(--paper);
  padding: 2.5rem;
  border-radius: 8px;
  margin: 2rem 0;
  max-width: 600px;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.community-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0 0 0.8rem;
  color: var(--paper);
}

.community-card p {
  font-size: 0.88rem;
  color: rgba(var(--ink-rev),0.6);
  line-height: 1.6;
  max-width: none;
  margin-bottom: 0.8rem;
}

.community-card .community-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  margin-top: 0.5rem;
}

.learning-pace-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 2rem 0;
}

.pace-card {
  background: var(--paper);
  padding: 2rem;
}

.pace-card h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.pace-duration {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.pace-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; max-width: none; margin-bottom: 0; }

/* ─── ABOUT PAGE ─── */
.about-hero {
  padding: 10rem 0 5rem;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}
.about-hero .hero-eyebrow { opacity: 1; animation: none; color: var(--accent); }
.about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.about-hero .hero-sub {
  opacity: 1; animation: none;
  font-size: 1.1rem;
  color: rgba(var(--ink-rev),0.6);
}

.about-founder-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}

.about-avatar {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.about-avatar--founder {
  width: 72px; height: 72px;
  font-size: 1.2rem;
  border-radius: 50%;
}
.about-avatar--soon {
  background: transparent;
  border: 2px dashed rgba(0,0,0,0.2);
  color: var(--muted);
}

.about-agent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.about-agent-card {
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
}
.about-agent-card--soon {
  opacity: 0.6;
  border-style: dashed;
}

.about-agent-role {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0.75rem 0 0.25rem;
}

.about-agent-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-bottom: 0.5rem;
}
.about-agent-status--active {
  color: var(--accent);
  border: 1px solid var(--accent);
}
.about-agent-status--soon {
  color: var(--muted);
  border: 1px solid var(--rule);
}

.about-agent-bio {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ─── COURSES PAGE HERO ─── */
.courses-hero {
  padding: 10rem 0 5rem;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.courses-hero .hero-eyebrow { opacity: 1; animation: none; color: var(--accent); }

.courses-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

.courses-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1.1rem;
  color: rgba(var(--ink-rev),0.6);
  max-width: 48ch;
  line-height: 1.6;
}

/* ─── COURSES PAGE — SECTIONS & CARDS ─── */
.section-light {
  padding: 5rem 0;
  background: var(--paper);
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.section-desc {
  color: var(--muted);
  max-width: 48ch;
  margin-bottom: 3rem;
}

/* Foundation / standalone grid */
.foundation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.foundation-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.foundation-card.fc-planned { border-style: dashed; }

.fc-code {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
}

.fc-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.3rem;
}

.fc-badge-planned {
  color: var(--muted) !important;
}

.fc-badge-soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.4rem;
}

.fc-badge-free {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.4rem;
}

.fc-summary {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0.6rem 0 0;
}

.fc-meta {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.fc-meta strong {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fc-tools { margin-bottom: 0.4rem; }

.fc-sessions {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Expandable card behavior */
.expand-trigger {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  cursor: pointer;
}

.expand-chevron::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform 0.2s;
}

.expand-chevron-dark::after {
  color: rgba(var(--ink-rev),0.35);
}

.expand-card.open .expand-chevron::after {
  content: '\2212';
}

.expand-content {
  display: none;
}

.expand-card.open .expand-content {
  display: block;
}

/* Session list inside expanded cards */
.fc-session-list {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--muted);
}

.fc-session-list strong {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.5rem;
}

.fc-session-list ul {
  list-style: none;
  padding: 0;
}

.fc-session-list ul li {
  padding: 0.25rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
}

.fc-prereq {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* Course table inside expanded major cards */
.course-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.75rem;
}

.course-table th {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rev),0.4);
  text-align: left;
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid rgba(var(--ink-rev),0.1);
}

.course-table td {
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid rgba(var(--ink-rev),0.06);
  color: rgba(var(--ink-rev),0.6);
  vertical-align: top;
}

.course-table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(var(--ink-rev),0.3);
  width: 2rem;
}

.course-table td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(var(--ink-rev),0.35);
  width: 4rem;
  text-align: center;
}

/* ─── COURSE DETAIL PAGES ─── */
.course-hero {
  padding: 4rem 0 3rem;
  border-bottom: 2px solid var(--ink);
  margin-top: 60px;
}

.course-hero .hero-eyebrow { opacity: 1; animation: none; }

.course-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 22ch;
  margin-bottom: 1rem;
}

.course-major-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 1.5rem;
  display: inline-block;
  transition: color 0.2s;
}

.course-major-link:hover { color: var(--ink); }

.course-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1rem;
  color: var(--muted);
  max-width: 50ch;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.course-meta { display: flex; gap: 2rem; flex-wrap: wrap; }

.course-meta-item {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.course-meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 0.1rem;
}

/* ─── COURSE PAGE: OBJECTIVES ─── */
.objectives-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.objectives-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

.objective-phase { margin-bottom: 2rem; }

.objective-phase h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.objective-list { list-style: none; padding: 0; }

.objective-item {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.blooms-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── COURSE PAGE: CURRICULUM BREAKDOWN ─── */
.curriculum-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.curriculum-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

.session-list {
  list-style: none;
  padding: 0;
  counter-reset: session;
}

.session-item {
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
}

.session-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.session-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.session-number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 1.5rem;
}

.session-header h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0;
  flex: 1;
}

.session-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.session-overview {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0.4rem 0 0 2.25rem;
}

.session-exercise {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.4rem 0 0 2.25rem;
}

/* ─── COURSE PAGE: UNITS ─── */
.units-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.units-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

.units-phase { margin-bottom: 3rem; }

.units-phase h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.units-phase-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.unit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.unit-card { background: var(--paper); padding: 1.5rem; }

.unit-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.unit-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

.unit-topics { list-style: none; padding: 0; margin-top: 0.75rem; }

.unit-topics li {
  padding: 0.3rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ─── COURSE PAGE: PROJECT ─── */
.course-project {
  padding: 4rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.course-project h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.project-driving {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.4;
  max-width: 36ch;
  margin-bottom: 1.5rem;
}

.project-deliverable {
  color: rgba(var(--ink-rev),0.6);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 50ch;
  margin-bottom: 2rem;
}

.project-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(var(--ink-rev),0.1);
  border: 1px solid rgba(var(--ink-rev),0.1);
  margin-bottom: 2rem;
}

.project-example { background: var(--ink); padding: 1.5rem;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.project-example strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}

.project-example span { font-size: 0.85rem; color: rgba(var(--ink-rev),0.5); line-height: 1.55; }

.project-rubric {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--ink-rev),0.1);
}

.project-rubric h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.rubric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(var(--ink-rev),0.1);
  border: 1px solid rgba(var(--ink-rev),0.1);
}

.rubric-item { background: var(--ink); padding: 1rem;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}
.rubric-item strong { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; }
.rubric-item span { font-size: 0.8rem; color: rgba(var(--ink-rev),0.45); line-height: 1.5; }

/* ─── COURSE PAGE: TOOLS ─── */
.tools-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.tools-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.tools-section > .container > p { color: var(--muted); max-width: 50ch; margin-bottom: 2.5rem; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.tool-card { background: var(--paper); padding: 1.5rem; }
.tool-card h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; margin-bottom: 0.3rem; }
.tool-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-bottom: 0.5rem; }

.tool-market-note {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* ─── COURSE PAGE: PREREQUISITES ─── */
.prereq-section { padding: 4rem 0; border-bottom: 1px solid var(--rule); }

.prereq-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

.prereq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.prereq-col { background: var(--paper); padding: 2rem; }

.prereq-col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.prereq-col:first-child h3 { color: var(--muted); }
.prereq-col:last-child h3 { color: var(--accent); }

.prereq-list { list-style: none; padding: 0; }

.prereq-list li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}

.prereq-list a { color: var(--ink); text-decoration: none; transition: color 0.2s; }
.prereq-list a:hover { color: var(--accent); }

.prereq-list .prereq-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* ─── COURSE CARD LINK STYLE ─── */
a.course-card {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
  display: block;
}

a.course-card:hover { background: var(--accent-light); }

/* ═══════════════════════════════════════════════════════════════════════════════
   THE GAP-GRID FAMILIES TAKE THE MATERIAL (AIU-STYLE-GUIDE v1.3 §10a)
   ═══════════════════════════════════════════════════════════════════════════════
   WHAT WAS HERE, and why it counts as the OLD REGISTER rather than as a style
   choice. Seven card families on this sheet were drawn the same way: a grid with
   `gap: 1px`, a fill on the GRID, a 1px ring around it, and an opaque fill on each
   child. The "hairlines" between the cards were the grid's own background showing
   through a one-pixel gap. Measured (`node scripts/global-style-audit.mjs`), every
   one of those children read `film=no rim=no ladder=0 layers=0` — flat fill plus a
   hairline, which §10 marks SUPERSEDED wherever the material has landed. It has now
   landed here.

   ONE RULE FOR ALL SEVEN, deliberately. They are the same object class — a content
   card in a rack — and the failure this whole pass exists to fix is a standard that
   got applied to one surface and not the next. Writing it seven times is how the
   eighth one gets missed.

   THE GRIDS STOP DRAWING EDGES. A raised object separates itself: that is what the
   rim and the five-rung ladder are for. A 1px gap between two glass cards is not a
   gap, it is two rims touching. Real gaps, no grid fill, no ring.

   WHAT EACH CARD KEEPS: its padding, its type, its own accent rules. What it loses:
   the opaque fill (an opaque fill under a translucent body is a film with nothing to
   film) and any border (fact 4 — the only legal border is an accent TOP-rule, and
   the two families that carry one keep it, re-asserted below).

   BLAST RADIUS, MEASURED NOT ASSUMED: these seven classes appear on 22 pages, all
   of them in this wave (/courses, the 10 /majors pages, /news). The single other
   file that uses the name `.project-card` — public/portfolio-template/index.html —
   defines its own and does not load this stylesheet. Nothing outside the wave moves.
   ═══════════════════════════════════════════════════════════════════════════════ */
.foundation-grid,
.cmap-major-grid,
.course-grid,
.career-grid,
.project-grid,
.timeline-tracks,
.honesty-grid-detail {
  gap: 1.1rem;
  background: none;
  border: 0;
}
.foundation-card,
.cmap-major-card,
.course-card,
.career-card,
.project-card,
.track,
.honesty-col {
  background: none;
  border: 0;
  border-radius: var(--gl-radius);
  /* RE-DECLARED, not inherited. A custom property substitutes its var()s at the
     element that DECLARES it, so `--gl-bloom` written once on :root would bake in
     the root's 22px and every card here would wear a corner bloom sized for a
     corner it does not have. Same discipline the material's own source states. */
  --gl-radius: 14px;
  --gl-bloom: calc(var(--gl-radius) + 8px);
}
/* The reversed families sit on a DARK section ground, where the glass reads as a
   panel lifted off that ground rather than as a light card. Nothing to re-point:
   the material is luminance-only and takes the sign of whatever it sits on. Listed
   so the next reader knows the dark cards were considered, not overlooked. */

/* Hover: `.course-card` is the only one of the seven that is a DOOR (an <a>). The
   other six are panels — a full-width block that rises under the cursor is
   promising a click it does not have (§10b), so they take the material and
   `.gl--still`, which zeroes the lift and removes the glow. The class is in the
   markup, not inferred here. */
a.course-card:hover { background: none; }

/* ─── COURSE GRID ─── */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.course-card { padding: 1.5rem; }

.course-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.course-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-bottom: 0.75rem; }

.course-card ul { list-style: none; padding: 0; }

.course-card ul li {
  padding: 0.3rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ─── CAREER PATHS ─── */
.careers-section {
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.careers-section h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.careers-section > .container > p {
  color: rgba(var(--ink-rev),0.55);
  max-width: 50ch;
  margin-bottom: 3rem;
}

.career-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.career-card { padding: 2rem; }

.career-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.career-card p { font-size: 0.88rem; color: rgba(var(--ink-rev),0.55); line-height: 1.55; margin-bottom: 1rem; }

.career-differentiator {
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--ink-rev),0.1);
  font-size: 0.8rem;
}

.career-differentiator strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.3rem;
}

.career-differentiator span { color: rgba(var(--ink-rev),0.45); }

/* ─── PROJECTS SECTION ─── */
.projects-section { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.projects-section h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.projects-section > .container > p { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.project-card { padding: 2rem; }

.project-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.project-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.project-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }

/* ─── MAJOR HERO ─── */
.major-hero {
  padding: 5rem 0 4rem;
  border-bottom: 2px solid var(--ink);
}

.major-hero .hero-eyebrow { opacity: 1; animation: none; }

.major-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.1;
  font-weight: 400;
  max-width: 20ch;
  margin-bottom: 1rem;
}

.major-replaces-hero {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.major-hero .hero-sub {
  opacity: 1;
  animation: none;
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 50ch;
  line-height: 1.6;
}

/* ─── CURRICULUM SECTION (major pages) ─── */
.curriculum-section { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.curriculum-section h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.curriculum-section > .container > p { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.curriculum-layer { margin-bottom: 3rem; }

.curriculum-layer h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.curriculum-layer .layer-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.curriculum-layer ul { list-style: none; padding: 0; }

.curriculum-layer ul li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}

.curriculum-layer ul li a { color: inherit; text-decoration: none; }
.curriculum-layer ul li a:hover { color: var(--accent); }

/* ─── MAJOR TIMELINE ─── */
.major-timeline { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.major-timeline h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  margin-bottom: 3rem;
}

.track-phases { margin-top: 1.5rem; }

.phase {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  font-size: 0.88rem;
}

.phase strong {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  padding-top: 0.1rem;
}

.phase span { color: var(--muted); }

/* ─── MAJOR HONESTY ─── */
.major-honesty { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.major-honesty h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 3rem;
}

.honesty-grid-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.honesty-col { padding: 2rem; }

.honesty-col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.honesty-col:first-child h3 { color: var(--accent); }
.honesty-col:last-child h3 { color: var(--muted); }

.honesty-list { list-style: none; padding: 0; }

.honesty-list li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}

/* ─── PRICING PAGE PLANS ─── */
.plans {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.plans h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.plans-intro {
  color: rgba(var(--ink-rev),0.55);
  max-width: 50ch;
  margin-bottom: 3rem;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.plan-col { padding: 2rem; border-radius: 4px; }

.plan-col.subtle {
  background: rgba(var(--ink-rev),0.04);
  border: 1px solid rgba(var(--ink-rev),0.1);
}

.plan-col.featured { background: var(--accent); color: var(--paper); }

.plan-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  background: rgba(var(--ink-rev),0.2);
  color: var(--paper);
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.plan-col h3 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: rgba(var(--ink-rev),0.5);
}

.plan-col.featured h3 { color: rgba(255,255,255,0.85); }

.plan-amount {
  font-family: var(--font-display);
  font-size: 2.8rem;
  line-height: 1;
}

.plan-period {
  font-size: 0.8rem;
  color: rgba(var(--ink-rev),0.5);
  margin-bottom: 0.75rem;
}

.plan-col.featured .plan-period { color: rgba(255,255,255,0.7); }

.plan-tagline {
  font-size: 0.85rem;
  color: rgba(var(--ink-rev),0.5);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.plan-col.featured .plan-tagline { color: rgba(255,255,255,0.7); }

.plan-includes {
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
  font-style: italic;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.plan-features li {
  padding: 0.5rem 0;
  border-top: 1px solid rgba(var(--ink-rev),0.08);
  font-size: 0.85rem;
  color: rgba(var(--ink-rev),0.6);
}

.plan-col.featured .plan-features li {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
}

.plan-features li strong { color: rgba(var(--ink-rev),0.85); font-weight: 500; }
.plan-col.featured .plan-features li strong { color: #fff; }

.plan-cta-outline {
  display: inline-block;
  border: 1px solid rgba(var(--ink-rev),0.3);
  color: var(--paper);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s;
}

.plan-cta-outline:hover { background: rgba(var(--ink-rev),0.08); }

.pi-card .plan-cta-outline {
  color: var(--ink);
  border-color: var(--ink);
}
.pi-card .plan-cta-outline:hover {
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.plan-cta-solid {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
}

.plan-cta-solid:hover { opacity: 0.9; }

.plans-note {
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(var(--ink-rev),0.08);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(var(--ink-rev),0.5);
}

/* ─── PRICING PAGE: AI MODEL EXPLAINER ─── */
.ai-explainer { padding: 5rem 0; border-bottom: 1px solid var(--rule); background: var(--paper); }

.ai-explainer h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.ai-explainer-intro { color: var(--muted); max-width: 50ch; margin-bottom: 3rem; }

.ai-explainer .model-check { list-style: none; padding: 0; margin-top: 1rem; }

.ai-explainer .model-check li { padding: 0.3rem 0; font-size: 0.85rem; color: var(--muted); }

.layer-card .model-check { list-style: none; padding: 0; margin-top: 1rem; }
.layer-card.dark .model-check li { padding: 0.3rem 0; font-size: 0.85rem; color: rgba(var(--ink-rev),0.65); }

.ai-callout {
  margin-top: 2rem;
  background: var(--accent-light);
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--accent);
}

.ai-callout p { color: var(--muted); font-size: 0.88rem; margin: 0; }

/* ─── PRICING PAGE: USAGE EXPLAINER ─── */
.usage-explainer { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.usage-explainer h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 2rem;
}

.usage-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-bottom: 0.5rem;
}

.usage-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  padding: 0.6rem 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.usage-note { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); margin-top: 1rem; }

/* ─── PRICING PAGE: MCP EXPLAINER ─── */
.mcp-explainer {
  padding: 5rem 0;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.mcp-explainer h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.mcp-explainer h2 em { font-style: italic; }
.mcp-desc { color: rgba(var(--ink-rev),0.65); margin-bottom: 1rem; }

.mcp-cta {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.mcp-cta:hover { text-decoration: underline; }

.mcp-card {
  background: rgba(var(--ink-rev),0.05);
  border: 1px solid rgba(var(--ink-rev),0.1);
  padding: 1.5rem;
}

.mcp-card-header {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.mcp-card-row {
  border-top: 1px solid rgba(var(--ink-rev),0.08);
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: rgba(var(--ink-rev),0.65);
}

.mcp-card-note {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(var(--ink-rev),0.3);
  margin-top: 1rem;
}

/* ─── PRICING PAGE: FAQ ─── */
.pricing-faq { padding: 5rem 0; border-bottom: 1px solid var(--rule); }

.pricing-faq h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 2rem;
}

.faq-item { border-top: 1px solid var(--rule); padding: 1.5rem 0; }

.faq-item h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.faq-item p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

/* ─── NEWS ─── */

/* ── REQ-119 · THE READING-SURFACE ACCENT REGISTER ─────────────────────────
   Measured, not eyeballed: before this block the h2 section bar, the dateline,
   the pull-quote rule and the callout rule all resolved to rgb(27,79,138) —
   the site's azure INTERACTIVE token — while every .news-* hairline resolved to
   rgba(138,98,16,.24), the gilt rule, which reads olive/tan against a cool
   ground. The reading surfaces were wearing two colours that both belong to
   something else, and neither of them was doing structural work.

   Direction §M4: the 44px bar over every h2 is where BRAND RED does structural
   work instead of decorating labels. Intel ships that exact treatment in the
   red register (globals.css: .ra-body h2::before -> --c-op #E24B3A; running
   text and links -> --read-accent #C5392B). Marketing has no red token of its
   own — --c-mk is the tan #B5A586 badge fill, not a text rung — so the reading
   surfaces bind to the AIU brand-red rungs directly, matching Intel rung for
   rung rather than inventing a third red.

   TWO RUNGS, because one red cannot clear both floors:
     --read-accent        #C5392B  small text, links, datelines. 5.26:1 on
                                   --paper, clearing the 4.5:1 AA floor. The
                                   identity #E24B3A measures 3.84:1 here and
                                   would FAIL on 11px mono.
     --read-accent-strong #E24B3A  the identity red itself, for LARGE and
                                   structural elements only — the 3px section
                                   bars, the pull-quote rule, the callout rule.
                                   Non-text and large text need 3:1.

   Red is never a SOLE channel here: links carry an underline, the callout
   carries a fill, the section bar carries position. No red/green pair exists.

   SCOPE: these are reading-surface tokens. Buttons and share controls keep the
   azure interactive register (--accent) deliberately — .btn-cta and .sb-primary
   are site-wide control atoms, not .news-* rules, and "azure = interactive/CTA"
   is the house register. Red does structure; azure does actions. */
.news-listing,
.news-card,
.news-article {
  --read-accent: #C5392B;
  --read-accent-strong: #E24B3A;
  /* The gilt hairline (rgba(138,98,16,.24)) is warmth-in-details for marketing
     chrome; on a reading surface it is the olive card border the render check
     caught. Cool-neutral, derived from --ink, mirroring Intel's
     --rule rgba(20,20,21,.10) and its --rule-strong sibling. */
  --rule: rgba(20, 23, 29, 0.11);
  --rule-strong: rgba(20, 23, 29, 0.20);
}

.news-listing { padding: 3rem 0 5rem; }

.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

/* THE NEWS CARDS TAKE THE MATERIAL (§10a). `gl` is in the markup; the fill, the
   rim, the five-rung ladder, the film and the ONE -3px lift come from
   /assets/aiu-glass.css. Four things go, each replaced rather than merely dropped:
   the 1px ring (fact 4 — the material draws no border), the opaque `--paper` fill
   (an opaque fill under a translucent body films nothing), the single hover shadow
   (a 6th rung under a five-rung ladder; and a transitioned box-shadow repaints the
   whole card every frame, which is why the material fades an opacity instead), and
   the 6px radius, which is now the 14px register the rest of the site's cards use.

   THE CLIP MOVED, and it is the §10b trap, not tidying. `overflow: hidden` was here
   so a card's picture would follow the rounded corners. But the rim is a ::before
   pulled OUT to the border box and the glow is a z-index:-1 ::after whose whole
   content is shadow OUTSIDE the box — the clip silently deletes both while every
   computed value still reads correct. That is the same defect FOUNDER named on
   /research ("the new art but the old hover effect"). The crop is the PICTURE's
   job: `.news-card-img` now carries it, with the card's own top radius.

   WHAT IT KEEPS: the red rule that stands in for a missing picture
   (`.news-card:not(:has(.news-card-img)) .news-card-body`, a few rules below). That
   is an interior structural rule, not the card's border, and the material never
   paints over an information channel. */
.news-card {
  --gl-radius: 14px;
  --gl-bloom: calc(var(--gl-radius) + 8px);
  border-radius: var(--gl-radius);
}

.news-card a { text-decoration: none; color: inherit; display: block; }

/* The picture self-clips (see the note on .news-card). Top corners follow the
   card; the bottom two stay square because the picture meets the body there. */
.news-card-img {
  border-radius: var(--gl-radius, 14px) var(--gl-radius, 14px) 0 0;
  overflow: hidden;
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.news-card-body { padding: 1.5rem; }

/* Text card — a card with no picture. Most cards are this now: the imagery
   register removed every unlicensed third-party hero, and an article only
   earns art when the art carries an argument. A rule sits where the image
   used to, so a mixed grid reads as a deliberate register rather than as
   images that failed to load.

   The rule takes --read-accent-strong, not --accent: REQ-119 scoped the reading
   surfaces to the brand-red rungs and reserved azure for actions ("red does
   structure; azure does actions"). This bar is structure standing in for a
   picture, so it is red — the same rung the section bars and pull-quote top
   rule already use. */
.news-card:not(:has(.news-card-img)) .news-card-body {
  padding: 1.75rem 1.5rem;
  border-top: 3px solid var(--read-accent-strong);
}

.news-card-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--read-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* REQ-119 · the card headline is READING content, so it takes the reading face.
   At 400 weight in a UI grotesk these read as list rows; at 600 in Newsreader
   they read as stories, which is what they are. */
.news-card-title {
  font-family: var(--font-reading);
  font-variation-settings: 'opsz' 24;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.014em;
  margin-bottom: 0.75rem;
}

/* The summary is the sentence that says why the item matters — the content, not
   a caption. 0.85rem of muted grey was pricing it as furniture. */
.news-card-summary {
  font-family: var(--font-reading);
  font-variation-settings: 'opsz' 16;
  font-size: 1rem;
  color: var(--reading-ink);
  line-height: 1.55;
}

/* Article page */

.news-article {
  max-width: 740px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
}

.news-article-header { margin-bottom: 2rem; }

.news-article-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--read-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

/* The headline in the reading face at DISPLAY optical size. 30px -> 52px, and
   the scale top-to-bottom now runs ~4.7x instead of 2.4x: a page whose largest
   element is 2.4x its smallest is one flat field of grey, which is the other
   half of "dry". */
.news-article-header h1 {
  font-family: var(--font-reading);
  font-variation-settings: 'opsz' 60;
  font-size: clamp(1.875rem, 5.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.021em;
  margin-bottom: 0.75rem;
  text-wrap: balance;
}

/* The deliberate inversion: the standfirst stays the SANS against a serif
   headline. It is the crispest contrast available on the page, it costs nothing,
   and it keeps a thread of the house voice at the top of every article. */
.news-article-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.9vw, 1.375rem);
  color: var(--muted);
  line-height: 1.46;
  letter-spacing: -0.004em;
  max-width: 60ch;
}

.news-article-hero {
  margin: 0 0 2.5rem;
}

.news-article-hero img {
  width: 100%;
  border-radius: 6px;
  display: block;
}

.news-article-hero figcaption {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.5rem;
  text-align: right;
}

/* Reading size, not dashboard size. 1rem/1.8 is a UI paragraph; a long-form
   column wants ~19.5px at a tighter leading in a face built for continuous
   reading. */
.news-article-body p {
  font-family: var(--font-reading);
  font-variation-settings: 'opsz' 16;
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--reading-ink);
  margin-bottom: 1.25rem;
}

/* One drop cap per article, three lines, in --ink and NEVER in accent: a
   coloured drop cap is a magazine cliche that also leans on hue. Opt-in via
   class so it lands once, on the opening paragraph, and never on a stray <p>. */
.news-article-body p.lead::first-letter {
  float: left;
  font-family: var(--font-reading);
  font-variation-settings: 'opsz' 72;
  font-weight: 600;
  font-size: 4.3em;
  line-height: 0.82;
  padding: 0.02em 0.08em 0 0;
  margin: 0.04em 0 -0.06em 0;
  color: var(--ink);
}

/* Brand accent finally doing STRUCTURAL work — the bar over every section head
   is what tells a scrolling reader where the argument turns. */
.news-article-body h2 {
  position: relative;
  font-family: var(--font-reading);
  font-variation-settings: 'opsz' 40;
  font-size: clamp(1.4375rem, 2.7vw, 1.875rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin: 2.875rem 0 1rem;
  padding-top: 1.25rem;
}

.news-article-body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--read-accent-strong);
}

.news-article-body h3 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
}

.news-article-body ul,
.news-article-body ol {
  margin: 0 0 1.5rem 1.5rem;
  line-height: 1.8;
}

.news-article-body li {
  font-family: var(--font-reading);
  font-variation-settings: 'opsz' 16;
  font-size: 1.09rem;
  line-height: 1.58;
  color: var(--reading-ink);
  margin-bottom: 0.5rem;
}

/* The pull-quote is an ENTRY POINT, not a citation block. It breaks out past the
   reading column and changes the page's width, which is the one thing that gives
   a reader scrolling past somewhere to re-enter. Text is always lifted verbatim
   from the article's own sentences, never newly written. */
.news-article-body blockquote {
  border-left: 0;
  border-top: 2px solid var(--read-accent-strong);
  padding: 1.25rem 0 0;
  margin: 2.125rem 0;
  font-family: var(--font-reading);
  font-variation-settings: 'opsz' 48;
  font-size: clamp(1.3125rem, 2.9vw, 1.8125rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.news-article-body blockquote p {
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  font-variation-settings: 'opsz' 48;
  margin-bottom: 0;
}

/* THE ONE FILLED ELEMENT on the page. Everything else that used to be a box —
   the quote, the section head — is now carried by a rule and by type, so "filled"
   means something again. Square left / rounded right reads as attached to the
   column rather than floating in it. */
.news-callout {
  background: var(--accent-light);
  border-left: 3px solid var(--read-accent-strong);
  border-radius: 0 6px 6px 0;
  padding: 1.75rem 2rem;
  margin: 2.75rem 0;
}

.news-callout h3 {
  font-family: var(--font-reading);
  font-variation-settings: 'opsz' 32;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.news-callout p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.news-callout .btn-cta {
  font-size: 0.85rem;
  padding: 0.6rem 1.5rem;
}

.news-sources {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-strong);
}

.news-sources h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1rem;
}

.news-sources ol {
  margin-left: 1.25rem;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.8;
}

/* Running-text and citation links. Before this rule NOTHING in the article body
   styled an <a> at all — a link inside .news-article-body p resolved to the user
   agent's default rgb(0,0,238), raw browser blue, in the middle of a designed
   reading column. Measured, not noticed by eye.

   Colour is never the only cue: the underline carries "this is a link" for a
   reader who cannot separate the hue, which is the CVD law applied to running
   text. .btn-cta is excluded — it is a control atom in the azure interactive
   register and it lives inside the callout, not in the argument. */
.news-article-body a:not(.btn-cta),
.news-sources a {
  color: var(--read-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
}

.news-article-body a:not(.btn-cta):hover,
.news-sources a:hover { color: var(--ink); }

/* ─── START HERE (4-COURSE ARC) ─── */

.start-here {
  padding: 5rem 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink);
}

.start-here-header {
  max-width: 44ch;
  margin-bottom: 3rem;
}

.start-here h2 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.start-here h2 em { font-style: italic; }

.start-here-intro {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- Vertical timeline --- */
.start-here-timeline {
  position: relative;
  padding-left: 3.5rem;
}

.start-here-timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--rule);
}

/* --- Timeline item --- */
.sh-tl-item {
  position: relative;
  padding-bottom: 2rem;
}

.sh-tl-item:last-child {
  padding-bottom: 0;
}

/* --- Timeline marker (step number on the line) --- */
.sh-tl-marker {
  position: absolute;
  left: -3.5rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--muted);
  z-index: 1;
}

.sh-tl-item--live .sh-tl-marker {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}

.sh-tl-item--soon .sh-tl-marker {
  border-style: dashed;
}

/* --- Coming Soon muted treatment --- */
.sh-card--soon {
  opacity: 0.75;
  transition: opacity 0.2s;
}

.sh-card--soon:hover { opacity: 1; }

/* --- Timeline content --- */
.sh-tl-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* --- Timeline header (code + title inline) --- */
.sh-tl-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
}

.sh-tl-header .sh-card-title {
  flex-basis: 100%;
}

/* --- Coming Soon pill badge --- */
.sh-tl-soon-pill {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--muted);
  color: var(--paper);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}

/* --- Actions row (details + CTA inline) --- */
.sh-tl-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sh-tl-actions .sh-card-details {
  text-align: left;
  padding: 0;
}

.sh-tl-actions .sh-card-cta {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  flex-shrink: 0;
}

/* --- Course code label --- */
.sh-card-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.sh-card--soon .sh-card-label { color: var(--muted); }

/* --- Title --- */
.sh-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
}

/* --- Tagline --- */
.sh-card-tagline {
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* --- For line --- */
.sh-card-for {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
}

/* --- Walk away with --- */
.sh-card-build {
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.sh-card--soon .sh-card-build { border-left-color: var(--muted); }

.sh-card-build-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.sh-card--soon .sh-card-build-label { color: var(--muted); }

/* --- CTA button --- */
.sh-card-cta {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  padding: 0.75rem 1rem;
}

.sh-card-details {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  text-align: center;
  display: block;
  padding: 0.25rem 0;
  transition: opacity 0.2s;
}
.sh-card-details:hover { opacity: 0.7; }

/* --- Outline CTA (waitlist) --- */
.btn-cta-outline.sh-card-cta {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.btn-cta-outline.sh-card-cta:hover {
  background: var(--ink);
  color: var(--paper);
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}


/* --- Waitlist inline form --- */
.sh-waitlist-form {
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

.sh-waitlist-form.hidden { display: none; }

.sh-waitlist-heading {
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.sh-waitlist-sub {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.sh-waitlist-inline {
  display: flex;
  gap: 0.5rem;
}

.sh-waitlist-inline input[type="email"] {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 0;
  min-width: 0;
}

.sh-waitlist-inline input[type="email"]:focus {
  border-bottom-color: var(--ink);
}

.sh-waitlist-submit {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

.sh-waitlist-submit:hover { background: var(--accent); }
.sh-waitlist-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.sh-waitlist-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  margin-top: 0.5rem;
  min-height: 1.2em;
}

.sh-waitlist-status.success { color: #2e7d32; }
.sh-waitlist-status.error { color: var(--accent); }

/* --- Pricing: all courses line --- */
.pi-all-courses {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.75rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  nav .logo img { height: 40px; }

  .problem-grid,
  .layers-grid,
  .tutor-grid,
  .honesty-grid,
  .setup-grid,
  .timeline-tracks { grid-template-columns: 1fr; gap: 2rem; }

  .pi-grid { grid-template-columns: 1fr 1fr; }

  .phase-grid,
  .mode-grid { grid-template-columns: 1fr 1fr; }

  .retention-grid,
  .adapt-grid { grid-template-columns: 1fr; }

  .major-grid { grid-template-columns: 1fr; }

  .start-here-timeline { padding-left: 3.5rem; }

  .pricing-comparison { grid-template-columns: 1fr 1fr; }
  .plans-grid { grid-template-columns: 1fr 1fr; }

  .hero-meta { gap: 1.5rem; }

  .course-grid { grid-template-columns: 1fr 1fr; }

  .career-grid,
  .project-grid,
  .honesty-grid-detail { grid-template-columns: 1fr; }

  .phase { grid-template-columns: 6rem 1fr; }

  .unit-grid,
  .tool-grid,
  .project-examples,
  .rubric-grid { grid-template-columns: 1fr 1fr; }

  .prereq-grid { grid-template-columns: 1fr; }

  .cmap-grid { grid-template-columns: 1fr; }
  .cmap-major-grid { grid-template-columns: 1fr 1fr; }
  .foundation-grid { grid-template-columns: 1fr 1fr; }
  .tq-grid { grid-template-columns: 1fr; gap: 2rem; }

  .courses-teaser-grid { grid-template-columns: 1fr; }
  .problem-stats { grid-template-columns: 1fr; }

  .docs-steps { grid-template-columns: 1fr; }
  .learning-pace-grid { grid-template-columns: 1fr; }
  .docs-hub-links ul { gap: 1rem; justify-content: flex-start; padding: 0 0.5rem; }
}

/* ─── CONTACT FLOATING BUTTON + DIALOG ─── */
.contact-trigger {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  z-index: 100;
  transition: color 0.2s;
}

.contact-trigger:hover { color: var(--ink); }

.contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-overlay.hidden { display: none; }

.contact-dialog {
  background: var(--paper);
  max-width: 480px;
  width: 90%;
  border-radius: 8px;
  padding: 2rem;
  position: relative;
}

.contact-dialog h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.contact-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.contact-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}

.contact-close:hover { color: var(--ink); }

#contact-form .form-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

#contact-form .form-row input { flex: 1; }

#contact-form input,
#contact-form select,
#contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}

#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  border-bottom-color: var(--ink);
}

#contact-form textarea {
  resize: vertical;
  min-height: 80px;
}

#contact-form select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b6560' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
}

.contact-submit {
  margin-top: 0.5rem;
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.form-status-success {
  color: #2e7d32;
}

.form-status-error {
  color: var(--accent);
}

@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
  .tour-grid { grid-template-columns: 1fr; max-width: 300px; }

  nav .container { height: 60px; }

  nav .logo img {
    height: 44px;
    margin-top: -4px;
    margin-left: -6px;
  }

  nav .nav-links { display: none; }
  nav .hamburger { display: flex; }

  /* THE PANEL MUST BE OPAQUE — a measured fact, not a preference.
     This shipped `rgba(…, 0.98)` (a literal `rgba(237,241,247,0.98)` on main; the
     same alpha through the token here) and the panel PAINTED NOTHING: the four
     links sat as loose grey words directly on whatever the page had under them,
     which on /courses is a dark reversed hero — unreadable, on 131 pages, at the
     mobile floor. Computed style read back `rgba(237, 241, 247, 0.98)` the whole
     time, and elementFromPoint agreed the panel was the topmost element. Rendered
     side by side at the same colour, alpha 0.98 paints nothing and alpha 1 paints
     the panel: a translucent child of this bar does not composite, because the bar
     is a `.gl` (isolation: isolate) carrying the material's backdrop-filter.
     Evidence: docs/design/style-audit/{before,after}/shots/nav-revise-menu-*.png.
     Pre-existing — main renders identically — and fixed here because it is the
     same §18 mobile floor as the front door's missing hamburger, one bar over.
     If a glass panel is ever wanted here, it has to be PROVEN by rendering it;
     scripts/nav-integrity-check.mjs R4 holds the line until then. */
  nav .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: rgb(var(--ink-rev));
    border-bottom: 1px solid var(--rule);
    padding: 1rem 2rem;
    gap: 1rem;
  }

  nav .nav-links.open .nav-link,
  nav .nav-links.open .cta-nav { font-size: 0.8rem; }


  html { font-size: 16px; }
  .hero { padding: 7rem 0 4rem; }
  .hiw-hero,
  .page-hero,
  .courses-hero,
  .about-hero { padding: 7rem 0 3rem; }
  .about-agent-grid { grid-template-columns: 1fr; }
  .about-founder-card { flex-direction: column; text-align: center; }
  .about-founder-card .about-avatar { margin: 0 auto 1rem; }
  .phase-grid, .mode-grid { grid-template-columns: 1fr; }
  .tour-step { gap: 1rem; }
  .pricing-comparison { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
  .pi-grid { grid-template-columns: 1fr; }
  .not-list li { grid-template-columns: 1fr; }
  .course-grid { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 1fr; }
  .phase strong { margin-bottom: 0.2rem; }
  .unit-grid, .tool-grid, .project-examples, .rubric-grid { grid-template-columns: 1fr; }
  .cmap-major-grid { grid-template-columns: 1fr; }
  .foundation-grid { grid-template-columns: 1fr; }
  .foundation-card { padding: 1.2rem; }
  .cmap-header { padding: 1.2rem 1.5rem; }
  .cmap-courses { padding: 0 1.5rem; }
  .cmap-major-card { padding: 1.2rem; }
  .work-is-demo { grid-template-columns: 1fr; }
  .start-here h2 { font-size: 1.9rem; }
  .start-here-timeline { padding-left: 2.75rem; }
  .sh-tl-marker { left: -2.75rem; width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
  .start-here-timeline::before { left: 0.55rem; }
  .sh-card-title { font-size: 1.5rem; }
  .real-session-flow { grid-template-columns: 1fr; }
  .docs-steps { grid-template-columns: 1fr; }
  .learning-pace-grid { grid-template-columns: 1fr; }
  .docs-hub-links ul { gap: 0.8rem; font-size: 0.65rem; }
  .docs-hub-links { top: 60px; }
  #contact-form .form-row { flex-direction: column; gap: 0; }
}

/* ─── Early Access Modal ─── */
.ea-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ea-overlay.hidden { display: none; }
.ea-modal { background: var(--paper); border-radius: 12px; padding: 2rem; max-width: 480px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.ea-close { position: absolute; top: 0.75rem; right: 1rem; background: none; border: none; font-size: 1.5rem; color: var(--muted); cursor: pointer; line-height: 1; padding: 0.25rem; }
.ea-close:hover { color: var(--ink); }
.ea-heading { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin-bottom: 0.25rem; }
.ea-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.25rem; line-height: 1.5; }
.ea-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.25rem; }
.ea-checkboxes label { font-size: 0.8rem; color: var(--ink); display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.ea-checkboxes input[type="checkbox"] { accent-color: var(--accent); }
.ea-email { width: 100%; padding: 0.7rem; border: 1px solid var(--rule); border-radius: 6px; font-size: 0.9rem; margin-bottom: 0.75rem; background: #fff; color: var(--ink); }
.ea-submit { width: 100%; }
.ea-status { font-size: 0.8rem; margin-top: 0.5rem; min-height: 1.2em; }
.ea-status.success { color: #fff; }
.ea-status.error { color: #fecaca; }
.pi-ga-price { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); margin-top: 0.5rem; }
@media (max-width: 640px) {
  .ea-checkboxes { grid-template-columns: 1fr; }
  .ea-modal { padding: 1.5rem; margin: 0.5rem; }
}

/* ═══ KEEP READING — per-article internal links ═══
   Added 2026-07-24 with the internal-link-graph fix. Before it, no AIU news
   article linked to any other article or to any field page: the only in-body
   link on 30 of 32 articles was the waitlist CTA. Markup is generated by
   scripts/generate-internal-links.mjs from real on-disk relatedness.
   Mobile-first (375px): a plain stacked list, no grid to collapse. */
.keep-reading {
  max-width: 720px;
  margin: 3rem auto 0;
  padding: 1.75rem 0 0;
  border-top: 2px solid var(--ink);
}

.keep-reading .kr-head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1rem;
}

.keep-reading .kr-list { list-style: none; margin: 0; padding: 0; }
.keep-reading .kr-item { border-top: 1px solid var(--rule); }
.keep-reading .kr-item:last-child { border-bottom: 1px solid var(--rule); }

.keep-reading .kr-link {
  display: block;
  padding: 0.9rem 0;
  text-decoration: none;
  color: inherit;
}

.keep-reading .kr-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.keep-reading .kr-title {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}

/* Hover/focus changes hue AND underlines. Never colour alone — FOUNDER is
   red/green colourblind, and no state here is encoded by hue at all. */
.keep-reading .kr-link:hover .kr-title,
.keep-reading .kr-link:focus-visible .kr-title {
  color: var(--accent);
  text-decoration: underline;
}

.keep-reading .kr-more,
.keep-reading .kr-all {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted-body);
  margin-top: 1.1rem;
}

.keep-reading .kr-more a,
.keep-reading .kr-all a { color: var(--accent); }

.keep-reading .kr-all a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.keep-reading .kr-all a:hover,
.keep-reading .kr-all a:focus-visible { border-bottom-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   SHARE — the article-share affordance on public/news/**.

   FOUNDER (2026-07-25, verbatim): "we should also have a 'share' link on every
   research article so people can share and help attract new users, make it easy
   to use." Shipped for Intel in PR #1369; this is the marketing site's half.
   Markup: scripts/generate-news-share.mjs. Behaviour: public/assets/share.js.

   COINS NO NEW TOKEN AND NO NEW COLOUR. Every value resolves to the live
   Daylight Aurora palette already declared in :root (--ink / --paper /
   --accent / --accent-light / --muted / --muted-body / --rule / --font-mono).
   No literal hex, so a re-token of the palette carries here for free — the same
   posture the rest of this sheet takes.

   CVD LAW (FOUNDER is red/green colourblind): no state in this block is carried
   by hue. The copied confirmation is a WORD ("Copied") + a SHAPE (✓) + a
   fill/lightness change, so it reads identically in greyscale. The azure accent
   is decoration on top of cues that already work without it.

   TAP FLOOR: 44px on every control at every viewport (WCAG 2.2 §2.5.8).
   ══════════════════════════════════════════════════════════════════════════ */

.sharebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* On a listing hero the bar is a standalone row rather than an article footer,
   so it drops the divider and tightens up under the sub-headline. */
.page-hero .sharebar,
.news-listing .sharebar {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: 0;
}

.sharebar .sb-lbl {
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
}

/* One control atom for the button and the network links, so a <button> and an
   <a> are visually identical and the row reads as a single set. */
.sharebar .sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;                 /* the binding tap floor */
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.sharebar .sb-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

.sharebar .sb-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The PRIMARY control — the accent lives here and only here in this row, so the
   one thing to tap is obvious without relying on colour to say which it is (it
   is also first, and the only filled control). */
.sharebar .sb-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.sharebar .sb-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

/* Until a share sheet is known to exist, COPY is the one filled control — it is
   the only thing on the row that does the primary job. Once the sheet button
   appears it takes the fill and copy steps back to the outlined atom, so the row
   still has exactly ONE accented control. */
.sharebar:not([data-native="1"]) .sb-copy {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.sharebar:not([data-native="1"]) .sb-copy:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  /* REVERSED BAND: this rule paints --ink as its ground, so its ground does NOT
     follow the theme — it is dark on a light page and light on a dark one. The
     secondary tokens must therefore take their REVERSED pair, or a light-mode
     muted grey lands on a dark band (and vice versa). See the --*-rev note. */
  --accent: var(--accent-rev);
  --muted: var(--muted-rev);
  --muted-body: var(--muted-body-rev);
  --rule: var(--rule-rev);
}

/* CONFIRMED state — the word + the ✓ glyph carry it; this only removes the fill
   so the change is also visible in greyscale and to a colourblind reader. */
.sharebar .sb-primary[data-share-done],
.sharebar .sb-copy[data-share-done] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

/* THE SHEET BUTTON. In the served HTML (so the crawler and a JS-off reader see
   consistent markup), but kept out of the flow until share.js confirms
   navigator.share is real — a "Share" button that opens nothing is worse than no
   button at all. The flag lives on <html> rather than on the bar so one rule
   covers every native control on a page, wherever it sits.

   FOUNDER 2026-07-26 — this is the half of the fix that matters: the OTHER
   control, Copy, has NO rule that can ever hide it. Share appears NEXT TO copy;
   it never replaces it. */
.sharebar .sb-native { display: none; }
html[data-native-share="1"] .sharebar .sb-native { display: inline-flex; }

.sharebar .sb-ico {
  font-size: 0.8rem;
  line-height: 1;
}

/* The label swaps text at runtime ("Copy link" -> "✓ Copied"). Left to size
   itself the button changed width by ~7px on confirmation, which at 375px was
   enough to un-wrap a row and shrink the page by a whole 52px control row the
   instant the reader tapped — measured on a real render, not assumed. Reserving
   the widest label makes the button width constant, so no state change can
   reflow the bar. (The runtime relabel to "Share" is gone — that WAS the
   disappearing-copy bug — but the reservation still governs the copy swap, and
   it now also keeps the Share and Copy buttons the same width as each other.) */
.sharebar [data-share-label] {
  display: inline-block;
  min-width: 5.6em;
  text-align: center;
}

/* The confirmation line ALWAYS occupies its own row, empty or not. Left to wrap
   on demand it appeared only after the click and pushed the rest of the page
   down at the exact moment the reader was looking at the control — a layout jump
   caused by the feedback about the thing they just did. Reserving the row costs
   one line of whitespace and lets the confirmation appear in place. */
.sharebar .sb-status {
  flex-basis: 100%;
  /* min-height and line-height MUST stay equal, AND must land on a whole pixel.
     Reserving the row was only the first half of the fix: with min-height 1rem
     and an inherited 1.65 line-height the FILLED line box was 19.6px against
     18px reserved, so the confirmation still nudged the page ~2px. Pinning both
     to the same value fixed that — but at 1.2rem (19.2px) the empty min-height
     and the filled line box rounded to DIFFERENT 1/64ths of a pixel and the bar
     still grew by 0.0156px, caught by the rendered gate
     (scripts/news-share-behaviour-check.mjs D4), not by eye. 1.25rem is exactly
     20px, which both paths round identically, so the delta is exactly 0. */
  min-height: 1.25rem;
  line-height: 1.25rem;
  color: var(--muted-body);
  font-size: 0.66rem;
}

/* A device with a real OS share sheet collapses to ONE tap: the sheet already
   carries X / LinkedIn / Mail and everything else the reader actually uses, so
   offering our own subset next to it is noise, not choice. */
.sharebar[data-native="1"] .sb-net { display: none; }

@media (max-width: 480px) {
  /* The label would otherwise eat a whole row on a narrow phone before the
     reader reaches a single control. The bar's own aria-label carries the same
     text for assistive tech, so nothing is lost. */
  .sharebar .sb-lbl { display: none; }
  .sharebar .sb-btn { padding: 0 12px; }
}


/* ─── REQ-119 · the pull-quote breakout ────────────────────────────────────
   The quote steps OUT of the 740px reading column, which is the whole reason it
   works as a re-entry point. Guarded behind a breakpoint with provable room:
   the column is 740px, the breakout adds 2x48px = 836px total, and it only
   engages at >=1024px, so it can never produce horizontal scroll. Below that it
   stays in the column and the top rule alone carries it. */
@media (min-width: 1024px) {
  .news-article-body blockquote {
    margin-left: -48px;
    margin-right: -48px;
  }
}