/* ============================================================================
   Mithril design system — one file, tokens at top.
   Rules: dark metallic identity; steel/silver
   accent; ONE warm signal color reserved for warning/danger in product
   imagery; success-green never appears as site chrome; zero third-party
   requests (fonts self-hosted below); prefers-reduced-motion respected;
   text contrast ≥ 4.5:1.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Surfaces (near-black, blue-leaning like ore in the hero art) */
  --m-bg-0: #07090d;            /* page base */
  --m-bg-1: #0b0e15;            /* raised sections */
  --m-bg-2: #10141d;            /* cards, code blocks */
  --m-glass: rgba(148, 163, 184, 0.055);      /* glass-card fill */
  --m-glass-strong: rgba(148, 163, 184, 0.10);

  /* Ink */
  --m-ink: #e8ecf2;             /* primary text  (≈13.8:1 on bg-0) */
  --m-ink-dim: #a7b0c0;         /* secondary     (≈7.5:1) */
  --m-ink-faint: #7d8798;       /* tertiary/meta (≈4.6:1) */

  /* The metal: steel/silver accent family */
  --m-steel-1: #dfe6ef;         /* highlight */
  --m-steel-2: #aab8cc;         /* mid */
  --m-steel-3: #74849c;         /* shadow */
  --m-accent: #b7c6da;          /* interactive accent (links, focus) */
  --m-accent-bright: #d9e4f2;
  --m-metal-grad: linear-gradient(135deg, #e8eef6 0%, #9fb0c6 38%, #dde5ef 55%, #6f8098 82%, #c3cfdf 100%);
  /* mark metal: same geometry at 85% luminance span —
     used by the Mi element + tiny mark; full grad stays for hero text */
  --m-metal-grad-mark: linear-gradient(135deg, #e3e9f2 0%, #a4b3c7 38%, #d9e1eb 55%, #7e8ea4 82%, #c6d1df 100%);
  /* hero metal: widened span + sharper stops so short display words carry
     the full highlight-to-shadow range */
  --m-metal-grad-strong: linear-gradient(135deg, #f7fafd 0%, #8ba0ba 30%, #f0f5fa 48%, #5f7089 72%, #d3dde9 92%, #9db0c7 100%);

  /* Signal colors — product imagery + warnings ONLY, never site chrome */
  --m-warn: #e0a45c;            /* warm signal (danger/warning) */
  --m-warn-bg: rgba(224, 164, 92, 0.09);
  --m-warn-edge: rgba(224, 164, 92, 0.38);
  --m-ok: #7fbf8e;              /* success-green: product screenshots only */

  /* Lines & focus */
  --m-line: rgba(167, 182, 204, 0.14);
  --m-line-strong: rgba(167, 182, 204, 0.26);
  --m-focus: #cdd9e8;

  /* Type */
  --m-font-display: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  --m-font-text: "Inter", "Segoe UI", -apple-system, sans-serif;
  --m-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --m-font-brand: "Cinzel", "Times New Roman", serif; /* brand marks ONLY (logotype + Mi element) */

  /* Scale (1.25 ratio around 1rem = 16px) */
  --m-fs-xs: 0.79rem;
  --m-fs-sm: 0.89rem;
  --m-fs-base: 1rem;
  --m-fs-md: 1.15rem;
  --m-fs-lg: 1.45rem;
  --m-fs-xl: 1.95rem;
  --m-fs-hero: clamp(2.2rem, 5.2vw, 3.6rem);

  /* Space & shape */
  --m-sp-1: 0.25rem; --m-sp-2: 0.5rem; --m-sp-3: 0.75rem; --m-sp-4: 1rem;
  --m-sp-6: 1.5rem;  --m-sp-8: 2rem;   --m-sp-12: 3rem;   --m-sp-16: 4rem;
  --m-sp-24: 6rem;
  --m-radius: 10px;
  --m-radius-lg: 16px;
  --m-content-w: 72rem;
  --m-prose-w: 44rem;

  /* Motion (zeroed under prefers-reduced-motion) */
  --m-ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --m-dur: 480ms;
}

/* ---- 2. Fonts (self-hosted; no third-party requests, ever) -------------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/Cinzel-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

/* ---- 3. Base ------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--m-bg-0);
  color: var(--m-ink);
  font-family: var(--m-font-text);
  font-size: var(--m-fs-base);
  line-height: 1.65;
  font-feature-settings: "cv05" 1, "cv11" 1; /* Inter: open l/a shapes */
}

h1, h2, h3, h4 {
  font-family: var(--m-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--m-ink);
  margin: 0 0 var(--m-sp-4);
}
h1 { font-size: var(--m-fs-hero); font-weight: 500; }
h2 { font-size: var(--m-fs-xl); }
h3 { font-size: var(--m-fs-lg); }
h4 { font-size: var(--m-fs-md); }
/* one measure: headings wrap at the same width as prose */
h1, h2, h3 { max-width: var(--m-prose-w); }

/* page-header lead paragraph: same measure as everything else */
.m-lead { font-size: var(--m-fs-md); color: var(--m-ink-dim); max-width: var(--m-prose-w); }

p { margin: 0 0 var(--m-sp-4); }
p, li { max-width: var(--m-prose-w); }
small, .m-meta { font-size: var(--m-fs-sm); color: var(--m-ink-faint); }

a {
  color: var(--m-accent);
  text-decoration: underline;
  text-decoration-color: var(--m-line-strong);
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover { color: var(--m-accent-bright); text-decoration-color: var(--m-accent); }

:focus-visible {
  outline: 2px solid var(--m-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

code, pre, kbd {
  font-family: var(--m-font-mono);
  font-size: 0.92em;
}
code {
  background: var(--m-glass);
  border: 1px solid var(--m-line);
  border-radius: 5px;
  padding: 0.08em 0.35em;
}

img { max-width: 100%; height: auto; }

::selection { background: rgba(183, 198, 218, 0.28); }

/* ---- 4. Layout ----------------------------------------------------------- */

.m-wrap {
  max-width: var(--m-content-w);
  margin: 0 auto;
  padding: 0 var(--m-sp-6);
}

.m-section { padding: var(--m-sp-16) 0; }
.m-section--raised { background: var(--m-bg-1); border-block: 1px solid var(--m-line); }
.m-section > .m-wrap > h2 { margin-bottom: var(--m-sp-8); }

.m-grid { display: grid; gap: var(--m-sp-6); }
.m-grid--vcenter { align-items: center; }
.m-grid--4 { grid-template-columns: repeat(4, 1fr); }
.m-grid--3 { grid-template-columns: repeat(3, 1fr); }
.m-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 56rem) {
  .m-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .m-grid--3, .m-grid--2 { grid-template-columns: 1fr; }
}

/* Eyebrow label above section titles */
.m-eyebrow {
  font-family: var(--m-font-mono);
  font-size: var(--m-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-ink-faint);
  margin-bottom: var(--m-sp-3);
}

/* Split section: prose-only sections put the heading in a left column and
   the paragraphs in a right column, so the full container width is used
   without centering text. */
.m-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: var(--m-sp-8) var(--m-sp-12);
  align-items: start;
}
@media (max-width: 56rem) {
  .m-split { grid-template-columns: 1fr; gap: var(--m-sp-2); }
}
.m-split > header > h2 { margin-bottom: 0; }
.m-split:not(:last-child) { margin-bottom: var(--m-sp-8); }
/* when the header carries an eyebrow, drop the right column to the
   heading's optical top */
.m-split > header:has(.m-eyebrow) + div,
.m-split > header:has(.m-eyebrow) + ol { padding-top: 2.1rem; }
@media (max-width: 56rem) {
  .m-split > header:has(.m-eyebrow) + div,
  .m-split > header:has(.m-eyebrow) + ol { padding-top: 0; }
}
.m-split > div > p:last-child { margin-bottom: 0; }

/* Paired paragraphs: two prose columns filling the container */
.m-cols2 {
  columns: 2;
  column-gap: var(--m-sp-12);
}
.m-cols2 p { max-width: none; }
@media (max-width: 56rem) { .m-cols2 { columns: 1; } }

/* Story card internals: incident left, response right */
.m-story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0 var(--m-sp-12);
}
@media (max-width: 56rem) { .m-story { grid-template-columns: 1fr; } }
.m-story > h3 { grid-column: 1 / -1; }

/* ---- 5. Metal text (the wordmark / hero effect) -------------------------- */

.m-metal-text {
  background: var(--m-metal-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* at hero scale the standard gradient reads flat; use the strong ramp + a
   faint metallic bloom (drop-shadow works where text-shadow can't with
   clipped text) */
.m-hero h1 .m-metal-text {
  background-image: var(--m-metal-grad-strong);
  filter: drop-shadow(0 0 16px rgba(183, 198, 218, 0.30));
}

/* ---- 6. Header / nav ------------------------------------------------------ */

.m-skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--m-bg-2);
  color: var(--m-ink);
  padding: 0.5rem 1rem;
  border-radius: 0 0 6px 0;
}
.m-skip:focus { left: 0; }

.m-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--m-bg-0) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--m-line);
}
.m-header__in {
  display: flex;
  align-items: center;
  gap: var(--m-sp-8);
  min-height: 4rem;
}
/* Identity lockup: Mi element + Cinzel logotype in
   solid pale steel + Space Grotesk compound. Cinzel appears in brand marks
   only — headings stay Space Grotesk. */
.m-logo {
  /* plain inline: the flex gap (a leftover from the element lockup) doubled
     the wordmark/compound spacing */
  font-family: var(--m-font-brand);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.035em;
  color: var(--m-steel-1);
  text-decoration: none;
  white-space: nowrap;
}
.m-logo .m-logo__compound {
  font-family: var(--m-font-display);
  color: var(--m-ink-dim);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* The Mi element — periodic-table tile (122 / Mi / 306). Boxed form lives at
   40px+; below 26px use .m-mark-tiny (borderless). */
.m-mark {
  font-family: var(--m-font-brand);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--m-bg-2), var(--m-bg-2)) padding-box, var(--m-metal-grad-mark) border-box;
  border-radius: 5px;
  width: 40px;
  padding: 5px 4px;
  line-height: 1.1;
}
.m-mark__n, .m-mark__m { font-size: 0.42rem; color: var(--m-ink-dim); }
.m-mark__n { width: 100%; text-align: left; padding-left: 3px; }
.m-mark__s {
  font-size: 1.05rem;
  font-weight: 400; /* 600 reads as bolded */
  margin: 1px 0;
  background: var(--m-metal-grad-mark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-mark--lg { width: 74px; padding: 9px 6px; border-radius: 7px; }
.m-mark--lg .m-mark__n, .m-mark--lg .m-mark__m { font-size: 0.72rem; }
.m-mark--lg .m-mark__s { font-size: 2.1rem; margin: 2px 0; }
.m-mark-tiny {
  font-family: var(--m-font-brand);
  font-weight: 600;
  line-height: 1;
  display: inline-block;
  background: var(--m-metal-grad-mark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.m-nav { display: flex; gap: var(--m-sp-6); margin-left: auto; align-items: center; }
.m-nav a {
  color: var(--m-ink-dim);
  text-decoration: none;
  font-size: var(--m-fs-sm);
}
.m-nav a:hover, .m-nav a[aria-current="page"] { color: var(--m-ink); }
/* Current-page underline is for text links only: on .m-btn the 2px
   padding-bottom would override the button's own padding by specificity
   and crush it lopsided (seen on apply.html's Apply button). */
.m-nav a[aria-current="page"]:not(.m-btn) { border-bottom: 1px solid var(--m-steel-2); padding-bottom: 2px; }

/* Mobile nav: checkbox-free, <details> disclosure (no JS dependency) */
.m-nav-toggle { display: none; }
@media (max-width: 56rem) {
  .m-header__in { flex-wrap: wrap; }
  .m-nav-toggle {
    display: block;
    margin-left: auto;
    background: none;
    border: 1px solid var(--m-line-strong);
    color: var(--m-ink);
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    font: inherit;
    font-size: var(--m-fs-sm);
  }
  .m-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m-sp-3);
    width: 100%;
    padding: var(--m-sp-3) 0 var(--m-sp-4);
    margin-left: 0;
  }
  .m-header.is-open .m-nav { display: flex; }
}

/* ---- 7. Buttons ----------------------------------------------------------- */

.m-btn {
  display: inline-block;
  font-family: var(--m-font-display);
  font-size: var(--m-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--m-line-strong);
  color: var(--m-ink);
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.m-btn:hover { border-color: var(--m-steel-2); color: var(--m-accent-bright); }

/* Primary — polished silver: one smooth diagonal sheen,
   light from the upper left, broad bright band mid-face, no texture.
   The gradient surface is 2× the button width; hover slides it, so the
   light source itself travels across the face and settles. Rest state
   shows the right half. */
.m-btn--primary {
  /* Stops on a 125%-wide surface: hover slides the light by 25% of the face. */
  background: linear-gradient(105deg,
    #c9d2de 0%, #e3e8ef 9.6%, #f2f5f8 20%, #cfd7e1 36%,
    #b9c2d0 48.8%, #f0f3f8 61.6%, #c3ccd8 77.6%, #a2adbd 100%);
  background-size: 125% 100%;
  background-position: 100% 0;
  color: #121722;
  border: 1px solid rgba(10, 14, 21, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),   /* top edge catches the light */
    inset 0 -1px 0 rgba(18, 25, 36, 0.30),     /* bottom edge turns away */
    0 1px 2px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); /* engraved */
  transition: background-position 600ms var(--m-ease), filter 200ms ease;
}
.m-btn--primary:hover {
  background-position: 0 0;   /* the light sweeps across and settles */
  filter: brightness(1.06);
  color: #0d1119;
}
.m-btn--primary:active { transform: translateY(1px); filter: brightness(0.97); }

/* ---- 8. Glass card --------------------------------------------------------- */

.m-card {
  background: var(--m-glass);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius-lg);
  padding: var(--m-sp-6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.m-card > :last-child { margin-bottom: 0; }
.m-card h3 { font-size: var(--m-fs-md); margin-bottom: var(--m-sp-2); }
.m-card--link { display: block; text-decoration: none; color: inherit; transition: border-color 160ms ease, background 160ms ease; }
.m-card--link:hover { border-color: var(--m-line-strong); background: var(--m-glass-strong); color: inherit; }
.m-card--link .m-card__cta { color: var(--m-accent); font-size: var(--m-fs-sm); }

/* Scope lists — the "stops / out of scope" card pair. Markers stay in the
   steel family: success-green and the warm signal are product-imagery only. */
.m-scope { list-style: none; margin: 0; padding: 0; }
.m-scope li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  font-size: var(--m-fs-sm);
}
.m-scope li::before {
  position: absolute;
  left: 0;
  font-family: var(--m-font-mono);
}
.m-scope--stops li::before { content: "✓"; color: var(--m-steel-2); }
.m-scope--out li::before { content: "✕"; color: var(--m-ink-faint); }
.m-scope li strong { display: block; color: var(--m-ink); }
.m-scope li span { color: var(--m-ink-dim); }

/* ---- 9. Evidence / matrix table ------------------------------------------- */

.m-tablewrap { overflow-x: auto; border: 1px solid var(--m-line); border-radius: var(--m-radius); }
.m-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--m-fs-sm);
}
.m-table th, .m-table td {
  text-align: left;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--m-line);
  vertical-align: top;
}
.m-table th {
  font-family: var(--m-font-display);
  font-weight: 600;
  font-size: var(--m-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-ink-dim);
  background: var(--m-bg-2);
}
.m-table tr:last-child td { border-bottom: none; }
.m-table td.m-t-good { color: var(--m-ink); }
.m-table td.m-t-out { color: var(--m-ink-faint); }

/* ---- 10. Code block with copy button -------------------------------------- */

.m-code {
  position: relative;
  background: var(--m-bg-2);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  margin: 0 0 var(--m-sp-4);
}
.m-code pre {
  margin: 0;
  padding: var(--m-sp-4);
  overflow-x: auto;
  font-size: var(--m-fs-sm);
  line-height: 1.6;
}
.m-code code { background: none; border: none; padding: 0; }
.m-code__copy {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  font-family: var(--m-font-mono);
  font-size: var(--m-fs-xs);
  color: var(--m-ink-faint);
  background: var(--m-bg-1);
  border: 1px solid var(--m-line);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}
.m-code__copy:hover { color: var(--m-ink); border-color: var(--m-line-strong); }

/* ---- 11. Step timeline ----------------------------------------------------- */

.m-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.m-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--m-sp-8) 3.5rem;
}
.m-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 2.2rem; height: 2.2rem;
  display: grid;
  place-items: center;
  font-family: var(--m-font-display);
  font-weight: 600;
  color: #0b0e15;
  background: var(--m-metal-grad);
  border-radius: 50%;
}
.m-steps li::after {
  content: "";
  position: absolute;
  left: 1.05rem; top: 2.5rem; bottom: 0.3rem;
  width: 1px;
  background: var(--m-line-strong);
}
.m-steps li:last-child { padding-bottom: 0; }
.m-steps li:last-child::after { display: none; }
.m-steps h3 { margin-bottom: var(--m-sp-1); }

/* ---- 11b. Flow diagram (sign → anchor → verify) ----------------------------- */

.m-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--m-sp-4);
  align-items: stretch;
  margin: var(--m-sp-8) 0;
}
.m-flow__node {
  background: var(--m-glass);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius-lg);
  padding: var(--m-sp-6);
}
.m-flow__node svg { display: block; margin: 0 0 var(--m-sp-3); stroke: var(--m-steel-2); }
.m-flow__node h3 { font-size: var(--m-fs-md); margin-bottom: var(--m-sp-2); }
.m-flow__node p { font-size: var(--m-fs-sm); color: var(--m-ink-dim); margin: 0 auto; }
.m-flow__node .m-flow__who {
  font-family: var(--m-font-mono);
  font-size: var(--m-fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-ink-faint);
  display: block;
  margin-bottom: var(--m-sp-2);
}
.m-flow__arrow {
  display: grid;
  place-items: center;
  color: var(--m-steel-3);
  font-size: 1.5rem;
}
.m-flow__arrow::before { content: "→"; }
@media (max-width: 56rem) {
  .m-flow { grid-template-columns: 1fr; }
  .m-flow__arrow::before { content: "↓"; }
}

/* ---- 11c. Accordion (objections band) --------------------------------------- */

.m-acc {
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-glass);
  margin-bottom: var(--m-sp-3);
}
.m-acc summary {
  cursor: pointer;
  padding: var(--m-sp-4) var(--m-sp-6);
  font-family: var(--m-font-display);
  font-weight: 600;
  font-size: var(--m-fs-base);
  color: var(--m-ink);
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.m-acc summary::-webkit-details-marker { display: none; }
.m-acc summary::after {
  content: "+";
  position: absolute;
  right: var(--m-sp-6);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--m-font-mono);
  color: var(--m-ink-faint);
}
.m-acc[open] summary::after { content: "–"; }
.m-acc summary:hover { color: var(--m-accent-bright); }
.m-acc__hint {
  display: block;
  font-family: var(--m-font-text);
  font-weight: 400;
  font-size: var(--m-fs-sm);
  color: var(--m-ink-faint);
  margin-top: 2px;
}
.m-acc__body { padding: 0 var(--m-sp-6) var(--m-sp-4); color: var(--m-ink-dim); font-size: var(--m-fs-sm); }
.m-acc__body p { margin-bottom: var(--m-sp-3); }
.m-acc__body p:last-child { margin-bottom: 0; }

/* ---- 11d. Card icons + inline diagrams --------------------------------------- */

.m-ico { stroke: var(--m-steel-2); display: block; margin-bottom: var(--m-sp-3); }

/* Chain-of-proof: pill nodes joined by labeled arrows; wraps on narrow */
.m-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m-sp-3);
  margin: var(--m-sp-6) 0;
}
.m-chain__node {
  font-family: var(--m-font-mono);
  font-size: var(--m-fs-sm);
  color: var(--m-ink);
  background: var(--m-bg-2);
  border: 1px solid var(--m-line-strong);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  white-space: nowrap;
}
.m-chain__link {
  display: grid;
  justify-items: center;
  color: var(--m-steel-3);
  font-size: 1.1rem;
  line-height: 1;
}
.m-chain__link span {
  font-family: var(--m-font-mono);
  font-size: var(--m-fs-xs);
  color: var(--m-ink-faint);
  margin-bottom: 2px;
  white-space: nowrap;
}

/* Fleet diagram */
.m-fleet { width: 100%; max-width: 21rem; height: auto; display: block; margin: var(--m-sp-3) 0 var(--m-sp-4); }
.m-fleet .f-dev { stroke: var(--m-line-strong); }
.m-fleet .f-hot { stroke: var(--m-steel-1); }
.m-fleet .f-arc { stroke: var(--m-steel-3); stroke-dasharray: 3 4; }
.m-fleet .f-chk { stroke: var(--m-steel-2); }
.m-fleet .f-lbl { fill: var(--m-steel-1); font-family: var(--m-font-mono); font-size: 13px; }

/* ---- 12. Badges ------------------------------------------------------------- */

.m-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--m-font-display);
  font-size: var(--m-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--m-ink);
  background: var(--m-glass-strong);
  border: 1px solid var(--m-line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}
.m-badge::before {
  content: "";
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--m-metal-grad);
}
.m-badge--endorsed { color: var(--m-ink-dim); }

/* ---- 13. Warning banner specimen (product imagery only) -------------------- */

.m-warnbanner {
  display: flex;
  gap: var(--m-sp-3);
  align-items: flex-start;
  background: var(--m-warn-bg);
  border: 1px solid var(--m-warn-edge);
  border-radius: var(--m-radius);
  padding: var(--m-sp-4);
  color: var(--m-ink);
  font-size: var(--m-fs-sm);
}
.m-warnbanner::before {
  content: "⚠";
  color: var(--m-warn);
  font-size: 1.1rem;
  line-height: 1.3;
}
.m-warnbanner strong { color: var(--m-warn); }

/* ---- 14. Stat / figure blocks ----------------------------------------------- */

.m-stat { text-align: left; }
.m-stat__n {
  font-family: var(--m-font-display);
  font-size: var(--m-fs-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.m-stat__l { color: var(--m-ink-faint); font-size: var(--m-fs-sm); max-width: 16rem; }

/* ---- 15. CTA band ------------------------------------------------------------ */

.m-cta {
  border-block: 1px solid var(--m-line);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(159, 176, 198, 0.10) 0%, transparent 70%),
    var(--m-bg-1);
  padding: var(--m-sp-16) 0;
}
.m-cta h2 { margin-bottom: var(--m-sp-3); }
.m-cta p { margin: 0 0 var(--m-sp-6); }
.m-cta .m-btn { margin: 0 var(--m-sp-3) 0 0; }

/* ---- 16. Hero ----------------------------------------------------------------- */

.m-hero {
  position: relative;
  padding: var(--m-sp-24) 0 var(--m-sp-16);
  /* clamped: uncapped vh blows up the band (and vein thickness, which
     scales with canvas height) on tall displays */
  min-height: clamp(30rem, 68vh, 46rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 56rem) {
  .m-hero { padding-top: var(--m-sp-16); min-height: 0; }
  /* narrow screens put the veins right behind the headline — calm them */
  .m-hero__bg { opacity: 0.55; }
}
.m-hero h1 { margin-bottom: var(--m-sp-4); text-wrap: balance; }
.m-hero__sub {
  font-size: var(--m-fs-md);
  color: var(--m-ink-dim);
  margin-bottom: var(--m-sp-8);
  max-width: var(--m-prose-w);
}
.m-hero__actions { display: flex; gap: var(--m-sp-3); flex-wrap: wrap; }

/* Signature visual — the silver seam as the hero's background layer.
   Full-bleed canvas behind the copy; faded toward the text side so it never
   fights the words. */
/* Two stacked masks (they multiply through nesting): the wrapper fades the
   top gently and the bottom fully — no sliced veins at the section edge —
   while the canvas fades toward the text side. */
.m-hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000 18%, #000 70%, transparent 98%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000 18%, #000 70%, transparent 98%);
}
.m-hero__bg canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.5) 42%, #000 72%);
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.5) 42%, #000 72%);
}
.m-hero__content {
  position: relative;
  width: 100%;
  max-width: var(--m-content-w);
  margin: 0 auto;
  padding: 0 var(--m-sp-6);
}

/* Optional two-column hero body (text left, specimen right) */
.m-hero__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--m-sp-12);
  align-items: center;
}
@media (max-width: 56rem) {
  .m-hero__cols { grid-template-columns: 1fr; }
}

/* Verdict-card specimen — an illustrative rendering of what a host app
   shows. Steel only: success-green stays reserved for real product
   screenshots. */
.m-verdict {
  background: var(--m-glass);
  border: 1px solid var(--m-line-strong);
  border-radius: var(--m-radius-lg);
  padding: var(--m-sp-6);
  max-width: 24rem;
  display: grid;
  gap: var(--m-sp-3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  justify-self: end;
}
@media (max-width: 56rem) { .m-verdict { justify-self: start; } }
.m-verdict__origin { font-family: var(--m-font-mono); font-size: var(--m-fs-sm); color: var(--m-ink-dim); }
.m-verdict__status {
  font-family: var(--m-font-display);
  font-weight: 600;
  font-size: var(--m-fs-lg);
  color: var(--m-steel-1);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.m-verdict__status::before {
  content: "✓";
  font-size: 0.95rem;
  color: var(--m-steel-2);
  border: 1px solid var(--m-line-strong);
  border-radius: 50%;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
}
.m-verdict__meta { font-family: var(--m-font-mono); font-size: var(--m-fs-xs); color: var(--m-ink-faint); }
.m-verdict__note {
  font-size: var(--m-fs-xs);
  color: var(--m-ink-faint);
  border-top: 1px solid var(--m-line);
  padding-top: var(--m-sp-3);
}

/* ---- 17. Footer ----------------------------------------------------------------- */

.m-footer {
  border-top: 1px solid var(--m-line);
  background: var(--m-bg-1);
  padding: var(--m-sp-12) 0 var(--m-sp-8);
  font-size: var(--m-fs-sm);
  color: var(--m-ink-faint);
}
.m-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--m-sp-8);
  margin-bottom: var(--m-sp-8);
}
@media (max-width: 56rem) {
  .m-footer__cols { grid-template-columns: 1fr 1fr; }
  .m-footer__brand { grid-column: 1 / -1; }
}
.m-footer__brand p { max-width: 22rem; margin-top: var(--m-sp-4); }
.m-footer__cols nav { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.m-footer__cols nav strong {
  font-family: var(--m-font-mono);
  font-weight: 400;
  font-size: var(--m-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--m-ink-faint);
  margin-bottom: 0.3rem;
}
.m-footer a { color: var(--m-ink-dim); text-decoration: none; }
.m-footer a:hover { color: var(--m-ink); text-decoration: underline; text-underline-offset: 3px; }
.m-footer__note {
  border-top: 1px solid var(--m-line);
  padding-top: var(--m-sp-4);
  display: flex;
  justify-content: space-between;
  gap: var(--m-sp-4);
  flex-wrap: wrap;
  font-size: var(--m-fs-xs);
}

/* ---- 17b. Forms (funnel: apply / status) ----------------------------------------- */

.m-form { max-width: 46rem; }
.m-formsec { margin-bottom: var(--m-sp-8); }
.m-formsec > h2 {
  font-size: var(--m-fs-md);
  border-bottom: 1px solid var(--m-line);
  padding-bottom: var(--m-sp-3);
  margin-bottom: var(--m-sp-6);
}
.m-field { margin-bottom: var(--m-sp-6); }
.m-field > label {
  display: block;
  font-family: var(--m-font-display);
  font-weight: 600;
  font-size: var(--m-fs-sm);
  margin-bottom: var(--m-sp-2);
}
.m-req { color: var(--m-steel-2); }
.m-opt {
  font-family: var(--m-font-mono);
  font-weight: 400;
  font-size: var(--m-fs-xs);
  color: var(--m-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 0.4em;
}
.m-input {
  width: 100%;
  font-family: var(--m-font-text);
  font-size: var(--m-fs-base);
  color: var(--m-ink);
  background: var(--m-bg-2);
  border: 1px solid var(--m-line-strong);
  border-radius: var(--m-radius);
  padding: 0.65rem 0.9rem;
  transition: border-color 160ms ease;
}
.m-input::placeholder { color: var(--m-ink-faint); }
.m-input:focus { outline: none; border-color: var(--m-steel-2); }
.m-input:disabled { opacity: 0.5; cursor: not-allowed; }
textarea.m-input { min-height: 6.5rem; resize: vertical; font-family: var(--m-font-mono); font-size: var(--m-fs-sm); }
select.m-input { cursor: pointer; }
select.m-input option { background: var(--m-bg-2); color: var(--m-ink); }
input.m-input--addr, input.m-input--code { font-family: var(--m-font-mono); font-size: var(--m-fs-sm); }
.m-field .m-hint { font-size: var(--m-fs-sm); color: var(--m-ink-faint); margin: var(--m-sp-2) 0 0; }
.m-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--m-sp-6); }
@media (max-width: 56rem) { .m-fieldrow { grid-template-columns: 1fr; } }
.m-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--m-sp-2) var(--m-sp-4);
}
.m-check { display: flex; align-items: center; gap: 0.55rem; font-size: var(--m-fs-sm); color: var(--m-ink-dim); }
.m-check input { accent-color: var(--m-steel-2); width: 1rem; height: 1rem; }
.m-check--terms { align-items: flex-start; max-width: var(--m-prose-w); }
.m-check--terms input { margin-top: 0.28rem; flex-shrink: 0; }

/* Inline validation notes (voucher check, field errors). Warm signal is the
   error voice; positive states stay in the steel family. */
.m-fieldnote { font-size: var(--m-fs-sm); margin: var(--m-sp-2) 0 0; }
.m-fieldnote--ok { color: var(--m-steel-1); }
.m-fieldnote--ok::before { content: "✓ "; color: var(--m-steel-2); }
.m-fieldnote--bad { color: var(--m-warn); }

/* Form-level status line under the submit button */
.m-formstatus { display: none; margin-top: var(--m-sp-4); font-size: var(--m-fs-sm); }
.m-formstatus.is-loading { display: block; color: var(--m-ink-dim); }
.m-formstatus.is-error {
  display: block;
  color: var(--m-warn);
  background: var(--m-warn-bg);
  border: 1px solid var(--m-warn-edge);
  border-radius: var(--m-radius);
  padding: var(--m-sp-3) var(--m-sp-4);
}

/* ---- 17c. Status timeline (application status page) ------------------------------- */

.m-track { list-style: none; margin: 0; padding: 0; }
.m-track li {
  position: relative;
  padding: 0 0 var(--m-sp-6) 3.5rem;
}
.m-track li::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2.2rem; height: 2.2rem;
  display: grid;
  place-items: center;
  font-family: var(--m-font-mono);
  font-size: var(--m-fs-sm);
  border-radius: 50%;
  border: 1px solid var(--m-line-strong);
  color: var(--m-ink-faint);
  background: var(--m-bg-2);
}
.m-track li::after {
  content: "";
  position: absolute;
  left: 1.05rem; top: 2.5rem; bottom: 0.3rem;
  width: 1px;
  background: var(--m-line-strong);
}
.m-track li:last-child { padding-bottom: 0; }
.m-track li:last-child::after { display: none; }
.m-track li.is-done::before {
  content: "✓";
  background: var(--m-metal-grad);
  border-color: transparent;
  color: #0b0e15;
  font-weight: 700;
}
.m-track li.is-now::before {
  content: "";
  border-color: var(--m-steel-2);
  box-shadow: 0 0 0 3px rgba(170, 184, 204, 0.15);
}
.m-track li.is-now::after { background: var(--m-line); }
.m-track h3 { font-size: var(--m-fs-md); margin-bottom: var(--m-sp-1); }
.m-track li.is-todo h3 { color: var(--m-ink-faint); }
.m-track p { font-size: var(--m-fs-sm); color: var(--m-ink-dim); margin-bottom: var(--m-sp-2); }
.m-track li.is-todo p { color: var(--m-ink-faint); }

/* ---- 18. Motion (restrained scroll-reveals only) --------------------------------- */

.m-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
}
.m-reveal.is-visible { opacity: 1; transform: none; }
/* staggered entrance within groups */
.m-grid > .m-reveal:nth-child(2), .m-steps > .m-reveal:nth-child(2), .m-flow > .m-reveal:nth-child(3) { transition-delay: 100ms; }
.m-grid > .m-reveal:nth-child(3), .m-steps > .m-reveal:nth-child(3), .m-flow > .m-reveal:nth-child(5) { transition-delay: 200ms; }
.m-grid > .m-reveal:nth-child(4) { transition-delay: 300ms; }
.m-acc.m-reveal:nth-of-type(2) { transition-delay: 80ms; }
.m-acc.m-reveal:nth-of-type(3) { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m-reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition-duration: 1ms !important; }
}

/* No-JS safety: reveals must never hide content when js is absent */
.no-js .m-reveal { opacity: 1; transform: none; }