/* ═══════════════════════════════════════════════════════════════════════════
   LEARN family -- one column, one type scale (DESIGN 2026-11-07)
   Spec: docs/board/audit/2026-11-07_DESIGN_learn_layout_type.md

   Linked LAST by templates/learn-{index,journey,path,module,track}.html, and
   every rule is scoped under the page class `.learn-page` on their <body>.
   The shared sheets these pages also load (stock-page.css, legal-pages.css,
   learn-*-extras.css) serve other pages or older states of these ones; this
   sheet overrides them here and touches nothing else. 13F, BDC, the stock
   pages, the glossary and the site chrome do not link it.

   Findings closed (LEARN QA 2026-11-07): LQ-F1/F8 the 11px section H2 with no
   visible title; LQ-F2 18 sizes on the hub, 14 in a lesson; LQ-F3 small hub
   text; LQ-F4 the prose column shifting 720 -> 701; LQ-F5 the duplicate
   "Sit with the ideas."; LQ-F6 ragged chips; LQ-F7 the Next CTA (eyebrow
   1.13:1, padding 0); LQ-F9 --text-muted used as text; LQ-M1 tap targets.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. The role scale ──────────────────────────────────────────────────────
   The type roles, the measure and the rhythm steps are tokens.css :root
   tokens (OWNER ruling 2026-11-07, Q1). This sheet only consumes them. The two
   lesson-only values the spec names (reading leading 1.75, prose paragraph
   gap 24) are the existing --leading-loose and --space-6, used directly, so
   no role is minted here (Q4: lesson body stays 16px). */
.learn-page {
  --column-max: var(--page-max-width);
  --column-gutter: var(--space-5);
  --rule-accent: var(--gold-link);
}

/* ── 1. One content column ──────────────────────────────────────────────────
   The 13F column: the 960 container with 20px gutters, content 920 at x=180
   on a 1280 viewport and viewport - 40 below that (335 at x=20 on a phone).
   The lesson page's own 1280 box with 56px insets and the hub hero's 1280 box
   both go. */
.learn-page main,
.learn-page main.lm-page,
.learn-page main.legal-body {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-wrap: break-word;
}
.learn-page .disclaimer-banner,
.learn-page .lm-page > .sp-breadcrumb,
.learn-page .lm-masthead,
.learn-page .lm-body-grid,
.learn-page .lm-cta-bar,
.learn-page .li-hero,
.learn-page .lj-rail,
.learn-page .li-goal-bar,
.learn-page .li-most-read,
.learn-page .si-controls,
.learn-page .li-content,
.learn-page .li-footer-note,
.learn-page .lj-breadcrumb,
.learn-page .lj-paths,
.learn-page .lj-cta-section,
.learn-page .legal-body > * {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--column-max);
  margin-inline: auto;
  padding-inline: var(--column-gutter);
}
/* Boxed blocks (a fill or a rule of their own) sit on the CONTENT edge, so
   their border lines up with the text above and below instead of the gutter. */
.learn-page main > .lo-quiz,
.learn-page main > #learn-progress-nudge-mount {
  box-sizing: border-box;
  max-width: calc(var(--column-max) - 2 * var(--column-gutter));
  margin-inline: max(var(--column-gutter), calc((100% - var(--column-max)) / 2 + var(--column-gutter)));
}
/* A rule under a column block is drawn across the content only, not the
   gutters (a border-bottom would run 20px past the text on both sides). */
.learn-page .disclaimer-banner,
.learn-page .lm-masthead {
  border-bottom: 0;
  background-image: linear-gradient(var(--border-default), var(--border-default));
  background-repeat: no-repeat;
  background-position: var(--column-gutter) 100%;
  background-size: calc(100% - 2 * var(--column-gutter)) 1px;
}

/* ── 2. Chrome inside the column: disclaimer and breadcrumbs (Small) ────── */
.learn-page .disclaimer-banner {
  /* stock-page.css paints this banner a gold wash and centres it; here it is
     a left-aligned line of the column, its hairline drawn under the text. */
  background-color: transparent;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--type-small);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-block: var(--space-3);
}
.learn-page .disclaimer-banner a { color: var(--gold-link); text-decoration: underline; text-underline-offset: 2px; }
.learn-page .lm-page > .sp-breadcrumb,
.learn-page .lj-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--text-secondary);
  background: transparent;
  border-bottom: 0;
  padding-block: var(--space-3) 0;
}
.learn-page .lm-page > .sp-breadcrumb a[href],
.learn-page .lj-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  letter-spacing: 0;
  color: var(--text-secondary);
  text-decoration: none;
}
.learn-page .lm-page > .sp-breadcrumb a[href]:hover,
.learn-page .lj-breadcrumb-link:hover { color: var(--gold-link); text-decoration: underline; }
.learn-page .lm-page > .sp-breadcrumb .sp-breadcrumb-sep { color: var(--text-secondary); margin: 0 var(--space-1); }
.learn-page .lm-page > .sp-breadcrumb .sp-breadcrumb-current { color: var(--text-primary); font-weight: 400; }

/* ── 3. Headings: one treatment per level ─────────────────────────────────
   H1 Title (52, 32 on phones). H2 24 regular Georgia with a hairline under it,
   the same everywhere on the family -- lesson sections, the quiz, the FAQ, the
   practice challenge, the related list, the hub's level headings and
   "Curated journeys", the journey and course list heads, the track clusters.
   H3 18 semibold. Nothing else is styled as a heading. */
.learn-page .lm-masthead-title,
.learn-page .li-hero-h1,
.learn-page .legal-body > h1 {
  font-family: var(--font-brand);
  font-size: var(--type-title);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--text-primary);
}
/* The masthead and hero titles sit inside a column block; the track H1 is
   one (section 18), so it must not take these. */
.learn-page .lm-masthead-title,
.learn-page .li-hero-h1 {
  max-width: none;
  margin: 0 0 var(--space-5);
}
.learn-page .lm-section-heading,
.learn-page .lm-quiz-heading,
.learn-page .lm-related-heading,
.learn-page .lm-practice-title,
.learn-page .lm-faq-heading,
.learn-page .li-level-title,
.learn-page .lj-rail-title,
.learn-page .lj-paths-title,
.learn-page .legal-body h2 {
  font-family: var(--font-brand);
  font-size: var(--type-h2);
  font-weight: 400;
  font-variant: normal;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  margin: 0 0 var(--rhythm-head);
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 88px;
}
/* The section number is a Label above the title. It is aria-hidden (it only
   numbers; the visible title is the heading's accessible name), matches the
   rail's TOC numbers, and sits 4px above the title. */
.learn-page .lm-section-num {
  display: block;
  font-family: var(--font-data);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold-link);
  margin: 0 0 var(--space-1);
}
.learn-page .lm-md-h2,
.learn-page .lm-md-h3,
.learn-page .sp-faq-item h3,
.learn-page .li-course-title,
.learn-page .lj-card-title,
.learn-page .lj-path-title {
  font-family: var(--font-brand);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-2);
}
.learn-page .lm-section-md > .lm-md-h2:first-child,
.learn-page .lm-section-md > .lm-md-h3:first-child,
.learn-page .li-course-title,
.learn-page .lj-card-title,
.learn-page .lj-path-title { margin-top: 0; }

/* ── 4. Labels: 12 mono caps, the floor of the scale ───────────────────── */
.learn-page .lm-masthead-eyebrow,
.learn-page .lm-listen,
.learn-page .lm-quiz-eyebrow,
.learn-page .lm-nav-eyebrow,
.learn-page .lm-sidebar-eyebrow,
.learn-page .lm-sidebar-toc-num,
.learn-page .lm-sidebar-next-eyebrow,
.learn-page .lm-quiz-stats dt,
.learn-page .lm-related-num,
.learn-page .lm-summary-eyebrow,
.learn-page .lm-practice-eyebrow,
.learn-page .lm-ai-prompts-header,
.learn-page .lm-practice-more-header,
.learn-page .lm-mastery-eyebrow,
.learn-page .lm-checkin-tag,
.learn-page .lm-minichart-label,
.learn-page .lm-minichart-source,
.learn-page .lm-deck-progress,
.learn-page .lm-deck-exit,
.learn-page .li-level-stat,
.learn-page .li-lessons > li::before,
.learn-page .lj-level-chip,
.learn-page .lj-path-level,
.learn-page .lj-hero-meta,
.learn-page .lj-card-meta,
.learn-page .lj-path-num,
.learn-page .lj-path-meta,
.learn-page .lj-track-chip-hint,
.learn-page .lj-resume-cta-eyebrow,
.learn-page .lj-resume-tile-head,
.learn-page .lj-resume-tile-arrow,
.learn-page .lo-quiz-eyebrow,
.learn-page .lm-body-main p.lm-mastery-eyebrow {
  font-family: var(--font-data);
  font-size: var(--type-label);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  opacity: 1;
}
/* Label ink: gold for kickers, the AA muted tier for meta. Never --text-muted
   (3.54:1 on cream) and never the dim greys (LQ-F9). */
.learn-page .lm-masthead-eyebrow,
.learn-page .lm-listen,
.learn-page .lm-quiz-eyebrow,
.learn-page .lm-sidebar-next-eyebrow,
.learn-page .lm-practice-eyebrow,
.learn-page .lm-ai-prompts-header,
.learn-page .lm-practice-more-header,
.learn-page .lm-mastery-eyebrow,
.learn-page .lm-body-main p.lm-mastery-eyebrow,
.learn-page .lm-quiz-stats dt.lm-stat-permission,
.learn-page .lj-resume-cta-eyebrow,
.learn-page .lm-deck-exit { color: var(--gold-link); }
.learn-page .lm-sidebar-eyebrow,
.learn-page .lm-sidebar-toc-num,
.learn-page .lm-quiz-stats dt,
.learn-page .lm-related-num,
.learn-page .lm-summary-eyebrow,
.learn-page .lm-minichart-label,
.learn-page .lm-minichart-source,
.learn-page .lm-deck-progress,
.learn-page .li-level-stat,
.learn-page .li-lessons > li::before,
.learn-page .lj-hero-meta,
.learn-page .lj-card-meta,
.learn-page .lj-path-num,
.learn-page .lj-path-meta,
.learn-page .lj-resume-tile-arrow,
.learn-page .lo-quiz-eyebrow { color: var(--text-muted-body); }
.learn-page .lm-quiz-stats dt.lm-stat-permission { color: var(--gold-link); }
.learn-page .lj-resume-tile-head { color: var(--text-link); }

/* ── 5. The lesson: masthead ────────────────────────────────────────────── */
.learn-page .lm-masthead { padding-block: var(--space-10) var(--space-8); }
.learn-page .lm-masthead-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
}
.learn-page .lm-listen { margin-left: 0; }
.learn-page .lm-listen[hidden] { display: none; }
.learn-page .lm-masthead-lead,
.learn-page .li-hero-lead,
.learn-page .lj-hero-lead {
  font-family: var(--font-brand);
  font-size: var(--type-lede);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin: 0;
}
.learn-page .lm-masthead-lead strong { color: var(--text-primary); }
.learn-page .lm-masthead-quiz-anchor {
  align-items: center;
  min-height: var(--space-6);
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  color: var(--gold-text);
}

/* ── 6. The lesson: two tracks inside the one column ─────────────────────
   >= 1024: 620 + 40 + 260 = 920. Below, one track; the rail hides as before. */
/* The tracks themselves are learn-module-extras.css's .lm-body-grid rule
   (620 + 40 + 260), which its <= 1023 query collapses to one; this sheet
   sets only the block padding, so it never outranks that query. */
.learn-page .lm-body-grid { padding-block: var(--space-10); }
.learn-page .lm-body-main {
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
}

/* ── 7. The lesson: prose ───────────────────────────────────────────────
   Body 16 Georgia at the reading leading 1.75, capped at the 54ch measure
   (about 69 characters), left on the column edge. No block carries its own
   width or inset (LQ-F4: 720 -> 701 between blocks). */
.learn-page .lm-body-main p,
.learn-page .lm-body-main li,
.learn-page .lm-section-tryit-body,
.learn-page .lm-section-livemetric-body {
  font-family: var(--font-brand);
  font-size: var(--type-body);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  max-width: var(--measure-prose);
}
.learn-page .lm-body-main p { margin: 0 0 var(--space-6); }
.learn-page .lm-body-main p:last-child { margin-bottom: 0; }
.learn-page .lm-body-main strong { color: var(--text-primary); font-weight: 600; }
.learn-page .lm-section-md ul,
.learn-page .lm-section-md ol {
  margin: 0 0 var(--rhythm-block);
  padding-left: var(--space-5);
  max-width: var(--measure-prose);
}
.learn-page .lm-section-md li { margin: 0 0 var(--space-2); }
.learn-page .lm-section-md code { font-size: var(--type-small); }
/* The drop cap moves from 56 to the title role (52). */
.learn-page .lm-body-main > .lm-section-block:first-child p.lm-section-intro::first-letter { font-size: var(--type-title); }
/* Key insight: the Lede pull quote between two hairlines (was 20). */
.learn-page .lm-body-main p.lm-section-keyinsight {
  font-size: var(--type-lede);
  font-style: italic;
  line-height: 1.55;
  color: var(--text-primary);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  margin: 0 0 var(--rhythm-block);
}
/* The narrated-section marker is a 2px rule drawn 12px left of the block,
   so the text it marks never moves (it was a 2px border with a negative
   margin that pulled the block 20px left). */
.learn-page .lm-section-block.lm-narrating {
  position: relative;
  border-left: 0;
  padding-left: 0;
  margin-left: 0;
}
.learn-page .lm-section-block.lm-narrating::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--space-3));
  width: var(--space-0-5);
  background: var(--gold-link);
}

/* ── 8. The lesson: section rhythm ──────────────────────────────────────
   Section to section 40; H2 -> first block 16; block to block 16; paragraph
   to paragraph 24. */
.learn-page .lm-section-block { margin: var(--rhythm-section) 0 0; }
.learn-page .lm-body-main > .lm-section-block:first-child { margin-top: 0; }
.learn-page .lm-section-formula,
.learn-page .lm-section-callout,
.learn-page .lm-section-checkin,
.learn-page .lm-section-tryit,
.learn-page .lm-section-livemetric,
.learn-page .lm-section-summary,
.learn-page .lm-section-reveal,
.learn-page .lm-section-md,
.learn-page .lm-section-minichart,
.learn-page .lm-section-table-wrap,
.learn-page .lm-section-block > table.lm-section-table {
  margin: 0 0 var(--rhythm-block);
}

/* ── 9. Block devices: callout, formula, summary, reveal ─────────────────
   One device for every aside: a 1px gold rule on the left, a 12px inset, no
   fill (the 13F callout). Block titles are Body 600, not headings. */
.learn-page .lm-section-callout,
.learn-page .lm-section-formula {
  border-left: 1px solid var(--rule-accent);
  padding: 0 0 0 var(--space-3);
  background: transparent;
}
.learn-page .lm-callout-title,
.learn-page .lm-table-title,
.learn-page .lm-reveal-title,
.learn-page .lm-reveal-stage-title {
  font-family: var(--font-brand);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.learn-page .lm-reveal-stage-title { margin-top: var(--space-4); }
.learn-page .lm-section-callout p { margin: 0 0 var(--space-3); }
.learn-page .lm-section-callout p:last-child { margin-bottom: 0; }
.learn-page .lm-section-summary {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-3);
}
.learn-page .lm-summary-eyebrow { margin: 0 0 var(--space-2); }
.learn-page .lm-reveal-step {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-3);
  margin: 0 0 var(--rhythm-block);
}
.learn-page .lm-reveal-step:last-child { margin-bottom: 0; }
/* Formulas: Body 16 mono, wrapped at spaces only, each line a hanging indent
   so a continuation reads as part of its line (140 of 154 formula lines run
   past ~36 characters, so wrapping is the phone norm). A single token wider
   than the column scrolls inside the formula's own labelled region. */
.learn-page .lm-formula {
  font-family: var(--font-data);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: normal;
  overflow-wrap: normal;
  word-break: normal;
  overflow-x: auto;
  margin: 0 0 var(--space-3);
  padding: 0;
  background: transparent;
}
.learn-page .lm-formula-line {
  display: block;
  padding-left: 2ch;
  text-indent: -2ch;
}
.learn-page .lm-formula-vars {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}
.learn-page .lm-formula-vars li {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 var(--space-1);
}
.learn-page .lm-formula-vars strong { font-family: var(--font-data); font-weight: 600; color: var(--text-primary); }
.learn-page .lm-section-formula p { font-size: var(--type-body); margin: 0; }

/* ── 10. Tables (13F density) ─────────────────────────────────────────────
   Cells Small 14 with 8 x 12 padding, th a Label in --font-ui, hairline
   rows, no zebra. Every table scrolls inside its named region. */
.learn-page .lm-section-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.learn-page .lm-section-table-wrap > table.lm-section-table { margin: 0; }
.learn-page table.lm-section-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.45;
}
.learn-page table.lm-section-table th {
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-2) var(--space-3);
}
.learn-page table.lm-section-table td {
  font-size: var(--type-small);
  color: var(--text-primary);
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
}
.learn-page table.lm-section-table td.lm-num {
  font-family: var(--font-data);
  font-variant-numeric: var(--tabular-nums);
  text-align: right;
}
.learn-page .lm-body-main p.lm-table-note {
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: var(--space-2) 0 var(--rhythm-block);
}

/* ── 11. Check-ins and the quiz: one option box, one set of states ───────
   The quiz's <button> options and the check-ins' <label> rows share this
   block, so a third option style cannot appear. The whole row is the target;
   a result is a border colour plus a text tag, never opacity (LQ-B2). */
.learn-page .lm-quiz-option,
.learn-page .lm-checkin-option {
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: 2px;
  font-family: var(--font-brand);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}
.learn-page .lm-quiz-option:hover,
.learn-page .lm-checkin-option:hover {
  border-color: var(--gold-link);
  border-left-color: var(--gold-link);
}
.learn-page .lm-checkin-option:has(:focus-visible) {
  outline: 2px solid var(--gold-link);
  outline-offset: 2px;
}
/* The result states, one set for both option families. CHAOS 2026-11-08:
   the box rule above re-declares border and background at (0,2,0) and is
   linked last, so it out-ranked learn-module-extras.css's equal-specificity
   state rules -- every answered option (right, wrong, the revealed answer)
   painted exactly like an unanswered one. The states are restated here,
   after :hover, so a marked row keeps its colour under the pointer too.
   Pinned by tests/test_learn_format_pass_contract.py (rendered, both themes). */
.learn-page .lm-quiz-option.lm-correct,
.learn-page .lm-checkin-option[data-checkin-mark="right"],
.learn-page .lm-checkin-option[data-checkin-mark="answer"] {
  border-color: var(--gold-brand);
  border-left-color: var(--gold-brand);
  background: var(--gold-bg);
}
.learn-page .lm-quiz-option.lm-correct { font-weight: 600; }
.learn-page .lm-quiz-option.lm-incorrect,
.learn-page .lm-checkin-option[data-checkin-mark="chosen"] {
  border-color: var(--text-negative);
  border-left-color: var(--text-negative);
  background: var(--negative-bg);
}
/* An option that was not picked after the last attempt is out of play: it
   stays unclickable (learn-module-extras.css) but keeps AA ink instead of
   0.45 opacity, which put its text near 2.9:1 (spec section 6: state is a
   border and a tag, never opacity). */
.learn-page .lm-quiz-option.lm-dimmed { opacity: 1; color: var(--text-secondary); }
/* The quiz's result mark (a 1em mask, right: 14px) needs its own lane, or a
   long option's last line runs under it. */
.learn-page .lm-quiz-option { padding-right: var(--space-10); }
.learn-page .lm-quiz-options,
.learn-page .lm-checkin-options { gap: var(--space-2); }
.learn-page .lm-checkin-q,
.learn-page .lm-quiz-question,
.learn-page .lm-body-main p.lm-checkin-q,
.learn-page .lm-body-main p.lm-quiz-question {
  font-family: var(--font-brand);
  font-size: var(--type-lede);
  line-height: 1.55;
  color: var(--text-primary);
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-3);
}
.learn-page .lm-checkin-radio { flex: none; width: var(--space-6); height: var(--space-6); margin: 0; }
.learn-page .lm-checkin-letter {
  font-family: var(--font-data);
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--text-muted-body);
}
.learn-page .lm-checkin-tag { font-weight: 600; color: var(--text-primary); }
.learn-page .lm-checkin-submit {
  min-height: 44px;
  margin-top: var(--space-4);
  padding: var(--space-2-5) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 600;
  border: 1px solid var(--gold-link);
  border-radius: 2px;
}
.learn-page .lm-checkin-submit[hidden] { display: none; }
.learn-page .lm-body-main .lm-checkin-status {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--space-3) 0 0;
}
.learn-page .lm-body-main .lm-checkin-status:empty { margin: 0; }
.learn-page .lm-body-main .lm-checkin-hint,
.learn-page .lm-checkin-explanation {
  font-family: var(--font-brand);
  font-size: var(--type-body);
  line-height: var(--leading-loose);
  max-width: var(--measure-prose);
  margin: var(--space-3) 0 0;
  padding: 0 0 0 var(--space-3);
  border-left: 1px solid var(--rule-accent);
  background: transparent;
}
.learn-page .lm-body-main .lm-checkin-hint { color: var(--text-secondary); }
/* 212 of the 248 public explanations are several paragraphs separated by a
   blank line, and the server explanation of an apply check arrives as plain
   text; without this every one collapsed into a single run (CHAOS 2026-11-08). */
.learn-page .lm-checkin-explanation { color: var(--text-primary); white-space: pre-line; }
.learn-page .lm-checkin-reveal { margin: var(--space-3) 0 0; }
.learn-page .lm-checkin-reveal summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--gold-text);
}
.learn-page .lm-body-main .lm-checkin-nojs,
.learn-page .lm-body-main .lm-checkin-account,
.learn-page .lm-body-main .lm-mastery-sub {
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--text-secondary);
}
.learn-page .lm-body-main .lm-mastery-eyebrow { margin: 0 0 var(--space-1); }
.learn-page .lm-body-main .lm-mastery-sub { margin: 0 0 var(--space-3); }

/* The quiz: a section on the full track, its heading on the same left edge
   as every other H2 (it was a padded card, so its H2 sat 25px in); one H2
   ("Check your understanding") under its Label ("Quiz · 1 question"). */
.learn-page .lm-quiz {
  padding: 0;
  margin: var(--rhythm-section) 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.learn-page .lm-quiz-header { margin: 0 0 var(--space-1); }
.learn-page .lm-quiz-reveal,
.learn-page .lm-quiz-mastery-explanation,
.learn-page .lm-quiz-next-step-hint {
  font-family: var(--font-brand);
  font-size: var(--type-body);
  font-style: normal;
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  max-width: var(--measure-prose);
}
.learn-page .lm-quiz-mastery-explanation,
.learn-page .lm-quiz-next-step-hint {
  padding: 0 0 0 var(--space-3);
  border-left: 1px solid var(--rule-accent);
  background: transparent;
}
.learn-page .lm-quiz-signup-nudge {
  font-size: var(--type-small);
  line-height: 1.55;
}
.learn-page .lm-quiz-retry {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-style: normal;
  font-weight: 600;
  color: var(--gold-text);
}

/* ── 12. CTAs: one family ──────────────────────────────────────────────
   Primary = the --oxford-blue-bright card, white text (6.75:1 in both
   themes). Secondary = the same box, transparent, 1px --border-default. */
.learn-page .lm-prev-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin: var(--rhythm-section) 0;
  border: 0;
  align-items: stretch;
}
.learn-page .lm-prev-next > a,
.learn-page .lm-prev-next > .lm-nav-stub {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: var(--space-4);
  min-height: 88px;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  text-decoration: none;
  border: 1px solid var(--border-default);
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.learn-page .lm-prev-next > a.lm-nav-next-cta {
  background: var(--oxford-blue-bright);
  border-color: var(--oxford-blue-bright);
  color: var(--white);
}
.learn-page .lm-prev-next > a.lm-nav-next-cta:hover { background: var(--oxford-blue-deep); border-color: var(--oxford-blue-deep); transform: none; box-shadow: none; }
.learn-page .lm-prev-next > a:focus-visible { outline: 2px solid var(--gold-link); outline-offset: 2px; }
.learn-page .lm-nav-eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 var(--space-1); }
.learn-page .lm-nav-prev .lm-nav-eyebrow { color: var(--text-muted-body); }
.learn-page .lm-nav-title {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-brand);
  font-size: var(--type-lede);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
}
.learn-page .lm-nav-next-cta .lm-nav-title,
.learn-page .lm-prev-next > a.lm-nav-next-cta:hover .lm-nav-title { color: inherit; }
.learn-page .lm-nav-next-cta .lm-nav-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--type-lede);
  color: inherit;
}
.learn-page .lm-prev-next > .lm-nav-stub {
  display: block;
  font-family: var(--font-brand);
  font-size: var(--type-small);
  font-style: normal;
  line-height: 1.55;
  color: var(--text-secondary);
}
.learn-page .lm-nav-stub a { display: inline-flex; align-items: center; min-height: var(--space-6); color: var(--gold-text); }
/* The post-quiz door and the end-of-lesson bar take the same primary card. */
.learn-page .lm-quiz-cta { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-default); }
.learn-page .lm-cta-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  align-content: center;
  min-height: 88px;
  padding: var(--space-5) var(--space-6);
  background: var(--oxford-blue-bright);
  border: 1px solid var(--oxford-blue-bright);
  border-radius: 2px;
  color: var(--white);
  text-decoration: none;
  filter: none;
  box-shadow: none;
}
.learn-page .lm-cta-primary:hover,
.learn-page .lm-cta-primary:focus-visible { background: var(--oxford-blue-deep); filter: none; box-shadow: none; }
.learn-page .lm-cta-headline {
  grid-column: 1;
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.35;
}
.learn-page .lm-cta-sub {
  grid-column: 1;
  font-family: var(--font-ui);
  font-size: var(--type-small);
  line-height: 1.45;
  opacity: 1;
}
.learn-page .lm-cta-arrow {
  position: static;
  transform: none;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--type-lede);
}
.learn-page .lm-quiz-cta.lm-cta-wrong .lm-cta-primary {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-primary);
}
.learn-page .lm-cta-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--space-3);
  text-align: left;
  padding-block: 0 var(--space-10);
}
.learn-page .lm-cta-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2-5) var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: 600;
  border-radius: 2px;
  filter: none;
}
.learn-page .lm-cta-btn-primary,
.learn-page .lm-cta-btn-primary:hover {
  background: var(--oxford-blue-bright);
  border: 1px solid var(--oxford-blue-bright);
  color: var(--white);
  filter: none;
}
.learn-page .lm-cta-btn-primary:hover { background: var(--oxford-blue-deep); border-color: var(--oxford-blue-deep); }
.learn-page .lm-cta-btn-secondary,
.learn-page .lm-cta-btn-secondary:hover {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
.learn-page .lm-cta-btn-secondary:hover { border-color: var(--gold-link); }

/* ── 13. The rest of the lesson body ───────────────────────────────────── */
.learn-page .lm-practice-challenge {
  margin: var(--rhythm-section) 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.learn-page .lm-practice-eyebrow { margin: 0 0 var(--space-2); }
.learn-page .lm-body-main .lm-practice-summary { margin: 0 0 var(--space-4); }
.learn-page .lm-practice-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 600;
}
.learn-page .lm-body-main .lm-practice-disclosure { font-size: var(--type-small); font-style: normal; color: var(--text-secondary); margin: var(--space-3) 0 0; }
.learn-page .lm-ai-prompts-header,
.learn-page .lm-practice-more-header { margin: 0 0 var(--space-2); }
.learn-page .lm-ai-prompts li,
.learn-page .lm-practice-more li { color: var(--text-primary); }
/* FAQ: the one H2, H3 questions, Body answers on the measure. */
.learn-page .lm-faq {
  margin: var(--rhythm-section) 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.learn-page .lm-faq .sp-faq-item { padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.learn-page .lm-faq .sp-faq-item:first-of-type { border-top: 0; padding-top: 0; }
.learn-page .lm-faq p { max-width: var(--measure-prose); margin: 0; }
.learn-page .lm-faq .sp-faq-item h3 { margin: 0 0 var(--space-2); }
/* Related lessons: rows of 32 (44 on phones). */
.learn-page .lm-related { margin: 0 0 var(--space-10); }
.learn-page .lm-related-list { border-top: 0; }
.learn-page .lm-related-list li { max-width: none; }
.learn-page .lm-related-list a,
.learn-page .lm-related-list .lm-related-current {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: var(--space-8);
  padding: var(--space-2) 0;
  box-sizing: border-box;
}
.learn-page .lm-related-num { min-width: var(--space-6); }
.learn-page .lm-related-title { font-family: var(--font-brand); font-size: var(--type-body); color: var(--text-primary); }
.learn-page .lm-related-here { font-family: var(--font-brand); font-size: var(--type-small); font-style: italic; color: var(--gold-text); }
.learn-page .lp-refresh-footer { font-size: var(--type-small); color: var(--text-secondary); }
.learn-page .lm-deck-hint { font-size: var(--type-small); color: var(--text-secondary); }

/* ── 14. The rail (>= 1024) ─────────────────────────────────────────────
   Labels 12, TOC Small, no heading in the quiz teaser ("Sit with the ideas."
   is retired, LQ-F5) and no 9.5px stats. */
.learn-page .lm-sidebar-section { margin: 0 0 var(--space-8); }
.learn-page .lm-sidebar-eyebrow { margin: 0 0 var(--space-3); padding: 0 0 var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.learn-page .lm-sidebar-toc li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--text-secondary);
}
.learn-page .lm-sidebar-toc li.lm-toc-current { color: var(--text-primary); }
.learn-page .lm-sidebar-toc-num { flex: none; margin: 0; }
.learn-page .lm-sidebar-toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
}
.learn-page .lm-sidebar-glossary-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  font-size: var(--type-small);
  padding: 0;
}
.learn-page .lm-quiz-teaser { padding: var(--space-5); margin: 0 0 var(--space-6); }
.learn-page .lm-quiz-teaser .lm-sidebar-eyebrow { border-bottom: 0; padding: 0; margin: 0 0 var(--space-3); color: var(--gold-link); }
.learn-page .lm-quiz-stats { gap: var(--space-2); margin: 0 0 var(--space-3); }
.learn-page .lm-quiz-stats dd { font-family: var(--font-brand); font-size: var(--type-small); color: var(--text-primary); }
.learn-page .lm-quiz-stats dd.lm-stat-empty { color: var(--text-secondary); }
.learn-page .lm-quiz-teaser-link,
.learn-page .lm-quiz-teaser-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--gold-text);
}
.learn-page .lm-sidebar-next-eyebrow { margin: 0 0 var(--space-2); }
.learn-page .lm-sidebar-next-title {
  display: block;
  min-height: var(--space-6);
  font-family: var(--font-brand);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.4;
}

/* ── 15. The hub: hero, chips, filter ──────────────────────────────────── */
.learn-page .li-hero { padding-block: var(--space-10) var(--rhythm-section); }
.learn-page .li-hero-rule { max-width: var(--measure-prose); margin: var(--space-5) 0; }
.learn-page .li-hero-jargon-hint,
.learn-page .li-most-read {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  font-style: normal;
  line-height: 1.6;
  color: var(--text-secondary);
}
.learn-page .li-hero-jargon-hint { max-width: var(--measure-prose); margin: var(--space-3) 0 0; }
.learn-page .li-most-read { margin: 0 auto var(--space-4); }
.learn-page .li-hero-jargon-hint a,
.learn-page .li-most-read a { color: var(--gold-text); }
.learn-page .li-goal-bar,
.learn-page .lj-track-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
}
.learn-page .li-goal-bar { margin: 0 auto var(--space-4); }
.learn-page .lj-track-filter { margin: 0 0 var(--space-5); }
.learn-page .li-goal-label,
.learn-page .lj-track-filter-label {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 var(--space-1) 0 0;
}
.learn-page .li-goal-btn,
.learn-page .lj-track-chip {
  box-sizing: border-box;
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  line-height: 1.3;
  border-radius: 0;
}
.learn-page .lj-track-chip { justify-content: center; }
.learn-page .lj-track-chip-name { font-weight: inherit; }
.learn-page .lj-track-chip-hint { text-transform: none; letter-spacing: 0.02em; color: inherit; }
.learn-page .si-controls { flex-direction: column; align-items: stretch; margin: 0 auto var(--rhythm-section); }
.learn-page .si-search { box-sizing: border-box; width: 100%; min-height: 44px; font-family: var(--font-ui); font-size: var(--type-body); }
.learn-page .si-search::placeholder { color: var(--text-muted-body); }
.learn-page .li-footer-note {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.6;
  text-align: left;
  color: var(--text-secondary);
  padding-block: var(--rhythm-section) var(--space-10);
}
.learn-page .li-footer-note > * { max-width: var(--measure-prose); }
.learn-page .li-footer-note a { display: inline-flex; align-items: center; min-height: var(--space-6); color: var(--gold-text); }
.learn-page .lo-quiz-skip,
.learn-page .lo-quiz-result-dismiss { min-height: var(--space-6); font-size: var(--type-small); color: var(--text-secondary); }
.learn-page .lo-quiz-choice { min-height: 44px; font-size: var(--type-small); }
.learn-page .lo-quiz-prompt,
.learn-page .lo-quiz-result-headline { font-size: var(--type-lede); }

/* Curated journeys: cards with an H3, Small body, Label meta. */
.learn-page .lj-rail { margin: 0 auto var(--rhythm-section); }
.learn-page .lj-rail-subtitle,
.learn-page .lj-paths-subtitle {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-4);
}
.learn-page .lj-rail-grid { gap: var(--space-3); }
.learn-page .lj-card { padding: var(--space-4); gap: var(--space-2); border-radius: 2px; }
.learn-page .lj-card-summary {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--text-secondary);
}
.learn-page .lj-card-meta { margin-top: auto; padding-top: var(--space-1); }
.learn-page .lj-level-chip,
.learn-page .lj-path-level { padding: var(--space-0-5) var(--space-2); }
.learn-page .lj-resume-cta--first .lj-resume-cta-label { font-size: var(--type-lede); }
.learn-page .lj-resume-cta,
.learn-page .lj-resume-cta--first .lj-resume-cta-arrow,
.learn-page .lj-resume-tile-body { font-size: var(--type-body); }
.learn-page .lj-resume-cta--first .lj-resume-cta-arrow { font-family: var(--font-ui); font-size: var(--type-small); }

/* ── 16. The hub: level sections and courses ───────────────────────────
   A level is a section with an H2; a course an H3 linking its page, a Small
   description, and its lessons inside a native <details> (all 433 links stay
   in the DOM; Q3). A lesson row is one <li> and one link. */
.learn-page .li-content { padding-block: 0; }
.learn-page .li-level-panel {
  margin: 0 0 var(--rhythm-section);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.learn-page .li-level-panel:last-child { margin-bottom: 0; }
.learn-page .li-level-desc,
.learn-page .li-course-desc,
.learn-page .li-prereq {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  font-style: normal;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin: 0;
  padding: 0;
}
.learn-page .li-level-desc { margin: 0 0 var(--space-1); }
.learn-page .li-level-stat { margin: 0 0 var(--space-2); }
.learn-page .li-prereq { color: var(--gold-text); margin-top: var(--space-1); }
.learn-page .li-course {
  padding: var(--space-4) 0;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.learn-page .li-course:last-child { border-bottom: 0; }
.learn-page .li-course-title { margin: 0 0 var(--space-1); }
.learn-page .li-course-title-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  color: var(--text-primary);
  text-decoration: none;
}
.learn-page .li-course-title-link:hover { color: var(--text-link); text-decoration: underline; }
.learn-page .li-lessons-wrap { margin: var(--space-2) 0 0; }
.learn-page .li-lessons-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--gold-text);
  cursor: pointer;
  list-style: none;
}
.learn-page .li-lessons-summary::-webkit-details-marker { display: none; }
.learn-page .li-lessons-summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform var(--transition-fast);
}
.learn-page .li-lessons-wrap[open] > .li-lessons-summary::before { transform: rotate(90deg); }
.learn-page .li-lessons-summary:focus-visible { outline: 2px solid var(--gold-link); outline-offset: 2px; }
.learn-page .li-lessons {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  counter-reset: li-lesson;
  border-top: 1px solid var(--border-subtle);
}
.learn-page .li-lessons > li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  counter-increment: li-lesson;
  border-bottom: 1px solid var(--border-subtle);
}
.learn-page .li-lessons > li::before {
  content: counter(li-lesson, decimal-leading-zero);
  flex: none;
  min-width: var(--space-6);
}
.learn-page .li-module {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--space-8);
  padding: var(--space-1) 0;
  border: 0;
  font-family: var(--font-brand);
  font-size: var(--type-body);
  line-height: 1.4;
  color: var(--text-primary);
  text-decoration: none;
  background: transparent;
}
.learn-page .li-module:hover { color: var(--text-link); text-decoration: underline; background: transparent; }

/* ── 17. Journey and course pages ─────────────────────────────────────── */
.learn-page .lj-hero { padding-block: var(--space-8) var(--rhythm-section); }
.learn-page .lj-hero-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.learn-page .lj-paths { padding-block: 0 var(--rhythm-section); }
.learn-page .lj-paths p { font-size: var(--type-small); line-height: 1.6; }
.learn-page .lj-paths-list { gap: 0; border-top: 1px solid var(--border-subtle); }
.learn-page .lj-path-link {
  display: block;
  padding: var(--space-4) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  color: inherit;
  text-decoration: none;
}
.learn-page .lj-path-link:hover { background: transparent; border-color: var(--border-subtle); }
.learn-page .lj-path-link:hover .lj-path-title { color: var(--text-link); text-decoration: underline; }
.learn-page .lj-paths > p > a.lj-path-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  padding: 0;
  border: 0;
  color: var(--gold-text);
}
.learn-page .lj-path-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; }
.learn-page .lj-path-num { min-width: var(--space-6); font-weight: 400; }
.learn-page .lj-path-title { flex: 1 1 auto; min-width: 0; }
/* A course page's lesson rows are list rows, not cards: Body, not H3. */
.learn-page .lj-lesson-row .lj-path-link { display: flex; align-items: center; min-height: 44px; padding: var(--space-1) 0; }
.learn-page .lj-lesson-title {
  font-family: var(--font-brand);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-primary);
}
.learn-page .lj-lesson-row .lj-path-link:hover .lj-lesson-title { color: var(--text-link); text-decoration: underline; }
.learn-page .lj-path-desc {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  font-style: normal;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin: var(--space-1) 0 0 calc(var(--space-6) + var(--space-3));
}
.learn-page .lj-path-meta { margin: var(--space-1) 0 0 calc(var(--space-6) + var(--space-3)); }
.learn-page .lj-cta-section { text-align: left; padding-block: 0 var(--space-10); }
.learn-page .lj-cta-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--gold-text);
}

/* ── 18. The track hub (legal-body markup, scoped here only) ─────────── */
/* The track H1 is itself a column block, so it takes only its block margins
   here and keeps section 1's max-width and auto inline margins (CHAOS
   2026-11-08: the section 3 title rule, at (0,2,1), used to set
   `max-width: none; margin: 0` on it, which out-ranked the column rule and
   put the H1 at x=20 on a 1280 viewport while the rest sat at x=180). */
.learn-page .legal-body > h1 {
  margin-block: 0 var(--space-5);
  padding-top: var(--space-10);
}
.learn-page .legal-body > .legal-meta {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  color: var(--text-secondary);
  margin: 0 auto var(--rhythm-section);
}
.learn-page .legal-body > section { margin: 0 auto var(--rhythm-section); }
.learn-page .legal-body p,
.learn-page .legal-body li {
  font-family: var(--font-brand);
  font-size: var(--type-body);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: var(--measure-prose);
}
.learn-page .legal-body p { margin: 0 0 var(--rhythm-block); }
.learn-page .legal-body strong { color: var(--text-primary); }
.learn-page .legal-body a { display: inline-flex; align-items: center; min-height: var(--space-6); }
.learn-page .track-module-list { list-style: none; margin: 0; padding: 0; }
.learn-page .track-module-list li { padding: var(--space-1) 0; border-bottom: 1px solid var(--border-subtle); }

/* ── 19. Phones and tablets ───────────────────────────────────────────── */
@media (max-width: 719px) {
  .learn-page .lm-masthead-title,
  .learn-page .li-hero-h1,
  .learn-page .legal-body > h1 { font-size: var(--type-title-sm); }
  .learn-page .lm-masthead { padding-block: var(--space-6); }
  .learn-page .lm-body-grid { padding-block: var(--space-8); }
  .learn-page .li-hero { padding-block: var(--space-6) var(--space-8); }
  .learn-page .lj-hero { padding-block: var(--space-6) var(--space-8); }
  .learn-page .lm-body-main > .lm-section-block:first-child p.lm-section-intro::first-letter { font-size: inherit; }
  /* CTAs: one column, DOM order kept (previous, then next). */
  .learn-page .lm-prev-next { grid-template-columns: minmax(0, 1fr); }
  .learn-page .lm-cta-bar { flex-direction: column; }
  .learn-page .lm-cta-bar .lm-cta-btn { width: 100%; justify-content: center; }
  /* Chips: a two-column grid of equal-width chips, never a ragged 1-2-1
     block (LQ-F6); 44px targets. The label takes its own row. */
  .learn-page .li-goal-bar,
  .learn-page .lj-track-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .learn-page .li-goal-bar > .li-goal-label,
  .learn-page .lj-track-filter > .lj-track-filter-label { grid-column: 1 / -1; }
  .learn-page .li-goal-btn,
  .learn-page .lj-track-chip { min-height: 44px; width: 100%; padding: var(--space-2) var(--space-3); }
  /* List rows take the 44px phone target (LQ-M1). */
  .learn-page .li-module,
  .learn-page .li-lessons-summary,
  .learn-page .lm-related-list a,
  .learn-page .lm-related-list .lm-related-current { min-height: 44px; }
  .learn-page .lj-path-desc,
  .learn-page .lj-path-meta { margin-left: 0; }
  /* An answered check-in row's tag ("Your answer", "Correct answer") takes
     its own line under the option text, indented past the radio and the
     letter, instead of squeezing the text to ~145px of a 335px row. */
  .learn-page .lm-checkin-option { flex-wrap: wrap; }
  .learn-page .lm-checkin-text { flex: 1 1 0; }
  .learn-page .lm-checkin-tag:not(:empty) {
    flex: 0 0 100%;
    padding-left: calc(var(--space-6) + 2 * var(--space-3) + var(--type-small));
  }
  /* Tables: the phone density, the identifying column pinned with the 13F
     1px gradient edge. */
  .learn-page table.lm-section-table th,
  .learn-page table.lm-section-table td { padding: var(--space-2); }
  .learn-page .lm-section-table-wrap th:first-child,
  .learn-page .lm-section-table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: var(--z-base);
    background-color: var(--bg-base);
  }
  .learn-page .lm-section-table-wrap th:first-child { background-color: var(--bg-elevated); }
  .learn-page .lm-section-table-wrap td:first-child {
    background-image: linear-gradient(to left, var(--border-default) 1px, transparent 1px);
  }
}