/* ==========================================================================
   INTERMEW — the public site (intermew.com)
   2026-09-11 · static, no framework, no build step, no third-party request.

   DIRECTION (locked before any markup, see site/README.md):
     graphite drench + one safety-amber signal · brand register · the RACK.

   Tokens are lifted verbatim from ~/Desktop/intermew-brand-2026-07-27/tokens.css
   (Direction 05 · INDUSTRIAL, 2026-07-28, which supersedes the Field Manual token
   block in brand-system.md §10). They are INLINED rather than @import-ed because
   the site ships alone: nothing here may depend on a file that lives on a laptop.

   TWO SURFACES, ONE BRAND — the token file's own rule, applied per page:
     .im-dark   graphite  — the product surfaces: / and /signup
     .im-light  paper     — anything that is, or becomes, a printed document:
                            /pricing (a price sheet is handed across a table),
                            /terms and /privacy.

   THE SIGNAL RULE. Amber marks exactly one class of thing per view: the live one,
   the changed one, the one being asked for. The wordmark's terminal stroke is
   identity, not status, and is the one standing exception.

   CONTRAST. Every pair below was measured (WCAG 2.1 relative luminance) on
   2026-09-11, not assumed; the floor across the whole site is 4.59:1.
   ========================================================================== */

/* ── LAYER 1 · PRIMITIVES ─────────────────────────────────────────────── */
:root {
  --im-graphite-900: #141618;
  --im-graphite-800: #1E2023;
  --im-graphite-700: #26282B;
  --im-graphite-600: #2E3135;
  --im-graphite-500: #383B40;
  --im-graphite-400: #6E747A;
  --im-graphite-300: #8B9096;
  --im-graphite-200: #A8ADB3;
  --im-graphite-100: #F5F3EF;

  --im-paper-000: #FFFFFF;
  --im-paper-050: #F4F6F7;
  --im-paper-100: #E9ECEE;
  --im-paper-200: #D6DADD;
  --im-paper-300: #B4BABE;
  --im-paper-600: #5B6469;
  --im-paper-800: #333A3E;
  --im-paper-900: #16191B;

  --im-amber:      #F5A623;
  --im-amber-lift: #FFC15E;
  --im-amber-deep: #8A5200;
  --im-amber-wash: #FDF3E0;

  --im-halt:       #C4483A;
  --im-halt-deep:  #9A2E22;

  --im-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --im-font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --im-font-mono:    "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --im-t--2: 0.625rem;
  --im-t--1: 0.75rem;
  --im-t-0:  0.875rem;
  --im-t-1:  1rem;
  --im-t-2:  1.25rem;
  --im-t-3:  clamp(1.5rem, 2.2vw, 1.75rem);
  --im-t-4:  clamp(1.9rem, 3.2vw, 2.4rem);
  --im-t-5:  clamp(2.4rem, 4.6vw, 3.4rem);
  --im-t-6:  clamp(2.6rem, 6.1vw, 4.75rem);

  --im-lh-tight:   1.04;
  --im-lh-display: 1.08;
  --im-lh-body:    1.55;
  --im-lh-dark:    1.62;

  --im-ls-display: -0.035em;
  --im-ls-mono:     0.08em;
  --im-ls-label:    0.16em;

  --im-s-1: 0.25rem;  --im-s-2: 0.5rem;   --im-s-3: 0.75rem;
  --im-s-4: 1rem;     --im-s-5: 1.5rem;   --im-s-6: 2rem;
  --im-s-7: 3rem;     --im-s-8: 4rem;     --im-s-9: 6rem;

  --im-radius: 2px;

  --im-rule-hair:  1px;
  --im-rule-body:  2px;
  --im-rule-heavy: 4px;

  --im-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --im-dur-fast:  120ms;
  --im-dur-base:  220ms;
  --im-dur-slow:  420ms;

  --im-z-base: 0; --im-z-sticky: 200; --im-z-modal: 400; --im-z-toast: 500;

  /* the site's own knobs */
  --shell:     1180px;
  --gutter:    clamp(1rem, 4vw, 3rem);
  --rack-xl:   34px;
  --rack-md:   24px;
  --rack-xs:   8px;
}

/* ── LAYER 2 · SEMANTIC ROLES ─────────────────────────────────────────── */
.im-dark {
  --bg:           var(--im-graphite-800);
  --bg-deep:      var(--im-graphite-900);
  --surface:      var(--im-graphite-700);
  --raised:       var(--im-graphite-600);
  --rule:         var(--im-graphite-500);
  --rule-soft:    var(--im-graphite-600);
  --ink:          var(--im-graphite-100);   /* 14.73:1 */
  --ink-body:     var(--im-graphite-200);   /*  7.23:1 */
  --ink-muted:    var(--im-graphite-300);   /*  5.08:1 */
  --signal:       var(--im-amber);
  --signal-text:  var(--im-amber);          /*  8.06:1 */
  --signal-hover: var(--im-amber-lift);
  --on-signal:    var(--im-graphite-800);   /*  8.06:1 on the amber fill */
  --signal-wash:  var(--im-graphite-600);
  --halt:         #E0705F;                  /*  5.17:1 */
  --line-height:  var(--im-lh-dark);
  color-scheme: dark;
}

.im-light {
  --bg:           var(--im-paper-050);
  --bg-deep:      var(--im-paper-100);
  --surface:      var(--im-paper-000);
  --raised:       var(--im-paper-100);
  --rule:         var(--im-paper-200);
  --rule-soft:    var(--im-paper-100);
  --ink:          var(--im-paper-900);      /* 16.29:1 */
  --ink-body:     var(--im-paper-800);      /* 10.67:1 */
  --ink-muted:    var(--im-paper-600);      /*  5.58:1 */
  --signal:       var(--im-amber);          /* FILLS AND RULES ONLY — 2.1:1 as ink */
  --signal-text:  var(--im-amber-deep);     /*  5.89:1 */
  --signal-hover: var(--im-amber-deep);
  --on-signal:    var(--im-paper-900);      /*  8.71:1 on the amber fill */
  --signal-wash:  var(--im-amber-wash);
  --halt:         var(--im-halt-deep);      /*  6.95:1 */
  --line-height:  var(--im-lh-body);
  color-scheme: light;
}

/* ── RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* `scroll-padding-top` is the one line that keeps the STICKY masthead from eating the
   top of whatever an in-page jump lands on. Without it "Skip to content" — a keyboard
   user's very first press on every page — scrolls #main to y=0 and the header covers its
   first 64px (58px under 560px), which is the heading they pressed the link to reach
   (measured in Chrome, 2026-09-12). Same for any /pricing/#section link. The value is the
   masthead's own height: min-height 62px + its 2px bottom rule, plus a line of air. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(62px + var(--im-rule-body) + var(--im-s-4));
}
body, h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--im-font-body);
  font-size: var(--im-t-1);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* the rack is the only wide object and it clips itself */
}

/* Focus is a 2px amber square, offset — never the UA halo, never removed.
   Amber on both surfaces clears 3:1 against its own ground as a graphic. */
:focus-visible {
  outline: var(--im-rule-body) solid var(--im-amber);
  outline-offset: 2px;
}
.im-light :focus-visible { outline-color: var(--im-amber-deep); }

::selection { background: var(--im-amber); color: var(--im-graphite-900); }

/* ── TYPE ──────────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--im-font-display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: var(--im-ls-display);
  line-height: var(--im-lh-display);
  text-wrap: balance;
}
h1 { font-size: var(--im-t-6); line-height: var(--im-lh-tight); }
h2 { font-size: var(--im-t-5); }
h3 { font-size: var(--im-t-3); letter-spacing: -0.03em; }
p  { text-wrap: pretty; }
strong, b { color: var(--ink); font-weight: 700; }

/* THE MONO RULE — if changing one character changes a fact, it is mono. */
.mono, .num, code, kbd, th, td.num {
  font-family: var(--im-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.label {
  font-family: var(--im-font-mono);
  font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 400;
}
.lede {
  font-size: var(--im-t-2);
  color: var(--ink-body);
  max-width: 46ch;
}
.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--im-s-4); }
.prose a { color: var(--signal-text); }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--signal-text); }

/* ── SHELL + SECTIONS ──────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band { padding-block: clamp(3rem, 7vw, 6rem); }
.band--deep { background: var(--bg-deep); }
.band + .band { border-top: var(--im-rule-hair) solid var(--rule-soft); }

/* A section head is a heading with its spec note on the SAME line and a heavy
   rule beneath — deliberately not the tiny tracked label ABOVE every heading,
   which is the tell this brand's plate system is often mistaken for. */
.head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--im-s-3);
  padding-bottom: var(--im-s-3);
  border-bottom: 3px solid var(--ink);
}
.head__note { color: var(--ink-muted); }
.head + * { margin-top: var(--im-s-6); }

/* ── THE PLATE — figure header, mono, above a rule that spans the figure ── */
.plate { display: block; }
.plate__mark {
  display: flex; justify-content: space-between; gap: var(--im-s-4);
  font-family: var(--im-font-mono);
  font-size: var(--im-t--2);
  letter-spacing: var(--im-ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--ink);
}
.plate__mark--free { margin-bottom: var(--im-s-4); }
@media (max-width: 27rem) {
  /* Two mono labels on one line is 44 characters; below this they stack rather than
     squeeze the date to three glyphs a line. */
  .plate__mark--free { display: block; }
  .plate__mark--free span + span { display: block; margin-top: 4px; }
}

.plate__caption {
  margin-top: var(--im-s-3);
  font-family: var(--im-font-mono);
  font-size: var(--im-t--1);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
/* The mono rule is "if changing one character changes a fact". A count caption is
   mono; a sentence under a figure is prose, and three lines of tracked mono prose
   is the costume version of technical. */
.figure-note {
  margin-top: var(--im-s-3);
  max-width: 62ch;
  font-size: var(--im-t-0);
  color: var(--ink-muted);
}

/* ── THE RACK — the signature element ─────────────────────────────────────
   A horizontal register of uniform vertical cells mounted on a rule. Cells
   share a 1px division; the gap is 0 because it is a rack, not a row of cards.
   Never drawn at more cells than the fleet actually has (brand §9.4) — the
   count in the caption is the count of cells, and both are dated.
   ────────────────────────────────────────────────────────────────────────── */
.rack { margin-top: var(--im-s-5); }
.rack__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rack-cell, var(--rack-md));
  /* fit-content, not 100%: a rack is as wide as its cells. Left at auto width the
     outer border kept running past the last cell and the plate numbers below drifted
     out from under it (caught in the browser, 2026-09-11). */
  width: fit-content;
  max-width: 100%;
  /* The tracks are a fixed cell width, so at a narrow viewport the last cells
     would escape the box and push documentElement.scrollWidth past the screen —
     a sideways scroll with nothing visible in it (measured at 400px: 407 vs 385,
     2026-09-11). --rack-xl drops to 22px below 560px so all 15 still fit; this
     is the guard for anything narrower still. */
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background: var(--surface);
}
.rack__cell {
  aspect-ratio: 1 / 2.16;
  border-left: var(--im-rule-hair) solid var(--rule);
  background: var(--surface);
}
.rack__cell:first-child { border-left: 0; }
/* HELD is the only fill the public rack uses, and every cell carries it: the rack on
   this site draws the RULE (one account bound to one device), not a census, so no cell
   may differ from its neighbours — a cell with its own state is a headcount drawn
   instead of written. The four state fills below belong to the brand kit and to any
   surface that reads a LIVE fleet (an operator console); they are not for a static page.
   tests/site/test_site_pages.py enforces that. */
.rack__cell--held    { background: var(--ink); }
.rack__cell--driven  { background: var(--ink); }
.rack__cell--posting { background: var(--signal); }
.rack__cell--mews {
  background:
    repeating-linear-gradient(45deg,
      var(--im-graphite-400) 0 1px, transparent 1px 3px),
    var(--surface);
}
.rack__cell--dead {
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px), var(--im-graphite-400) calc(50% - 0.5px),
      var(--im-graphite-400) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--surface);
}
/* The rack is always MOUNTED, never floating: the baseline rule runs the full
   width of the container, not just the strip. */
.rack__mount {
  height: 1.5px;
  background: var(--ink);
  transform-origin: left center;
}
.rack__plates {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rack-cell, var(--rack-md));
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  margin-top: 5px;
  font-family: var(--im-font-mono);
  font-size: var(--im-t--2);
  letter-spacing: 0;
  color: var(--ink-muted);
}
.rack--xl { --rack-cell: var(--rack-xl); }
.rack--xs { --rack-cell: var(--rack-xs); }
.rack--xs .rack__strip { border-width: 1px; }
.rack--xs .rack__cell { aspect-ratio: 1 / 2.16; }

/* One orchestrated load moment, and it is the rack being mounted: the baseline
   rule draws left to right, once. Nothing about the fleet's state animates —
   brand §9.6 forbids a rack that animates for its own sake, because that claims
   activity that has not happened. */
@media (prefers-reduced-motion: no-preference) {
  .rack__mount { animation: mount var(--im-dur-slow) var(--im-ease) both; }
}
@keyframes mount { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rack-legend {
  display: flex; flex-wrap: wrap; gap: var(--im-s-2) var(--im-s-5);
  margin-top: var(--im-s-4);
  font-family: var(--im-font-mono);
  font-size: var(--im-t--1);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.rack-legend li { display: flex; align-items: center; gap: 0.5em; }
.rack-legend i {
  width: 9px; height: 19px; display: block; flex: none;
  border: 1px solid var(--rule); font-style: normal;
}
.rack-legend .k-driven  { background: var(--ink); border-color: var(--ink); }
.rack-legend .k-dead    { background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--im-graphite-400) calc(50% - 0.5px),
    var(--im-graphite-400) calc(50% + 0.5px), transparent calc(50% + 0.5px)), var(--surface); }
.rack-legend .k-mews    { background:
    repeating-linear-gradient(45deg, var(--im-graphite-400) 0 1px, transparent 1px 3px), var(--surface); }
.rack-legend .k-empty   { background: var(--surface); }

/* ── THE THREE MATURITY TAGS (brand §7) ───────────────────────────────────
   Fill, border and GLYPH all differ, so the set survives a black-and-white
   photocopy and a deuteranope reads it without the colour. The glyph is drawn
   in CSS rather than set as U+25CF/U+25D0/U+25CB: the two self-hosted families
   are the only faces on this site, and a geometric-shapes glyph that falls back
   to a system font would break the one channel that must never fail.
   ────────────────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--im-font-mono);
  font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-mono);
  text-transform: uppercase;
  padding: 0.18em 0.55em;
  border-radius: 0;
  white-space: nowrap;
  vertical-align: baseline;
}
.tag::before {
  content: ""; width: 0.62em; height: 0.62em; border-radius: 50%; flex: none;
}
.tag--live {
  background: var(--signal); color: var(--on-signal);
  border: 1.5px solid var(--signal); font-weight: 600;
}
.tag--live::before { background: currentColor; }          /* ● filled disc */
.tag--built {
  color: var(--ink); border: 1.5px solid var(--ink); font-weight: 500;
}
.tag--built::before {                                      /* ◐ half filled */
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
  box-shadow: inset 0 0 0 1px currentColor;
}
.tag--roadmap {
  color: var(--ink-muted); border: 1px dashed var(--ink-muted); font-weight: 400;
}
.tag--roadmap::before { box-shadow: inset 0 0 0 1.2px currentColor; }  /* ○ open */

/* ── BUTTONS — square, 2px, no shadow, no gradient ────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7em 1.35em;
  font-family: var(--im-font-mono);
  font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-mono);
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  border: var(--im-rule-body) solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--im-dur-fast) var(--im-ease),
              color var(--im-dur-fast) var(--im-ease),
              border-color var(--im-dur-fast) var(--im-ease);
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--signal {
  background: var(--signal); border-color: var(--signal); color: var(--on-signal);
}
.btn--signal:hover { background: var(--signal-hover); border-color: var(--signal-hover); color: var(--on-signal); }
.im-light .btn--signal:hover { background: var(--im-amber-lift); border-color: var(--im-amber-lift); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 1; border-color: var(--rule); color: var(--ink-muted);
  background: transparent; cursor: not-allowed;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--im-s-3); }

/* ── MASTHEAD ──────────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: var(--im-z-sticky);
  background: var(--bg);
  border-bottom: var(--im-rule-body) solid var(--ink);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--im-s-4);
  min-height: 62px;
}
/* THE WORDMARK. One wordmark, and it says Intermew. The terminal stroke of the
   W takes --signal-text on BOTH surfaces (brand tokens §THE MARK) — bright amber
   on graphite is 8.06:1, and on paper it must be the deep amber or the two
   yellows in the lockup disagree. There is no module logo and never will be. */
.wm {
  font-family: var(--im-font-display);
  font-weight: 800; font-size: 1.3rem; letter-spacing: -0.045em;
  color: var(--ink); text-decoration: none; line-height: 1;
}
.wm i { font-style: normal; color: var(--signal-text); }
.wm:hover { color: var(--ink); }

.nav { display: flex; align-items: center; gap: clamp(0.85rem, 2.4vw, 1.75rem); }
.nav a {
  font-family: var(--im-font-mono);
  font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-mono);
  text-transform: uppercase;
  color: var(--ink-body);
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: var(--im-rule-body) solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }
.nav .btn { min-height: 38px; padding: 0.45em 0.9em; border-width: var(--im-rule-body); }
.nav a.btn--signal { color: var(--on-signal); }
.nav a.btn--signal:hover { color: var(--on-signal); border-bottom-color: var(--signal-hover); }
.nav .btn:hover { border-bottom-color: currentColor; }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.hero h1 { max-width: 17ch; }
.hero__lede { margin-top: var(--im-s-5); max-width: 52ch; font-size: var(--im-t-2); }
.hero .btn-row { margin-top: var(--im-s-6); }

/* ── TABLES — the spec-sheet cadence ───────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
/* Below ~34rem a three-column spec table stops being a table and becomes six
   wrapped words per cell. Give it a floor and let its own wrapper scroll — the
   page body still must not (see the 400px block at the end of this file). */
.tbl-wrap table { min-width: 34rem; }
/* A two-column plate has nothing to line up against a 34rem floor. On the Fleet ladder
   — a band and a price, nothing else — that floor pushed the PRICE off a 400px screen:
   it scrolled back, but a client should never have to drag a price into view on the one
   page that exists to show prices. Proved in a real browser at 400×860. */
.tbl-wrap table.tbl--pair { min-width: 20rem; }
/* Plate 02 is the thing on this page someone screenshots, and at 390px its third
   column — the one that says "Buy it today" / "Not sold. No date promised." — sat
   entirely outside the viewport behind a scroller with no affordance: tags with no
   consequences attached. Below 35rem the table stops being a table and becomes a
   stack of labelled rows, which is what a three-column spec sheet is on a phone. */
@media (max-width: 37rem) {
  .tbl-wrap table.tbl--state { min-width: 0; }
  .tbl--state thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl--state tr { display: block; padding-block: var(--im-s-4); border-bottom: var(--im-rule-hair) solid var(--rule); }
  .tbl--state tr:first-child { border-top: var(--im-rule-body) solid var(--ink); }
  .tbl--state th, .tbl--state td { display: block; border: 0; padding: 0; }
  /* `tbody tr:last-child .rowhead` closes the table with a heavy rule and outguns a
     one-class reset, so the last row drew a line between its own name and its tag. */
  .tbl--state tbody tr:last-child .rowhead,
  .tbl--state tbody tr:last-child td { border-bottom: 0; }
  .tbl--state tbody tr:last-child { border-bottom: var(--im-rule-body) solid var(--ink); }
  .tbl--state .rowhead {
    font-family: var(--im-font-body); font-size: var(--im-t-1);
    letter-spacing: 0; text-transform: none; color: var(--ink);
  }
  .tbl--state td { margin-top: var(--im-s-3); }
}
caption {
  text-align: left; padding-bottom: var(--im-s-3);
  font-family: var(--im-font-mono); font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-label); text-transform: uppercase; color: var(--ink-muted);
}
th {
  font-family: var(--im-font-mono); font-size: var(--im-t--2);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted);
  text-align: left; font-weight: 400; vertical-align: bottom;
  padding: 0 var(--im-s-3) var(--im-s-2) 0;
  border-bottom: var(--im-rule-body) solid var(--ink);
}
th.r, td.r { text-align: right; padding-right: 0; padding-left: var(--im-s-4); }
td {
  padding: var(--im-s-3) var(--im-s-3) var(--im-s-3) 0;
  border-bottom: var(--im-rule-hair) solid var(--rule);
  vertical-align: top; font-size: var(--im-t-0); color: var(--ink-body);
}
td.r { font-family: var(--im-font-mono); font-variant-numeric: tabular-nums;
       color: var(--ink); letter-spacing: -0.03em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: var(--im-rule-body) solid var(--ink); }
td strong { color: var(--ink); }

/* one highlighted row, and only ever one */
tr.mark td { background: var(--signal-wash); }

/* ── NOTES / CALLOUTS — full 1px border, never a side stripe ───────────── */
.note {
  border: var(--im-rule-hair) solid var(--rule);
  background: var(--surface);
  padding: var(--im-s-5);
}
.note--signal { border: var(--im-rule-body) solid var(--signal); background: var(--signal-wash); }
.im-dark .note--signal { background: var(--im-graphite-700); }
.note h3 { font-size: var(--im-t-2); margin-bottom: var(--im-s-2); }
.note p { color: var(--ink-body); font-size: var(--im-t-0); }
.note p + p { margin-top: var(--im-s-3); }

/* ── FORMS ─────────────────────────────────────────────────────────────── */
.field { display: block; margin-top: var(--im-s-5); }
/* first-child only: the hint is also a direct <span> of the label, and styling
   every span here turned three lines of help text into tracked uppercase mono —
   all-caps body copy, which the brand bans outright. */
.field > span:first-child {
  display: block; margin-bottom: var(--im-s-2);
  font-family: var(--im-font-mono); font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-mono); text-transform: uppercase; color: var(--ink-body);
}
.field input, .field select {
  width: 100%; min-height: 48px;
  padding: 0.6em 0.75em;
  background: var(--bg-deep);
  border: var(--im-rule-hair) solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  font-size: var(--im-t-1);
}
.im-light .field input, .im-light .field select { background: var(--surface); }
/* Placeholder ink is the muted role, not the UA's near-invisible grey: 5.08:1
   on graphite, 5.58:1 on paper. */
.field input::placeholder { color: var(--ink-muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible { border-color: var(--signal); }
.field__hint {
  display: block; margin-top: var(--im-s-2);
  font-family: var(--im-font-body); font-size: var(--im-t-0);
  letter-spacing: 0; text-transform: none; color: var(--ink-muted);
  line-height: 1.5;
}
.field--num input { font-family: var(--im-font-mono); font-variant-numeric: tabular-nums; }

/* `min-width: 0` is the one that is not cosmetic. A fieldset's UA default is
   `min-width: min-content`, so a fieldset containing a table refuses to shrink below that
   table's widest row — at 400px the Reach plate on /signup/continue/ made the whole
   DOCUMENT 560px wide and the page scrolled sideways, which the tbl-wrap's own
   overflow-x could never fix because the fieldset never let it get narrow enough to
   scroll (2026-09-12). */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
/* A text input that runs the full 1084px of the shell is a target, not a field:
   the eye has to travel the whole width to find the caret. The measure is the
   same 34rem the first step uses. */
fieldset .field { max-width: 34rem; }
/* The UA checkbox is system blue, which is the one hue this brand does not own. */
.check input { accent-color: var(--signal); }

/* the step register down the side of /signup */
.steps { display: flex; flex-wrap: wrap; gap: 0; border: var(--im-rule-hair) solid var(--rule); }
.steps li {
  flex: 1 1 8rem; padding: var(--im-s-3) var(--im-s-4);
  font-family: var(--im-font-mono); font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-mono); text-transform: uppercase;
  color: var(--ink-muted);
  border-left: var(--im-rule-hair) solid var(--rule);
}
.steps li:first-child { border-left: 0; }
.steps li[aria-current="step"] { background: var(--signal); color: var(--on-signal); font-weight: 600; }
.steps li[data-done="1"] { color: var(--ink); }

/* [hidden] MUST WIN, on anything. The attribute's own UA rule is `display: none` at the
   lowest possible specificity, so ANY class that sets a display beats it — `.field`
   declares `display: block`, which is how the TOTP code field on /signup/continue/ sat
   visible on a page that had never asked for a code (2026-09-12). The panels and the
   messages already carried their own copy of this; one rule covers every element that
   will ever be toggled with `el.hidden`. */
[hidden] { display: none !important; }

.panel { margin-top: var(--im-s-7); }

.total {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: var(--im-s-4);
  margin-top: var(--im-s-6); padding-top: var(--im-s-4);
  border-top: 3px solid var(--ink);
}
.total dt { font-family: var(--im-font-mono); font-size: var(--im-t--1);
            letter-spacing: var(--im-ls-label); text-transform: uppercase; color: var(--ink-muted); }
.total dd { font-family: var(--im-font-mono); font-variant-numeric: tabular-nums;
            font-size: var(--im-t-4); color: var(--ink); letter-spacing: -0.03em; }

.msg {
  margin-top: var(--im-s-5); padding: var(--im-s-4);
  border: var(--im-rule-body) solid var(--rule);
  font-size: var(--im-t-0);
}
.msg[hidden] { display: none !important; }
.msg--err { border-color: var(--halt); color: var(--halt); }
.msg--ok  { border-color: var(--signal); color: var(--ink); }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.foot { border-top: var(--im-rule-body) solid var(--ink); padding-block: var(--im-s-7) var(--im-s-6); }
.foot__grid { display: grid; gap: var(--im-s-6); }
@media (min-width: 720px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot h4 { font-family: var(--im-font-mono); font-size: var(--im-t--1);
           letter-spacing: var(--im-ls-label); text-transform: uppercase;
           color: var(--ink-muted); font-weight: 400; margin-bottom: var(--im-s-3); }
.foot ul li + li { margin-top: var(--im-s-2); }
.foot a { color: var(--ink-body); text-decoration: none; font-size: var(--im-t-0); }
.foot a:hover { color: var(--signal-text); text-decoration: underline; }
.foot__fine {
  margin-top: var(--im-s-7); padding-top: var(--im-s-4);
  border-top: var(--im-rule-hair) solid var(--rule);
  font-family: var(--im-font-mono); font-size: var(--im-t--2);
  letter-spacing: 0.06em; color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: var(--im-s-3) var(--im-s-5);
  justify-content: space-between;
}

/* ── SKIP LINK ─────────────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--im-z-toast);
  background: var(--signal); color: var(--on-signal);
  padding: var(--im-s-3) var(--im-s-4);
  font-family: var(--im-font-mono); font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-mono); text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: var(--gutter); top: var(--im-s-2); }

/* ── 400px ─────────────────────────────────────────────────────────────────
   The narrow rule for this site is that all fifteen cells stay on screen. A
   rack that clips at the right edge reads as a smaller fleet than we own, which
   is the one thing the element may never do (brand §9.4) — so the cell shrinks
   instead. 22px × 15 + the 3px outer edge = 333px, inside the 353px column a
   400px viewport leaves. Everything else stacks.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --rack-xl: 22px; }
  .masthead__in { min-height: 56px; }
  html { scroll-padding-top: calc(56px + var(--im-rule-body) + var(--im-s-4)); }
  .nav { gap: 0.6rem; }
  .nav a { font-size: 0.6875rem; }
  .hero h1 { max-width: none; }
  .btn-row .btn { flex: 1 1 100%; }
  .foot__fine { flex-direction: column; }
}

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

/* ── PRINT — /pricing, /terms and /privacy get printed ─────────────────── */
@media print {
  .masthead, .foot, .btn-row, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── UTILITIES — a deliberately short list; anything used twice earns a name ─ */
.stack-4 { margin-top: var(--im-s-4); }
.stack-5 { margin-top: var(--im-s-5); }
.stack-6 { margin-top: var(--im-s-6); }
.stack-7 { margin-top: var(--im-s-7); }
.wide    { max-width: 64ch; }
.narrow  { max-width: 38ch; }
.dim     { color: var(--ink-muted); }
.sm      { font-size: var(--im-t-0); }

/* A row header inside a spec table reads as prose, not as a column header:
   same scope="row" semantics, none of the mono/uppercase column treatment. */
.rowhead {
  font-family: var(--im-font-body); font-size: var(--im-t-0); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink); text-align: left;
  padding: var(--im-s-3) var(--im-s-3) var(--im-s-3) 0;
  border-bottom: var(--im-rule-hair) solid var(--rule);
  vertical-align: top;
}
tbody tr:last-child .rowhead { border-bottom: var(--im-rule-body) solid var(--ink); }

.rack--foot { max-width: 200px; }

/* stacked notes — a vertical run of bordered blocks, never a card grid */
.notes { display: grid; gap: var(--im-s-5); }
.measure    { max-width: 70ch; }
.measure-sm { max-width: 60ch; }
.form-col   { max-width: 34rem; }
.page       { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); }
.title-w    { max-width: 20ch; }

/* a checkbox reads as a sentence, not as a form label: the box sits with the
   text rather than above it, and the text keeps body case and tracking. */
.check { display: flex; gap: 0.75rem; align-items: flex-start; }
.check input { width: 22px; min-height: 22px; flex: none; margin-top: 0.2rem; }
.check > span:last-child {
  text-transform: none; letter-spacing: 0; font-family: var(--im-font-body);
  margin: 0; color: var(--ink-body);
}

/* the generated legal pages */
.rule-hr { border: 0; border-top: var(--im-rule-body) solid var(--ink); margin: 2rem 0; }
.bullets { list-style: disc; padding-left: 1.25rem; }
.bullets li + li { margin-top: var(--im-s-2); }
/* Inside a legal document the top heading is a clause number, not a hero; the
   page's own <h1> already carries the display size. */
.prose h2 { font-size: var(--im-t-3); }
.prose h3 { font-size: var(--im-t-2); }
.prose h4 { font-size: var(--im-t-1); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--im-s-6); margin-bottom: var(--im-s-3); }
.prose blockquote, .prose ul, .prose hr { margin-top: var(--im-s-4); }
.prose ul + p, .prose blockquote + p { margin-top: var(--im-s-4); }

/* A heading the page does not need to draw, because the figure's own plate mark
   already says it. Removing the heading entirely would leave the section
   unlabelled in the landmark tree; drawing it twice is the eyebrow tell. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HOME PAGE, 2026-09-12 — SHOW THE PRODUCT, DON'T DESCRIBE IT.

   The skeleton changed; the direction did not. Graphite ground, paper ink,
   amber as a FILL only, Archivo with Martian Mono on every figure and label,
   2px radius, rules instead of rounded cards, the plate language and the three
   maturity tags. What is new is that the page now opens with four screenshots
   of the running software instead of four paragraphs about it, which is the one
   thing the old page did not do: a visitor reached a picture of the thing they
   were buying about 2,600px down, and only if they kept scrolling.

   Everything below is home-page furniture. Nothing here is loaded by /pricing,
   /signup or the legal pages — they are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────────────────────────
   Three true clauses, hard-broken. The ceiling is 2.7rem rather than the
   --im-t-6 the old one-sentence headline used: the longest line is 48
   characters and at 4.75rem it would be 1.7 screens wide. `max-width: none`
   undoes the 17ch measure, which exists for a headline that WRAPS; this one
   sets its own lines. */
.hero h1 { font-size: clamp(1.4rem, 4.9vw, 2.7rem); max-width: none; }
.hero__lede { max-width: 56ch; }

/* ── THE BAYS — four phone frames, four real screens ───────────────────────
   OnlyFlow's pill-and-line motif, said in this brand's language: the pill is a
   square mono plate and the line is the hairline the rack is always mounted on.

   THE COLUMN COUNT IS A LEGIBILITY BUDGET, not a taste. A 390px screen captured
   at dsf 2 and drawn 231px wide is 30% of capture; its body type lands at 4px
   and the frame is texture rather than evidence. Four across needs about
   1,120px of shell before that stops being true of the mono figures, two across
   needs 560, and BELOW 560 IT IS ONE — a phone visitor was getting 155px-wide
   frames, 20% of capture, which is the worst case on the page and the one this
   rack exists for. One column at 390 is ~92%, which is the screen at its own
   size. Every bay is also a link to its own full-size frame, which is what
   makes the four-across rack honest on a desktop. */
.bays-band { padding-block: 0 clamp(2.5rem, 6vw, 4rem); }
.bays {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2rem);
}
@media (min-width: 560px) { .bays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .bays { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bay { min-width: 0; }
/* One column means one WIDE column; a single 900px-tall phone is not a hero. */
@media (max-width: 559px) { .bay { max-width: 22rem; margin-inline: auto; } }
.bay__frame { display: block; color: inherit; text-decoration: none; }
.bay__open {
  display: block; margin-top: var(--im-s-3);
  font-family: var(--im-font-mono); font-size: var(--im-t--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.bay__open::after { content: " \2197"; }
.bay__frame:hover .bay__open, .bay__frame:focus-visible .bay__open { color: var(--signal-text); }
.bay__frame:hover .phone, .bay__frame:focus-visible .phone { border-color: var(--signal); }
.bay__mark {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--im-s-3);
}
.bay__mark span {
  flex: none;
  border: 1px solid var(--rule);
  padding: 0.2em 0.55em;
  font-family: var(--im-font-mono);
  font-size: var(--im-t--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.bay__mark::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); }
.bays__say {
  margin-top: var(--im-s-5);
  max-width: 62ch; font-size: var(--im-t-0); color: var(--ink-muted);
}

/* ── THE PHONE FRAME ───────────────────────────────────────────────────────
   Squarer than the handset it stands for, on purpose: 2px is the maximum radius
   anywhere in this system, and a 44px Apple corner inside a page of square rules
   would read as a sticker dropped onto the layout. A 3px earpiece slot and a
   bottom bar are the whole ornament — no notch, no island, no gloss. */
.phone {
  display: block;
  background: var(--im-graphite-900);
  border: 1.5px solid var(--rule);
  border-radius: var(--im-radius);
  padding: 8px 7px;
}
.phone::before, .phone::after {
  content: ""; display: block; margin-inline: auto; background: var(--im-graphite-500);
}
.phone::before { width: 30%; height: 3px; margin-bottom: 7px; }
.phone::after  { width: 34%; height: 3px; margin-top: 7px; }
.phone__screen {
  display: block; width: 100%; height: auto;
  background: var(--bg-deep);
  border: 1px solid var(--im-graphite-600);
}

/* ── THE FOUR FIGURES ──────────────────────────────────────────────────────
   A register on a rule, not four tiles: the hero-metric card grid is the SaaS
   default this brand exists to not look like. Every figure is mono and
   tabular, and none of them is a headcount — a static page cannot hold one. */
.figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 3px solid var(--ink);
}
@media (min-width: 880px) { .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fig {
  padding: var(--im-s-5) var(--im-s-4) var(--im-s-5) 0;
  border-bottom: var(--im-rule-hair) solid var(--rule);
}
.fig + .fig { padding-left: var(--im-s-4); border-left: var(--im-rule-hair) solid var(--rule); }
@media (min-width: 880px) { .fig:nth-child(1) { padding-left: 0; border-left: 0; } }
@media (max-width: 879px) {
  .fig:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.fig__n {
  font-family: var(--im-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1;
  color: var(--ink);
}
.fig__k {
  margin-top: var(--im-s-3);
  font-family: var(--im-font-mono);
  font-size: var(--im-t--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-body);
}
.fig__s {
  margin-top: var(--im-s-2);
  max-width: 34ch; font-size: var(--im-t-0); color: var(--ink-muted);
}

/* ── A PRODUCT BLOCK — the screen first, at its own size ───────────────────
   This used to be two columns with the screenshot beside the prose, alternating
   sides so the page had a gait. It cost the page its argument: a 1,280px screen
   drawn in a 490px column is 41% of capture, so the one thing on the page that
   is evidence rather than assertion could not be read at any width. The screen
   now takes the FULL MEASURE — about 1,100px against a 1,120px capture, which is
   the app at its own size — and the prose and the spec sheet sit under it as the
   pair. The gait survives: `--flip` swaps which side the spec is on.

   Reach has no screenshot: it has never sent a message, and a picture of it
   would be the one claim on this page its tag exists to stop. */
.prod {
  display: grid; gap: var(--im-s-6);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-bottom: var(--im-rule-hair) solid var(--rule);
}
.prod:last-child { border-bottom: 0; padding-bottom: 0; }
.prod__shot { min-width: 0; }
.prod__top {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--im-s-3) var(--im-s-4);
  padding-bottom: var(--im-s-3);
  border-bottom: var(--im-rule-body) solid var(--ink);
}
.prod__top h3 { font-size: var(--im-t-4); }
.prod__say > p { margin-top: var(--im-s-4); max-width: 56ch; color: var(--ink-body); }
@media (min-width: 900px) {
  /* The plate spans, then prose and spec share the measure beneath it. Explicit
     placement rather than source order, so `--flip` is one rule and not a reorder
     of four children. */
  .prod__say {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-content: start;
  }
  .prod__top { grid-column: 1 / -1; }
  .prod__say > p, .prod__say > .ticks { grid-column: 1; }
  .prod__say > .spec { grid-column: 2; grid-row: 2 / span 3; margin-top: var(--im-s-5); }
}

/* A screenshot is MOUNTED, like everything else here: a hairline plate, an 8px
   surround, and a mono caption that says which screen it is. No drop shadow and
   no browser chrome drawn around it. */
.shot { border: var(--im-rule-hair) solid var(--rule); background: var(--bg-deep); padding: 8px; }
.shot__frame { display: block; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--im-graphite-600); }
.shot figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--im-s-4);
  margin-top: 8px;
  font-family: var(--im-font-mono); font-size: var(--im-t--2);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
/* The plate carries its own way in. A 1,120px capture is drawn 340px wide on a phone,
   and nothing about the layout can change that — opening the frame is how it is read. */
.shot__open { color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.shot__open::after { content: " \2197"; }
.shot__frame:hover + figcaption .shot__open, .shot__open:hover, .shot__open:focus-visible {
  color: var(--signal-text);
}

.ticks { margin-top: var(--im-s-5); }
.ticks li {
  position: relative; padding-left: 1.5rem; margin-top: var(--im-s-3);
  font-size: var(--im-t-0); color: var(--ink-body); max-width: 54ch;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 13px; height: 2px; background: var(--ink);
}
.ticks a { color: var(--signal-text); }

.spec { margin-top: var(--im-s-5); font-family: var(--im-font-mono); font-size: var(--im-t--1); letter-spacing: 0.02em; }
.spec div {
  display: flex; justify-content: space-between; gap: var(--im-s-4);
  padding-block: var(--im-s-3);
  border-bottom: var(--im-rule-hair) solid var(--rule-soft);
  color: var(--ink-muted);
}
.spec div:first-child { border-top: var(--im-rule-hair) solid var(--rule-soft); }
.spec b { color: var(--ink); font-weight: 500; text-align: right; }

/* ── THE THREE STAGES ──────────────────────────────────────────────────────
   The screens in these frames are DRAWN, not photographed, and they are drawn
   in the rack's own grammar: three cells for the stage (past is ink, now is
   amber, ahead is empty) over seven for a week of posting. There is no seeded
   tenant sitting at day 3 and day 30 and day 60 to photograph, and inventing
   three screenshots of states we cannot show would be the one dishonest pixel
   on a page whose whole argument is that it does not do that. */
.stages3 { display: grid; gap: var(--im-s-6); }
@media (min-width: 760px) { .stages3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-s-6) 0; } }
.stg { padding-top: var(--im-s-5); border-top: 3px solid var(--ink); }
@media (min-width: 760px) {
  .stg { padding-right: var(--im-s-5); }
  .stg + .stg { padding-left: var(--im-s-5); border-left: var(--im-rule-hair) solid var(--rule); }
}
.stg .phone { max-width: 186px; margin-bottom: var(--im-s-5); }
.stg h3 { margin-bottom: var(--im-s-2); }
.stg__day { color: var(--signal-text); font-size: var(--im-t--1); }
.stg > p:last-child { margin-top: var(--im-s-3); font-size: var(--im-t-0); color: var(--ink-body); }

/* space-between, not center: centred content in a 9:19.5 box leaves two fifths of
   the screen empty at top and bottom, which reads as a frame that failed to load
   rather than as a diagram. The three groups sit against the top, middle and bottom
   of the screen the way a real one is laid out. */
.dgm {
  aspect-ratio: 390 / 844;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--im-s-5) var(--im-s-3);
}
.dgm__mid { display: grid; gap: var(--im-s-3); }
.dgm__top { padding-bottom: var(--im-s-3); border-bottom: 1px solid var(--im-graphite-600); }
.dgm__bot { display: grid; gap: var(--im-s-2); }
.dgm p { margin: 0; }
.dgm__day, .dgm__lbl {
  font-family: var(--im-font-mono); font-size: 0.5625rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
.dgm__state {
  font-family: var(--im-font-mono); font-size: 0.6875rem;
  letter-spacing: 0.04em; color: var(--signal-text);
}
.dgm__track, .dgm__week { display: grid; grid-auto-flow: column; gap: 2px; }
.dgm__track i, .dgm__week i {
  display: block; border: 1px solid var(--im-graphite-500); background: transparent;
}
.dgm__track i { height: 38px; }
.dgm__week i { height: 18px; }
.dgm__track i.on, .dgm__week i.on { background: var(--ink); border-color: var(--ink); }
.dgm__track i.now { background: var(--signal); border-color: var(--signal); }
.dgm__fine { margin-top: var(--im-s-2); font-size: 0.625rem; line-height: 1.35; color: var(--ink-muted); }

.trust { display: grid; gap: 0; border-top: 3px solid var(--ink); }
@media (min-width: 880px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trust li {
  padding: var(--im-s-4) var(--im-s-5) var(--im-s-4) 0;
  border-bottom: var(--im-rule-hair) solid var(--rule);
  font-size: var(--im-t-0); color: var(--ink-body); max-width: 60ch;
}
@media (min-width: 880px) {
  .trust li:nth-child(even) { padding-left: var(--im-s-5); border-left: var(--im-rule-hair) solid var(--rule); }
}

/* ── THE CALCULATOR ────────────────────────────────────────────────────────
   The ladder itself lives once, in assets/home.js, asserted against the catalog
   by tests/site. This is only its face. */
.calc { display: grid; gap: var(--im-s-6); }
.calc__lab {
  display: block;
  font-family: var(--im-font-mono); font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-mono); text-transform: uppercase; color: var(--ink-body);
}
.calc__ctl {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--im-s-5); row-gap: var(--im-s-3);
}
.calc__ctl .calc__lab { grid-column: 1 / -1; }
.calc__out {
  font-family: var(--im-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--im-t-4); letter-spacing: -0.03em; color: var(--ink);
  min-width: 3.5ch; text-align: right;
}
.calc__hint { margin-top: var(--im-s-2); font-size: var(--im-t-0); color: var(--ink-muted); max-width: 60ch; }

/* Square track, square thumb, amber fill. The UA slider is a rounded pill in
   system blue on both platforms, which is two brand rules broken by a default. */
.calc__range { width: 100%; height: 34px; background: transparent; -webkit-appearance: none; appearance: none; }
.calc__range::-webkit-slider-runnable-track {
  height: 6px; background: var(--im-graphite-600); border: 1px solid var(--rule);
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 28px; margin-top: -12px;
  background: var(--signal); border: 0; border-radius: var(--im-radius);
}
.calc__range::-moz-range-track {
  height: 6px; background: var(--im-graphite-600); border: 1px solid var(--rule);
}
.calc__range::-moz-range-thumb {
  width: 16px; height: 28px; background: var(--signal); border: 0; border-radius: var(--im-radius);
}
.calc__range:focus-visible { outline: var(--im-rule-body) solid var(--im-amber); outline-offset: 4px; }

.segs { display: grid; gap: var(--im-s-3); margin-top: var(--im-s-4); }
@media (min-width: 760px) {
  .segs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--im-rule-hair) solid var(--rule); }
  .seg + .seg { border-left: var(--im-rule-hair) solid var(--rule); }
}
.seg {
  display: grid; gap: 2px; cursor: pointer;
  padding: var(--im-s-4);
  border: var(--im-rule-hair) solid var(--rule);
  background: var(--bg);
}
@media (min-width: 760px) { .seg { border: 0; } }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.seg:focus-within { outline: var(--im-rule-body) solid var(--im-amber); outline-offset: -2px; }
.seg__name { font-weight: 700; color: var(--ink); }
.seg__price {
  font-family: var(--im-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--im-t--1); color: var(--ink-body);
}
.seg__say { margin-top: var(--im-s-2); font-size: var(--im-t-0); color: var(--ink-muted); }
.seg:has(input:checked) { background: var(--surface); }
.seg:has(input:checked) .seg__name { color: var(--signal-text); }
.seg:has(input:checked) .seg__price { color: var(--ink); }

.calc__read { display: grid; border-top: 3px solid var(--ink); }
@media (min-width: 760px) { .calc__read { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.calc__read > div {
  padding: var(--im-s-4) var(--im-s-4) var(--im-s-4) 0;
  border-bottom: var(--im-rule-hair) solid var(--rule);
}
@media (min-width: 760px) {
  .calc__read > div + div { padding-left: var(--im-s-5); border-left: var(--im-rule-hair) solid var(--rule); }
}
.calc__read dt {
  font-family: var(--im-font-mono); font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-label); text-transform: uppercase; color: var(--ink-muted);
}
.calc__read dd {
  margin-top: var(--im-s-2);
  font-family: var(--im-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--im-t-4); letter-spacing: -0.04em; color: var(--ink);
}
.calc__read-mark dd { color: var(--signal-text); }
.calc__fine { font-size: var(--im-t-0); color: var(--ink-muted); max-width: 68ch; }

/* ── THE CALCULATOR'S SECOND HALF — the visitor's own arithmetic ───────────
   Same grid, same rules, no cards. It is separated from the cost rows by the
   section's own `.head` rule rather than by a box, because a box would read as a
   different component and this is the same form: one slider feeds both halves.

   Block, not grid, for `.calc__in`: one of the three is a <fieldset>, and a
   fieldset's <legend> is not a grid item in any engine — it is laid out by the
   fieldset itself. A grid container would have left it overlapping the control. */
.calc__half { margin-top: var(--im-s-7); }
.calc__half > * + * { margin-top: var(--im-s-5); }
.calc__say { font-size: var(--im-t-1); color: var(--ink); max-width: 56ch; }

.calc__inputs { display: grid; gap: var(--im-s-6); align-items: start; }
@media (min-width: 620px) {
  .calc__inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-s-5); }
}
.calc__in { display: block; min-width: 0; }
.calc__in > * + * { margin-top: var(--im-s-3); }
.calc__in-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--im-s-2);
}
.calc__in-head .calc__lab { min-width: 0; }

/* The example/yours mark. It is a CHIP because it changes — an italic note next to
   a field reads as help text that was always there, and the whole point of this one
   is that the visitor made it change. */
.calc__mark {
  flex: none;
  font-family: var(--im-font-mono); font-size: var(--im-t--2);
  letter-spacing: var(--im-ls-label); text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.15em 0.45em;
  border: var(--im-rule-hair) solid var(--rule);
}
.calc__mark--yours { color: var(--signal-text); border-color: var(--signal); }

.calc__num {
  width: 100%; min-height: 48px;
  padding: 0.45em 0.7em;
  background: var(--bg-deep);
  border: var(--im-rule-hair) solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--im-font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: var(--im-t-2);
}
.calc__num:focus-visible { border-color: var(--signal); }
.calc__note {
  font-family: var(--im-font-mono); font-size: var(--im-t--1);
  letter-spacing: 0; line-height: 1.65; color: var(--ink-muted);
}

/* Six ticks, six across, at every width — 1 through the reel cap. They stay on one
   row at 390px because each cell holds a single digit; stacking them would turn a
   scale into a list and lose the "this is a dial" reading. */
.segs--tick {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0; margin-top: 0;
  border: var(--im-rule-hair) solid var(--rule);
}
.seg--tick {
  border: 0; padding: var(--im-s-3) var(--im-s-1);
  justify-items: center; background: transparent;
}
.seg--tick + .seg--tick { border-left: var(--im-rule-hair) solid var(--rule); }
.seg__n { font-size: var(--im-t-2); color: var(--ink-body); }
.seg--tick:has(input:checked) { background: var(--signal); }
.seg--tick:has(input:checked) .seg__n { color: var(--on-signal); }

/* Four figures on the same 3px rule as the three above. Two-up before four-up:
   a 9-character count in a wide mono needs about 200px, and four columns do not
   have it until the shell is past 1000. */
.calc__read--four > div + div { border-left: 0; padding-left: 0; }
.calc__read--four dd { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
/* The class lands on the <output>, not on the <dd> that wraps it — a rule on the
   dd would only change what the output INHERITS, and an explicit colour on the
   output beats inheritance every time. Measured: the first cut of this coloured
   nothing at all. */
.calc__half output.is-down { color: var(--halt); }  /* outranks .calc__fine .num, which lands later in the file */
.calc__qual {
  display: block; margin-top: 2px;
  letter-spacing: var(--im-ls-mono); text-transform: none; color: var(--ink-muted);
}
@media (min-width: 560px) {
  .calc__read--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__read--four > div:nth-child(even) {
    padding-left: var(--im-s-5); border-left: var(--im-rule-hair) solid var(--rule);
  }
}
@media (min-width: 1000px) {
  .calc__read--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calc__read--four > div:not(:first-child) {
    padding-left: var(--im-s-5); border-left: var(--im-rule-hair) solid var(--rule);
  }
}

/* ── FAQ — seven <details>, no script ──────────────────────────────────────
   The marker is drawn as two gradient bars: a plus that loses its upright and
   becomes a minus. A rotating chevron would be motion that carries no state and
   would have to be suppressed under prefers-reduced-motion; this changes shape
   instantly and reads the same in both. */
/* No border-top: the section .head already lays the 3px rule this hangs from, and
   two heavy rules 20px apart is the tell of a component that does not know what it
   is sitting under. */
.faq details { border-bottom: var(--im-rule-hair) solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--im-s-5);
  padding-block: var(--im-s-4);
  cursor: pointer; list-style: none;
  font-family: var(--im-font-display); font-weight: 700;
  font-size: var(--im-t-2); letter-spacing: -0.02em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--ink) 0 0) center / 100% 2px no-repeat,
    linear-gradient(var(--ink) 0 0) center / 2px 100% no-repeat;
}
.faq details[open] summary { color: var(--signal-text); }
.faq details[open] summary::after {
  background: linear-gradient(var(--signal) 0 0) center / 100% 2px no-repeat;
}
.faq summary:hover { color: var(--signal-text); }
.faq__a { padding-bottom: var(--im-s-5); max-width: 66ch; }
.faq__a p { font-size: var(--im-t-0); color: var(--ink-body); }
.faq__a p + p { margin-top: var(--im-s-3); }

/* ── 560px — what the home page does when it runs out of room ─────────────── */
@media (max-width: 560px) {
  .bays { gap: var(--im-s-4); }
  .bay__mark span { font-size: 0.5rem; letter-spacing: 0.06em; padding: 0.15em 0.35em; }
  .calc__out { font-size: var(--im-t-3); }
  .calc__read dd { font-size: var(--im-t-3); }
  .faq summary { font-size: var(--im-t-1); }
}

/* The Reach block's right column. A screenshot would be the one claim on this page
   that its own tag exists to stop, so the space where one would go says so, in the
   plate language the rest of the page uses. An empty half-row would read as an image
   that failed; this reads as a decision. */
.noshot {
  display: flex; flex-direction: column; justify-content: center; gap: var(--im-s-3);
  max-width: 34rem;
  min-height: 12rem;
  padding: var(--im-s-6);
  border: 1.5px dashed var(--ink-muted);
  color: var(--ink-muted);
}
.noshot b {
  font-family: var(--im-font-mono); font-size: var(--im-t--1);
  letter-spacing: var(--im-ls-label); text-transform: uppercase; color: var(--ink);
  font-weight: 400;
}
.noshot span { font-size: var(--im-t-0); max-width: 40ch; }