/* ═══════════════════════════════════════════════════════════════════════════
   Octane site layer — page-level composition on top of the Industry design
   system (assets/css/industry.css). Every value comes from an Industry token;
   nothing here re-defines a colour, a font or a spacing step.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── product palette & type ─────────────────────────────────────────────────
   Industry supplies the layout grammar — square frames, registration marks,
   hairlines, the modular grid — but every colour and font is retuned here to
   the product's own design tokens so the site and the app read as one thing.
   Source of truth: Logistics-app/frontend/src/theme/tokens.ts. The design
   system's readme sanctions exactly this: retune the tokens, keep the classes.

   Two notes on faithfulness:
   · Space Grotesk's variable axis stops at 700, so the app's weight-800/900
     roles already render at 700 — matched here rather than faked with a
     synthetic bold.
   · Dark bands use the app's ink (#14140f), not a deep step of the red ramp.
     Ink fills with red accents is the app's convention; a maroon field is not.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* structural / warm neutral set */
  --color-bg: #f1f0ea;                  /* neutrals.paperL0 */
  --color-surface: #ffffff;             /* neutrals.paperL1 */
  --color-text: #14140f;                /* neutrals.ink     */
  --color-divider: #e4e2d9;             /* neutrals.chipBand */

  --color-neutral-100: #faf9f5;         /* neutrals.paperL2      */
  --color-neutral-200: #f1efe8;         /* neutrals.gridDot      */
  --color-neutral-300: #e4e2d9;         /* neutrals.chipBand     */
  --color-neutral-400: #d8d6cd;         /* mutedRamp.light       */
  --color-neutral-500: #b9b7ad;         /* mutedRamp.caret       */
  --color-neutral-600: #8a897f;         /* mutedRamp.muted       */
  --color-neutral-700: #55554d;         /* mutedRamp.secondary   */
  --color-neutral-800: #3c3c34;         /* mutedRamp.data        */
  --color-neutral-900: #14140f;         /* neutrals.ink          */

  /* the brand red — alertRed, which the app uses for the brand square,
     primary CTAs, the active-nav rule and blocking errors alike */
  --color-accent: #e0231a;              /* alertRed.base */
  --color-accent-100: #fdeceb;          /* alertRed.tint */
  --color-accent-200: #fad7d5;
  --color-accent-300: #f3aca7;
  --color-accent-400: #ee7b73;
  --color-accent-500: #e0231a;
  --color-accent-600: #c11810;          /* alertRed.dark */
  --color-accent-700: #a3130c;
  --color-accent-800: #7c0f09;
  --color-accent-900: #4a0a06;

  --color-accent-2: #e0231a;
  --color-accent-2-100: #fdeceb;
  --color-accent-2-200: #fad7d5;
  --color-accent-2-300: #f3aca7;
  --color-accent-2-400: #ee7b73;
  --color-accent-2-500: #e0231a;
  --color-accent-2-600: #c11810;
  --color-accent-2-700: #a3130c;
  --color-accent-2-800: #7c0f09;
  --color-accent-2-900: #4a0a06;

  --color-ok: #0f7a3d;                  /* okGreen.base — savings, "minimum met" */
  --color-ok-tint: #f3faf5;             /* okGreen.tint */
  --color-ok-lift: #63c08c;             /* okGreen lightened for the ink field —
                                           the app has no dark-surface variant */
  --color-warn: #b45309;                /* amber.base — overrides, pins, warnings */
  --color-warn-tint: #fbf0e0;           /* amber.tint */
  --color-on-solid: #fefefe;            /* alertRed.onSolid */

  /* Space Grotesk carries headings and prose, IBM Plex Mono every number,
     identifier and uppercase micro-label — the app's split exactly. */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* Space Grotesk is a wider face than the condensed one the frames were drawn
   in, so the display sizes come down a step and tighten to the app's -0.02em. */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }

/* Every number, code and ID is mono — the app's rule. */
.tabular, .kpi__value, .sheet__num, .fig__rows, .blocker__body,
.table--mock th, .table--mock td, .util__val { font-family: var(--font-mono); }

/* Uppercase micro-labels are mono too: eyebrows, column heads, chrome. */
.eyebrow, .kpi__label, .util__title, .app__bar, .fig__title, .sheet__head,
.card-kicker, .table th, .tag, .form .field > span, .line__meta {
  font-family: var(--font-mono);
}
.eyebrow { font-weight: 500; }

html { scroll-behavior: smooth; }
body { text-wrap: pretty; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-900); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  padding: 10px 16px; background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.skip-link:focus { left: 0; }

/* ── page frame ─────────────────────────────────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); }
.sec { padding-block: 72px; }
.sec--hero { padding-block: clamp(48px, 7vw, 80px) 56px; }
.sec--head { padding-block: clamp(48px, 7vw, 80px) 40px; }
.sec--step { padding-block: 40px; }
.sec--step-end { padding-block: 40px 72px; }
.sec--last { padding-bottom: 80px; }
.sec--flush { padding-top: 0; }

.band { background: var(--color-neutral-900); color: var(--color-on-solid); }
.band h1, .band h2, .band h3 { color: var(--color-on-solid); }
.band a { color: var(--color-accent-400); }
.band a:hover { color: #fff; }

/* ── navigation ─────────────────────────────────────────────────────────────
   The header is the one band that wears the product's own palette rather than
   Industry steel, so the site's chrome and the app's chrome match. Values are
   the app's design tokens (Logistics-app frontend/src/theme/tokens.ts) as used
   by components/TopBar.tsx: white ground on a warm hairline, ink wordmark next
   to the red brand square, and the app's active-nav convention — ink fill,
   near-white label, 2px red underline. Typography stays Industry's.
   ──────────────────────────────────────────────────────────────────────── */
.nav {
  --app-paper: #ffffff;      /* neutrals.paperL1  */
  --app-hairline: #e4e2d9;   /* neutrals.chipBand */
  --app-ink: #14140f;        /* neutrals.ink      */
  --app-muted: #8a897f;      /* mutedRamp.muted   */
  --app-red: #e0231a;        /* alertRed.base     */
  --app-red-dark: #c11810;   /* alertRed.dark     */
  --app-on-solid: #fefefe;   /* alertRed.onSolid  */

  flex-wrap: wrap; align-items: stretch;
  gap: 0; padding: 0;
  background: var(--app-paper);
  border-bottom: 1px solid var(--app-hairline);
  position: sticky; top: 0; z-index: 5;
}
.nav-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 12px clamp(14px, 1.4vw, 18px);
  border-right: 1px solid var(--app-hairline); margin-right: 0;
  font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--app-ink);
}
.nav-brand__mark { width: 14px; height: 14px; background: var(--app-red); display: inline-block; }
/* industry.css colours .nav a[aria-current='page'] with the accent, and the
   brand link carries aria-current on the home page — the wordmark stays ink. */
.nav a.nav-brand, .nav a.nav-brand[aria-current="page"] { color: var(--app-ink); }
/* industry.css's `.nav a { color: inherit }` also outranks .btn-primary, which
   would leave the header CTA ink-on-ink. */
.nav a.btn-primary { color: var(--color-on-solid); }

.nav__links {
  display: flex; align-items: stretch; margin-right: auto;
  border-right: 1px solid var(--app-hairline);
}
.nav__links a {
  display: flex; align-items: center; padding: 0 18px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--app-muted);
}
.nav__links a:hover { color: var(--app-ink); background: color-mix(in srgb, var(--app-ink) 5%, transparent); }
.nav__links a[aria-current="page"] {
  background: var(--app-ink); color: var(--app-paper); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--app-red);
}
.nav :focus-visible { outline: 2px solid var(--app-red); outline-offset: -2px; }

/* The header's call to action sits in the bar; its colours come from the
   global .btn-primary rule below, like every other primary button. */
.nav .btn-primary { align-self: center; margin-right: clamp(14px, 1.4vw, 18px); }

@media (max-width: 799px) {
  /* Brand and CTA hold the first row; the links become a full-width cell strip. */
  .nav-brand { border-right: 0; margin-right: auto; }
  .nav__links {
    flex-basis: 100%; order: 3; margin-right: 0;
    border-right: 0; border-top: 1px solid var(--app-hairline);
  }
  .nav__links a { padding: 11px 16px; }
  .nav__links a:first-child { padding-left: clamp(14px, 1.4vw, 18px); }
}

/* ── type ───────────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent-700);
}
.band .eyebrow { color: var(--color-accent-400); }

.display {
  font-size: clamp(34px, 4.1vw, 52px); line-height: 1.02; text-transform: uppercase;
  letter-spacing: -0.02em; margin: 0;
}
.sec--head .display { margin-top: 14px; }
.display span { display: block; }
.display .accent, .h2 .accent { color: var(--color-accent-700); }
.band .display .accent { color: var(--color-accent-400); }

.h2 { font-size: clamp(26px, 2.5vw, 31px); line-height: 1.08; text-transform: uppercase; margin: 12px 0 0; }
.h2--lg { font-size: clamp(27px, 3.1vw, 41px); line-height: 1.05; text-transform: uppercase; margin: 14px 0 0; }
.h2--cta { font-size: clamp(24px, 2.8vw, 35px); line-height: 1.06; text-transform: uppercase; margin: 0; }
.h3 { font-family: var(--font-heading); font-weight: 700; font-size: 20px; text-transform: uppercase; margin: 0; }
.h4 { font-family: var(--font-heading); font-weight: 700; font-size: 17px; text-transform: uppercase; margin: 0; }

.lede { font-size: 17px; line-height: 1.5; margin: 24px 0 0; max-width: 56ch; color: var(--color-neutral-800); }
.sec--hero .lede { margin-top: 28px; max-width: 44ch; }
.prose { font-size: 16px; line-height: 1.55; color: var(--color-neutral-700); margin: 14px 0 0; max-width: 48ch; }
.band .prose, .band .lede { color: var(--color-neutral-400); }
.note { font-size: 15px; line-height: 1.5; color: var(--color-neutral-700); margin: 14px 0 0; max-width: 52ch; }
.fine { font-size: 12px; color: var(--color-neutral-600); }
.tabular { font-variant-numeric: tabular-nums; }

.rule { border: 0; height: 1px; background: var(--color-divider); margin: 10px 0 28px; }
.rule--tight { margin: 10px 0 18px; }
.rule--wide { margin: 24px 0 28px; }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }

/* ── grids ──────────────────────────────────────────────────────────────── */
.split {
  display: grid; gap: 48px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.split--hero { gap: 56px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.split--top { align-items: start; }
.split--wide { gap: 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
/* On one column the mockup follows its prose; on two it keeps the designed side. */
.split > .is-first { order: -1; }
@media (max-width: 859px) { .split > .is-first { order: 0; } }

.cols { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cols--narrow { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cols--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.trio { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.actions--end { justify-content: flex-end; }
.hero__actions { margin-top: 28px; }
.btn--wide { padding-inline: 22px; }
.btn--sm { font-size: 12px; }
.btn--xs { font-size: 12px; padding: 6px 12px; }

.hero__promise {
  display: flex; gap: 28px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--color-divider);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); font-weight: 600;
  column-gap: 20px; font-size: 11px;
}

/* ── blueprint frame ────────────────────────────────────────────────────────
   The Industry frame — square, hairline, with a "+" registration mark at each
   corner. The marks are drawn by one overlay (eight 1px gradient strokes)
   instead of the system's four <i class="corner"> children, so page markup
   stays readable; geometry and colour match styles.css exactly.
   ──────────────────────────────────────────────────────────────────────── */
.bp {
  --bp-mark: color-mix(in srgb, var(--color-text) 55%, transparent);
  position: relative; border: 1px solid var(--color-divider); border-radius: 0;
}
.bp::after {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background-image:
    linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark)),
    linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark)),
    linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark)),
    linear-gradient(var(--bp-mark), var(--bp-mark)), linear-gradient(var(--bp-mark), var(--bp-mark));
  background-size: 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px;
  background-position:
    left 5px top 0, left 0 top 5px,
    right 5px top 0, right 0 top 5px,
    left 5px bottom 0, left 0 bottom 5px,
    right 5px bottom 0, right 0 bottom 5px;
  background-repeat: no-repeat;
}
.band .bp { --bp-mark: rgba(255, 255, 255, .6); }
.bp--onDark { --bp-mark: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .28); }
.bp--solid { background: var(--color-neutral-900); color: var(--color-on-solid); border-color: var(--color-neutral-900); }
.bp--solid .prose { color: var(--color-neutral-400); }
.bp--solid .eyebrow { color: var(--color-accent-400); }
.bp--panel { background: var(--color-neutral-100); box-shadow: var(--shadow-lg); }
.bp--panel-md { background: var(--color-neutral-100); box-shadow: var(--shadow-md); }
.bp--pad { padding: 20px; }
.bp--pad-lg { padding: 24px; }
.bp--room { padding: clamp(28px, 4vw, 48px); }

/* ── product mock-up chrome ─────────────────────────────────────────────── */
.app__bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--color-divider); font-size: 12px;
}
.app__brand { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.12em; }
.app__tab { color: var(--color-neutral-600); }
.app__right { margin-left: auto; color: var(--color-neutral-600); }
.app__body { padding: 28px 24px; }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--color-divider); }
.kpis--two { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi { padding: 16px; border-right: 1px solid var(--color-divider); }
.kpi:last-child { border-right: 0; }
.kpi__label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); }
.kpi__value {
  font-weight: 600; line-height: 1.05; margin-top: 6px; letter-spacing: -0.02em;
  font-size: clamp(15px, 1.2vw, 18px); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kpi__value--sm { font-size: clamp(12.5px, 1.05vw, 15px); line-height: 1.15; margin-top: 8px; white-space: normal; }
.kpi__unit { font-size: 14px; color: var(--color-neutral-600); }
.kpi__note { font-size: 12px; color: var(--color-neutral-600); margin-top: 6px; }
.kpi__note--good { color: var(--color-ok); margin-top: 4px; }
/* Three figures across a phone leaves no room for the totals; stack them and
   turn the cell rules through 90°. */
@media (max-width: 560px) {
  .kpis, .kpis--two { grid-template-columns: 1fr; }
  .kpi { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .kpi:last-child { border-bottom: 0; }
  .kpi__value { font-size: 26px; }
}

.util__title { padding: 14px 16px 6px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); }
.util { padding: 0 16px 14px; display: grid; gap: 8px; font-size: 11.5px; }
.util__row { display: grid; grid-template-columns: minmax(0, 132px) 1fr 58px; gap: 10px; align-items: center; }
.util__track { display: block; height: 6px; background: var(--color-neutral-200); }
.util__fill { display: block; height: 100%; background: var(--color-neutral-700); }
.util__fill--max { background: var(--color-accent); }
.util__val { text-align: right; color: var(--color-neutral-600); }
.util__val--max { color: var(--color-accent-700); font-weight: 600; }

.scroll-x { overflow-x: auto; }
.scroll-x--top { border-top: 1px solid var(--color-divider); }
.table--mock { font-size: 12px; }
.table .right, .right { text-align: right; }
.row--chosen { background: var(--color-neutral-200); }
.cell--saving { color: var(--color-ok); }
.app__foot { padding: 12px 20px; font-size: 12px; color: var(--color-neutral-700); }
.app__foot--bar { padding: 12px 16px; border-top: 1px solid var(--color-divider); display: flex; gap: 8px; flex-wrap: wrap; }

.dropzone { border: 1px dashed #c9c7bd; padding: 36px 24px; text-align: center; background: var(--color-neutral-100); }
.dropzone__title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; }
.dropzone__hint { font-size: 13px; color: var(--color-neutral-700); margin-top: 6px; }

/* a labelled row with something on the right: file, finding, warning */
.line {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--color-divider); font-size: 13px;
}
.line--spaced { margin-top: 16px; }
.line--block { border-color: var(--color-accent-700); }
.line--file { padding: 14px 16px; }
.line__name { font-weight: 600; }
.line__meta { color: var(--color-neutral-600); margin-top: 2px; }
.line__why { color: var(--color-neutral-700); margin-top: 3px; }
.line-stack { display: grid; gap: 10px; }
.line-stack--pad { padding: 10px 24px 24px; font-size: 13px; }
.accept { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tags--pad { padding: 16px 24px 6px; }
.tag--onDark { background: rgba(255, 255, 255, .14); color: #fff; }

.pinned { padding: 16px 20px; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.pinned__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }

/* ── the spec-sheet proof plate ─────────────────────────────────────────── */
.sheet__head {
  display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--color-divider);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.sheet__head > * { padding: 12px 24px; }
.sheet__head > :first-child { flex: 1; min-width: 200px; }
.sheet__head > * + * { border-left: 1px solid var(--color-divider); color: var(--color-neutral-700); }
.sheet__cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sheet__cell { padding: 24px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.sheet__cell:last-child { border-right: 0; }
.sheet__num { font-weight: 600; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.05; margin-top: 10px; letter-spacing: -0.02em; }
.sheet__note { font-size: 14px; color: var(--color-neutral-700); margin-top: 8px; }
.sheet__foot { padding: 10px 24px; font-size: 13px; color: var(--color-neutral-700); }

/* ── figures on the steel field ─────────────────────────────────────────── */
.fig__title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-400); font-weight: 600; }
.fig__title--bar { padding: 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.fig__formula { font-family: var(--font-heading); font-weight: 700; font-size: clamp(19px, 2vw, 25px); line-height: 1.25; margin-top: 16px; letter-spacing: -0.02em; }
.fig__formula em { font-style: normal; color: var(--color-accent-400); }
.fig__cells {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; margin-top: 22px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .18);
}
.fig__cell { background: var(--color-neutral-900); padding: 14px; }
.fig__cell dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-400); }
.fig__cell dd { font-size: 14px; margin: 6px 0 0; color: var(--color-neutral-200); }
.fig__caption { font-size: 12px; color: var(--color-neutral-500); margin-top: 16px; }
.fig__rows { display: grid; margin-top: 16px; font-size: 13px; font-variant-numeric: tabular-nums; }
.fig__rows--body { padding: 20px; gap: 14px; }
.fig__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.fig__row:last-child { border-bottom: 0; }
.fig__rows--body .fig__row { padding: 0; border-bottom: 0; }
.fig__rows--body .fig__row--sep { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); }
.fig__row dt, .fig__row > span:first-child { color: var(--color-neutral-400); }
.fig__row dd, .fig__row > span:last-child { margin: 0; color: var(--color-on-solid); }
.fig__row .ok { color: var(--color-ok-lift); }

/* ── numbered steps & flow cards ────────────────────────────────────────── */
.step-no { font-family: var(--font-mono); font-size: 52px; font-weight: 600; color: var(--color-neutral-400); line-height: 1; }
.band .step-no { color: var(--color-neutral-600); }
.flow-no { font-family: var(--font-mono); font-size: 34px; font-weight: 600; color: var(--color-neutral-400); line-height: 1; }
.bp--solid .flow-no { color: var(--color-neutral-600); }
.flow__title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; text-transform: uppercase; margin-top: 12px; }
.flow__body { font-size: 14px; line-height: 1.45; color: var(--color-neutral-700); margin: 8px 0 0; }
.bp--solid .flow__body { color: var(--color-neutral-400); }
.card-title--step { font-family: var(--font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; margin-top: 8px; }

.ticks { font-size: 14px; line-height: 1.6; color: var(--color-neutral-700); margin: 14px 0 0; padding-left: 18px; }
.kinds { display: grid; gap: 12px; margin-top: 16px; }
.kinds > * { padding: 14px 16px; border-left: 1px solid var(--color-divider); }
.kinds > .is-hard { border-left-color: var(--color-accent-700); }
.kinds b { font-weight: 600; }

.lettered { display: grid; gap: 12px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-neutral-800); }
.lettered > div { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.lettered dt { font-family: var(--font-heading); font-weight: 600; color: var(--color-accent-700); }
.lettered dd { margin: 0; }

.blocker { margin-top: 10px; padding: 14px; border: 1px solid var(--color-accent-300); background: var(--color-accent-100); font-size: 13px; }
.blocker__title { font-weight: 600; }
.blocker__body { color: var(--color-neutral-700); margin-top: 4px; font-variant-numeric: tabular-nums; }
.blocker__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.aside { margin-top: 10px; font-size: 12px; color: var(--color-neutral-700); }

/* ── form ───────────────────────────────────────────────────────────────── */
.form { background: var(--color-bg); color: var(--color-text); padding: clamp(20px, 3vw, 32px); display: grid; gap: 14px; }
.form h2.form__title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--color-text); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form .field > span { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.form__status { font-size: 13px; margin: 0; }
.form__status[data-state="error"] { color: var(--color-accent-900); }
.form__status[data-state="ok"] { color: var(--color-accent-700); font-weight: 500; }
#demo { scroll-margin-top: 72px; }

/* — state chips: ready/optimal is green, an override is amber, only a
     blocker is red (industry.css's .tag-accent) — */
.tag-ok { background: var(--color-ok-tint); color: var(--color-ok); }
.tag-warn { background: var(--color-warn-tint); color: var(--color-warn); }
.cell--pin { color: var(--color-warn); }

/* — actions — the app's primary is the brand red with near-white type — */
.btn-primary {
  background: var(--color-neutral-900); border-color: var(--color-neutral-900);
  color: var(--color-on-solid);
}
.btn-primary:hover { background: var(--color-neutral-800); border-color: var(--color-neutral-800); }
.btn-primary:active { background: #000; border-color: #000; }
.btn-ghost { color: var(--color-accent-700); }
.btn-ghost:hover { color: var(--color-accent-600); }

/* Content links only. Scoped to <main> and the footer on purpose: the header
   is chrome, and a bare `a:not(.btn)` outranks .nav-brand, which would turn the
   wordmark and the nav items red. */
main a:not(.btn), .foot a:not(.btn) { color: var(--color-accent-700); }
main a:not(.btn):hover, .foot a:not(.btn):hover { color: var(--color-accent-600); }
/* Two classes deep, so this still wins on the ink field. */
.band a:not(.btn) { color: var(--color-accent-400); }
.band a:not(.btn):hover { color: var(--color-on-solid); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--color-divider); }
.foot__inner {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center;
  padding-block: 24px; font-size: 12px; color: var(--color-neutral-600);
}
.foot__brand { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0; color: var(--color-text); }
.foot__legal { margin-left: auto; }

@media print {
  .nav { position: static; }
  .band { background: #fff; color: #000; }
}