/* CROSSING v2 — paper polarity. The public site is a document, not a dashboard.

   Transcribed from E:\claudecode\RLHWorks\design-language-approved with the four
   measured token repairs recorded in
   production-wave\r5-work\claude-crossing\crossing-tokens.corrected.css.

   The site's original variable names are kept as aliases below so the 380 lines
   of component CSS underneath keep resolving; only what they RESOLVE TO changes.
   That is what preserves element IDs, hooks and accessible names while the
   surface is completely relit.

   FONTS. Archivo and Fragment Mono are not vendored here. See
   crossing-fonts.css for the exact gap and the drop-in that closes it; the
   stacks below name the real families first, so a machine that has them uses
   them, and everything else gets a strong grotesque/mono fallback. There is no
   runtime dependency on Google Fonts or unpkg.                              */

:root {
  color-scheme: light;

  /* ---- Crossing paper polarity ---------------------------------------- */
  --surface: #f4f1ea;
  --surface-well: #faf7f0;
  --surface-panel: #eae6dc;
  --crossing-ink: #1a1812;
  --crossing-ink-2: #57503f;
  --crossing-ink-3: #6c6557;      /* repaired: approved #8f8878 measured 3.123 */
  --ink-disabled: #8a8170;        /* repaired: approved #a89f8d measured 2.325 */
  --frame: #1a1812;
  --frame-strong: #8f8878;
  --hair: #ddd5c4;
  --hair-soft: #e7e0d1;
  --rule-mid: #c9bfa9;
  --plate: #1a1812;
  --on-plate: #f4f1ea;
  --focus: #3f5d85;
  --vermilion: #c74a2e;
  --on-vermilion: #fefaf2;        /* repaired: approved #f8f4ec measured 4.304 */
  --vermilion-ink: #b03f26;       /* accent as TEXT; #c74a2e is 4.186 on paper */

  --ok: #1d6b4e;   --ok-wash: #eef5ef;
  --warn: #8a5c0c; --warn-wash: #f8f0da;
  --danger-c: #a63a22; --danger-wash: #f9e9e3;
  /* Text ON the danger fill. --vermilion-ink is accent-as-TEXT-on-surface and measured
     1.10 against this fill; on-vermilion's value is the correct pairing here. */
  --on-danger: #fefaf2;           /* 6.21 on #a63a22 */
  --queued: #3f5d85; --queued-wash: #e9eef5;
  --neutral: #8f8878; --neutral-wash: #ece7da;

  /* ---- geometry: radius 2 everywhere, no shadows on product surfaces --- */
  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 2px;
  --rule-frame: 2px;
  --rule-hair: 1px;
  --shadow: none;
  --tap-min: 48px;
  --shell: 1180px;

  /* ---- type: Archivo is the voice, Fragment Mono is the record --------- */
  --font-sans: "Archivo", "Archivo Expanded", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Archivo", "Archivo Expanded", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif: var(--font-display);   /* Crossing has no serif voice */
  --font-mono: "Fragment Mono", "Cascadia Mono", "SF Mono", "DejaVu Sans Mono", Consolas, ui-monospace, monospace;
  --stretch-display: 125%;

  /* ---- aliases: the old names, resolving to Crossing ------------------- */
  --paper: var(--surface);
  --paper-light: var(--surface-well);
  --paper-deep: var(--surface-panel);
  --ink: var(--crossing-ink);
  --ink-raised: #211f1a;
  --ink-soft: #2b2925;
  --text: var(--crossing-ink-2);
  --muted: var(--crossing-ink-2);
  --faint: var(--crossing-ink-3);
  --line: var(--hair);
  --line-dark: #3f3c35;
  --rust: var(--vermilion-ink);
  --rust-hover: #8f321d;
  --ready: var(--ok);
  --ready-soft: var(--ok-wash);
  --attention: var(--warn);
  --attention-soft: var(--warn-wash);
  --danger: var(--danger-c);
  --danger-soft: var(--danger-wash);
  --cream: var(--surface-well);
}

/* Dark bands on the public page are CARBON islands, not one-off colours.
   A surface container paints its own ink and ground: `color` inherited from an
   ancestor is already computed, so redefining --ink on a descendant does not
   change it. */
.dark-section,
.record-lab,
.closing-cta,
.site-footer,
.utility-bar,
.brief-card,
.service-card-dark,
.proof-feature,
[data-polarity="carbon"] {
  color-scheme: dark;
  --surface: #141310;
  --surface-well: #0f0e0c;
  --surface-panel: #1a1815;
  --crossing-ink: #f4f1ea;
  --crossing-ink-2: #c9c4b6;
  --crossing-ink-3: #8f8b80;
  --ink-disabled: #6f6b60;
  --frame: #3f3c35;
  --frame-strong: #6a665c;        /* repaired: approved #55524a measured 2.382 */
  --hair: #2b2925;
  --hair-soft: #26241f;
  --rule-mid: #33312b;
  --plate: #f4f1ea;
  --on-plate: #141310;
  --focus: #93a6c4;
  --vermilion-ink: #e0704f;       /* accent as TEXT on carbon; #c74a2e is 3.934 */
  --ok: #7ed4a2;   --ok-wash: #10160f;
  --warn: #e9bd6d; --warn-wash: #171208;
  --danger-c: #e8836c; --danger-wash: #170e0b;
  /* The carbon danger fill is LIGHT, so this one inverts: a light ink would measure 2.56
     here. Same value as --on-plate, which is this palette's text-on-a-light-plate ink. */
  --on-danger: #141310;           /* 6.98 on #e8836c */
  --queued: #b3c2d9; --queued-wash: #12141a;
  --neutral: #c9c4b6; --neutral-wash: #191713;
  --line-dark: #2b2925;
  color: var(--crossing-ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; scroll-behavior: smooth; background: var(--paper); }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--text); background: var(--paper); font: 400 1rem/1.62 var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .18em; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { color: var(--ink); font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-display); letter-spacing: -.015em; }
/* The guide's display range is 44-86px. 7vw reached 101px at 1440 and ate the
   fold on its own. 86px = 5.375rem is the ceiling, not a suggestion. */
h1 { max-width: 980px; font-size: clamp(2.5rem, 5vw, 5.375rem); line-height: .98; }
h2 { font-size: clamp(2.25rem, 4.5vw, 4.25rem); line-height: 1.02; }
h3 { color: var(--ink); font-size: 1.25rem; line-height: 1.25; }
code { border: 1px solid var(--line); border-radius: var(--radius); padding: .1rem .35rem; color: var(--ink); background: var(--paper-deep); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .86em; }

/* Crossing: 3px --focus at 2px offset. The ring is a token, so a carbon
   island rings light and a paper section rings dark with no extra rule. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
/* (the old dark-section ring override is gone: --focus already flips) */

.shell { width: min(var(--shell), calc(100% - clamp(2rem, 8vw, 7rem))); margin-inline: auto; }
.section-pad { padding-block: clamp(4.5rem, 9vw, 8rem); }
.skip-link { position: fixed; z-index: 1000; left: 1rem; top: 1rem; min-height: 48px; padding: .75rem 1rem; transform: translateY(-180%); border-radius: var(--radius-sm); color: var(--cream); background: var(--ink); font-weight: 750; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin-bottom: 1.2rem; color: var(--rust); font: 400 .74rem/1.35 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-light { color: var(--vermilion-ink); }
.hero-lede { max-width: 680px; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.5; }
/* What we staff, readable in one pass. Mono CAPS micro-labels are the guide's
   label grammar; the sectors were previously buried mid-way through a 60-word
   paragraph, which is not something a visitor reads before deciding. */
.hero-sectors { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.hero-sectors li { display: inline-flex; align-items: center; color: var(--crossing-ink-2); font: 400 .78rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
/* ::after on all but the last, not ::before on all but the first. With
   ::before a wrapped line OPENS with a dangling rule - measured: three sectors
   fit on line one and "Commercial property" wrapped under a leading separator.
   A line may end with a rule; it may not begin with one. */
.hero-sectors li:not(:last-child)::after { content: ""; width: 1px; height: 1em; margin-left: 1.1rem; background: var(--frame-strong); }
.microcopy { max-width: 660px; color: var(--muted); font-size: .87rem; }
.status-label { color: var(--faint); font: 400 .7rem/1.3 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.status-chip { display: inline-flex; align-items: center; min-height: 28px; /* not-a-target: status chip, the guide sizes chips at a 26px plate + word */ border: 1px solid var(--line); border-radius: var(--radius); padding: .22rem .66rem; font: 400 .68rem/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.status-ready { border-color: var(--ok); color: var(--ok); background: var(--ready-soft); }
.brief-card .status-ready { border-color: #7ed4a2; color: #7ed4a2; background: #10160f; }
.status-attention { border-color: var(--warn); color: var(--warn); background: var(--attention-soft); }

.utility-bar { display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 32px; /* not-a-target: an announcement strip, nothing in it is clickable */ padding: .35rem 1rem; color: var(--crossing-ink-2); background: var(--ink); font: 400 .68rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.utility-rule { width: 24px; height: 1px; background: var(--rule-mid); }
/* rgba() literals are colours too. This header still painted the pre-Crossing
   paper (#f4efe7) because the transcription pass only looked for #hex. */
.site-header { position: sticky; z-index: 50; top: 0; border-bottom: var(--rule-hair) solid var(--hair); background: var(--surface); backdrop-filter: none; }
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: min(calc(var(--shell) + 60px), calc(100% - 2rem)); min-height: 82px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-height: 48px; color: var(--ink); font-size: 1.08rem; font-weight: 550; text-decoration: none; }
/* CROSSING 02 - MARK & LOCKUPS. "The plate is a square, radius 2, always
   vermilion #c74a2e with #f8f4ec letters." The legacy angular-R (assets/mark.svg)
   is RETIRED from product surfaces by the guide and may persist only as a
   favicon. This is that plate, and it is the same object on all three products. */
.brand-plate {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--vermilion);
  color: var(--on-vermilion);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: normal;
  font-size: 15px;
  letter-spacing: .02em;
  line-height: 1;
}
.brand img { flex: 0 0 42px; border-radius: var(--radius); }
.brand strong { font-weight: 820; letter-spacing: .03em; }
.language-switcher { display: inline-flex; flex: 0 0 auto; margin-left: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; background: var(--paper-light); }
.language-switcher[hidden] { display: none; }
.language-switcher button { min-width: 44px; min-height: 44px; border: 0; border-radius: 1px; color: var(--crossing-ink-2); background: transparent; cursor: pointer; font: 700 .75rem/1 var(--font-mono); letter-spacing: .08em; }
.language-switcher button[aria-pressed="true"] { color: var(--cream); background: var(--ink); }
.language-switcher button:hover { color: var(--ink); background: var(--rust-soft); }
.language-switcher button[aria-pressed="true"]:hover { color: var(--cream); background: var(--ink-raised); }
.site-nav { display: flex; align-items: center; gap: clamp(.2rem, 1.4vw, 1.15rem); }
/* --frame-strong is a 3:1 CONTROL EDGE token, not a 4.5:1 text token; using it
   as nav-link ink measured 3.08:1. Navigation is content and reads as ink-2. */
.nav-link { display: inline-flex; align-items: center; min-height: var(--tap-min); border-radius: var(--radius-sm); padding: .65rem .62rem; color: var(--crossing-ink-2); font-size: .9rem; font-weight: 680; text-decoration: none; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 2px; }
.nav-cta { border: 1px solid var(--ink); padding-inline: 1rem; color: var(--cream); background: var(--ink); text-decoration: none !important; }
.nav-cta:hover { color: var(--cream); background: var(--ink-raised); }
.nav-cta[aria-current="page"] { color: var(--cream); text-decoration-color: var(--vermilion-ink); }
.nav-toggle { display: none; align-items: center; justify-content: center; gap: .65rem; min-width: 92px; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper-light); cursor: pointer; font-weight: 750; }
.nav-toggle-icon { display: grid; gap: 5px; }
.nav-toggle-icon i { display: block; width: 18px; height: 2px; background: currentColor; transition: transform 150ms ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .78rem 1.15rem; font-weight: 770; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 100ms ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button-primary { border-color: var(--rust); color: var(--cream); background: var(--rust); }
.button-primary:hover { border-color: var(--rust-hover); color: var(--on-vermilion); background: var(--rust-hover); }
.button-secondary { border-color: var(--frame-strong); color: var(--ink); background: transparent; }
.button-secondary:hover { border-color: var(--ink); background: var(--paper-light); }
.button-light { border-color: var(--cream); color: var(--ink); background: var(--cream); }
.button-light:hover { border-color: var(--plate); background: var(--plate); }
.action-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 2rem 1.2rem; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; color: var(--rust); font-weight: 780; }

/* The first viewport is where a stranger decides whether this company does the
   thing they need. Measured before: 262px of a 900px screen was empty before
   the headline, and the primary action was not in the first screen at all,
   because `align-items: center` centred the copy inside a 780px block and the
   padding added up to 112px on top of that. Start the copy, do not centre it. */
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .72fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: clamp(2rem, 3.5vw, 3.25rem) clamp(3rem, 6vw, 5rem); }
.hero h1 em { color: var(--rust); font-weight: 500; }
.hero-copy .hero-lede { margin-top: 1.1rem; }
.hero-visual { position: relative; min-width: 0; }
.brief-card { position: relative; z-index: 2; overflow: hidden; border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 2rem); color: var(--cream); background: var(--ink); box-shadow: none; }
.brief-card .status-label { color: var(--crossing-ink-2); }
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line-dark); }
.brief-card h2 { margin-top: 2rem; color: var(--cream); font-size: clamp(2.2rem, 4vw, 3.4rem); }
.brief-card > p { color: var(--crossing-ink-2); }
.brief-steps { display: grid; gap: 0; margin: 2rem 0 0; padding: 0; list-style: none; }
.brief-steps li { display: grid; grid-template-columns: 34px 1fr auto; gap: .85rem; align-items: center; min-height: 74px; border-top: 1px solid var(--line-dark); }
.brief-steps li > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--frame-strong); border-radius: var(--radius); color: var(--crossing-ink-2); font: 400 .68rem var(--font-mono); font-variant-numeric: tabular-nums; }
.brief-steps strong, .brief-steps small { display: block; }
.brief-steps small { color: var(--crossing-ink-2); }
.brief-steps b { color: var(--crossing-ink-2); font: 400 .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.brief-steps li:nth-child(2) b { color: var(--ok); }
.brief-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; border-radius: var(--radius-sm); padding: .8rem 1rem; color: var(--crossing-ink-2); background: var(--ink-soft); font-size: .82rem; }
.brief-foot strong { color: var(--cream); }
.visual-index { position: absolute; z-index: 1; right: -34px; bottom: -28px; display: grid; grid-template-columns: 1fr 1fr; width: 150px; height: 150px; border: 1px solid var(--line); }
.visual-index span { display: grid; place-items: center; border: 1px solid var(--line); color: var(--faint); font: 400 .68rem var(--font-mono); }

.section-heading { max-width: 880px; margin-bottom: 3rem; }
.split-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .65fr); gap: clamp(2rem, 7vw, 6rem); max-width: none; align-items: end; }
.split-heading > p { color: var(--muted); }
.service-intro { border-top: 1px solid var(--line); background: var(--paper-light); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.service-card { display: grid; grid-template-rows: auto 1fr; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: var(--paper); }
.service-card-dark { color: var(--cream); background: var(--ink); border-color: var(--ink); }
.card-number { justify-self: end; color: var(--faint); font: 400 .72rem var(--font-mono); }
.service-card-dark .card-number { color: var(--crossing-ink-2); }
.service-card > div { align-self: stretch; display: flex; flex-direction: column; }
.card-kicker { margin-bottom: .8rem; color: var(--rust); font: 400 .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.service-card-dark .card-kicker { color: var(--vermilion-ink); }
.service-card h3 { margin-bottom: 1rem; font: 800 clamp(1.75rem, 3vw, 2.45rem)/1.05 var(--font-display); font-stretch: var(--stretch-display); }
.service-card-dark h3 { color: var(--cream); }
.service-card p:not(.card-kicker) { color: var(--muted); }
.service-card-dark p:not(.card-kicker) { color: var(--crossing-ink-2); }
.service-card a { display: inline-flex; align-items: center; gap: .35rem; min-width: var(--tap-min); min-height: var(--tap-min); margin-top: auto; padding-top: 1.2rem; color: var(--rust); font-weight: 750; }
.service-card-dark a { color: var(--vermilion-ink); }

.proof-bridge { display: grid; grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr); gap: clamp(3rem, 8vw, 7rem); align-items: center; }
.proof-copy > p:not(.eyebrow) { max-width: 600px; margin-block: 1.4rem 2rem; color: var(--muted); }
.record-preview { border: var(--rule-frame) solid var(--frame); border-radius: var(--radius); padding: clamp(1.3rem, 3.5vw, 2.5rem); background: var(--paper-light); box-shadow: none; }
.record-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.record-preview h3 { margin-top: 1.7rem; font: 800 clamp(2rem, 4vw, 3.25rem)/1 var(--font-display); font-stretch: var(--stretch-display); }
.record-preview > p { margin-top: .4rem; color: var(--muted); }
.readiness-bar { height: 10px; margin-block: 2rem; overflow: hidden; border-radius: var(--radius); background: var(--paper-deep); }
.readiness-bar i { display: block; height: 100%; background: var(--ready); }
.readiness-bar .progress-75 { width: 75%; }
.record-preview dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-block: 1px solid var(--line); }
.record-preview dl div { padding: 1rem .7rem; border-right: 1px solid var(--line); }
.record-preview dl div:last-child { border-right: 0; }
.record-preview dt, .record-preview dd { margin: 0; }
.record-preview dt { color: var(--muted); font: 400 .64rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.record-preview dd { margin-top: .35rem; color: var(--ink); font: 400 1.7rem var(--font-mono); }
.record-preview footer { margin-top: 1.3rem; color: var(--muted); font-size: .78rem; }

.two-paths { border-top: 1px solid var(--line); background: var(--paper-deep); }
.two-path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.two-path-grid article { min-height: 410px; padding: clamp(1.7rem, 5vw, 3.5rem); background: var(--paper); }
.two-path-grid h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.two-path-grid article > p:not(.eyebrow) { margin: 1.2rem 0; color: var(--muted); }

/* Two problems here. Crossing is explicit that vermilion "is never a
   background wash" - it is the one consequential action, attention framing and
   the brand plate, nothing else. And `--rust: var(--vermilion-ink)` is
   SUBSTITUTED at :root, so this carbon band inherited the already-resolved
   PAPER value #b03f26 rather than its own #e0704f, and painted an eyebrow at
   1.84:1 on it. The closing band is carbon, with one filled vermilion action. */
.closing-cta { color: var(--crossing-ink); background: var(--surface); border-block: var(--rule-frame) solid var(--vermilion); }
.closing-cta .shell { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 330px; padding-block: 3rem; }
.closing-cta h2 { max-width: 820px; color: var(--crossing-ink); }
.closing-cta .eyebrow { color: var(--vermilion-ink); }

.page-hero { border-bottom: 1px solid var(--line); }
.page-hero .shell { display: grid; align-content: center; min-height: clamp(520px, 68vh, 720px); padding-block: 5rem; }
.page-hero h1 { max-width: 1020px; }
.page-hero .hero-lede { margin-block: 1.7rem 0; }
.page-hero .button { justify-self: start; margin-top: 2rem; }
.service-ledger .section-heading { margin-bottom: 1rem; }
.service-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, .75fr) 180px; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; min-height: 330px; border-top: 1px solid var(--line); padding-block: 3rem; scroll-margin-top: 120px; }
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row-title > span { color: var(--rust); font: 400 .72rem var(--font-mono); }
.service-row h3 { margin-block: 1rem; font: 800 clamp(2rem, 4vw, 3.5rem)/1.02 var(--font-display); font-stretch: var(--stretch-display); }
.service-row-title p { color: var(--muted); }
.service-row ul { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.service-row li { position: relative; padding-left: 1.4rem; }
.service-row li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--rust); }
.service-row .text-link { align-self: end; }
.dark-section { color: var(--cream); background: var(--ink); }
.dark-section h2 { color: var(--cream); }
.proof-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.proof-feature > div > p:not(.eyebrow) { max-width: 650px; margin-block: 1.4rem 2rem; color: var(--crossing-ink-2); }
.proof-sequence { margin: 0; padding: 0; list-style: none; }
.proof-sequence li { display: grid; grid-template-columns: 44px 1fr; align-items: center; min-height: 64px; border-top: 1px solid var(--line-dark); font-size: 1.12rem; }
.proof-sequence li:last-child { border-bottom: 1px solid var(--line-dark); }
.proof-sequence span { color: var(--vermilion-ink); font: 400 .7rem var(--font-mono); }
.question-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.question-grid article { min-height: 250px; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: var(--paper-light); }
.question-grid span, .principle-grid span, .work-context article > span { color: var(--rust); font: 400 .72rem var(--font-mono); }
.question-grid h3 { margin: 3.2rem 0 .8rem; }
.question-grid p { color: var(--muted); }

.fact-strip { border-bottom: 1px solid var(--line); background: var(--paper-light); }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.fact-grid div { min-height: 130px; border-right: 1px solid var(--line); padding: 2rem; }
.fact-grid div:first-child { border-left: 1px solid var(--line); }
.fact-grid span, .fact-grid strong { display: block; }
.fact-grid span { color: var(--muted); font: 400 .68rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.fact-grid strong { margin-top: .7rem; color: var(--ink); font-size: 1.16rem; }
.story-section { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr); gap: clamp(3rem, 9vw, 9rem); }
.story-copy { display: grid; gap: 1.3rem; color: var(--muted); font-size: 1.08rem; }
.principles { border-block: 1px solid var(--line); background: var(--paper-light); }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.principle-grid article { min-height: 300px; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; background: var(--paper); }
.principle-grid h3 { margin: 4rem 0 1rem; font: 800 1.8rem/1.05 var(--font-display); font-stretch: var(--stretch-display); }
.principle-grid p { color: var(--muted); }
.about-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: clamp(3rem, 9vw, 9rem); }
.about-proof > div:last-child p { color: var(--muted); }
.about-proof .text-link { margin-top: 1rem; }

.form-section { display: grid; grid-template-columns: minmax(270px, .55fr) minmax(0, 1.1fr); gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.contact-aside { position: sticky; top: 130px; }
.contact-aside h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
@media (min-width: 981px) {
  .contact-aside h2:has(+ .boundary-list) {
    font-size: clamp(2rem, 3.75vw, 3.125rem);
  }
}
.contact-aside dl { display: grid; gap: 0; margin-block: 2rem; }
.contact-aside dl div { border-top: 1px solid var(--line); padding-block: 1rem; }
.contact-aside dl div:last-child { border-bottom: 1px solid var(--line); }
.contact-aside dt { color: var(--muted); font: 400 .68rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.contact-aside dd { margin: .35rem 0 0; color: var(--ink); font-weight: 700; }
.aside-note { color: var(--muted); font-size: .9rem; }
.form-panel { min-width: 0; }
.local-banner { display: flex; gap: 1rem; border: 1px solid var(--warn); border-radius: var(--radius) var(--radius) 0 0; padding: 1rem 1.2rem; color: var(--warn); background: var(--attention-soft); }
.local-banner > span { align-self: flex-start; border: 1px solid var(--warn); border-radius: var(--radius); padding: .2rem .55rem; font: 400 .65rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.local-banner strong { display: block; color: var(--warn-wash); }
.local-banner p { font-size: .88rem; }
form[data-local-form] { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: clamp(1.4rem, 5vw, 3rem); background: var(--paper-light); }
.form-heading { margin-bottom: 2rem; }
.form-heading h2 { max-width: 660px; font-size: clamp(2rem, 4vw, 3.5rem); }
.form-heading > p:last-child { margin-top: 1rem; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
.field { display: grid; gap: .42rem; margin-bottom: 1.25rem; }
.field label { display: flex; align-items: center; min-width: var(--tap-min); min-height: var(--tap-min); color: var(--ink); font-size: .9rem; font-weight: 720; }
.field label:not(.consent-row) > span, .consent-row b { margin-left: .3rem; color: var(--rust); font: 400 .64rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; min-height: var(--tap-min); border: 1px solid var(--frame-strong); border-radius: var(--radius); padding: .75rem .85rem; color: var(--ink); background: var(--surface-well); }
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--crossing-ink-3); opacity: 1; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"], .consent-row:has(input[aria-invalid="true"]) { border-color: var(--danger); background: var(--danger-soft); }
.field-error { color: var(--danger); font-size: .82rem; font-weight: 680; }
.field-error[hidden] { display: none; }
.consent-row { display: flex; align-items: flex-start; gap: .8rem; min-height: 64px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem; cursor: pointer; background: var(--paper); }
.consent-row input { flex: 0 0 auto; width: var(--tap-min); height: var(--tap-min); margin: 0; accent-color: var(--rust); }
.consent-row span { color: var(--text); font-size: .9rem; font-weight: 520; }
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.form-actions > span { color: var(--muted); font-size: .85rem; }
.form-summary { margin-bottom: 1.5rem; border: 1px solid var(--danger); border-left-width: 5px; border-radius: var(--radius-sm); padding: 1rem 1.2rem; color: var(--danger-c); background: var(--danger-soft); }
.form-summary[hidden] { display: none; }
.form-summary ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.form-summary a { display: inline-flex; align-items: center; min-width: var(--tap-min); min-height: var(--tap-min); font-weight: 700; }
.receipt { margin-top: 1.6rem; border: 1px solid var(--ok); border-radius: var(--radius); padding: 1.2rem; background: var(--ok-wash); }
.receipt[hidden] { display: none; }
form[data-submitted="true"] > .form-grid,
form[data-submitted="true"] > .field,
form[data-submitted="true"] > .form-heading,
form[data-submitted="true"] > .contact-requirement,
form[data-submitted="true"] > .form-actions { display: none; }
[data-status-form] { max-width: 760px; }
[data-status-result] { min-height: 3rem; font-weight: 600; padding-block: 1rem; }
.receipt h3 { margin-top: .7rem; color: var(--ok); }
.receipt dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-block: 1rem; }
.receipt dl div { border-top: 1px solid var(--ok); padding-top: .6rem; }
.receipt dt { color: var(--ok); font: 400 .64rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.receipt dd { overflow-wrap: anywhere; margin: .2rem 0 0; color: var(--ok); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 400; }
.receipt > p { color: var(--ok); font-size: .86rem; }
.work-context { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: clamp(3rem, 7vw, 6rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.work-context article { min-height: 260px; padding: clamp(1.5rem, 4vw, 3rem); background: var(--paper-light); }
.work-context h2 { margin-block: 2.5rem .8rem; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.work-context p { color: var(--muted); }
.boundary-list { display: grid; gap: .7rem; margin: 2rem 0; padding: 0; list-style: none; }
.boundary-list li { position: relative; border-top: 1px solid var(--line); padding: .8rem 0 .1rem 1.4rem; }
.boundary-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ready); font-weight: 900; }

.synthetic-band { min-height: 40px; /* not-a-target: a notice strip, no control inside it */  padding: .6rem 1rem; color: var(--on-danger); background: var(--danger-c); text-align: center; font: 400 .68rem/1.35 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.proof-hero { border-bottom: 0; }
.proof-workflow { border-top: 1px solid var(--line); }
.workflow-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.workflow-grid li { min-height: 240px; border: 1px solid var(--line); border-right: 0; padding: 1.3rem; background: var(--paper-light); }
.workflow-grid li:last-child { border-right: 1px solid var(--line); }
.workflow-grid span { color: var(--rust); font: 400 .7rem var(--font-mono); }
.workflow-grid h3 { margin: 3.2rem 0 .7rem; }
.workflow-grid p { color: var(--muted); font-size: .9rem; }
.record-lab { color: var(--cream); background: var(--ink); }
.record-lab h2 { color: var(--cream); }
.record-lab-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .55fr); gap: 3rem; align-items: end; }
.record-lab-head > p { color: var(--crossing-ink-2); }
.lens-tabs { display: flex; flex-wrap: wrap; margin-block: 2.5rem 1rem; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); width: fit-content; overflow: hidden; }
.lens-tabs button { min-height: 48px; border: 0; border-right: 1px solid var(--line-dark); padding: .7rem 1rem; color: var(--crossing-ink-2); background: transparent; cursor: pointer; font-weight: 720; }
.lens-tabs button:last-child { border-right: 0; }
.lens-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--cream); }
/* Crossing: an object is bounded by a 2px frame, not lifted by a shadow. */
.condition-record { overflow: hidden; border: var(--rule-frame) solid var(--frame); border-radius: var(--radius); color: var(--text); background: var(--paper-light); }
.condition-record > header { display: flex; justify-content: space-between; gap: 2rem; padding: clamp(1.3rem, 4vw, 3rem); }
.condition-record header h3 { margin-top: .8rem; font: 500 clamp(2.3rem, 5vw, 4.8rem)/.95 var(--font-serif); }
.condition-record header p { margin-top: .5rem; color: var(--muted); }
.record-state { min-width: 210px; border-left: 1px solid var(--line); padding-left: 1.5rem; }
.record-state span, .record-state strong, .record-state small { display: block; }
.record-state span { color: var(--muted); font: 400 .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.record-state strong { margin-block: .6rem; color: var(--attention); font: 400 1.05rem var(--font-mono); text-transform: uppercase; }
.record-state small { color: var(--muted); }
.record-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.record-metrics div { border-right: 1px solid var(--line); padding: 1.4rem; }
.record-metrics div:last-child { border-right: 0; }
.record-metrics strong, .record-metrics span { display: block; }
.record-metrics strong { color: var(--ink); font: 400 2rem var(--font-mono); }
.record-metrics span { color: var(--muted); font: 400 .65rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.lens-panel { min-height: 240px; padding: clamp(1.3rem, 4vw, 3rem); }
.lens-panel[hidden] { display: none; }
.lens-panel h4 { color: var(--ink); font: 500 2rem var(--font-serif); }
.lens-panel > p { max-width: 760px; margin-block: .6rem 1.2rem; color: var(--muted); }
.lens-panel details { border: var(--rule-hair) dashed var(--frame-strong); border-radius: var(--radius-sm); padding: 1rem; color: var(--crossing-ink-3); font: 400 .75rem var(--font-mono); text-transform: uppercase; }
.lens-panel summary { display: flex; align-items: center; min-width: var(--tap-min); min-height: var(--tap-min); cursor: pointer; }
.lens-panel details p { margin-top: .7rem; color: var(--muted); font: 500 .85rem/1.5 var(--font-sans); text-transform: none; }
.zone-list { display: grid; gap: .5rem; margin-bottom: 1rem; }
.zone-list span { display: flex; justify-content: space-between; border-radius: var(--radius); padding: .7rem .8rem; background: var(--paper-deep); }
.dispatch-line { display: grid; gap: .4rem; border-left: 4px solid var(--rust); padding: 1rem 1.2rem; background: var(--paper-deep); }
.dispatch-line span { color: var(--muted); font: 400 .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.dispatch-line small { color: var(--muted); }
.condition-record > footer { border-top: 1px solid var(--line); padding: 1rem clamp(1.3rem, 4vw, 3rem); color: var(--muted); font-size: .78rem; }
.limits-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); }
.limits-section h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.limits-section ul { display: grid; gap: .8rem; margin: 1.5rem 0 0; padding-left: 1.2rem; color: var(--muted); }

.not-found-main { min-height: 70vh; }
.not-found { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .55fr); gap: clamp(3rem, 8vw, 7rem); align-items: center; min-height: 700px; padding-block: 4rem; }
.error-code { margin-bottom: -1.2rem; color: var(--faint); font: 500 clamp(6rem, 16vw, 13rem)/.8 var(--font-serif); }
.not-found h1 { max-width: 760px; font-size: clamp(3rem, 7vw, 6rem); }
.not-found .hero-lede { margin-top: 1.5rem; }
.route-card { display: grid; overflow: hidden; border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 1.5rem; color: var(--cream); background: var(--ink); box-shadow: none; }
.route-card .status-label { color: var(--crossing-ink-2); }
.route-card > span { margin-bottom: 1rem; }
.route-card a { display: grid; min-height: 74px; border-top: 1px solid var(--line-dark); padding: .8rem 0; text-decoration: none; }
.route-card a:hover strong { color: var(--vermilion-ink); }
.route-card strong { color: var(--cream); }
.route-card small { color: var(--crossing-ink-2); }

.site-footer { color: var(--crossing-ink-2); background: var(--ink); }
.footer-main { display: grid; grid-template-columns: minmax(0, 1.7fr) 1fr 1fr; gap: 3rem; width: min(var(--shell), calc(100% - clamp(2rem, 8vw, 7rem))); margin-inline: auto; padding-block: 4.5rem; }
.brand-inverse { color: var(--cream); }
.footer-brand p { max-width: 390px; margin-top: 1.2rem; color: var(--crossing-ink-2); }
.footer-main h2 { margin-bottom: 1rem; color: var(--crossing-ink-2); font: 400 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.footer-main > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.footer-main a { display: inline-flex; align-items: center; min-width: var(--tap-min); min-height: var(--tap-min); color: var(--cream); }
.footer-main .brand { min-height: 48px; }
.footer-main a:hover { color: var(--vermilion-ink); }
/* :not(.brand-plate) because `.footer-main span` is 0,1,1 and outranks the
   plate rule no matter where either sits - it repainted the mark's letters
   #c9c4b6 on vermilion at 2.71:1. The plate owns its own ink. */
.footer-main span:not(.brand-plate) { color: var(--crossing-ink-2); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; width: min(var(--shell), calc(100% - clamp(2rem, 8vw, 7rem))); margin-inline: auto; border-top: 1px solid var(--line-dark); padding-block: 1.4rem 2rem; color: var(--crossing-ink-2); font-size: .78rem; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 820px; }
  .hero-visual { width: min(620px, 100%); }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .service-card:last-child { grid-column: 1 / -1; min-height: 320px; }
  .proof-bridge, .story-section, .about-proof { grid-template-columns: 1fr; }
  .record-preview { width: min(760px, 100%); }
  .workflow-grid { grid-template-columns: repeat(3, 1fr); }
  .workflow-grid li { border-bottom: 0; }
  .workflow-grid li:nth-child(3) { border-right: 1px solid var(--line); }
  .workflow-grid li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .form-section { grid-template-columns: 1fr; }
  .contact-aside { position: static; max-width: 680px; }
}

@media (max-width: 800px) {
  .utility-bar { justify-content: flex-start; overflow: hidden; white-space: nowrap; }
  .header-inner { gap: .55rem; min-height: 72px; }
  .nav-toggle { display: inline-flex; }
  /* CLOSED BY DEFAULT, not "closed once JavaScript arrives". Scoping this to
     body.is-enhanced meant the FIRST PAINT showed the full unenhanced nav
     beside the closed Menu toggle, and app.js then hid it - a visible content
     flash and a header that changes height on load. The no-JS route is
     preserved by a <noscript> block in the head, which is the only thing that
     can distinguish "JS has not run yet" from "JS will never run".
     Measured at 390x844: Services link visible next to the closed toggle. */
  .site-nav { position: absolute; left: 0; right: 0; top: calc(100% + 1px); display: none; flex-direction: column; align-items: stretch; gap: .25rem; border: var(--rule-frame) solid var(--frame); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: .75rem; background: var(--paper-light); }
  .site-nav[data-open="true"] { display: flex; }
  .nav-link { justify-content: flex-start; padding-inline: 1rem; }
  .nav-cta { justify-content: center; }
  .split-heading, .proof-feature, .record-lab-head { grid-template-columns: 1fr; align-items: start; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card, .service-card:last-child { grid-column: auto; min-height: 330px; }
  .proof-bridge { grid-template-columns: 1fr; }
  .two-path-grid { grid-template-columns: 1fr; }
  .closing-cta .shell { align-items: flex-start; flex-direction: column; justify-content: center; }
  .service-row { grid-template-columns: 1fr; min-height: 0; padding-block: 3rem; }
  .service-row .text-link { align-self: auto; }
  .question-grid, .principle-grid { grid-template-columns: 1fr; }
  .question-grid article, .principle-grid article { min-height: 230px; }
  .fact-grid { grid-template-columns: 1fr; }
  .fact-grid div, .fact-grid div:first-child { min-height: 100px; border: 0; border-bottom: 1px solid var(--line); padding-inline: 0; }
  .work-context { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr 1fr; }
  .workflow-grid li, .workflow-grid li:nth-child(3) { border: 1px solid var(--line); border-bottom: 0; }
  .workflow-grid li:nth-child(even) { border-left: 0; }
  .workflow-grid li:last-child { border-bottom: 1px solid var(--line); }
  .limits-section { grid-template-columns: 1fr; }
  .not-found { grid-template-columns: 1fr; min-height: auto; }
  .route-card { width: min(600px, 100%); }
  .footer-main { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (max-width: 600px) {
  .shell, .footer-main, .footer-bottom { width: min(100% - 2rem, var(--shell)); }
  .utility-bar { justify-content: center; }
  .utility-rule, .utility-service { display: none; }
  .brand { gap: .55rem; }
  .brand img, .brand-plate { width: 38px; height: 38px; font-size: 13px; }
  .hero { padding-block: 4rem; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .brief-head, .record-top { align-items: flex-start; flex-direction: column; }
  .visual-index { display: none; }
  .record-preview dl, .record-metrics { grid-template-columns: 1fr 1fr; }
  .record-preview dl div:nth-child(2), .record-metrics div:nth-child(2) { border-right: 0; }
  .record-preview dl div:nth-child(-n+2), .record-metrics div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .page-hero .shell { min-height: 510px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .local-banner { align-items: flex-start; flex-direction: column; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .receipt dl { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-grid li, .workflow-grid li:nth-child(even), .workflow-grid li:nth-child(3) { border: 1px solid var(--line); border-bottom: 0; }
  .condition-record > header { flex-direction: column; }
  .record-state { width: 100%; border-top: 1px solid var(--line); border-left: 0; padding: 1rem 0 0; }
  .lens-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .lens-tabs button { border: 1px solid var(--line-dark); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .button, .status-chip, .brief-card, .service-card, .condition-record, .route-card { border: 1px solid ButtonText; }
  .readiness-bar i, .service-row li::before { background: Highlight; }
}

/* Crossing R6: calm paper, hard geometry, paired primary language. */
.site-header { background: var(--surface); backdrop-filter: none; }
.brief-card, .record-preview, .route-card { box-shadow: none; }
.title-translation {
  display: block;
  max-width: 30ch;
  margin-top: .8rem;
  color: var(--crossing-ink-3);
  font: 400 clamp(.82rem, 1.25vw, 1rem)/1.45 var(--font-mono);
  letter-spacing: .04em;
}
.button-primary > span { display: grid; gap: .16rem; text-align: left; }
.button-primary small { color: currentColor; font: 400 .67rem/1.1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.status-chip::before { margin-right: .42rem; font-size: .82em; line-height: 1; }
.status-ready::before { content: "●"; }
.status-attention::before { content: "▲"; }
.status-blocked::before, .status-error::before { content: "✕"; }
.status-pending::before { content: "○"; }

@media (max-width: 600px) {
  .button { min-height: 56px; }
  .button-primary > span { text-align: center; }
}