/* ExecRecon — private preview stylesheet.
   Built from the block library named in DIRECTION.md. Every value below either
   comes from assets/tokens.css or is a ratio. No colour is written here that
   the approved kit did not define.

   The one structural idea: the ground inverts. Observation sits on Obsidian;
   anything the reader has to decide or act on sits on Paper. Gold is a mark
   and a single forward leg, never a field.

   MOTION — dial 3, and the dial is the budget. What moves, and why:
     1. primary action, hover/focus   colour, 150ms       cause and effect
     2. primary action, press         1px down, 80ms      cause and effect
     3. route underline, hover        colour, 150ms       state change
     4. routes toggle, open state     colour, 150ms       state change
     5. contact reply line, on press  fade+4px, 150ms     cause and effect
   Every one of those is feedback on something the reader did. Nothing here
   moves on its own, and nothing moves while someone is reading.

   Decided against, on purpose, so nobody has to re-argue it:
     - section entrance reveals. The scene sentence is a person reading one
       sheet; a page that animates while she reads argues with its own brand.
     - scroll-linked anything, parallax, count-ups. Dial 3 forbids them and
       none of them would be expressing anything.
     - hover-scale on the image figures and the roster rows. Once on the
       primary action is a decision; on every card it is a reflex.
     - an animated open for the small-screen routes panel. It would have to
       animate height, which is layout, and the panel is a jump between routes
       rather than a spatial relationship worth drawing.
     - smooth scrolling. See the reset below. */

/* ------------------------------------------------------------------ reset */

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

/* scroll-behavior: smooth was removed rather than tuned. The only in-page
   target on this site is the skip link, and smoothing a skip link delays
   exactly the people it exists for. Nothing else needed it. */

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
}

/* height:auto lets the width/height attributes act as an aspect-ratio hint
   instead of a fixed height, so the ratios set per block below actually win. */
img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: .3em; }

button, input, textarea, select { font: inherit; color: inherit; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

/* The sideways-scrolling table box takes focus so a keyboard can reach the
   Status column, so it has to show focus like everything else that does. */
.matrix-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* Champagne is the approved focus colour and it reads on Obsidian. On a Paper
   panel it is a pale gold on an off-white ground, which is where every form
   field on this site lives, so the ring switches to the approved
   --text-on-light there. Both values are kit tokens; neither is new. */
.band--paper :where(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--text-on-light);
}

::selection { background: var(--color-champagne); color: var(--text-on-light); }

/* ------------------------------------------------------------- primitives */

.wrap {
  width: min(100% - (2 * var(--gutter)), var(--content-max));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: -200px;
  z-index: var(--z-sticky);
  background: var(--light-surface);
  color: var(--text-on-light);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  text-decoration: none;
}
.skip:focus { top: var(--space-2); }

/* The reconnaissance leg. The mark's R carries one long forward stroke; the
   page carries one too, and only one — it always introduces the section that
   holds that page's primary action. It starts on the content edge and runs off
   the right of the viewport. */
hr.leg {
  border: 0;
  height: 2px;
  background: var(--mark-accent);
  margin: 0 0 0 max(var(--gutter), calc(50vw - (var(--content-max) / 2)));
}

.band { padding-block: var(--section-space); }
.band--tight { padding-block: calc(var(--section-space) * .58); }

.band--paper {
  background: var(--light-surface);
  color: var(--text-on-light);
}
.band--paper .muted { color: var(--text-muted-on-paper); }
.band--paper .tag { color: var(--text-muted-on-paper); }

.muted { color: var(--text-muted); }

.tag {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--line-heading);
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.4vw, var(--text-3xl)); }
h2 { font-size: clamp(1.75rem, 3.4vw, var(--text-2xl)); }
h3 { font-size: var(--text-lg); letter-spacing: -.02em; line-height: 1.25; }

p { margin: 0; }

.lead {
  font-size: var(--text-lg);
  line-height: 1.45;
  letter-spacing: -.012em;
  max-width: 40ch;
  color: var(--text);
}
.band--paper .lead { color: var(--text-on-light); }

/* ------------------------------------------------------------------ chrome */

.preview-strip {
  background: var(--surface);
  color: var(--color-champagne);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-2) var(--space-4);
}

.masthead { border-bottom: 1px solid var(--rule-on-dark); }

.masthead-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-6) var(--space-5);
}

.logo { display: block; flex: 0 0 auto; }
.logo img { width: 232px; height: auto; }

.routes { display: flex; align-items: baseline; gap: var(--space-6); }

.routes a {
  font-size: var(--text-sm);
  letter-spacing: .01em;
  text-decoration: none;
  padding-bottom: var(--space-1);
  /* the rule is always 2px and always there; only its colour moves, so the
     baseline never shifts and nothing reflows on hover */
  border-bottom: 2px solid transparent;
  transition: border-color var(--motion-fast) var(--motion-ease-standard);
}
.routes a:hover { border-bottom-color: var(--rule-on-dark-strong); }
.routes a[aria-current="page"] {
  color: var(--text-accent);
  border-bottom-color: var(--mark-accent);
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--motion-ease-standard),
    color var(--motion-fast) var(--motion-ease-standard);
}
/* Open state is visible, not only announced: aria-expanded already told a
   screen reader, and this tells everyone else. */
.menu-toggle[aria-expanded="true"] { border-color: var(--mark-accent); color: var(--text-accent); }

/* ----------------------------------------------------------------- actions */

/* The ask. One class, one wording, one colour — the only gold field on any
   page. `cta` is in the class list so the ask is machine-countable as well as
   visible; with the old `act` name nothing outside the browser could tell an
   ask from a link. */

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* A repeated ask inside an argument block, set off from the paragraph or list
   it follows rather than floated as its own section. */
.actions--follow { margin-top: var(--space-8); }

.cta {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: var(--space-3) var(--space-6);
  background: var(--button-background);
  color: var(--button-text);
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid var(--button-background);
  cursor: pointer;
  /* hover/focus: colour, 150ms. press: 1px down, 80ms. Properties are named
     because `all` would animate whatever anyone adds later. transform and
     colour only — nothing here forces layout. */
  transition:
    background-color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard),
    transform var(--motion-instant) var(--motion-ease-standard);
}
.cta:hover { background: var(--button-hover); border-color: var(--button-hover); }

/* Press feedback, once, on the primary action — not a hover-scale reflex on
   every card. The colour change carries the state on its own; the 1px shift is
   the enhancement, and it is what reduced motion drops. */
.cta:active { background: var(--button-hover); border-color: var(--button-hover); transform: translateY(1px); }

.cta--quiet {
  background: transparent;
  color: var(--text);
  border-color: var(--rule-on-dark-strong);
}
.cta--quiet:hover, .cta--quiet:active { background: transparent; border-color: var(--text); }
.band--paper .cta--quiet { color: var(--text-on-light); border-color: var(--rule-on-paper-strong); }
.band--paper .cta--quiet:hover, .band--paper .cta--quiet:active { border-color: var(--text-on-light); }

/* ---------------------------------------------------- block: sightline-hero */

.sightline { padding-block: clamp(48px, 7vw, 96px) 0; }

.sightline-copy { display: grid; gap: var(--space-6); max-width: 62ch; }
.sightline h1 { max-width: 15ch; }
.sightline .actions { margin-top: var(--space-2); }

/* .sightline-meta is gone. It carried a Category line and an Emphasis line
   that repeated the lead verbatim, so the hero asked for three readings of the
   same sentence before the eye reached the button. The hero now runs
   headline, lead, ask — three things, in that order, at three volumes. */

/* ------------------------------------------------------------ block: plate */

.plate { margin: clamp(40px, 6vw, 72px) 0 0; }
.plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---------------------------------------------------- block: page-head */

.page-head { padding-block: clamp(52px, 6vw, 88px) clamp(40px, 5vw, 64px); }
.page-head h1 { max-width: 17ch; }
.page-head .lead { margin-top: var(--space-6); max-width: 54ch; }

.page-head-line {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule-on-dark);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ----------------------------------------------------- block: role-ledger */

.roster-head { max-width: 30ch; margin-bottom: var(--space-10); }
.roster-head p { margin-top: var(--space-4); max-width: 46ch; }

.roster { margin: 0; }

.roster > div {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-4) var(--space-10);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule-on-paper);
}
.roster > div:last-child { border-bottom: 1px solid var(--rule-on-paper); }

.roster dt { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; }
.roster dd { margin: 0; max-width: 52ch; color: var(--text-muted-on-paper); }

/* -------------------------------------------------- block: sequence-steps */

.sequence-head { max-width: 26ch; margin-bottom: var(--space-10); }

.sequence { counter-reset: move; list-style: none; margin: 0; padding: 0; }

.sequence > li {
  counter-increment: move;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule-on-paper);
}
.sequence > li:last-child { border-bottom: 1px solid var(--rule-on-paper); }

.sequence > li::before {
  content: counter(move, decimal-leading-zero);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  color: var(--text-on-light);
  padding-top: .35em;
}
.sequence p { grid-column: 2; max-width: 60ch; color: var(--text-muted-on-paper); }

/* ------------------------------------------------------- block: field-record */

.record-run { display: grid; gap: var(--space-6); }
.record-run + .record-run { margin-top: var(--space-6); }
.record-run--pair { grid-template-columns: 1.35fr 1fr; align-items: end; }
.record-run--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.record { margin: 0; }
.record img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.record figcaption {
  padding-top: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* The disclosure line under a field record. It used to carry a second child —
   a gold link out to assets/review/image-review.jpg — and that link is gone
   from all five pages, so this is a single line again rather than a two-ended
   row. The file it pointed at is an internal contact sheet: fifteen crops each
   stamped with its asset id and the pipeline preset it was rendered at. That is
   build-review material. It also opened as a bare 622KB JPEG with no route
   back, and on Contact it was the only link on the page besides the form,
   against SITE.md's "one action, everywhere". Removing it also retired the one
   gold mark on this site that was not carrying identity, action or status. */
.record-note {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule-on-dark);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 64ch;
}

/* ---------------------------------------------------------- block: argument */

.argument {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-10) var(--space-20);
  align-items: start;
}
.argument h2 { max-width: 12ch; }

.argument-body { max-width: var(--reading-max); display: grid; gap: var(--space-6); }
.argument-body p { color: var(--text-muted); }

/* The rule above this quote was a gold hairline, which DIRECTION.md §7.5 bans
   outright: gold rules are the one forward leg per page and the primary action,
   and "rules elsewhere are Paper or Obsidian transparencies". This block sits on
   Obsidian, so the rule is the Paper transparency the direction names. The quote
   itself stays gold — that is type, not a rule, and it is the emphasis the
   approved brand guide reserves gold for. */
.principle {
  margin-top: var(--space-4);
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--rule-on-dark);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--text-accent);
  max-width: 20ch;
}
.principle cite { display: block; margin-top: var(--space-3); font: var(--text-sm) var(--font-label); font-style: normal; color: var(--text-muted); letter-spacing: .04em; }

/* ------------------------------------------------------- block: layer-table */

.matrix-head { max-width: 34ch; margin-bottom: var(--space-10); }
.matrix-head p { margin-top: var(--space-4); max-width: 56ch; }

.matrix-scroll { overflow-x: auto; }

.matrix { width: 100%; border-collapse: collapse; text-align: left; min-width: 44rem; }
.matrix caption { text-align: left; margin: 0 0 var(--space-4); }

.matrix th, .matrix td {
  padding: var(--space-5) var(--space-6) var(--space-5) 0;
  border-bottom: 1px solid var(--rule-on-dark);
  vertical-align: top;
}
.matrix thead th {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--rule-on-dark-strong);
  padding-bottom: var(--space-3);
}
.matrix tbody th {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.02em;
  width: 30%;
}
.matrix td { color: var(--text-muted); }
.matrix .plain { color: var(--text); }
.matrix .declared { font-family: var(--font-label); font-size: var(--text-sm); color: var(--text-accent); white-space: nowrap; }

/* A plain mono line that says what a set of names is and is not. Used wherever
   planned architecture or approved naming appears, in the same view as the
   names themselves — never on a separate page. */
.note-line { margin-top: var(--space-6); font-family: var(--font-label); font-size: var(--text-sm); line-height: 1.7; color: var(--text-muted); max-width: 64ch; }
.band--paper .note-line { color: var(--text-muted-on-paper); }

/* ----------------------------------------------------- block: lexicon-strip */

.lexicon-head { max-width: 28ch; margin-bottom: var(--space-10); }
.lexicon-head p { margin-top: var(--space-4); max-width: 50ch; }

.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }

.people > div { padding-top: var(--space-5); border-top: 1px solid var(--rule-on-paper-strong); }
.people h3 { margin-bottom: var(--space-2); }
.people p { color: var(--text-muted-on-paper); max-width: 40ch; }

.words {
  margin-top: var(--space-12);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-on-paper);
  font-family: var(--font-label);
  font-size: var(--text-lg);
  letter-spacing: -.01em;
  line-height: 1.9;
}
.words span::after { content: ' · '; color: var(--text-muted-on-paper); }
.words span:last-child::after { content: ''; }

/* --------------------------------------------------- block: engagement-shape */

.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-12) var(--space-20);
  align-items: start;
}

.offer-price {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw, var(--text-3xl));
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  margin: var(--space-6) 0 var(--space-5);
}
.offer-note { color: var(--text-muted-on-paper); max-width: 34ch; margin-bottom: var(--space-8); }

.questions { margin: 0; }
.questions > div { padding-block: var(--space-5); border-top: 1px solid var(--rule-on-paper); }
.questions > div:last-child { border-bottom: 1px solid var(--rule-on-paper); }
.questions dt { font-weight: 600; margin-bottom: var(--space-2); }
.questions dd { margin: 0; color: var(--text-muted-on-paper); max-width: 52ch; }

/* ------------------------------------------------- block: contact-exchange */

.exchange {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--space-12) var(--space-20);
  align-items: start;
}
.exchange-copy p { color: var(--text-muted-on-paper); max-width: 40ch; margin-top: var(--space-5); }

.preview-note {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule-on-paper-strong);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted-on-paper);
  max-width: 40ch;
}

.form-rows { display: grid; gap: var(--space-5); }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }

.field { display: grid; gap: var(--space-2); font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: .04em; }

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3);
  background: transparent;
  color: var(--text-on-light);
  border: 1px solid var(--rule-on-paper-strong);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: normal;
}
.field textarea { min-height: 150px; resize: vertical; }

/* The answer to pressing the preview button. Space for three lines is reserved
   up front so the message arrives without shoving the page around, and the
   text is inserted visible — the animation below only enhances something that
   is already on screen. */
.reply-line {
  min-height: calc(3 * 1.6em);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-on-paper);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-on-light);
}

@keyframes reply-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
/* Expresses cause and effect: you pressed, this answered. The class is added
   after the text, never instead of it, so a headless renderer, a background
   tab or a failed animation all still show the message. */
.reply-line.said { animation: reply-in var(--motion-fast) var(--motion-ease-out); }

/* ----------------------------------------------------- block: closing-call */

/* This is the moment the page exists for, and it used to be the least
   emphasised band on it — tight padding, an ordinary h2, arriving after the
   heaviest content. The attention order said "notice this last, and least",
   which is the design arguing with itself. It now carries full section space
   and a heading a step above every other h2. */
.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
}
.closing h2 { max-width: 14ch; font-size: clamp(2.1rem, 4.4vw, var(--text-3xl)); }
.closing p { margin-top: var(--space-5); color: var(--text-muted); max-width: 40ch; }

/* ------------------------------------------------------------------ footer */

.site-foot { border-top: 1px solid var(--rule-on-dark); padding-block: var(--space-12) var(--space-10); }

.foot-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8) var(--space-12);
  align-items: start;
}

.foot-mark img { width: 168px; height: auto; }
.foot-mark p { margin-top: var(--space-5); font-family: var(--font-label); font-size: var(--text-sm); color: var(--text-muted); }

.foot-routes { display: flex; flex-direction: column; gap: var(--space-3); text-align: right; }
.foot-routes a { font-size: var(--text-sm); text-decoration: none; }
.foot-routes a:hover { text-decoration: underline; }

.foot-legal {
  grid-column: 1 / -1;
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-on-dark);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 60ch;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .argument, .offer, .exchange { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .argument h2, .closing h2 { max-width: 20ch; }
  .record-run--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roster > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-3) var(--space-6); }
  .logo img { width: 200px; }
  .routes { gap: var(--space-5); }
}

@media (max-width: 720px) {
  .masthead-inner { flex-wrap: wrap; align-items: center; padding-block: var(--space-4); }
  .logo img { width: 178px; }

  /* Default is the no-script state: routes visible, toggle hidden. The routes
     used to be display:none until a script ran, which meant every route on
     small screens was unreachable with JavaScript off. The has-js class is set
     in the document head, before first paint, so nothing flashes. */
  .menu-toggle { display: none; }
  .routes {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--space-2);
  }
  .has-js .menu-toggle { display: block; }
  .has-js .routes { display: none; }
  .has-js .routes.open { display: flex; }
  .routes a { padding-block: var(--space-3); border-bottom: 1px solid var(--rule-on-dark); }
  .routes a[aria-current="page"] { border-bottom-color: var(--mark-accent); }

  .plate img, .record img { aspect-ratio: 4 / 5; }
  .record-run--pair, .record-run--trio { grid-template-columns: minmax(0, 1fr); }
  .roster > div, .sequence > li { grid-template-columns: minmax(0, 1fr); }
  .sequence > li::before { padding-top: 0; }
  .sequence p { grid-column: 1; }
  .people { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .form-pair { grid-template-columns: minmax(0, 1fr); }
  .foot-inner { grid-template-columns: minmax(0, 1fr); }
  .foot-routes { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); text-align: left; }
  .words { font-size: var(--text-base); }
}

/* ---------------------------------------------------------- reduced motion */

/* Four effects ship on this site. Each one is named here with the alternative
   it falls back to, rather than being swept up by the blanket rule alone.
   Nothing is hidden behind motion anywhere, so with reduce on, the site is not
   a reduced version of itself — it is the same site, arriving instantly. */

@media (prefers-reduced-motion: reduce) {

  /* 1. primary action, hover/focus colour -> the colour still changes, at once */
  /* 2. route underline, hover colour     -> the same */
  /* 3. routes toggle, open state colour  -> the same */
  .cta, .routes a, .menu-toggle { transition-duration: 1ms; }

  /* 4. primary action, press shift -> dropped entirely. The press is already
        confirmed by the background colour, which is why the shift was only
        ever the enhancement. */
  .cta:active { transform: none; }

  /* 5. contact reply line -> no entrance. The text is inserted before the
        class is added, so it is on screen either way. */
  .reply-line.said { animation: none; }

  /* Net for anything added later without reading this block. */
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ------------------------------------------- block: engagement-shape (tiers)
   Added 2026-09-10 for the career offer. Two named offers side by side on
   Paper, each a definition rather than a card: no border box, no shadow, a
   single Obsidian hairline between them at wide widths. Not a uniform card
   grid — there are exactly two, they are a comparison, and they differ in
   content and action weight (quiet action on the kit, primary on the service).
   Gold appears only in the primary action, as everywhere else. */

.tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10) var(--space-16);
  margin: var(--space-10) 0 var(--space-12);
}
.tier h3 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.tier .offer-price { margin: var(--space-4) 0 var(--space-2); }
.tier .offer-price--second { margin-top: 0; font-size: clamp(1.6rem, 3.6vw, var(--text-2xl)); }
.tier .offer-unit { font-size: var(--text-base); font-weight: 400; letter-spacing: 0; color: var(--text-muted-on-paper); }
.tier .offer-note { margin-bottom: var(--space-6); }
.tier + .tier { border-left: 1px solid var(--rule-on-paper); padding-left: var(--space-16); }
@media (max-width: 720px) {
  .tiers { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .tier + .tier { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-on-paper); padding-top: var(--space-10); }
}

/* ------------------------------------------------ block: argument (long prose)
   Added 2026-09-10 for Terms, Privacy and Welcome. The same argument block,
   carrying more than three paragraphs: subheads and short lists inside the
   reading measure. No new colour, no new type family, nothing decorative. */

.argument-body h3 { font-size: var(--text-lg); line-height: var(--line-heading); margin: var(--space-4) 0 0; }
.argument-body ul { margin: 0; padding-left: 1.2em; color: var(--text-muted); display: grid; gap: var(--space-2); }
.argument-body ul li::marker { color: var(--text-muted); }
.argument-body .note-line { margin-top: var(--space-2); }
[data-mono] { font-family: var(--font-label); font-size: var(--text-sm); }

/* ---------------------------------------------- block: engagement-shape (live)
   Checkout forms replace the tier actions when build/flip-launch.py runs.
   Same .field controls as Contact, on Paper; the primary action stays on the
   service tier and the quiet action on the kit, exactly as in the preview. */
.checkout { display: grid; gap: var(--space-4); margin-top: var(--space-4); max-width: 34ch; }
.checkout .actions { margin-top: var(--space-2); }

/* ------------------------------------------------------ block: notify (waitlist)
   The coming-soon list. One inline form — email, optional phone, one button —
   used in the hero on Obsidian, in the closing call, and on Paper panels. The
   same .field controls, restyled for Obsidian where they sit on it. Nothing
   new in colour: hairlines are the approved transparencies. */
.notify { display: grid; gap: var(--space-4); max-width: 44rem; }
.notify .form-pair { gap: var(--space-4); }
.notify .actions { margin-top: 0; }
.notify .reply-line { min-height: calc(2 * 1.6em); }
.band:not(.band--paper) .notify .field, .sightline .notify .field { color: var(--text-muted); }
.band:not(.band--paper) .notify .field input, .sightline .notify .field input {
  color: var(--text); border-color: var(--rule-on-dark-strong);
}
.band:not(.band--paper) .notify .reply-line, .sightline .notify .reply-line {
  color: var(--text-muted); border-top-color: var(--rule-on-dark);
}
.sightline .notify { margin-top: var(--space-6); }

/* Employer visibility opt-in on the candidate forms (Contact, Pricing). A
   checkbox and its sentence on one row; off by default, per the Privacy page.
   Selects on Obsidian (the Employers closing call) take the dark input rules. */
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); letter-spacing: normal; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6; color: var(--text-muted-on-paper); }
.field--check input { width: 1.1em; height: 1.1em; min-height: 0; margin-top: .25em; padding: 0; accent-color: var(--color-heritage-gold); }
.band:not(.band--paper) .notify .field select, .sightline .notify .field select {
  color: var(--text); border-color: var(--rule-on-dark-strong); background: transparent;
}
.band:not(.band--paper) .notify .field select option { color: var(--text-on-light); }