:root {
  /* Design system — ported from Miller Agentic Plan (editorial navy / warm gold / linen) */
  --navy: #122A4B;
  --navy-deep: #0C1D35;
  --gold: #C9962E;          /* accents, fills, borders, text on dark */
  --gold-bright: #D9A93C;   /* hover on dark */
  --gold-ink: #8A5F0E;      /* gold text on light — WCAG AA safe */
  --gold-wash: #FBF3DF;
  --gold-wash-2: #F6ECD6;
  --ink: #2A2A26;
  --ink-soft: #565247;
  --muted: #6B6759;
  --linen: #F7F4EE;
  --card: #FBF9F4;
  --wash: #F1EDE2;
  --line: #E4DFD3;
  --line-soft: #ECE8DC;
  --white: #FFFFFF;
  --green: #1F6B43;
  --green-soft: #7CC29A;
  --green-wash: #E4F2E9;
  --steel: #245D9F;
  --steel-soft: #8FA0B5;
  --steel-wash: #E6EFF8;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow: 0 2px 10px rgba(18,42,75,.05);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--linen);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
h1, h2, h3, h4, p, dl, ol, ul { margin-top: 0; }
h1, h2, h3 {
  font-family: var(--serif);
  line-height: 1.15;
  color: var(--navy);
  font-weight: 600;
  text-wrap: pretty;
  letter-spacing: -.01em;
}
.shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.mono { font-family: var(--mono); }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--white); color: var(--navy-deep);
  padding: 10px 14px; border-radius: 6px; font-weight: 700;
}
.skip-link:focus { top: 16px; }

/* scroll progress bar — driven by /agentic-plan.js; hidden without JS */
.scroll-progress { display: none; }
.js .scroll-progress { display: block; position: fixed; top: 0; left: 0; z-index: 60; height: 3px; width: 0; background: var(--gold); }

/* status text tones */
.t-done { color: var(--green); font-weight: 700; }
.t-staging { color: var(--steel); font-weight: 700; }
.t-building { color: var(--gold-ink); font-weight: 700; }
.t-planning { color: var(--ink-soft); font-weight: 700; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  color: var(--white);
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.header-inner { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { text-decoration: none; font-weight: 700; font-size: 13.5px; letter-spacing: .04em; white-space: nowrap; }
.brand span { color: var(--gold); }
nav { display: flex; align-items: center; gap: 24px; overflow-x: auto; }
nav a { color: #C7D2E1; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 20px 0; }
nav a:hover, nav a:focus-visible { color: var(--gold); }
nav a.act, nav a[aria-current="page"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- hero ---------- */
.hero {
  color: var(--white);
  background: linear-gradient(180deg, #0C1D35 0%, #122A4B 100%);
  padding: 74px 0 54px;
}
.eyebrow, .section-number, .mini-label { font-family: var(--sans); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { margin-bottom: 8px; font-size: 12px; color: #AEBCCC; }
.eyebrow-2 { margin-bottom: 22px; color: var(--gold); }
.hero h1 { max-width: 1020px; margin-bottom: 24px; color: var(--white); font-size: clamp(38px, 5.2vw, 60px); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; }
.hero-lede { max-width: 860px; margin-bottom: 18px; color: #DCE3ED; font-size: 17px; font-weight: 600; }
.hero-lede em { color: #AEBCCC; font-weight: 400; }
.hero-serif { max-width: 860px; margin-bottom: 8px; color: #EDF1F7; font-family: var(--serif); font-size: clamp(20px, 2.5vw, 26px); font-weight: 500; line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; gap: 8px; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 8px; font-family: var(--sans); font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.button-gold { color: var(--navy-deep); background: var(--gold); }
.button-gold:hover, .button-gold:focus-visible { background: var(--gold-bright); }
.button-ghost { color: var(--white); border-color: rgba(255,255,255,.4); }
.button-ghost:hover, .button-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }
.button-navy { color: var(--white); background: var(--navy); }
.button-navy:hover, .button-navy:focus-visible { background: var(--navy-deep); }
.button:hover, .button:focus-visible { transform: translateY(-1px); }
.button:focus-visible { outline: 3px solid rgba(201,150,46,.5); outline-offset: 2px; }

.hero-position { max-width: 980px; margin: 30px 0 0; padding: 14px 18px; border: 1px solid rgba(255,255,255,.16); border-left: 4px solid var(--green-soft); border-radius: 10px; background: rgba(255,255,255,.05); color: #C7D2E1; font-size: 14px; }
.hero-position strong { color: var(--white); }
.status-dot { display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--green-soft); box-shadow: 0 0 0 0 rgba(124,194,154,.55); animation: pulse 2.4s ease-out infinite; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.stat-card { padding: 24px 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.05); }
.stat-card > p:last-child { margin: 0; color: #C7D2E1; font-size: 14px; line-height: 1.5; }
.stat-value { margin: 0 0 10px; color: var(--gold); font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; white-space: nowrap; }
.stat-value-sm { display: flex; align-items: center; gap: 10px; font-size: 32px; }
.stat-ring-card { display: flex; align-items: center; gap: 18px; border-color: rgba(201,150,46,.5); background: rgba(201,150,46,.08); }
.stat-ring-card svg { flex: none; }
.stat-title { margin: 0 0 4px; color: var(--white); font-weight: 700; font-size: 16px; }
.stat-ring-card p { margin: 0 0 4px; color: #C7D2E1; font-size: 13px; line-height: 1.45; }
.stat-fine { color: #8FA0B5 !important; font-size: 11.5px !important; }
.ring-track { stroke: rgba(255,255,255,.16); }
.ring-fill { stroke: var(--gold); stroke-dasharray: 251.33 251.33; stroke-dashoffset: 128.2; transform: rotate(-90deg); transform-origin: 50px 50px; }
.ring-text { fill: var(--white); font-family: var(--serif); font-size: 22px; font-weight: 600; }
.dot-green { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--green-soft); }

/* ---------- connected strip ---------- */
.connected { padding: 26px 0 34px; background: var(--linen); }
.connected-card { padding: 22px 26px; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.connected-label { margin-bottom: 14px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; padding: 0; }
.int-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 13.5px; font-weight: 600; color: var(--navy); }
.int-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.int-chip.st-done::before { background: var(--green); }
.int-chip.st-building::before { background: var(--gold); }
.int-chip.st-planning::before { background: var(--steel-soft); }
.connected-note { margin: 0; max-width: 900px; color: var(--ink-soft); font-size: 15px; }

/* ---------- sections ---------- */
.section { padding: 84px 0 64px; }
.section-dark { color: var(--white); background: var(--navy-deep); }
.section-heading { max-width: 860px; margin-bottom: 30px; }
.section-number { margin-bottom: 12px; font-size: 12.5px; color: var(--gold-ink); }
.section-heading h2 { margin-bottom: 14px; font-size: clamp(28px, 3.2vw, 40px); }
.section-heading p { color: var(--ink-soft); font-size: 17px; }
.section-heading p:last-child { margin-bottom: 0; }
.section-dark .section-number { color: var(--gold); }
.section-dark .section-heading h2 { color: var(--white); }
.section-dark .section-heading p { color: #C7D2E1; }
.live-pill-row { margin: -6px 0 12px; }
.text-link { color: var(--gold-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.text-link:hover { color: var(--navy); }
.mini-label { font-size: 11.5px; color: var(--gold-ink); }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 4px 11px; border-radius: 999px; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; }
.pill-done { color: #12573E; background: var(--green-wash); }
.pill-staging { color: #16457F; background: var(--steel-wash); }
.pill-building { color: #7A5307; background: var(--gold-wash-2); }
.pill-planning { color: #514D45; background: #ECE8DE; }
.pill-gated { color: #7A5307; background: var(--gold-wash); }

/* ---------- progress: legend panel + summary + workstream table ---------- */
.legend-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; margin-bottom: 28px; padding: 26px 30px; border-radius: var(--radius); color: var(--white); background: var(--navy); }
.legend-panel > div { display: flex; gap: 14px; align-items: flex-start; }
.lg-ic { font-size: 19px; line-height: 1.3; }
.lg-done { color: var(--green-soft); }
.lg-staging { color: #9FC1E8; }
.lg-building { color: var(--gold); }
.lg-planning { color: #C9C3B4; }
.legend-panel strong { display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.legend-panel p { margin: 2px 0 0; color: #C7D2E1; font-size: 13.5px; }

.summary-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-bottom: 22px; }
.sum-serif { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--navy); }
.sum-chip { margin: 0; font-size: 15px; }

.ws-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.wr { display: grid; grid-template-columns: minmax(0,1fr) 72px 72px 72px 72px 200px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.wr:last-child { border-bottom: 0; }
.wr-head { padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wr-head span:nth-child(2) { color: var(--green); }
.wr-head span:nth-child(3) { color: var(--steel); }
.wr-head span:nth-child(4) { color: var(--gold-ink); }
.wr-head span:not(:first-child) { text-align: center; }
.wr-group { grid-column: 1 / -1; margin: 0; padding: 14px 22px 10px; color: var(--gold-ink); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); background: var(--card); }
.wr-name h4 { margin: 0 0 4px; font-family: var(--sans); font-size: 15.5px; font-weight: 700; color: var(--navy); }
.wr-acc { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.wr-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.sub-done { color: var(--green); }
.sub-open { color: #8A8578; }
.wr-cell { text-align: center; font-size: 18px; }
.wr-meter { display: flex; align-items: center; gap: 10px; }
.bar { flex: 1; height: 7px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; }
.fill-done { background: var(--green); }
.fill-staging { background: var(--steel); }
.fill-building { background: var(--gold); }
.fill-planning { background: #8A8578; }
.w-100 { width: 100%; } .w-86 { width: 86%; } .w-80 { width: 80%; } .w-33 { width: 33%; } .w-20 { width: 20%; } .w-0 { width: 0; }
.wr-pct { min-width: 42px; text-align: right; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); }
.progress-note { margin: 22px 0 0; max-width: 900px; font-size: 14px; color: var(--muted); }
.progress-note + .progress-note { margin-top: 8px; }

/* ---------- journey ---------- */
.kb-layout { display: block; }
.kb-rail { display: none; }
.js .kb-rail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 14px; }
.js .kb-all { display: none; }
.kb-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; text-align: left; box-shadow: var(--shadow); transition: border-color .15s ease, background .15s ease, color .15s ease; }
.kb-btn:hover { border-color: var(--gold); }
.kb-btn:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }
.kb-stage { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.kb-btn-name { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--navy); }
.kb-count { font-size: 11.5px; color: var(--muted); }
.kb-btn.on { background: var(--navy); border-color: var(--navy); }
.kb-btn.on .kb-stage { color: var(--gold); }
.kb-btn.on .kb-btn-name { color: var(--white); }
.kb-btn.on .kb-count { color: #AEBCCC; }
.kb-panel { padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.kb-panel:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }
.kb-item-name { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: 30px; }
.kb-label { margin: 14px 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.kb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.kb-cols .kb-label { margin-top: 0; }
.kb-panel p, .kb-item p { color: var(--ink-soft); font-size: 15px; margin-bottom: 6px; }
.kb-sys { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-sys span { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--navy); }
.kb-all .kb-item { padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.kb-all .kb-item:last-child { border-bottom: 0; }
.kb-sample { margin: 20px 0 0; padding: 22px 26px; border-radius: var(--radius); color: var(--white); background: var(--navy); max-width: 520px; }
.kb-sample-title { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.kb-sample .mono { margin-bottom: 10px; font-size: 15px; color: #EDF1F7; }
.kb-sample-chips { display: flex; gap: 8px; margin-bottom: 10px; }
.kb-sample-chips span { padding: 3px 10px; border-radius: 999px; background: rgba(124,194,154,.18); color: var(--green-soft); font-size: 12px; font-weight: 700; }
.kb-sample-note { margin: 0; color: #AEBCCC; font-size: 12px; font-style: italic; }
.callout { margin-top: 22px; padding: 18px 22px; border-left: 4px solid var(--gold); border-radius: 8px; background: var(--gold-wash); color: #4A3C1C; font-size: 14.5px; }
.callout strong { color: var(--navy); }

/* ---------- architecture ---------- */
.arch-figure { margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.arch-figure svg { width: 100%; height: auto; display: block; }
.arr-head { fill: var(--steel-soft); }
.arr-head-gold { fill: var(--gold); }
.sv-box, .sv-src, .sv-spine, .sv-gate, .sv-ai { fill: var(--white); stroke: #B9C2CE; stroke-width: 1.5; }
.sv-src { fill: #FBFDFB; stroke: var(--green-soft); }
.sv-spine { fill: var(--steel-wash); stroke: var(--steel); }
.sv-gate { fill: var(--gold-wash); stroke: var(--gold); stroke-width: 2; }
.sv-ai { fill: #FDFBF5; stroke: var(--gold); stroke-dasharray: 6 5; }
.sv-dash { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 5; fill: none; }
.sv-line { stroke: var(--steel-soft); stroke-width: 1.8; fill: none; }
.sv-title { font-family: var(--serif); font-size: 17px; font-weight: 600; fill: var(--navy); }
.sv-title-lg { font-family: var(--serif); font-size: 20px; font-weight: 600; fill: var(--navy); }
.sv-title-sm { font-family: var(--serif); font-size: 15px; font-weight: 600; fill: var(--navy); }
.sv-sub { font-family: var(--sans); font-size: 11.5px; fill: var(--muted); }
.sv-caption { font-family: var(--sans); font-size: 12.5px; fill: var(--muted); font-style: italic; }
.arch-nd { cursor: pointer; }
.arch-nd:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }
.arch-nd.sel rect { stroke: var(--gold); stroke-width: 3; }
.js .arch-panel { display: block; margin-bottom: 18px; padding: 22px 26px; border: 1px solid var(--gold); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
/* Upstream hid .node-grid whenever JS ran, because there it was the no-JS
   fallback for the interactive architecture panel. No Geller page uses
   .arch-panel, and .node-grid is used as a real card grid — so the hide is
   scoped to pages that actually have a panel to swap in. */
.js body:has(.arch-panel) .node-grid { display: none; }
.arch-panel h3 { margin-bottom: 8px; font-size: 22px; }
.arch-panel p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.node-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.node-card { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.node-tag { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.tag-green { color: var(--green); background: var(--green-wash); }
.tag-steel { color: var(--steel); background: var(--steel-wash); }
.tag-gold { color: var(--gold-ink); background: var(--gold-wash); }
.tag-plain { color: var(--ink-soft); background: var(--wash); }
.node-card h3 { margin-bottom: 8px; font-size: 20px; }
.node-card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.truths { padding: 24px 28px; border-radius: var(--radius); color: var(--white); background: var(--navy); }
.truths h3 { margin-bottom: 16px; color: var(--white); font-size: 21px; }
.truths dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; }
.truths dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #AEBCCC; margin-bottom: 4px; }
.truths dd { margin: 0; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--gold); }

/* ---------- timeline (LIGHT, per design) ---------- */
.seq-card, .legend-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.seq-card { padding: 24px 28px; margin-bottom: 14px; }
.seq-label { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.seq-bar { display: flex; gap: 4px; margin-bottom: 10px; }
.seg { display: grid; place-items: center; height: 40px; border-radius: 8px; font-family: var(--serif); font-weight: 600; font-size: 15px; }
.seg-building { background: var(--gold-wash-2); color: #7A5307; }
.seg-staging { background: var(--steel-wash); color: #16457F; }
.seg-planning { background: #ECE8DE; color: #514D45; }
.f-05 { flex: 0.5 1 0; } .f-06 { flex: 0.6 1 0; } .f-10 { flex: 1 1 0; } .f-14 { flex: 1.4 1 0; } .f-16 { flex: 1.6 1 0; }
.seq-note { margin: 0 0 22px; font-size: 13.5px; color: var(--muted); }
.seq-note:last-child { margin-bottom: 0; }
.cal { margin-bottom: 10px; }
.cal-weeks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-weeks span { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--steel-soft); border-left: 1px solid var(--line); padding-left: 6px; }
.cal-rows { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px 4px; margin-bottom: 14px; }
.cal-bar { padding: 7px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.bg-building { background: var(--gold-wash-2); color: #7A5307; }
.bg-staging { background: var(--steel-wash); color: #16457F; }
.bg-planning { background: #ECE8DE; color: #514D45; }
.c-1-3 { grid-column: 1 / 3; } .c-3-4 { grid-column: 3 / 4; } .c-4-6 { grid-column: 4 / 6; } .c-6-8 { grid-column: 6 / 8; } .c-8-9 { grid-column: 8 / 9; }
.cal-checkpoints { display: flex; justify-content: space-between; gap: 10px; margin: 0; flex-wrap: wrap; }
.cal-checkpoints span { font-size: 12.5px; font-weight: 700; color: var(--gold-ink); }

.legend-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 22px; margin-bottom: 18px; font-size: 13.5px; }
.lg-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.lg-div { width: 1px; height: 22px; background: var(--line); }
.lg-mod i, .lg-read i { display: inline-block; width: 14px; height: 14px; border-radius: 5px; vertical-align: -2px; margin-right: 5px; }
.lg-mod i { background: var(--navy); }
.lg-read i { border: 2px solid var(--steel-soft); background: var(--white); }
.badge { padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.badge-invisible { color: var(--ink-soft); background: var(--wash); }
.badge-staff { color: var(--steel); background: var(--steel-wash); }
.badge-client { color: var(--gold-ink); background: var(--gold-wash); }
.badge-phased { color: #3A4657; background: #EEECF3; }

.expand-row { margin: 0 0 10px; text-align: right; }
.expand-btn { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--gold-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.expand-btn:hover { border-color: var(--gold); }
.expand-btn:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }

.stage-list { display: grid; gap: 0; }
.stage-row { display: grid; grid-template-columns: 64px 1fr; align-items: start; }
.stage-code { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 14px; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--serif); font-size: 19px; font-weight: 600; }
.stage-row { position: relative; padding-bottom: 14px; }
.stage-row::before { content: ''; position: absolute; left: 21px; top: 14px; bottom: -14px; width: 2px; background: #E0D3B4; }
.stage-row:last-child::before { bottom: auto; height: 44px; }
.stage { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.stage summary { display: grid; grid-template-columns: 44px 1fr auto auto auto; gap: 16px; align-items: center; min-height: 76px; padding: 14px 22px; cursor: pointer; list-style: none; }
.stage summary::-webkit-details-marker { display: none; }
.stage summary::after { content: '▼ expand'; font-size: 13px; font-weight: 700; color: var(--gold-ink); white-space: nowrap; }
.stage[open] summary::after { content: '▲ collapse'; }
.stage summary:focus-visible { outline: 3px solid var(--steel); outline-offset: -3px; }
.sr-track { stroke: var(--wash); }
.sr-fill { stroke-dasharray: 87.96 87.96; transform: rotate(-90deg); transform-origin: 18px 18px; }
.sr-building { stroke: var(--gold); }
.sr-33 { stroke-dashoffset: 58.9; }
.sr-text { fill: var(--ink-soft); font-family: var(--sans); font-size: 9.5px; font-weight: 700; }
.stage-head strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 21px; font-weight: 600; }
.stage-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.chip-dur { padding: 5px 12px; border-radius: 999px; background: var(--wash); color: var(--ink-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.stage-body { padding: 4px 24px 22px 82px; border-top: 1px solid var(--line-soft); color: var(--ink-soft); }
.stage-obj { margin: 14px 0 12px; color: var(--ink); font-family: var(--serif); font-size: 17px; font-style: italic; }
.checks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
.checks.cols-2 { grid-template-columns: 1fr 1fr; }
.ck-done { color: var(--green); }
.ck-open { color: #7C7666; }
.src-chip { display: inline-block; margin-left: 6px; padding: 1px 9px; border: 1px solid #B9C2CE; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--navy); background: var(--white); }
.src-auto { border-style: dashed; color: var(--muted); background: var(--wash); }
.gate-band { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid #EAD9AE; border-radius: 10px; background: var(--gold-wash); color: var(--ink); font-size: 15px; }
.gate-band span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
.stage-meta { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1.4fr; gap: 18px; font-size: 13.5px; color: var(--ink-soft); }
.stage-meta span:first-child, .stage-meta > div > span:first-child { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.sys-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.sys-chips i { font-style: normal; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.sc-mod { color: var(--white); background: var(--navy); }
.sc-read { color: var(--navy); background: var(--white); border: 1px solid #B9C2CE; }
.sc-new { color: var(--white); background: var(--gold-ink); }
.pay-callout { margin: 0 0 16px; padding: 20px 24px; border: 1px solid #EAD9AE; border-left: 4px solid var(--gold); border-radius: 10px; background: var(--gold-wash); }
.pay-callout h3 { margin-bottom: 10px; font-size: 21px; }
.pay-callout p { margin-bottom: 10px; font-size: 14px; color: #4A3C1C; }
.pay-callout p:last-child { margin-bottom: 0; }

/* ---------- matrix ---------- */
.matrix-callout { margin-bottom: 22px; padding: 26px 32px; border-radius: var(--radius); background: var(--navy); color: #DCE3ED; font-size: 18px; }
.matrix-callout p { margin: 0; }
.matrix-callout strong { color: var(--gold); }
.matrix { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--white); box-shadow: var(--shadow); }
.mx-row { display: grid; grid-template-columns: 90px repeat(8, minmax(78px, 1fr)); align-items: center; border-bottom: 1px solid var(--line-soft); min-width: 740px; }
.mx-row:last-child { border-bottom: 0; }
.mx-row > span { padding: 14px 10px; text-align: center; font-size: 20px; line-height: 1; }
.mx-head { border-bottom: 1px solid var(--line); }
.mx-head > span { color: var(--navy); font-size: 13px; font-weight: 700; }
.mx-head > span:first-child { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.mx-stage { font-family: var(--serif); font-weight: 700; color: var(--gold-ink); font-size: 18px; }
.mx-mod { color: var(--navy); }
.mx-new { color: var(--gold); }
.mx-read { color: var(--muted); }
.mx-none { color: #D8D2C2; }
.mx-legend { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.mx-legend span { font-size: 17px; }

/* ---------- compliance (DARK, per design) ---------- */
.disclaimer { margin: -10px 0 26px; max-width: 860px; font-size: 14px; font-style: italic; color: #AEBCCC; }
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.section-dark .control-panel { padding: 26px 30px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); background: rgba(255,255,255,.05); }
.section-dark .control-panel .mini-label { color: var(--gold); }
.section-dark .control-panel h3 { margin: 8px 0 12px; color: var(--white); font-size: 23px; }
.section-dark .control-panel p { font-size: 14.5px; color: #C7D2E1; }
.quote { padding-left: 14px; border-left: 3px solid var(--gold); font-style: italic; }
.rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 30px; }
.rules-grid article { padding: 20px 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.05); }
.rules-grid h4 { margin-bottom: 6px; font-family: var(--sans); font-size: 16.5px; font-weight: 700; color: var(--white); }
.rules-grid p { margin: 0; font-size: 14px; color: #C7D2E1; }
.compliance-close { margin: 0 auto; max-width: 760px; font-family: var(--serif); font-size: 22px; color: var(--white); text-align: center; }

/* ---------- coverage: filter + phase cards + navy band ---------- */
.filter-row { display: flex; gap: 8px; margin-bottom: 18px; }
.filter-btn { padding: 9px 20px; border: 1px solid #D8D2C2; border-radius: 999px; background: var(--white); font-size: 13.5px; font-weight: 700; color: #44413A; cursor: pointer; }
.filter-btn:hover { border-color: var(--navy); }
.filter-btn:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }
.filter-btn.on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.phase-card { padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.ph-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.ph-n { flex: none; font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--gold-ink); line-height: 1.5; }
.ph-head h3 { flex: 1; margin: 0; font-family: var(--sans); font-size: 19px; font-weight: 700; color: var(--navy); }
.ph-head .pill { flex: none; }
.phase-card > p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.coverage-band { padding: 22px 30px; border-radius: var(--radius); background: var(--navy); text-align: center; }
.coverage-band p { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; font-size: 16px; }
.coverage-band .t-done { color: var(--green-soft); }
.coverage-band .t-building { color: var(--gold); }
.coverage-band .t-planning { color: #C9C3B4; }
.cb-note { margin-top: 6px; color: #AEBCCC; font-size: 14px; }
.coverage-band .cb-note { display: block; }

/* ---------- safety ---------- */
.safety-mega { margin-bottom: 16px; padding: 34px 38px; border-radius: var(--radius); color: var(--white); background: var(--navy); }
.safety-mega h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--white); font-size: 26px; }
.dot-green { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--green-soft); }
.safety-mega > p { max-width: 940px; color: #C7D2E1; font-size: 15.5px; }
.sm-em { color: #AEBCCC; }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 16px; }
.tile-grid p { margin: 0; padding: 13px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.05); color: #DCE3ED; font-size: 13.5px; }
.safety-next { margin: 0; padding: 10px 14px; border-radius: 8px; background: rgba(201,150,46,.15); color: #E8CE8F; font-size: 13.5px; }
.controls-row { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.ctrl-table { padding: 26px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.ctrl-table h3 { margin-bottom: 16px; font-size: 21px; }
.ctrl-table dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 0; }
.ctrl-table dt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 3px; }
.ctrl-table dd { margin: 0; font-family: var(--serif); font-size: 15.5px; font-weight: 600; color: var(--navy); }
.kill-box { padding: 26px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.kill-box h3 { margin-bottom: 10px; font-size: 19px; }
.kill-box p { font-size: 13.5px; color: var(--muted); }
.kill-box ul { margin: 0; padding-left: 4px; list-style: none; font-size: 14px; color: var(--ink-soft); }
.kill-box li { margin-bottom: 7px; }
.kill-box li::first-letter { color: var(--navy); }

/* ---------- decisions ---------- */
.decision-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 26px; padding: 0; }
.decision-grid li { padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.dc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); font-family: var(--sans); font-size: 18px; font-weight: 800; }
.decision-grid h3 { margin-bottom: 8px; font-family: var(--sans); font-size: 20px; font-weight: 700; color: var(--navy); }
.decision-grid p { margin-bottom: 10px; font-size: 14.5px; color: var(--ink-soft); }
.unblocks { margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.decisions-close { margin: 0; max-width: 820px; font-family: var(--serif); font-size: 20px; color: var(--navy); }

/* ---------- source note + footer ---------- */
.source-note { padding: 46px 0; color: var(--white); background: linear-gradient(180deg, #1F6B43, #185536); }
.source-note-inner { display: grid; grid-template-columns: .55fr 1.45fr; gap: 50px; align-items: center; }
.source-note .mini-label { margin-bottom: 6px; color: #CDEBD9; }
.source-note h2 { margin-bottom: 0; color: var(--white); font-size: 27px; }
.source-note p:last-child { margin-bottom: 0; color: #E4F2E9; }
footer { padding: 28px 0; color: #C7D2E1; background: var(--navy-deep); }
.footer-inner { display: flex; justify-content: space-between; gap: 28px; font-size: 12.5px; }
.footer-inner strong { color: var(--white); }

/* ---------- motion ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,194,154,.55); } 50% { box-shadow: 0 0 0 8px rgba(124,194,154,0); } }
.hero .shell > * { animation: fadeUp .7s ease both; }
.js [data-fade] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js [data-fade].in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .js .kb-rail { grid-template-columns: repeat(4, 1fr); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stage-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  nav { display: none; }
  .controls-grid, .rules-grid, .phase-grid, .decision-grid, .controls-row, .tile-grid, .legend-panel { grid-template-columns: 1fr; }
  .node-grid { grid-template-columns: repeat(2, 1fr); }
  .truths dl { grid-template-columns: repeat(2, 1fr); }
  .wr { grid-template-columns: 1fr 130px; }
  .wr-cell { display: none; }
  .wr-head { display: none; }
  .kb-cols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .shell { width: min(100% - 32px, 1160px); }
  .hero { padding-top: 54px; }
  .hero h1 { font-size: 36px; }
  .stat-grid, .node-grid, .source-note-inner { grid-template-columns: 1fr; }
  .js .kb-rail { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 58px 0 46px; }
  .stage-row { grid-template-columns: 1fr; }
  .stage-row::before { display: none; }
  .stage-code { display: none; }
  .stage summary { grid-template-columns: 36px 1fr; }
  .stage summary .chip-dur, .stage summary .pill { grid-column: 2; justify-self: start; }
  .stage summary::after { grid-column: 2; justify-self: start; }
  .stage-body { padding-left: 22px; }
  .checks.cols-2 { grid-template-columns: 1fr; }
  .stage-meta { grid-template-columns: 1fr; }
  .wr { grid-template-columns: 1fr; }
  .wr-meter { margin-top: 8px; }
  .cal-checkpoints { flex-direction: column; gap: 4px; }
  .summary-strip { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .scroll-progress { display: none; }
  .js [data-fade] { opacity: 1; transform: none; }
}

/* ---------- print ---------- */
@media print {
  @page { margin: .55in; }
  body { color: #000; background: #fff; font-size: 10pt; }
  .site-header, .hero-actions, .skip-link, .scroll-progress, .filter-row, .expand-row { display: none !important; }
  .hero, .section-dark, .source-note, footer, .legend-panel, .matrix-callout, .safety-mega, .truths, .kb-sample, .coverage-band { color: #000 !important; background: #fff !important; border: 1px solid #777; }
  .hero { padding: 0 0 20px; border: 0; }
  .hero h1, .section-dark .section-heading h2, .source-note h2, .safety-mega h3, .truths h3,
  .section-dark .control-panel h3, .rules-grid h4, .compliance-close { color: #000 !important; }
  .hero-lede, .hero-serif, .hero-position, .stat-card p, .section-dark .section-heading p, .disclaimer,
  .section-dark .control-panel p, .rules-grid p, .safety-mega > p, .tile-grid p, .truths dd, .ctrl-table dd,
  .source-note p:last-child, .footer-inner, .legend-panel p, .matrix-callout p, .kb-sample .mono, .kb-sample-note,
  .coverage-band p { color: #222 !important; }
  .eyebrow, .eyebrow-2, .stat-value, .section-dark .section-number, .kb-sample-title, .safety-next { color: #6B4E0A !important; }
  .stat-card, .stage, .seq-card, .legend-card, .control-panel, .rules-grid article, .tile-grid p,
  .phase-card, .decision-grid li, .node-card, .ws-card, .ctrl-table, .kill-box, .arch-figure { break-inside: avoid; box-shadow: none; }
  .section, .source-note, .connected { padding: 22px 0; }
  .section-heading { margin-bottom: 16px; }
  details > * { display: block; }
  .stage summary::after { display: none; }
  .js .kb-all { display: block; }
  .js .kb-rail, .js .kb-panel, .js .arch-panel { display: none !important; }
  .js .node-grid { display: grid; }
  .matrix { overflow: visible; }
  .mx-row { min-width: 0; }
  a { text-decoration: none; }
  * { animation: none !important; }
}

/* ---------- owner register table (Geller addition) ---------- */
.tbl-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; min-width: 680px; }
.tbl thead th { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tbl td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--card); }
.tbl .own { font-weight: 700; color: var(--navy); white-space: nowrap; }
.tbl .when { font-weight: 600; color: var(--gold-ink); white-space: nowrap; }
.tbl strong { color: var(--navy); }
.tbl-group td { background: var(--card); color: var(--gold-ink); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 700px) { .tbl { min-width: 560px; } }

/* ---------- spacing utilities ---------- */
.mt-4 { margin-top: 34px; }
.mb-2 { margin-bottom: 14px; }

/* ---------- video embed ---------- */
.video-frame { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.video-frame video { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--navy-deep); }
.video-frame figcaption { margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.video-frame figcaption strong { color: var(--navy); }
.video-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.video-meta li { display: inline-flex; align-items: center; gap: 6px; }
.video-meta li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
@media print { .video-frame video { display: none; } .video-frame::after { content: 'Video: findings overview — 1 min 41 s'; display: block; color: #222; font-style: italic; } }