/* ============================================================
   Invariance | Arc — Design System (site build)
   Webfonts load from Google Fonts. The production bundles embedded
   the binaries as local assets; this build substitutes the exact
   specified families from Google Fonts per the build brief.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   Invariance | Arc — Color System
   Canonical palette. Limestone ground, Ink flow lines, Teal
   boundary. Amber and Steel are Arc reserves (governance,
   security) and stay out of general surfaces.
   ============================================================ */
:root {
  /* --- Canonical palette (base) --- */
  --limestone:   #fcfbf8; /* primary background */
  --panel:       #ffffff; /* raised surfaces, letterhead */
  --ink:         #2b2a27; /* primary text and flow lines */
  --ink-soft:    #55534d; /* secondary text */
  --ink-mute:    #9a958a; /* tertiary text, captions, meta */
  --teal:        #3d6b6b; /* primary accent: the pipe, rules, boundary glyph */
  --teal-deep:   #305656; /* hover / pressed teal */
  --amber:       #9a7d4a; /* reserved accent — governance (Arc II) */
  --steel:       #3d5b6b; /* reserved accent — security (Arc I) */

  /* --- Rules & hairlines --- */
  --rule:        #d8d3c8; /* primary hairline rules and dividers */
  --rule-soft:   #efe9dd; /* faint dividers, card borders */
  --rule-strong: #c4bdae; /* emphasized hairline */

  /* --- Tints (derived, for fills and wells) --- */
  --teal-tint:   #eef3f2; /* teal at ~6% over limestone */
  --teal-tint-2: #dfe9e8;
  --amber-tint:  #f2ece0;
  --steel-tint:  #e6ebef;
  --ink-tint:    #f1efe9; /* neutral well */

  /* --- Decision states (Permit / Defer / Block) ---
     Authority Control returns one of three. Permit reads as the
     teal boundary itself; Defer is governance amber; Block is a
     serious brick. Never relabel these as "Authorized". */
  --decision-permit: #3d6b6b;
  --decision-defer:  #9a7d4a;
  --decision-block:  #8a2b1d;
  --decision-permit-tint: #eef3f2;
  --decision-defer-tint:  #f2ece0;
  --decision-block-tint:  #f4e7e3;

  /* ============================================================
     Direction B — Alternate skin (mockup v0.5)
     Held for comparison, not adopted. A warmer broadsheet
     register. Reach for these only inside an explicit Direction B
     context; do not mix with the canonical palette above.
     ============================================================ */
  --b-paper:       #faf8f4;
  --b-ink:         #1a1a18;
  --b-terracotta:  #b0402a;
  --b-permit:      #2e6b4f;
  --b-defer:       #a1761b;
  --b-block:       #8a2b1d;

  /* ============================================================
     Semantic aliases — reference these in components, not the
     raw swatches above.
     ============================================================ */
  --surface-page:    var(--limestone);
  --surface-raised:  var(--panel);
  --surface-well:    var(--ink-tint);
  --surface-accent:  var(--teal-tint);

  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-soft);
  --text-muted:      var(--ink-mute);
  --text-accent:     var(--teal);
  --text-on-ink:     var(--limestone);

  --border-hairline: var(--rule);
  --border-soft:     var(--rule-soft);
  --border-strong:   var(--rule-strong);
  --border-accent:   var(--teal);

  --accent:          var(--teal);
  --accent-hover:    var(--teal-deep);
  --accent-gov:      var(--amber);
  --accent-sec:      var(--steel);
}

/* ============================================================
   Invariance | Arc — Typography
   Cormorant Garamond carries the principle (display, serif).
   Libre Franklin carries the infrastructure (body, utility,
   weights 300–600). The pairing is the personality of the
   system. Use the serif with restraint at larger sizes.
   ============================================================ */
:root {
  /* --- Families --- */
  --font-serif:  'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-sans:   'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:   'Courier New', 'SFMono-Regular', ui-monospace, monospace; /* Direction B kickers */

  /* --- Weights --- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* --- Type scale (px). Serif display steps run large;
     Libre Franklin holds the utility register. --- */
  --size-display:   54px;  /* hero principle, serif */
  --size-h1:        40px;
  --size-h2:        30px;
  --size-h3:        23px;
  --size-h4:        19px;
  --size-body-lg:   17px;
  --size-body:      15px;
  --size-body-sm:   13.5px;
  --size-caption:   12.5px;
  --size-eyebrow:   11px;   /* uppercase, tracked labels */
  --size-micro:     10px;

  /* --- Line heights --- */
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* --- Letter spacing --- */
  --tracking-tightest: -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.14em;  /* eyebrows */
  --tracking-widest:   0.22em;  /* subtitle, small-caps address */

  /* --- Semantic roles --- */
  --text-display-family: var(--font-serif);
  --text-heading-family: var(--font-serif);
  --text-body-family:    var(--font-sans);
  --text-label-family:   var(--font-sans);
  --text-mono-family:    var(--font-mono);
}

/* ============================================================
   Invariance | Arc — Spacing & Layout
   A quiet, editorial rhythm. Base unit 4px; the system favors
   generous vertical air and hairline structure over heavy fills.
   ============================================================ */
:root {
  /* --- Spacing scale (4px base) --- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* --- Semantic spacing --- */
  --gap-inline:   var(--space-2);  /* between inline siblings */
  --gap-tight:    var(--space-3);
  --gap-default:  var(--space-6);
  --gap-section:  var(--space-16); /* between page sections */
  --pad-card:     var(--space-6);
  --pad-card-lg:  var(--space-8);

  /* --- Layout measures --- */
  --measure-prose:   68ch;  /* lede / body max line length */
  --measure-narrow:  54ch;
  --container-page:  1080px; /* document / letterhead width */
  --container-wide:  1240px; /* marketing band width */
  --page-gutter:     28px;

  /* --- Band rhythm (homepage) --- */
  --band-pad-y:     var(--space-24);
  --band-pad-y-sm:  var(--space-16);
}

/* ============================================================
   Invariance | Arc — Effects
   Radii, borders, shadows, transitions. The system is built on
   hairline rules, not heavy shadows. Elevation is restrained:
   surfaces lift a few pixels, never float. Corners are soft but
   architectural, never pill-round except on controls.
   ============================================================ */
:root {
  /* --- Radii --- */
  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    10px;  /* cards, panels */
  --radius-lg:    14px;
  --radius-pill:  999px; /* buttons, tags, range thumbs */

  /* --- Border widths --- */
  --border-hair:  1px;
  --border-thick: 1.6px;  /* boundary glyph weight */

  /* --- Shadows — soft, low, warm-neutral. Used sparingly. --- */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(43, 42, 39, 0.04);
  --shadow-sm:    0 1px 3px rgba(43, 42, 39, 0.05), 0 1px 2px rgba(43, 42, 39, 0.04);
  --shadow-md:    0 4px 16px rgba(43, 42, 39, 0.06), 0 1px 3px rgba(43, 42, 39, 0.05);
  --shadow-lg:    0 12px 40px rgba(43, 42, 39, 0.10), 0 2px 8px rgba(43, 42, 39, 0.05);
  /* Accent focus ring — teal boundary */
  --ring-accent:  0 0 0 3px rgba(61, 107, 107, 0.18);
  --ring-inset:   inset 0 0 0 1px rgba(61, 107, 107, 0.20);

  /* --- Transitions — quiet infrastructure. No bounce. --- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-base:      180ms; /* @kind other */
  --dur-slow:      320ms; /* @kind other */
  --dur-mark:      3600ms; /* @kind other */ /* commitment-gate entropy→structure */
  --transition-control: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);

  /* --- Backdrop --- */
  --blur-bar: blur(6px); /* @kind other */ /* sticky control bars over limestone */
}

/* ============================================================
   Invariance | Arc — Base element defaults
   A thin reset plus brand defaults so any surface that links the
   system inherits limestone ground, ink text, and the type
   pairing without extra setup. Components do not depend on this.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--text-primary);
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); font-family: var(--font-sans); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-accent); text-decoration: none; transition: var(--transition-control); }
a:hover { color: var(--accent-hover); }

hr {
  border: none;
  border-top: var(--border-hair) solid var(--border-hairline);
  margin: 0;
}

::selection { background: var(--teal-tint-2); color: var(--ink); }

/* Eyebrow / label utility used across surfaces */
.ia-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}




  /* ============================================================
     Reinterpretation of Homepage Mockup v0.5 into the canonical
     Invariance | Arc system (Direction A). Limestone ground, ink
     lines, single teal accent. Amber/Steel held as Arc reserves.
     Rhythm from one ink band + hairline rules, not color washes.
     ============================================================ */
  html, body { margin: 0; background: var(--limestone); color: var(--ink); }
  body {
    font-family: var(--font-sans);
    font-size: var(--size-body-lg);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: var(--teal); text-decoration: none; transition: var(--transition-control); }
  a:hover { color: var(--teal-deep); }

  .wrap { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--page-gutter); }
  .measure { max-width: 68ch; }

  /* --- Eyebrow / kicker --- */
  .eyebrow {
    font-family: var(--font-sans); font-size: var(--size-eyebrow); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--teal);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before { content: ""; width: 18px; height: 1.6px; background: var(--teal); display: inline-block; }

  .meta {
    font-family: var(--font-mono); font-size: var(--size-caption);
    letter-spacing: 0.08em; color: var(--ink-mute);
  }

  /* --- Quiet notice (replaces the inverted draft bar) --- */
  .notice {
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--limestone) 60%, transparent);
  }
  .notice .wrap {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap;
  }
  .notice .tag {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  }
  .notice .meta { white-space: nowrap; }
  .notice .tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }

  /* --- Header / nav --- */
  header.site {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--limestone) 86%, transparent);
    backdrop-filter: var(--blur-bar); -webkit-backdrop-filter: var(--blur-bar);
    border-bottom: 1px solid var(--rule);
  }
  .navrow { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px 0; }
  .wordmark {
    font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 22px;
    letter-spacing: 0.16em; color: var(--ink); display: inline-flex; align-items: center; gap: 0;
  }
  .wordmark .pipe { color: var(--teal); font-weight: var(--weight-regular); margin: 0 0.34em; }
  .wordmark .arc { letter-spacing: 0.02em; font-style: italic; font-weight: var(--weight-regular); }
  .links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
  .links a {
    font-family: var(--font-sans); font-size: 14px; font-weight: var(--weight-medium);
    color: var(--ink-soft); letter-spacing: 0.01em;
  }
  .links a:hover { color: var(--teal); }
  .links .arcnav { color: var(--ink-mute); font-size: 13px; }
  .navcta {
    font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--weight-semibold);
    color: var(--teal); border: 1px solid var(--teal); border-radius: var(--radius-pill);
    padding: 8px 18px; letter-spacing: 0.01em; white-space: nowrap;
  }
  .navcta:hover { background: var(--teal); color: var(--limestone); }

  /* --- Section rhythm: one idea per band, generous air --- */
  .band { padding: var(--band-pad-y) 0; border-bottom: 1px solid var(--rule); }
  .band--tight { padding: var(--band-pad-y-sm) 0; }
  .band--well { background: var(--surface-well); }
  .band--ink { background: var(--ink); color: var(--limestone); border-bottom: none; }

  /* --- Headings --- */
  h1.hero {
    font-family: var(--font-serif); font-weight: var(--weight-medium);
    font-size: clamp(40px, 4.6vw, 60px); line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight); color: var(--ink); margin: 22px 0 0; max-width: 15ch;
    text-wrap: balance;
  }
  h2.sec {
    font-family: var(--font-serif); font-weight: var(--weight-medium);
    font-size: clamp(28px, 2.6vw, 36px); line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight); color: inherit; margin: 16px 0 0; max-width: 34ch;
    text-wrap: balance;
  }
  .lede {
    font-family: var(--font-sans); font-size: 17px; line-height: var(--leading-relaxed);
    color: var(--ink-soft); margin: 18px 0 0; max-width: 66ch;
  }

  /* ============================================================
     HERO
     ============================================================ */
  .hero-band { padding: 96px 0 104px; border-bottom: 1px solid var(--rule); }
  .hero-grid {
    display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 64px; align-items: center;
  }
  .hero .support {
    font-family: var(--font-sans); font-size: 18px; line-height: var(--leading-relaxed);
    color: var(--ink-soft); margin: 24px 0 0; max-width: 48ch;
  }
  .hero .statement {
    font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 25px;
    line-height: 1.32; color: var(--ink); max-width: 34ch;
    margin: 34px 0 0; padding: 6px 0 6px 24px; border-left: 2px solid var(--teal);
  }
  .hero .companion {
    font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
    margin: 18px 0 0 25px; max-width: 52ch;
  }
  .hero .actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

  .btn {
    font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-semibold);
    border-radius: var(--radius-pill); padding: 12px 24px; letter-spacing: 0.01em;
    transition: var(--transition-control); cursor: pointer; border: 1px solid transparent;
  }
  .btn--primary { background: var(--teal); color: var(--limestone); border-color: var(--teal); }
  .btn--primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--limestone); }
  .btn--secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
  .btn--secondary:hover { color: var(--teal); border-color: var(--teal); }

  /* Gate mark panel */
  .markpanel {
    background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 34px 34px 26px;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    box-shadow: var(--shadow-md), var(--ring-inset);
  }
  .markpanel svg { width: 100%; height: auto; max-width: 320px; display: block; }
  .markpanel .caption {
    display: flex; align-items: center; gap: 12px; padding-top: 8px;
    border-top: 1px solid var(--rule-soft); width: 100%; justify-content: center;
  }
  .markpanel .caption span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }
  .markpanel .caption .lit { color: var(--teal); }
  .markpanel .caption .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--rule-strong); }

  /* Gate mark — static line-geometry mark, always visible. stroke-opacity
     attributes carry the line lightness of the entropy field. The three-act
     loop is layered on by JS; this static state is the reduced-motion fallback. */
  .gate .flow path, .gate .boundary path { opacity: 1; }
  .markstage { position: relative; width: 100%; display: flex; justify-content: center; }
  .verdict {
    position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 9px; opacity: 0;
    background: color-mix(in srgb, var(--panel) 90%, transparent);
    border: 1px solid var(--rule-soft); border-radius: var(--radius-pill);
    padding: 5px 6px 5px 13px; box-shadow: var(--shadow-xs);
    pointer-events: none; white-space: nowrap;
  }
  .verdict .vlabel { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.02em; }
  .verdict .vpill {
    font-family: var(--font-sans); font-size: 10px; font-weight: var(--weight-semibold);
    letter-spacing: 0.07em; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid;
  }
  .vpill.permit { color: var(--decision-permit); border-color: color-mix(in srgb, var(--decision-permit) 42%, transparent); background: var(--decision-permit-tint); }
  .vpill.defer  { color: var(--decision-defer);  border-color: color-mix(in srgb, var(--decision-defer) 42%, transparent);  background: var(--decision-defer-tint); }
  .vpill.block  { color: var(--decision-block);  border-color: color-mix(in srgb, var(--decision-block) 42%, transparent);  background: var(--decision-block-tint); }
  .markline { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-soft); text-align: center; margin: 4px 0 0; }

  /* ============================================================
     TWO OUTCOMES
     ============================================================ */
  .exlead {
    font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 26px;
    line-height: 1.32; max-width: 36ch; margin: 22px 0 0; color: var(--ink); text-wrap: balance;
  }
  .paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
  .path {
    background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); padding: 28px 30px; display: flex; flex-direction: column; gap: 14px;
  }
  .path.good { border-color: color-mix(in srgb, var(--teal) 32%, var(--rule-soft)); box-shadow: var(--shadow-sm), var(--ring-inset); }
  .path .phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .path .label {
    font-family: var(--font-sans); font-size: 12.5px; font-weight: var(--weight-semibold);
    letter-spacing: 0.05em; text-transform: uppercase;
  }
  .path.bad .label { color: var(--ink-mute); }
  .path.good .label { color: var(--teal); }
  .path .seq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
  .path .seq li { display: flex; gap: 14px; align-items: baseline; }
  .path .seq .n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); min-width: 16px; }
  .path .seq .tx { font-family: var(--font-sans); font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
  .path.bad .seq li:last-child .tx { color: var(--decision-block); font-weight: var(--weight-semibold); }
  .path.good .seq li:nth-last-child(-n+2) .tx { color: var(--ink); font-weight: var(--weight-semibold); }

  .badge {
    font-family: var(--font-sans); font-size: 11.5px; font-weight: var(--weight-semibold);
    letter-spacing: 0.04em; padding: 4px 12px 4px 10px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 7px; border: 1px solid;
  }
  .badge .bdot { width: 6px; height: 6px; border-radius: 50%; }
  .badge.block { color: var(--decision-block); border-color: color-mix(in srgb, var(--decision-block) 36%, transparent); background: var(--decision-block-tint); }
  .badge.block .bdot { background: var(--decision-block); }
  .badge.permit { color: var(--decision-permit); border-color: color-mix(in srgb, var(--decision-permit) 36%, transparent); background: var(--decision-permit-tint); }
  .badge.permit .bdot { background: var(--decision-permit); }

  .exclose { margin-top: 32px; max-width: 66ch; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
  .exclose b { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 18px; color: var(--ink); font-style: italic; }

  /* See-it-in-action: canonical commitment examples mirroring the hero mark */
  .decklist { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--rule); }
  .decklabel { font-family: var(--font-sans); font-size: 11.5px; font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
  .decks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
  .deck { display: inline-flex; align-items: center; gap: 12px; padding: 8px 9px 8px 15px; background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); }
  .deck .dact { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0.01em; white-space: nowrap; }
  .deck .vpill { font-size: 10px; }

  /* Guarantee strip under the rail — Trajectory-style assurances, compressed */
  .guarantees { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--rule-soft); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 36px; align-items: start; }
  .gtitle { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 22px; line-height: 1.3; color: var(--ink); margin: 0; max-width: 26ch; }
  .glist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 28px; }
  .glist li { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); padding-left: 18px; position: relative; }
  .glist li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border: 1.4px solid var(--teal); border-radius: 50%; }

  /* Case index link (replaces the standalone Evidence carousel) */
  .caseindex { margin-top: 30px; font-size: 14px; font-weight: var(--weight-medium); }

  /* ============================================================
     FAILURE PATH
     ============================================================ */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; }
  .step { border-top: 2px solid var(--ink); padding-top: 16px; }
  .step .n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; }
  .step .t { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 21px; margin: 8px 0 8px; line-height: 1.2; }
  .step p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
  .patternclose { margin-top: 36px; font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 22px; color: var(--ink); max-width: 40ch; }

  /* Incident strip */
  .incidents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--rule); }
  .incident { padding: 20px 26px 0 0; }
  .incident + .incident { padding-left: 26px; border-left: 1px solid var(--rule); }
  .incident .src {
    font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-regular);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 8px;
  }
  .incident p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

  /* ============================================================
     RAIL DIAGRAM
     ============================================================ */
  .railhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
  .toggle {
    display: inline-flex; align-items: center; gap: 14px; padding: 9px 18px;
    background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-pill);
  }
  .toggle .opt { font-family: var(--font-sans); font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--ink-mute); transition: var(--transition-control); }
  .toggle .opt.on { color: var(--ink); }
  .switch {
    appearance: none; -webkit-appearance: none; cursor: pointer; position: relative;
    width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--rule-strong);
    border: none; transition: background var(--dur-base) var(--ease-standard); margin: 0;
  }
  .switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--panel); box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-standard);
  }
  .switch:checked { background: var(--decision-block); }
  .switch:checked::after { transform: translateX(18px); }

  .railwrap {
    margin-top: 30px; background: var(--panel); border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 36px 36px 30px;
  }
  .rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .node { padding: 6px 24px; position: relative; }
  .node + .node { border-left: 1px solid var(--rule); }
  .node .t { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 18px; margin-bottom: 5px; }
  .node .c { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
  .node .who { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; margin-top: 12px; color: var(--ink-mute); }
  .node.authority .who { color: var(--teal); }
  .node.authority {
    border-left: 1.6px solid var(--teal); margin-left: -1px;
    background: linear-gradient(var(--teal-tint), var(--teal-tint));
    border-radius: var(--radius-xs); transition: background var(--dur-slow) var(--ease-standard);
  }
  .node.record .t { font-family: var(--font-serif); font-style: italic; }
  .node.record .who { color: var(--ink-mute); }
  .chips { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
  .chip {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 3px 9px;
    border: 1px solid; border-radius: var(--radius-pill); transition: var(--transition-control);
  }
  .chip.p { color: var(--decision-permit); border-color: color-mix(in srgb, var(--decision-permit) 40%, transparent); }
  .chip.d { color: var(--decision-defer); border-color: color-mix(in srgb, var(--decision-defer) 40%, transparent); }
  .chip.b { color: var(--decision-block); border-color: color-mix(in srgb, var(--decision-block) 40%, transparent); }
  /* active decision highlighting */
  body:not(.adv) .chip.p { background: var(--decision-permit); color: var(--limestone); border-color: var(--decision-permit); }
  body.adv .chip.b { background: var(--decision-block); color: var(--limestone); border-color: var(--decision-block); }
  body.adv .node.authority { background: linear-gradient(var(--decision-block-tint), var(--decision-block-tint)); border-left-color: var(--decision-block); }
  body.adv .node.authority .who { color: var(--decision-block); }

  .bndnote {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--teal); text-align: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule-soft);
  }
  body.adv .bndnote { color: var(--decision-block); }
  .reading {
    margin-top: 26px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 72ch;
  }
  .reading.org { display: block; }
  .reading.adv { display: none; }
  body.adv .reading.org { display: none; }
  body.adv .reading.adv { display: block; color: var(--ink-soft); border-left: 2px solid var(--decision-block); padding-left: 18px; }
  .standing { margin-top: 34px; font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 21px; max-width: 40ch; color: var(--ink); }

  /* ============================================================
     SURFACES
     ============================================================ */
  .bridge { max-width: 66ch; color: var(--ink-soft); font-size: 16px; line-height: 1.65; margin: 0 0 38px; }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
  .card {
    background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); padding: 28px 28px 22px; display: flex; flex-direction: column;
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
  }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .card .tag {
    font-family: var(--font-sans); font-size: 11px; font-weight: var(--weight-semibold);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px;
  }
  .card .q { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 21px; line-height: 1.28; color: var(--ink); }
  .card > p { font-size: 14.5px; color: var(--ink-soft); margin-top: 14px; line-height: 1.55; }
  .card .inc { margin-top: 20px; border-top: 1px solid var(--rule-soft); padding-top: 16px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
  .card .inc b { font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; display: block; color: var(--ink-mute); margin-bottom: 6px; }
  .card .more { margin-top: auto; padding-top: 18px; font-size: 13.5px; font-weight: var(--weight-medium); }

  /* ============================================================
     TWO ARCS (ink band)
     ============================================================ */
  .band--ink .eyebrow { color: color-mix(in srgb, var(--teal) 70%, var(--limestone)); }
  .band--ink .eyebrow::before { background: color-mix(in srgb, var(--teal) 70%, var(--limestone)); }
  .band--ink h2.sec { color: var(--limestone); }
  .band--ink .lede { color: color-mix(in srgb, var(--limestone) 72%, var(--ink)); }
  .bridgeblock {
    font-family: var(--font-sans); font-size: 17px; line-height: 1.7; max-width: 68ch; margin-top: 34px;
    padding: 6px 0 6px 24px; border-left: 2px solid color-mix(in srgb, var(--teal) 70%, var(--limestone));
    color: color-mix(in srgb, var(--limestone) 80%, var(--ink));
  }
  .arccards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
  .arccard {
    background: color-mix(in srgb, var(--limestone) 6%, transparent); border: 1px solid color-mix(in srgb, var(--limestone) 16%, transparent);
    border-radius: var(--radius-md); padding: 30px 30px; display: block; color: var(--limestone);
    transition: var(--transition-control);
  }
  .arccard:hover { background: color-mix(in srgb, var(--limestone) 10%, transparent); }
  .arccard.sec { border-top: 2px solid var(--steel); }
  .arccard.gov { border-top: 2px solid var(--amber); }
  .arccard .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
  .arccard.sec .k { color: color-mix(in srgb, var(--steel) 60%, var(--limestone)); }
  .arccard.gov .k { color: color-mix(in srgb, var(--amber) 70%, var(--limestone)); }
  .arccard .t { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 25px; margin: 12px 0 10px; color: var(--limestone); }
  .arccard p { font-size: 15px; color: color-mix(in srgb, var(--limestone) 72%, var(--ink)); line-height: 1.55; }

  .matrixnote { margin-top: 40px; font-size: 14px; color: color-mix(in srgb, var(--limestone) 58%, var(--ink)); max-width: 64ch; }
  .matrix { margin-top: 22px; border: 1px solid color-mix(in srgb, var(--limestone) 16%, transparent); border-radius: var(--radius-md); overflow: hidden; }
  .mrow { display: grid; grid-template-columns: 1fr 1fr; }
  .mrow + .mrow { border-top: 1px solid color-mix(in srgb, var(--limestone) 12%, transparent); }
  .mcell { padding: 20px 26px; font-size: 14px; color: color-mix(in srgb, var(--limestone) 70%, var(--ink)); line-height: 1.55; }
  .mcell + .mcell { border-left: 1px solid color-mix(in srgb, var(--limestone) 12%, transparent); }
  .mcell b { font-family: var(--font-serif); font-weight: var(--weight-medium); color: var(--limestone); font-size: 16px; display: block; margin-bottom: 4px; }
  .mhead .mcell {
    font-family: var(--font-sans); font-size: 11.5px; font-weight: var(--weight-semibold); letter-spacing: 0.12em;
    text-transform: uppercase; padding: 15px 26px;
  }
  .mhead .mcell:first-child { color: color-mix(in srgb, var(--teal) 70%, var(--limestone)); }
  .mhead .mcell:last-child { color: color-mix(in srgb, var(--steel) 62%, var(--limestone)); }

  /* ============================================================
     EVIDENCE
     ============================================================ */
  .casebox { margin-top: 40px; background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 40px 44px; min-height: 230px; }
  .case { display: none; }
  .case.on { display: block; }
  .case .fig { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: clamp(34px, 4vw, 46px); color: var(--ink); line-height: 1; letter-spacing: var(--tracking-tight); }
  .case .name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin: 14px 0 16px; }
  .case p { max-width: 74ch; font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; }
  .case .cf { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); margin-top: 16px; letter-spacing: 0.04em; }
  .dots { margin-top: 26px; display: flex; gap: 12px; align-items: center; }
  .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ink-mute); background: none; cursor: pointer; padding: 0; transition: var(--transition-control); }
  .dot.on { background: var(--teal); border-color: var(--teal); }
  .dots .all { margin-left: 18px; font-size: 13.5px; font-weight: var(--weight-medium); }

  /* ============================================================
     CONTACT / FOOTER
     ============================================================ */
  .contact { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; }
  .contact h2 { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.22; max-width: 22ch; color: var(--ink); }
  .contact p { max-width: 56ch; color: var(--ink-soft); margin-top: 18px; font-size: 16px; line-height: 1.65; }
  .contact .actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
  .contact .email { font-family: var(--font-mono); font-size: 14px; color: var(--teal); letter-spacing: 0.02em; }

  footer.site { padding: 30px 0 64px; }
  .footrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--rule); }
  .footrow .fw { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 17px; letter-spacing: 0.14em; color: var(--ink); }
  .footrow .fw .pipe { color: var(--teal); margin: 0 0.3em; }
  .footrow .fmeta { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }

  /* ============================================================
     BAND TINTS — two quiet families only. Warm parchment for
     example/urgency/cumulative/CTA; cool gray-green for structural
     surfaces; one ink band for the turn. Kept within a few percent
     of paper so they read as room changes, not color washes.
     ============================================================ */
  .band--warm   { background: color-mix(in srgb, var(--limestone) 52%, var(--amber-tint)); }
  .band--cool   { background: color-mix(in srgb, var(--limestone) 46%, var(--teal-tint)); }
  .band--raised { background: var(--panel); border-top: 1px solid var(--rule); }

  .seclede { font-family: var(--font-sans); font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); margin: 24px 0 0; max-width: 64ch; }
  .secclose { margin-top: 38px; font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 22px; line-height: 1.32; color: var(--ink); max-width: 44ch; }
  .secclose .lit { color: var(--teal); }

  /* ============================================================
     THE QUESTION LEFT OVER — residue grid
     ============================================================ */
  .residue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 42px; }
  .rcard {
    background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-md);
    padding: 22px 24px 24px;
  }
  .rcard .rk { font-family: var(--font-sans); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
  .rcard .rq { font-family: var(--font-serif); font-size: 18px; line-height: 1.34; color: var(--ink-soft); margin-top: 11px; }
  .rcard.authority {
    grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
    border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--rule-soft));
    background: linear-gradient(var(--teal-tint), var(--teal-tint));
    box-shadow: var(--shadow-sm), var(--ring-inset); padding: 26px 30px;
  }
  .rcard.authority .rk { color: var(--teal); }
  .rcard.authority .rq { font-size: 22px; color: var(--ink); max-width: 40ch; margin-top: 0; }
  .rcard.authority .rkwrap { padding-right: 28px; border-right: 1px solid color-mix(in srgb, var(--teal) 24%, transparent); }
  .rcard.authority .rkwrap .nm { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 19px; color: var(--ink); margin-top: 6px; white-space: nowrap; }

  /* ============================================================
     URGENCY — numbered cards
     ============================================================ */
  .ucards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 42px; }
  .ucard {
    background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 12px;
  }
  .ucard .un { font-family: var(--font-mono); font-size: 12px; color: var(--teal); letter-spacing: 0.08em; }
  .ucard .ut { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 20px; line-height: 1.3; color: var(--ink); text-wrap: balance; min-height: 2.5em; }
  .ucard p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

  /* ============================================================
     ROTATING EXAMPLE CHIPS
     ============================================================ */
  .rotor { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .rotor .rlab { font-family: var(--font-sans); font-size: 11.5px; font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
  .rotor .rchip {
    display: inline-flex; align-items: center; gap: 11px; padding: 8px 9px 8px 16px;
    background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-pill); box-shadow: var(--shadow-xs);
    min-width: 248px;
  }
  .rotor .rchip .ract { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
  .rotor .rchip .vpill { margin-left: auto; font-size: 10px; }

  /* ============================================================
     CUMULATIVE CONSEQUENCE — rising sequence crossing a limit
     ============================================================ */
  .cumwrap { margin-top: 44px; background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 34px 36px 30px; }
  .cumchart { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: end; height: 220px; padding-top: 12px; }
  .limit { position: absolute; left: 0; right: 0; top: 40px; border-top: 1.4px dashed color-mix(in srgb, var(--decision-block) 55%, transparent); }
  .limit span { position: absolute; right: 0; top: -9px; background: var(--panel); padding-left: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--decision-block); }
  .cumstep { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 12px; }
  .cumstep .bar { width: 100%; max-width: 96px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: height var(--dur-slow) var(--ease-standard); }
  .cumstep.s1 .bar { height: 22%; } .cumstep.s2 .bar { height: 40%; } .cumstep.s3 .bar { height: 58%; }
  .cumstep.s4 .bar { height: 74%; } .cumstep.s5 .bar { height: 92%; }
  .cumstep.permit .bar { background: color-mix(in srgb, var(--decision-permit) 26%, var(--panel)); border-top: 2px solid var(--decision-permit); }
  .cumstep.defer .bar  { background: color-mix(in srgb, var(--decision-defer) 28%, var(--panel)); border-top: 2px solid var(--decision-defer); }
  .cumstep.block .bar  { background: color-mix(in srgb, var(--decision-block) 26%, var(--panel)); border-top: 2px solid var(--decision-block); }
  .cumstep .vpill { font-size: 9.5px; }
  .cumaxis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 14px; }
  .cumaxis span { text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
  .cumnote { margin-top: 28px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 70ch; }

  /* ============================================================
     ENTERPRISE GAINS — quiet four-up tiles
     ============================================================ */
  .gains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--rule); }
  .gain { padding: 26px 26px 8px 0; }
  .gain + .gain { padding-left: 26px; border-left: 1px solid var(--rule); }
  .gain .gt { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: 20px; color: var(--ink); display: flex; align-items: baseline; gap: 10px; }
  .gain .gt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; transform: translateY(-2px); }
  .gain p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 12px 0 0; }

  /* ============================================================
     PROOF STRIP — compact tiles
     ============================================================ */
  .prooftiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 42px; }
  .ptile { background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: 24px 26px; }
  .ptile .ps { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 10px; }
  .ptile p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
  .prooflink { margin-top: 28px; font-size: 14px; font-weight: var(--weight-medium); }

  /* surfaces 2x2 */
  .cards.cards-4 { grid-template-columns: repeat(2, 1fr); }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .markpanel { order: -1; }
    .cards, .steps { grid-template-columns: 1fr; }
    .incidents { grid-template-columns: 1fr; }
    .incident + .incident { padding-left: 0; border-left: none; border-top: 1px solid var(--rule); padding-top: 20px; }
    .rail { grid-template-columns: 1fr; }
    .node + .node { border-left: none; border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 18px; }
    .node.authority { margin-left: 0; }
    .paths, .arccards { grid-template-columns: 1fr; }
    .guarantees, .glist { grid-template-columns: 1fr; gap: 13px; }
    .decks { gap: 10px; }
    .mrow { grid-template-columns: 1fr; }
    .mcell + .mcell { border-left: none; border-top: 1px solid color-mix(in srgb, var(--limestone) 12%, transparent); }
    .contact { grid-template-columns: 1fr; gap: 28px; align-items: start; }
    .links { display: none; }
    .residue, .ucards, .prooftiles { grid-template-columns: 1fr; }
    .rcard.authority { grid-template-columns: 1fr; gap: 14px; }
    .rcard.authority .rkwrap { padding-right: 0; border-right: none; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--teal) 24%, transparent); }
    .cards.cards-4 { grid-template-columns: 1fr; }
    .gains { grid-template-columns: 1fr; }
    .gain + .gain { padding-left: 0; border-left: none; border-top: 1px solid var(--rule); }
    .gain { padding-right: 0; }
    .cumchart { height: 180px; gap: 10px; }
    .cumaxis { gap: 10px; }
    .cumaxis span { font-size: 9.5px; }
  }
  @media (max-width: 560px) {
    body { font-size: 16px; }
    .band { padding: var(--band-pad-y-sm) 0; }
  }