/* ==========================================================================
   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
     .hero .eyebrow           the hero eyebrow pill (restrained brand accent)

   The "Early access" eyebrow rule (.eyebrow--marked) was Signal Yellow until
   the hero eyebrow pill took its place in the homepage budget; it is now
   iris, so the homepage stays at 4 marks.

   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 — Founder direction D-347: the Figma visual-system values are
     the single shared tokens. Change values here, not in rules. */
  --brand-ink:           #17122E;  /* midnight: primary brand surface (header, hero, dark bands, footer) */
  --brand-indigo-900:    #231B43;  /* secondary dark surface (form band, preview rail) */
  --brand-indigo-700:    #45379A;  /* pressed/hover step of the interaction purple */
  --brand-indigo-600:    #5443B0;  /* interaction purple: primary buttons, links, focus accents */
  --brand-iris-400:      #8B6DF2;
  --brand-iris-300:      #AB91F0;
  --brand-signal-yellow: #E8FF3D;  /* brand accent only, never operational */

  /* Neutrals */
  --paper:        #FFFFFF;  /* headings and wordmark letters on midnight */
  --page:         #F8F8FC;
  --surface:      #FFFFFF;  /* light analytical cards */
  --raised:       #EEE9FF;  /* lavender: secondary / active surface */
  --line:         #E2E0EB;
  --line-dark:    #403670;  /* hairlines and strokes on midnight */
  --ink:          #1F1D2A;  /* text on light */
  --ink-body:     var(--ink);
  --ink-muted:    #69657A;
  --ink-on-dark:        #C2BFD6;  /* body on midnight */
  --ink-on-dark-strong: #DBD9EB;  /* nav links on midnight */
  --iris-on-dark:       #B8A8F5;

  /* Product preview (synthetic illustration) */
  --preview-surface: #F7F7FE;
  --preview-stroke:  #403670;

  /* 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(--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;
  /* Short pages (thanks, 404): main takes the spare height so the footer meets the bottom of the window
     instead of leaving a band of page colour under it. Long pages are unaffected. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   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: 14px;  /* readability (Founder, 2026-10-03): was 12px */
  letter-spacing: 0.08em;
  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: 13px;  /* readability (Founder, 2026-10-03): was 10.8px */
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* Editorial accent marks. .signal-underline counts toward the 2-4 per page
   density rule above, alongside the wordmark dashes and the hero eyebrow pill.
   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;
  /* Iris, not Signal Yellow: the hero eyebrow pill holds the homepage's
     eyebrow-level yellow moment, and the page stays at the 4-mark ceiling.
     ~6.1:1 on the secondary dark surface. */
  background: var(--brand-iris-300);
}

/* --------------------------------------------------------------------------
   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;
}
/* Feature cards carry a short accent bar at the top (D-347). It is purple,
   not Signal Yellow: the homepage already sits at the 4-mark density ceiling. */
.grid-3.section-body > .card::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-indigo-600);
  margin-bottom: 20px;
}
.card .card__body { color: var(--ink-muted); }

/* Accessibility affordance, not a brand mark: it uses the interaction purple,
   never --brand-signal-yellow. White on #5443B0 is ~7.5: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(--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; }

/* Primary (stacked) lockup: Elaris over WORKFORCE MANAGEMENT, the assumed name (Founder direction 2026-10-02).
   Elaris stays dominant; the descriptor is subordinate. The dash is unchanged and stays on the Elaris line.
   The descriptor runs under the whole mark, from the start of the dash to the end of the "s": its size and
   tracking were measured against Instrument Sans so its width matches the mark's (the dash is shorter on dark
   grounds, hence two sizes). Use it only at 48px and above, where the descriptor is ~9px; below that use the
   compact mark (Elaris alone). The descriptor is the letter colour at full strength: never yellow, never
   tinted, never abbreviated. See README § Brand constraints. */
.wordmark--stacked { display: inline-grid; grid-template-columns: auto auto; align-items: center; }
.wordmark--stacked::before { grid-row: 1; grid-column: 1; }
.wordmark__word { grid-row: 1; grid-column: 2; }
.wordmark__descriptor {
  grid-row: 2; grid-column: 1 / -1;
  margin-top: 0.42em; margin-right: -0.10em;   /* the last letter's tracking hangs outside the mark */
  font-size: 0.1907em; font-weight: 500; letter-spacing: 0.10em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
}
.wordmark--on-dark .wordmark__descriptor { font-size: 0.1858em; }

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

/* --------------------------------------------------------------------------
   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; justify-content: 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: var(--brand-indigo-700); }
/* Non-text contrast on dark grounds. The #5443B0 fill is only ~2.4:1 against
   midnight (~2.1:1 against the secondary dark surface), below the 3:1 a
   component boundary needs. Rather than move the approved purple, the button
   gets a 1px iris-400 edge in the border it already reserves: ~4.8:1 on
   midnight, ~4.3:1 on #231B43. No size change. White text stays ~7.5:1 on the
   fill and ~9.3:1 on the hover fill. On light grounds the fill alone is
   ~7.5:1 against white, so the edge is not needed there. */
.site-header .btn--primary,
.hero .btn--primary,
.band--dark .btn--primary { border-color: var(--brand-iris-400); }
/* Secondary action on midnight grounds: a white button, as in the Figma hero. */
.btn--ghost-dark { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.btn--ghost-dark:hover { background: var(--raised); border-color: var(--raised); }
.btn--ghost-light { background: var(--surface); color: var(--ink); border-color: var(--line); }
.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; }
/* The hero eyebrow pill: a restrained Signal Yellow brand accent (Founder
   direction, Figma 10:149). Midnight text on the yellow is ~16.2:1. It is a
   label, never a control, and never carries status. */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--brand-signal-yellow);
  color: var(--brand-ink);
  /* Readability (Founder, 2026-10-03): 15px semibold, up from 12px medium.
     Small tracked capitals were hard to read inside the pill. */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
/* Narrow screens: the eyebrow may wrap to two lines (Founder direction D-352 §5
   keeps the full wording). A fully round capsule stretched across two lines
   reads as a slab, so the label keeps a softer radius, balanced padding and
   line height, and slightly tighter tracking. Wording and colours unchanged. */
@media (max-width: 480px) {
  .hero .eyebrow {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
}
.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; }
.hero__tool { margin-top: 22px; max-width: 640px; font-size: 16px; line-height: 1.5; color: var(--ink-on-dark); }
.hero__tool a { color: var(--paper); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero__tool a:hover { color: var(--iris-on-dark); }

/* Wide screens: copy left, product preview right (Figma 10:149). Narrower
   screens keep the stacked composition. The preview is scaled down inside
   the column so the synthetic figures still fit without overflow. */
@media (min-width: 1200px) {
  .hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
  }
  .hero h1 { font-size: clamp(52px, 4.4vw, 66px); }
  .hero .lede { font-size: 18px; }
  .hero .console {
    --rail: 44px;
    margin: 0;
    padding: 18px 18px 18px calc(var(--rail) + 18px);
    gap: 12px;
  }
  .hero .console__head { gap: 10px; padding-bottom: 12px; }
  .hero .console__title { font-size: 15px; }
  .hero .console__scope { font-size: 10.5px; }
  .hero .chip { font-size: 12px; padding: 6px 10px; min-height: 32px; }
  .hero .console .grid-3 { gap: 10px; }
  .hero .metric { padding: 12px 13px; }
  .hero .metric__value { font-size: 22px; }
  .hero .metric__note { font-size: 11.5px; }
  .hero .chart { height: 96px; }
  .hero .queues td { padding-block: 6px; font-size: 13px; }
}

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

.console {
  --rail: 64px;
  position: relative;
  margin: 56px 0 0;
  background: var(--preview-surface);
  border: 1px solid var(--preview-stroke);
  border-radius: 16px;
  padding: 22px 24px 22px calc(var(--rail) + 24px);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* The dark mini rail beside the light analytical panel. Decorative only: it
   suggests the product frame without copying the application sidebar. */
.console::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rail);
  background: var(--brand-indigo-900);
  border-radius: 15px 0 0 15px;
}
.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; word-spacing: 0.12em; }
.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(--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 { background: var(--surface); 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; }
.console__split > * { min-width: 0; }   /* the panels may narrow below their content on small phones */
.panel { background: var(--surface); 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; }
/* Uncovered demand is a coverage state, so it uses the operational deficit token, as the "Below requirement"
   note beside it does. Against the demand purple it passes the palette checks (contrast, CVD separation). */
.chart__bar--required { background: var(--op-deficit); }
/* The illustration's bar heights (synthetic data, set in index.html as data-h). */
.chart__bar[data-h="6"] { height: 6%; }
.chart__bar[data-h="7"] { height: 7%; }
.chart__bar[data-h="8"] { height: 8%; }
.chart__bar[data-h="9"] { height: 9%; }
.chart__bar[data-h="10"] { height: 10%; }
.chart__bar[data-h="11"] { height: 11%; }
.chart__bar[data-h="12"] { height: 12%; }
.chart__bar[data-h="14"] { height: 14%; }
.chart__bar[data-h="38"] { height: 38%; }
.chart__bar[data-h="44"] { height: 44%; }
.chart__bar[data-h="52"] { height: 52%; }
.chart__bar[data-h="58"] { height: 58%; }
.chart__bar[data-h="64"] { height: 64%; }
.chart__bar[data-h="71"] { height: 71%; }
.chart__bar[data-h="79"] { height: 79%; }
.chart__bar[data-h="86"] { height: 86%; }
.chart__axis { display: flex; gap: 6px; margin-top: 8px; }
/* Readability (Founder, 2026-10-03): eight labels did not fit the desktop hero either and broke as "08:0 / 0".
   Every width now shows 08:00, 10:00, 12:00 and 14:00 on one line, each starting at its own bar and running
   into the hidden neighbour's space (the pattern first used below 400px for 320px reflow). */
.chart__tick { flex: 1 1 0; min-width: 0; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-muted);
               white-space: nowrap; text-align: left; }
.chart__tick:nth-child(even) { visibility: hidden; }
.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; }
@media (max-width: 399px) {   /* the queue table fits a 320px screen */
  .queues th, .queues td { padding-right: 8px; }
  .queues th:last-child, .queues td:last-child { padding-right: 0; }
}
.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: 13px; letter-spacing: 0.05em; border-radius: 999px; padding: 6px 13px; 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(--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(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-muted);
  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; }
.form-note a { color: var(--brand-indigo-600); }
.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 1fr; gap: 40px; }
.footer-motto { font-size: 15px; color: var(--ink-on-dark-strong); margin-top: 18px; max-width: 320px; }
.footer-col__title { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--iris-on-dark); 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-on-dark);
}
/* Reduced footer links (thanks, 404): the footer-column treatment, on the same midnight ground. The block
   padding keeps each target 24px tall without moving the row. */
.footer-bottom a { display: inline-block; padding-block: 4px; color: var(--ink-on-dark-strong); text-decoration: none; }
.footer-bottom a:hover { color: var(--paper); text-decoration: underline; }

/* --------------------------------------------------------------------------
   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(--op-deficit); }

.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; }

/* --------------------------------------------------------------------------
   Practitioner tools — Erlang C calculator page (/tools/erlang-c-calculator/)
   Built only from the existing tokens. No new colour, no new yellow consumer:
   the page's one editorial mark is the registered .signal-underline.
   Result states use the --op-* tokens and always carry a word.
   -------------------------------------------------------------------------- */

.tool-intro         { padding-block: 72px 64px; }
.tool-intro h1      { color: var(--paper); margin-top: 18px; max-width: 980px; font-size: clamp(36px, 4.6vw, 64px); }
.tool-intro .lede   { margin-top: 22px; max-width: 760px; }

.tool-calc          { padding-block: 56px 72px; }
.calc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 30px;
}
.calc__head         { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap;
                      padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.calc__title        { font-size: 24px; letter-spacing: -0.02em; }
.calc__status       { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-muted); max-width: 640px; }
.calc__grid         { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px; margin-top: 24px; }
.calc__group {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-indigo-600);
  margin-top: 26px;
}
.calc__group:first-child { margin-top: 0; }
.calc__aside        { font-weight: 400; color: var(--ink-muted); letter-spacing: 0.04em; text-transform: none; margin-left: 6px; }

.kv                 { margin: 10px 0 0; display: grid; }
.kv > div           { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; }
.kv dt              { font-size: 14px; color: var(--ink-muted); }
.kv dd              { margin: 0; font-size: 14.5px; text-align: right; }

.result             { margin-top: 10px; }
.result__figure     { font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.result__unit       { font-family: "Instrument Sans", sans-serif; font-size: 22px; letter-spacing: -0.01em; }
.result__caption    { font-size: 14px; color: var(--ink-muted); margin-top: 8px; }
.result__state      { display: flex; align-items: baseline; gap: 8px; font-size: 14px; margin-top: 12px; }
.result__state .status-dot { flex: none; margin-right: 0; position: relative; top: 1px; }
.result__metrics    { gap: 12px; margin-top: 22px; }
.metric__value--sm  { font-size: 24px; }

.adjust             { margin-top: 18px; padding: 16px 18px; border-radius: 11px; background: var(--raised); }
.adjust--check      { background: var(--page); border: 1px solid var(--line); }
.adjust .small      { margin-top: 6px; color: var(--ink-body); }
.adjust__figure     { font-size: 17px; font-weight: 600; margin-top: 8px; }
.adjust__figure .mono { font-size: 22px; }

.explain            { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; }
.explain summary    { cursor: pointer; font-weight: 600; font-size: 15.5px; color: var(--brand-indigo-600); padding-block: 8px; width: fit-content; }
.explain__list      { max-width: 900px; }
.explain__list a, .guide a { color: var(--brand-indigo-600); }

.tool-next__layout  { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.tool-next h2       { color: var(--paper); font-size: clamp(28px, 3.2vw, 42px); }
.tool-next__lede    { margin-top: 22px; }
.flow               { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 8px; counter-reset: flow; }
.flow li {
  counter-increment: flow;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; color: var(--ink-on-dark-strong);
  border: 1px solid var(--line-dark); border-radius: 8px; padding: 9px 13px;
}
.flow li::before    { content: counter(flow, decimal-leading-zero); font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--iris-on-dark); }
.tool-next__status  { margin-top: 36px; font-size: 14.5px; color: var(--ink-on-dark); max-width: 760px; }
.tool-next__actions { margin-top: 20px; }

.guide              { max-width: 800px; }
/* .doc p would otherwise restyle these two page-wide text styles inside the guide.
   Scoped to .guide so the privacy and terms pages render exactly as approved. */
.guide p.eyebrow    { font-size: 12px; line-height: 1.6; color: var(--brand-indigo-600); margin-top: 0; }
.guide p.small      { font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
.doc .guide__title { font-size: clamp(28px, 3vw, 40px); margin-top: 16px; }
.guide h2           { scroll-margin-top: 24px; }
.toc                { margin-top: 28px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--page); }
.toc ol             { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.toc li             { margin-top: 0; padding-block: 4px; font-size: 15px; break-inside: avoid; }
.formula {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14.5px; line-height: 1.6;
  background: var(--raised); border-radius: 9px; padding: 12px 16px;
}
.doc p.formula      { font-size: 14.5px; }
.steps              { padding-left: 22px; }

.table-scroll       { overflow-x: auto; margin-top: 18px; }
.data-table         { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.data-table caption { text-align: left; font-size: 13.5px; font-weight: 600; padding-bottom: 10px;
                      max-width: calc(100vw - 2 * var(--gutter)); }  /* stays readable while the table scrolls */
.data-table th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-muted); padding: 0 16px 8px 0; white-space: nowrap;
}
.data-table td, .data-table tbody th { padding: 9px 16px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table td.num  { font-family: "IBM Plex Mono", monospace; white-space: nowrap; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table tr.is-required td { background: var(--raised); font-weight: 600; }
.guide__provenance  { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); }

@media (max-width: 991px) {
  .calc__grid, .tool-next__layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .calc               { padding: 22px 18px; }
  .result__figure     { font-size: 46px; }
  .grid-3.result__metrics { grid-template-columns: 1fr 1fr; }
  .toc ol             { columns: 1; }
  .calc__aside        { display: block; margin: 2px 0 0; }
}
@media (max-width: 479px) {
  .kv > div           { flex-direction: column; gap: 2px; }
  .kv dd              { text-align: left; }
  .tool-calc          { padding-block: 32px 56px; }
}

/* --------------------------------------------------------------------------
   Staffing planner (/tools/erlang-c-calculator/)
   Existing tokens only. Charts: contacts iris-400 bars, required agents
   indigo-600 bars, available agents a dashed ink line (mark type, dash and
   label, not colour alone). Status always carries a word.
   -------------------------------------------------------------------------- */

.tool-facts         { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.tool-facts li      { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink-on-dark-strong); }
.tool-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-iris-300); }

.planner-band       { padding-block: 48px 80px; }
/* Components below set display (flex / grid); the hidden attribute must still win inside the planner. */
.planner [hidden]    { display: none !important; }
.planner {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 28px 22px;
}
.planner__head      { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 32px; flex-wrap: wrap;
                      padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.planner__title     { font-size: 26px; letter-spacing: -0.022em; }
.planner__head-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.crumbs ol          { list-style: none; margin: 8px 0 0; padding: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.crumbs li + li::before { content: "\203A"; color: var(--ink-muted); margin-right: 8px; }
.crumbs__day        { font: inherit; color: var(--brand-indigo-600); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ink); }
.engine-status      { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.engine-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--op-unknown); }
.planner[data-planner-state="ready"] .engine-status__dot  { background: var(--op-on-target); }
.planner[data-planner-state="failed"] .engine-status__dot { background: var(--op-deficit); }
.planner__noscript  { margin-top: 18px; font-size: 14.5px; }

.planner__grid      { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0 36px; margin-top: 22px; }
.planner__inputs    { padding-right: 30px; border-right: 1px solid var(--line); }
.planner__example-note { font-size: 13px; color: var(--ink-body); background: var(--raised); border-radius: 9px; padding: 9px 12px; margin-bottom: 6px; }
.pset               { border: 0; margin: 0; padding: 16px 0 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.pset:last-child    { border-bottom: 0; }
.pset legend {
  float: left; width: 100%; margin-bottom: 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-indigo-600);
}
.pset > :not(legend) { clear: both; }   /* every child, not only the next one: it may be hidden */
.pset__opt          { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--ink-muted); margin-left: 4px; }
.pfield             { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.pfield > label, .pfield__label, .pfield--pair label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.pfield--pair       { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pfield--pair > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pfield__hint       { font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); margin-top: 10px; }
.pfield__hint a     { color: var(--brand-indigo-600); }
.ig                 { display: flex; align-items: stretch; border: 1px solid var(--ink-muted); border-radius: 9px; background: var(--surface); }
.ig:focus-within    { border-color: var(--brand-indigo-600); box-shadow: 0 0 0 1px var(--brand-indigo-600); }
.ig input, .planner select, .scenario select {
  font: inherit; font-size: 15px; color: var(--ink); background: transparent; border: 0;
  padding: 9px 11px; min-height: 42px; width: 100%; min-width: 0; font-variant-numeric: tabular-nums;
}
.ig input:focus     { outline: none; }
.ig input::placeholder { color: var(--ink-muted); }
.ig__unit           { display: flex; align-items: center; padding: 0 11px 0 2px; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.planner select, .scenario select { border: 1px solid var(--ink-muted); border-radius: 9px; background: var(--surface); }
.planner select:disabled { color: var(--ink-muted); background: var(--page); }
.check              { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ink-body); margin-top: 10px; }
.check input        { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand-indigo-600); }

.seg                { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--page); }
.seg label          { flex: 1 1 0; position: relative; min-width: 0; }
.seg input          { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span           { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 38px; padding: 6px 8px;
                      border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-muted); line-height: 1.25; }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--brand-iris-400); }
.seg input:focus-visible + span { outline: 3px solid var(--brand-iris-400); outline-offset: 1px; }
.seg--small span    { min-height: 34px; font-size: 12.5px; }

.planner__main      { min-width: 0; }
.issues             { border: 1px solid var(--line); border-left: 3px solid var(--op-deficit); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; background: var(--surface); }
.issues__title      { font-weight: 600; font-size: 14.5px; color: var(--op-deficit); }
.issues ul          { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.issues--inline     { margin-top: 14px; }

.tiles              { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile               { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tile__label        { font-size: 12.5px; color: var(--ink-muted); }
.tile__value        { font-family: "IBM Plex Mono", monospace; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile__note         { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }

.daychart           { margin: 18px 0 0; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 12px; }
.daychart__head     { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; }
.daychart__title    { font-size: 14.5px; font-weight: 600; }
.daychart__legend   { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-muted); }
.key                { display: inline-flex; align-items: center; gap: 7px; }
.key::before        { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.key--contacts::before { background: var(--brand-iris-400); }
.key--required::before { background: var(--brand-indigo-600); }
.key--available::before { height: 0; width: 16px; border-top: 2px dashed var(--ink); border-radius: 0; }
.key--nc::before    { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-muted); background: var(--surface); }
.daychart__plots    { position: relative; margin-top: 8px; }
.daychart__axis-title { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-top: 8px; }
.daychart__svg      { display: block; width: 100%; overflow: visible; }
.daychart__svg .grid     { stroke: var(--line); stroke-width: 1; }
.daychart__svg .baseline { stroke: var(--ink-muted); stroke-width: 1; }
.daychart__svg .tick     { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; fill: var(--ink-muted); }
.daychart__svg .selband  { fill: var(--raised); }
.daychart__svg .bar-contacts { fill: var(--brand-iris-400); }
.daychart__svg .bar-required { fill: var(--brand-indigo-600); }
.daychart__svg .line-available { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 3; }
.daychart__svg .nc       { fill: var(--surface); stroke: var(--ink-muted); stroke-width: 1.5; }
.daychart__hit      { position: absolute; inset: 0; border-radius: 6px; }
.daychart__hit:focus-visible { outline-offset: 4px; }
.daychart__col      { position: absolute; top: 0; bottom: 0; cursor: pointer; }
.daychart__tip {
  position: absolute; top: 0; width: 170px; pointer-events: none; z-index: 2;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  font-size: 12.5px; color: var(--ink);
}
.tip__time          { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12px; }
.daychart__tip dl   { display: grid; grid-template-columns: auto auto; gap: 2px 10px; margin: 6px 0 0; }
.daychart__tip dt   { color: var(--ink-muted); }
.daychart__tip dd   { margin: 0; text-align: right; font-family: "IBM Plex Mono", monospace; }

.explain-panel      { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--page); }
.explain-panel:focus-visible { outline: 3px solid var(--brand-iris-400); outline-offset: 2px; }
.explain-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.explain-panel__head h3 { font-size: 17px; }
.explain-panel__back { font: inherit; font-size: 13.5px; color: var(--brand-indigo-600); background: none; border: 0; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.explain-panel__empty { font-size: 14px; color: var(--ink-muted); margin-top: 10px; }
.chain              { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.chain__step        { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.chain__n           { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
                      background: var(--surface); border: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--brand-indigo-600); }
.chain__title       { font-size: 13.5px; font-weight: 600; }
.chain__body        { font-size: 14px; line-height: 1.55; margin-top: 2px; }
.chain__body .mono  { font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
                      overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.chain__detail      { font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); margin-top: 3px; }
.chain__status      { display: flex; align-items: baseline; gap: 8px; font-size: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.chain__status .status-dot { flex: none; margin-right: 0; position: relative; top: 1px; }

.tabs               { margin-top: 22px; }
.tabs__list         { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs__list [role="tab"] {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-muted); background: none; border: 0;
  border-bottom: 2px solid transparent; padding: 10px 14px; margin-bottom: -1px; cursor: pointer; white-space: nowrap;
}
.tabs__list [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand-indigo-600); }
.tabs__panel        { padding-top: 16px; }
.tabs__intro        { font-size: 13.5px; color: var(--ink-muted); max-width: 680px; }
.data-tools         { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.data-tools__note   { font-size: 13px; color: var(--ink-muted); max-width: 560px; }
.table-scroll--tall { max-height: 460px; overflow-y: auto; }
.data-table--planner { font-size: 13.5px; }
.data-table--planner thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; padding-top: 4px; }
.data-table--planner tbody th { font-weight: 500; font-size: 12.5px; white-space: nowrap; padding-right: 14px; }
.data-table--planner td, .data-table--planner tbody th { padding-block: 5px; }
.data-table--planner tbody tr { cursor: pointer; }
.data-table--planner tbody tr.is-selected td, .data-table--planner tbody tr.is-selected th { background: var(--raised); }
.data-table--planner tfoot th, .data-table--planner tfoot td { border-top: 1px solid var(--ink-muted); font-weight: 600; padding-top: 8px; }
.data-table--planner .recon { font-weight: 400; font-size: 12.5px; color: var(--ink-muted); }
.cell-input {
  font: inherit; font-family: "IBM Plex Mono", monospace; font-size: 13px; width: 84px; text-align: right;
  border: 1px solid var(--ink-muted); border-radius: 6px; padding: 4px 7px; background: var(--surface); color: var(--ink);
}
/* The edge is the only thing that shows where to type, so it needs 3:1 (WCAG 1.4.11): ink-muted is ~5.6:1 on
   white, as on the planner's other inputs; the --line colour was ~1.3:1. */
.cell-input:focus   { border-color: var(--brand-indigo-600); outline: none; box-shadow: 0 0 0 1px var(--brand-indigo-600); }
.delta              { color: var(--ink-muted); font-size: 12.5px; }

.scenarios          { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 14px 0; }
.scenario           { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 14px; margin: 0; min-width: 0; }
.scenario legend    { padding: 0 4px; }
.scenario__name     { font: inherit; font-weight: 600; font-size: 14.5px; border: 0; border-bottom: 1px dashed var(--ink-muted); padding: 2px 0; width: 180px; color: var(--ink); background: none; }
.scenario__remove   { font: inherit; font-size: 13px; color: var(--brand-indigo-600); background: none; border: 0; padding: 10px 0 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#scenario-results   { margin-top: 18px; }
.diff               { margin: 16px 0 0; }
.diff figcaption    { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.crumbs__link       { font: inherit; color: var(--brand-indigo-600); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pinput             { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--ink-muted); border-radius: 9px; padding: 9px 11px; min-height: 42px; width: 100%; }
.pinput:focus       { outline: none; border-color: var(--brand-indigo-600); box-shadow: 0 0 0 1px var(--brand-indigo-600); }
.days               { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.days label         { position: relative; }
.days input         { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.days span          { display: flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 8px; border: 1px solid var(--line);
                      font-size: 12.5px; font-weight: 500; color: var(--ink-muted); background: var(--page); }
.days input:checked + span { background: var(--raised); color: var(--ink); border-color: var(--brand-iris-400); }
.days input:focus-visible + span { outline: 3px solid var(--brand-iris-400); outline-offset: 1px; }
.cell-check         { width: 16px; height: 16px; accent-color: var(--brand-indigo-600); }
.table-open         { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand-indigo-600); background: none; border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; cursor: pointer; }
.table-open:disabled { color: var(--ink-muted); cursor: default; }
.small-cell         { font-size: 11.5px; color: var(--ink-muted); max-width: 260px; white-space: normal; }
.dow-shares         { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dow-share          { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.dow-share .cell-input { width: 64px; }
.explain-panel__open { margin-top: 14px; }
.daychart__keys     { font-size: 11.5px; color: var(--ink-muted); margin-top: 6px; text-align: right; }
#week-table-box     { margin-top: 18px; }
.planner__provenance { font-size: 12px; color: var(--ink-muted); margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.planner__provenance a { color: var(--brand-indigo-600); }

.calc--example      { margin-top: 20px; }
.guide + .calc--example, .calc--example + .guide { margin-top: 0; }
.guide--cont        { margin-top: 24px; }

/* ---- Planner workbench (layout refinement, 2026-09-27) ----------------------------------
   A wider container, a compact intro, a sticky input panel on the left and the analysis on the
   right. Presentation only: nothing here changes what is calculated. */
.wrap--wide         { max-width: 1680px; }
.tool-intro         { padding-block: 40px 34px; }
.tool-intro h1      { margin-top: 10px; font-size: clamp(30px, 3.1vw, 44px); }
.tool-intro .lede   { margin-top: 12px; font-size: 17px; max-width: 900px; }
.tool-intro .tool-facts { margin-top: 18px; }
.planner-band       { padding-block: 24px 64px; }
.planner            { padding: 18px 22px 16px; }
.planner__head      { padding-bottom: 14px; align-items: center; }
.planner__title     { font-size: 22px; }
.crumbs             { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.crumbs__label      { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.crumbs ol          { margin: 0; font-size: 15px; }
.crumbs [aria-current] { font-size: 14px; font-weight: 600; background: var(--raised); border-radius: 6px; padding: 2px 8px; }

.planner__grid      { grid-template-columns: 400px minmax(0, 1fr); gap: 0 26px; margin-top: 16px; align-items: start; }
.planner__inputs    { padding: 2px 16px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--page);
                      position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.planner__inputs .planner__example-note { margin: 12px 0 2px; background: var(--raised); }
.planner__inputs .seg { background: var(--surface); }
/* The selected option's ring carries the state, so it needs 3:1 (WCAG 1.4.11): iris-400 is ~3.8:1 on white and
   ~3.2:1 on the lavender fill; iris-300 was ~2.6:1. */
.planner__inputs .seg input:checked + span { background: var(--raised); box-shadow: 0 0 0 1px var(--brand-iris-400); }
.pset               { padding: 12px 0 12px; }
.pset legend        { margin-bottom: 8px; font-size: 11px; }
.pfield             { margin-top: 9px; gap: 4px; }
.pfield > label, .pfield__label, .pfield--pair label { font-size: 13px; }
.pfield--pair       { gap: 10px; }
.pfield__hint       { font-size: 12px; margin-top: 7px; }
.ig input, .planner select { padding: 7px 10px; min-height: 38px; font-size: 14.5px; }
.ig--time input     { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; }
.ig--time .ig__unit { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.04em; }
.ig:has(input:disabled) { background: var(--page); border-color: var(--line); }
.ig input:disabled  { color: var(--ink-muted); }
.ig:has(input[aria-invalid="true"]) { border-color: var(--op-deficit); box-shadow: 0 0 0 1px var(--op-deficit); }
.pfield__error      { font-size: 12.5px; line-height: 1.45; color: var(--op-deficit); font-weight: 500; margin-top: 7px; }

.ptable-box         { margin-top: 12px; }
.ptable__head       { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ptable__tools      { display: flex; gap: 12px; }
.ptable__action     { font: inherit; font-size: 12.5px; font-weight: 500; color: var(--brand-indigo-600); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ptable__hint       { margin-top: 4px; }
.ptable-scroll      { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); margin-top: 8px; }
.ptable             { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptable thead th    { position: sticky; top: 0; z-index: 1; background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--ink-muted);
                      text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ptable .num        { text-align: right; }
.ptable tbody th    { font-weight: 500; font-size: 12.5px; text-align: left; padding: 3px 10px; white-space: nowrap; }
.ptable td          { padding: 3px 8px; }
.ptable tbody tr + tr > * { border-top: 1px solid var(--line); }
.ptable .cell-input { width: 100px; }
.ptable--dow        { max-width: 240px; margin-top: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); border-collapse: separate; border-spacing: 0; }
.ptable__foot       { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-top: 7px; }
.ptable__foot:empty, .ptable__note:empty { display: none; }
.ptable__note       { font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.link-note          { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--raised); font-size: 13px; line-height: 1.5; color: var(--ink-body); }
.fit                { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.fit__title         { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.fit__text          { font-size: 12px; line-height: 1.5; color: var(--ink-muted); margin-top: 3px; }
.fit__tools:has(> :not([hidden])) { margin-top: 4px; }
.fit__details       { margin-top: 6px; }
.fit__details summary { font-size: 12.5px; font-weight: 500; color: var(--brand-indigo-600); cursor: pointer; padding: 4px 0; }
.fit__details .ptable-scroll { max-height: 260px; }
.pset > .seg--small { margin-top: 12px; }
.ig--unit-select select { width: auto; flex: none; border: 0; border-left: 1px solid var(--line); border-radius: 0 9px 9px 0; background: var(--page);
                      min-height: 0; padding: 0 28px 0 10px; font-size: 13px; color: var(--ink-body); }
.ig--unit-select select:focus-visible { outline: 2px solid var(--brand-iris-400); outline-offset: -2px; }
.fit__info-row      { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.info-btn           { font: inherit; font-size: 12px; font-weight: 500; color: var(--brand-indigo-600); background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.info-btn span      { text-decoration: none; display: inline-block; margin-right: 2px; }
.fit__about         { font-size: 12px; line-height: 1.5; color: var(--ink-body); margin-top: 6px; padding: 8px 10px; border-radius: 7px; background: var(--page); }
.tile__unit         { font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-muted); margin-left: 6px; }
.explain-panel__actions { display: flex; gap: 16px; align-items: baseline; }
.explain-panel__toggle { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--brand-indigo-600); background: none; border: 0; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.explain-panel__summary { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--ink-body); margin-top: 6px; line-height: 1.5; }

.tiles              { gap: 10px; }
.tile               { padding: 12px 14px; background: var(--surface); }
.tile__label        { font-size: 12.5px; font-weight: 500; color: var(--ink-body); }
.tile__value        { font-size: 25px; margin-top: 2px; }
.tile__note         { color: var(--ink-muted); }
.daychart           { margin-top: 14px; }
.daychart__title    { font-size: 15px; }
.daychart__legend   { font-size: 13px; color: var(--ink-body); }
.daychart__axis-title { font-size: 11px; color: var(--ink-body); }
.daychart__svg .selband { fill: var(--brand-iris-300); fill-opacity: 0.28; }
.daychart__selection { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand-indigo-600); background: var(--raised);
                       border: 1px solid var(--brand-iris-300); border-radius: 999px; padding: 3px 12px; margin-top: 8px; cursor: pointer; }
.daychart__empty    { display: none; font-size: 13.5px; color: var(--ink-muted); padding: 28px 0 22px; }
.daychart--empty .daychart__empty { display: block; }
.daychart--empty .daychart__plots { display: none; }
.daychart__selection:focus-visible { outline: 3px solid var(--brand-iris-400); outline-offset: 2px; }
.explain-panel      { margin-top: 14px; background: var(--surface); }
.explain-panel.is-linked { border-color: var(--brand-iris-400); box-shadow: inset 4px 0 0 var(--brand-indigo-600); }
.explain-panel__head h3 { font-size: 17px; }
.chain              { gap: 0; margin-top: 10px; }
.chain__step        { padding: 10px 0; border-top: 1px solid var(--line); }
.chain__step:first-child { border-top: 0; padding-top: 2px; }
.chain__n           { background: var(--raised); border-color: var(--brand-iris-300); font-weight: 600; }
.chain__title       { font-size: 14px; }
.chain__body        { margin-top: 3px; }
.chain__body .mono  { display: inline-block; margin-block: 1px; background: var(--page); }
.tabs               { margin-top: 18px; }

@media (max-width: 1100px) {
  .planner__grid    { grid-template-columns: 1fr; }
  .planner__inputs  { position: static; max-height: none; overflow: visible; margin-bottom: 18px;
                      display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 28px; }
  .planner__example-note { grid-column: 1 / -1; }
  .pset:last-child  { border-bottom: 1px solid var(--line); }
}
@media (max-width: 767px) {
  .planner          { padding: 18px 16px; border-radius: 14px; }
  .tiles            { grid-template-columns: 1fr 1fr; }
  .tile__value      { font-size: 22px; }
  .daychart         { padding: 12px 10px 8px; }
  .explain-panel    { padding: 14px 14px; }
}

/* --------------------------------------------------------------------------
   Solutions and roadmap page (/solutions/, Founder direction 2026-10-03).
   Built from the homepage layer, card, badge and data-table components. The
   only new pieces are the hero status line, the audience list, the coverage
   example and the roadmap column head. No new Signal Yellow consumer: the page
   carries the header dash, the hero eyebrow pill and the footer dash (3 marks).
   -------------------------------------------------------------------------- */
.hero--page          { padding-block: 80px 72px; }
.hero--page h1       { max-width: 900px; }
.hero__status        { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; margin-top: 30px; }
.hero__status p      { margin: 0; font-size: 16px; color: var(--ink-on-dark-strong); }
.section-intro       { margin-top: 18px; max-width: 720px; color: var(--ink-muted); }

.audience            { margin: 0; display: grid; gap: 18px; }
.audience dt         { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.06em;
                       text-transform: uppercase; color: var(--brand-indigo-600); }
.audience dd         { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-body); }

.coverage-example    { margin: 24px 0 0; }
.coverage-example__note { display: block; font-size: 12.5px; color: var(--ink-muted); }
.coverage-example .data-table tbody th { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-body); }
.coverage-example td.is-missing { font-family: inherit; white-space: normal; }
@media (max-width: 479px) {
  .coverage-example .data-table { font-size: 13.5px; }
  .coverage-example .data-table th, .coverage-example .data-table td { padding-right: 10px; }
}
.coverage-example .disclosure { margin-top: 10px; }

.roadmap             { margin-top: 40px; }
.roadmap__head       { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px;
                       flex-wrap: wrap; margin-bottom: 14px; }
.roadmap__col .body-copy { font-size: 16px; }
.roadmap__list       { margin: 14px 0 0; padding: 0; list-style: none; }
.roadmap__list li    { font-size: 15px; line-height: 1.5; padding-block: 9px; border-top: 1px solid var(--line); }

/* Tools list (/tools/, Founder direction 2026-10-03): the calculator linked from a list, not only the hero. */
.tool-list           { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 20px; max-width: 760px; }
.tool-list h2        { font-size: 24px; letter-spacing: -0.02em; }
.tool-list h2 a      { color: var(--ink); text-decoration-color: var(--brand-indigo-600); text-underline-offset: 4px; }
.tool-list h2 a:hover { color: var(--brand-indigo-600); }
.tool-list .body-copy { margin-top: 12px; }

/* --------------------------------------------------------------------------
   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: 0 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 { --rail: 14px; margin-top: 40px; padding: 18px 18px 18px calc(var(--rail) + 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; }
  /* Phones: a more compact header (it was ~200px tall). The five links still wrap rather than scroll, so
     every link stays visible, but on shorter rows: targets stay ~39px tall, above the 24px minimum. */
  .site-header { padding-block: 14px; }
  .site-header .wrap { row-gap: 6px; }
  .site-nav { gap: 0 16px; justify-content: flex-start; }
  .site-nav a { padding-block: 8px; }
  .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 — ~6.9:1 on midnight and ~6.1:1 on the secondary dark surface, 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, .hero :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .form-band :focus-visible {
  outline-color: var(--brand-iris-300);
}
/* The form card is a white surface inside the dark form band: there the ring
   sits on white, where iris-300 is only ~2.6:1, so it steps back to iris-400
   (~3.8:1). */
.form-band .form-card :focus-visible { outline-color: var(--brand-iris-400); }

/* 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. */