/* ════════════════════════════════════════════════════════════════
   GLOBAL POLISH PASS (overrides) — typography & spacing rhythm
   Visual/structural improvements only; no copy changes.
   ──────────────────────────────────────────────────────────────── */

/* (Token block removed in refactor — --section-y/--section-pad/
   --measure/--measure-narrow/--eyebrow-* now live in the legacy
   alias layer at the top of this file, identical values.) */

/* Folded into the canonical rules earlier in this file (zero computed-cascade
   change, oracle-verified): h1, h2.declarative, h3, p, section, .hero,
   .hero-eyebrow, .hero h1, .pipeline, .pipeline-inner, .label, .impact-col h3,
   .impact-col p, .serves-intro h2, .research-copy h2, .btn, .headline-secondary,
   a. Rules that could not be folded without reordering across an intervening
   media/!important rule are kept here as in-place single overrides. */

/* Subline treatment is fully canonical now — .headline-secondary in
   base.css (italic EB Garamond accent, olive; individual override =
   peach). No per-hero recolour. */
.hero-content > p { max-width: var(--measure); }
.hero-lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--dark);
  margin-bottom: 18px;
  font-weight: 400;
}

.ppl {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(22px, 2.5vw, 32px);
  border-radius: var(--radius-lg);   /* .card radius (12) — pipeline signature */
  border: 1px solid var(--olive-border);
  background: #FBF7EE;
  box-shadow: 0 1px 0 var(--olive-tint), 0 24px 56px -32px rgba(58, 48, 16, 0.18);
}
.ppl-title {
  font-size: var(--text-xl);
  margin-bottom: clamp(28px, 3vw, 36px);
  color: var(--dark);
  font-weight: 500;
}

/* ─── INTRO BLOCKS — consistent eyebrow + h2 + lede pattern ──── */
.impact-headline,
.reasoning-intro,
.serves-intro,
.research-copy {
  max-width: var(--measure);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.impact-headline { max-width: var(--w-narrow); }
.reasoning-intro,
.serves-intro { max-width: var(--w-narrow); }
.impact-headline p { max-width: var(--measure); }
.reasoning-intro p,
.serves-intro p,
.research-copy p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  max-width: var(--measure);
  margin-bottom: 1em;
}

.impact .impact-headline p {
  color: var(--on-dark-body);
}

/* ─── IMPACT ─────────────────────────────────────────────────── */
.impact-cols { gap: clamp(40px, 4vw, 64px); }
.impact-col ul {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--on-dark-body);
  padding-left: 1.4em;
  margin: 0;
}
.impact-col ul li {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

/* ─── REASONING ──────────────────────────────────────────────── */
.reasoning-intro p { max-width: var(--measure); }

/* ─── GAP — give the headline + body proper measure, fix grid ─ */

/* ─── RESEARCH CTA ───────────────────────────────────────────── */
.research-grid { gap: clamp(48px, 6vw, 96px); }

/* Mobile rhythm */
/* Mobile --section-y now lives once in components.css (48px @ 720). */
@media (max-width: 720px) {
  h1 { max-width: none; }
  .research-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   PASS 2 — VISUAL UPGRADE
   Hero topo · section rhythm · numbered rail · pipeline polish ·
   stat-led gap · references aside · refined dark sections.
   ──────────────────────────────────────────────────────────────── */

/* (Token block removed in refactor — --tonal-silk/--rule/
   --rule-strong/--on-dark-* now live in the legacy alias layer at
   the top of this file, identical resolved values.) */

/* ─── 1. HERO ──────────────────────────────────────────────────
   Audit 05: hero-wave topographic background removed — it competed
   with the diptych for the eye. The hero is now claim + evidence. */

/* ─── 2. Section background rhythm ───────────────────────────── */
/* default raw silk; alternate tonal silk for separation;
   keep .impact + .regulatory dark (already so). */
/* body bg var(--rawsilk) is identical to the canonical body rule — removed (no-op). */
/* Audit 03: no dark↔silk alternation; tonal silk for soft segmentation.
   Audit §04: .research-cta is no longer the loud-spring exit — it now
   sits on tonal-silk (.surface--tonal) with spring kept only as a
   left-edge accent + submit pill (see components.css). */
/* Section grounds + silk-neighbour separator now come from the
   .surface--* system (components.css): .surface--tonal carries its own
   border-top. Set the class on the <section> in markup. */

/* ─── 3. Numbered section rail — removed ────────────────────── */

/* ─── 4. Pipeline component — quieter, more unified ────────────
   (.pipeline bg var(--rawsilk) duplicates the canonical .pipeline
   rule — removed, no-op.) */
.ppl {
  background: #FBF7EE;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--olive-tint), 0 28px 60px -36px rgba(58,48,16,0.22);
}
/* Each icon roundel carries its own stage colour (uguisu / dark / gold / peach),
   per .i1–.i4 rules above. */
/* Recolour the SVG strokes to per-stage accent. The component icons
   draw with hard-coded stroke fills, so we recolour via filter overlay
   isn't reliable; instead use accent border under each roundel. */
.stage { padding: 0 20px; }
.stage::before { display: none; }
.stage:nth-child(1) { --accent-color: var(--uguisu); }
.stage:nth-child(2) { --accent-color: var(--spring); }
.stage:nth-child(3) { --accent-color: var(--gold); }
.stage:nth-child(4) { --accent-color: var(--peach); }
.stage-title { color: var(--uguisu) !important; font-weight: 500; }

/* Connector — thin horizontal line behind roundels with a single
   chevron mid-gap, replacing the small triangle ::after */
.stages { position: relative; }
.stages::before {
  content: "";
  position: absolute;
  top: 56px; /* vertical centre of 112px roundel (no header offset now) */
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--peach);
  z-index: 0;
}
.stage { position: relative; z-index: 1; background: transparent; }
.stage:not(:last-child)::after {
  /* keep the chevron, but smaller and at the line's height */
  top: 51px;
  right: 0;
  border-left-color: var(--peach);
}
@media (max-width: 720px) {
  .stages::before { display: none; }
}

/* Chips — unify into a single quiet style with leading dot */
.chip {
  background: var(--olive-tint) !important;
  color: var(--dark) !important;
  border: 1px solid var(--rule) !important;
  font-size: var(--text-2xs);
  font-weight: 400;
  padding: 4px 10px 4px 9px;
}
.chip svg { display: none; }
.chip::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--uguisu);
  margin-right: 7px;
  vertical-align: 1px;
}
.stage:nth-child(1) .chip::before { background: var(--uguisu); }
.stage:nth-child(2) .chip::before { background: var(--spring); }
.stage:nth-child(3) .chip::before { background: var(--gold); }
.stage:nth-child(4) .chip::before { background: var(--peach); }

/* ─── 5. Gap section — stat-led ─────────────────────────────── */

/* ─── 6. References aside ───────────────────────────────────── */
/* .references is a normal section: ground via .surface--* in markup,
   padding inherited from the section spine. No border-top — the
   constellation between sections is the divider. */
.references > .container {
  max-width: var(--w-narrow);
  margin: 0 auto;
}
.references-label {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 28px;
}
.references-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ref;
  display: grid;
  gap: 20px;
}
.references-list li {
  counter-increment: ref;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--mid);
  padding-left: 32px;
  position: relative;
}
.references-list li::before {
  content: counter(ref);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-body);
  font-feature-settings: "tnum";
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--uguisu);
  letter-spacing: var(--tracking-wide);
}
.references-list a { color: var(--fg-secondary); }
.references-list em { font-family: var(--font-display); font-style: italic; }

/* in-text superscript references */
sup.ref {
  font-family: var(--font-body);
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 2px;
  color: var(--uguisu);
  font-feature-settings: "tnum";
}
sup.ref a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 0 1px;
  transition: color var(--duration-fast) var(--ease-in-out), background var(--duration-fast) var(--ease-in-out);
}
sup.ref a:hover {
  color: var(--gold);
  background: rgba(200,152,32,0.12);
}
.references-list li:target {
  background: rgba(200,152,32,0.14);
  outline: 2px solid rgba(200,152,32,0.4);
  outline-offset: 4px;
  border-radius: 3px;
  transition: background var(--duration-normal) var(--ease-in-out), outline-color var(--duration-normal) var(--ease-in-out);
}

/* ─── 7. declarative-h2 size bump folded into canonical; max-width
   kept here as an in-place override — an intervening rule reorders
   it if moved up (oracle-detected). .regulatory border-top folded. */
h2.declarative { max-width: var(--w-narrow); }

/* ─── 9. Nav lockup tightening ───────────────────────────────── */
.nav-wordmark .nav-wm-peren { letter-spacing: -0.01em; }
.nav-wordmark .nav-wm-os    { letter-spacing: 0.04em; margin-left: 1px; }
/* tighten the supporting tagline beneath wordmark */

.nav-wordmark span:not([class]) {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  opacity: 0.55;
}

/* ─── Final, mobile rhythm ───────────────────────────────────── */
@media (max-width: 720px) {
  section[data-section]:not(.hero):not(.pipeline) > .container::before {
    margin-bottom: 24px;
  }
}

/* ════════════════════════════════════════════════════════════════
   SECTION 03 — REASONING CARDS
   (The dead .pillar* rule family this block replaced has been
   removed. The inert togglePillar() in main.js is now orphaned
   JS — safe to drop in a later JS cleanup, out of scope here.)
   ──────────────────────────────────────────────────────────────── */

/* Section background — tonal-silk is already set in Pass 2; the
   self-contained restatement was a redundant no-op duplicate and
   has been removed (oracle-verified zero change). */

/* Intro block */
.reasoning-intro {
  max-width: var(--w-narrow);
  margin-bottom: clamp(44px, 5vw, 60px);
}

/* ─── 2 × 2 card grid ────────────────────────────────────────── */

/* ─── Base card — transparent, content sits on section bg ────── */

/* Accent stripe removed — per-card colour is carried by the illustration */

/* ─── Illustration tile (the only "box" that remains) ────────── */

/* ─── Text content — outside the box, part of the section ───── */

/* Ordinal — EB Garamond italic */

/* Title — EB Garamond italic */

/* Body — Space Grotesk Regular */

/* ─── Responsive ─────────────────────────────────────────────── */
/* ─── GAP stat-item: stack vertically at all sizes ──────────── */

.stage-chips { justify-content: center; }
/* ════════════════════════════════════════════════════════════════
   SECTION 05B — DATA SOURCES STRIP + OBSERVATIONAL COMMONS
   ──────────────────────────────────────────────────────────────── */

/* ─── Scientific foundations strip ──────────────────────────── */
.reasoning-data-sources {
  margin-bottom: clamp(36px, 4vw, 48px);
  padding: var(--space-6);
  background: var(--olive-tint);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.rds-label {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--uguisu);
  display: block;
  margin-bottom: 14px;
}

.rds-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.rds-chip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--olive-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.rds-chip:hover {
  border-color: var(--olive-border-strong);
  box-shadow: 0 4px 12px var(--olive-hairline);
}

.rds-chip-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.rds-chip-icon svg {
  width: 48px;
  height: 48px;
  display: block;
}

.rds-chip-id {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: #5E6B22;
  line-height: var(--leading-tight);
}

.rds-chip-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--dark);
  line-height: var(--leading-snug);
  margin-top: 2px;
}

.rds-chip-detail {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: #666;
  line-height: var(--leading-normal);
  margin-top: 4px;
}

/* Divider between foundations and feature panels */

/* Audit §02: the grounds story is two beats, not one olive wall.
   .grounds-section (surface--olive) is now a short anchor BAND holding
   only the scientific-foundations strip; the three governing-principle
   cards live in .grounds-principles (surface--tonal) so the olive reads
   as a single declarative moment. The first card sits flush to the
   section's top padding (no extra margin-top). */
.grounds-principles .reasoning-commons:first-of-type { margin-top: 0; }

/* Audit §05: How-it-works was one 1568px tonal slab. The five-principles
   block is now its own raw-silk band (.surface--silk in markup) so the
   page reads as two beats; the constellation between sections is the
   only divider — no hairline on the band edge. */

/* ─── Observational Commons coda ─────────────────────────────── */
.reasoning-commons {
  margin-top: 28px;
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  display: flex;
  align-items: center;
  gap: 28px;
}

.rcommons-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcommons-body {
  flex: 1;
  min-width: 0;
}

.rcommons-label {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--spring);
  display: block;
  margin-bottom: 8px;
}

.rcommons-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--on-dark-body);
  margin: 0;
}

.rcommons-text + .rcommons-text {
  margin-top: 14px;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rds-chips {
    grid-template-columns: repeat(2, 1fr);
  }
  .reasoning-commons {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .rds-chips {
    grid-template-columns: 1fr;
  }
  .reasoning-data-sources {
    padding: 18px 20px 20px;
  }
  .rds-chip {
    padding: 12px 14px;
  }
  .reasoning-commons {
    padding: 22px 24px;
  }
}

/* ─── ABOUT — founding-team hero (unique one-off block) ───────────
   Editorial spread: signature claim + role line span the top; the
   founder portrait and narrative sit side-by-side beneath, both
   top-aligning so photo and prose read as a pair. The .team-grid
   hook in markup is the documented growth path (add member cards
   there; no redesign). */
.about-founder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "lead     lead"
    "portrait bio";
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.about-founder__lead     { grid-area: lead; }
.about-founder__portrait { grid-area: portrait; }
.about-founder__bio      { grid-area: bio; }
.about-founder__lead h1 { margin-bottom: 14px; }
/* Role caption now lives inside .about-founder__portrait as a
   <figcaption>, sitting just below the portrait image. Same typography
   as before — uguisu olive label, small Space Grotesk Medium — only
   the position moved (was under the H2 in the lead block; now under
   the photo where it semantically belongs). */
.about-founder__role {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--uguisu);
  letter-spacing: var(--tracking-wide);
  margin: 14px 0 0;
}
.about-founder__bio .hero-lede { max-width: var(--measure); }
.about-founder__bio .hero-lede + .hero-lede { margin-top: 18px; }
.about-founder__profile-link {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
  white-space: nowrap;
}
.about-founder__profile-link:hover,
.about-founder__profile-link:focus-visible {
  color: var(--fg-link);
  border-bottom-color: var(--fg-link);
}
.about-founder__portrait { margin: 0; }
.about-founder__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 760px) {
  .about-founder {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "portrait"
      "bio";
    column-gap: 0;
    row-gap: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   LIFTED FROM INLINE <style> BLOCKS (Stage 4 of build-and-cascade
   refactor). Was duplicated across all 5 professional pages
   (index, about, how-it-works, research, who-its-for). The
   shared baseline below was identical across how-it-works,
   research, who-its-for; index added the .impact-* on-light
   variant (see overrides at bottom); about omitted .impact-*
   (no impact section) and a redundant nav-link reset.
   ═══════════════════════════════════════════════════════════ */
/* Section spine + eyebrow rhythm now live once in base.css /
   components.css (was a duplicated !important override here). */
/* ─── IMPACT SECTION REFRESH ─────────────────────────── */
.impact-cols { align-items: start; gap: clamp(48px, 5vw, 72px); }
.impact-col {
  padding-top: 0;
}
/* Audit 06/§2: motif is the column anchor — 40px glyph in a 64px
   circular ground, ~22% spring fill, 12px gap, shared optical line. */
.impact-col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.impact-col-head h3 { margin-bottom: 0; }
.impact-col-icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(168,192,96,0.22);
  border: 1px solid rgba(168,192,96,0.35);
}
.impact-col-icon svg { display: block; width: 40px; height: 40px; }
.impact-col h3 {
  font-size: 22px;
  font-weight: 500;
  color: var(--spring);
  letter-spacing: -0.005em;
  margin-bottom: 0;
  line-height: 1.25;
}
.impact-col p {
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(242,234,216,0.8);
}
.impact-col p + p { margin-top: 12px; }
.impact-col ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(242,234,216,0.8);
}
.impact-col ul li {
  position: relative;
  padding-left: 16px;
}
.impact-col ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 6px;
  height: 1px;
  background: rgba(168,192,96,0.5);
}
/* ─── AUDIENCE SIGNAL ────────────────────────────────────── */
.audience-signal {
  background: var(--rawsilk);
  padding: 48px 32px 56px;
}
.audience-signal h2 {
  margin-bottom: 28px;
  max-width: var(--w-narrow);
}
/* signal-pill rules -> css/components.css (consolidated pill vocabulary) */

/* ─── HEADLINE MEASURE CAP ──────────────────────────────── */
/* Cap plain h1 / h2 to a tight display measure. Declarative h2s
   pick up the global ~2/3-of-container cap (820px) defined in
   styles.css so they read as section openers, not headlines. */
.page-offset h1,
.page-offset h2:not(.declarative) {
  max-width: 22ch;
}
/* Allow centred / hero-context headlines to override locally if needed */

/* ─── REGULATORY — COMPACT ───────────────────────────────── */
.reg-framework-row { padding: 0; }
/* reg-pill base + hue modifiers -> css/components.css (consolidated pill vocabulary) */
.reg-arrow {
  font-size: 20px;
  font-weight: 700;
  color: var(--uguisu);
  padding: 0 6px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ─── CONTEXT (merged 03 + 04) ──────────────────────
   2026-05-21: section ground flipped from charcoal → silk (site-wide
   standard). All .ctx-* text colours below moved from light-on-dark
   (silk text on charcoal) to dark-on-light (charcoal text on silk),
   keyed to the standard tokens so future pages inherit consistently. */
.regulatory .ctx-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-olive);
  margin-bottom: 18px;
}
.regulatory .ctx-lede {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-secondary);
  max-width: 60ch;
  margin-top: 18px;
}
.ctx-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(48px, 5vw, 80px);
  align-items: stretch;
  margin-top: 56px;
}
.ctx-grid > div:first-child {
  display: flex;
  flex-direction: column;
}
.ctx-col-head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-olive);
  margin: 0 0 28px 0;
}
.ctx-stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 36px;
  flex: 1;
}
.ctx-stat {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: 30px 0;
}
.ctx-stat:first-child { padding-top: 0; }
.ctx-stat:last-child { padding-bottom: 0; }
.ctx-stat-num-wrap { display: flex; align-items: baseline; justify-content: flex-start; }
.ctx-stat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(44px, 4.8vw, 64px);
  color: var(--color-olive);
  line-height: 1;
}
.ctx-stat-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg-tertiary);
  margin: 0;
}
.ctx-stat-lead {
  font-family: var(--font-body);
  color: var(--dark);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
}
.ctx-stat-body sup.ref a { color: var(--color-olive); text-decoration: none; }

.ctx-reg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.ctx-reg-legend span {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--fg-tertiary);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ctx-reg-legend i {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.ctx-reg-legend i.sw--france  { background: var(--color-spring); }
.ctx-reg-legend i.sw--england { background: var(--color-peach); }
.ctx-reg-legend i.sw--global  { background: var(--color-gold); }
.ctx-reg-legend i.sw--other   { background: #8A8270; }
.ctx-reg-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* .ctx-* reg-pill dark-context recolours -> css/components.css (consolidated pill vocabulary) */
.ctx-reg-note {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid var(--olive-border);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ctx-reg-note > svg { flex-shrink: 0; margin-top: 2px; }
.ctx-reg-note-inner { display: flex; flex-direction: column; gap: 8px; }
.ctx-reg-note-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ctx-reg-note p {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0;
}
@media (max-width: 920px) {
  .ctx-grid { grid-template-columns: 1fr; gap: 56px; }
  .ctx-grid > div:first-child { padding-top: 0; }
  .ctx-stats { grid-template-columns: 1fr; }
  .ctx-stat { grid-template-columns: 1fr; row-gap: 8px; }
  .ctx-stat-num-wrap { justify-content: flex-start; }
}

/* ─── On-light variant for index.html ─────────────────────
   index demotes the .impact-cols ground from charcoal to silk,
   so the icon, headline, body, and bullet hue all flip from
   spring/raw-silk to olive/fg-secondary. Was inline in index.html. */
[data-page="index"] .impact-col-icon { background: rgba(94,107,34,0.10); border: 1px solid rgba(94,107,34,0.24); }
[data-page="index"] .impact-col-icon svg { color: var(--uguisu); }
[data-page="index"] .impact-col h3 { color: var(--uguisu); }
[data-page="index"] .impact-col p,
[data-page="index"] .impact-col ul { color: var(--fg-secondary); }
[data-page="index"] .impact-col ul li::before { background: rgba(94,107,34,0.55); }