/* ─────────────────────────────────────────────────────────────────────────
   PLANISPHERE — DESIGN SYSTEM
   A single sheet. Static delivery. No build. No utilities framework.

   Layers:
     1. Tokens          design primitives
     2. Base            reset + typography defaults
     3. Layout          shell, grid primitives, marginalia
     4. Chrome          masthead, colophon
     5. Components      hero, sections, prose, callouts, buttons, data-table
     5.5 Cards          regime-row, sub-cards, delivers, section-signature
     6. Utilities       small atomic helpers
     7. Responsive
     8. Print
     8.5 Carry-over     body-grid, proc-block, spec-table (legacy primitives)
     9. Motion preferences
   ────────────────────────────────────────────────────────────────────────── */


/* ── 1. TOKENS ──────────────────────────────────────────────────────────── */

:root {
  /* color — paper & ink */
  --ink:         #0A0E14;
  --ink-2:       #1A1F26;
  --ink-3:       #3A424E;
  --paper:       #F4F1EA;   /* Vellum  · brand primary 20%  · PSP-001 §03 */
  --paper-2:     #E8E3D7;   /* Linen   · brand secondary    · PSP-001 §03 */
  --paper-3:     #DAD3C2;   /* Sand    · brand secondary    · PSP-001 §03 */
  --void:        #060810;   /* Void    · brand primary 70%  · PSP-001 §03 */

  /* color — accent */
  --brass:       #B8915A;
  --brass-deep:  #745030;  /* darkened from #8C6A3F to pass WCAG AA on paper (was 4.40:1, now 5.30:1) */
  --brass-light: #D4B485;
  --signal:      #C4452E;   /* errors, deltas */
  --plot:        #2D5A4F;   /* secondary plot color */
  --blood:       #7C1A1A;   /* regulatory crimson — duties-in-scope marker */

  /* Canonical tile colorway — load-bearing brand additions (soc-710).
     Each token names a tile role on the home page. Don't reuse for non-tile
     contexts without updating the brand brief; semantic ownership matters. */
  --port-navy:          #14283C;  /* Port tile — inbound architecture */
  --starboard-crimson:  #8C2A2A;  /* Starboard tile — outbound architecture */
  --off-white:          #FAF7EE;  /* vertical cards — Defense · Medicine · Law · Education */
  --stone:              #A8A095;  /* vertical card border — flat stone (soc-711) */
  --charcoal:           #2A2F36;  /* misc cards — Methodology · Technical Walkthrough · Reviewer Check */
  --flat-brass:         #9A7E4A;  /* Corpus tile — flat brass, the routing spine */

  /* Homepage manifest overlay (Backstaff host + kits rail) — single source of truth for the tall band. Change the split here to rebalance text zone vs. kits. */
  --manifest-backstaff-kits-split: 83.7%;
  --manifest-backstaff-min-height: 550px;
  --manifest-kits-rail-min-height: 550px;
  --manifest-kits-card-min-height: 456px;
  --manifest-backstaff-kits-pull: -570px;

  /* rules */
  --rule:        #2A2F36;
  --rule-soft:   rgba(10, 14, 20, 0.12);
  --rule-hair:   rgba(10, 14, 20, 0.06);

  /* type */
  --serif: 'Fraunces', 'Iowan Old Style', 'Times New Roman', Georgia, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', monospace;

  /* type scale (modular, ~1.2 step, capped fluid) */
  --t-eyebrow: 13px;
  --t-mono:    12px;
  --t-body:    16px;
  --t-prose:   18px;
  --t-lede:    clamp(20px, 1.4vw + 14px, 28px);
  --t-h3:      clamp(22px, 1.8vw + 12px, 30px);
  --t-h2:      clamp(34px, 4vw + 12px, 60px);
  --t-h1:      clamp(48px, 7.5vw + 8px, 112px);
  --t-display: clamp(40px, 6vw + 8px, 88px);

  /* space scale (4px base) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;

  /* layout */
  --shell-max:    1280px;
  --shell-pad:    56px;
  --shell-pad-sm: 22px;
  --margin-col:   88px;   /* marginalia rail */

  /* motion */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast:      120ms;
  --t-med:       240ms;
}


/* ── 2. BASE ────────────────────────────────────────────────────────────── */

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  border-top: 3px solid var(--brass-deep);
}

/* very low-opacity radial — gives the paper a tiny bit of depth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(184,145,90,0.04), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(10,14,20,0.04), transparent 50%);
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--brass-deep); }

::selection { background: var(--brass-light); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 3px;
}

/* skip-link, for keyboard users */
.skip-link {
  position: absolute;
  top: -100px; left: var(--s-4);
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-5);
  font-family: var(--mono); font-size: var(--t-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  z-index: 100;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s-3); }


/* ── 3. LAYOUT ──────────────────────────────────────────────────────────── */

.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

/* marginalia grid — a vertical rule and a small label column at left,
   main content at right. Used inside body sections. */
.marg {
  display: grid;
  grid-template-columns: var(--margin-col) 1fr;
  gap: var(--s-7);
  align-items: start;
}
.marg > .rail {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding-top: var(--s-1);
  position: relative;
}
.marg > .rail::after {
  content: "";
  display: block;
  width: 1px; height: 24px;
  background: var(--rule-soft);
  margin-top: var(--s-3);
}
.marg > .main { max-width: 70ch; }


/* ── 4. CHROME — masthead, nav, colophon ─────────────────────────────── */

/* Merged masthead — brand on the left, nav inline to the right. */
.masthead {
  padding: var(--s-2) 0 var(--s-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.masthead .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
  transition: color 160ms ease;
}
.masthead .brand svg {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.masthead .brand:hover svg { transform: rotate(-6deg); }
.masthead .brand:hover .brand-name { color: var(--brass-deep); }
/* oversized wordmark lockup: brass orb of Atlas seated in the p counter */
.masthead .brand svg.brand-wordmark {
  width: auto;
  height: clamp(40px, 3vw + 16px, 56px);
  transition: color 160ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.masthead .brand:hover svg.brand-wordmark { transform: none; color: var(--brass-deep); }
.masthead .brand-name {
  font-family: var(--serif);
  font-size: clamp(26px, 2vw + 14px, 36px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.014em;
  text-transform: none;
  line-height: 1;
  transition: color 160ms ease;
}
.masthead .brand-name em { color: var(--brass-deep); font-style: italic; }

/* Global breadcrumb (soc-711) — path-derived trail injected by
   /global-nav.js into every masthead that doesn't already carry one.
   NOT a navigation bar — just the trail showing where you are. */
.masthead .global-breadcrumb {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.masthead .global-breadcrumb a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 80ms;
}
.masthead .global-breadcrumb a:hover { color: var(--brass-deep); }
.masthead .global-breadcrumb [aria-current="page"] { color: var(--ink); }
.masthead .global-breadcrumb .crumb-sep { color: var(--ink-3); padding: 0 2px; }
.masthead .masthead-cta {
  margin-left: auto;
  padding: 8px var(--s-4);
  font-size: 11px;
  letter-spacing: 0.14em;
  align-self: center;
}

@media (max-width: 760px) {
  .masthead { padding: var(--s-5) 0; gap: var(--s-4); }
  .masthead .brand svg { width: 32px; height: 32px; }
  .masthead .brand svg.brand-wordmark {
    width: min(220px, 58vw);
    height: auto;
  }
  .masthead .masthead-cta {
    margin-left: 0;
    white-space: normal;
  }
}

.psp-templatenav,
.psp-breadcrumb {
  flex-wrap: wrap !important;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .psp-templatenav,
  .psp-breadcrumb {
    gap: 8px 12px !important;
    letter-spacing: 0.07em !important;
  }
}

/* ── colophon — the foot, compact band ───────────────────────────────────
   Reduced from a 3-column 440 px block to a 2-row ~90 px band. The
   masthead now carries the full Planı*sphere* lockup; the footer no
   longer needs a redundant 56 px wordmark. Critical creative call:
   the Napoleon Hill epigraph is brand voice and stays — as a thin
   italic anchor line beneath the functional row, not as a 2-line block
   under a giant wordmark. Three colo-cols still exist in markup (so no
   per-page edits across the 9 surfaces); CSS just flattens them into
   one horizontal flow with middle-dot separators between every item.
*/
.colophon {
  border-top: 1px solid var(--rule);
  /* Linen background so the footer reads as one continuous zone with
     whatever section precedes it (most importantly the home's
     .aicons-verticals, which is also paper-2). Without this, the
     internal padding showed the body's vellum (paper) color as a
     visible band between section and footer content. */
  background: var(--paper-2);
  /* Internal padding (was 64/28). Trimmed top to keep the functional
     row close to the rule line; bottom reserves the absolute-quote
     channel that lives along the colophon's bottom edge. */
  padding: var(--s-6) 0 var(--s-8);
  position: relative;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-2);
}

.colophon .manifest-heading-closer {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--s-8) var(--shell-pad) var(--s-5);
  text-align: left;
  font-size: clamp(38px, 5vw + 8px, 78px);
  line-height: 0.9;
  letter-spacing: -0.034em;
  border-bottom: 1px solid rgba(10, 14, 20, 0.16);
}
.colophon .manifest-heading-closer em {
  color: var(--brass-deep);
}

@media (max-width: 760px) {
  .colophon .manifest-heading-closer {
    padding: var(--s-7) var(--shell-pad-sm) var(--s-5);
    font-size: clamp(36px, 12vw, 58px);
  }
}

/* Row 1 — the functional band. Brand chip + surfaces nav + entity + ©
   live on the same horizontal line, separated by hair gaps. Wraps on
   narrow viewports without changing the markup. */
.colophon .colo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 var(--s-3);
  row-gap: var(--s-1);
}

/* The big Planisphere wordmark shrinks to a thin chip. The masthead is
   the canonical brand surface now. */
.colophon .colo-mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.colophon .colo-mark em { color: var(--brass-deep); }

/* The three colo-cols become inline rather than columns. Each one is
   its own little inline cluster — brand, surfaces, entity. The hidden
   "Surfaces" / "Entity" labels were column-header niceties that read
   as noise in a horizontal band. */
.colophon .colo-col {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--s-2);
  margin: 0;
  padding: 0;
}
.colophon .colo-col span { display: none; }      /* drop the column labels */
.colophon .colo-col br  { display: none; }       /* flatten entity stacked text */
.colophon .colo-col .footer-group-label {
  display: inline-block;
  margin-right: var(--s-1);
  color: var(--brass-deep);
  font-size: 10px;
  letter-spacing: 0;
}
.colophon .colo-col .footer-group-label::after {
  content: "/";
  margin-left: var(--s-2);
  color: var(--ink-3);
  opacity: 0.45;
}

/* Surfaces list — inline pills separated by middle dots. ::after lays
   the dot down so we never need to touch the markup. */
.colophon .colo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 var(--s-2);
}
.colophon .colo-list li { display: inline; line-height: 1.5; }
.colophon .colo-list li + li::before {
  content: "·";
  margin-right: var(--s-2);
  opacity: 0.4;
  color: var(--brass-deep);
}
.colophon .colo-list a {
  color: var(--ink);
  text-decoration: none;
  border: 0;
}
.colophon .colo-list a:hover { color: var(--brass-deep); }

/* Entity column — flatten the corp/email/patent stack into an inline
   row with middle-dot separators. The mailto link stays its own
   element so the colors still split. */
.colophon .colo-col:last-child {
  gap: 0;
  word-spacing: 0.25em;
}
.colophon .colo-col:last-child a {
  color: var(--brass-deep);
  text-decoration: none;
  display: inline;            /* stop the email link from grabbing its own row */
}
/* Insert middle-dot separators around the email link so the three
   entity text-blocks (corp, email, patent) read as distinct items
   instead of running together once the <br>s are hidden. */
.colophon .colo-col:last-child a::before {
  content: " · ";
  margin: 0 0.25em 0 0.5em;
  color: var(--brass-deep);
  opacity: 0.4;
}
.colophon .colo-col:last-child a::after {
  content: " · ";
  margin: 0 0.5em 0 0.25em;
  color: var(--brass-deep);
  opacity: 0.4;
}

/* © line drops onto the end of row 1 rather than spinning into its
   own bottom band. */
.colophon .colo-bottom {
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  flex: 1 1 auto;
  text-align: center;
}

/* Row 2 — the Napoleon Hill anchor. Single italic line, dim, centered.
   Lives below the functional row as the brand voice trailing the page,
   not buried in column-1 anymore. */
.colophon .footer-quote {
  /* Quote placed directly under Manifest Destiny.
     One line, slightly smaller than previous large version, higher legibility. */
  margin: var(--s-4) 0 var(--s-6);
  padding: 0 var(--s-4);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.01em;
  text-transform: none;
  opacity: 1;
}
.colophon .footer-quote .attrib {
  display: block;
  margin-left: 0;
  margin-top: var(--s-2);
  font-style: normal;
  font-family: var(--mono);
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-deep);
  opacity: 0.85;
}
.colophon .footer-quote .attrib em { font-style: italic; }
/* The markup already supplies the em-dash; CSS doesn't add a second. */


/* ── 5. COMPONENTS ─────────────────────────────────────────────────────── */

/* HERO ----------------------------------------------------------------- */
.hero {
  padding: var(--s-11) 0 var(--s-12);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
/* faint horizon line — the "plane the celestial sphere projects onto" */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%, var(--brass) 15%, var(--brass) 85%, transparent 100%);
  opacity: 0.25;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-12);
  align-items: center;
}
.hero-grid.hero-proof-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
  align-items: end;
  gap: var(--s-10);
}
/* Defensive: grid items default to min-width:auto which can blow grid cells
   wider than their intended track when a child's min-content exceeds it
   (long unbreakable phrases, tight letter-spacing). Setting min-width:0
   lets grid cells stay at their flex-fraction width regardless of content. */
.hero-grid > * { min-width: 0; }
.hero-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: var(--s-7);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.hero-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--brass);
}
/* Count Donkalok — the Article 50 countdown, in the hero title's accent color
   (.hero h1 em is var(--brass-deep)). opacity:1 lifts it out of the eyebrow's
   0.65 dim so the accent reads true. */
#a50-countdown {
  color: var(--brass-deep);
  opacity: 1;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 0.93;
  letter-spacing: -0.038em;
  margin-bottom: var(--s-7);
}
.hero h1 em { font-style: italic; font-weight: 300; color: var(--brass-deep); }
.hero-lede {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.4;
  font-weight: 300;
  max-width: 56ch;
  color: var(--ink-2);
  margin-bottom: var(--s-8);
}
.hero-lede em { color: var(--brass-deep); font-style: italic; }

.proof-object {
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-2) 72%, transparent);
  padding: var(--s-5);
  color: var(--ink);
}
.proof-object-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--s-4);
}
.proof-object-title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.08;
  font-weight: 300;
  margin-bottom: var(--s-4);
}
.proof-object-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.36fr) 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.proof-object-row strong {
  color: var(--brass-deep);
  font-weight: 500;
}
.proof-object-row span:last-child {
  color: var(--ink-2);
}
.proof-object-note {
  margin-top: var(--s-4);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-2);
}
.proof-object .demo-actions,
.proof-object .dropzone {
  margin-top: 0;
}
.proof-object .error-block {
  margin-top: var(--s-4);
}

/* Surface bridge ------------------------------------------------------ */
.surface-bridge {
  padding: var(--s-8) 0 var(--s-10);
  border-bottom: 1px solid var(--rule);
}
.surface-bridge-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: stretch;
}
.surface-bridge-copy {
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.surface-bridge-label,
.surface-lane-kicker,
.surface-lane-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: uppercase;
}
.surface-bridge-label {
  display: block;
  color: var(--brass-deep);
  margin-bottom: var(--s-5);
}
.surface-bridge-copy h2 {
  max-width: 12ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0;
}
.surface-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
.surface-lane {
  min-height: 236px;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
  text-decoration: none;
  transition:
    transform var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.surface-lane:hover {
  transform: translateY(-3px);
  color: inherit;
  border-color: var(--brass);
}
.surface-lane-marketing {
  background: var(--void);
  border-color: var(--void);
  color: var(--paper);
}
.surface-lane-marketing:hover {
  background: #101723;
  color: var(--paper);
}
.surface-lane-corpus {
  background: var(--paper-2);
}
.surface-lane-corpus:hover {
  background: var(--paper-3);
}
.surface-lane-kicker {
  color: currentColor;
  opacity: 0.7;
}
.surface-lane strong {
  display: block;
  max-width: 17ch;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.surface-lane-cta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid currentColor;
  opacity: 0.82;
  overflow-wrap: anywhere;
}

.corpus-exit {
  padding: var(--s-6) 0 var(--s-7);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-2) 58%, transparent);
}
.corpus-exit-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}
.corpus-exit-copy {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
}
.corpus-exit-copy h2 {
  max-width: 14ch;
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
}
.corpus-exit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-3);
}

@media (max-width: 760px) {
  .corpus-exit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .corpus-exit-actions {
    justify-content: flex-start;
  }
  .corpus-exit-actions .btn {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .surface-bridge-grid,
  .surface-lanes {
    grid-template-columns: minmax(0, 1fr);
  }
  .surface-bridge-copy h2 {
    max-width: 14ch;
    font-size: 38px;
  }
  .surface-lane {
    min-height: 210px;
  }
}

@media (max-width: 560px) {
  .surface-bridge {
    padding: var(--s-7) 0 var(--s-8);
  }
  .surface-bridge-copy h2 {
    font-size: 34px;
  }
  .surface-lane {
    min-height: 190px;
    padding: var(--s-4);
  }
  .surface-lane strong {
    max-width: none;
    font-size: 24px;
  }
}

/* SECTION + HEAD ------------------------------------------------------- */
section.psp-section {
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--rule);
}
section.psp-section:last-of-type { border-bottom: 0; }

.section-head {
  display: grid;
  grid-template-columns: var(--margin-col) 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-10);
  align-items: baseline;
}
.section-num {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 0.98;
  letter-spacing: -0.024em;
}
.section-title em { font-style: italic; color: var(--brass-deep); }
.section-kicker {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: var(--s-4);
  opacity: 0.6;
}

/* prose / body content ------------------------------------------------- */
.lede {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: -0.008em;
  margin-bottom: var(--s-9);
  color: var(--ink);
}
.lede em { color: var(--brass-deep); font-style: italic; }

.prose {
  font-family: var(--serif);
  font-size: var(--t-prose);
  line-height: 1.6;
  font-weight: 300;
  color: var(--ink-2);
}
.prose p   { margin-bottom: var(--s-6); }
.prose em  { font-style: italic; color: var(--brass-deep); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose code   { font-family: var(--mono); font-size: 0.9em; background: var(--paper-2);
                padding: 1px 6px; border-radius: 2px; overflow-wrap: anywhere; }
.prose a { text-decoration-thickness: 1px; }
.prose h3 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 300; font-style: italic;
  color: var(--ink);
  margin: var(--s-9) 0 var(--s-4);
  letter-spacing: -0.012em;
  line-height: 1.15;
}
.prose h3 em { color: var(--brass-deep); }
.prose ul, .prose ol { padding-left: var(--s-6); margin-bottom: var(--s-6); }
.prose li { margin-bottom: var(--s-2); padding-left: var(--s-1); }
.prose ul li::marker { color: var(--brass); }

pre.prose,
.code-block {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
pre.prose code,
.code-block code {
  display: block;
  min-width: 100%;
  width: max-content;
}

/* DATA TABLE ---------------------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-7) 0;
  font-family: var(--sans);
  font-size: 14px;
}
.data-table th, .data-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.data-table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.data-table tr:hover td { background: var(--paper-2); }
.data-table code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 2px;
}

.table-scroll,
.packet-card {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.packet-table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 760px) {
  .graph-table,
  .packet-table {
    min-width: 420px;
  }
}

/* CALLOUT ------------------------------------------------------------- */
.callout {
  border-left: 2px solid var(--brass);
  padding: var(--s-4) 0 var(--s-4) var(--s-6);
  margin: var(--s-7) 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
}
.callout em { color: var(--brass-deep); }

/* GLOSS CARDS --------------------------------------------------------- */
.gloss-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-7) 0;
}
.gloss-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gloss-card {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  padding: var(--s-4) 0 var(--s-5);
  min-width: 0;
}
.gloss-card .gloss-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--s-2);
}
.gloss-card .gloss-v {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 300;
  color: var(--ink);
}
.gloss-card .gloss-note {
  margin-top: var(--s-3);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .gloss-grid,
  .gloss-grid.two {
    grid-template-columns: 1fr;
  }
}

/* PRODUCT-SPINE COMPONENTS --------------------------------------------- */
.artifact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  max-width: 860px;
}
.artifact-strip span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid var(--rule-soft);
  background: rgba(244, 241, 234, 0.62);
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.layer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule-soft);
  background: rgba(10, 14, 20, 0.03);
}
.layer-grid article {
  min-height: 172px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), transparent 48%),
    rgba(244, 241, 234, 0.78);
  padding: var(--s-5);
}
.layer-grid article span,
.proof-ledger > div span,
.packet-card-head span,
.boundary-panel h3 {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.layer-grid article p {
  max-width: 32ch;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-2);
}

.runbook-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.runbook-grid article {
  min-width: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  padding: var(--s-5) 0 var(--s-6);
}
.runbook-grid article > span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brass);
  margin-bottom: var(--s-5);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brass-deep);
}
.runbook-grid h3 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.014em;
  margin-bottom: var(--s-3);
}
.runbook-grid p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-3);
}

.readout-stack {
  display: grid;
  gap: var(--s-3);
  max-width: 980px;
}
.readout-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  border: 1px solid var(--rule-soft);
  border-left-width: 4px;
  background: rgba(244, 241, 234, 0.72);
  padding: var(--s-4) var(--s-5);
}
.readout-row strong {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
}
.readout-row span {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 300;
}
.readout-row.pass { border-left-color: var(--plot); }
.readout-row.partial { border-left-color: var(--brass); }
.readout-row.fail { border-left-color: var(--signal); }

.proof-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.proof-ledger > div {
  min-width: 0;
  min-height: 185px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  padding: var(--s-5) 0 var(--s-6);
}
.proof-ledger > div strong {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.15;
  font-weight: 300;
  color: var(--ink);
}
.proof-ledger > div p {
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}

.packet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.packet-grid .packet-card {
  min-width: 0;
  border: 1px solid var(--rule-soft);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.32), transparent 44%),
    rgba(244, 241, 234, 0.72);
  padding: var(--s-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.packet-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  align-items: baseline;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
}
.packet-card-head strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--plot);
  overflow-wrap: anywhere;
  text-align: right;
}
.packet-card h3 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -0.012em;
  margin-bottom: var(--s-3);
}
.packet-card > p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: var(--s-5);
}

.boundary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.boundary-panel {
  min-width: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  padding: var(--s-5) 0 var(--s-6);
}
.boundary-panel.safe h3 { color: var(--plot); }
.boundary-panel.blocked h3 { color: var(--signal); }
.boundary-panel ul {
  list-style: none;
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.boundary-panel li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--s-3);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 300;
}
.boundary-panel li::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  margin-top: 0.5em;
  color: var(--brass-deep);
}

@media (max-width: 980px) {
  .layer-grid,
  .proof-ledger,
  .runbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .packet-grid,
  .boundary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .artifact-strip span {
    width: 100%;
  }
  .layer-grid,
  .proof-ledger,
  .runbook-grid {
    grid-template-columns: 1fr;
  }
  .readout-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

/* HOMEPAGE PRODUCT SPINE ----------------------------------------------- */
body[data-route="/"] .section-title,
body[data-route="/"] .hero h1 {
  letter-spacing: 0;
}

body[data-route="/"] .product-hero {
  min-height: 660px;
  display: flex;
  align-items: center;
  padding: var(--s-10) 0 var(--s-11);
  background:
    linear-gradient(90deg, rgba(20, 40, 60, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(20, 40, 60, 0.05) 1px, transparent 1px),
    var(--paper);
  background-size: 72px 72px, 72px 72px, auto;
  overflow: hidden;
}
body[data-route="/"] .product-hero .shell {
  position: relative;
  z-index: 2;
  width: 100%;
}
body[data-route="/"] .hero-copy {
  max-width: 680px;
  padding: var(--s-8) 0;
  position: relative;
  z-index: 3;
}
body[data-route="/"] .product-hero .hero-eyebrow {
  letter-spacing: 0;
  opacity: 1;
  color: var(--brass-deep);
}
body[data-route="/"] .product-hero h1 {
  max-width: 670px;
  font-size: 68px;
  line-height: 1;
  margin-bottom: var(--s-6);
}
body[data-route="/"] .product-hero .hero-lede {
  max-width: 660px;
  color: var(--ink);
}
body[data-route="/"] .product-hero .cta-row {
  max-width: 700px;
}

body[data-route="/"] .proof-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.46;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 67%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 67%);
}
body[data-route="/"] .proof-scene::before {
  content: "";
  position: absolute;
  inset: 13% -3% 14% 62%;
  border: 1px solid rgba(20, 40, 60, 0.18);
  background: rgba(244, 241, 234, 0.62);
  box-shadow: 0 18px 48px rgba(10, 14, 20, 0.07);
}
body[data-route="/"] .proof-rail {
  position: absolute;
  left: 66%;
  right: 2%;
  height: 1px;
  background: linear-gradient(90deg, var(--port-navy), var(--plot), var(--blood));
  opacity: 0.30;
}
body[data-route="/"] .proof-rail-a { top: 36%; }
body[data-route="/"] .proof-rail-b { top: 58%; }
body[data-route="/"] .proof-token,
body[data-route="/"] .proof-receipt {
  position: absolute;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(244, 241, 234, 0.82);
  box-shadow: 0 8px 24px rgba(10, 14, 20, 0.07);
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
}
body[data-route="/"] .proof-token {
  min-width: 100px;
  min-height: 40px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--ink);
}
body[data-route="/"] .token-claim { top: 25%; right: 26%; border-color: var(--port-navy); }
body[data-route="/"] .token-graph { top: 25%; right: 14%; border-color: var(--plot); }
body[data-route="/"] .token-harness { top: 47%; right: 20%; border-color: var(--brass-deep); }
body[data-route="/"] .token-evidence { top: 69%; right: 6%; border-color: var(--blood); }
body[data-route="/"] .proof-receipt {
  width: 230px;
  padding: var(--s-4);
  text-transform: none;
}
body[data-route="/"] .proof-receipt span {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 11px;
  color: var(--ink-3);
}
body[data-route="/"] .proof-receipt strong {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 14px;
  color: var(--ink);
  word-break: break-word;
}
body[data-route="/"] .proof-receipt em {
  display: inline-flex;
  padding: 3px 7px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  color: var(--brass-deep);
  font-style: normal;
  font-size: 11px;
}
body[data-route="/"] .proof-receipt-a { top: 39%; right: 1%; }
body[data-route="/"] .proof-receipt-b { top: 62%; right: 11%; }

body[data-route="/"] .spine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
body[data-route="/"] .spine-card,
body[data-route="/"] .packet-card,
body[data-route="/"] .boundary-panel,
body[data-route="/"] .buyer-grid article,
body[data-route="/"] .instrument-rail a {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
}
body[data-route="/"] .spine-card {
  min-height: 360px;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
body[data-route="/"] .spine-card-graph { border-top: 5px solid var(--port-navy); }
body[data-route="/"] .spine-card-harness { border-top: 5px solid var(--plot); }
body[data-route="/"] .spine-card-evidence { border-top: 5px solid var(--blood); }
body[data-route="/"] .spine-index,
body[data-route="/"] .buyer-grid article span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--brass-deep);
}
body[data-route="/"] .spine-card h3,
body[data-route="/"] .packet-card h3,
body[data-route="/"] .boundary-panel h3,
body[data-route="/"] .buyer-grid article h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0;
  text-transform: none;
}
body[data-route="/"] .spine-card p,
body[data-route="/"] .packet-card p,
body[data-route="/"] .buyer-grid article p,
body[data-route="/"] .final-cta p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
body[data-route="/"] .spine-card dl {
  margin-top: auto;
  display: grid;
  gap: var(--s-3);
}
body[data-route="/"] .spine-card dl div {
  display: grid;
  grid-template-columns: 98px 1fr;
  gap: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
}
body[data-route="/"] .spine-card dt,
body[data-route="/"] .packet-table th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-3);
}
body[data-route="/"] .spine-card dd {
  margin: 0;
  color: var(--ink);
}
body[data-route="/"] .spine-link {
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brass-deep);
  text-decoration: none;
}
body[data-route="/"] .spine-link::after { content: " ->"; }
body[data-route="/"] .spine-link:hover { color: var(--ink); }

body[data-route="/"] .packet-section,
body[data-route="/"] .buyer-section {
  background: var(--paper-2);
}
body[data-route="/"] .packet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
body[data-route="/"] .packet-card {
  padding: var(--s-6);
  display: grid;
  gap: var(--s-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body[data-route="/"] .packet-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: baseline;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}
body[data-route="/"] .packet-card-head span { color: var(--ink-3); }
body[data-route="/"] .packet-card-head strong {
  color: var(--plot);
  font-weight: 500;
}
body[data-route="/"] .packet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
body[data-route="/"] .packet-table th,
body[data-route="/"] .packet-table td {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
}
body[data-route="/"] .packet-table th {
  width: 128px;
  padding-right: var(--s-4);
}
body[data-route="/"] .packet-table code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 3px;
}

body[data-route="/"] .boundary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
body[data-route="/"] .boundary-panel {
  padding: var(--s-6);
}
body[data-route="/"] .boundary-panel.safe { border-left: 5px solid var(--plot); }
body[data-route="/"] .boundary-panel.blocked { border-left: 5px solid var(--blood); }
body[data-route="/"] .boundary-panel ul {
  margin: var(--s-5) 0 0;
  padding-left: var(--s-5);
}
body[data-route="/"] .boundary-panel li {
  display: list-item;
  margin-bottom: var(--s-2);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}
body[data-route="/"] .boundary-panel li::before {
  content: none;
}

body[data-route="/"] .buyer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
body[data-route="/"] .buyer-grid article {
  min-height: 230px;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

body[data-route="/"] .instrument-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
body[data-route="/"] .instrument-rail a {
  min-height: 150px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--s-5);
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body[data-route="/"] .instrument-rail a:last-child { border-right: 0; }
body[data-route="/"] .instrument-rail span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brass-deep);
}
body[data-route="/"] .instrument-rail strong {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.12;
}
body[data-route="/"] .instrument-rail a:hover {
  background: var(--paper-2);
  color: var(--ink);
}

body[data-route="/"] .final-cta {
  background: var(--void);
  color: var(--paper);
}
body[data-route="/"] .final-cta .section-title {
  max-width: 820px;
  color: var(--paper);
}
body[data-route="/"] .final-cta p {
  max-width: 650px;
  margin: var(--s-5) 0 var(--s-7);
  color: var(--paper-2);
}
body[data-route="/"] .final-cta .btn {
  border-color: var(--paper);
  color: var(--paper);
}
body[data-route="/"] .final-cta .btn:hover {
  background: var(--paper);
  color: var(--ink);
}
body[data-route="/"] .final-cta .btn.brass {
  border-color: var(--brass-light);
  color: var(--brass-light);
}
body[data-route="/"] .final-cta .btn.brass:hover {
  background: var(--brass-light);
  color: var(--ink);
}

@media (max-width: 980px) {
  body[data-route="/"] .product-hero {
    min-height: 620px;
  }
  body[data-route="/"] .product-hero h1 {
    font-size: 58px;
  }
  body[data-route="/"] .proof-scene::before {
    inset: 12% -8% 12% 58%;
  }
  body[data-route="/"] .proof-token,
  body[data-route="/"] .proof-receipt {
    opacity: 0.42;
  }
  body[data-route="/"] .spine-grid,
  body[data-route="/"] .packet-grid,
  body[data-route="/"] .boundary-grid,
  body[data-route="/"] .instrument-rail {
    grid-template-columns: 1fr;
  }
  body[data-route="/"] .instrument-rail a {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    min-height: 116px;
  }
  body[data-route="/"] .instrument-rail a:last-child { border-bottom: 0; }
  body[data-route="/"] .buyer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-route="/"] .product-hero {
    min-height: auto;
    padding: var(--s-8) 0;
  }
  body[data-route="/"] .product-hero h1 {
    font-size: 42px;
    line-height: 1.03;
  }
  body[data-route="/"] .product-hero .hero-lede {
    font-size: 21px;
  }
  body[data-route="/"] .proof-scene {
    display: none;
  }
  body[data-route="/"] .spine-grid,
  body[data-route="/"] .buyer-grid {
    grid-template-columns: 1fr;
  }
  body[data-route="/"] .spine-card,
  body[data-route="/"] .buyer-grid article {
    min-height: auto;
  }
  body[data-route="/"] .packet-table th,
  body[data-route="/"] .packet-table td {
    display: block;
    width: 100%;
    padding-right: 0;
  }
  body[data-route="/"] .packet-table td {
    padding-top: 0;
  }
}

@media (max-width: 760px) {
  body[data-route="/"] .masthead {
    padding: var(--s-3) 0;
  }
  body[data-route="/"] .masthead .brand svg.brand-wordmark {
    height: 44px;
  }
  body[data-route="/"] .masthead .masthead-cta {
    display: none;
  }
  body[data-route="/"] .product-hero .hero-copy,
  body[data-route="/"] .product-hero .hero-lede {
    max-width: 100%;
  }
  body[data-route="/"] .product-hero .hero-eyebrow {
    display: block;
    line-height: 1.5;
    max-width: 100%;
  }
  body[data-route="/"] .product-hero .hero-eyebrow::before {
    display: none;
  }
  body[data-route="/"] .product-hero {
    padding: var(--s-6) 0 var(--s-7);
    min-height: auto;
  }
  body[data-route="/"] .product-hero h1 {
    font-size: 38px;
    line-height: 1.05;
  }
  body[data-route="/"] .product-hero .hero-lede {
    font-size: 20px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  body[data-route="/"] .section-kicker {
    overflow-wrap: anywhere;
  }
  body[data-route="/"] .product-hero .cta-row {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 330px;
    gap: 0;
  }
  body[data-route="/"] .product-hero .btn {
    width: 100%;
    justify-content: space-between;
    padding: 12px var(--s-4);
  }
}

/* BUTTONS ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-6);
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn::after { content: "→"; font-family: var(--serif); font-size: 16px; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.brass {
  border-color: var(--brass-deep);
  color: var(--brass-deep);
}
.btn.brass:hover { background: var(--brass-deep); color: var(--paper); }

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

/* PROOF MACHINE — shared /demo + /verify grammar ---------------------- */
body.machine-page .hero.machine-hero {
  padding: var(--s-8) 0 var(--s-8);
}
body.machine-page .machine-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(360px, 0.9fr);
  gap: var(--s-9);
  align-items: center;
}
body.machine-page .machine-copy {
  align-self: center;
}
body.machine-page .hero-eyebrow {
  margin-bottom: var(--s-5);
}
body.machine-page .hero h1 {
  font-size: clamp(50px, 6.4vw + 4px, 88px);
  margin-bottom: var(--s-5);
}
body.machine-page .hero-lede {
  font-size: clamp(19px, 1vw + 14px, 24px);
  max-width: 46ch;
}
body.machine-page .machine-copy .hero-lede {
  margin-bottom: var(--s-5);
}
body.machine-page .machine-paths {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
body.machine-page .machine-paths span,
body.machine-page .machine-paths a {
  border: 1px solid var(--rule-soft);
  background: color-mix(in srgb, var(--paper-2) 44%, transparent);
  padding: 9px 12px;
  text-decoration: none;
}
body.machine-page .machine-paths a {
  color: var(--brass-deep);
}
body.machine-page .machine-console {
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-2) 58%, var(--paper));
  min-height: 0;
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(10, 14, 20, 0.06);
}
body.machine-page .machine-console::before {
  content: none;
}
body.machine-page .machine-topbar {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  align-items: start;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: var(--s-4);
  position: relative;
  z-index: 1;
}
body.machine-page .machine-label,
body.machine-page .machine-mode {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.machine-page .machine-label {
  color: var(--brass-deep);
}
body.machine-page .machine-mode {
  color: var(--ink-3);
  text-align: right;
}
body.machine-page .machine-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.08;
  font-weight: 300;
  margin-top: var(--s-3);
}
body.machine-page .machine-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.34fr);
  gap: var(--s-5);
  padding-top: var(--s-5);
  position: relative;
  z-index: 1;
}
body.machine-page .machine-aperture,
body.machine-page .dropzone.proof-aperture {
  min-height: 205px;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 78%, var(--paper-2));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-4);
  text-align: left;
}
body.machine-page .dropzone.proof-aperture {
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
body.machine-page .dropzone.proof-aperture:hover,
body.machine-page .dropzone.proof-aperture:focus-visible,
body.machine-page .dropzone.proof-aperture.drag-over {
  border-color: var(--brass-deep);
  background-color: var(--paper-2);
  transform: translateY(-1px);
}
body.machine-page .aperture-kicker,
body.machine-page .aperture-chip,
body.machine-page .machine-rail-row span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.machine-page .aperture-sub,
body.machine-page .machine-note {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
body.machine-page .aperture-kicker {
  color: var(--brass-deep);
}
body.machine-page .dropzone-prompt,
body.machine-page .aperture-title {
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 42px);
  line-height: 0.98;
  font-weight: 300;
  color: var(--ink);
  max-width: 8.8em;
}
body.machine-page .dropzone-sub,
body.machine-page .aperture-sub {
  color: var(--ink-3);
  line-height: 1.5;
}
body.machine-page .aperture-chip-row {
  display: none;
}
body.machine-page .aperture-chip {
  border: 1px solid var(--rule-soft);
  background: rgba(244, 241, 234, 0.64);
  padding: 6px 8px;
}
body.machine-page .machine-file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
body.machine-page .machine-rail {
  border-left: 1px solid var(--rule-soft);
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
body.machine-page .machine-rail-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  opacity: 0.56;
}
body.machine-page .machine-rail-dot {
  width: 8px;
  height: 8px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  margin-top: 6px;
  background: transparent;
}
body.machine-page .machine-rail-row strong {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}
body.machine-page .machine-rail-row span {
  display: block;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  overflow-wrap: anywhere;
}
body.machine-page .machine-rail-row.is-active,
body.machine-page .machine-rail-row.is-pass,
body.machine-page .machine-rail-row.is-fail,
body.machine-page .machine-rail-row.is-warn {
  opacity: 1;
}
body.machine-page .machine-rail-row.is-active .machine-rail-dot {
  border-color: var(--brass-deep);
  background: var(--brass-light);
  box-shadow: 0 0 0 4px rgba(184, 145, 90, 0.16);
}
body.machine-page .machine-rail-row.is-pass .machine-rail-dot {
  border-color: #5a7c5e;
  background: #5a7c5e;
}
body.machine-page .machine-rail-row.is-fail .machine-rail-dot {
  border-color: var(--signal);
  background: var(--signal);
}
body.machine-page .machine-rail-row.is-warn .machine-rail-dot {
  border-color: var(--brass-deep);
  background: transparent;
}
body.machine-page .machine-note {
  margin-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--s-4);
  color: var(--ink-3);
  line-height: 1.45;
}
body.machine-page .machine-note a {
  color: var(--brass-deep);
}
body.machine-page .machine-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
body.machine-page .machine-demo-button {
  appearance: none;
  border: 1px solid var(--rule);
  background: rgba(244, 241, 234, 0.72);
  color: var(--ink);
  text-align: left;
  padding: var(--s-3);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
body.machine-page .machine-demo-button:hover:not(:disabled),
body.machine-page .machine-demo-button:focus-visible {
  border-color: var(--brass-deep);
  background: var(--paper);
  transform: translateY(-1px);
}
body.machine-page .machine-demo-button:disabled {
  cursor: progress;
  opacity: 0.72;
}
body.machine-page .machine-demo-button.pass {
  border-left: 3px solid #5a7c5e;
}
body.machine-page .machine-demo-button.fail {
  border-left: 3px solid var(--signal);
}
body.machine-page .machine-demo-button span {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.12;
}
body.machine-page .machine-demo-button em {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-3);
}
body.machine-page .demo-case-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
}
body.machine-page .demo-case {
  padding: var(--s-3);
  min-height: 68px;
}
body.machine-page .demo-case span {
  font-size: 16px;
}
body.machine-page .demo-case em {
  font-size: 9px;
  letter-spacing: 0.06em;
}
body.machine-page .machine-result {
  padding: var(--s-8) 0 var(--s-10);
  border-bottom: 1px solid var(--rule);
}
body.machine-page .machine-receipt {
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-2) 42%, var(--paper));
  padding: var(--s-6);
}
body.machine-page .machine-receipt-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1fr);
  gap: var(--s-8);
  align-items: start;
}
body.machine-page .verdict {
  padding: 0;
}
body.machine-page .verdict-headline {
  font-size: clamp(42px, 6vw, 76px);
}
body.machine-page .proof-lights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}
body.machine-page .proof-light {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
  font-family: var(--mono);
}
body.machine-page .proof-light .k {
  display: block;
  color: var(--brass-deep);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}
body.machine-page .proof-light .v {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.machine-page .machine-details {
  margin-top: var(--s-5);
}
body.machine-page .machine-details summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding: var(--s-3) 0;
}
body.machine-page .root-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
body.machine-page .artifact-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.machine-page .artifact-table {
  min-width: 760px;
}
body.machine-page .machine-brief {
  padding: var(--s-8) 0;
}
body.machine-page .machine-brief .gloss-grid {
  margin-bottom: 0;
}
@media (max-width: 1080px) {
  body.machine-page .machine-grid,
  body.machine-page .machine-receipt-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  body.machine-page .hero.machine-hero {
    padding: var(--s-7) 0;
  }
  body.machine-page .machine-body,
  body.machine-page .proof-lights,
  body.machine-page .machine-actions {
    grid-template-columns: 1fr;
  }
  body.machine-page .machine-rail {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
    padding-left: 0;
    padding-top: var(--s-4);
  }
  body.machine-page .demo-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  body.machine-page .dropzone.proof-aperture,
  body.machine-page .machine-demo-button {
    transition: none;
  }
}


/* ── 5.5 SHARED CARD GRAMMAR (regime cards, sub-cards, delivers, signature) ── */

/* Regime / capability / engagement cards — one card primitive used across
   the home page sections and (now) vertical-page section bodies. */
.regime-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.regime-row {
  display: block;
  position: relative;
  padding: var(--s-6) var(--s-7);
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 160ms ease, background 160ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 1px 0 rgba(140, 106, 63, 0.03);
}
a.regime-row:hover {
  border-color: var(--brass-deep);
  background: var(--paper-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(140, 106, 63, 0.08);
}
.regime-row .domain {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.12;
  margin-bottom: var(--s-3);
}
a.regime-row .domain::after {
  content: " →";
  color: var(--brass-deep);
  transition: transform 160ms ease;
}
a.regime-row:hover .domain::after {
  transform: translateX(4px);
}
/* Icon badge — every card icon sits in a tinted rounded-square tile so it
   reads as a load-bearing instrument mark, not a decorative ornament. The
   paper-2 background gives the icon its own surface; the brass hairline
   border + soft drop shadow give it weight. On hover the tile brightens
   and lifts. */
.regime-row .domain svg {
  width: 34px;
  height: 34px;
  color: var(--brass-deep);
  opacity: 1;
  flex-shrink: 0;
  padding: 7px;
  background: var(--paper-2);
  border: 1px solid rgba(116, 80, 48, 0.28);
  border-radius: 5px;
  box-sizing: content-box;
  box-shadow: 0 2px 5px rgba(10, 14, 20, 0.06), inset 0 0 0 1px rgba(244, 241, 234, 0.55);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
a.regime-row:hover .domain svg {
  background: var(--paper);
  border-color: var(--brass-deep);
  box-shadow: 0 6px 14px rgba(116, 80, 48, 0.18), inset 0 0 0 1px rgba(244, 241, 234, 0.4);
  transform: translateY(-1px);
}
.regime-row .standards {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-4);
}

/* Card type tag — small mono chip prepended inline to the .standards
   (regulatory) line, color-coded by content category so a visitor can
   pre-classify a card before reading it. Methodology = brand-principal.
   Application = vertical entry. Capability = audit-instrument category.
   Demonstration = action. */
.card-tag {
  display: inline-block;
  vertical-align: 2px;
  margin-right: var(--s-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  color: var(--paper);
  background: var(--ink-3);
  user-select: none;
}
/* Brass-family palette — methodology → application → capability →
   demonstration sweeps through the brand brass spectrum (darkest to
   lightest), with application breaking out as ink-black because it's
   the live-deployment category. No alien hues. */
.card-tag-methodology   { background: var(--brass-light); color: var(--ink); }
.card-tag-application   { background: var(--blood);       color: var(--paper); }
.card-tag-capability    { background: var(--brass);       color: var(--ink); }
.card-tag-demonstration { background: var(--brass-light); color: var(--ink); }
.card-tag-artifact      { background: var(--brass-deep);  color: var(--paper); }
.card-tag-standard      { background: var(--paper-3);     color: var(--ink); border: 1px solid var(--brass); }

/* Home-only: the four vertical cards carry their regulatory anchor in
   .standards — the most load-bearing line on the card. Render it in
   blood-red so the duty-in-scope reads as the duty-in-scope. Scoped by
   the application-tag presence so the methodology + demo cards stay neutral. */
body[data-route="/"] .regime-row:has(.card-tag-application) .standards {
  color: var(--blood);
  font-weight: 500;
}
.regime-row .pitch {
  display: block;
  font-size: 17px;
  line-height: 1.55;
  opacity: 1;
}
.regime-row .pitch em { font-style: italic; }

/* Sub-cards nested inside each home door card. The hover-reveal accordion
   was disabled per Logan's call — all six home cards now read identically
   (the preprint card has no sub-cards, so this hides the four window cards'
   sub-cards too). Markup is preserved so we can re-enable later if needed.
   To re-enable: change `display: none` below back to `display: grid` and
   restore the `max-height/opacity/transition` lines.  */
.sub-cards {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
@media (max-width: 760px) {
  .sub-cards { grid-template-columns: 1fr; }
}
.sub-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5);
  background: var(--paper-2);
  border-left: 3px solid var(--brass);
  transition: border-left-color 160ms ease;
}
a.regime-row:hover .sub-card {
  border-left-color: var(--brass-deep);
}
.sub-card .sub-header {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.sub-card .sub-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--brass-deep);
}
.sub-card .sub-label {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.sub-card .sub-framing {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 1;
}
.sub-card .sub-delivers {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--brass-deep);
}

/* Deliverable strip — small mono uppercase line at the bottom of a regime
   card, brass-deep, separated by a hairline. Carries the vertical-specific
   compliance anchors folded from the (now-deleted) Audit posture section. */
.regime-row .delivers {
  display: block;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
  opacity: 0.9;
}

/* Section signature — single mono-uppercase line at the bottom of a
   vertical page that punctuates the document with attestation-domain
   metadata. Evidence-document grammar, not banknote grammar. */
.section-signature {
  margin: var(--s-8) 0 var(--s-7);
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  opacity: 0.65;
}


/* ── 5.6 CONTACT — "Open a channel" modal (v2) ─────────────────────────────
   Injected once per page by contact.js. Tile-picker for industry, three
   numbered sections (register · capabilities · identify), sticky brass
   action footer, wax-seal success state. Triggered by anything with
   [data-contact-trigger]; POSTs JSON to /api/contact. */

.chan-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-7) var(--s-5);
  overflow-y: auto;
  animation: chan-modal-fade 180ms var(--ease);
}
.chan-modal[hidden] { display: none; }

/* ── compact channel modal (soc-711) ─────────────────────────────────
   Stripped variant: name + email + micro industry radio + one CTA.
   The verbose 3-section / tile-picker / capabilities / textarea variant
   above stays for any place that opts into it; the .compact modifier
   tightens panel width + collapses padding. */
.chan-modal-compact .chan-panel {
  max-width: 440px;
  padding: var(--s-6) var(--s-6) var(--s-5);
}
.chan-header-tight { margin-bottom: var(--s-3); }
.chan-header-tight .chan-title { font-size: 28px; line-height: 1.1; margin: 0; }
.chan-form-tight { display: flex; flex-direction: column; gap: var(--s-4); }
.chan-form-tight .chan-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.chan-form-tight .chan-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chan-form-tight .chan-field-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.chan-form-tight .chan-field input,
.chan-form-tight .chan-field textarea {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 8px 12px;
  width: 100%;
}
.chan-form-tight .chan-field input:focus,
.chan-form-tight .chan-field textarea:focus {
  outline: 2px solid var(--brass);
  outline-offset: -1px;
  background: var(--paper);
}
.chan-form-tight .chan-field textarea {
  min-height: 96px;
  resize: vertical;
}
.chan-microrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.chan-microlabel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-right: 6px;
}
.chan-micro {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chan-micro input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chan-micro span {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
  color: var(--ink-2);
  transition: background 80ms, border-color 80ms, color 80ms;
}
.chan-micro:hover span { border-color: var(--brass); }
.chan-micro input:checked + span,
.chan-micro input:focus-visible + span {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: var(--paper);
}
.chan-actions-tight {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
@keyframes chan-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.chan-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.chan-panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: var(--s-5) 0;
  background: var(--paper);
  border: 1px solid var(--brass-deep);
  border-top: 4px solid var(--brass-deep);
  padding: var(--s-9) var(--s-9) var(--s-7);
  box-shadow: 0 24px 80px rgba(10, 14, 20, 0.45);
  animation: chan-panel-rise 280ms var(--ease);
}
@keyframes chan-panel-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chan-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-4);
  background: transparent;
  border: 0;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  padding: 4px 10px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.chan-close:hover { color: var(--brass-deep); }

/* HEADER — title + lede */
.chan-header {
  margin-bottom: var(--s-8);
}
.chan-title {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(36px, 2.6vw + 22px, 52px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.chan-title em {
  font-style: italic;
  color: var(--brass-deep);
}
.chan-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}
.chan-lede a {
  color: var(--brass-deep);
  text-decoration-color: var(--brass);
}

/* SECTION — numbered grouping */
.chan-section {
  margin-bottom: var(--s-8);
}
.chan-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
}
.chan-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--brass-deep);
}
.chan-label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.chan-req,
.chan-hint {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chan-req { color: var(--signal); }

/* SECTION 01 — industry tile picker */
.chan-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
}
.chan-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.chan-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chan-tile-mark {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chan-tile-mark svg { width: 100%; height: 100%; display: block; }
.chan-tile-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chan-tile:hover {
  background: var(--paper-2);
  border-color: var(--brass);
}
.chan-tile:has(input:checked) {
  background: var(--paper-3);
  border-color: var(--brass-deep);
  color: var(--brass-deep);
}
.chan-tile:has(input:checked) .chan-tile-name {
  color: var(--brass-deep);
}
.chan-tile:has(input:focus-visible) {
  outline: 2px solid var(--brass-deep);
  outline-offset: 2px;
}

/* SECTION 02 — capabilities */
.chan-caps {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.chan-cap {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-3);
  row-gap: 4px;
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.chan-cap:hover {
  background: var(--paper-2);
  border-color: var(--brass);
}
.chan-cap input {
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 3px;
  accent-color: var(--brass-deep);
}
.chan-cap-name {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.chan-cap-pitch {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
.chan-cap:has(input:checked) {
  background: var(--paper-3);
  border-color: var(--brass-deep);
}
.chan-cap:has(input:checked) .chan-cap-name {
  color: var(--brass-deep);
}

/* SECTION 03 — identify (name / email / position / requests) */
.chan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.chan-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.chan-field-wide { grid-column: 1 / -1; }
.chan-field-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.chan-field input[type="text"],
.chan-field input[type="email"],
.chan-field textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-family: var(--sans);
  font-size: 16px;
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.chan-field textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
}
.chan-field input:focus,
.chan-field textarea:focus {
  outline: none;
  border-color: var(--brass-deep);
  background: var(--paper);
}

/* STATUS + ACTIONS */
.chan-status {
  margin-top: var(--s-5);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  min-height: 1.4em;
  color: var(--ink-3);
}
.chan-status.pending { color: var(--ink-3); }
.chan-status.success { color: var(--plot); }
.chan-status.error   { color: var(--signal); }

.chan-actions {
  display: flex;
  gap: var(--s-4);
  justify-content: flex-end;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
}
.chan-actions-end { border-top: 0; padding-top: 0; }

.chan-modal button.btn {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* SUCCESS state — wax-seal mark + transmission code */
.chan-success {
  text-align: center;
  padding: var(--s-5) 0;
}
.chan-success-mark {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--s-6);
  color: var(--ink);
}
.chan-success-mark svg { width: 100%; height: 100%; }
.chan-success .chan-title { margin-bottom: var(--s-4); }
.chan-success .chan-lede { margin: 0 auto var(--s-7); }
.chan-receipt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  margin-bottom: var(--s-7);
}
.chan-receipt-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.chan-receipt-code {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.chan-success .chan-actions {
  justify-content: center;
  border-top: 0;
  padding-top: 0;
}

/* Responsive collapse */
@media (max-width: 720px) {
  .chan-panel { padding: var(--s-7) var(--s-5) var(--s-5); }
  .chan-tiles { grid-template-columns: repeat(3, 1fr); }
  .chan-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .chan-tiles { grid-template-columns: repeat(2, 1fr); }
}


/* ── 5.7 AICONS HOME — the schema is the body ──────────────────────────
   The home page is a specimen sheet for the 188-mark schema. Three
   regions: the lede announces the schema; the specimen renders every
   mark in its register; the verticals + backwall route the visitor
   into the briefs that consume the bundle.
   ───────────────────────────────────────────────────────────────────── */

/* sr-only — visually hidden, accessible to assistive tech */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* LEDE — text on the left, fingerprint of 10 marks on the right */
.aicons-lede {
  padding: var(--s-11) 0 var(--s-9);
}
.aicons-lede .lede-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-11);
  align-items: center;
}
.aicons-h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-h1);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: var(--s-6);
}
/* the lowercase i in PLANiSPHERE — same DNA as the brass orb in the wordmark's lowercase p */
.aicons-h1 .lc-i {
  color: var(--brass-deep);
  font-style: italic;
  text-transform: none;
}
.aicons-lede-body {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-lede);
  line-height: 1.42;
  color: var(--ink-2);
  max-width: 56ch;
  margin-bottom: var(--s-6);
}
.aicons-lede-body em {
  font-style: italic;
  color: var(--brass-deep);
}
.aicons-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.aicons-meta span:nth-child(even) { color: var(--ink-3); }

/* fingerprint grid — 5×2 of 10 register-representative marks */
.lede-fingerprint {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.fp-mark {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule-hair);
  color: var(--ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fp-mark svg { width: 100%; height: 100%; display: block; }
.fp-mark:hover { background: var(--paper-3); color: var(--brass-deep); }

/* SPECIMEN — 10 registers stacked, each a header + dense mini-grid */
.aicons-specimen {
  padding: var(--s-9) 0 var(--s-11);
  border-top: 1px solid var(--rule-soft);
}
.aicons-specimen .register {
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--rule-hair);
}
.aicons-specimen .register:last-child { border-bottom: 0; }
.aicons-specimen .register-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-5);
  align-items: baseline;
  margin-bottom: var(--s-6);
}
.aicons-specimen .register-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--brass-deep);
  text-transform: uppercase;
  padding-top: 6px;
}
.aicons-specimen .register-title {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-h2);
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.aicons-specimen .register-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* mini-grid: 12 columns at desktop, dense */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-2);
}
.mini-mark {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--rule-hair);
  color: var(--ink);
  cursor: help;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.mini-mark svg { width: 100%; height: 100%; display: block; }
.mini-mark:hover {
  background: var(--paper-3);
  color: var(--brass-deep);
  border-color: var(--brass);
  transform: scale(1.08);
  z-index: 2;
  position: relative;
}

/* ── ICON-CARD: the atomic primitive (v2) ────────────────────────────────
   Sibling of the 188-mark corpus, load-bearing across the capability
   sections. SVG + three text lines (name / use / source). Replaces the
   200-px stacked .regime-row.capability-card.

   v2 refinements (after first-pass review):

     - Hairline above .icon-source removed; spacing alone separates.
       The hairline at 6% opacity was visual noise without function.
     - .icon-source bumped 9px -> 10.5px; readability above the floor.
     - text-align: left so wrapped lines don't orphan their tail
       word centered alone on the second line.
     - .icon-status defaults to hidden; only non-default states
       (.refused, .posture, .open) render — a universal LIVE pip on
       every card carried zero information.
     - The card body becomes an <a> by default when given an href, so
       every capability atom links to its corpus page or source path.

   v3 category-identity layer:

     - 2-px top edge band coded by .cap-{contract,artifact,anchor,
       vessel,refused} so a visitor reads kind at a glance.
     - Brass color stays inside the SVG and the name only — the band
       takes over corner-pip duty without competing.
*/

.icon-grid {
  /* Intrinsic responsive layout — column count derives from available
     width, not a viewport breakpoint. Inside a narrow body-content
     column this yields 4 cards/row; inside a wide page (corpus, etc.)
     it goes to 6. Card minimum 140 px guarantees long mono identifiers
     like "raw_behavioral_signature_vector" don't break mid-word. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
/* The 188-mark corpus page wants the historical 6-cols-on-wide layout
   so the spectrum is consistent. Scoped opt-in. */
body[data-route="/corpus"] .icon-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.icon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-3) var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule-hair);
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;        /* clip the category-band so it rounds w/ border */
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
a.icon-card { cursor: pointer; }
a.icon-card:hover {
  background: var(--paper-3);
  border-color: var(--brass-deep);
  transform: translateY(-2px);
}
a.icon-card:hover .icon-name {
  color: var(--brass-deep);
}
.icon-card svg {
  width: 56px;
  height: 56px;
  display: block;
  color: var(--ink);
  flex-shrink: 0;
  align-self: center;       /* SVG stays centered above left-aligned text */
  margin-bottom: var(--s-1);
}
.icon-card .icon-name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.25;
  transition: color var(--t-fast) var(--ease);
  word-break: break-word;   /* long ids (raw_behavioral_signature_vector) wrap cleanly */
}
.icon-card .icon-use {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-2);
  opacity: 0.88;
}
.icon-card .icon-source {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-deep);
  line-height: 1.4;
  opacity: 0.85;
  /* No hairline; spacing alone divides. */
}

/* ── Capability variant: .icon-card.cap ──────────────────────────────────
   The link-affordance flavor. Reserves room for the category band on
   the top edge and (optionally) a status pip on the top-right corner. */
.icon-card.cap {
  padding-top: calc(var(--s-3) + 3px);
}
.icon-card.cap::before {
  /* Category band — top edge, 2 px tall. The class on the card decides
     which color the band takes. Default = brass (capability). */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brass);
}
.icon-card.cap.cap-contract::before { background: var(--brass-deep); }
.icon-card.cap.cap-artifact::before { background: var(--brass); }
.icon-card.cap.cap-anchor::before   { background: var(--brass-light); }
.icon-card.cap.cap-vessel::before   { background: var(--ink-3); }
.icon-card.cap.cap-refused::before  { background: transparent;
                                       border-top: 2px dashed var(--ink-3); }

/* Status pip — opt-in only. Universal "live" status is implicit and
   shows no pip; non-default states (.refused, .posture, .open) get
   a corner chip so the deviation is read at a glance. */
.icon-card.cap .icon-status {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  background: transparent;
  color: var(--brass-deep);
  display: none;            /* hidden by default — implicit live */
}
.icon-card.cap .icon-status.refused {
  display: inline-block;
  background: var(--ink-3);
  color: var(--paper);
}
.icon-card.cap .icon-status.posture {
  display: inline-block;
  background: var(--paper-3);
  color: var(--brass-deep);
  border: 1px solid var(--rule);
}
.icon-card.cap .icon-status.open {
  display: inline-block;
  background: transparent;
  color: var(--brass-deep);
  letter-spacing: 0.12em;
}
.icon-card.cap .icon-status.open::after { content: " \2192"; }

/* ── Wider-density variant: .icon-grid-wide ─────────────────────────────
   Three columns, bigger SVG (120 px) so rich sub-marks read at distance.
   Used by /starboard's three-board grid. */
.icon-grid.icon-grid-wide { grid-template-columns: repeat(3, 1fr); }
.icon-grid.icon-grid-wide .icon-card { padding: var(--s-4); }
.icon-grid.icon-grid-wide .icon-card.cap { padding-top: calc(var(--s-4) + 3px); }
.icon-grid.icon-grid-wide .icon-card svg { width: 120px; height: 120px; margin-bottom: var(--s-2); }
.icon-grid.icon-grid-wide .icon-card .icon-name { font-size: 14px; }
.icon-grid.icon-grid-wide .icon-card .icon-use { font-size: 13px; line-height: 1.4; }
.icon-grid.icon-grid-wide .icon-card .icon-source { font-size: 10.5px; }
@media (max-width: 760px) { .icon-grid.icon-grid-wide { grid-template-columns: 1fr; } }

/* /backstaff carries four boards (Law · School · War · Med), so its wide grid
   runs four-up. Route-scoped so it outranks the shared rules above by
   specificity and leaves /starboard's three-up grid untouched. */
body[data-route="/backstaff"] .icon-grid.icon-grid-wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { body[data-route="/backstaff"] .icon-grid.icon-grid-wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { body[data-route="/backstaff"] .icon-grid.icon-grid-wide { grid-template-columns: 1fr; } }


/* MANIFEST section — Backstaff + kits rail as primary product surface,
   followed by the three architecture cards and methodology base. */
.aicons-verticals {
  padding: 0;
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
/* Home hero fills the viewport — the manifest tiles span edge-to-edge
   instead of capping at --shell-max. (soc-711) */
.aicons-verticals > .shell {
  max-width: none;
  padding: 0;
}
.manifest-heading {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(56px, 6.5vw + 16px, 108px);
  line-height: 0.95;
  letter-spacing: -0.024em;
  text-align: center;
  color: var(--ink);
  margin: 0 0 var(--s-10);
}
.manifest-heading em {
  font-style: italic;
  color: var(--brass-deep);
}
/* the closing-curtain variant: heading lives at the bottom of the section,
   beneath the verticals row. Margins flip to push the heading down off the
   verticals row and pull it close to the section's bottom edge. */
.manifest-heading-closer {
  margin: var(--s-9) 0 0;
}

/* Homepage manifest — one even rhythm around every card group.
   Order: three architecture cards → Methodology base → Backstaff (now last).
   Every group is separated by a single consistent gutter (var(--s-4)), and the
   three colored cards share the same gutter between them — no flush edges, no
   collapsed double-margins. */
.aicons-verticals .manifest-architecture,
.aicons-verticals .manifest-base,
.aicons-verticals .manifest-backstaff-row {
  margin: 0;
}
.aicons-verticals .manifest-architecture:not(.manifest-backstaff-row) {
  gap: 0;
}
.aicons-verticals .manifest-base {
  margin-top: 0;
}
.aicons-verticals .manifest-backstaff-row {
  margin-top: 0;
}
.aicons-verticals .manifest-base + .manifest-heading {
  margin-top: 0;
}

/* Home prototype — verification routing map.
   This is deliberately scoped to the homepage so the direction can be
   approved before it becomes a sitewide grammar. */
body[data-route="/"] .verification-routing {
  position: relative;
  overflow: hidden;
  padding: var(--s-11) 0 var(--s-12);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(90deg, rgba(116, 80, 48, 0.08) 1px, transparent 1px) 0 0 / 84px 100%,
    radial-gradient(ellipse at 18% 10%, rgba(184, 145, 90, 0.14), transparent 42%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
}
body[data-route="/"] .verification-routing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 14, 20, 0.08), transparent 22%, transparent 78%, rgba(10, 14, 20, 0.06));
  opacity: 0.45;
}
body[data-route="/"] .verification-routing > .shell {
  position: relative;
  z-index: 1;
  max-width: var(--shell-max);
  padding: 0 var(--shell-pad);
}
body[data-route="/"] .routing-head {
  display: grid;
  grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-9);
  align-items: end;
  padding: 0 0 var(--s-7);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid rgba(10, 14, 20, 0.22);
}
body[data-route="/"] .routing-label {
  align-self: start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding-top: var(--s-3);
}
body[data-route="/"] .routing-label::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-top: var(--s-4);
  background: var(--brass-deep);
  opacity: 0.6;
}
body[data-route="/"] .verification-routing .manifest-heading {
  max-width: 11ch;
  margin: 0;
  text-align: left;
  font-size: clamp(50px, 5vw + 12px, 88px);
  line-height: 0.92;
  letter-spacing: -0.032em;
}
body[data-route="/"] .routing-lede {
  grid-column: 2;
  max-width: 62ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 1.2vw + 12px, 24px);
  line-height: 1.45;
  color: var(--ink-2);
}
body[data-route="/"] .verification-routing .manifest-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s-4);
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture {
  grid-template-columns: 1fr;
  height: 100%;
  min-height: 360px;
  padding: var(--s-5);
  border: 1px solid rgba(244, 241, 234, 0.24);
  box-shadow:
    inset 0 0 0 1px rgba(10, 14, 20, 0.08),
    0 18px 48px rgba(10, 14, 20, 0.08);
  transition:
    transform 180ms var(--ease),
    box-shadow 180ms var(--ease),
    background 180ms var(--ease);
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(10, 14, 20, 0.1),
    0 24px 60px rgba(10, 14, 20, 0.16);
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture .tile-body {
  gap: var(--s-3);
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture .tile-index {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.78;
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture .tile-role {
  font-size: 11px;
  letter-spacing: 0.2em;
  opacity: 0.9;
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture .tile-name {
  font-size: clamp(25px, 1.5vw + 12px, 34px);
  line-height: 1.08;
  margin-bottom: 0;
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture .tile-meta {
  display: block;
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.55;
  text-transform: uppercase;
  opacity: 0.72;
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture .tile-cta {
  margin-top: var(--s-3);
  padding-top: 0;
  opacity: 0.95;
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture .tile-cta.cta-orphan-arrow {
  gap: var(--s-2);
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture[class*="tone-"] .tile-mark {
  inset: auto -24% -22% auto;
  width: 88%;
  height: 88%;
  opacity: 0.13;
}
body[data-route="/"] .verification-routing .vertical-tile.vt-architecture[class*="tone-"]:hover .tile-mark {
  opacity: 0.24;
}
body[data-route="/"] .verification-routing .vertical-tile.tone-misc .tile-role,
body[data-route="/"] .verification-routing .vertical-tile.tone-misc .tile-pitch,
body[data-route="/"] .verification-routing .vertical-tile.tone-misc .tile-meta,
body[data-route="/"] .verification-routing .vertical-tile.tone-misc .tile-cta {
  color: var(--paper);
}

@media (max-width: 1080px) {
  body[data-route="/"] .verification-routing .manifest-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-route="/"] .verification-routing .vertical-tile.vt-architecture {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  body[data-route="/"] .verification-routing {
    padding: var(--s-8) 0 var(--s-9);
  }
  body[data-route="/"] .verification-routing > .shell {
    padding: 0 var(--shell-pad-sm);
  }
  body[data-route="/"] .routing-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
    margin-bottom: var(--s-5);
  }
  body[data-route="/"] .routing-lede {
    grid-column: 1;
  }
  body[data-route="/"] .verification-routing .manifest-heading {
    max-width: 10.5ch;
    font-size: clamp(42px, 13vw, 62px);
  }
  body[data-route="/"] .verification-routing .vertical-tile.vt-architecture {
    min-height: 280px;
    padding: var(--s-4);
  }
}

@media (max-width: 560px) {
  body[data-route="/"] .verification-routing .manifest-proof-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.instrument-routing {
  position: relative;
  overflow: hidden;
  padding: var(--s-10) 0 var(--s-11);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(90deg, rgba(116, 80, 48, 0.07) 1px, transparent 1px) 0 0 / 84px 100%,
    radial-gradient(ellipse at 12% 4%, rgba(184, 145, 90, 0.12), transparent 40%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
}
.instrument-routing > .shell {
  position: relative;
  z-index: 1;
  max-width: var(--shell-max);
  padding: 0 var(--shell-pad);
}
.instrument-routing .routing-head {
  display: grid;
  grid-template-columns: minmax(160px, 0.25fr) minmax(0, 1fr);
  gap: var(--s-5) var(--s-8);
  align-items: end;
  padding: 0 0 var(--s-6);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid rgba(10, 14, 20, 0.2);
}
.instrument-routing .routing-label {
  align-self: start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding-top: var(--s-3);
}
.instrument-routing .routing-label::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-top: var(--s-4);
  background: var(--brass-deep);
  opacity: 0.6;
}
.instrument-routing .manifest-heading {
  max-width: 10ch;
  margin: 0;
  text-align: left;
  font-size: clamp(42px, 4vw + 10px, 74px);
  line-height: 0.92;
  letter-spacing: -0.032em;
}
.instrument-routing .routing-lede {
  grid-column: 2;
  max-width: 62ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1vw + 12px, 22px);
  line-height: 1.45;
  color: var(--ink-2);
}
.instrument-routing .manifest-architecture {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.instrument-routing .vertical-tile.vt-architecture {
  min-height: 300px;
  padding: var(--s-5);
  border: 1px solid rgba(244, 241, 234, 0.24);
  box-shadow:
    inset 0 0 0 1px rgba(10, 14, 20, 0.08),
    0 16px 42px rgba(10, 14, 20, 0.08);
  transition:
    transform 180ms var(--ease),
    box-shadow 180ms var(--ease),
    background 180ms var(--ease);
}
.instrument-routing .vertical-tile.vt-architecture:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(10, 14, 20, 0.1),
    0 22px 52px rgba(10, 14, 20, 0.15);
}
.instrument-routing .vertical-tile.vt-architecture[aria-current="page"] {
  box-shadow:
    inset 0 0 0 2px rgba(244, 241, 234, 0.48),
    0 18px 48px rgba(10, 14, 20, 0.12);
}
.instrument-routing .vertical-tile.vt-architecture .tile-index {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.76;
}
.instrument-routing .vertical-tile.vt-architecture .tile-role {
  font-size: 11px;
  letter-spacing: 0.2em;
  opacity: 0.9;
}
.instrument-routing .vertical-tile.vt-architecture .tile-name {
  font-size: clamp(28px, 1.6vw + 12px, 36px);
  line-height: 1.05;
  margin-bottom: 0;
}
.instrument-routing .vertical-tile.vt-architecture .tile-meta {
  display: block;
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.55;
  text-transform: uppercase;
  opacity: 0.72;
}
.instrument-routing .vertical-tile.vt-architecture .tile-cta {
  margin-top: var(--s-3);
  padding-top: 0;
}
.instrument-routing .vertical-tile.vt-architecture[class*="tone-"] .tile-mark {
  inset: auto -24% -24% auto;
  width: 78%;
  height: 82%;
  opacity: 0.13;
}
.instrument-routing .vertical-tile.vt-architecture[class*="tone-"]:hover .tile-mark {
  opacity: 0.24;
}

@media (max-width: 960px) {
  .instrument-routing .manifest-architecture {
    grid-template-columns: minmax(0, 1fr);
  }
  .instrument-routing .vertical-tile.vt-architecture {
    min-height: 260px;
  }
}

@media (max-width: 760px) {
  .instrument-routing {
    padding: var(--s-8) 0 var(--s-9);
  }
  .instrument-routing > .shell {
    padding: 0 var(--shell-pad-sm);
  }
  .instrument-routing .routing-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
  .instrument-routing .routing-lede {
    grid-column: 1;
  }
  .instrument-routing .manifest-heading {
    max-width: 10.5ch;
    font-size: clamp(40px, 12vw, 58px);
  }
}

/* ROW 1 — architecture: two tiles, big icons, full pitch, role eyebrow */
.manifest-architecture {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.manifest-proof-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vertical-tile.vt-architecture {
  gap: var(--s-3);
  padding: var(--s-4);
}
.vertical-tile.vt-architecture .tile-name {
  font-size: clamp(28px, 1.6vw + 14px, 36px);
}
/* tile-body flex-column so CTA pins to the bottom edge — keeps Port and
   Starboard CTAs on the same baseline regardless of pitch length. */
.vertical-tile.vt-architecture .tile-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vertical-tile.vt-architecture .tile-cta {
  margin-top: auto;
  padding-top: var(--s-4);
}
.tile-role {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--s-2);
}
/* ROW 2 — verticals: four tiles, icon-top, compact (no pitch) */
.manifest-verticals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

@media (max-width: 760px) {
  body[data-route="/corpus"] .manifest-architecture {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-route*="/for/"] .manifest-architecture,
  body[data-route*="/for/"] .landing-steps,
  body[data-route*="/for/"] .landing-trust {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-route*="/for/"] .landing-hero .lede-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-route="/corpus/glossary"] .body-content div[style*="justify-content:space-between"] {
    flex-wrap: wrap;
    gap: 4px 12px !important;
  }
  body[data-route="/corpus/glossary"] .body-content span[style*="white-space:nowrap"] {
    white-space: normal !important;
  }
  body[data-route="/corpus/audit"] main .shell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-route="/corpus/audit"] table {
    min-width: 640px;
  }
}
/* Row 2 tall — five plaques (Defense · Medicine · Law · Education · DIY)
   occupy the RIGHT 5/6 of the Backstaff card's vertical band. One row,
   six columns: col 1 = Backstaff hero text (the existing narrow tile-body
   column inside the card), cols 2–6 = the five plaques.
   .manifest-verticals-tall = positioning frame (right 5/6) + vertical
     centering box (matches Backstaff height, centers kit-rail inside).
   .kit-rail (inner wrapper) = the actual 5-col grid; gives us a clean
     single child for the frame to center. (soc-715) */
.manifest-verticals.manifest-verticals-tall {
  display: flex;
  align-items: center;
  width: calc(var(--manifest-backstaff-kits-split) - var(--s-4));
  min-height: var(--manifest-kits-rail-min-height);
  margin-left: auto;
  margin-top: var(--manifest-backstaff-kits-pull); /* controlled by the four manifest-* vars in :root */
  /* brass-deep breathing room on the right edge so the last plaque
     doesn't kiss Backstaff's right border (collision fix). */
  padding-right: var(--s-7);
  position: relative;
  z-index: 5;
  /* brass-deep above/below + gaps between plaques fall through to Backstaff */
  pointer-events: none;
  /* neutralise the old grid that lived on this selector */
  grid-template-columns: unset;
}
.kit-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
  width: 100%;
  pointer-events: none;
}
.manifest-verticals.manifest-verticals-tall .vertical-tile.vt-compact {
  min-height: var(--manifest-kits-card-min-height);
  pointer-events: auto;
}
.manifest-verticals.manifest-verticals-tall .vertical-tile.vt-compact .tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.manifest-verticals.manifest-verticals-tall .vertical-tile.vt-compact .tile-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.manifest-verticals.manifest-verticals-tall .vertical-tile.vt-compact .tile-cta {
  margin-top: auto;
}
.manifest-verticals.manifest-verticals-tall .vertical-tile.vt-compact .tile-mark {
  /* neutralized for kit cards — they now use row layout with small brand-style mark */
}

/* Row 3 base — Methodology spans the full table width as one wide card. */
.manifest-base {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
/* Base tile (Methodology, full-width row 3) — shorter + properly centered.
   Height down 33% from 180→120; content is a true centered stack, not a
   loose 3-column grid where the anchor stretched the middle and the CTA
   floated to the right edge looking unmoored. */
.vertical-tile.vt-compact.tile-base {
  min-height: 120px;
  padding: var(--s-4) var(--s-5);
}
.vertical-tile.vt-compact.tile-base .tile-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  width: 100%;
  height: 100%;
}
.vertical-tile.vt-compact.tile-base .tile-body .tile-name,
.vertical-tile.vt-compact.tile-base .tile-body .tile-anchor,
.vertical-tile.vt-compact.tile-base .tile-body .tile-cta { margin: 0; }
.vertical-tile.vt-compact.tile-base .tile-mark {
  /* watermark anchored to right edge, scaled to fit the shorter tile.
     Reduced aggression to stop overlapping/glitching the centered text. */
  position: absolute;
  inset: auto -2% -5% auto;
  width: 18%;
  height: 110%;
  z-index: 0;
  opacity: 0.6;
}
.vertical-tile.vt-compact.tile-base .tile-body {
  position: relative;
  z-index: 1;
}
.vertical-tile.vt-compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4);
  min-width: 0;
}
.vertical-tile.vt-compact .tile-mark {
  width: 72px;
  height: 72px;
  margin-bottom: var(--s-2);
}
.vertical-tile.vt-compact .tile-mark svg {
  width: 56px;
  height: 56px;
}
/* tile-body fills the tile so .tile-cta { margin-top: auto } pins to the
   actual bottom edge — CTA stays on the same baseline whether the anchor
   line wraps to 2 lines or stays on 1. */
.vertical-tile.vt-compact .tile-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
  min-width: 0;
}
.vertical-tile.vt-compact .tile-name {
  font-size: 22px;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}
.tile-anchor {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
  /* reserve two lines so anchor height is uniform across all tiles
     — kills the cta-drift jitter without forcing every anchor to fit
     2 lines worth of copy. */
  min-height: 2.7em;
  margin-bottom: var(--s-2);
}
.vertical-tile.vt-compact .tile-cta {
  margin-top: auto;
}

.vertical-tile {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.vertical-tile:hover {
  background: var(--paper-3);
  border-color: var(--brass);
  color: var(--ink);
}
.tile-mark {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule-hair);
}
.vertical-tile:hover .tile-mark { color: var(--brass-deep); }
.tile-mark svg { width: 72px; height: 72px; }

/* ── Canonical tile colorway (soc-710) ───────────────────────────────
   3-layer brand application on home-page tiles:
     TOP    .tone-port      → navy             (inbound architecture)
            .tone-starboard → crimson          (outbound architecture)
     MID    .tone-vertical  → off-white        (Defense · Medicine · Law · Education)
     BOT    .tone-misc      → charcoal         (Methodology · Technical Walkthrough · Reviewer Check)
            .tone-corpus    → flat-brass       (the routing spine)
   Hover state: each tone shifts its accents and CTA toward inverted contrast. */

/* Tone tiles use the mark as a TRANSPARENT watermark embedded in the tile,
   not a chip stuck on top. The mark fills most of the tile at low opacity
   (currentColor strokes + the SVG's own brass-deep accents bleed naturally),
   tile body content overlays it. The icon BECOMES the tile.

   Two things make this work:
   - .vertical-tile is set position:relative so absolute children anchor to it.
   - .tile-mark is taken out of normal flow and oversized; the .tile-body's
     own background-free flow renders text above the watermark.
   The icon's inline #745030 accents stay native; on dark tones they read
   as a darker shadow inside the bright mark — intentional 2-tone depth. */
.vertical-tile[class*="tone-"] { position: relative; overflow: hidden; }
.vertical-tile[class*="tone-"] .tile-mark {
  position: absolute;
  inset: auto -12% -18% auto;
  width: 70%;
  height: 70%;
  opacity: 0.20;
  pointer-events: none;
  z-index: 0;
  margin: 0;
}
.vertical-tile[class*="tone-"] .tile-mark svg {
  width: 100%;
  height: 100%;
}
.vertical-tile[class*="tone-"] .tile-body {
  position: relative;
  z-index: 1;
}
.vertical-tile[class*="tone-"]:hover .tile-mark { opacity: 0.32; }

/* CTA arrow orphaned to the far edge of the tile — text left, arrow right,
   whitespace in between. Used on top-row architecture tiles (soc-711). */
.tile-cta.cta-orphan-arrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
}
.tile-cta.cta-orphan-arrow > span[aria-hidden] {
  display: block;
}

/* ── Architecture-tier consistency pass (soc-711) ────────────────────
   All three top-row tiles (Port · Starboard · Corpus) share one set of
   internal spacings, eyebrow size, pitch font, and watermark scale.
   Geometry (grid columns, padding, mark size) is supplied by the tone-specific
   overrides below for the homepage cards. */
.vertical-tile.vt-architecture .tile-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  min-height: 100%;
}
.vertical-tile.vt-architecture .tile-role {
  font-size: 13px;
  letter-spacing: 0.22em;
  line-height: 1.4;
  margin: 0 0 var(--s-2);
}
.vertical-tile.vt-architecture .tile-name {
  margin: 0 0 var(--s-2);
}
.vertical-tile.vt-architecture .tile-pitch {
  font-size: 22px;
  line-height: 1.35;
  max-width: none;
  margin: 0;
}
.vertical-tile.vt-architecture.tone-port,
.vertical-tile.vt-architecture.tone-starboard,
.vertical-tile.vt-architecture.tone-corpus,
.vertical-tile.vt-architecture.tone-backstaff {
  grid-template-columns: 1fr;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-3);
}
.vertical-tile.vt-architecture .tile-cta {
  /* margin-top:auto pushes the CTA to the bottom of the tile-body, so the
     arrows on all 3 top-row cards land on the same horizontal baseline
     regardless of pitch length. */
  margin-top: auto;
}
.vertical-tile.vt-architecture .tile-cta.cta-orphan-arrow > span[aria-hidden] {
  /* The arrow itself is the alignment anchor — keep it pinned bottom. */
  margin-top: var(--s-1);
}

/* TOP layer — Port (navy) · Starboard (crimson). Larger watermark. */
.vertical-tile.tone-port,
.vertical-tile.tone-starboard {
  color: var(--paper);
  border: 0;
}
.vertical-tile.tone-port { background: var(--port-navy); }
.vertical-tile.tone-starboard { background: var(--starboard-crimson); }
.vertical-tile.tone-port .tile-name,
.vertical-tile.tone-port .tile-role,
.vertical-tile.tone-port .tile-pitch,
.vertical-tile.tone-port .tile-cta,
.vertical-tile.tone-starboard .tile-name,
.vertical-tile.tone-starboard .tile-role,
.vertical-tile.tone-starboard .tile-pitch,
.vertical-tile.tone-starboard .tile-cta { color: var(--paper); }
.vertical-tile.tone-port .tile-patent,
.vertical-tile.tone-starboard .tile-patent { color: var(--brass-light); }
.vertical-tile.tone-port:hover { background: #1A3450; }
.vertical-tile.tone-starboard:hover { background: #A03333; }
/* Architecture-tier watermark — uniform across all 3 top-row tones
   (Port · Backstaff · Starboard). Per-tile opacity/size variations were
   the source of the inconsistency. (soc-711)
   Watermark slid further right (inset right: -12% → -28%) so the
   load-bearing prose on the left has breathing room. (soc-713) */
.vertical-tile.vt-architecture[class*="tone-"] .tile-mark {
  inset: auto -28% -18% auto;
  width: 80%;
  height: 80%;
  opacity: 0.18;
}
.vertical-tile.vt-architecture[class*="tone-"]:hover .tile-mark {
  opacity: 0.30;
}

/* MID layer — Defense · Medicine · Law · Education on off-white. Mark is
   dark-on-light so opacity is slightly lower to keep text readable. */
/* Vertical cards — ornamental plaque border: thick double-rule stone
   outer + brass-deep hairline inset + brass corner pins. Reads as a
   commemorative frame (instrument-house, navigation-chart). */
.vertical-tile.tone-vertical {
  background: var(--off-white);
  border: 8px double var(--stone);
  box-shadow: inset 0 0 0 1px var(--brass-deep);
  color: var(--ink);
  background-clip: padding-box;
}
.vertical-tile.tone-vertical .tile-mark { opacity: 0.14; }
.vertical-tile.tone-vertical:hover .tile-mark { opacity: 0.24; }



/* Kit cards: force canonical icons to render as circular PFPs above the text
   instead of as watermarks. This overrides the general absolute positioning
   on tone-* cards for the compact vertical kit cards only. */
.manifest-verticals .vertical-tile.vt-compact.tone-vertical {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
}



.manifest-verticals .vertical-tile.vt-compact.tone-vertical .tile-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}

/* Constrain kit card titles to max 2 lines */
.manifest-verticals .vertical-tile.vt-compact.tone-vertical .tile-header .tile-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.manifest-verticals .vertical-tile.vt-compact.tone-vertical .tile-mark {
  position: static !important;
  width: 36px;
  height: 36px;
  margin: 0 4px 0 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--brass-deep);
  flex-shrink: 0;
  opacity: 1;
  pointer-events: auto;
  z-index: auto;
  align-self: flex-start;
}

.manifest-verticals .vertical-tile.vt-compact.tone-vertical .tile-anchor {
  min-height: 2.2em;
  margin-bottom: var(--s-1);
}

.manifest-verticals .vertical-tile.vt-compact.tone-vertical .tile-mark svg {
  width: 100%;
  height: 100%;
}
.vertical-tile.tone-vertical:hover {
  background: var(--paper);
  border-color: var(--brass-deep);
  box-shadow: inset 0 0 0 1px var(--stone);
}



/* BOTTOM layer — Methodology · Technical Walkthrough · Reviewer Check on
   charcoal. Same watermark treatment as top layer. */
.vertical-tile.tone-misc {
  background: var(--charcoal);
  color: var(--paper);
  border: 0;
}
.vertical-tile.tone-misc .tile-name,
.vertical-tile.tone-misc .tile-anchor,
.vertical-tile.tone-misc .tile-cta { color: var(--paper); }
.vertical-tile.tone-misc:hover { background: #353B43; }

/* Corpus — flat brass, the routing spine. Slightly higher watermark
   opacity since the mark is paper-colored on warm brass. */
.vertical-tile.tone-corpus {
  background: var(--flat-brass);
  color: var(--paper);
  border: 0;
}
.vertical-tile.tone-corpus .tile-name,
.vertical-tile.tone-corpus .tile-role,
.vertical-tile.tone-corpus .tile-pitch,
.vertical-tile.tone-corpus .tile-anchor,
.vertical-tile.tone-corpus .tile-cta { color: var(--paper); }
.vertical-tile.tone-corpus:hover { background: #B08F54; }

/* Backstaff — brass-deep, the brand body that holds the Astrolabe kernel.
   Sits between Port (navy) and Starboard (crimson) in the instrument row;
   reads as the warm middle anchor — the body to the kernel's two faces. */
.vertical-tile.tone-backstaff {
  background: var(--brass-deep);
  color: var(--paper);
  border: 0;
}

.vertical-tile.tone-backstaff .tile-name,
.vertical-tile.tone-backstaff .tile-role,
.vertical-tile.tone-backstaff .tile-pitch,
.vertical-tile.tone-backstaff .tile-anchor,
.vertical-tile.tone-backstaff .tile-cta { color: var(--paper); }
.vertical-tile.tone-backstaff .tile-patent { color: var(--brass-light); }
.vertical-tile.tone-backstaff:hover { background: #5B3E25; }

.vertical-tile.tone-backstaff .tile-name .wordmark-inline {
  display: inline-block;
  height: 32px;
  width: auto;
  vertical-align: baseline;
}

.tile-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.tile-pitch {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: var(--s-3);
}
.tile-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

/* BACKWALL — 3 tiles, methodology · demo · verify */
.aicons-backwall {
  padding: var(--s-9) 0 var(--s-11);
  border-top: 1px solid var(--rule-soft);
}
.backwall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.backwall-tile {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s-5);
  padding: var(--s-7);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.backwall-tile:hover {
  background: var(--paper-2);
  border-color: var(--brass-deep);
}
.bw-mark {
  width: 56px;
  height: 56px;
  color: var(--ink);
}
.bw-mark svg { width: 100%; height: 100%; }
.backwall-tile:hover .bw-mark { color: var(--brass-deep); }
.bw-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--s-2);
}
.bw-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.bw-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

@media (max-width: 960px) {
  .aicons-lede .lede-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .lede-fingerprint { grid-template-columns: repeat(5, 1fr); }
  .mini-grid { grid-template-columns: repeat(8, 1fr); }
  .verticals-grid { grid-template-columns: 1fr; }
  .backwall-grid { grid-template-columns: 1fr; }
  .aicons-specimen .register-head { grid-template-columns: 1fr; }
  .manifest-verticals { grid-template-columns: repeat(2, 1fr); }
  .psp-section .manifest-verticals {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Tablet and below: prevent kit cards from being 5-up and clipping text */
  .manifest-verticals.manifest-verticals-tall .kit-rail {
    grid-template-columns: repeat(2, 1fr);
  }
  .manifest-verticals.manifest-verticals-tall {
    margin-top: 0;
    width: 100%;
    position: static;
  }

  /* Reduce kit card titles on tablet sizes to prevent cutoff */
  .manifest-verticals .vertical-tile.vt-compact.tone-vertical .tile-header .tile-name {
    font-size: 16px;
  }
}

/* Tablet sizes: keep the three architecture cards side-by-side but tighten them so text doesn't clip */
@media (max-width: 850px) {
  .manifest-architecture {
    gap: var(--s-3);
  }
  .manifest-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vertical-tile.vt-architecture {
    padding: var(--s-3);
  }
  .vertical-tile.vt-architecture .tile-name {
    font-size: 22px;
  }
  .vertical-tile.vt-architecture .tile-pitch {
    font-size: 16px;
  }
}
@media (max-width: 560px) {
  .mini-grid { grid-template-columns: repeat(6, 1fr); }
  .lede-fingerprint { grid-template-columns: repeat(5, 1fr); }
  .vertical-tile { grid-template-columns: 1fr; }
  .tile-mark { width: 100%; height: 88px; }
  .manifest-verticals { grid-template-columns: 1fr; }
  .psp-section .manifest-verticals {
    grid-template-columns: 1fr !important;
  }
  .vertical-tile.vt-architecture { grid-template-columns: 1fr; }
  .vertical-tile.vt-architecture .tile-mark { width: 100%; height: 96px; }

  /* Stack the three architecture cards only at true mobile sizes */
  .manifest-architecture,
  .manifest-proof-grid { grid-template-columns: 1fr; }

  /* Stack kits fully on small screens to prevent any text clipping */
  .manifest-verticals.manifest-verticals-tall .kit-rail {
    grid-template-columns: 1fr;
  }
  .manifest-verticals.manifest-verticals-tall {
    margin-top: 0;
    width: 100%;
    position: static;
  }

  /* Further reduce kit card titles on mobile */
  .manifest-verticals .vertical-tile.vt-compact.tone-vertical .tile-header .tile-name {
    font-size: 14px;
  }
}


/* ── 6. UTILITIES ──────────────────────────────────────────────────────── */

.flex-row    { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.flex-col    { display: flex; flex-direction: column; gap: var(--s-4); }
/* tile-mono — inline code-literal token (e.g. *-board) in the mono face,
   sized in em so it tracks whatever pitch it sits in, slightly tightened.
   Inherits the surrounding ink color; reusable on any tile or prose run. */
.tile-mono { font-family: var(--mono); font-size: 0.9em; letter-spacing: -0.01em; white-space: nowrap; }
.mt-4 { margin-top: var(--s-4); }   .mt-5 { margin-top: var(--s-5); }
.mt-7 { margin-top: var(--s-7); }   .mt-8 { margin-top: var(--s-8); }
.mt-9 { margin-top: var(--s-9); }
.mb-7 { margin-bottom: var(--s-7); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* ── 7. RESPONSIVE ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .hero-grid           { gap: var(--s-9); }
  .section-head, .marg { grid-template-columns: 64px 1fr; gap: var(--s-5); }
  :root { --margin-col: 64px; }
}

@media (max-width: 760px) {
  :root { --shell-pad: var(--shell-pad-sm); --margin-col: 0px; }
  .shell { padding: 0 var(--shell-pad-sm); }
  .masthead { gap: var(--s-3); padding: var(--s-3) 0; }
  .masthead .global-breadcrumb,
  .masthead .masthead-cta { display: none; }
  .masthead .brand svg.brand-wordmark { height: 38px; }
  .hero { padding: var(--s-7) 0 var(--s-8); }
  .hero-grid,
  .hero-grid.hero-proof-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .hero h1 {
    font-size: clamp(42px, 14vw, 64px);
    line-height: 0.98;
    margin-bottom: var(--s-5);
  }
  .hero-lede {
    font-size: clamp(19px, 5vw, 23px);
    margin-bottom: var(--s-5);
  }
  .cta-row {
    flex-direction: column;
    gap: var(--s-2);
  }
  .cta-row .btn {
    width: 100%;
    justify-content: space-between;
  }
  .proof-object {
    padding: var(--s-4);
  }
  .proof-object-row {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
  .section-head, .marg { grid-template-columns: 1fr; gap: var(--s-3); }
  .section-head .section-num, .marg .rail { color: var(--brass-deep); }
  .colophon .colo-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .vertical-tile[class*="tone-"] .tile-mark {
    inset: auto 0 -12% auto;
    width: 44%;
    height: 54%;
  }
  .vertical-tile.vt-architecture[class*="tone-"] .tile-mark {
    inset: auto 0 -12% auto;
    width: 44%;
    height: 54%;
  }
}


/* ── 8. PRINT — capability pages get printed by procurement officers ─── */

@media print {
  :root { --paper: white; --paper-2: white; --paper-3: #eee; }
  body { background: white; color: black; font-size: 11pt; }
  body::before { display: none; }
  .skip-link, .btn { display: none !important; }
  .hero, .psp-section { border-color: #ccc; page-break-inside: avoid; padding: 18pt 0; }
  .masthead { border-bottom: 1pt solid black; padding: 12pt 0; }
  .colophon { border-top: 1pt solid black; }
  a { color: black; text-decoration: underline; }
  .hero h1 { font-size: 36pt; }
  .section-title { font-size: 22pt; }
}


/* ── 8.5  CARRY-OVER PRIMITIVES ────────────────────────────────────────────
   Vertical / capability / reviewer-check pages still use these primitives —
   marginalia, procurement block, spec-table — pending their own design pass.
   ────────────────────────────────────────────────────────────────────── */

/* Marginalia rail + content column (vertical pages, capability, verify) */
.body-grid {
  display: grid;
  grid-template-columns: var(--margin-col) 1fr;
  gap: var(--s-7);
  min-width: 0;
}
.body-content {
  max-width: min(70ch, 100%);
  min-width: 0;
}

/* Procurement block — capabilities.html */
.proc-block {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  padding: var(--s-7) var(--s-8);
  margin: var(--s-8) 0;
}
.proc-block h3 {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--s-5);
}
.proc-block .proc-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--rule-soft);
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.5;
}
.proc-block .proc-row:last-child { border-bottom: 0; }
.proc-block .proc-row .k {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  color: var(--brass-deep);
}
.proc-block .proc-row .v { color: var(--ink); }
.proc-block .proc-row .v code {
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 11px;
}
@media (max-width: 760px) {
  .body-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }
  .body-content code,
  .callout code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  pre.prose,
  .code-block {
    overflow-x: hidden;
    white-space: pre-wrap;
  }
  pre.prose code,
  .code-block code {
    min-width: 0;
    width: auto;
    white-space: pre-wrap;
  }
  .proc-block .proc-row { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* spec-table — used on capabilities and the vertical pages */
.spec-table {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--rule);
  margin: var(--s-7) 0;
  max-width: 100%;
  min-width: 0;
}
.spec-table .row {
  display: grid;
  grid-template-columns: 240px 1fr;
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--rule-soft);
  align-items: baseline;
  min-width: 0;
}
.spec-table .row .k {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--brass-deep);
}
.spec-table .row .v {
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.spec-table .row .v code {
  font-family: var(--mono);
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 11px;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) { .spec-table .row { grid-template-columns: 1fr; gap: var(--s-1); } }

/* Bare-section padding fallback — verify-result, future ad-hoc sections.
   Excludes the aicons-* surfaces, which set their own padding. */
section:not(.psp-section):not(.hero):not(.verify-result):not(.aicons-lede):not(.aicons-specimen):not(.aicons-verticals):not(.aicons-backwall) {
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--rule);
}

/* Starboard bell strip — the helm's audible event layer. */
section.starboard-bell-strip {
  padding: var(--s-8) 0 var(--s-9);
  background:
    linear-gradient(90deg, rgba(184, 145, 90, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(244, 241, 234, 0.08) 1px, transparent 1px),
    var(--void);
  background-size: 42px 42px;
  color: var(--paper);
  border-bottom: 1px solid var(--brass-deep);
}
.bell-strip-head {
  display: grid;
  grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: end;
  margin-bottom: var(--s-7);
}
.bell-strip-label {
  color: var(--brass-light);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bell-strip-head h2 {
  margin: 0;
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 3vw + 16px, 56px);
  line-height: 0.98;
  letter-spacing: -0.018em;
}
.bell-strip-head p {
  grid-column: 2;
  max-width: 66ch;
  color: rgba(244, 241, 234, 0.72);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.48;
  font-weight: 300;
}
.bell-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.fleet-bell {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr 1fr auto;
  gap: var(--s-3);
  border: 1px solid rgba(244, 241, 234, 0.16);
  border-top: 3px solid var(--brass);
  border-radius: 8px;
  background: rgba(244, 241, 234, 0.045);
  padding: var(--s-4);
  box-shadow: inset 0 1px 0 rgba(244, 241, 234, 0.08);
}
.fleet-bell.vessel-law { border-top-color: var(--brass-light); }
.fleet-bell.vessel-corpus { border-top-color: var(--flat-brass); }
.fleet-bell.vessel-war { border-top-color: #9ab0c5; }
.fleet-bell.vessel-next { border-top-color: var(--signal); }
.bell-topline,
.bell-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.bell-index,
.bell-state,
.bell-actions a,
.bell-line strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bell-index {
  color: rgba(244, 241, 234, 0.58);
}
.bell-state {
  border: 1px solid rgba(244, 241, 234, 0.20);
  border-radius: 999px;
  padding: 3px 7px;
  white-space: nowrap;
}
.bell-state.at-sea {
  color: #8fd7ba;
  border-color: rgba(143, 215, 186, 0.55);
}
.bell-state.drydock {
  color: #f0a08f;
  border-color: rgba(240, 160, 143, 0.58);
}
.fleet-bell h3 {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.012em;
}
.bell-line {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--s-3);
  margin: 0;
  color: rgba(244, 241, 234, 0.80);
  font-size: 13px;
  line-height: 1.42;
}
.bell-line strong {
  color: #8fd7ba;
  font-weight: 500;
}
.bell-line.analysis strong {
  color: var(--brass-light);
}
.bell-line span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.bell-actions {
  padding-top: var(--s-3);
  border-top: 1px solid rgba(244, 241, 234, 0.12);
}
.bell-actions a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 145, 90, 0.72);
  padding-bottom: 2px;
}
.bell-actions a:hover {
  color: var(--brass-light);
}

@media (max-width: 1120px) {
  .bell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bell-strip-head { grid-template-columns: 1fr; gap: var(--s-4); }
  .bell-strip-head p { grid-column: auto; }
  .bell-grid { grid-template-columns: 1fr; }
  .bell-line { grid-template-columns: 1fr; gap: var(--s-1); }
  .bell-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ── 8b. HERO-CARD · METHODOLOGY THRONE ────────────────────────────────── */

/* The methodology preprint is the brand-principal — the load-bearing math
   every bundle attests to. The throne card gives it a dedicated component
   (distinct from the regime grid below) so it reads as the source, not a
   sibling. Two-column on desktop · single column under 760px. */
.hero-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-8);
  align-items: flex-start;
  padding: var(--s-9);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brass-deep);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 200ms ease, background 200ms ease,
              box-shadow 200ms ease, transform 200ms ease;
  box-shadow: 0 2px 0 rgba(140, 106, 63, 0.06);
}
a.hero-card:hover {
  border-color: var(--brass-deep);
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(140, 106, 63, 0.12);
}
.hero-card-mark svg {
  width: 64px;
  height: 64px;
  color: var(--brass-deep);
  padding: 12px;
  background: var(--paper);
  border: 1px solid rgba(116, 80, 48, 0.32);
  border-radius: 6px;
  box-sizing: content-box;
  box-shadow: 0 3px 8px rgba(10, 14, 20, 0.08),
              inset 0 0 0 1px rgba(244, 241, 234, 0.55);
  transition: background 220ms ease, border-color 220ms ease,
              box-shadow 220ms ease, transform 220ms ease;
}
a.hero-card:hover .hero-card-mark svg {
  background: var(--paper-2);
  border-color: var(--brass-deep);
  box-shadow: 0 8px 18px rgba(116, 80, 48, 0.2),
              inset 0 0 0 1px rgba(244, 241, 234, 0.4);
  transform: translateY(-1px);
}
.hero-card-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.hero-card-class {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.hero-card-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4vw + 12px, 56px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-5);
  color: var(--ink);
}
.hero-card-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0 0 var(--s-6);
}
.hero-card-lede em { font-style: italic; color: var(--brass-deep); }
.hero-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.hero-card-meta .meta-sep { color: var(--brass); opacity: 0.7; }
.hero-card-meta .meta-code { color: var(--ink-2); }
.hero-card-cta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
  transition: transform 160ms ease;
}
a.hero-card:hover .hero-card-cta { transform: translateX(4px); }

@media (max-width: 760px) {
  .hero-card {
    grid-template-columns: 1fr;
    padding: var(--s-7);
    gap: var(--s-6);
  }
  .hero-card-title { font-size: clamp(28px, 6vw + 8px, 40px); }
  .hero-card-meta .hero-card-cta { margin-left: 0; }
}

/* ── 8c. REGIME HEADLINE SWAP · SITEWIDE ──────────────────────────────── */

/* Every .regime-row that leads with a chip now hosts its load-bearing line
   (duty-in-scope, framing question, standards counterpart) inside .domain,
   with the entity / capability / artifact name demoted to a small italic
   .regime-subname. Four flavors keyed off the chip type:
     · card-tag-application → regulatory citation, mono 20px blood red
     · card-tag-capability  → framing question, serif italic 22px ink
     · card-tag-artifact    → artifact-shape question, serif italic 22px ink
     · card-tag-standard    → standards counterpart, mono 18px brass-deep
   Other chip types (methodology / demonstration) keep the original layout. */
.regime-row:has(.card-tag-application) .domain,
.regime-row:has(.card-tag-capability) .domain,
.regime-row:has(.card-tag-artifact) .domain,
.regime-row:has(.card-tag-standard) .domain {
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-bottom: var(--s-2);
}
.regime-row:has(.card-tag-application) .domain::after,
.regime-row:has(.card-tag-capability) .domain::after,
.regime-row:has(.card-tag-artifact) .domain::after,
.regime-row:has(.card-tag-standard) .domain::after {
  display: none;
}
.regime-row:has(.card-tag-application) .domain .card-tag,
.regime-row:has(.card-tag-capability) .domain .card-tag,
.regime-row:has(.card-tag-artifact) .domain .card-tag,
.regime-row:has(.card-tag-standard) .domain .card-tag {
  vertical-align: 1px;
  font-size: 11px;
  padding: 4px 8px;
  letter-spacing: 0.14em;
}

/* Application flavor — regulatory citation. Mono, blood red, weight 500. */
.regime-row:has(.card-tag-application) .regime-citation {
  color: var(--blood);
  font-weight: 500;
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* Capability + Artifact flavors — framing question / artifact-shape question.
   Serif italic, ink, weight 300. Same idiom because both ask a question. */
.regime-row:has(.card-tag-capability) .regime-citation,
.regime-row:has(.card-tag-artifact) .regime-citation {
  color: var(--ink);
  font-weight: 300;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  flex-basis: 100%;
}

/* Standards flavor — counterpart binding (term ↔ standard). Mono, brass-deep,
   weight 500. Document grammar, not prose. */
.regime-row:has(.card-tag-standard) .regime-citation {
  color: var(--brass-deep);
  font-weight: 500;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  flex-basis: 100%;
}

/* Subname — entity / capability name, demoted. Arrow only on link cards. */
.regime-row .regime-subname {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  color: var(--ink-2);
  margin: 0 0 var(--s-5);
  letter-spacing: -0.005em;
}
a.regime-row .regime-subname::after {
  content: " →";
  color: var(--brass-deep);
  transition: transform 160ms ease;
}
a.regime-row:hover .regime-subname::after {
  transform: translateX(4px);
}

@media (max-width: 760px) {
  .regime-row:has(.card-tag-application) .domain,
  .regime-row:has(.card-tag-capability) .domain,
  .regime-row:has(.card-tag-artifact) .domain,
  .regime-row:has(.card-tag-standard) .domain {
    font-size: 16px;
  }
  .regime-row:has(.card-tag-application) .regime-citation { font-size: 17px; }
  .regime-row:has(.card-tag-capability) .regime-citation,
  .regime-row:has(.card-tag-artifact) .regime-citation    { font-size: 19px; }
  .regime-row:has(.card-tag-standard) .regime-citation    { font-size: 16px; }
}

/* ── 8d. CAPABILITY-CARD · DEDICATED TREATMENT + PER-CARD CTA ─────────── */

/* Capability cards on the four vertical pages are specimen pieces, not
   entry doors. They sit underneath the home regime-row entry idiom and
   adopt a document-grammar variant: paper-2 surface, brass left rule
   (sub-card idiom writ large), and a per-card "Get in touch" CTA that
   carries the capability slug to the contact modal. */
.regime-row.capability-card {
  background: var(--paper-2);
  border-left: 3px solid var(--brass);
  transition: border-left-color 200ms ease, background 200ms ease;
}
.regime-row.capability-card:hover {
  border-left-color: var(--brass-deep);
}
.regime-row.capability-card:focus-within {
  border-left-color: var(--brass-deep);
}

/* CTA strip — hairline-separated, right-aligned ghost link. The arrow
   advances on hover; the border outlines on hover. Mono caps for
   evidence-document grammar consistency. */
.capability-cta {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: flex-end;
}
.capability-cta .cap-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.capability-cta .cap-cta:hover,
.capability-cta .cap-cta:focus-visible {
  border-color: var(--brass-deep);
  background: var(--paper);
  outline: none;
}
.capability-cta .cap-cta .cta-key {
  color: var(--ink-3);
  font-weight: 400;
}
.capability-cta .cap-cta .cta-sep {
  color: var(--brass-deep);
  opacity: 0.7;
}
.capability-cta .cap-cta .cta-slug {
  color: var(--brass-deep);
  font-weight: 500;
}
.capability-cta .cap-cta .cta-arrow {
  transition: transform 160ms ease;
}
.capability-cta .cap-cta:hover .cta-arrow,
.capability-cta .cap-cta:focus-visible .cta-arrow {
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .capability-cta { justify-content: flex-start; }
  .capability-cta .cap-cta { padding: 6px 8px; font-size: 11px; }
}


/* ── 8e. MEASURE-GROUP HEADINGS · MAXIMALIST CAPABILITY BUILD ─────────── */

/* Each of the four vertical pages now hosts 22 capability cards mapped to
   the NIST AI RMF MEASURE function. Cards are grouped under H3 measure-group
   headings (MEASURE 1–4) so the long fleet stays scannable. The kicker on
   the same line names what the group asks. */
.measure-group {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: var(--s-9) 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
}
.measure-group:first-of-type {
  margin-top: var(--s-7);
}
.measure-group-kicker {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

/* Coverage status — mono caps, sits between .delivers and the CTA. Two states:
   "Mapped" → currently in nist_rmf_map.json (M-1.1, M-2.5, M-2.7)
   "Posture declared · pentest forthcoming" → framework alignment claimed but
   pentest not yet authored. Honest labeling, no compliance theater. */
.regime-row.capability-card .cap-status {
  display: block;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.regime-row.capability-card .cap-status-live {
  color: var(--brass-deep);
}
.regime-row.capability-card .cap-status-live::before {
  content: "● ";
  color: var(--brass-deep);
  letter-spacing: 0;
}
.regime-row.capability-card .cap-status-posture {
  color: var(--ink-3);
}
.regime-row.capability-card .cap-status-posture::before {
  content: "○ ";
  color: var(--ink-3);
  letter-spacing: 0;
}


/* ── 8f. INSTRUMENT-CARD · REUSABLE FACEPLATE ─────────────────────────── */

/* The instrument-card is the single, drop-in component that names what
   Planisphere IS, surfaces the reference-root hero stat, groups specs
   into four thematic clusters, and offers two verification affordances.
   Self-contained: BEM-style root class .instrument-card with __sub
   elements. No outer scope required. Drops into <main>, <section>,
   <aside>, or a body-content column without modification. */

.instrument-card {
  position: relative;
  margin: var(--s-9) 0;
  padding: var(--s-9);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brass-deep);
  box-shadow: 0 2px 0 rgba(140, 106, 63, 0.06);
}

/* HEADER ──────────────────────────────────────────────────────────────── */

.instrument-card__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-7);
  align-items: flex-start;
  margin-bottom: var(--s-8);
}
.instrument-card__mark svg {
  width: 80px;
  height: 80px;
  color: var(--brass-deep);
  padding: 14px;
  background: var(--paper);
  border: 1px solid rgba(116, 80, 48, 0.32);
  border-radius: 6px;
  box-sizing: content-box;
  box-shadow: 0 3px 8px rgba(10, 14, 20, 0.06),
              inset 0 0 0 1px rgba(244, 241, 234, 0.55);
}
.instrument-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.instrument-card__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass);
}
.instrument-card__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3vw + 8px, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-4);
  color: var(--ink);
}
.instrument-card__lede {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 64ch;
}
.instrument-card__lede em {
  font-style: italic;
  color: var(--brass-deep);
}

/* HERO STAT ───────────────────────────────────────────────────────────── */

.instrument-card__hero-stat {
  margin: var(--s-7) 0;
  padding: var(--s-6) var(--s-7);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
}
.instrument-card__hero-stat-label {
  margin-bottom: var(--s-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.instrument-card__hero-stat-value {
  margin-bottom: var(--s-3);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--ink);
  word-break: break-all;
}
.instrument-card__hero-stat-provenance {
  padding-top: var(--s-3);
  border-top: 1px dashed var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--brass-deep);
}

/* SPEC GRID ─────────────────────────────────────────────────────────────
   Four spec-cluster groups in a 2×2 grid. Each cluster: title + 3 k/v
   rows. Collapses to single column under 760px. */

.instrument-card__spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7) var(--s-8);
  margin-top: var(--s-7);
}
.instrument-card__spec-group-title {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.instrument-card__spec-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  font-size: 13px;
  line-height: 1.5;
  align-items: baseline;
}
.instrument-card__spec-row .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.instrument-card__spec-row .v {
  color: var(--ink);
}
.instrument-card__spec-row .v code {
  font-family: var(--mono);
  background: var(--paper-3);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 11px;
}

/* CTA STRIP ───────────────────────────────────────────────────────────── */

.instrument-card__cta-strip {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  align-items: center;
}
.instrument-card__cta-strip-label {
  margin-right: var(--s-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.instrument-card__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 11px;
  border: 1px solid var(--brass);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.instrument-card__cta-link:hover,
.instrument-card__cta-link:focus-visible {
  border-color: var(--brass-deep);
  background: var(--paper);
  outline: none;
}
.instrument-card__cta-link::after {
  content: " →";
  transition: transform 160ms ease;
}
.instrument-card__cta-link:hover::after,
.instrument-card__cta-link:focus-visible::after {
  transform: translateX(2px);
}

/* BUYER EVIDENCE ROUTES ──────────────────────────────────────────────── */

.scope-hero {
  padding-top: var(--s-8);
}

.scope-grid,
.scope-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: var(--s-7);
  align-items: start;
}

.scope-panel {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  background: var(--paper);
  padding: var(--s-5);
}

.scope-intake {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: var(--s-5);
}

.scope-choice {
  border-top: 1px solid var(--rule-soft);
  padding: var(--s-3) 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}

.scope-choice:first-of-type {
  margin-top: var(--s-4);
}

.scope-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

.scope-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  background: var(--paper);
  padding: var(--s-5);
  min-height: 180px;
}

.scope-card h3 {
  margin: 0 0 var(--s-3);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
}

.scope-card p {
  margin: 0;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .scope-grid,
  .scope-form-grid,
  .scope-card-grid {
    grid-template-columns: 1fr;
  }
}

/* RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .instrument-card {
    padding: var(--s-7);
    margin: var(--s-7) 0;
  }
  .instrument-card__head {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .instrument-card__mark svg {
    width: 56px;
    height: 56px;
  }
  .instrument-card__spec-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .instrument-card__spec-row {
    grid-template-columns: 100px 1fr;
  }
}


/* ── 9. MOTION PREFERENCES ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .regime-row:hover { transform: none; }
}