/* =============================================================
   walkdeeznust — landing and legal site
   Cherry Ink · Field Edition · v2.0
   -------------------------------------------------------------
   Every token below is copied from the Flutter app, not invented
   here. When the app changes, change it here too:

     lib/globals/constants/app_colors.dart      → §1.1
     lib/globals/constants/app_typography.dart  → §1.2
     lib/globals/constants/app_spacing.dart     → §1.3, §1.4

   Flutter expresses tracking in dp at a fixed size; CSS expresses
   it in em so it survives responsive type. Each value below is
   the app's dp figure divided by the app's size for that step —
   the arithmetic is shown inline so it can be re-checked.

   The three load-bearing rules:
     · One type weight. Size, colour, tracking and case do the work.
     · Cherry marks a live human. On a website there is no live
       human, so cherry appears exactly twice: the presence dot on
       the brand mark's shoulder — where the mark is the person —
       and the wordmark's full stop. Nothing else.
     · Rectangles are the app; circles are people.
   ============================================================= */

/* ---------- 0. FONT ---------- */
/* The app's own face, self-hosted. No third-party font CDN, so the
   CSP in _headers can stay locked to 'self'. */
@font-face {
  font-family: "Fixel Text";
  src: url("/assets/fonts/FixelText-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. TOKENS ---------- */
:root {
  /* -- 1.1 Palette · app_colors.dart --------------------------------- */
  --ink:             #1D1B1A;  /* primary   · text, rules, chrome       */
  --paper:           #FAF9F7;  /* background· the ground                */
  --paper-ink:       #FAF9F7;  /* onPrimary · text on ink fills         */
  --surface:         #FFFFFF;  /* surface   · sheets and cards          */
  --bone:            #F0EDE8;  /* surfaceVariant · chips, input fills   */
  --hairline:        #E6E2DC;  /* 1px rules                             */
  --hairline-strong: #CFC9C1;  /* rules on white; input borders         */
  --smoke:           #6E6862;  /* textSecondary · labels, metadata      */
  --ash:             #9A948D;  /* textTertiary · disabled/placeholder   */
  --brick:           #8C2F23;  /* error · the whole safety register     */
  --error-surface:   #F7EDEA;  /* fill behind safety copy               */
  --teal:            #15535C;  /* the `contrast` posture, nothing else  */
  --cherry:          #B3172D;  /* live humans only — see the note above */

  /* -- 1.2 Type · app_typography.dart -------------------------------- */
  --font: "Fixel Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Sizes. The app is a 375–430pt phone; a document site legitimately
     has more width, so display steps interpolate between two real
     tokens rather than inventing a size between them. */
  --t-display2:  clamp(2.5rem, 1.6rem + 3.6vw, 3.25rem); /* 40 → 52 */
  --t-display3:  clamp(2rem,   1.5rem + 2vw,   2.5rem);  /* 32 → 40 */
  --t-title:     1.75rem;    /* 28 */
  --t-headline:  1.375rem;   /* 22 */
  --t-body:      1.0625rem;  /* 17 */
  --t-body-sm:   0.9375rem;  /* 15 */
  --t-caption:   0.8125rem;  /* 13 */
  --t-label:     0.6875rem;  /* 11 */
  --t-micro:     0.625rem;   /* 10 */

  /* Tracking, as dp ÷ size from the app's TextStyles. */
  --ls-display2: -0.0385em;  /* −2.0 / 52 */
  --ls-display3: -0.035em;   /* −1.4 / 40 */
  --ls-title:    -0.0286em;  /* −0.8 / 28 */
  --ls-headline: -0.0182em;  /* −0.4 / 22 */
  --ls-body:      0;
  --ls-caption:   0.0077em;  /*  +0.1 / 13 */
  --ls-label:     0.1455em;  /*  +1.6 / 11 */
  --ls-micro:     0.22em;    /*  +2.2 / 10 */
  --ls-quiet:    -0.015em;   /* the no-italic fallback, §4.3           */

  /* Line heights, verbatim. */
  --lh-display:  1.00;
  --lh-title:    1.10;
  --lh-headline: 1.20;
  --lh-body:     1.45;
  --lh-caption:  1.35;
  --lh-flat:     1.00;

  /* -- 1.3 Space · AppSpacing ---------------------------------------- */
  --s0:  0px;   --s1:  2px;   --s2:  4px;   --s3:  8px;
  --s4:  12px;  --s5:  16px;  --s6:  20px;  --s7:  24px;
  --s8:  32px;  --s9:  44px;  --s10: 64px;

  /* -- 1.4 Radius · AppRadius ---------------------------------------- */
  --r0: 0;      /* everything                                          */
  --r1: 2px;    /* buttons, chips, badges — letterpress softening       */

  /* -- 1.4b Motion · app_motion.dart --------------------------------- */
  --curve-standard: cubic-bezier(0.20, 0, 0, 1);  /* AppCurves.standard   */
  --d-instant: 90ms;                              /* AppDuration.instant  */
  --d-quick:   160ms;
  --d-base:    240ms;

  /* -- 1.5 Layout ---------------------------------------------------- */
  --gutter: var(--s6);          /* the app's 375pt gutter              */
  --container: 1100px;
  --measure: 34em;              /* AppType.bodyMaxMeasureEm            */
  --tap: 44px;                  /* AppSpacing.minTapTarget             */
  --control: 52px;              /* AppSpacing.controlHeight            */
}

/* AppSpacing.gutterOf: s7 once the viewport passes 400. */
@media (min-width: 400px) {
  :root { --gutter: var(--s7); }
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Tabular figures everywhere, as the app enables globally. */
  font-variant-numeric: tabular-nums;
}

/* One weight, one style. Fixel Text ships a 400 and nothing else, so the
   browser must never be allowed to fake the rest — a synthetic bold or a
   sheared oblique is exactly what the scale is built to avoid. */
strong, b, h1, h2, h3, h4, h5, h6, th, summary, optgroup { font-weight: 400; }
* { font-synthesis: none; -webkit-font-synthesis: none; }

img, svg { display: block; max-width: 100%; }
svg { flex: none; }
ul, ol { padding: 0; list-style: none; }

/* Links are ink. Cherry is not a link colour — see §3.2 of the system. */
a { color: var(--ink); }
a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Focus rings are ink, never cherry. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--paper-ink); }

.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.page main { flex: 1; }

/* ---------- 3. PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 760px; }

.skip-link {
  position: absolute; top: var(--s3); left: var(--s3); z-index: 999;
  padding: var(--s3) var(--s4);
  background: var(--ink); color: var(--paper-ink);
  border-radius: var(--r1);
  font-size: var(--t-label); line-height: var(--lh-flat);
  letter-spacing: var(--ls-label);
  text-transform: uppercase; text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; color: var(--paper-ink); }

/* The two type registers the whole system is built from. */
.label {
  font-size: var(--t-label); line-height: var(--lh-flat);
  letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--smoke);
}
.micro {
  font-size: var(--t-micro); line-height: 1.3;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase; color: var(--smoke);
}

.t-display  { font-size: var(--t-display2); line-height: 0.94; letter-spacing: var(--ls-display2); }
.t-display3 { font-size: var(--t-display3); line-height: var(--lh-display); letter-spacing: var(--ls-display3); }
.t-title    { font-size: var(--t-title);    line-height: var(--lh-title);    letter-spacing: var(--ls-title); }
.t-headline { font-size: var(--t-headline); line-height: var(--lh-headline); letter-spacing: var(--ls-headline); }

/* Fixel Text has no italic (design system §4.3). The specified fallback is
   display3 in smoke at 90% with tracking loosened — a quieter aside. Never
   a synthetic oblique. */
.t-quiet {
  font-size: calc(var(--t-display3) * 0.9);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-quiet);
  color: var(--smoke);
}

.body    { font-size: var(--t-body);    line-height: var(--lh-body); max-width: var(--measure); text-wrap: pretty; }
.body-sm { font-size: var(--t-body-sm); line-height: var(--lh-body); max-width: var(--measure); text-wrap: pretty; }
.caption { font-size: var(--t-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--smoke); text-wrap: pretty; }

/* The cherry full stop — the app's one job, finished. Attaches to the
   wordmark only: never a heading, never body copy, never the letters. */
.stop { color: var(--cherry); }

/* ---------- 4. MASTHEAD (landing) ---------- */
.masthead__banner {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-block: var(--s6) var(--s5);
  text-align: center;
}
.banner {
  display: inline-flex; align-items: center; gap: clamp(8px, 1.6vw, 20px);
  text-decoration: none; color: var(--ink);
  font-size: var(--t-display2);
  line-height: 0.94;
  letter-spacing: var(--ls-display2);
}
.banner__mark { width: clamp(32px, 5vw, 52px); height: clamp(32px, 5vw, 52px); }

.masthead__strip { border-bottom: 1px solid var(--ink); }
.masthead__place { text-align: center; padding-block: var(--s4); }

/* ---------- 5. STATEMENT (landing) ---------- */
.edition { padding-block: clamp(32px, 7vw, 64px); }

/* Hero and waitlist share the fold. The form has to be reachable without
   scrolling, so it sits beside the statement rather than below the steps. */
.lede-grid {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 420px);
  gap: var(--s10);
  align-items: start;
}
@media (max-width: 900px) {
  .lede-grid { grid-template-columns: 1fr; gap: var(--s9); }
}

/* Left-aligned, which is what §4.2 asks for anyway: display type is centred
   only on splash and the blocked screen. Centring it beside a left-aligned
   form would have read as a mistake. */
.statement { max-width: 660px; }
.statement__head { max-width: 18ch; text-wrap: balance; }
.statement__lede {
  margin-top: var(--s7);
  font-size: var(--t-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  text-wrap: pretty;
}
.statement__mission {
  margin-top: var(--s7);
  padding-top: var(--s7);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--smoke);
  text-wrap: pretty;
}

/* How it works — printed steps. Rules, not cards. */
.steps {
  margin-top: var(--s10);
  border-top: 1px solid var(--ink);
  text-align: left;
}
.step {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--hairline);
}
.step__n {
  font-size: var(--t-label); line-height: var(--lh-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--smoke);
}
.step__t { font-size: var(--t-body); line-height: var(--lh-body); text-wrap: pretty; }
/* The block below draws its own rule; two hairlines in a row read as a slip. */
.step:last-child { border-bottom: 0; }

/* ---------- 6. STORE NOTICES ---------- */
/* Deliberately not badges. Apple and Google both forbid imitating their
   badge artwork, and neither store requires a download link on the
   marketing site before the listing is live. */
.stores {
  margin-top: var(--s9);
  padding-top: var(--s7);
  border-top: 1px solid var(--ink);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s5) var(--s8);
}
.store-note { display: flex; flex-direction: row; align-items: center; gap: var(--s4); text-align: left; }
.store-note__logo { width: 26px; height: 26px; }
.store-note__text { display: flex; flex-direction: column; gap: var(--s2); }
.store-note__name { font-size: var(--t-body-sm); line-height: var(--lh-flat); }

/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s4) var(--s6);
  background: var(--ink); color: var(--paper-ink);
  border: 1px solid var(--ink);
  border-radius: var(--r1);
  font-size: var(--t-body-sm); line-height: var(--lh-flat);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 120ms linear, color 120ms linear;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper-ink); }

/* ---------- 8. HEADER / FOOTER (documents) ---------- */
.site-header { border-bottom: 2px solid var(--ink); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s6); min-height: 62px; padding-block: var(--s4);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s4);
  text-decoration: none; color: var(--ink);
  font-size: var(--t-headline); letter-spacing: var(--ls-headline);
}
.brand__mark { width: 28px; height: 28px; }
.site-nav { display: flex; align-items: center; gap: var(--s6); }

.site-footer { border-top: 1px solid var(--ink); padding-block: var(--s6); margin-top: var(--s8); }
.site-footer__row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s4) var(--s6);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); }
.site-footer__links a,
.site-footer__row a { text-decoration: none; }
.site-footer__links a:hover,
.site-footer__row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 9. DOCUMENTS ---------- */
.doc { padding-block: var(--s8) var(--s10); }
.doc__header { margin-bottom: var(--s7); padding-bottom: var(--s5); border-bottom: 1px solid var(--ink); }
.doc__title { margin-block: var(--s4) var(--s4); }
.doc__meta {
  font-size: var(--t-micro); letter-spacing: var(--ls-micro);
  text-transform: uppercase; color: var(--smoke); line-height: 1.6;
}

.doc__body { max-width: 68ch; }
.doc__body h2 {
  font-size: var(--t-headline); letter-spacing: var(--ls-headline); line-height: var(--lh-headline);
  margin-block: var(--s9) var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink);
  scroll-margin-top: var(--s7);
}
.doc__body h3 {
  font-size: var(--t-body); line-height: var(--lh-body);
  margin-block: var(--s7) var(--s4);
}
.doc__body p { margin-bottom: var(--s5); font-size: var(--t-body-sm); line-height: var(--lh-body); }
.doc__body ul { margin-bottom: var(--s7); }
.doc__body ul li {
  position: relative; padding-left: var(--s7); margin-bottom: var(--s4);
  font-size: var(--t-body-sm); line-height: var(--lh-body);
}
/* A printed dash, not a bullet — the system has no filled decorations. */
.doc__body ul li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 10px; height: 1px; background: var(--ink);
}
.doc__body a { text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.doc__body a:hover { text-decoration-color: var(--ink); }

/* There is no bold in this system. Inline emphasis is a hairline rule under
   the phrase — a printed device, no weight, no colour outside the palette. */
.doc__body strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}

.toc {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding-block: var(--s5); margin-bottom: var(--s7);
}
/* The header already closes with a rule; don't strike a second one 20px later. */
.doc__header + .toc { border-top: 0; margin-top: calc(-1 * var(--s4)); }
.toc h2 {
  font-size: var(--t-micro) !important; letter-spacing: var(--ls-micro);
  text-transform: uppercase; color: var(--smoke);
  border: 0 !important; padding: 0 !important; margin: 0 0 var(--s4) !important;
  line-height: var(--lh-flat) !important;
}
.toc ol { counter-reset: toc; columns: 2; column-gap: var(--s9); }
@media (max-width: 620px) { .toc ol { columns: 1; } }
.toc li { counter-increment: toc; margin-bottom: var(--s3); break-inside: avoid; }
.toc a { font-size: var(--t-body-sm); text-decoration: none; }
.toc a::before { content: counter(toc) " · "; color: var(--smoke); }
.toc a:hover { text-decoration: underline; text-underline-offset: 3px; }

.callout {
  border-left: 2px solid var(--ink);
  background: var(--bone);
  padding: var(--s5);
  margin-block: var(--s7);
}
.callout p:last-child { margin-bottom: 0; }
/* The safety register: brick on errorSurface, plain sentences, no wit. */
.callout--safety { border-left-color: var(--brick); background: var(--error-surface); }
.callout--safety strong { text-decoration-color: var(--brick); }

/* Values still awaiting confirmation. Bone, never cherry — a draft is not
   a person. */
.fill {
  padding: 0.1em 0.3em; margin-inline: -0.1em;
  background: var(--bone);
  box-shadow: inset 0 -1px 0 var(--smoke);
}

.data-table { width: 100%; border-collapse: collapse; margin-block: var(--s5) var(--s7); }
.data-table th, .data-table td {
  text-align: left; padding: var(--s4);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-size: var(--t-caption); line-height: var(--lh-body);
}
.data-table thead th {
  font-size: var(--t-micro); letter-spacing: var(--ls-micro);
  text-transform: uppercase; color: var(--smoke);
  border-bottom-color: var(--ink);
  line-height: var(--lh-flat);
}
.data-table td strong { text-decoration: none; }
.table-scroll { overflow-x: auto; }

/* ---------- 9b. WAITLIST ----------
   From the design project's `waitlist.css`, with the literal hex swapped for
   the tokens above as that file instructs. Three substantive changes:

   1. Its `.btn` / `.btn--primary` rules are renamed `.wl-submit`. The site
      already has a `.btn` (the "Back to site" control on every document
      page) and the incoming rules would have silently restyled all of them.
   2. Chip press and button press keep their 0.96 / 0.985 scales — those are
      not off-system decoration, they are written into §7.3 and §7.8.
   3. The aside drops `font-style: italic`. Fixel Text ships no italic and
      `font-synthesis: none` is set globally, so the declaration would do
      nothing; §4.3's documented fallback is smoke at a smaller size, which
      is what it already is.
   ---------------------------------------------------------------- */

/* In the fold band the waitlist is one column of a grid, so it drops the
   separator rule and the top margin it needed as a stacked section. */
.waitlist { margin-top: 0; }
.waitlist__rule { display: none; }

.waitlist__grid { text-align: left; }

.waitlist__head {
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}

.waitlist__lede {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--smoke);
  max-width: var(--measure);
  margin-top: var(--s4);
  text-wrap: pretty;
}

/* ---- form ---- */
.waitlist__form { display: flex; flex-direction: column; margin-top: var(--s7); }

.field { display: flex; flex-direction: column; border: 0; padding: 0; margin: 0; }
.field + .field { margin-top: var(--s7); }

.field__label { color: var(--smoke); margin-bottom: var(--s3); padding: 0; }

/* §7.11 text field: bone fill, no border at rest, 1dp ink bottom rule. */
.field__input {
  height: var(--control);
  width: 100%;
  background: var(--bone);
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: var(--r0);
  padding: 0 var(--s4);
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  transition: background 120ms var(--curve-standard),
              border-color 120ms var(--curve-standard);
}
.field__input::placeholder { color: var(--ash); }
.field__input:focus {
  outline: none;
  background: var(--surface);
  border-bottom-width: 2px;
  padding-bottom: 1px;              /* hold the 52px box as the rule thickens */
}
/* "focused → label → ink", §7.11. */
.field:focus-within .field__label { color: var(--ink); }

.field__input[aria-invalid="true"] { border-bottom: 2px solid var(--brick); padding-bottom: 1px; }
/* "error → label → brick", §7.11. The label precedes the input in the DOM,
   so this hangs off a class the script toggles on the wrapper. */
.field--invalid .field__label,
.field--invalid:focus-within .field__label { color: var(--brick); }

.field__error {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--brick);
  margin-top: var(--s3);
}
.field__note {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--smoke);
  margin-top: var(--s4);
}

/* ---- department chips · §7.3 ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s3); }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;                     /* §7.3 — the app's own chip height */
  padding: 0 var(--s3);
  border-radius: var(--r1);
  background: var(--bone);
  border: 1px solid var(--bone);    /* metrics match the selected state exactly */
  color: var(--ink);
  font-size: var(--t-body-sm);
  line-height: var(--lh-flat);
  cursor: pointer;
  transition: background var(--d-instant) var(--curve-standard),
              color var(--d-instant) var(--curve-standard);
}
/* The chip is 34dp to match the app, which is under the 44dp minimum tap
   target. Grow the hit area without moving the ink. */
.chip::after {
  content: "";
  position: absolute;
  inset: -5px 0;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:active { transform: scale(0.96); }
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper-ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Dashed = "you wrote this", never "disabled" — §7.4. */
.chip--other { background: var(--surface); border: 1px dashed var(--hairline-strong); }
.chip--other:has(input:checked) { border-style: solid; }

/* ---- submit · §7.8 primary button ---- */
.wl-submit {
  height: var(--control);
  border-radius: var(--r1);
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--paper-ink);
  font: inherit;
  font-size: 0.75rem;               /* AppType.buttonLabel — 12 */
  letter-spacing: 0.1167em;         /* +1.4 / 12 */
  text-transform: uppercase;
  cursor: pointer;
  margin-top: var(--s8);
  transition: background var(--d-instant) var(--curve-standard);
}
.wl-submit:hover { background: #302D2B; }
.wl-submit:active { transform: scale(0.985); }
.wl-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* "disabled | bone fill, ash label. Never a faded ink fill." */
.wl-submit[disabled] { background: var(--bone); color: var(--ash); cursor: default; transform: none; }

/* ---- success ---- */
/* Opacity plus 8dp of translation on the standard curve — the only motion
   chrome is allowed, and the only motion on this site. */
.waitlist__done { animation: wl-register var(--d-base) var(--curve-standard) both; }
@keyframes wl-register {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.waitlist__tick { width: 28px; height: 28px; color: var(--ink); }

.waitlist__done-head {
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--ink);
  margin-top: var(--s5);
}
.waitlist__done-body {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--ink);
  margin-top: var(--s5);
}
.waitlist__echo { border-bottom: 1px solid var(--ink); }

.waitlist__aside {
  font-size: var(--t-caption);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-caption);
  color: var(--smoke);
  border-top: 1px solid var(--hairline);
  margin-top: var(--s8);
  padding-top: var(--s8);
}



/* ---------- 10. 404 ---------- */
.notfound {
  min-height: 58vh;
  display: grid; place-content: center; justify-items: center;
  text-align: center; gap: var(--s5);
  padding-block: var(--s10);
}

/* ---------- 11. MOTION ---------- */
/* The interface is printed. Only people move — and there is no live person
   on a website, so nothing here animates but a hover fill. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 12. PRINT ---------- */
@media print {
  .site-header, .site-footer, .toc, .skip-link { display: none !important; }
  body { background: #fff; }
  .doc__body { max-width: none; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}