/* ──────────────────────────────────────────────────────────────────
 * value.css — /value page
 * Phase 2C: logo overlay, single-word titles, 2.5× bullets, 5 tiers,
 * orange pitch tabs, larger Universe card fonts.
 * ────────────────────────────────────────────────────────────────── */

/* ══════════ PAGE SHELL ══════════ */
.value-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--landing-text-primary, #2B2A26);
}
.value-page > section { margin-bottom: 0; }

/* ══════════ SECTION LABEL ══════════ */
.value-section-label {
  display: block;
  text-align: center;
  font-family: 'Khand', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--landing-accent, #B64926);
  margin-bottom: 0.4rem;
}

/* ══════════ SECTION HEADLINES ══════════ */
.value-section-headline {
  font-family: 'Khand', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--landing-text-primary, #2B2A26);
  text-align: center;
  margin: 0 0 1.5rem 0;
}
.value-video .value-section-headline {
  font-size: 2.8rem;
  color: var(--landing-accent, #B64926);
}

/* ══════════ HERO ══════════ */
/* PASS 8 · 2 - the hero is the FIRST section, so `.value-page > section +
   section` never reached it and it sat flush against the page-head rule at a
   measured 0px. The two values below are that rule's own pair, so the opening
   gap now matches the rhythm every later section already keeps. */
.value-hero { margin-bottom: 2rem; margin-top: 1.75rem; padding-top: 0.5rem; }
.value-hero-header {
  text-align: left;
  margin-bottom: 1.25rem;
  padding-top: 1.5rem;
}
.value-hero-accent-bar {
  width: 48px;
  height: 4px;
  background: var(--landing-accent, #B64926);
  margin-bottom: 0.75rem;
}
.value-hero-title {
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
  margin: 0 0 0.15rem 0;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.value-hero-tagline {
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0;
}
.value-hero-stage {
  position: relative;
  background: var(--tml-primary);
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
  display: block;
  /* PASS 8 · 1D - 1.6rem 2rem -> 1.1rem 1.5rem. Padding is the last third of
     the hero's height that is neither type nor figure. */
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--tml-primary-line);
}
.value-graph-mount {
  width: 100%;
  height: 620px;
  position: relative;
}

/* ── Logo overlay (bottom-left of hero stage, with AMA button stacked under) ── */
.value-logo-overlay {
  position: static;                  /* was absolute; the stage now sizes to it */
  /* bottom: 3.25rem; — dropped with position:absolute */
  /* left: 2.5rem; — dropped with position:absolute */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  z-index: 5;
  pointer-events: none;
}
.value-logo-img {
  height: 72px;
  width: auto;
}
.value-logo-word {
  font-family: 'Khand', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
  margin-left: 2px;
}
.value-hero-stage-headline {
  font-family: 'Khand', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--tml-on-primary, #FBFDFD);
  margin: 0.55rem 0 0;
  max-width: 20ch;
}
.value-hero-stage-sub {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--tml-ink-invert, #DADCDC);
  margin: 0.7rem 0 0;
  max-width: 54ch;
}
.value-logo-overlay .value-ama-trigger {
  pointer-events: auto;
  margin-top: 0.75rem;
}

/* ══════════ ASK ME ANYTHING TRIGGER (lives in hero overlay) ══════════ */
.value-ama-trigger {
  padding: 0.65rem 1.4rem;
  background: var(--landing-accent, #B64926);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms;
}
.value-ama-trigger:hover {
  background: var(--landing-accent-deep, #8B2F15);
}

/* ══════════ MINI-RAG WIDGET ══════════ */
.value-mini-rag {
  background: var(--landing-bg, #EFECDF);
  padding: 2.5rem 2rem;
  border-radius: 10px;
  border: 1px solid var(--landing-card-border, #E8E6DC);
  margin-bottom: 1rem;
}
.value-mini-rag[hidden] { display: none; }
.value-mini-rag-container { max-width: 720px; margin: 0 auto; }
.value-mini-rag-title {
  font-family: 'Khand', sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0 0 1.5rem 0;
  text-align: center;
}
.value-mini-rag-chat {
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 10px;
  min-height: 240px;
  max-height: 480px;
  overflow-y: auto;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.value-mini-rag-empty-text {
  color: var(--landing-text-muted, #5A5A57);
  text-align: center;
  font-size: 0.92rem;
  margin: 1rem 0 1.25rem;
}
.value-mini-rag-suggestions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.value-mini-rag-suggestion {
  padding: 0.5rem 0.85rem;
  background: var(--landing-bg, #EFECDF);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 16px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.value-mini-rag-suggestion:hover {
  border-color: var(--landing-accent, #B64926);
  color: var(--landing-accent, #B64926);
}
.value-mini-rag-msg { margin-bottom: 0.85rem; display: flex; }
.value-mini-rag-msg-user { justify-content: flex-end; }
.value-mini-rag-msg-assistant { justify-content: flex-start; }
.value-mini-rag-bubble {
  padding: 0.75rem 1rem;
  border-radius: 14px;
  max-width: 85%;
  font-size: 0.92rem;
  line-height: 1.5;
}
.value-mini-rag-msg-user .value-mini-rag-bubble { background: #E8E6DE; color: var(--tml-ink); }
.value-mini-rag-msg-assistant .value-mini-rag-bubble {
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
}
.value-mini-rag-input-row { display: flex; gap: 0.5rem; align-items: center; }
.value-mini-rag-attach {
  width: 40px; height: 40px;
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}
.value-mini-rag-input {
  flex: 1;
  padding: 0.7rem 0.9rem;
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 6px;
  font-size: 0.92rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--landing-text-primary, #2B2A26);
}
.value-mini-rag-input:focus {
  outline: none;
  border-color: var(--landing-accent, #B64926);
  box-shadow: 0 0 0 3px rgba(194, 69, 28, 0.08);
}
.value-mini-rag-submit {
  padding: 0.7rem 1.25rem;
  background: var(--landing-accent, #B64926);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.value-mini-rag-submit:hover { background: var(--landing-accent-deep, #8B2F15); }

/* ══════════ EXECUTIVES / RESEARCHERS — SIDE-BY-SIDE LEDGERS ══════════
   Two equal cards in one row. Inside each: title on top, eyebrow,
   CTA, then numbered specs stacked below. Titles share color scheme
   (dark with orange period). Mobile stacks cards vertically.
*/
.value-ledgers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.ledger {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 10px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.ledger::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 4px;
  background: var(--landing-accent, #B64926);
}

.ledger-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0;
  margin-bottom: 0.5rem;
}
.ledger-title {
  font-family: 'Khand', sans-serif;
  font-size: 14rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--landing-accent, #B64926);
}
.ledger-eyebrow {
  font-family: 'Khand', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--landing-text-muted, #5A5A57);
  margin-top: 0.15rem;
}
.ledger-cta {
  margin-top: 0.6rem;
  padding: 0.5rem 1.1rem;
  background: transparent;
  color: var(--landing-accent, #B64926);
  border: 1.5px solid var(--landing-accent, #B64926);
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms;
  align-self: flex-start;
}
.ledger-cta:hover {
  background: var(--landing-accent, #B64926);
  color: white;
}

.ledger-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-top: 1px solid var(--landing-card-border, #E8E6DC);
  padding-top: 0.85rem;
}
.ledger-spec {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.7rem;
  align-items: baseline;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--landing-card-border, #E8E6DC);
}
.ledger-spec:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ledger-spec-num {
  font-family: 'Khand', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
  letter-spacing: 0.02em;
  line-height: 1;
}
.ledger-spec-body {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.ledger-spec-lead {
  font-family: 'Khand', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--landing-text-primary, #2B2A26);
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: uppercase;
}
.ledger-spec-detail {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--landing-text-muted, #5A5A57);
}

/* ══════════ PITCH BLOCK ══════════ */
.value-pitch { text-align: center; }
.value-pitch-card {
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 10px;
  padding: 0;
  background: var(--landing-card-bg, #FAFAF7);
  overflow: hidden;
}
.value-pitch-columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  min-height: 200px;
}
.value-pitch-col { padding: 0 1.75rem 2rem; }
.value-pitch-col-tab {
  display: inline-block;
  background: var(--landing-accent, #B64926);
  color: white;
  font-family: 'Khand', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.65rem 1.5rem;
  border-radius: 0 0 6px 6px;
  margin-bottom: 1.35rem;
}
.value-pitch-col p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0;
  text-align: left;
}
.value-pitch-divider {
  width: 1px;
  background: var(--landing-card-border, #E8E6DC);
}

/* ══════════ TIER CARDS (5 columns) ══════════ */
.value-tiers-intro {
  text-align: center;
  font-family: 'Khand', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--landing-text-muted, #5A5A57);
  margin: -1rem 0 1.5rem 0;
  text-transform: uppercase;
}
.value-tiers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.7rem;
}
.tier-card {
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-radius: 8px;
  padding: 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 200ms;
  position: relative;
}
.tier-card { cursor: pointer; }
.tier-card:hover { border-color: var(--tml-primary); }
.tier-card:focus-visible { outline: 2px solid var(--tml-primary); outline-offset: 2px; }
.tier-card-open {
  display: block; margin-top: 0.5rem;
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tml-primary);
}
.tier-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.2rem;
}
.tier-card-name {
  font-family: 'Khand', sans-serif;
  /* PASS 8 · 4A - 2.5rem/40px -> 38px, the h2.ai2-heading size. A card label
     outranking the section title above it inverts the hierarchy. Size only:
     the weight stays 700 and the five ramp colours below are UNCHANGED. */
  font-size: 38px;
  font-weight: 700;
  color: var(--landing-text-primary, #2B2A26);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  position: relative;
  padding-top: 0.6rem;
}
.tier-card-name::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}
.tier-card-status {
  font-family: 'Khand', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--landing-text-muted, #5A5A57);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-free    { background: #9A968B; }
.status-dot-soon    { background: #E8A33C; }
.status-dot-active  { background: #5CA271; }
.status-dot-contact { background: #4A7BA8; }
.tier-card-tagline {
  font-size: 0.72rem;
  color: var(--landing-text-muted, #5A5A57);
  font-style: italic;
  margin: 0 0 0.2rem 0;
  line-height: 1.4;
  min-height: 2em;
}
.tier-card-price {
  font-family: 'Khand', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0;
}
/* ONE control for the row, styled as the per-card toggle was. The old
   .tier-card-toggle selector is kept alongside so any surface still carrying a
   per-card button is not left unstyled mid-migration. */
.value-tiers-control { display: flex; justify-content: flex-end; margin: 0 0 0.6rem; }
.tier-expand-all,
.tier-card-toggle {
  margin-top: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: 1px solid var(--tml-primary);
  color: var(--tml-primary);
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
  transition: all 150ms;
}
.tier-card-toggle:hover {
  background: var(--landing-accent, #B64926);
  color: white;
}
.tier-card-body {
  padding-top: 0.65rem;
  border-top: 1px solid var(--landing-card-border, #E8E6DC);
  margin-top: 0.4rem;
}
.tier-card-body[hidden] { display: none; }
.tier-card-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--landing-text-primary, #2B2A26);
}
.tier-card-benefits li {
  padding-left: 0.75rem;
  margin-bottom: 0.3rem;
  position: relative;
}
.tier-card-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  background: var(--landing-accent, #B64926);
  border-radius: 50%;
}

/* ── Tier title color gradient: gray → dark orange ──
   All 5 cards share the same cream background. Titles carry the
   visual hierarchy via a 5-stop warm color ramp. */
/* TIER RAMP — the five ruled tokens and nothing else. Operator ruling
   2026-09-03. Retired from here: #8E8B82, #B67A5C, --tml-primary-press
   and #5A1E0C. The ramp is now identical on /value and the landing page. */
.tier-card-curious    .tier-card-name { color: var(--tml-ink); }
.tier-card-explorer   .tier-card-name { color: var(--tml-primary); }
.tier-card-strategist .tier-card-name { color: var(--tml-tier-strategist); }
.tier-card-executive  .tier-card-name { color: var(--tml-ramp-6); }
.tier-card-enterprise .tier-card-name { color: var(--tml-tier-enterprise); }

/* ── CARD ANATOMY ─────────────────────────────────────────────────────
   VERTICAL ALIGNMENT IS THE POINT. The price slot and the Details button
   must sit at one height across all five, so the two variable-length
   fields above them carry a fixed min-height and the button is pushed to
   the bottom with margin-top:auto. Ragged bottoms are the defect this
   prevents, and they are what min-height fixes that flex alone does not. */
/* ── CARD FACE AND ITS BAND ───────────────────────────────────────────
   REV 3 painted the whole face --tml-bg-public and failed twice: that value
   is the page ground, so the cards lost their edge against it, and Explorer
   (3.77:1) and Strategist (3.95:1) fell under 4.5:1.

   OPTION (a) of the three offered: the FACE returns to the card's own white
   surface, and a quiet tonal band sits behind the tier name and status badge
   ONLY. --tml-card-hover is a raised neutral, LIGHTER than the card, so the
   card keeps its edge against the page and every tier name gains contrast
   instead of losing it. The five ramp colours are untouched. */
.tier-card-face {
  display: flex; flex-direction: column; gap: 0.35rem;
  margin: -1.15rem -1rem 0.55rem;
  padding: 0 1rem 0;
}
.tier-card-band {
  background: var(--tml-surface-raised);
  border-bottom: 1px solid var(--tml-border);
  margin: 0 -1rem 0.6rem;
  padding: 1.15rem 1rem 0.7rem;
  border-radius: 8px 8px 0 0;
}

.tier-card-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.15rem; }
.tier-card-status,
.tier-card-value {
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 3px;
}
/* NOT --tml-bg-alt: that is the same value as the band the chip now sits on,
   which would have made it disappear. Raised surface keeps it a chip. */
.tier-card-status { color: var(--tml-ink-muted); background: var(--tml-surface-raised); }

/* BEST VALUE is a CORNER FLAG, not a badge in the row, and it is GOLD.
   --tml-gold is an operator-specified brand step with its own paired ink
   (--tml-on-gold, 8.7:1). It is deliberately NOT one of the five tier
   colours: the flag has to read as a different KIND of thing from a tier
   name, and reusing a ramp value would make it read as a sixth tier. */
.tier-card-value {
  position: absolute; top: 0; right: 0;
  color: var(--tml-on-gold); background: var(--tml-gold);
  border-radius: 0 8px 0 4px; padding: 0.2rem 0.5rem;
}
.tier-card-tagline   { min-height: 3.6em; margin: 0; }
.tier-card-narrative { min-height: 5.8em; margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--tml-ink-body); }
/* NO margin-top:auto here. MEASURED: with the bodies open it pushed the price
   down by whatever slack the card had, and the slack is the inverse of the body
   height - so the tall cards started their product blocks HIGHER than the short
   ones (executive 331px vs curious 559px). The pre-body stack is already
   identical on all five by min-height (rule 3 + name 72 + badges 20 + tagline
   41 + narrative 76 + price 24), so natural flow aligns them in both states. */
.tier-card-price     { margin: 0.2rem 0; }

/* ── PRODUCT BLOCKS ───────────────────────────────────────────────────
   New structure: three per card, always all three, always in order. The
   heading reads as a section break, not a bold bullet — smaller than the
   tier name, heavier than the bullets, with space above it. */
/* The three blocks carry a min-height PER POSITION, sized to the tallest card
   at that position, so heading 2 and heading 3 line up across the row. Measured
   open, before any of these were set:
     position 1  102 152 178 196 174  -> 196
     position 2  143 107 164 214 151  -> 214
     position 3   84  66 128 146 138  -> 146
   Bullet counts differ by tier by design, so without this the headings can only
   align by accident.
   Each floor is the measured max PLUS ONE PIXEL: at exactly the max the tallest
   card is content-driven and renders fractionally, which put headings 2 and 3
   one pixel out on executive and enterprise. One pixel of slack makes every
   block min-height-driven and the rounding disappears. */
.tier-product:nth-child(1) { min-height: 197px; }
.tier-product:nth-child(2) { min-height: 215px; }
.tier-product:nth-child(3) { min-height: 147px; }
.tier-product + .tier-product { margin-top: 14px; }
h4.tier-product-head {   /* element-qualified: public.css:30-32 `.public-body h4`
                           is (0,1,1) and was forcing these to 16px. */
  margin: 0 0 0.3rem;
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tml-ink-muted);
  border-bottom: 1px solid var(--tml-divider); padding-bottom: 0.2rem;
}
.tier-product-inherit {
  margin: 0 0 0.25rem; font-size: 0.66rem; font-style: italic;
  color: var(--tml-ink-faint);
}

/* ── Executive tier — keeps "Most Popular" tag only. No color flood. ── */
.tier-card-featured-tag {
  position: absolute;
  top: -1px;
  right: 0.75rem;
  background: var(--tml-primary-press);
  color: white;
  font-family: 'Khand', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 0 0 4px 4px;
}

/* (Enterprise reverts to the default .tier-card treatment —
   its visual distinction lives in the dark-orange .tier-card-name color.) */

/* ══════════ VIDEO PLACEHOLDER ══════════ */
.value-video { text-align: center; }
.value-video-mount {
  background: var(--tml-dark-deep);
  border-radius: 10px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(194, 69, 28, 0.2);
  position: relative;
}
.value-video-player {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}
.value-video-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  color: rgba(255,255,255,0.4);
  position: absolute;
  inset: 0;
}
/* JS toggles .is-video-failed on .value-video-mount when the <video>
   element errors. Only then does the fallback reveal. */
.value-video-mount.is-video-failed .value-video-player { display: none; }
.value-video-mount.is-video-failed .value-video-fallback { display: flex; }

.value-video-pulse {
  display: flex;
  gap: 0.6rem;
}
.value-video-pulse-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--landing-accent, #B64926);
  animation: valuePulse 1.4s ease-in-out infinite;
}
.value-video-pulse-dot:nth-child(2) { animation-delay: 0.2s; }
.value-video-pulse-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes valuePulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.value-video-fallback-text {
  font-family: 'Khand', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.value-video-caption {
  font-family: 'Khand', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0.85rem 0 0 0;
}

/* ══════════ AI² UNIVERSE LINK CARDS ══════════ */
.universe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.universe-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.35rem 1.35rem 1.1rem;
  background: var(--landing-card-bg, #FAFAF7);
  border: 1px solid var(--landing-card-border, #E8E6DC);
  border-left: 3px solid var(--landing-accent, #B64926);
  border-radius: 2px 8px 8px 2px;
  text-decoration: none;
  color: var(--landing-text-primary, #2B2A26);
  transition: all 200ms;
}
.universe-card:hover {
  border-left-color: var(--landing-accent-deep, #8B2F15);
  background: rgba(194, 69, 28, 0.03);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.universe-card-wide {
  grid-column: span 3;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.universe-card-name {
  font-family: 'Khand', sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  position: relative;
  padding-top: 0.55rem;
  line-height: 1;
}
.universe-card-name::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 3px;
  background: var(--landing-accent, #B64926);
  border-radius: 2px;
}
.universe-card-stat {
  font-family: 'Khand', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--landing-text-primary, #2B2A26);
  letter-spacing: 0.02em;
}
.universe-card-stat strong {
  font-size: 1.3rem;
  color: var(--landing-accent, #B64926);
}
.universe-card-sub {
  font-size: 0.88rem;
  color: var(--landing-text-muted, #5A5A57);
  line-height: 1.55;
  flex: 1;
}
.universe-card-cta {
  font-family: 'Khand', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--landing-accent, #B64926);
  align-self: flex-end;
  margin-top: auto;
}
.universe-card-wide .universe-card-cta {
  align-self: center;
  margin-top: 0;
}

/* ══════════ HERO GRAPH OVERLAY ══════════ */
.value-overlay-mount {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.5rem;
  z-index: 10;
  pointer-events: none;
  animation: valueOverlayFade 200ms ease-out;
}
.value-overlay-mount[hidden] { display: none; }
@keyframes valueOverlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.value-overlay-panel {
  position: relative;
  width: 380px;
  max-width: 90%;
  /* B6 — was rgba(250,250,247,.92), the same warm near-white. Token, and the
     translucency goes with it: a solid raised surface is the canonical step. */
  background: var(--tml-surface-raised);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--landing-accent, #B64926);
  border-radius: 10px;
  padding: 1.75rem 1.85rem 1.5rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  pointer-events: auto;
  animation: valuePanelSlide 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes valuePanelSlide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.value-overlay-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--landing-text-muted, #5A5A57);
  cursor: pointer;
  border-radius: 50%;
  transition: all 150ms;
}
.value-overlay-close:hover {
  background: rgba(194, 69, 28, 0.12);
  color: var(--landing-accent, #B64926);
}
.value-overlay-title {
  font-family: 'Khand', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--landing-accent, #B64926);
  margin: 0 0 0.35rem 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.value-overlay-tagline {
  font-family: 'Khand', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--landing-text-primary, #2B2A26);
  margin: 0 0 0.85rem 0;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.value-overlay-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--landing-text-muted, #5A5A57);
  margin: 0 0 1.25rem 0;
}
.value-overlay-cta {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: var(--landing-accent, #B64926);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 150ms;
}
.value-overlay-cta:hover {
  background: var(--landing-accent-deep, #8B2F15);
}

/* ══════════ RESPONSIVE ══════════ */
/* ── Featured universe card (AI² Enquire — the product) ── */
.universe-card-featured {
  background: rgba(194, 69, 28, 0.06);
  border-left-width: 5px;
}
.universe-card-featured:hover {
  background: rgba(194, 69, 28, 0.1);
}


/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1100px) {
  .value-tiers-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
  .universe-grid { grid-template-columns: 1fr; }  /* was repeat(2,1fr); 3 cards left an orphan on row 2 */
  .universe-card-wide { grid-column: span 2; }
  .value-pitch-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .value-pitch-divider { display: none; }
  .value-pitch-col {
    border-bottom: 1px solid var(--landing-card-border, #E8E6DC);
    padding-top: 0;
  }
  .value-pitch-col:last-child { border-bottom: none; }
  .value-pitch-col-tab {
    margin-top: 0;
    border-radius: 0 0 6px 6px;
  }
}
@media (max-width: 860px) {
  .value-tiers-grid { grid-template-columns: repeat(2, 1fr); }
}
/* R7 — the cross-reference button. Same object as the page's other buttons:
   the apply submit is landing.css's .contributor-signup button, and this one
   restates that treatment for an <a>, in tokens. */
.contrib-xref { margin: 1.3rem 0 0; }
.contrib-btn {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  background: var(--tml-primary);
  color: var(--tml-on-primary);
  border: 1px solid var(--tml-primary);
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-weight: 600; font-size: 0.88rem;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none;
}
.contrib-btn:hover { background: var(--tml-ramp-6); border-color: var(--tml-ramp-6); color: var(--tml-on-primary); }
.contrib-btn:focus-visible { outline: 2px solid var(--tml-primary); outline-offset: 3px; }

/* ITEM 7 — the demand framing lifted from /researchers, where it already
   ships. The operator explicitly permits the repetition across the two pages. */
h3.contrib-demand-head,
.contrib-demand-head {
  margin: 1.5rem 0 0.5rem; font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.75rem; line-height: 1.1; color: var(--tml-ink); max-width: 30ch;
}

@media (max-width: 900px) {
  .value-ledgers {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .value-hero-title { font-size: 2.4rem; }
  .value-hero-stage { min-height: 0; }  /* was 320px, sized for the removed graph */
  .value-graph-mount { height: 320px; }
  .value-logo-img { height: 48px; }
  .value-logo-word { font-size: 1rem; }
  .value-video-mount { min-height: 240px; }
  .value-tiers-grid { grid-template-columns: 1fr; }
  .universe-grid { grid-template-columns: 1fr; }
  .universe-card-wide {
    grid-column: span 1;
    flex-direction: column;
    align-items: flex-start;
  }
  .value-section-headline { font-size: 1.3rem; }
  .ledger-title { font-size: 2.4rem; }
  .ledger-spec-lead { font-size: 1.1rem; }
  .ledger-spec-detail { font-size: 0.88rem; }
}

/* ══════════ /value REBUILD 2026-09-03 ══════════
   New structure only. Every colour is a bare var(--token) — no hex, no rgba,
   no fallback. */

/* Subscribe — hero and tier section. Same control, same gate. */
.value-subscribe-btn {
  margin-top: 0.8rem;
  padding: 0.6rem 1.4rem;
  background: var(--tml-primary);
  color: var(--tml-on-primary);
  border: 1px solid var(--tml-primary);
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms;
}
.value-subscribe-btn:hover { background: var(--tml-ramp-6); border-color: var(--tml-ramp-6); }
/* ITEM 7 - the lone centred button becomes a horizontal block: the line on the
   left, the button on the right. --tml-bg-alt is one step down the neutral
   ladder from the page ground --tml-bg, which is the "slightly darker grey"
   the order asks for. Token, not a hex - and not named as one here either.
   The <button> itself is untouched, so data-ga-gate="subscriptions" and the
   hamburger.js capture-phase gate keep working exactly as before. */
/* ITEM 4 - it read as a broken banner because .value-cta-lead carried
   `flex: 1 1 auto`, so its BOX stretched to 957.6px of a 1132px strip while its
   text ended far earlier, and space-between then threw the button to the far
   edge. The lead no longer grows and the pair is centred, so they read as one
   unit; padding and type size give the block real presence. */
.value-tiers-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; margin-top: 1.4rem;
  background: var(--tml-bg-alt);
  border: 1px solid var(--tml-border);
  border-radius: 10px;
  padding: 1.75rem 2rem;
}
.value-cta-lead {
  margin: 0; flex: 0 1 auto;          /* ITEM 4C - must NOT grow */
  font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.9rem; line-height: 1.15; color: var(--tml-ink);  /* ITEM 4B - 1.35rem -> 1.9rem */
}
.value-tiers-cta .value-subscribe-btn { flex: 0 0 auto; margin-top: 0; }
/* ORDER 019 -- the "Get advice" alternative beside Subscribe. Same height, type
   and flex behaviour so the two read as a pair, but a bordered ghost rather than
   a solid fill: SUBSCRIBE STAYS DOMINANT, and is first in reading order. This is
   the same subordination .ai2-btn-ghost has to .ai2-btn-solid in the header.
   Tokens only, no hex. */
.value-advice-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  padding: 0.6rem 1.4rem;
  background: transparent;
  color: var(--tml-primary);
  border: 1px solid var(--tml-primary);
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.value-advice-btn:hover { background: var(--tml-primary); color: var(--tml-on-primary); }
@media (max-width: 700px) {
  .value-tiers-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Section 2 — the line above the three product cards. */
.value-products-line {
  margin: 0 0 0.9rem;
  font-family: 'Khand', sans-serif;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tml-ink);
}

/* Section 4 — what a dossier contains. */
.value-dossier-intro { margin: 0.2rem 0 1.1rem; color: var(--tml-ink-body); }
.dossier-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dossier-group {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border-soft);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}
.dossier-group-head {
  margin: 0 0 0.5rem;
  font-family: 'Khand', sans-serif;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tml-ink-muted);
  border-bottom: 1px solid var(--tml-divider);
  padding-bottom: 0.25rem;
}
.dossier-mod-list { list-style: none; margin: 0; padding: 0; }
.dossier-mod { display: flex; gap: 0.55rem; padding: 0.22rem 0; font-size: 0.82rem; }
.dossier-mod-num {
  flex: none; min-width: 1.7em;
  font-family: 'Khand', sans-serif; font-weight: 700;
  color: var(--tml-primary);
}
.dossier-mod-name { color: var(--tml-ink-body); }

/* Section 5 — the scoring copy lifted from truth_engine.html. */
.vs-scores-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-top: 0.9rem; }
.vs-score-card {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border-soft);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}
.vs-score-name {
  display: block; margin-bottom: 0.35rem;
  font-family: 'Khand', sans-serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--tml-primary);
}
.vs-score-desc { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--tml-ink-body); }
.vs-section-intro { margin: 0.2rem 0 0; color: var(--tml-ink-body); }

/* Section 6 — where the human sits. */
.value-human { margin-top: 1.6rem; }
.value-human-head {
  margin: 0 0 0.5rem;
  font-family: 'Khand', sans-serif;
  font-size: 1.6rem; font-weight: 700;
  color: var(--tml-ink);
}
.value-human-body { margin: 0; max-width: 68ch; line-height: 1.6; color: var(--tml-ink-body); }

@media (max-width: 900px) {
  .dossier-groups { grid-template-columns: 1fr; }
  .vs-scores-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AI² PAGE VOCABULARY — extracted from web/landing.html, 2026-09-03.
   THE REUSABLE DELIVERABLE. A sister page inherits the landing design system
   by using these classes; it does not re-derive them from the landing markup.

   EVERY landing value is a hardcoded hex. Each is mapped to its SEMANTIC token
   here — not the token that happens to share the value, of which there are
   several. Two disagreements with the landing page, both resolved in favour of
   AI2_Design_Language.md per its own precedence rule:

     ORANGE. Landing paints its solid panel #B64926. That is the SUPERSEDED
     brand orange, retired in 0f9cc5b. Design Language §2.1 names #C2451C as the
     brand colour. --tml-primary is used here; the landing page is not edited.

     INK ON ORANGE. Landing uses #FBFDFD. Design Language §2.1: "#F4F5F5 — the
     ONLY ink for an orange fill." --tml-on-primary resolves to #F4F5F5 (its
     second definition, line 144, wins), so the token already carries the ruling.

   Type follows Design Language §3, "The heading scale, with its colours":
   eyebrow = the signature meta label; heading = the 2.4rem Khand 600 record
   title; sub-line = body copy at --tml-ink-body.
   ══════════════════════════════════════════════════════════════════════════ */

.ai2-sec-head { margin-bottom: 8px; }
.ai2-eyebrow {
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600; font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--tml-primary);
  margin-bottom: 5px;
}
h2.ai2-heading,
.ai2-heading {
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600; font-size: 38px; line-height: 1.06; letter-spacing: .005em;
  margin: 0 0 5px; color: var(--tml-ink);
}
.ai2-subline {
  font-size: 15px; line-height: 1.55; color: var(--tml-ink-body);
  margin: 0 0 10px; max-width: 64ch; text-wrap: pretty;
}
.ai2-sec-rule { height: 1px; background: var(--tml-border); border-radius: 6px; }

/* Cards — the landing panel system. Three variants, one geometry. */
.ai2-panel {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-radius: 6px;
  padding: 18px;
}
/* ITEM 2 — the three cards were already equal height; the buttons sat at
   182/156/182 because card 2 carries shorter body copy and nothing pinned the
   button. Flex column + margin-top:auto pins it to the foot. No fixed height. */
.universe-grid .ai2-panel { display: flex; flex-direction: column; }
.universe-grid .ai2-panel-body { flex: 1 1 auto; }
.universe-grid .ai2-panel-btn { margin-top: auto; align-self: flex-start; }

/* PASS 8 · 5 - THE PANEL IS THE LINK.
   5B/5C: the "Explore" button is gone from the markup and the panel is an <a>,
   so the whole card carries the destination and the arrow in the top right is
   the affordance. 5D is settled by `color: inherit` on the ARROW: each panel
   variant already sets its own ink against its own ground (--tml-on-primary on
   the two orange panels, --tml-dark-ink on the Tracker), measured 4.62 / 7.64 /
   10.92:1, so the arrow cannot drift from the panel it sits on.
   5E: an <a href> is in the tab order and fires on Enter with no script. The
   focus ring is drawn OUTSIDE the panel edge so it is visible on the dark
   card as well as the light ones. */
/* NO `color` here, deliberately. `a.ai2-panel` is (0,1,1) and would outrank the
   three (0,1,0) variant rules above, flattening the panel inks into one. The
   variants keep the colour; this rule only removes the underline. */
a.ai2-panel {
  position: relative;
  text-decoration: none;
  padding-right: 46px;   /* the arrow's lane - the title must not run under it */
}
/* ══════════ ITEM 2 — THE PANEL HOVER WAS UNREADABLE ══════════
   MEASURED on all three panels: style.css:111 `a:hover { color:
   var(--tml-primary-hover) }` computes to #B22600, and since the panel became
   an <a> that generic rule repaints it on hover. Every descendant that takes
   `color: inherit` — the title, the body, the stat and the arrow — went with
   it, so the whole card turned dark orange:
     Enquire  4.62:1 -> 1.31:1
     Research 7.64:1 -> 1.26:1
     Tracker 10.92:1 -> 2.00:1
   THE FIX IS NOT A NEW HOVER COLOUR. The panel keeps its OWN ink on hover, so
   contrast is identical hovered and at rest, and the affordance is carried by
   the border lifting to that same ink plus the arrow's 3px nudge — neither of
   them orange, per the item.
   Restated PER VARIANT at (0,2,1) deliberately: `a:hover` is (0,1,1) and a
   bare `a.ai2-panel:hover` would tie the variant rules and inherit the grid's
   dark ink instead, which is the trap this file already documents above. */
a.ai2-panel:hover { border-color: currentColor; text-decoration: none; }
a.ai2-panel-orange:hover, a.ai2-panel-orange:focus,
a.ai2-panel-deep:hover,   a.ai2-panel-deep:focus   { color: var(--tml-on-primary); }
a.ai2-panel-dark:hover,   a.ai2-panel-dark:focus   { color: var(--tml-dark-ink); }
a.ai2-panel:focus-visible {
  outline: 2px solid var(--tml-primary);
  outline-offset: 3px;
}
.ai2-panel-arrow {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: 'Khand', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: inherit;
}
a.ai2-panel:hover .ai2-panel-arrow { transform: translateX(3px); }
.ai2-panel-arrow { transition: transform .14s ease; }
@media (prefers-reduced-motion: reduce) {
  .ai2-panel-arrow { transition: none; }
  a.ai2-panel:hover .ai2-panel-arrow { transform: none; }
}
.ai2-panel-orange {
  background: var(--tml-primary);
  border: 1px solid var(--tml-primary);
  color: var(--tml-on-primary);
}
/* ITEM 4 — Enquire and Research both sat on --tml-primary and read as one
   colour. --tml-ramp-3 was the obvious "lighter" step and was REJECTED: with
   its own ink it measures 4.48:1, under the bar. ramp-4 -> ramp-6 -> dark is
   the progression that separates them and keeps every ink above 4.5. */
.ai2-panel-deep {
  background: var(--tml-ramp-6);
  border: 1px solid var(--tml-ramp-6);
  color: var(--tml-on-primary);
}
.ai2-panel-deep .ai2-panel-btn { background: var(--tml-ramp-7); color: var(--tml-on-primary); }
.ai2-panel-dark {
  background: var(--tml-dark);
  border: 1px solid var(--tml-dark-alt);
  color: var(--tml-dark-ink);
}
/* ITEM 1 — style.css:97 sets `h1, h2, h3, h4, h5 { color: var(--tml-primary) }`.
   This rule never set a colour, so the title took that orange onto an orange
   panel: 1:1, invisible on two of three cards. `inherit` takes the PANEL's ink,
   which is --tml-on-primary on orange and --tml-dark-ink on dark. */
h3.ai2-panel-title,
.ai2-panel-title {
  font-family: 'Khand', sans-serif; font-weight: 700;
  font-size: 38px; line-height: 1.14; letter-spacing: .01em;
  white-space: nowrap; margin: 0; color: inherit;
}
.ai2-panel-rule { height: 3px; width: 54px; margin: 6px 0 10px; opacity: .6; background: currentColor; }

/* Stat — the large figure with its small caption, landing:330-338. */
.ai2-stat { display: flex; align-items: center; flex-wrap: nowrap; gap: 11px; margin-bottom: 6px; min-height: 52px; }
.ai2-stat-value { font-family: 'Khand', sans-serif; font-weight: 700; font-size: 44px; line-height: 1.2; flex: none; }
.ai2-stat-label {
  font-family: 'Khand', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.2;
  letter-spacing: .05em; text-transform: uppercase; align-self: center; flex: 1; min-width: 0;
}
.ai2-panel-body { font-family: 'Khand', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.28; margin-bottom: 10px; }

/* Button inside a panel — inverted fill, the panel's own ink. */
.ai2-panel-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  padding: 10px 15px; border-radius: 6px; text-decoration: none; white-space: nowrap;
}
.ai2-panel .ai2-panel-btn        { background: var(--tml-primary); color: var(--tml-on-primary); }
/* On an orange panel the button must not be the panel's own colour. Landing
   uses the press step for this; --tml-ramp-6 is that value. */
.ai2-panel-orange .ai2-panel-btn { background: var(--tml-ramp-6); color: var(--tml-on-primary); }
.ai2-panel-dark   .ai2-panel-btn { background: var(--tml-primary); color: var(--tml-on-primary); }

/* The retainer figure in the hero. The canvas sizes from its box, so the box
   must have one before the engine draws — an unsized canvas falls back to
   300x150 and the figure is drawn to the wrong footprint. */
.value-hero-fig { position: relative; width: 100%; max-width: 420px; height: 240px; margin-top: 1rem; }
.value-hero-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ══════════ DESIGN PASS 3 — SCALE ══════════
   Pass 2 alternated seven full-bleed grounds within a few percent of each other
   - 227/221/251/227/251 - which at full bleed reads as faint stripes, not
   sections. The bands are GONE. Separation is now SPACE and a hairline, inside
   the container, which is what Design Language §4 asks of a page that has no
   banner artwork to carry a ground.

   THE WASHED ORANGE IS DROPPED, not restyled. --tml-primary-wash at 10% over a
   light ground composites to a warm grey that reads as a stain on a white page.
   The section that earned emphasis gets a CONTAINED panel instead - one, on the
   dossier chain, because that section is the product. */
.value-page > section + section {
  margin-top: 1.75rem;
  padding-top: 0.5rem;
}
.value-panel {
  background: var(--tml-surface);
  border: 1px solid var(--tml-primary-line);
  border-radius: 10px;
  padding: 2rem 2.25rem 2.25rem;
}

/* ── 2 · HERO: two columns, half the height ────────────────────────────── */
.value-hero-cols {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 2rem; align-items: center;
}
/* ITEM 3 - 34px -> 56px. MEASURED: the mark paints correctly at 48.2% light ink
   and 4.62:1 on the hero, which is exactly the reversed-ink-on-orange pairing
   that AI2_Graphics_Logo_Motion.md:322 specifies - so the colour is not the
   defect and was never a recolour. The defect is SIZE: the artwork declares "Min 28px tall"
   and it was shipping at 34px. No filter, no opacity, no off-spec asset. */
.value-hero-copy .value-logo-img { height: 56px; width: auto; display: block; margin-bottom: 0.8rem; }
h2.value-hero-stage-headline {
  color: var(--tml-on-primary); margin: 0 0 0.5rem;
  /* ELEMENT-QUALIFIED (0,1,1) deliberately: public.css:30 `.public-body h2`
     is also (0,1,1) and was winning at 1.65rem/26.4px, so the bare class
     never applied - not at 4.2rem, and not at the 2.1rem before it. */
  /* PASS 8 · 1B - 4.2rem -> 2.8rem, exactly one third off. The hero was loud
     because it was BIG, not because it was orange; orange is the subscriber
     colour and stays. 44.8px is still above the 40px threshold at which DL §3
     asks for negative tracking, so the tracking below is unchanged. */
  font-size: 2.8rem;
  letter-spacing: -0.02em;    /* DL §3: Khand above 40px takes negative tracking */
  /* PASS 8 · 1E - the 20ch cap on the base rule is measured in the CURRENT
     font size, so shrinking the type shrank the measure with it and the
     headline stayed three lines deep. 26ch is still inside the copy column at
     this size (546px of 562px available) and drops it to two, which is the
     line that gets the block to half its old height. */
  max-width: 26ch;
}
.value-hero-stage-sub      { color: var(--tml-on-primary); margin: 0 0 1rem; max-width: 42ch; }
.value-hero-stage .value-subscribe-btn {
  margin-top: 0; background: var(--tml-on-primary); color: var(--tml-primary);
  border-color: var(--tml-on-primary);
}
.value-hero-stage .value-subscribe-btn:hover { background: var(--tml-surface); border-color: var(--tml-surface); }
/* The figure keeps a white panel so it reads as a chart, not a stain. */
/* PASS 8 · 1C - 230px -> 150px, shrinking with the block it sits in. The
   canvas sizes from this box, so the height IS the instruction to the drawing
   engine; it redraws at the new footprint rather than being scaled. */
.value-hero-fig {
  position: relative; width: 100%; max-width: none; height: 150px; margin: 0;
  background: var(--tml-surface-raised);
  border: 1px solid var(--tml-border);
  border-radius: 8px; padding: 10px;
}
.value-hero-fig canvas {
  position: absolute; top: 10px; left: 10px;
  width: calc(100% - 20px); height: calc(100% - 20px);
}

/* ── 3 · BENEFITS: 2x2 quadrants, not a spec sheet ─────────────────────── */
.value-quads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; }
.value-quad {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-radius: 10px;
  padding: 0.95rem 1rem 1rem;
}
.value-quad-num {
  /* ITEM 6B - a FIXED width plus tabular figures. Measured cause: Khand's
     proportional digits made "01".."04" different widths, so the titles started
     at four different x positions and no single body indent could line up with
     them. Tabular figures equalise the glyphs; the width pins the column. */
  display: block; font-family: 'Khand', sans-serif; font-weight: 700;
  font-size: 3.2rem; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  width: 3.4rem; flex: 0 0 3.4rem; text-align: left;
  color: var(--tml-primary); margin-bottom: 0;
}
h3.value-quad-head,
.value-quad-head {
  flex: 1 1 auto;
  margin: 0; font-family: 'Khand', sans-serif; font-weight: 600;
  /* 1.7x the 1.35rem it was (pass 5 item 3B). Element-qualified above because
     public.css:30 `.public-body h3` is (0,1,1) and outranks a bare class. */
  font-size: 2.295rem; line-height: 1.05; color: var(--tml-ink);
  /* ITEM 2C - the heading gets the SAME fixed box in every quadrant and its text
     sits on the floor of it. Without this the element tops read 16.7 / 16.7 /
     55.2 / 16.7: "Laser focus" is one line, so bottom-aligning it moved its BOX
     down rather than its text. Same box + bottom-aligned text = both the tops
     and the baselines line up across all four. */
  /* ITEM 2B - the heading text is TOP-aligned inside a fixed box. The previous
     model bottom-aligned it, and MEASURED that put the first line of the
     one-line heading at y 45.2 against 6.7 for the two-line ones - a 38.5px
     drop that the eye reads immediately. The BOX tops were identical at 16.2
     all along, which is why measuring boxes said "aligned" while the page
     plainly was not. Measure the text, not the container. */
  min-height: 4.85rem;
}
/* ITEM 3A - bottom alignment, not baseline. With the heading at 2.295rem and the
   number at 3.2rem their baselines sit far apart, and quadrant 4's heading wraps
   to two lines; flex-end puts every number and title on one bottom edge. */
/* ITEM 2A - MEASURED CAUSE (pass 6, 2B): this block was 77.1px tall where the
   heading wrapped to two lines (Q1/Q2/Q4) and 51.2px where it did not (Q3), so
   `flex-end` was bottom-aligning inside four boxes of DIFFERENT heights and the
   numbers landed at 42.1 / 42.1 / 16.2 / 42.1. Bottom alignment needs a shared
   floor, and there wasn't one.
   4.85rem = 77.6px = two lines of the 2.295rem heading at line-height 1.05,
   which is the tallest heading any of the four produces at this width.
   min-height, not height: if a heading ever wraps to three lines the block
   grows rather than clipping the copy. */
/* ITEM 2C - baseline, not flex-end. Flex baseline alignment puts the number on
   the same baseline as the FIRST LINE of the heading, which is the relationship
   the design wants and it holds whether the heading wraps or not. The heading
   carries the fixed height (above), so this row is the same height in all four
   quadrants and every body therefore starts at the same y. */
.value-quad-top {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin-bottom: 0.5rem;
}
/* ITEM 6 - the clamp is GONE. It was truncating three of the four bodies
   (measured: Q1 scrollH 79 vs clientH 39, Q2 and Q4 59 vs 39). Equal card height
   now comes from the grid, which stretches all four to the tallest by default -
   it does not need the clamp, and the clamp was hiding copy to get it.
   ITEM 6B - the indent lines the body up with the title, not with the number. */
.value-quad-body {
  margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--tml-ink-body);
  padding-left: calc(3.4rem + 0.6rem);
}

/* ── 4 · THE SIX GROUPS AS A CHAIN ─────────────────────────────────────── */
.dossier-chain {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
}
.chain-link { position: relative; padding: 0 0.9rem 0 0; }
.chain-link + .chain-link { padding-left: 0.9rem; }
/* the connector: the eye moves forward along it */
.chain-link:not(:last-child)::after {
  /* ITEM 8 - MEASURED: the chevron box centre sat at y 29.40 and the connector
     centre at y 26.30, so the arrow floated 3.10px below the line it points
     along. The old `top: 1.35rem` was a guess that ignored box-sizing:
     content-box, which adds the two 3px borders to the 0.6rem box.
     Anchoring to the connector's own centre and pulling back half the element's
     height is self-correcting - it stays aligned if either size changes. */
  content: ""; position: absolute; top: calc(1.55rem + 0.5px); right: -0.15rem;
  width: 0.6rem; height: 0.6rem;
  border-top: 3px solid var(--tml-primary);
  border-right: 3px solid var(--tml-primary);
  transform: translateY(-50%) rotate(45deg);
}
.chain-link::before {
  content: ""; position: absolute; top: 1.55rem; left: 0; right: 0; height: 3px;
  background: var(--tml-primary-line);
}
.chain-link:first-child::before { left: 0.9rem; }
.chain-step {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--tml-primary); color: var(--tml-on-primary);
  font-family: 'Khand', sans-serif; font-weight: 700; font-size: 1.5rem;
}
h3.chain-name,
.chain-name {
  margin: 0.9rem 0 0; font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.35rem; line-height: 1.15; color: var(--tml-ink);
}
.chain-recursion {
  margin: 1.6rem 0 0; font-size: 1rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tml-primary);
}
.chain-recursion-arrow { font-size: 1.6rem; vertical-align: -0.15rem; margin-right: 0.3rem; }

/* ── 5 · THE FOUR SCORES: four measures, four steps of the chart ramp ──── */


@media (max-width: 900px) {
  .value-hero-cols { grid-template-columns: 1fr; }
  .value-quads { grid-template-columns: 1fr; }
  .dossier-chain { grid-template-columns: 1fr 1fr; }
}

/* ══════════ ITEM 8 — THE INSTRUMENT READOUT ══════════
   Four cards were rejected three times. This is one CONTAINED panel: a gauge
   for the headline score, three bars for the rest, and the four explanations
   beneath a hairline. SVG, not canvas - no new drawing engine, and nothing
   existing renders a ring, so there was nothing to reuse. Every colour is a
   token and every one was measured on --tml-surface before it shipped. */
.readout {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-radius: 10px;
  padding: 1.6rem 1.8rem 1.8rem;
  margin-top: 1rem;
}
/* 8D — a LABEL, not a footnote. It sits at the top of the panel, above the
   numbers, because this section will be read by press. */
.readout-illustrative {
  margin: 0 0 1.1rem;
  font-family: var(--font-h, 'Khand'), Georgia, serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tml-primary);
}
.readout-top { display: grid; grid-template-columns: 260px 1fr; gap: 2.2rem; align-items: center; }

.readout-gauge { text-align: center; }
.readout-gauge svg { width: 100%; max-width: 220px; height: auto; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--tml-rule); stroke-width: 16; }
.gauge-fill  { fill: none; stroke: var(--tml-ramp-4); stroke-width: 16; stroke-linecap: round; }
.gauge-value { transform: rotate(90deg); transform-origin: 100px 100px;
  font-family: 'Khand', sans-serif; font-weight: 700; font-size: 62px;
  fill: var(--tml-ink); text-anchor: middle; }
.gauge-unit  { transform: rotate(90deg); transform-origin: 100px 100px;
  font-family: 'Khand', sans-serif; font-weight: 600; font-size: 17px;
  letter-spacing: .08em; fill: var(--tml-ink-muted); text-anchor: middle; }
.readout-gauge-label {
  display: block; margin-top: 0.5rem;
  font-family: 'Khand', sans-serif; font-weight: 700; font-size: 1.5rem;
  color: var(--tml-ramp-4);
}

.readout-bars { display: flex; flex-direction: column; gap: 1.15rem; }
.readout-bar { display: grid; grid-template-columns: 8.5rem 1fr 2.4rem; align-items: center; gap: 0.9rem; }
.bar-label {
  font-family: 'Khand', sans-serif; font-weight: 700; font-size: 1.2rem;
}
.bar-track { height: 14px; border-radius: 7px; background: var(--tml-rule); overflow: hidden; }
.bar-fill  { display: block; height: 100%; border-radius: 7px; }
.bar-value {
  font-family: 'Khand', sans-serif; font-weight: 700; font-size: 1.35rem;
  text-align: right; color: var(--tml-ink);
}
.readout-bar-2 .bar-label { color: var(--tml-amber-deep); }
.readout-bar-2 .bar-fill  { background: var(--tml-amber-deep); }
.readout-bar-3 .bar-label { color: var(--tml-ramp-5); }
.readout-bar-3 .bar-fill  { background: var(--tml-ramp-5); }
.readout-bar-4 .bar-label { color: var(--tml-ramp-7); }
.readout-bar-4 .bar-fill  { background: var(--tml-ramp-7); }

/* 8C — the four explanations, two columns, beneath a hairline. */
.readout-legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2.2rem;
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--tml-border);
}
h4.readout-def-name,
.readout-def-name {
  margin: 0 0 0.3rem;
  font-family: 'Khand', sans-serif; font-weight: 700; font-size: 1.25rem;
}
.readout-def-1 .readout-def-name { color: var(--tml-ramp-4); }
.readout-def-2 .readout-def-name { color: var(--tml-amber-deep); }
.readout-def-3 .readout-def-name { color: var(--tml-ramp-5); }
.readout-def-4 .readout-def-name { color: var(--tml-ramp-7); }
.readout-def-body { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--tml-ink-body); }

/* ══════════ ITEM 9 — THE FLYWHEEL IN THE HUMAN LAYER ══════════ */
/* ITEM 3D - THE SPILL, and it was mine: pass 5 resized .human-fig 360x260 ->
   540x390 and left this track at 360px, so a 542px panel was sitting in a 360px
   grid cell and overhanging it by 182px. The track now follows the figure.
   Square, because the engine derives the ring from min(W,H): at 540x390 the ring
   filled 64% of the height but only 46% of the width, which is what read as
   "too small" - all the empty space was horizontal. */
.human-cols { display: grid; grid-template-columns: 1fr 470px; gap: 2.2rem; align-items: center; }
/* The fw1 engine paints its own near-black ground (#1B1815, hardcoded in
   drawFw1) and draws light ink on it. On a transparent parent that reads as a
   stray black rectangle, so the figure takes the SAME card treatment the four
   flywheels already ship with on /truth-engine:20-23 - dark ground, dark-alt
   hairline, 8px radius. Reused, not invented. */
.human-fig {
  /* ITEM 10 - 1.5x of 360x260. Resized HERE, on the container: the engine reads
     its parent's computed box and falls back to 300x150 when there isn't one. */
  /* border-box: the 1px hairline is INSIDE the 470px, so the panel is exactly
     the width of its grid track. Without it the border sat outside and the
     panel overhung the track by 2px - the same class of defect as the 182px
     overhang above, just smaller. */
  position: relative; box-sizing: border-box; width: 470px; height: 470px;
  background: var(--tml-dark);
  border: 1px solid var(--tml-dark-alt);
  border-radius: 8px;
  overflow: hidden;
}
.human-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 900px) {
  .readout-top { grid-template-columns: 1fr; }
  .readout-legend { grid-template-columns: 1fr; }
  .human-cols { grid-template-columns: 1fr; }
  .human-fig { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   /CONTRIBUTORS HERO — THE ASH MODIFIER (DEC-0262)
   ══════════════════════════════════════════════════════════════════════════
   Orange grounds subscriber-facing surfaces; DARK ASH grounds contributor-
   facing ones. So /contributors gets the SAME hero component as /value and
   inverts only its ground and its inks. Everything geometric — the 1.15fr/1fr
   columns, the 2rem gap, the 1.1rem/1.5rem stage padding, the 2.8rem headline,
   the 150px figure panel — is inherited from the rules above and is NOT
   restated here, so the two heroes cannot drift apart.

   THE GROUND IS THE DEEPEST STEP, NOT THE CARD STEP. Design Language §2.4
   assigns --tml-dark-deepest to "heroes, full-bleed artwork" and --tml-dark
   to the "standard dark card". The landing page's contributor card sits on
   the card step correctly, because it IS a card; a hero takes the deeper one.

   EVERY INK IS §2.5's PAIRING FOR A DARK GROUND, and every one was measured on
   --tml-dark-deepest rather than assumed from the table, which is quoted
   against --tml-dark:
     eyebrow   --tml-accent      4.75:1   (§2.5: the structural accent on dark
                                           is the accent, never --tml-primary,
                                           which measures 2.4:1 here and fails)
     headline  --tml-dark-ink   14.95:1
     sub       --tml-dark-body  13.20:1
     button    --tml-dark-deepest on a --tml-dark-ink fill, 14.95:1
   The button is the mirror of /value's: there a near-white pill carries the
   ground's own colour as its ink. An --tml-accent FILL was measured and
   REJECTED — light ink on it is 3.50:1, under the bar. */
.value-hero-stage.value-hero-ash {
  background: var(--tml-dark-deepest);
  border-color: var(--tml-dark-line);
}
.value-hero-ash .contrib-hero-eyebrow { color: var(--tml-accent); margin-bottom: 7px; }
.value-hero-ash h2.contrib-hero-headline { color: var(--tml-dark-ink); }
.value-hero-ash .contrib-hero-sub { color: var(--tml-dark-body); max-width: 46ch; }
/* Same shape as .value-subscribe-btn — an <a>, so it needs the box explicitly. */
.value-hero-ash .contrib-hero-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: var(--tml-dark-ink);
  color: var(--tml-dark-deepest);
  border: 1px solid var(--tml-dark-ink);
  border-radius: 6px;
  font-family: 'Khand', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  transition: background 150ms;
}
.value-hero-ash .contrib-hero-btn:hover {
  background: var(--tml-dark-body); border-color: var(--tml-dark-body);
}
.value-hero-ash .contrib-hero-btn:focus-visible {
  outline: 2px solid var(--tml-accent); outline-offset: 3px;
}
/* .stub-page already contributes 24px of padding-top, so the hero adds the
   remaining 12px to land on the same 36px gap /value now keeps between the
   page-head rule and the hero. */
.contrib-hero { margin-top: 0.75rem; margin-bottom: 2rem; }

/* ══════════════════════════════════════════════════════════════════════════
   /CONTRIBUTORS — COLOUR AND WEIGHT
   ══════════════════════════════════════════════════════════════════════════
   No new graphics. No SVG, no canvas, no animation, and not one word of copy
   changed. This is colour, fill and type scale on the markup that already
   shipped at 1014c6d.

   THE DIAGNOSIS: /value carries weight because it has filled objects — an
   orange hero, filled tier cards, three solid panels, a scoring instrument.
   This page had a dark hero and then four sections of left-aligned text at one
   width, one weight and one colour. Everything below is about giving those
   sections objects to be.

   🔴 THE COLOUR BUDGET IS THE OPERATOR'S AND IT IS ABSOLUTE. Brand orange
   appears in SIX places and nowhere else: the hero eyebrow, the hero button,
   the SETTLED left rule, the licence block's border, numeral 04, and the apply
   button. Everything that used to carry orange and is NOT on that list has been
   moved to a neutral — see the eyebrow and SETTLED-label rules below. That
   overrides Design Language §2.3's "section headings are orange", which is
   noted rather than silently ignored; the budget is a later, page-specific
   operator ruling. Scoped to .contrib-page so /value keeps its own treatment. */

/* ── 1B · EVERY SECTION OPENS ON A HEAVY RULE ─────────────────────────────
   Was a 1px --tml-border hairline BELOW the previous section. It is now a 3px
   --tml-border-deep rule ABOVE the eyebrow, so each section begins on a mark
   instead of ending on one. --tml-border-deep is Design Language §2.2's "edge
   that carries lift" — the heaviest neutral edge in the system, and neutral is
   required here because the operator's budget spends orange elsewhere.

   Anchored on `section + section` rather than on the class, so the first block
   under the hero takes the mark too; `.contrib-sec:first-of-type` was tried and
   REJECTED because :first-of-type matches on the TAG, and the hero is already
   the first <section> in this container, so it matched nothing. */
.contrib-page > section + section {
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 3px solid var(--tml-border-deep);
}

/* Sections that ARE panels do not take the separator rule as well — their own
   edge is the opening mark, and two heavy lines 2rem apart reads as a mistake.
   These selectors are (0,3,0), matching the separator, and come after it, so
   they win on source order. The box is declared HERE rather than in a weaker
   (0,1,0) rule, which the separator would outrank. */
/* R2 — THE PAYMENT SECTION LOSES ITS PANEL. Items 3 and 6 of the export both
   targeted it and contradicted; item 6 wins by operator ruling. It now takes
   the same treatment as "Consulting is linear. This is not." — no panel, the
   3px separator rule above, and copy on the page ground. That satisfies item 3
   by construction: the inner box goes with it and there is no outer box left
   to replace it. Only the apply section stays a panel. */
.contrib-page > section.contrib-apply-sec {
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-radius: 6px;
  padding: 2rem 2.25rem 2.25rem;
  margin-top: 3.25rem;
}

/* ── 1A · SECTION HEADINGS GET SCALE ──────────────────────────────────────
   38px -> 48px. At 38 they sat at the same size as the tier names and the
   /value headings, which is why nothing below the hero read as a level above
   its own body copy. DL §3: Khand above 40px takes negative tracking, so the
   step up brings -0.015em with it. Element-qualified because public.css:30
   `.public-body h2` is (0,1,1). */
h2.contrib-h2 {
  font-family: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600; font-size: 48px; line-height: 1.02; letter-spacing: -0.015em;
  margin: 0 0 12px; color: var(--tml-ink); max-width: 24ch;
}
/* THE SECTION EYEBROWS LOSE THEIR ORANGE, by the budget. .ai2-eyebrow is
   --tml-primary globally; on this page only, it steps to the labels/meta ink.
   The HERO eyebrow keeps its accent — it is on the budget — and is unaffected
   because it is inside .value-hero-ash, which this selector does not reach. */
.contrib-page > .contrib-sec > .ai2-eyebrow,
.contrib-page .contrib-apply-copy .ai2-eyebrow,
.contrib-page .contrib-ask-eyebrow { color: var(--tml-ink-muted); }

.contrib-lede {
  margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.6;
  color: var(--tml-ink-muted); max-width: 60ch;
}

/* ── 2 · BODY COPY STOPS RUNNING FULL WIDTH ───────────────────────────────
   Two paragraphs at container width read as a wall. One paragraph per column,
   side by side, so each is a column of type rather than a 68ch line. */
.contrib-prose {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.75rem; margin-top: 0.4rem;
}
.contrib-prose p, .contrib-prose-p {
  margin: 0; font-size: 1rem; line-height: 1.68;
  color: var(--tml-ink-body); max-width: none; text-wrap: pretty;
}
.contrib-prose-p { max-width: 46ch; }

.contrib-quiet-link { margin: 1.1rem 0 0; font-size: 0.9rem; }
.contrib-quiet-link a {
  color: var(--tml-ink-muted); text-decoration: none;
  border-bottom: 1px solid var(--tml-border-deep);
}
.contrib-quiet-link a:hover { color: var(--tml-primary); border-bottom-color: var(--tml-primary); }
.contrib-quiet-link a:focus-visible { outline: 2px solid var(--tml-primary); outline-offset: 3px; }

.ai2-page-head-crumbonly { padding-bottom: 0; }

/* ── 3 · WHO IS ALREADY HERE ──────────────────────────────────────────── */
.contrib-who .res-profiles-grid { grid-template-columns: repeat(6, 1fr); }
.res-profile-cohort {
  justify-content: center;
  border-style: dashed;
  border-color: var(--tml-border-deep);
  background: none;
}
.res-profile-cohort-line {
  font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1rem; line-height: 1.2; text-align: center;
  color: var(--tml-ink-muted);
}

/* ── 3 · THE PAYMENT SECTION ──────────────────────────────────────────────
   The section is ONE object on --tml-surface. DL §2.2: cards must stay visibly
   above the page, #F6F8F8 on #E3E5E5, which is the step used here, and the
   payment card sits INSIDE that object.

   IT USED TO BE TWO CARDS. The dashed "being decided — with you" card and its
   copy were DELETED by operator ruling: we do not expose what we do not know,
   and if a contributor asks, the answer is "contact us". Its CSS went with it
   rather than being left orphaned, and so did .contrib-col-label — with nothing
   to be settled AGAINST, the label had no work left to do.

   DL §1.11 — a card's type is carried by a border, never by a tinted
   background; this one carries a solid 5px accent rule on its left edge.
   §1.10 governs the inner fill: #FBFDFD on #F6F8F8 is a five-unit step and is
   NOT perceptible on its own, so the card is lifted by a real
   --tml-border-deep edge as well as its ground. */
/* box declared above at (0,3,0) so it outranks the separator rule */
.contrib-split { margin-top: 1.25rem; }
.contrib-col { border-radius: 6px; }
/* 1B — one card, full width of the panel. .contrib-split keeps its name and its
   grid so nothing above needs touching; it simply resolves to a single track. */
/* R2 — the inner box goes too. What remains is the 5px accent rule and the
   copy, which is exactly the "Consulting is linear" treatment: a mark and
   words on the page ground, no card. */
.contrib-col-settled {
  background: none;
  border: none;
  border-left: 5px solid var(--tml-primary);
  padding: 0.1rem 0 0.1rem 1.35rem;
}
.contrib-col-body {
  margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--tml-ink-body);
}

/* ── 4 · THE LICENCE BLOCK OUTRANKS EVERYTHING BELOW THE HERO ─────────────
   It had a border and nothing else, so the section carrying the one thing a
   contributor actually signs was lighter than the benefit cards above it.
   It is now the only block on the page with a FILLED RAISED ground AND a 2px
   BRAND border on all four sides — the heaviest treatment available without
   inventing a device, and the licence border is on the operator's orange
   budget. --tml-surface-raised sits a full step above the page ground, and the
   2px orange edge is unmatched anywhere else below the hero. */
.contrib-ask-inner {
  background: var(--tml-surface-raised);
  border: 2px solid var(--tml-primary);
  border-radius: 6px;
  padding: 2.1rem 2.35rem 2.2rem;
}
h2.contrib-ask-h2 { margin-bottom: 1rem; }
.contrib-ask-body {
  margin: 0 0 0.9rem; max-width: 74ch;
  font-size: 1.05rem; line-height: 1.62; color: var(--tml-ink);
}
.contrib-ask-body:last-child { margin-bottom: 0; }

/* ── 5 · THE FOUR QUESTIONS BECOME NUMBERED CARDS ─────────────────────────
   2x2, each filled, each opening on a large quiet numeral.
   5B — the numeral is --tml-ink-muted on 01-03 and --tml-primary on 04, because
   "why should I go first" is the converting question and 04 is on the budget.
   --tml-ink-faint was MEASURED AND REJECTED for the quiet three: it is 3.3:1 on
   --tml-surface and the order sets a 4.5 floor with no large-text exemption.
   --tml-ink-muted is 6.03:1 on a card and still reads as quiet at this size. */
.contrib-qa {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.15rem; margin-top: 1.5rem;
}
.contrib-q {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1.1rem; align-items: start;
  background: var(--tml-surface);
  border: 1px solid var(--tml-border);
  border-radius: 6px;
  padding: 1.3rem 1.5rem 1.4rem;
}
.contrib-q-num {
  font-family: 'Khand', sans-serif; font-weight: 700;
  font-size: 2.75rem; line-height: 0.9; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tml-primary);
}
h3.contrib-q-head,
.contrib-q-head {
  margin: 0 0 0.4rem; font-family: 'Khand', sans-serif; font-weight: 600;
  font-size: 1.4rem; line-height: 1.1; color: var(--tml-ink);
}
.contrib-q-body {
  margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--tml-ink-body);
}

/* ── 6 · THE APPLY SECTION GETS A GROUND ──────────────────────────────────
   The form and its framing sat on the bare page, so the page's one action read
   as leftover rather than as a destination. The whole section is now a filled
   panel, and the form inside it takes the raised step plus a real
   --tml-border-deep edge, because §1.10 says the five-unit fill step alone is
   not perceptible. */
/* box declared above at (0,3,0) so it outranks the separator rule */
.contrib-apply-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.5rem; align-items: start;
}
.contrib-apply-copy .contrib-h2 { max-width: 18ch; }

/* ══════════ 8B — THE FOUR FORM DEFECTS, EACH WITH ITS CAUSE ══════════
   All four are pre-existing and all four come from landing.css's
   `.contributor-signup` block. MEASURED: none of them reaches /sme/register,
   which carries neither that class nor those rules.

   DEFECT 1 — TWO ORANGE BLOCKS OVER THE PASSWORD ROWS.
   CAUSE: landing.css:825 `.contributor-signup button` is (0,1,1) and sets an
   orange fill, 0.75rem/1.75rem padding and margin-top:1.5rem. password-eye.css
   `.pwd-eye-btn` is (0,1,0) and LOSES, so the eye toggle was painted as a
   submit button, shoved 24px down its own input. FIX: match the same button at
   (0,2,0) and restore its own box. */
.contributor-signup .pwd-eye-btn {
  margin-top: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--tml-ink-muted);
  letter-spacing: normal;
  text-transform: none;
}
.contributor-signup .pwd-eye-btn:hover { background: none; color: var(--tml-primary); }

/* DEFECT 2 — THE PILLAR CHECKBOXES ARE RIGHT-ALIGNED.
   CAUSE: landing.css:807 `.contributor-signup input` is (0,1,1) and sets
   width:100%. It matches input[type=checkbox] too, so each box stretched to
   the full cell and shoved its own label to the far right. */
.contributor-signup input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  accent-color: var(--tml-primary);
}
.contributor-signup .pillars-group label {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--tml-ink-body);
  justify-content: flex-start;
}

/* DEFECT 3 — THE TYPE SCALE INVERTS.
   CAUSE: landing.css:796 sets every field label to 0.72rem uppercase in the
   accent colour, against a larger input, so the loudest colour on the smallest
   type labels the quietest element. */
.contributor-signup label {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--tml-ink-muted);
  margin: 1.1rem 0 0.35rem;
}
.contributor-signup input,
.contributor-signup textarea { font-size: 0.95rem; }
.contributor-signup .field-hint {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--tml-ink-muted);
  margin-top: 0.3rem;
}

/* DEFECT 4 — A NARROW COLUMN STRANDED AT THE LEFT OF A 1180px PAGE.
   CAUSE: landing.css:788 `.contributor-signup` has max-width:580px and
   margin:1.5rem 0. FIX: it fills its own half, and the block places it.
   ITEM 6 — on the new panel it also takes the raised step and the lift edge. */
/* ══════════ 3 — THE FORM BLED PAST THE PANEL. ONE CAUSE, TWO PLACES. ══════════
   MEASURED at ffa39d6: the widest input's right edge sat at x=1333.6 while the
   panel's inner edge is x=1274 — 59.6px OUTSIDE it — and the form box itself was
   599px wide inside a 533px grid column, 66px over.

   CAUSE, and it is the same class of defect as the checkbox width bug fixed at
   1014c6d: BOTH the form and its inputs compute at `box-sizing: content-box`,
   so a `width: 100%` resolves to 100% of the CONTAINER'S CONTENT BOX and then
   adds its own padding and border ON TOP.
     form   : 533px column + 64px padding + 2px border = 599px
     input  : 533px content + 25.6px padding + 2px border = 560.6px
   Neither figure is a mistake in the width value; both are the width value plus
   a box model that was never declared. `box-sizing: border-box` makes 100% mean
   100%, and every field then sits fully inside the panel with even padding on
   both sides. Nothing about the field structure or the endpoint changes. */
.contrib-apply-form .contributor-signup {
  max-width: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  background: var(--tml-surface-raised);
  border: 1px solid var(--tml-border-deep);
}
.contributor-signup input,
.contributor-signup textarea,
.contributor-signup select { box-sizing: border-box; }
.contrib-apply-form .pillars-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 🔴 THE BACK LINK WAS THE ONE VIOLATION THE AUDIT FOUND, and it broke both
   rules at once. landing.css paints .stub-back-link in --landing-accent, which
   resolves to #B64926, so it was a SEVENTH orange element with no place on the
   operator's budget — and MEASURED against the page ground it is 4.18:1, under
   the 4.5 floor this order sets. Moving it to the labels/meta ink fixes the
   budget and the contrast in one declaration. Scoped to this page; every other
   stub page keeps its own treatment. */
.contrib-page .stub-back-link { color: var(--tml-ink-muted); }
.contrib-page .stub-back-link:hover { color: var(--tml-primary); }

@media (max-width: 900px) {
  .contrib-prose { grid-template-columns: 1fr; }
  .contrib-qa { grid-template-columns: 1fr; }
  .contrib-apply-cols { grid-template-columns: 1fr; }
}