/* ==========================================================================
   Elaris — public marketing site
   Implementation of the Founder-approved brand direction (v0.3).
   Hand-authored static CSS. No framework, no build step, no CDN.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Foundations — self-hosted fonts (SIL OFL 1.1, licences in assets/fonts/)
   -------------------------------------------------------------------------- */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* --------------------------------------------------------------------------
   Brand tokens
   --------------------------------------------------------------------------
   SIGNAL YELLOW DENSITY RULE (Founder decision, supersedes the earlier
   scarcity rules):

     Each page carries 2-4 visible Signal Yellow accent marks, scaled to page
     length and visual density -- short pages typically 2, medium 2-3, long
     3-4. Do not exceed 4 without explicit design review.

   Every visible yellow mark counts, including each wordmark dash. This is a
   density guideline, not a licence to scatter yellow: placement stays
   intentional and visually balanced, and purple/indigo remains dominant.

   Implemented marks and their selectors:

     .wordmark::before        the lockup dash, header and footer
     .signal-underline        the Trust heading underline
     .eyebrow--marked         the "Early access" eyebrow rule

   Those selectors are the registered consumers of the token. tools/verify.py
   fails the run if an unregistered one appears, if another custom property
   aliases the token, or if the hex is hard-coded in markup -- adding a mark is
   a deliberate two-step edit (stylesheet + allowlist), so one cannot creep in
   by accident. The harness also counts the visible marks per page and fails
   outside the 2-4 range, at either end.

   Accessibility affordances are not brand marks and do not use this token:
   the skip link uses the primary indigo and focus rings use the iris tokens.

   Signal Yellow stays out of operational and data semantics entirely. It must
   never represent status, warning, success, deficit, stale state, forward
   state, unknown state, chart meaning, thresholds or performance. Those
   belong to the --op-* tokens below and nowhere else.
   -------------------------------------------------------------------------- */

:root {
  /* Brand core */
  --brand-ink:           #16141D;
  --brand-indigo-900:    #241A3D;
  --brand-indigo-600:    #5B3FA8;  /* primary */
  --brand-iris-400:      #8B6DF2;
  --brand-iris-300:      #AB91F0;
  --brand-signal-yellow: #E8FF3D;

  /* Neutrals */
  --paper:        #F6F4FB;
  --page:         #FAF9FC;
  --surface:      #FFFFFF;
  --raised:       #EFEDF3;
  --line:         #E2DEE9;
  --line-dark:    #2E2A3A;
  --ink-body:     #3D3849;
  --ink-muted:    #5B5568;
  --ink-on-dark:        #B5ADC6;
  --ink-on-dark-strong: #D9D3EA;
  --iris-on-dark:       #B8A8F5;

  /* Operational semantics — reserved for product meaning only.
     Never brand decoration; never interchangeable with the signal yellow. */
  --op-on-target: #186041;
  --op-deficit:   #98301C;
  --op-stale:     #7A5000;
  --op-forward:   #41527A;
  --op-unknown:   #5D5768;

  /* Wordmark geometry — see § Wordmark */
  --dash-length-light:    0.60em;
  --dash-thickness-light: 0.130em;
  --dash-length-dark:     0.52em;
  --dash-thickness-dark:  0.103em;
  --dash-gap:             0.17em;
  --dash-min-thickness:   2px;

  --gutter: 72px;
  --maxw:   1296px;
  --radius: 12px;
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--brand-ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: "Instrument Sans", "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 600;
  margin: 0;
}
h1 { font-size: clamp(38px, 5.7vw, 82px); letter-spacing: -0.042em; line-height: 1.04; }
h2 { font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -0.032em; line-height: 1.12; }
h3 { font-size: 20px; letter-spacing: -0.016em; line-height: 1.3; }
p  { margin: 0; }

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-indigo-600);
  margin: 0;
}
.eyebrow--on-dark { color: var(--iris-on-dark); }

.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.tabular { font-variant-numeric: tabular-nums; }

.lede      { font-size: 19px; line-height: 1.6; color: var(--ink-on-dark); }
.body-copy { font-size: 17px; line-height: 1.65; color: var(--ink-body); }
.small     { font-size: 13px; line-height: 1.55; color: var(--ink-muted); }

.disclosure {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.8px;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* Editorial accent marks. They count toward the 2-4 per page density rule
   above, alongside the wordmark dashes. Section accents only — no operational
   meaning. */
.signal-underline {
  width: 74px;
  height: 3px;
  background: var(--brand-signal-yellow);
  margin-top: 20px;
}

.eyebrow--marked { display: flex; align-items: center; gap: 11px; }
.eyebrow--marked::before {
  content: "";
  flex: none;
  width: 36px;
  height: 3px;
  background: var(--brand-signal-yellow);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.band          { padding-block: 96px; }
.band--dark    { background: var(--brand-ink); color: var(--paper); }
.band--surface { background: var(--surface); border-top: 1px solid var(--line); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
}

/* Accessibility affordance, not a brand mark: it uses the primary indigo,
   never --brand-signal-yellow. White on #5B3FA8 is ~7.7:1. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-indigo-600);
  color: #FFFFFF;
  padding: 12px 18px;
  font-weight: 600;
  z-index: 10;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Wordmark — geometry-driven lockup, never a scaled image
   --------------------------------------------------------------------------
   Form:   — Elaris
   The dash is Signal Yellow on every ground. The letters are Ink on light and
   Paper on dark, never yellow. On light grounds the dash is longer and heavier
   than on dark; that is the only difference, and there is no second yellow.

   Below a rendered size of 14px the dash is omitted: add .wordmark--no-dash.
   Nothing on this site renders the wordmark below 22px.
   Clear space of one dash length is reserved by --wordmark-clear padding.
   -------------------------------------------------------------------------- */

.wordmark {
  --wordmark-clear: var(--dash-length-light);
  display: inline-flex;
  align-items: center;
  padding: var(--wordmark-clear);
  margin: calc(var(--wordmark-clear) * -1);
  font-family: "Instrument Sans", "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--brand-ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark::before {
  content: "";
  flex: none;
  width: var(--dash-length-light);
  height: max(var(--dash-min-thickness), var(--dash-thickness-light));
  margin-right: var(--dash-gap);
  background: var(--brand-signal-yellow);
}

.wordmark--on-dark {
  --wordmark-clear: var(--dash-length-dark);
  color: var(--paper);
}
.wordmark--on-dark::before {
  width: var(--dash-length-dark);
  height: max(var(--dash-min-thickness), var(--dash-thickness-dark));
}

.wordmark--no-dash::before { display: none; }

.wordmark--nav    { font-size: 25px; }
.wordmark--footer { font-size: 22px; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--brand-ink);
  color: var(--paper);
  padding-block: 20px;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}
.site-nav { display: flex; gap: 30px; align-items: center; flex-grow: 1; flex-wrap: wrap; }
.site-nav a {
  font-size: 14.5px;
  color: var(--ink-on-dark-strong);
  text-decoration: none;
  /* keeps the touch target at ~47px without changing the visual rhythm */
  padding-block: 12px;
}
.site-nav a:hover { color: var(--paper); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--brand-indigo-600); color: #FFFFFF; }
.btn--primary:hover { background: #4A3190; }
.btn--ghost-dark { background: transparent; color: var(--paper); border-color: #4A4459; }
.btn--ghost-dark:hover { border-color: var(--iris-on-dark); }
.btn--ghost-light { background: var(--surface); color: var(--brand-ink); border-color: #DDD8E6; }
.btn--ghost-light:hover { border-color: var(--brand-indigo-600); }
.btn--compact { min-height: 44px; padding: 11px 22px; }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { background: var(--brand-ink); padding-block: 88px 80px; }
.hero h1 { color: var(--paper); margin-top: 24px; max-width: 940px; }
.hero .lede { margin-top: 26px; max-width: 740px; }
.hero .btn-row { margin-top: 34px; }

/* --------------------------------------------------------------------------
   Synthetic product illustration — illustrative, synthetic, not a screenshot
   -------------------------------------------------------------------------- */

.console {
  margin: 56px 0 0;
  background: var(--surface);
  border-radius: 16px;
  padding: 22px 24px;
  color: var(--brand-ink);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.console__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.console__title { font-family: "Instrument Sans", sans-serif; font-size: 16.5px; font-weight: 600; letter-spacing: -0.012em; }
.console__scope { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-muted); letter-spacing: 0.04em; }
.console__spacer { flex-grow: 1; }
.chip {
  font-size: 13px;
  color: var(--brand-ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.metric { border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px; }
.metric__label { font-size: 12.5px; color: var(--ink-muted); }
.metric__value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.metric__note { font-size: 12.5px; margin-top: 3px; }
.state-on-target { color: var(--op-on-target); }
.state-deficit   { color: var(--op-deficit); }
.state-forward   { color: var(--op-forward); }
.state-stale     { color: var(--op-stale); }

.console__split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.panel { border: 1px solid var(--line); border-radius: 11px; padding: 16px 18px; }
.panel__title { font-size: 13px; font-weight: 600; }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 132px; margin-top: 14px; }
.chart__col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.chart__bar { background: var(--brand-iris-400); border-radius: 2px 2px 0 0; }
.chart__bar--required { background: var(--raised); }
.chart__axis { display: flex; gap: 6px; margin-top: 8px; }
.chart__tick { flex: 1 1 0; font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-muted); text-align: center; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-muted); }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.driver { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding-block: 6px; border-top: 1px solid var(--line); }
.driver:first-of-type { border-top: 0; }
.driver__value { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }

.queues { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.queues caption { text-align: left; font-size: 13px; font-weight: 600; padding-bottom: 8px; }
.queues th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-muted); padding: 0 20px 8px 0;
}
.queues th.num, .queues td.num { text-align: right; }
.queues td { font-size: 13.5px; padding: 9px 20px 9px 0; border-top: 1px solid var(--line); }
.queues th:last-child, .queues td:last-child { padding-right: 0; }
.queues td.num { font-family: "IBM Plex Mono", monospace; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }

/* --------------------------------------------------------------------------
   Content sections
   -------------------------------------------------------------------------- */

.section-head { max-width: 900px; }
.section-head h2 { margin-top: 16px; }

.layer { display: grid; grid-template-columns: 200px 1fr 300px; gap: 32px; align-items: start; padding-block: 34px; border-top: 1px solid var(--line); }
.layer__index { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.06em; color: var(--brand-indigo-600); }
.layer__q { font-size: 15px; color: var(--ink-muted); margin-top: 8px; }
.layer__list { margin: 0; padding: 0; list-style: none; }
.layer__list li { font-size: 14px; color: var(--ink-body); padding-block: 7px; border-top: 1px solid var(--line); }
.layer__list li:first-child { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------------------
   Trust trace
   -------------------------------------------------------------------------- */

.trace { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 30px; }
.trace__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.trace__value {
  font-family: "IBM Plex Mono", monospace; font-size: 46px; font-weight: 600;
  letter-spacing: -0.025em; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.trace__list { margin: 20px 0 0; padding-left: 18px; border-left: 2px solid var(--line); display: grid; gap: 13px; }
.trace__list > div { margin: 0; }
.trace__list dt { font-size: 12px; color: var(--ink-muted); }
.trace__list dd { font-size: 14px; margin: 2px 0 0; }
.trace__warning {
  margin-top: 20px; background: #FDF2DF; border: 1px solid #E8D4A8;
  border-radius: 10px; padding: 13px 15px; display: flex; gap: 11px;
  font-size: 13px; line-height: 1.5; color: #5A3C00;
}
.trace__warning svg { flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Status
   -------------------------------------------------------------------------- */

.status-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.status-badge {
  display: inline-flex; align-items: center; font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 0.06em; border-radius: 999px; padding: 4px 11px; font-weight: 600;
}
.status-badge--dev       { color: var(--op-on-target); background: #E8F4EE; }
.status-badge--specified { color: var(--op-forward);   background: #EBEEF5; }
.status-badge--roadmap   { color: var(--ink-muted);    background: var(--raised); }
.status-statement { max-width: 820px; }
.status-statement .body-copy { margin-top: 14px; }

.status-card ul { margin: 14px 0 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.85; color: var(--ink-body); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-band { background: var(--brand-indigo-900); color: var(--paper); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

.form-card { background: var(--surface); border-radius: 14px; padding: 30px 32px; color: var(--brand-ink); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 14px; font-weight: 600; }
.field .hint { font-size: 12.5px; color: var(--ink-muted); font-weight: 400; }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 15px;
  color: var(--brand-ink);
  background: var(--surface);
  border: 1px solid #CFC8DC;
  border-radius: 9px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--brand-indigo-600); }
.form-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-muted); margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--brand-ink); color: var(--ink-on-dark); padding-block: 56px 32px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-motto { font-size: 15px; color: var(--ink-on-dark-strong); margin-top: 18px; max-width: 320px; }
.footer-company { font-size: 13px; color: var(--ink-muted); margin-top: 14px; max-width: 320px; line-height: 1.55; }
.footer-col__title { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.footer-col a { display: inline-block; font-size: 14px; color: var(--ink-on-dark-strong); text-decoration: none; padding-block: 5px; }
.footer-col a:hover { color: var(--paper); text-decoration: underline; }
/* Reduced footer (thanks, 404): the lockup sits above the copyright row.
   It reuses the approved .wordmark component — no new geometry, no new token. */
.site-footer > .wrap > .wordmark--footer { margin-bottom: 4px; }
.site-footer > .wrap > .wordmark--footer + .footer-bottom { margin-top: 20px; }

.footer-bottom {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Document pages (privacy, thanks, 404)
   -------------------------------------------------------------------------- */

.doc { max-width: 760px; }
.doc h2 { font-size: 24px; margin-top: 40px; }
.doc h3 { font-size: 18px; margin-top: 26px; }
.doc p, .doc li { font-size: 16px; line-height: 1.7; color: var(--ink-body); margin-top: 12px; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--brand-indigo-600); }


/* --------------------------------------------------------------------------
   Component modifiers (kept named rather than inline; the only inline styles
   left in the markup are the illustrative chart bar heights, which are data)
   -------------------------------------------------------------------------- */

.card__body        { margin-top: 10px; font-size: 15px; }
.section-body      { margin-top: 40px; }
.layers            { margin-top: 36px; }

.legend i.i--demand    { background: var(--brand-iris-400); }
.legend i.i--uncovered { background: var(--raised); }

.drivers           { margin-top: 12px; }
.panel__note       { margin-top: 14px; }

.status-dot--on-target { background: var(--op-on-target); }
.status-dot--deficit   { background: var(--op-deficit); }
.status-dot--forward   { background: var(--op-forward); }

.trust-copy        { margin-top: 18px; max-width: 560px; }
.trace__label      { font-size: 13.5px; color: var(--ink-muted); }
.trace__tag        { font-size: 11px; letter-spacing: 0.05em; color: var(--ink-muted); }
.trace__caption    { margin-top: 14px; }

.status-head       { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.status-head h2    { font-size: 27px; letter-spacing: -0.022em; }
.status-head p     { font-size: 15px; max-width: 620px; }

.cta-split         { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.cta-split h2      { color: var(--paper); font-size: clamp(30px, 3.4vw, 46px); max-width: 700px; }
.cta-split .lede   { margin-top: 20px; max-width: 620px; }

.form-intro h2     { color: var(--paper); margin-top: 16px; font-size: clamp(28px, 3vw, 38px); }
.form-intro .lede  { margin-top: 20px; max-width: 520px; }
.form-intro .lede--alt { font-size: 16px; margin-top: 18px; }
.form-intro a      { color: var(--paper); }
.btn--block        { width: 100%; }

.title-gap         { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Responsive — the desktop composition is the approved baseline; these rules
   adapt it, they do not redesign it.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  :root { --gutter: 40px; }
  .band { padding-block: 72px; }
  .site-header .wrap { gap: 20px 28px; }
  .site-nav { order: 3; width: 100%; gap: 22px; }
  .console__split { grid-template-columns: 1fr; }
  .grid-2, .form-grid { grid-template-columns: 1fr; gap: 36px; }
  .layer { grid-template-columns: 1fr; gap: 18px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 767px) {
  :root { --gutter: 24px; }
  .band { padding-block: 56px; }
  .hero { padding-block: 60px 56px; }
  .grid-3 { grid-template-columns: 1fr; }
  .console { margin-top: 40px; padding: 18px; }
  .console__head { gap: 10px; }
  .trace { padding: 22px 20px; }
  .trace__value { font-size: 38px; }
  .form-card { padding: 24px 20px; }
}

@media (max-width: 479px) {
  :root { --gutter: 18px; }
  .site-nav { gap: 16px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .site-header .btn, .chip { width: auto; }
  .chart { height: 104px; }
  .footer-top { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--brand-iris-400);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On dark grounds the default iris-400 ring loses contrast, so it steps up to
   iris-300 — ~7.0:1 on Ink and ~6.2:1 on Indigo 900, well above the 3:1 a
   focus indicator needs. The signal yellow is deliberately not used here:
   it belongs to the wordmark dash and the single editorial underline. */
.band--dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .form-band :focus-visible {
  outline-color: var(--brand-iris-300);
}

/* No animation, transition or scroll-behaviour is used anywhere on this site,
   so there is nothing for prefers-reduced-motion to suppress. If motion is
   ever added, add the corresponding reduced-motion rule here at the same time. */