/* doublegate — landing page
   Dark, dense, technical. Restrained: one accent gradient, no motion on load. */

:root {
  --bg:        var(--dg-ground);
  --bg-alt:    #0e1115;
  --panel:     var(--dg-surface);
  --line:      var(--dg-rule);
  --line-soft: #24282e;
  --ink:       var(--dg-paper);
  --ink-dim:   #a5abb3;
  --ink-faint: #8d97a9;   /* was #5f6a7d — 3.64:1 on --bg, below WCAG AA; now 6.76:1 */
  --red:       #fb7185;
  --grn:       #34d399;
  --cyn:       #22d3ee;
  --amb:       var(--dg-amber);
  --vio:       #a78bfa;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
}

/* ── institutional page identity ──────────────────────────────────────────
   One generation of rules. This block used to hold five: the old hero, the
   governed-object figure and the projection grid were laid out here and then
   laid out again lower down with different numbers, so no value had one home.
   The hero is now the same .page-hero every interior page uses, so the headline
   size lives with .page-hero and not here. */
.institutional { overflow: hidden }
.institutional .band { padding: 56px 0 }
.institutional h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; font-weight: 540; letter-spacing: -.04em }
.section-index,.architecture small,.spec-links span { font:600 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase }
.section-index { color:var(--amb); margin:0 0 14px }
.split-heading { display:grid; grid-template-columns:1fr 1fr; gap:10vw }
.section-head { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:28px }
.section-head h2 { margin: 0 }
.section-head>p { color:var(--ink-dim); max-width:46ch; margin:0 0 8px; font-size:17px }
.argument-copy { color:var(--ink-dim); font-size:18px; max-width:620px }
/* A ruled ledger: the subject in ink on the left, the sentence beside it. This
   replaced a three-across card grid, which gave the band the same shape as the
   eight around it. It also fixes the headings: "Skills with a history" is a
   category, and a category as a heading is a label the reader has to decode.
   A ledger row can name the case instead. */
.problem-ledger { margin:28px 0 0; border-top:1px solid var(--line) }
.problem-ledger>div { display:grid; grid-template-columns:minmax(0,19ch) minmax(0,1fr); gap:14px 44px; padding:22px 0; border-bottom:1px solid var(--line-soft) }
.problem-ledger dt { color:var(--ink); font-size:19px; font-weight:560; line-height:1.28; letter-spacing:-.02em; text-wrap:balance }
.problem-ledger dd { margin:0; color:var(--ink-dim); font-size:17px; line-height:1.6; max-width:72ch }
/* The page's thesis, given the pause it needs. Deliberately no band background:
   the bands either side of it already alternate, so a third surface here would
   have joined one of them and blurred the boundary it is about. The ┃┃ above it
   is that boundary — the same two rules as the gates, at the size of a heading. */
.institutional .statement { padding:104px 0 }
.statement .gate-rail { height:30px; justify-content:flex-start; gap:8px; margin-bottom:30px }
.statement .gate-rail i { width:5px }
.statement-line { margin:0; max-width:26ch; font-size:clamp(27px,3.6vw,47px); line-height:1.08; font-weight:540; letter-spacing:-.04em; text-wrap:balance }
.model-section { background:var(--bg-alt) }
.architecture { margin:0; border:1px solid var(--line); background:var(--bg); padding:42px; position:relative }
.architecture figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
/* ┃┃ — the two-boundary primitive. Placed by the routes that use it
   (.authority-route, .flow-route); this is its only declaration. */
.gate-rail { display:flex; height:92px; gap:8px; justify-content:center }
.gate-rail i { display:block; width:4px; background:var(--amb) }
.map-section { background:var(--bg-alt) }.institutional .skymap-stage,.institutional .sky-ledger { border-radius:0 }.institutional .skymap-stage { background:#090b0e }.institutional .sky-controls button { border-radius:0; backdrop-filter:none }.institutional .sky-feed .chip { border-radius:0 }
.status-table { border-top:1px solid var(--line) }.status-table>div { display:grid; grid-template-columns:150px 1fr 190px; gap:22px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line) }.status-table b { font-weight:500 }.status-table a { text-align:right; font:500 11px var(--mono) }
.final-section { background:var(--ink); color:var(--bg) }.final-section h2 { color:var(--bg) }.final-section .section-index { color:#725a28 }.final-grid { display:grid; grid-template-columns:1fr 1fr; gap:9vw }.spec-links a { color:var(--bg); display:grid; grid-template-columns:1fr auto; padding:18px 0; border-bottom:1px solid #b8b7b2 }.spec-links span { grid-column:1/-1; color:#656560 }.spec-links b { font-weight:520 }.spec-links i { font-style:normal }
@media(max-width:960px){.split-heading,.final-grid{grid-template-columns:1fr;gap:38px}.status-table>div{grid-template-columns:130px 1fr}.status-table a{grid-column:2;text-align:left}}
@media(max-width:600px){.architecture{padding:16px}.status-table>div{grid-template-columns:1fr;gap:12px}.status-table a{grid-column:1}.nav nav{gap:14px}}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* One container for the whole site. The homepage used to widen itself to 1240
   through `.institutional .wrap` while every other page stayed at 1080, so the
   homepage's headings sat 80px left of the interior pages'. One number here. */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

a { color: var(--cyn); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 13px/1.5 var(--mono); color: var(--amb); }
em { color: var(--ink); font-style: italic; }
.dim { color: var(--ink-faint); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,9,12,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 58px; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.brand { color: var(--ink); font-weight: 650; letter-spacing: -.01em; font-size: 17px; }
.brand:hover { text-decoration: none; }
.nav nav { display: flex; align-items: center; gap: 26px; }
.nav nav a { color: var(--ink-dim); font-size: 14px; }
.nav nav a:hover { color: var(--ink); text-decoration: none; }
.nav nav a.ghost {
  border: 1px solid var(--line);
  padding: 6px 13px; border-radius: 7px; color: var(--ink);
}
.nav nav a.ghost:hover { border-color: var(--ink-faint); background: var(--panel); }

/* ---------- hero ---------- */
/* Every page's hero is one element carrying both .wrap and .hero. The
   shorthand here used to be "92px 0 76px", which overrode .wrap's 24px side
   padding with 0 — invisible on desktop, where the 1080px max-width leaves
   margin anyway, but on a phone the headline sat flush against the glass
   while every other section kept its gutter. Keep the sides explicit. */
.hero { padding: 92px 24px 76px; border-bottom: 1px solid var(--line-soft); }
.eyebrow {
  font: 12px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--amb); margin: 0 0 22px;
}
h1 {
  /* Base headline size. Every page but pricing uses .page-hero, which declares
     its own scale for the split layout; this is the size the one single-column
     hero reads at, so the two stay on the same scale by construction. */
  margin: 0 0 26px;
  font-size: clamp(38px, 6.4vw, 59px);
  line-height: 1.04;
  letter-spacing: -.032em;
  font-weight: 680;
}
.grad {
  color: var(--ink);
}
.lede { max-width: 66ch; font-size: 18px; color: var(--ink-dim); margin: 0 0 16px; }

.demo-caption { margin: -18px 0 18px; color: var(--ink-dim); font-size: 13.5px; }

.cta-row { display: flex; gap: 12px; margin: 32px 0 46px; flex-wrap: wrap; }
.cta-row.center { justify-content: center; margin-bottom: 0; }
.btn {
  display: inline-block; padding: 11px 20px;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-size: 14.5px; font-weight: 550;
  background: var(--panel);
}
.btn:hover { border-color: var(--ink-faint); text-decoration: none; }
.btn.primary {
  background: var(--ink); color: #07080b; border-color: var(--ink);
}
.btn.primary:hover { background: #fff; }

.micro { font-size: 13.5px; color: var(--ink-faint); margin: 16px 0 0; }

/* ---------- bands ---------- */
.band { padding: 84px 0; border-bottom: 1px solid var(--line-soft); }
.band.alt { background: var(--bg-alt); }
h2 {
  margin: 0 0 14px;
  font-size: clamp(27px, 3.6vw, 37px);
  letter-spacing: -.024em; font-weight: 650;
}
.sub { max-width: 72ch; color: var(--ink-dim); margin: 0 0 38px; font-size: 16.5px; }
h3 { margin: 0 0 10px; font-size: 16.5px; font-weight: 620; letter-spacing: -.01em; }

/* ---------- chapter links ----------
   Every section is addressable, so every section heading offers its own URL.
   The mark is hidden until the heading is hovered or the link is focused: the
   page reads the same as it did without it, and a reader who wants to send one
   chapter to a colleague has somewhere to click. Focus-visible is not optional
   here — hover is the only other way to find it, and a keyboard has no hover. */
.h-anchor {
  opacity: 0; margin-left: .35em;
  color: var(--ink-faint); font-weight: 500;
  text-decoration: none;
  transition: opacity .12s ease, color .12s ease;
}
h2:hover .h-anchor { opacity: 1; }
.h-anchor:hover { color: var(--ink); text-decoration: none; }
.h-anchor:focus-visible { opacity: 1; color: var(--ink); outline: 2px solid var(--ink-faint); outline-offset: 3px; border-radius: 3px; }
/* The nav is sticky and 58px tall; without this a jumped-to section lands
   underneath it. Applies to the section, not the heading, so the band's top
   edge clears too. (Smooth scrolling and its reduced-motion opt-out are
   already set at the top of this file.) */
section[id] { scroll-margin-top: 74px; }
/* Coarse pointers cannot hover: show the mark, dimmed, rather than hide it
   from every touch reader. */
@media (hover: none) { .h-anchor { opacity: .45; } }

/* ---------- diagram ---------- */
.diagram {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #05060a;
  padding: 26px 18px;
  overflow-x: auto;
  margin-bottom: 34px;
}

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
.card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: var(--panel);
}
.card p { margin: 0; color: var(--ink-dim); font-size: 15px; }

.note {
  margin: 30px 0 0; padding: 18px 22px;
  border-left: 2px solid var(--amb);
  background: var(--panel);
  border-radius: 0 8px 8px 0;
  color: var(--ink-dim); font-size: 15.5px; max-width: 82ch;
}

/* ---------- comparison table ---------- */
.cmp { width: 100%; border-collapse: collapse; margin-bottom: 44px; font-size: 15px; }
.cmp th {
  text-align: left; padding: 11px 14px;
  font: 11.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--line);
}
.cmp td { padding: 15px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cmp td .dim { display: block; font: 12px/1.5 var(--mono); margin-top: 3px; }
.cmp .no  { color: var(--ink-faint); }
.cmp .yes { color: var(--grn); font-weight: 600; }

blockquote {
  margin: 4px 0 0; padding: 16px 20px;
  border-left: 2px solid var(--vio);
  background: rgba(167,139,250,.06);
  border-radius: 0 8px 8px 0;
  color: var(--ink); font-size: 15.5px;
}

/* ---------- anti-claims ---------- */
/* .anti is the wrapping div; the list-style reset has to reach the <ul> or
   the browser draws its disc beside our ✕ and indents the whole list 40px. */
.anti, .anti ul { list-style: none; padding: 0; margin: 0; }
.anti { margin: 0 0 40px; max-width: 82ch; }
.anti li {
  padding: 15px 0 15px 26px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-dim); font-size: 15.5px;
  position: relative;
}
.anti li::before {
  content: "✕"; position: absolute; left: 0; top: 15px;
  color: var(--red); font-size: 13px;
}
.anti b { color: var(--ink); font-weight: 600; }


/* ---------- footer ---------- */
footer { padding: 40px 0; }
/* ┃┃ closing the page: the same two rules that mark the gates, at the size of a
   footnote. The boundary is the last thing the page states, not the first. */
.foot-rail { height:14px; justify-content:flex-start; gap:6px; margin:0 0 22px }
.foot-rail i { width:3px; opacity:.7 }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot p { margin: 0; font-size: 13.5px; color: var(--ink-dim); }

/* ---------- responsive ---------- */
@media (max-width: 780px) {
  /* Hero on a phone. The desktop clamp floor (38px) wraps the index headline
     to five lines; one step tighter holds it to four. Paddings and margins
     are trimmed so the hero reads as one screen: at 412×915 the first CTA
     clears the fold, at 390×844 it sits just under it. Getting it above the
     fold on every phone would mean cutting hero copy, not CSS. */
  h1 { font-size: clamp(30px, 8.8vw, 38px); margin-bottom: 20px; }
  .lede { font-size: 16.5px; }
  .hero { padding: 48px 24px 52px; }
  .hero .cta-row { margin-top: 24px; }
  .band { padding: 58px 0; }
  .diagram { padding: 16px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- use-case cards: highlighted variant ---------- */
.card.best {
  position: relative;
  border-color: color-mix(in oklab, var(--grn) 45%, var(--line));
  background: linear-gradient(180deg, color-mix(in oklab, var(--grn) 7%, var(--panel)), var(--panel));
}
.card .tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 600 10.5px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grn);
  background: color-mix(in oklab, var(--grn) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--grn) 35%, transparent);
}
.card h3 { margin: 0 0 8px; font-size: 16.5px; letter-spacing: -.01em; }


/* ---------- roadmap timeline ---------- */
.timeline { list-style: none; margin: 30px 0 0; padding: 0 0 0 4px; }
.timeline li {
  position: relative;
  padding: 0 0 26px 30px;
  border-left: 1px solid var(--line);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 4px; }
.timeline li::before {
  content: "";
  position: absolute; left: -5px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--ink-faint);
}
.timeline li.key::before { border-color: var(--grn); box-shadow: 0 0 0 4px color-mix(in oklab, var(--grn) 16%, transparent); }
.timeline .ms {
  display: inline-block; min-width: 30px; margin-right: 10px;
  font: 600 11px/1.6 var(--mono); letter-spacing: .06em;
  color: var(--ink-faint);
}
.timeline li.key .ms { color: var(--grn); }
.timeline b { font-size: 15.5px; letter-spacing: -.01em; }
.timeline .d { display: block; margin-top: 5px; color: var(--ink-dim); font-size: 14.5px; }
.timeline .d em { color: var(--ink); font-style: normal; font-weight: 500; }


/* ── deployment tiers ─────────────────────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 26px 0 6px;
}
.tier {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 22px;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
}
.tier h3 {
  margin: 0 0 4px;
  font-size: 16.5px;
  color: var(--ink);
}
.tier .who {
  color: var(--cyn);
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 14px;
}
.tier .runs {
  color: var(--ink-faint);
  font-size: 12px;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.tier ul {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}
.tier li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.tier li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1.5px solid var(--grn);
}
.tier .price {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ==========================================================================
   MULTI-PAGE COMPONENTS
   Added when the single landing page was split into six. Everything above
   this line is shared with the original one-page layout and still in use.
   ========================================================================== */

/* --- nav current-page marker ------------------------------------------- */
.nav nav a.here {
  color: var(--ink);
  border-bottom: 2px solid var(--cyn);
  padding-bottom: 2px;
}

/* --- footer link column ------------------------------------------------ */
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: flex-start; }
.foot-links a { color: var(--ink-faint); font-size: 13.5px; }
.foot-links a:hover { color: var(--cyn); }

/* --- width + alignment modifiers --------------------------------------
   .tight used to narrow the whole container to 900px, which put its headings
   on their own left edge: measured at 1440px, a .tight band's h2 sat at x=294
   beside a sibling band's x=204 on the same page. It now keeps the page's left
   edge and caps the text measure instead, so every heading in a band aligns and
   the prose still reads at ~68 characters. */
.wrap.narrow { max-width: 780px; }
.wrap.tight > p,
.wrap.tight > ol,
.wrap.tight > ul { max-width: 68ch; }
.wrap.center, .wrap .center { text-align: center; }
.diagram.wide { max-width: 1120px; margin-inline: auto; }
.cmp.wide { width: 100%; }

/* --- card grids: explicit column counts ------------------------------- */
.cards.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- card icon: colour carries the same meaning as the diagrams ------- */
.card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  font-size: 17px; line-height: 1; margin-bottom: 12px;
  border: 1px solid var(--line);
}
.card-ico.held  { color: var(--red); background: #4c051933; border-color: #fb718544; }
.card-ico.check { color: var(--amb); background: #78350f33; border-color: #fbbf2444; }
.card-ico.share { color: var(--grn); background: #064e3b33; border-color: #34d39944; }
.card-ico.audit { color: var(--vio); background: #4c1d9533; border-color: #a78bfa44; }

.card.warn { border-color: #fb718533; background: linear-gradient(180deg, #4c05190f, transparent); }
.card-tag {
  margin-top: 10px; font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-faint); letter-spacing: .02em;
}


/* --- numbered stage list (how it works) ------------------------------- */
.stages { list-style: none; padding: 0; margin: 26px 0 0; counter-reset: none; }
.stage {
  display: grid; grid-template-columns: 46px 1fr; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--line-soft);
}
.stage:first-child { border-top: 0; }
.stage-n {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--cyn); color: var(--cyn);
  font-family: var(--mono); font-size: 16px; font-weight: 600;
}
.stage h3 { margin: 6px 0 8px; }
.stage p { color: var(--ink-dim); margin: 0 0 10px; }
.stage-risk {
  border-left: 2px solid var(--amb); padding: 8px 0 8px 14px;
  font-size: 14px; color: var(--ink-dim); background: #78350f14;
}
.stage-risk b { color: var(--amb); }

/* --- oversized single stat (business page) ---------------------------- */
.bigstat {
  display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--line-soft);
}
.bigstat:first-of-type { border-top: 0; }
.bigstat-n {
  font-size: 58px; line-height: .95; font-weight: 700; color: var(--cyn);
  letter-spacing: -.02em;
}
.bigstat-n.meta { font-size: 42px; color: var(--vio); }
.bigstat-n span {
  display: block; font-size: 14px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 6px;
}
.bigstat-body p { margin: 0 0 12px; }

/* --- evidence articles ------------------------------------------------ */
.evidence { display: grid; gap: 18px; margin-top: 24px; }
.ev {
  padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); border-left: 3px solid var(--grn);
}
.ev.warn { border-left-color: var(--red); }
.ev h3 { margin: 0 0 10px; }
.ev p { color: var(--ink-dim); margin: 0 0 12px; }
.ev-use { font-size: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.ev-use b { color: var(--ink); }

/* --- pricing extras --------------------------------------------------- */
.tier.featured { border-color: var(--cyn); box-shadow: 0 0 0 1px #22d3ee22; position: relative; }
.tier-flag {
  position: absolute; top: -11px; left: 20px;
  background: var(--cyn); color: #04121a; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
}
.up-item { color: var(--grn); }
.up-item::before { content: "↳ "; font-weight: 600; }
.warnline {
  display: inline-block; margin-top: 18px; padding: 9px 14px;
  border: 1px solid #fbbf2444; background: #78350f1f; border-radius: 9px;
  color: var(--ink-dim);
}
.warnline b { color: var(--amb); }
.note.big { font-size: 15.5px; padding: 18px 20px; }

/* --- responsive ------------------------------------------------------- */
@media (max-width: 1100px) {
  .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .cards.three { grid-template-columns: 1fr; }
  .bigstat { grid-template-columns: 1fr; gap: 12px; }
  .bigstat-n { font-size: 46px; }
  .bigstat-n.meta { font-size: 34px; }
}
@media (max-width: 780px) {
  .cards.two, .cards.four { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 34px 1fr; gap: 14px; }
  .stage-n { width: 30px; height: 30px; font-size: 14px; }
  .foot-links { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-ledger-head .live { animation: none; opacity: .8; }
}

/* --- diagram legibility on narrow screens -----------------------------
   A 1080px-wide flow diagram scaled into a 674px column renders its
   smallest label at 7.2px, which is unreadable. Below the point where the
   text would drop under ~10px, stop scaling and let the figure scroll
   horizontally at a legible size instead. Measured, not guessed. */
.diagram.wide { position: relative; }

@media (max-width: 960px) {
  .diagram.wide {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 10px;
  }
  .diagram.wide img {
    width: 1000px;      /* keeps smallest label at ~10.6px */
    max-width: none;
  }
  /* tell the reader it scrolls, rather than letting them miss half of it */
  .diagram.wide::after {
    content: "scroll to see the whole flow →";
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-faint);
    padding-top: 8px;
    position: sticky;
    left: 0;
  }
}

/* --- wide comparison tables on small screens --------------------------
   A three-column requirement table with quoted regulation text cannot
   compress below about 640px without the cells becoming unreadable
   slivers. Let it scroll inside its own container rather than pushing the
   whole page sideways (measured: TABLE.cmp overflowed the body at 400px). */
@media (max-width: 780px) {
  .cmp.wide {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .cmp.wide thead,
  .cmp.wide tbody { display: table; width: 640px; }
  .cmp.wide th,
  .cmp.wide td { font-size: 13px; }
}

/* --- Commons tier: free and outward-facing, so it reads differently ---- */
.tier.commons { border-color: #a78bfa55; background: linear-gradient(180deg, #4c1d9514, transparent); }
.tier-flag.alt { background: var(--vio); color: #140b2e; }
.tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .tiers { grid-template-columns: 1fr; } }

/* --- nav with eight destinations ---------------------------------------
   Hiding every link below 720px left mobile readers with no way between
   pages; showing all eight overflowed the bar at 760px (measured: NAV and
   A.ghost past the viewport on all 8 pages). Scroll the nav instead — it
   keeps every destination reachable and the page itself never moves.

   Right-alignment comes from margin-left:auto on the first link, NOT from
   justify-content:flex-end: on a scroll container flex-end pushes overflow
   past the left edge, where no scroll position can reach it (that bug
   shipped — the first three links were unreachable on every phone). */
/* Below 720px even a scrolled single row is cramped next to the brand.
   Brand keeps row one; the links become a full-width swipeable strip on
   row two, starting from the first link. No JS, no hamburger — every
   destination stays one visible swipe away instead of hidden behind
   a toggle. */
@media (max-width: 780px) {
  .nav-inner { height: auto; flex-wrap: wrap; padding: 10px 16px 0; }
  .nav nav {
    flex: 1 1 100%; order: 3;
    gap: 18px; padding: 8px 2px 10px;
  }
  .nav nav > a:first-child { margin-left: 0; }
  .nav nav a.ghost { padding: 5px 11px; }
}
@media (max-width: 600px) {
  .nav nav { font-size: 13.5px; gap: 13px; }
}

/* --- knowledge map (sky.html) ------------------------------------------
   One canvas, one ledger. The canvas is the only element on the site that
   moves on its own, and it is the whole point of the page, so nothing else
   here animates. Colours for the five verdicts are the five accents already
   in :root; sky.js reads them from there so the map cannot drift from the
   still figure on the overview. */
.skymap {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px;
  margin-top: 8px;
}
.skymap-stage {
  position: relative; height: 560px; border: 1px solid var(--line); border-radius: 14px;
  background: radial-gradient(ellipse at 50% 40%, #0b0e15 0%, #05060a 70%);
  overflow: hidden;
}
#sky { display: block; width: 100%; cursor: grab; touch-action: none; outline: none; }
.sky-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 16px; background: #05060a; }
#sky.dragging { cursor: grabbing; }
#sky:focus-visible { box-shadow: inset 0 0 0 2px var(--cyn); }
.sky-controls { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.sky-controls button {
  font: 550 12.5px/1 var(--sans); color: var(--ink-dim);
  background: rgba(8,9,12,.72); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 11px; cursor: pointer; backdrop-filter: blur(6px);
}
.sky-controls button:hover, .sky-controls button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-faint); }
.sky-controls button:focus-visible { outline: 2px solid var(--cyn); outline-offset: 1px; }
.sky-controls button[aria-label] { width: 30px; padding: 7px 0; font-size: 15px; line-height: 1; text-align: center; }
.sky-zoomlevel {
  display: inline-flex; align-items: center; min-width: 34px; justify-content: center;
  font: 550 12px/1 var(--mono); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.sky-legend {
  position: absolute; left: 12px; bottom: 10px; margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12.5px; color: var(--ink-dim);
}
.sky-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sky-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sky-legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1.2em; }
.v-new i, .v-new .chip { color: var(--cyn); background: var(--cyn); }
.v-sharp i, .v-sharp .chip { color: var(--grn); background: var(--grn); }
.v-merge i, .v-merge .chip { color: var(--vio); background: var(--vio); }
.v-held i, .v-held .chip { color: var(--amb); background: var(--amb); }
.v-refused i { background: transparent; border: 1.5px solid var(--red); width: 6px; height: 6px; }
.v-refused .chip { color: var(--red); background: var(--red); }
.sky-tip {
  display: none; position: absolute; z-index: 2; max-width: 300px; pointer-events: none;
  padding: 10px 12px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(12,14,19,.94); box-shadow: 0 12px 32px -12px rgba(0,0,0,.9);
  font-size: 13.5px; line-height: 1.45; color: var(--ink);
}
.sky-tip .kind { display: block; font-size: 11.5px; color: var(--ink-faint); margin-bottom: 4px; }
.sky-tip p { margin: 0 0 6px; }
.sky-tip .how { display: block; font-size: 12px; color: var(--ink-dim); }

.sky-ledger {
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  padding: 14px 16px; display: flex; flex-direction: column; min-height: 0;
  max-height: 560px; overflow: hidden;
}
.sky-ledger-head { margin: 0 0 10px; font-size: 13px; color: var(--ink-dim); }
.sky-ledger-head b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The live dot is the only blinking thing on the site; it says the ledger is
   being written to now, which is what the section is about. */
.sky-ledger-head .live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px;
  background: var(--grn); vertical-align: 1px; animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.sky-feed time { float: right; font: 11px/1.6 var(--mono); color: var(--ink-faint); margin-left: 8px; }
.sky-feed { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.sky-feed .arr {
  padding: 9px 0; border-top: 1px solid var(--line-soft);
  font-size: 13px; line-height: 1.45; color: var(--ink-dim);
}
.sky-feed .arr:first-child { border-top: 0; color: var(--ink); }
.sky-feed .arr:first-child { animation: arr-in .9s ease-out; }
@keyframes arr-in { from { background: rgba(230,233,239,.07); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .sky-feed .arr:first-child { animation: none; } }
.sky-feed .chip {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  font: 600 10.5px/1.6 var(--sans); letter-spacing: .02em;
  background: transparent !important; border: 1px solid currentColor;
}
.sky-feed .cat { font-size: 11.5px; color: var(--ink-faint); }
.sky-feed .txt { display: block; margin-top: 3px; }
.sky-feed .v-refused .txt { color: var(--ink-faint); }

@media (max-width: 960px) {
  .skymap { grid-template-columns: 1fr; }
  .skymap-stage { height: 440px; }
  .sky-ledger { max-height: 300px; overflow-y: auto; }
}
@media (max-width: 600px) {
  .skymap-stage { height: 420px; }
  .sky-controls { top: 8px; right: 8px; }
  .sky-controls button { padding: 6px 9px; font-size: 12px; }
  .sky-legend { font-size: 11.5px; gap: 3px 10px; left: 8px; bottom: 8px; }
}

/* Homepage composition: the contribution is the focal point; supporting
   sections use open rows rather than repeating the specialist-page cards. */
.sky-selection { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px; }
.sky-selection p { margin: 0 0 8px; }
.sky-selection-label, #sky-selection-outcome { font-size: 13px; color: var(--ink-dim); }
#sky-selection-text { font-size: 16px; line-height: 1.5; }
.sky-feed { overflow-y: auto; }
.sky-inspect { display: block; width: 100%; border: 0; padding: 6px 2px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sky-inspect:hover { background: var(--line-soft); }

/* ── scope ladder (was assets/scope-flow.svg) ──────────────────────────────
   Four scopes, each one step wider. This was a 1040px image of a table, so it
   scrolled sideways on a phone and its text could not be selected, searched or
   read by a screen reader beyond the alt attribute. As markup it reflows, and
   the accent per scope is the site's own variable rather than a hex copied into
   the SVG. The accent bar is the only decoration; nothing here animates. */
.ladder { margin: 26px 0 34px; display: grid; gap: 10px; }
.ladder-head,
.ladder-foot {
  font: 700 11.5px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ladder-foot { text-align: right; }
.rung {
  display: grid; grid-template-columns: 300px 1fr; align-items: center;
  gap: 0 28px; padding: 18px 22px;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 320px),
    #0b0d12;
}
.rung > div:first-child { border-right: 1px solid var(--line); padding-right: 26px; }
.rung b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.rung .who { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-dim); }
.rung .tag {
  display: block; margin-top: 8px; font: 700 11.5px/1.4 var(--sans);
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.rung .says { margin: 0; font-size: 13px; line-height: 1.62; color: var(--ink-dim); }
.rung.solo { --accent: var(--grn); }
.rung.team { --accent: var(--cyn); }
.rung.org  { --accent: var(--vio); }
/* Commons is amber, not the blue the SVG used: #60a5fa was the only blue on the
   site and was never a declared variable. Amber is the one accent the palette
   was not already spending here, so the four scopes stay separable — green,
   cyan, violet and amber are four different hues rather than three neighbours
   on the same green-to-blue arc. */
.rung.comm { --accent: var(--amb); }
@media (max-width: 780px) {
  .rung { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .rung > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; }
  .ladder-foot { text-align: left; }
  /* The point of dropping the image: type can grow on a narrow screen. The SVG
     scaled 1040px down to 342px here, rendering its 11.5px labels at 3.8px. */
  .rung .says { font-size: 14px; }
  .rung .who  { font-size: 13px; }
}

/* ── signed record (was assets/record-fields.svg) ──────────────────────────
   Eight fields against the requirement each answers. Same reasoning as the
   ladder above: a regulation quotation that cannot be selected or found by
   search is worth less than one that can, and this figure is nine tenths
   quotation. The signature row is the only emphasised one, because it is the
   only field that covers all the others. */
.record { margin: 26px 0 18px; display: grid; gap: 8px; }
.record-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px;
  padding: 0 22px 8px; border-bottom: 1px solid var(--line);
  font: 700 11.5px/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.record-head span:last-child { color: var(--cyn); }
.rec {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px;
  padding: 14px 22px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: #0b0d12;
}
.rec:nth-child(even) { background: #0e1118; border-color: var(--line); }
.rec dt { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.rec dd { margin: 0; grid-column: 1; font: 12px/1.55 var(--mono); color: var(--ink-dim); }
.rec .req { grid-column: 2; grid-row: 1; font-size: 11.5px; color: var(--cyn); }
.rec .reqd { grid-column: 2; font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); }
.rec q { quotes: none; font-style: normal; }
.rec.sig {
  border-color: var(--grn); border-width: 1.6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--grn) 16%, transparent), #0b0d12);
}
.rec.sig dt { color: #d1fae5; }
.rec.sig dd { color: #a7f3d0; }
.rec.sig .req { color: var(--grn); }
.record-note { margin: 14px 0 34px; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
@media (max-width: 780px) {
  .record-head { grid-template-columns: 1fr; }
  .record-head span:last-child { display: none; }
  .rec { grid-template-columns: 1fr; padding: 14px 16px; }
  .rec .req, .rec .reqd { grid-column: 1; }
  .rec .req { grid-row: auto; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
  /* Nine tenths of this figure is quoted regulation; it has to be legible on the
     device an auditor actually reads mail on. */
  .rec dt   { font-size: 13.5px; }
  .rec dd   { font-size: 12.5px; }
  .rec .req, .rec .reqd { font-size: 12.5px; }
}


/* Compact institutional route: the selected example earns the first scroll.
   Site-only composition; shared platform tokens stay pinned to doublegate-ui. */
.institutional .eyebrow { font-size: 10px; line-height: 1.5; margin-bottom: 16px; }
.institutional .btn { border-radius: 0; font-size: 12px; padding: 12px 14px; }
.institutional .map-section { padding: 28px 0 44px; }
.map-section .section-head { margin-bottom: 14px; grid-template-columns: 1.4fr 1fr; }
.map-section h2 { font-size: 28px; }
.map-section .section-index { display: none; }
.map-section .section-head > p { font-size: 15px; }
.map-section .demo-caption { margin: 0 0 14px; font-size: 13px; }
.institutional .skymap { grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; }
.institutional .skymap-stage { height: 420px; }
.institutional .sky-ledger { max-height: 420px; padding: 18px; }
#sky-selection-outcome { color: var(--ink); font-size: 14px; line-height: 1.6; }
.sky-selection-label { color: var(--amb); }
.sky-inspect[aria-pressed="true"] { box-shadow: inset 3px 0 var(--amb); padding-left: 10px; background: #d6a84b0c; }
:is(a, button, summary):focus-visible { outline: 2px solid var(--amb); outline-offset: 3px; }
.institutional .sky-controls button { min-height: 36px; }
.connected-route { padding: 24px; }
.authority-route { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.authority-route > li { position: relative; border-top: 1px solid var(--line); padding: 22px 0 0; min-width: 0; }
.authority-route > li:not(:last-child)::after { content: '→'; position: absolute; right: -23px; top: -15px; color: var(--amb); font-size: 22px; }
.authority-route h3 { font-size: 19px; font-weight: 550; line-height: 1.25; margin: 12px 0; }
.authority-route p { font-size: 14px; color: var(--ink-dim); margin: 0; }
.authority-route small { font-size: 10px; letter-spacing: .04em; }
.authority-route .route-gate { border-top-color: var(--amb); }
.authority-route .gate-rail { height: 18px; width: 14px; position: absolute; top: -10px; left: 0; gap: 4px; background: var(--bg); }
.authority-route .gate-rail i { width: 3px; }
.mobile-menu { display: none; }
@media (max-width: 1100px) {
  .nav .desktop-nav { display: none; }
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu summary { cursor: pointer; padding: 8px 14px; border: 1px solid var(--line); color: var(--ink); font-size: 14px; }
  .nav-inner { height: 58px; flex-wrap: nowrap; padding: 0 24px; }
  .mobile-menu nav { position: absolute; right: 24px; top: 56px; width: min(340px, calc(100vw - 48px)); max-height: calc(100dvh - 80px); overflow: auto; background: var(--bg); border: 1px solid var(--line); padding: 16px; flex-direction: column; align-items: stretch; gap: 4px; box-shadow: 0 12px 28px #0008; }
  .nav .mobile-menu nav a { display: block; padding: 10px; margin: 0; font-size: 16px; white-space: normal; }
}
@media (max-width: 960px) {
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .authority-route { grid-template-columns: 1fr; gap: 26px; }
  .authority-route > li { padding: 14px 0 0 24px; }
  .authority-route > li:not(:last-child)::after { content: '↓'; left: 0; top: auto; bottom: -30px; right: auto; }
  .authority-route .gate-rail { left: 0; }
  .authority-route h3 { margin: 6px 0; }
  .institutional .skymap { grid-template-columns: 1fr; }
  .institutional .sky-ledger { display: contents; }
  .sky-selection { grid-row: 1; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--amb); }
  .sky-selection p:last-child { margin-bottom: 0; }
  .skymap-stage { grid-row: 2; }
  .sky-ledger-head { margin: 0; }
  .sky-feed { max-height: 210px; }
}
@media (max-width: 600px) {
  .institutional .band { padding: 36px 0; }
  .institutional .eyebrow { display: none; }
  .institutional .map-section { padding: 22px 0 32px; }
  .map-section .section-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .map-section h2 { font-size: 25px; }
  .map-section .section-head > p { margin: 0; }
  .map-section .demo-caption { font-size: 12px; }
  .institutional .skymap { gap: 10px; }
  .institutional .skymap-stage { height: 330px; }
  .sky-selection-label { font-size: 12px; }
  #sky-selection-text { font-size: 15px; line-height: 1.45; }
  #sky-selection-outcome { font-size: 13px; line-height: 1.5; }
  .authority-route p { font-size: 15px; }
  .connected-route { padding: 20px; }
}
/* Shared native flows: connector tracks sit between equal-height cards. */
.flow-route { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr); gap: 0; align-items: stretch; }
.flow-route > li:not(.flow-connector) { padding: 22px 14px; border: 1px solid var(--line); background: var(--panel); }
.flow-route > li::after { display: none; }
.flow-route > .flow-connector { display: flex; align-items: center; justify-content: center; border: 0; padding: 0; }
.flow-connector span { width: 100%; height: 1px; background: var(--amb); position: relative; }
.flow-connector span::after { content: ''; position: absolute; right: 1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--amb); border-right: 1px solid var(--amb); transform: rotate(45deg); }
.flow-route .route-gate { border-top: 2px solid var(--amb); }
/* One colour, one meaning (README design notes): red held, green signed and only signed,
   cyan readable. A step's top rule carries the state the claim is in at that step. */
.flow-route > li.route-held { border-top: 2px solid var(--red); }
.flow-route > li.route-signed { border-top: 2px solid var(--grn); }
.flow-route > li.route-readable { border-top: 2px solid var(--cyn); }
.flow-route .gate-rail { left: 14px; }
.flow-route small { color: var(--amb); }
.flow-route h3 { overflow-wrap: anywhere; }
.native-flow { margin: 24px 0; }
.connected-route { scroll-margin-top: 80px; }
.architecture figcaption { max-width: 80ch; line-height: 1.6; }
.availability { margin: 24px 0 0; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 13px; max-width: 90ch; }
.availability b { color: var(--ink); }
.audience-page .band { padding: 56px 0; }
.audience-page h2 { font-size: clamp(28px,3vw,40px); line-height: 1.15; }
.benefit-grid, .integration-path { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; padding: 0; list-style: none; }
.benefit-grid article, .integration-path li { border-top: 1px solid var(--line); padding-top: 20px; }
.benefit-grid h3, .integration-path h3 { margin: 0 0 14px; font-size: 21px; }
.benefit-grid p, .integration-path p { color: var(--ink-dim); }
.sdk-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; }
.sdk-grid > div { min-width: 0; border-top: 1px solid var(--line); padding-top: 20px; }
.resource-list { display: grid; margin: 24px 0; }
.resource-list a { display: grid; gap: 8px; border-top: 1px solid var(--line); padding: 18px 0; text-decoration: none; }
.resource-list span { color: var(--ink-dim); font-size: 14px; }
.usecase-list article { display: grid; grid-template-columns: 1fr 1.4fr 2fr; gap: 16px 28px; border-top: 1px solid var(--line); padding: 24px 0; }
.usecase-list article > span { color: var(--amb); font-size: 13px; }
.usecase-list h3, .usecase-list p { margin: 0; }
.usecase-list h3 { font-size: 22px; }
.usecase-list p { color: var(--ink-dim); }
.usecase-list article > a { grid-column: 3; }
.example-evidence { margin: 18px 0; font-size: 12px; }
.example-evidence > div { padding: 8px 0; border-top: 1px solid var(--line); }
.example-evidence dt { color: var(--amb); }
.example-evidence dd { margin: 4px 0 0; line-height: 1.6; }
.example-change { font-size: 13px; }
.example-change summary { cursor: pointer; }
.example-change p { color: var(--ink-dim); }
.institutional .sky-ledger { max-height: 560px; overflow-y: auto; }
.institutional .skymap-stage { height: 560px; }
@media (max-width: 1100px) {
  .flow-route { grid-template-columns: minmax(0,1fr); }
  .flow-route > .flow-connector { height: 28px; }
  .flow-connector span { width: 1px; height: 100%; }
  .flow-connector span::after { top: auto; bottom: 1px; right: -3px; transform: rotate(135deg); }
  .flow-route > li:not(.flow-connector) { padding: 20px; }
  .benefit-grid, .integration-path, .sdk-grid { grid-template-columns: 1fr; gap: 24px; }
  .usecase-list article { grid-template-columns: 1fr; gap: 12px; }
  .usecase-list article > a { grid-column: 1; }
}
@media (max-width: 600px) {
  .audience-page .band { padding: 36px 0; }
  .split-heading { grid-template-columns: 1fr; gap: 24px; }
  .connected-route { padding: 16px; }
  .flow-route h3 { font-size: 20px; }
  .institutional .skymap-stage { height: 330px; }
}
/* Shared editorial opening: statement left, a useful answer right. */
/* ┃┃ between the hero's statement and its complement — the two boundaries this
   product is, drawn as the boundary between the two halves of the opening. In
   flow rather than pinned to the viewport edge: at the edge it read as a
   scrollbar, and it sat outside the 1240 column everything else aligns to. */
.page-hero { padding: 30px 0 28px; border-bottom: 1px solid var(--line); }
.page-context { margin: 0 0 24px; font-size: 13px; color: var(--ink-dim); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0,1.2fr) auto minmax(0,1fr); gap: 56px; align-items: center; }
.hero-rail { height: 180px; opacity: .18 }
.page-hero-grid > div { min-width: 0; }
.page-hero h1, .institutional .page-hero h1 { font-size: clamp(42px,5.1vw,70px); font-weight: 650; line-height: 1.02; letter-spacing: -.045em; max-width: 17ch; margin: 0; text-wrap: balance; overflow-wrap: normal; }
.page-hero-complement { color: var(--ink-dim); }
.page-hero-complement > p { font-size: 16px; line-height: 1.55; margin: 14px 0; }
.page-hero-complement .hero-proposition { color: var(--ink); font-size: 25px; line-height: 1.25; letter-spacing: -.025em; margin-top: 0; }
.page-hero-complement .cta-row { margin: 22px 0 0; gap: 10px; }
.page-hero .availability { max-width: none; margin-top: 24px; padding-bottom: 0; }
.audience-nav { border-bottom: 1px solid var(--line); }
.audience-nav > .wrap { display: flex; align-items: center; gap: 28px; padding-top: 12px; padding-bottom: 12px; }
.audience-nav span { font-size: 13px; color: var(--ink-dim); white-space: nowrap; }
.audience-nav nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.audience-nav a { font-size: 14px; color: var(--ink-dim); padding: 6px 0; }
.audience-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--amb); }
@media (max-width: 960px) {
  .page-hero-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .page-hero h1, .institutional .page-hero h1 { font-size: 56px; max-width: 20ch; }
  .page-hero-complement { max-width: 65ch; }
  .hero-rail { display: none; }
}
@media (max-width: 600px) {
  .page-hero { padding: 22px 0; }
  .page-context { margin-bottom: 18px; font-size: 12px; }
  .page-hero h1, .institutional .page-hero h1 { font-size: clamp(32px,9.6vw,48px); line-height: 1.04; }
  .page-hero-complement > p { font-size: 15px; }
  .page-hero-complement .hero-proposition { font-size: 22px; }
  .page-hero-complement .cta-row { margin-top: 18px; }
  .problem-ledger>div { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 18px 0; }
  .institutional .statement { padding: 68px 0 }
  .statement-line { max-width: none }
  .audience-nav > .wrap { display: block; padding-top: 8px; padding-bottom: 8px; }
  .audience-nav span { display: none; }
  .audience-nav nav { gap: 4px 18px; }
  .audience-nav a { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- #path: three readings of one address -------------------------------
   Nothing here animates or transitions: the figure it replaced carried two
   motion paths and a kill switch, and this one has nothing to suppress. */
.three-readings{display:grid;grid-template-columns:17rem minmax(0,1fr);column-gap:32px}
.gate-col{grid-column:1;grid-row:1/span 3;border-right:1px solid var(--line);padding-right:32px}
.gate-col>b{display:block;margin:10px 0 14px;font-size:15px}
.gate-acts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.gate-acts>li>b{display:block;font-size:13px;color:var(--amb)}
.gate-acts>li>p,.gate-foot{margin:4px 0 0;font-size:12.5px;color:var(--ink-dim);line-height:1.55}
.gate-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
.reading{grid-column:2;padding:0 0 26px}
.reading+.reading{margin-top:26px;border-top:1px solid var(--line);padding-top:26px}
.reading>h3{margin:2px 0 14px;font-size:17px}
.scale{margin:0}
.walk{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
.railkey{margin:0 0 8px}
.spine{list-style:none;margin:10px 0 0;padding:0 0 0 14px;border-left:2px solid var(--vio)}
.spine>li{position:relative;padding:8px 0 8px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:baseline}
.spine>li>p,.spine>li>ul{grid-column:1/-1}
.spine>li>small{min-width:0}
.spine>li.lvl2{margin-left:18px}
.spine>li.lvl3{margin-left:36px}
.spine>li.answers{box-shadow:inset 2px 0 var(--cyn)}
.spine>li.wside{border-left:1px dashed var(--line);margin-left:18px;opacity:.72}
.spine code{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.spine>li>p{margin:4px 0 0;font-size:12.5px;color:var(--ink-dim);line-height:1.55}
.members{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.members code{font-size:11.5px}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.answer{border:1px solid var(--line);padding:10px;background:var(--panel)}
.answer>b{display:block;font-size:12px;margin-bottom:8px}
.ans-rows{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-family:var(--mono);font-size:11.5px}
.ans-rows>li.faint{color:var(--ink-faint)}
.crewhead{margin:0 0 4px}
.apart{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink-dim)}
.spaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 14px}
.spaces>div{border:1px solid var(--line);padding:12px;background:var(--panel)}
.cite{margin:8px 0 0;font-size:12px;color:var(--ink-dim)}
.mark{display:inline-flex;align-items:center;gap:5px;border:1px solid currentColor;border-radius:2px;
  padding:1px 6px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.mark-held{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.mark-signed{color:var(--grn);background:color-mix(in srgb,var(--grn) 12%,transparent)}
.mark-read{color:var(--cyn);background:color-mix(in srgb,var(--cyn) 12%,transparent)}
.mark-key{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mark-key>li{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--ink-dim)}
@media (max-width:1100px){
  .three-readings{grid-template-columns:minmax(0,1fr)}
  .gate-col{grid-column:1;grid-row:1;border-right:0;border-bottom:1px solid var(--line);padding:0 0 24px}
  .gate-acts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reading{grid-column:1}
  .walk{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .gate-acts,.members,.spaces,.mark-key{grid-template-columns:minmax(0,1fr)}
  .spine>li.lvl2,.spine>li.wside{margin-left:8px}
  .spine>li.lvl3{margin-left:16px}
}
@media (forced-colors:active){
  .mark,.answer,.spaces>div,.gate-col{border-color:CanvasText}
  .gate-rail i{background:CanvasText}
}

/* Availability states for the index status table. institutional.css styles the pill
   and colours its four maturity states; the site shows two, so it owns their colour,
   reusing that file's own tokens. The label is the non-colour channel (ADR-0138). */
.dg-status[data-state="available"] {color:#9bc7a7;border-color:#416249}
.dg-status[data-state="roadmap"] {color:#abb8c8;border-color:#4c5968}