/* src/styles/fonts.css */
/* ==========================================================================
   The three self-hosted typefaces, shared by both surfaces.

   This block is its own file because the prerendered marketing pages
   (src/marketing) need the same @font-face rules as the app but none
   of the rest of base.css. One copy of the rules, one copy of the
   files at /fonts, no CDN. See ADR-011.
   ========================================================================== */

/* Latin subsets, self-hosted so there is no runtime CDN dependency.
   Licences and provenance in public/fonts/LICENSE.md. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/archivo-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
}

/* src/styles/tokens.css */
/* ==========================================================================
   The Second Build design tokens: the "drafting table" system.

   The organising rule is one colour, one job. The previous palette used a
   single accent for navigation, actions, state, progress, decoration and
   chart series 1 simultaneously, which is why nothing on a page could
   out-rank anything else. Here:

     action  interactive things only (links, buttons, focus)
     built   progress and completion only
     here    the founder's current location only
     nav     no hue at all: ink weight plus a rule
     chart   its own six-step scale, never aliased to anything above

   Every text pair meets WCAG 2.2 AA in both themes; measured ratios are
   recorded in docs/ACCESSIBILITY.md. There is no "faint text" tier by
   design: subordinate text is smaller and set in mono, never lower
   contrast, because a faint tier is an accessibility trap.
   See docs/adr/ADR-010-visual-system.md.
   ========================================================================== */

:root {
  /* Type: three faces, one job each. Latin subsets self-hosted in
     public/fonts; the fallback stacks must stay usable on their own. */
  --font-display:
    "Archivo", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif:
    "Source Serif 4", Georgia, "Times New Roman", "Liberation Serif", serif;
  --font-mono:
    "IBM Plex Mono", "Cascadia Code", "SF Mono", Consolas, "Liberation Mono",
    Menlo, monospace;
  /* Legacy alias: base styles still set body from --font-sans. */
  --font-sans: var(--font-display);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-prose: 1.7;

  /* Tracking. Archivo is narrow, so display sizes tighten and the mono
     annotation face opens up to read as drafting lettering. */
  --track-display: -0.02em;
  --track-tight: -0.01em;
  --track-mono: 0.06em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii. Drawn sheets are squarer than app cards. */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  /* Layout */
  --sidebar-width: 232px;
  --content-max: 720px;
  --wide-max: 1180px;
  --rail-width: 260px;
  --datum-gutter: 2.75rem;

  /* Motion: one transition, used only by meter fills. */
  --motion-fill: 320ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- Light: ink on warm drafting paper ---- */
  --paper: #eae7e1;
  --sheet: #fbfaf8;
  --sheet-raised: #ffffff;
  --ink: #17202a;
  --graphite: #54606d;
  --rule: #cfc9c0;
  --rule-strong: #b2aa9e;
  /* Non-text only: the dashed "not built yet" datum segment. 3.2:1. */
  --pencil: #78818b;

  --action: #1e43c4;
  --action-strong: #16349b;
  --action-wash: #e4e9fa;
  --on-action: #ffffff;

  --built: #9a6b12;
  --built-text: #7a5410;
  --built-wash: #f2eadb;

  --here: #c2401a;
  --here-wash: #f7e6df;
  --on-here: #ffffff;

  --success: #157347;
  --success-wash: #e3f3ea;
  --warning: #8a5a00;
  --warning-wash: #fdf3d7;
  --danger: #b42318;
  --danger-wash: #fbeae9;

  --shadow-sm: 0 1px 2px rgb(30 26 20 / 0.07);
  --shadow-md: 0 6px 16px rgb(30 26 20 / 0.1);

  /* Chart scale: independent, colour-blind aware, never aliased. */
  --chart-1: #2b5fd9;
  --chart-2: #d97706;
  --chart-3: #0e9f8a;
  --chart-4: #9333ea;
  --chart-5: #dc2626;
  --chart-6: #64748b;

  color-scheme: light;
}

[data-theme="dark"] {
  /* ---- Dark: the same drawing on a dark board ---- */
  --paper: #14181c;
  --sheet: #1c2228;
  --sheet-raised: #232a32;
  --ink: #e9edf1;
  --graphite: #9ba6b2;
  --rule: #2c343d;
  --rule-strong: #3e4854;
  --pencil: #616b77;

  --action: #7fa4ff;
  --action-strong: #9dbaff;
  --action-wash: #1b2743;
  --on-action: #101725;

  --built: #d9a441;
  --built-text: #e8bc69;
  --built-wash: #2a2416;

  --here: #ff7a54;
  --here-wash: #33201a;
  --on-here: #14181c;

  --success: #4ade80;
  --success-wash: #12291c;
  --warning: #fbbf24;
  --warning-wash: #2e2510;
  --danger: #f87171;
  --danger-wash: #33191a;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-md: 0 6px 16px rgb(0 0 0 / 0.55);

  --chart-1: #6b96f2;
  --chart-2: #fbbf24;
  --chart-3: #34d399;
  --chart-4: #c084fc;
  --chart-5: #f87171;
  --chart-6: #94a3b8;

  color-scheme: dark;
}

/* src/styles/base.css */
/* ==========================================================================
   Reset, base typography, focus and accessibility utilities.
   Tokens live in tokens.css.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--paper);
  font-synthesis-weight: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--track-display);
  font-weight: 600;
}

h1 {
  font-size: var(--text-3xl);
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
  letter-spacing: var(--track-tight);
}
h4 {
  font-size: var(--text-lg);
  letter-spacing: var(--track-tight);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--action);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--action-strong);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--action-wash);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

button {
  font: inherit;
}

/* Drafting annotation: the app's third typographic tier. Subordinate text
   is smaller and lettered in mono, never lower contrast, so every string
   on screen clears AA. */
.annotation {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--graphite);
}

/* Figures line up in columns wherever they are compared. */
.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--sheet-raised);
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  top: var(--space-4);
}

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

/* src/styles/ui.css */
/* ==========================================================================
   Shared primitives: buttons, sheets, marks, meters, chips, stats.
   Tokens live in tokens.css.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */

.button-primary,
.button-secondary,
.button-subtle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: var(--text-base);
}

.button-primary {
  background: var(--action);
  color: var(--on-action);
}

.button-primary:hover {
  background: var(--action-strong);
  color: var(--on-action);
}

.button-secondary {
  background: var(--sheet-raised);
  color: var(--action);
  border-color: var(--action);
}

.button-secondary:hover {
  background: var(--action-wash);
  color: var(--action-strong);
}

.button-subtle {
  background: none;
  color: var(--graphite);
  border-color: var(--rule-strong);
}

.button-subtle:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* --- Sheet: the one card recipe ---------------------------------------- */

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* --- Mark: a mono monogram, drawn as a drafting label ------------------- */

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 1.75rem;
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-strong);
  background: var(--sheet-raised);
  color: var(--graphite);
}

.mark-built {
  border-color: var(--built);
  background: var(--built-wash);
  color: var(--built-text);
}

.mark-here {
  border-color: var(--here);
  background: var(--here);
  color: var(--on-here);
}

/* --- Chip: short state text. Never colour alone; always reads as words. -- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 0.15rem var(--space-2);
  border: 1px solid transparent;
  white-space: nowrap;
}

.chip-here {
  background: var(--here);
  color: var(--on-here);
}

.chip-built {
  background: var(--built-wash);
  color: var(--built-text);
  border-color: var(--built);
}

.chip-quiet {
  background: transparent;
  color: var(--graphite);
  border-color: var(--rule-strong);
}

/* --- Meter: progress with its value always spelled out ------------------ */

.meter {
  display: grid;
  gap: var(--space-1);
}

.meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.meter-label {
  font-size: var(--text-sm);
  color: var(--ink);
}

.meter-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-mono);
  color: var(--graphite);
  white-space: nowrap;
}

.meter-track {
  height: 6px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--built);
  transition: width var(--motion-fill);
}

.meter-complete .meter-value {
  color: var(--built-text);
}

.meter-strand .meter-track {
  height: 4px;
}

.meter-strand .meter-label {
  font-size: var(--text-sm);
  color: var(--graphite);
}

.meter-stage .meter-track {
  height: 8px;
}

/* --- Stats -------------------------------------------------------------- */

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 160px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--graphite);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stat-large {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}

/* --- Eyebrow: a drafting label above a heading -------------------------- */

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--space-2);
}

/* --- Legacy badges, restyled in place ---------------------------------- */

.badge-planned,
.badge-current,
.tag-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  border-radius: var(--radius-sm);
  padding: 0.15rem var(--space-2);
  border: 1px solid transparent;
}

.badge-planned {
  background: transparent;
  color: var(--graphite);
  border-color: var(--rule-strong);
}

.badge-current {
  background: var(--here);
  color: var(--on-here);
}

.tag-badge {
  background: var(--warning-wash);
  color: var(--ink);
  border-color: var(--warning);
  vertical-align: middle;
  margin-left: var(--space-2);
}

/* src/styles/marketing.css */
/* ==========================================================================
   The public marketing surface.

   Layered on fonts.css, tokens.css, base.css and ui.css, in that order,
   so the sheets, marks, eyebrows and buttons here are the same objects
   the app uses. Nothing in this file redefines a token or invents a
   colour: the one colour one job rule (ADR-010) holds on the marketing
   pages exactly as it does inside the product.

   These pages ship no JavaScript, so there is nothing here that depends
   on a class being toggled at runtime.
   ========================================================================== */

body {
  background: var(--paper);
  color: var(--ink);
}

.marketing {
  --gutter: var(--space-5);
  --marketing-max: 52rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* The full-bleed band layer deliberately overruns the measure. Clip
     rather than hide: clip does not create a scroll container, so the
     page never scrolls sideways and nothing inside loses sticky or
     anchor behaviour. */
  overflow-x: clip;
}

/* One centred column. The measure is set here rather than on each block
   so the masthead, the prose and the footer all line up on the same two
   edges, which is the whole point of a drawing sheet. */
.marketing main {
  flex: 1;
  width: 100%;
  max-width: var(--marketing-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- Masthead ---------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: var(--marketing-max);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  border-bottom: 2px solid var(--rule-strong);
}

.masthead-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--track-tight);
  color: var(--ink);
  text-decoration: none;
}

.masthead-brand:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.masthead-nav {
  flex: 1;
}

.masthead-nav ul,
.marketing-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.masthead-nav a {
  font-size: var(--text-sm);
  color: var(--graphite);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.masthead-nav a:hover {
  color: var(--ink);
}

/* Navigation state carries no hue: ink weight plus a rule. */
.masthead-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}

.masthead-cta {
  flex-shrink: 0;
}

@media (max-width: 47rem) {
  .masthead {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .masthead-nav {
    order: 3;
    flex-basis: 100%;
  }

  .masthead-nav ul {
    gap: var(--space-4);
  }
}

/* --- Sections ---------------------------------------------------------- */

.hero {
  padding: var(--space-8) 0 var(--space-7);
}

.hero-narrow {
  padding-bottom: var(--space-6);
}

.hero h1 {
  font-size: clamp(2rem, 5.5vw, var(--text-4xl));
  margin: var(--space-2) 0 var(--space-4);
  max-width: 20ch;
}

.hero-narrow h1 {
  max-width: 22ch;
}

.hero-body {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--graphite);
  max-width: 46ch;
}

.hero-note {
  margin-top: var(--space-3);
}

.section {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--rule);
}

.section h2 {
  margin: 0 0 var(--space-4);
  max-width: 24ch;
}

.section p {
  max-width: 62ch;
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-4);
}

.closing {
  padding-bottom: var(--space-8);
}

/* --- Calls to action --------------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --- Lists ------------------------------------------------------------- */

.plain-list,
.check-list {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  max-width: 62ch;
}

.plain-list li,
.check-list li {
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--rule);
  line-height: var(--leading-normal);
  position: relative;
}

.plain-list li::before,
.check-list li::before {
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Decorative marks, so they are spoken by nothing. */
.plain-list li::before {
  content: "";
  top: 1.35rem;
  width: var(--space-3);
  border-top: 1px solid var(--rule-strong);
}

.check-list li::before {
  content: "+";
  top: var(--space-3);
  color: var(--built-text);
}

/* --- The point of view grid -------------------------------------------- */

.claim-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.claim h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.claim p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--graphite);
  line-height: var(--leading-normal);
}

/* --- The mastery ladder ------------------------------------------------ */

.ladder {
  margin: var(--space-5) 0 0;
  padding: 0 0 0 var(--space-6);
  list-style: none;
  position: relative;
}

/* One continuous rule behind the rungs: the datum, drawn flat. */
.ladder::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.6rem;
  bottom: 0.6rem;
  border-left: 2px solid var(--rule-strong);
}

.ladder li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  position: relative;
}

.ladder-step {
  position: absolute;
  left: calc(var(--space-6) * -1);
  width: 1rem;
  text-align: center;
  background: var(--paper);
  color: var(--graphite);
}

/* --- The five stages --------------------------------------------------- */

.stage-ladder {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.stage-ladder-item {
  display: flex;
  gap: var(--space-4);
  padding: 0 0 var(--space-5);
  position: relative;
}

/* The datum: one rule, running behind every marker but the last. */
.stage-ladder-item::before {
  content: "";
  position: absolute;
  left: 0.6875rem;
  top: 1.5rem;
  bottom: 0;
  border-left: 2px solid var(--rule-strong);
}

.stage-ladder-item:last-child::before {
  display: none;
}

.stage-ladder-item:last-child {
  padding-bottom: 0;
}

.stage-ladder-mark {
  flex-shrink: 0;
  z-index: 1;
  background: var(--paper);
}

.stage-ladder-body h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
}

.stage-ladder-question {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--graphite);
  margin: 0 0 var(--space-2) !important;
}

.stage-ladder-body p:last-child {
  margin: 0 !important;
  line-height: var(--leading-normal);
}

/* --- Proof ------------------------------------------------------------- */

.proof-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin: 0 0 var(--space-4);
}

.proof-grid div {
  border-left: 2px solid var(--rule-strong);
  padding-left: var(--space-3);
}

.proof-grid dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--graphite);
}

.proof-grid dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-2xl);
}

/* --- Pricing ----------------------------------------------------------- */

.price-card {
  max-width: 34rem;
  padding: var(--space-6);
  background: var(--sheet-raised);
  box-shadow: var(--shadow-md);
}

.price-amount {
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: 1;
  margin: var(--space-2) 0 var(--space-1);
}

.price-card h2,
.price-card h3 {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-lg);
}

.price-cta,
.price-pending {
  display: inline-block;
  margin-top: var(--space-5);
}

.price-pending {
  display: block;
  border-left: 2px solid var(--rule-strong);
  padding-left: var(--space-3);
}

/* --- Curriculum -------------------------------------------------------- */



.module-head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.module-head h2 {
  margin: 0 0 var(--space-2);
}

.lesson-list {
  margin: var(--space-4) 0 0;
  padding: 0 0 0 calc(1.5rem + var(--space-4));
  list-style: none;
  counter-reset: lesson;
}

.lesson-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}

.lesson-list-title {
  line-height: var(--leading-snug);
}

/* --- Questions --------------------------------------------------------- */

.faq-list {
  margin: 0;
  max-width: 62ch;
}

.faq-entry {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--rule);
}

.faq-entry:first-child {
  padding-top: 0;
}

.faq-entry dt h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.faq-entry dd {
  margin: 0;
  line-height: var(--leading-normal);
  color: var(--graphite);
}

/* --- Legal ------------------------------------------------------------- */

.legal-prose {
  max-width: 62ch;
}

.legal-prose h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-lg);
}

.legal-prose h2:first-child {
  margin-top: 0;
}

/* --- Footer ------------------------------------------------------------ */

.marketing-footer {
  width: 100%;
  max-width: var(--marketing-max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-7);
  border-top: 2px solid var(--rule-strong);
}

.marketing-footer a {
  font-size: var(--text-sm);
  color: var(--graphite);
}

.marketing-disclaimer {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--graphite);
  max-width: 62ch;
}

/* --- Alternating bands ------------------------------------------------- */

/* The exhibits sit on the sheet, the argument sits on the paper. Two
   ground levels, so a reader can tell at a glance which sections are
   showing them something and which are telling them something. */
.band {
  position: relative;
  border-top: 0;
}

/* The tint runs to the edge of the window while the content stays on the
   measure, which is what stops the page reading as one long column. Drawn
   as a layer behind the section rather than as a background on it, so the
   section keeps its own padding and rules. */
.band::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  background: var(--sheet);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* --- Ledes ------------------------------------------------------------- */

/* The answer to the heading, in one paragraph, set larger than the body.
   This is the passage a search result or an answer engine lifts, so it is
   given the typographic weight that job deserves. */
.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink);
  max-width: 54ch;
  margin: 0 0 var(--space-5) !important;
}

/* --- The computed specimen --------------------------------------------- */

.specimen {
  margin: 0 0 var(--space-5);
}

.specimen-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.specimen-table caption {
  text-align: left;
}

.specimen-table thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--graphite);
  text-align: left;
  padding: 0 0 var(--space-2);
  border-bottom: 2px solid var(--rule-strong);
}

.specimen-table thead th:last-child {
  text-align: right;
}

/* The measurement mark: a light fill to the value and a hard rule at it,
   the way a figure on a drawing is dimensioned. Drawn as a gradient on
   the row, because a percentage width does not resolve against a table
   row and an absolutely positioned bar collapses to nothing.

   Chart scale, because a data series is not progress and it is not the
   reader's location (ADR-010). */
.specimen-table tbody tr {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--chart-1) 14%, transparent) 0 calc(var(--bar) - 2px),
    var(--chart-1) calc(var(--bar) - 2px) var(--bar),
    transparent var(--bar)
  );
}

.specimen-table tbody th {
  text-align: left;
  font-weight: 400;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.specimen-table tbody td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.specimen-flag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--graphite);
  margin-left: var(--space-2);
}

.specimen figcaption {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid var(--rule-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--graphite);
  max-width: 58ch;
}

/* --- The source ledger -------------------------------------------------- */

.source-ledger {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--space-6);
}

.source-ledger li {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

@media (max-width: 40rem) {
  .source-ledger {
    columns: 1;
  }
}

/* --- The glossary specimen ---------------------------------------------- */

.glossary-specimen {
  padding: var(--space-5);
  background: var(--sheet-raised);
}

.glossary-specimen h3 {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--text-2xl);
}

.glossary-specimen dl {
  margin: 0;
}

.glossary-specimen dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: var(--space-4);
}

.glossary-specimen dt:first-of-type {
  margin-top: 0;
}

.glossary-specimen dd {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--rule);
}

.glossary-specimen dd p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: var(--leading-prose);
}

/* --- Compact questions on the landing page ------------------------------ */

.faq-compact .faq-entry {
  padding: var(--space-4) 0;
}

.faq-compact .faq-entry h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

/* ==========================================================================
   The Founder Readiness Check.

   One screen at a time, no timer, no progress bar racing anyone. The eyebrow
   says which phase you are on and that is the whole of the pacing furniture.
   ========================================================================== */

.rc-phase {
  padding: var(--space-7) 0 var(--space-8);
  border-top: 1px solid var(--rule);
}

.rc-phase h2 {
  margin: 0 0 var(--space-4);
  max-width: 24ch;
}

.rc-phase p {
  max-width: 62ch;
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-4);
}

/* --- The two timelines, side by side ------------------------------------ */

/* Both stay on screen at once. The comparison is the argument, so hiding
   half of it behind a control would weaken the only point this phase makes. */
.rc-timelines {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: var(--space-5) 0;
}

.rc-timeline {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--sheet);
}

/* Brass is progress and completion, which is exactly what filing on time is. */
.rc-timeline-good {
  border-left-color: var(--built);
}

.rc-timeline h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}

/* Says what the figures in this column are. Currency beside a tax example is
   read as tax unless something says otherwise, and these are ordinary income
   recognized, not amounts owed. */
.rc-timeline-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-mono);
  color: var(--graphite);
  margin: 0 0 var(--space-3) !important;
  max-width: none;
}

.rc-timeline ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-timeline li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
}

.rc-timeline li .annotation {
  grid-column: 1 / -1;
}

.rc-timeline-what {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.rc-timeline-figure {
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  align-self: end;
}

.rc-punchline {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  border-left: 2px solid var(--rule-strong);
  padding-left: var(--space-4);
}

/* The source note carries the citation and the disclaimer. It uses the mono
   annotation tier for size and colour, but not its uppercasing: several lines
   of all-caps is harder to read, and a disclaimer set in a way that resists
   reading is a disclaimer being buried. */
.rc-source {
  max-width: 62ch;
  text-transform: none;
  letter-spacing: normal;
  line-height: var(--leading-normal);
}

/* --- Questions ----------------------------------------------------------- */

.rc-question {
  margin: var(--space-5) 0;
  max-width: 52rem;
}

.rc-question fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.rc-question legend {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  max-width: 52ch;
}

.rc-choice {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
  cursor: pointer;
  background: var(--sheet);
}

.rc-choice:hover {
  border-color: var(--rule-strong);
}

.rc-question fieldset:disabled .rc-choice {
  cursor: default;
  opacity: 1;
}

/* Marked after the answer is locked in. Ink weight and a rule, no hue: this
   is state, and colour here would collide with the one-colour-one-job rule. */
.rc-choice-marked {
  border-color: var(--ink);
  border-left-width: 2px;
}

.rc-verdict {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--graphite);
  white-space: nowrap;
}

.rc-explanation {
  border-left: 2px solid var(--rule-strong);
  padding-left: var(--space-4);
  margin: var(--space-4) 0 !important;
  line-height: var(--leading-normal);
}

/* --- The three input toy -------------------------------------------------- */

.rc-toy {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-5) 0;
  background: var(--sheet);
  max-width: 34rem;
}

.rc-toy h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.rc-slider {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.rc-toy-result {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-4) 0 0 !important;
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

/* --- The result ----------------------------------------------------------- */

.rc-gaps {
  margin: var(--space-5) 0;
  max-width: 62ch;
}

.rc-gaps > div {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
}

.rc-gaps dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--graphite);
}

.rc-gaps dd {
  margin: var(--space-2) 0 0;
  line-height: var(--leading-normal);
}

/* --- The no-JavaScript reading ------------------------------------------- */

.rc-static-list {
  margin: var(--space-5) 0;
  max-width: 62ch;
}

.rc-static-list > div {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
}

.rc-static-list dt {
  font-weight: 600;
  line-height: var(--leading-snug);
}

.rc-static-list dd {
  margin: var(--space-2) 0 0;
  color: var(--graphite);
  line-height: var(--leading-normal);
}

/* A control that cannot be used has to look it. The Check disables Continue
   until the reader has committed to an answer, and a disabled button styled
   like an active one reads as a broken page rather than a locked step. */
.button-primary:disabled,
.button-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}