/* =============================================================================
   Roadie — marketing site
   -----------------------------------------------------------------------------
   REGISTER 02: marketing & community. Road case, overspray, gaffer tape, die-cut
   stickers. This is the register the PRODUCT UI is forbidden from using — see
   roadie/design.md, "Two rules that govern everything". Do not copy this file
   into apps/web; the dock gets a half-second glance and grit costs legibility
   exactly when legibility is the whole point.

   Tokens below are transcribed from roadie/apps/web/src/theme.ts. That file is
   canonical for colour; this one is downstream of it.
   ========================================================================== */

/* ---- Fonts. Self-hosted, SIL OFL 1.1, no CDN (nothing to break offline). ---- */
@font-face {
  font-family: 'Saira Stencil One';
  src: url('../fonts/saira-stencil-one-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Saira';
  src: url('../fonts/saira-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Saira';
  src: url('../fonts/saira-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Saira';
  src: url('../fonts/saira-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('../fonts/martian-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('../fonts/martian-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Dark neutrals, cool-biased — theme.ts `dark` */
  --d0:#EDF0F2; --d1:#CBD3D9; --d2:#B3BCC3; --d3:#9EAAB3;
  --d4:#2C3338; --d5:#21262B; --d6:#181C1F; --d7:#101315; --d8:#0B0E10; --d9:#06090A;

  /* Anodised blue — INTERACTIVE only, never state */
  --blue:#3E8FF0; --blue-5:#519AF2;

  /* Semantic highlights. Road-crew colour language: hazard = look at this,
     stop = dead, go = tested. These mean STATE; blue means INTERACTIVE.
     Keep the vocabularies apart or there is no colour left to signal a control. */
  --hazard:#EFD01B; --stop:#E02D18; --go:#2FA84F;

  --ink:#0B0E10;             /* the near-black that ALWAYS rides a hazard fill */
  --font-body:'Saira', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:'Saira Stencil One', Impact, sans-serif;
  --font-mono:'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 74rem;
}

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

/* `position: relative` + min-height so a short page still fills the viewport.
   NEVER `fixed` on the grain — see design.md, Texture. */
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  background: var(--d8);
  color: var(--d1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  /* `clip`, NOT `hidden`. Both contain the rotated stickers, but `hidden`
     makes body a scroll container (and `overflow` propagates between html and
     body in ways that bite `position: sticky`). `clip` just clips. */
  overflow-x: clip;
}

/* ---- The road-case grain. 128px seamless tile, overlay blend so ONE asset
        serves any ground. Natural size only: scaling changes the frequency and
        it stops reading as one material.

   0.70 is the house value AND the ceiling. This is the spec's page-level case:
   an absolutely-positioned layer on a `position: relative` body, so it spans the
   full scroll height. Never `fixed` — that pins the tile to the viewport, so
   scrolling slides the page over a stationary surface, which with a seamless
   tile reads unmistakably as a bug.
   ---------------------------------------------------------------------- */
body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../texture/road-case-128.png');
  background-repeat: repeat;
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: 0.70;
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* Per-surface grain — the same pattern scoped to a raised surface, so a card
   reads as the same material as the case it sits in. */
.textured { position: relative; isolation: isolate; }
.textured::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../texture/road-case-128.png');
  background-repeat: repeat;
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: 0.70;
  pointer-events: none;
  z-index: 0;
}
.textured > * { position: relative; z-index: 1; }

/* =============================== TYPE ===================================== */

/* Display: Saira Stencil One. Uppercase always, tracked, and never below 44
   DEVICE px — below that the stencil bridges close and it becomes a damaged
   sans. Sized against 1x on purpose. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 0.95;
  margin: 0;
}

/* The small wordmark — what the logotype becomes below the 44px floor. */
.wordmark-sm {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1;
}

/* All headlines uppercase. The stencil only works in caps, and headings
   agreeing with it keeps one register instead of two. */
h2, h3 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--d0);
}
h2 { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.35rem); }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); font-weight: 600; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Eyebrow — uppercase, tracked, dimmed. The house label for a section. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--d3);
  margin: 0 0 0.9rem;
}

/* Data: monospace + tabular figures for anything that can change. */
.data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--d3); }
strong { color: var(--d0); font-weight: 700; }

/* ------- The overspray headline. Marketing register ONLY. A stencil sprayed
   through a card leaves a soft halo where paint carried past the cut edge; two
   blurred copies behind the crisp glyphs is the cheapest honest version. */
.overspray { position: relative; display: inline-block; color: var(--d0); }
.overspray::before,
.overspray::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.overspray::before { filter: blur(11px); opacity: 0.34; }
.overspray::after  { filter: blur(3px);  opacity: 0.22; }

/* =========================== GAFFER TAPE ================================== */
/* Matte black cloth tape. The fibre weave is a 1px repeating gradient; the torn
   ends are a clip-path with irregular points, because gaffer tears ragged and
   never cuts clean. Tape is a FASTENER here — it holds things down. */
.tape {
  position: absolute;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.30) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #22262a 0%, #15181b 45%, #0e1113 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,0.65);
  clip-path: polygon(
    0% 8%, 2% 0%, 6% 6%, 12% 1%, 20% 5%, 34% 0%, 52% 4%, 70% 0%, 86% 5%, 94% 1%, 100% 7%,
    100% 92%, 96% 100%, 88% 94%, 74% 99%, 58% 95%, 42% 100%, 26% 95%, 14% 100%, 6% 94%, 0% 99%
  );
  z-index: 3;
}
.tape-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--d2);
  opacity: 0.72;
  white-space: nowrap;
}

/* Hazard striping. 45 degrees, always — no other angle. Never put text directly
   on it, and never run two striped elements in one view. This page uses it
   twice, and they sit a full screen apart on purpose. */
.hazard-strip {
  height: 14px;
  background: repeating-linear-gradient(45deg, var(--hazard) 0 16px, var(--ink) 16px 32px);
  border-block: 1px solid var(--d9);
}

/* ============================ LOCKUP FRAME ================================ */
/* Rule at 14% of font size, square corners, padding 0.75x cap height.
   max(1px, …) so a 14% rule on small type never rounds to nothing and the
   frame silently disappears. */
.lockup {
  --fs: 1rem;
  --cap: calc(var(--fs) * 0.7);
  display: inline-block;
  border: max(1px, calc(var(--fs) * 0.14)) solid currentColor;
  border-radius: 0;
  padding: calc(var(--cap) * 0.75);
  line-height: 1;
}

/* Die-cut sticker — a lockup, rotated, with a drop shadow. Marketing only. */
.sticker {
  position: absolute;
  background: var(--d0);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,0.7);
  z-index: 4;
}

/* ============================== LAYOUT ==================================== */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Plans: preview only; all commercial details are TBD. */
.plans-home { text-decoration: none; }
section.plans-intro { padding-bottom: 2.5rem; }
.plans-intro .display { font-size: clamp(2.75rem, 7vw, 5.5rem); }
section.plans-comparison { padding-top: 0; }
.plans-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.plans-card { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--d4); background: var(--d6); }
.plans-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.plans-card-head h2 { font-size: 1.5rem; }
.plans-status { border: 1px solid var(--d4); padding: 0.2rem 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--d3); }
.plans-price { font-size: 2.75rem; font-weight: 700; line-height: 1; margin: 0.5rem 0 1rem; color: var(--d0); }
.plans-per { font-size: 1rem; font-weight: 600; color: var(--d3); margin-left: 0.25rem; }
.plans-lock { margin: 0 0 1.5rem; font-weight: 600; color: var(--d1); }
.plans-status-founding { border-color: var(--hazard); color: var(--d0); }
.plans-promise { margin-top: 3rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--hazard); background: var(--d7); }
.plans-promise h2 { margin-bottom: 1.5rem; }
.plans-promise-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.plans-promise-list p { margin: 6px 0 0; color: var(--d3); font-size: 15px; line-height: 1.6; }
@media (max-width: 44rem) { .plans-promise-list { grid-template-columns: 1fr; } }
.plans-details { margin: 1.5rem 0 0; }
.plans-details > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--d4); }
.plans-details dd { margin: 0; color: var(--d3); }
.plans-note { font-size: 0.875rem; margin-block: 1.25rem 3.5rem; }
.plans-note a { color: var(--d1); }
.plans-next { border-top: 1px solid var(--d4); padding-top: 2rem; }
@media (max-width: 44rem) { .plans-grid { grid-template-columns: 1fr; } }
@media (max-width: 30rem) { .site-head { flex-wrap: wrap; } }
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.rule-top { border-top: 1px solid var(--d4); }
.lede { max-width: 60ch; color: var(--d2); margin-top: 1rem; }

/* ---- Header ---- */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--d4);
  /* Opaque, and deliberately NOT `backdrop-filter`. Frosted glass is the wrong
     material for a stamped flight case, and a blurred backdrop would have to
     resample the full-page grain layer behind it on every scroll frame for an
     effect the road-case language does not want anyway. */
  background: var(--d9);
  position: sticky; top: 0; z-index: 20;
}
/* Below the 44px stencil floor the wordmark switches to Saira 700 — the frame
   does not rescue a small stencil. */
.brand-lockup { display: flex; align-items: center; gap: 0.6rem; color: var(--d0); }
.brand-lockup svg { display: block; }
.site-head .wordmark-sm { font-size: 1.0625rem; }
.head-actions { display: flex; align-items: center; gap: 0.65rem; }
@media (max-width: 30rem) {
  .site-head { gap: 0.65rem; }
  .site-head .btn { padding: 0.65rem 0.8rem; font-size: 0.75rem; }
  .head-actions { gap: 0.4rem; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(38rem, 68vw, 48rem);
  padding-block: clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
  background: var(--d9);
}
.hero-media,
.hero-media img,
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-media { z-index: -2; }
.hero-media img {
  display: block;
  object-fit: cover;
  object-position: center center;
}
.hero-scrim {
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(6,9,10,0.34) 59%, rgba(6,9,10,0.92) 100%),
    linear-gradient(0deg, rgba(6,9,10,0.42), transparent 34%);
}
.hero-copy {
  width: min(34rem, 48vw);
  margin-inline: auto var(--gutter);
  padding-inline: 0;
  text-align: right;
  text-shadow: 0 2px 18px rgba(0,0,0,0.82);
}
.hero .display {
  /* clamp floor is 3.25rem = 52px at 1x, comfortably over the 44px floor */
  font-size: clamp(3.25rem, 1.8rem + 5vw, 6.25rem);
}
.hero-sub {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  color: var(--d1);
  max-width: 46ch;
  margin: 1.6rem 0 0 auto;
}
.hero-lede { max-width: 52ch; margin: 1.25rem 0 0 auto; color: var(--d1); }
.hero-copy .dim { margin-left: auto; color: var(--d2); }
.hero-copy .cta-row { justify-content: flex-end; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; align-items: center; }
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 0.875rem;
  padding: 0.85rem 1.5rem;
  border-radius: 2px;              /* xs. The case is stamped metal, not a pill. */
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
/* Blue = interactive. The only vocabulary allowed on a control. */
.btn-primary { background: var(--blue); color: var(--ink); }
.btn-primary:hover { background: var(--blue-5); }
.btn-ghost { border-color: var(--d4); color: var(--d1); }
.btn-ghost:hover { border-color: var(--d3); color: var(--d0); }

@media (max-width: 54rem) {
  .hero { display: block; min-height: 0; padding: 0 0 3.5rem; }
  .hero-media { position: relative; display: block; aspect-ratio: 16 / 9; }
  .hero-media img { object-position: center center; }
  .hero-scrim {
    background: linear-gradient(0deg, var(--d9) 0, rgba(6,9,10,0.18) 42%, transparent 70%);
  }
  .hero-copy {
    width: auto;
    margin-inline: auto;
    padding: 2.5rem var(--gutter) 0;
    text-align: left;
    text-shadow: none;
  }
  .hero-sub { margin-left: 0; }
  .hero-lede, .hero-copy .dim { margin-left: 0; }
  .hero-copy .cta-row { justify-content: flex-start; }
}

/* ---- Pull quote ---- */
.pull {
  border-left: 4px solid var(--hazard);
  padding: 0.3rem 0 0.3rem 1.4rem;
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.35;
  color: var(--d0);
  max-width: 42ch;
}
.pull cite { display: block; margin-top: 0.9rem; font-size: 0.875rem; font-style: normal; color: var(--d3); }

/* ---- Cards / grid ---- */
.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }

.card {
  position: relative;
  background: var(--d7);
  border: 1px solid var(--d4);
  border-radius: 2px;
  padding: 1.5rem 1.4rem 1.4rem;
}
.card h3 { margin-bottom: 0.55rem; }
.card p { font-size: 0.9375rem; color: var(--d2); }

/* The card the whole product was built around — taped down, literally. */
.card-feature { padding-top: 2.4rem; }
.card-feature > .tape { width: 132px; height: 34px; top: -13px; left: 26px; transform: rotate(-1.6deg); }

/* ---- Spec list: what lands on the raid card ---- */
.spec { list-style: none; margin: 0; padding: 0; }
.spec li {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.35rem 1.75rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--d4);
  align-items: baseline;
}
.spec li:last-child { border-bottom: 1px solid var(--d4); }
.spec dfn {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  font-size: 0.8125rem;
  color: var(--d0);
}
.spec span { color: var(--d2); font-size: 0.9375rem; }
@media (max-width: 44rem) { .spec li { grid-template-columns: 1fr; } }

/* ---- Status lamps. Shape carries the state as well as colour, because a
        coloured dot is unreadable to a colourblind viewer and to a stream
        capture that has crushed the palette — both ordinary conditions. ---- */
.lamp {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
}
.lamp svg { flex: none; }
.lamp-go { color: var(--go); }
.lamp-caution { color: var(--hazard); }   /* hazard as ink, on a dark ground only */
.lamp-off { color: var(--d3); }

.status-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--d4);
}
.status-col > .grid { gap: 0.8rem; }
.status-col .card { padding: 1.15rem 1.1rem; }

/* A hazard FILL always carries near-black ink. No exceptions — a yellow field
   with inherited text is the failure mode, not an edge case. */
.badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.25rem 0.5rem; border-radius: 2px;
}
.badge-hazard { background: var(--hazard); color: var(--ink); }
.badge-go { background: var(--go); color: var(--ink); }
.badge-off { border: 1px solid var(--d4); color: var(--d3); }

/* ---- Exclusions ---- */
.not-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.not-list li { display: flex; gap: 0.8rem; align-items: baseline; color: var(--d2); font-size: 0.9375rem; }
.not-list .x { color: var(--stop); font-weight: 700; flex: none; font-family: var(--font-mono); }

/* ---- Limits ---- */
.limits { display: grid; gap: 0.9rem; }
.limits div { padding-left: 1rem; border-left: 2px solid var(--d4); font-size: 0.9375rem; color: var(--d2); }

/* ---- Form fields. Inset wells in a stamped panel: square, recessed, no rounding. ---- */
.field {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--d0);
  background: var(--d9);
  border: 1px solid var(--d4);
  border-radius: 2px;
  padding: 0.7rem 0.85rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field::placeholder { color: var(--d3); opacity: 0.75; }
.field:focus {
  outline: none;
  /* Blue = interactive, and a focused field is the most interactive thing on the page. */
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(62, 143, 240, 0.25);
}
textarea.field { resize: vertical; min-height: 5.5rem; line-height: 1.5; }

/* The honeypot. Positioned off-screen rather than `display: none` — plenty of bots skip inputs
   that are display-hidden, and this one wants to be filled in. It stays unreachable for real
   people through `aria-hidden` and `tabindex="-1"` in the markup, not through this rule. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Footer ---- */
.site-foot {
  border-top: 1px solid var(--d4);
  padding: 2.5rem var(--gutter) 3rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  align-items: center; justify-content: space-between;
  font-size: 0.8125rem; color: var(--d3);
}
.site-foot a { color: var(--d1); text-decoration: none; border-bottom: 1px solid var(--d4); }
.site-foot a:hover { color: var(--d0); border-color: var(--d3); }
.site-foot a.btn { padding: 0.65rem 1rem; border: 1px solid var(--d4); }

/* ---- Focus. Visible, and in the interactive vocabulary. ---- */
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- Legal pages: /privacy and /terms ----------------------------------
   REGISTER 01 ON A REGISTER 02 SITE, deliberately. design.md's road-case
   language — overspray, gaffer tape, hazard striping — is for things people
   look AT. A policy is a thing people read to find one clause, and every
   piece of grit here is a thing between them and it. So: no texture, no
   stickers, no display face. The lockup in the header and footer is all
   that carries the brand, which is also all a reviewer needs to see that
   the page belongs to the product.

   Layout only. No colour is invented here — every value is an existing
   token, per the README's rule that a missing colour goes into theme.ts
   first and gets transcribed, never minted in this file. */
.legal { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem); }
.legal .wrap { max-width: 48rem; }

.legal h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: 0.01em; }
.legal h2 {
  font-size: 1.125rem; margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--d4); color: var(--d0);
}
.legal h3 { font-size: 0.9375rem; margin-top: 1.75rem; color: var(--d1); }

/* 68ch, not the 60ch of .lede. A marketing lede is scanned; this is read in
   full, and prose set too narrow makes a long document feel even longer. */
.legal p, .legal li { color: var(--d2); max-width: 68ch; }
.legal p { margin-top: 0.9rem; }
.legal ul { margin-top: 0.9rem; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.legal strong { color: var(--d1); }
.legal a { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--d4); }
.legal a:hover { border-color: var(--blue); }

/* The effective date reads as data, not prose — same treatment as every
   other figure on the site. */
.legal .stamp {
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--d3);
  margin-top: 1rem;
}

.legal table { width: 100%; border-collapse: collapse; margin-top: 1.1rem; font-size: 0.9375rem; }
.legal th, .legal td {
  text-align: left; padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--d4); vertical-align: top; color: var(--d2);
}
.legal th { color: var(--d1); font-weight: 600; }

/* =========================================================================
   REDESIGN 2026-09-19 — the tool-suite one-pager
   -------------------------------------------------------------------------
   Everything below is additive. The marketing register (road case, overspray,
   stickers, hazard tape) stays exactly as above; what is new is the layout for
   the three tool pillars, the framed product-UI mockups, and the scroll/enter
   animation. The mockups deliberately drop into REGISTER 01 (flat, aluminium,
   square, mono figures — see roadie/design.md) because they are showing the
   product, which is a thing people look THROUGH, not a poster.
   ========================================================================= */

/* ---- Enter/scroll animation. Progressive enhancement only: without the small
        site.js the `.reveal` class is never armed, so everything renders in
        place. Reduced-motion drops the transform and the delay. ---- */
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }
/* The raid card populates field by field, on air — "context arrives before you need it". Same
   mechanism as .reveal, staggered by site.js when the card scrolls into view. */
.js .reveal-seq {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 460ms ease, transform 460ms ease;
}
.js .reveal-seq.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-seq { opacity: 1; transform: none; transition: none; }
}

/* ---- The tool-suite strip: StreamElements-style at-a-glance grid of what is
        in the box. Compact, scannable, one line of copy each. ---- */
/* Explicit column counts, not auto-fit: four tiles must not leave an orphan empty cell.
   4-up wide, 2×2 on tablets, stacked on phones. */
.toolgrid { display: grid; gap: 1px; background: var(--d4); border: 1px solid var(--d4);
  grid-template-columns: 1fr; margin-top: 2.25rem; }
@media (min-width: 34rem) { .toolgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .toolgrid { grid-template-columns: repeat(4, 1fr); } }
.tool {
  background: var(--d8); padding: 1.35rem 1.3rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.tool .k {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--d3);
}
.tool h3 { font-size: 1rem; letter-spacing: 0.04em; }
.tool p { font-size: 0.875rem; color: var(--d2); margin: 0; }
.tool .ico { color: var(--blue); }
.tool .ico svg { display: block; }

/* ---- A pillar: copy on one side, a framed product shot on the other.
        Alternates sides down the page. ---- */
.pillar { display: grid; gap: 2.5rem 3.5rem; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.pillar-copy .lede { margin-top: 1rem; }
.pillar-feats { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.pillar-feats li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: baseline;
  color: var(--d2); font-size: 0.9375rem; }
.pillar-feats .tick { color: var(--go); font-family: var(--font-mono); font-weight: 700; flex: none; }
/* On wide screens, let the shot lead on the alternating pillar. */
@media (min-width: 60rem) {
  .pillar.flip .pillar-copy { order: 2; }
  .pillar.flip .shot { order: 1; }
}

/* =========================== PRODUCT-UI MOCKUPS ==========================
   The framed "screenshots". A bezel with a fake title bar, then the app in
   register 01. These are faithful to the real components (apps/web) and use
   the real fixture data shapes; swap for PNG captures without touching layout.
   NO road-case texture here on purpose — the product is flat and quiet. */
.shot {
  margin: 0;
  border: 1px solid var(--d4);
  border-radius: 3px;
  background: var(--d7);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.9), 0 2px 0 rgba(255,255,255,0.02) inset;
  overflow: hidden;
  container-type: inline-size;
}
.shot-bar {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.85rem; background: var(--d9); border-bottom: 1px solid var(--d4);
}
.shot-bar .cm { color: var(--d0); display: flex; }
.shot-bar .cm svg { display: block; }
.shot-bar .wm { font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.10em; font-size: 0.75rem; color: var(--d0); }
.shot-bar .tab { margin-left: auto; font-family: var(--font-mono); font-size: 0.5625rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d3); }
.shot-lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--go); flex: none; }
.js .shot-lamp { animation: lampPulse 2.4s ease-in-out infinite; }
@keyframes lampPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(47,168,79,0.55); } 50% { box-shadow: 0 0 0 4px rgba(47,168,79,0); } }
.shot-body { padding: 1rem; }

/* Shared product-UI primitives (register 01). */
.ui { color: var(--d1); font-size: 0.8125rem; }
.ui-eyebrow { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--d3); }
.ui-fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; color: var(--d0);
  line-height: 1; }
.ui-divider { height: 1px; background: var(--d4); margin: 0.7rem 0; }
.ui-pill { display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: 0.5625rem; letter-spacing: 0.02em; padding: 0.18rem 0.42rem; border: 1px solid var(--d4);
  color: var(--d2); border-radius: 2px; white-space: nowrap; }
.ui-pill.go { color: var(--go); border-color: color-mix(in srgb, var(--go) 45%, var(--d4)); }
.ui-pill.new { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, var(--d4)); }
.ui-pill.warn { color: #c9ad12; border-color: color-mix(in srgb, var(--hazard) 40%, var(--d4)); }
.ui-play {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 50%, var(--d4)); border-radius: 2px;
  color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.ui-play svg { display: block; }

/* --- Raid card (streamer intelligence) --- */
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rc-id { display: flex; gap: 0.7rem; align-items: center; min-width: 0; }
.rc-av { width: 46px; height: 46px; border-radius: 2px; flex: none;
  background: linear-gradient(135deg, var(--d4), var(--d6)); display: grid; place-items: center;
  color: var(--d1); font-weight: 800; font-family: var(--font-body); object-fit: cover; }
.rc-name { font-size: 1.9rem; }
.rc-login { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--d3); }
.rc-viewers { text-align: right; flex: none; }
.rc-viewers .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 1.9rem; color: var(--d0); line-height: 1; }
.rc-viewers .l { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--d3); }
.rc-was { font-size: 1.05rem; font-weight: 700; color: #c9ad12; line-height: 1.15; }
.rc-hook { font-size: 0.875rem; color: var(--d1); }
.rc-clip { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }
.rc-clip .day { font-family: var(--font-mono); font-size: 0.625rem; color: #c9ad12; font-weight: 700;
  text-transform: uppercase; width: 46px; flex: none; }
.rc-clip .day.old { color: var(--d3); font-weight: 400; text-transform: none; }
.rc-clip .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--d1); }
.rc-clip .v { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--d3); flex: none; }
.rc-record { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* --- Clips library --- */
.clips-toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.85rem; }
.clips-search { flex: 1 1 12rem; display: flex; align-items: center; gap: 0.5rem; min-width: 0;
  background: var(--d9); border: 1px solid var(--d4); border-radius: 2px; padding: 0.45rem 0.6rem; color: var(--d3); }
.clips-search svg { flex: none; }
.clips-search .ph { font-size: 0.75rem; color: var(--d3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.35rem 0.55rem; border: 1px solid var(--d4); color: var(--d2);
  border-radius: 2px; }
.chip.on { border-color: var(--blue); color: var(--blue); }
.clips-list { display: grid; gap: 1px; background: var(--d4); border: 1px solid var(--d4); }
.clip-row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 0.7rem; align-items: center;
  background: var(--d7); padding: 0.55rem 0.7rem; }
.clip-row:nth-child(even) { background: var(--d6); }
.grade { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 2px;
  font-family: var(--font-body); font-weight: 800; font-size: 0.8125rem; flex: none; color: var(--ink); }
.grade.a { background: var(--go); }
.grade.b { background: #7bb35a; }
.grade.c { background: var(--hazard); }
.grade.d { background: #d98a2b; }
.grade.f { background: var(--stop); color: var(--d0); }
.clip-t { min-width: 0; }
.clip-t .h, .clip-t .s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-t .h { color: var(--d0); font-size: 0.8125rem; }
.clip-t .s { color: var(--d3); font-size: 0.6875rem; margin-top: 0.1rem; }
.clip-meta { font-family: var(--font-mono); font-size: 0.625rem; color: var(--d3); text-align: right; flex: none; }
.clip-tags { display: flex; gap: 0.25rem; flex: none; }
.clip-tags .g { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--go); border: 1px solid color-mix(in srgb, var(--go) 40%, var(--d4)); padding: 0.1rem 0.3rem; border-radius: 2px; }
@container (max-width: 30rem) { .clip-tags { display: none; } .clip-row { grid-template-columns: 24px 1fr auto; } }

/* --- Roadmap (future) --- */
.rm-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.85rem; }
.rm-list { display: grid; gap: 1px; background: var(--d4); border: 1px solid var(--d4); }
.rm-row { background: var(--d7); padding: 0.7rem 0.8rem; display: grid; gap: 0.15rem; }
.rm-row .top { display: flex; align-items: center; gap: 0.5rem; }
.rm-row .n { font-family: var(--font-mono); font-size: 0.625rem; color: var(--d3); width: 1.4rem; flex: none; }
.rm-row h4 { margin: 0; font-size: 0.8125rem; color: var(--d0); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-row p { margin: 0 0 0 1.9rem; font-size: 0.6875rem; color: var(--d2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st { font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.14rem 0.4rem; border-radius: 2px; flex: none; }
.st.flight { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); }
.st.planned { border: 1px solid var(--d4); color: var(--d3); }
.st.shipped { background: color-mix(in srgb, var(--go) 18%, transparent); color: var(--go); }

/* Count-up figures start at their end value in no-JS; site.js animates them. */


/* Plan copy comes from the same catalog as the dashboard. */
.plans-features { list-style: none; padding: 0; margin: 0; }
.plans-features li { border-top: 1px solid var(--d4); padding: 18px 0; }
.plans-features strong { font-weight: 600; }
.plans-features p { margin: 6px 0 0; color: var(--d3); font-size: 15px; line-height: 1.6; }

/* Creative content pass: one crew, from on air to the next show. */
.skip-link { position: absolute; top: -6rem; left: 1rem; padding: .75rem 1rem; background: var(--blue); color: var(--ink); z-index: 100; }
.skip-link:focus { top: 1rem; }
.crew-pass a:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.signin-link { color: var(--d2); font-size: .8125rem; text-decoration: none; padding: .65rem .2rem; }
.crew-pass .hero { min-height: 46rem; }
.crew-pass .hero-copy { width: min(36rem, 49vw); text-align: left; }
.crew-pass .hero-scrim { background: linear-gradient(90deg, transparent 0 33%, rgba(6,9,10,.55) 48%, rgba(6,9,10,.94) 100%), linear-gradient(0deg, rgba(6,9,10,.6), transparent 35%); }
.crew-pass .crew-headline { font-size: clamp(2.75rem, 5.5vw, 5.5rem); letter-spacing: .015em; line-height: 1.02; }
.crew-pass .hero-lede { font-size: clamp(1rem, 1.4vw, 1.25rem); margin: 1.6rem 0 .7rem; line-height: 1.5; }
.hero-detail { font-size: 1rem; max-width: 47ch; color: var(--d2); margin: 0 0 1.5rem; }
.crew-pass .hero .cta-row { justify-content: flex-start; }
.crew-pass .hero .eyebrow { color: var(--d1); }
.beta-note { font-size: .8125rem; color: var(--d3); line-height: 1.5; margin-top: 1.1rem; max-width: 48ch; }
.crew-pass h2 { font-size: clamp(2rem, 3.3vw, 3.15rem); line-height: 1.08; letter-spacing: -.015em; color: var(--d0); }
.section-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 4rem; align-items: end; }
.section-heading .lede { margin: 0; }
.crew-chapters { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--d4); border: 1px solid var(--d4); }
.crew-chapters a { position: relative; text-decoration: none; color: var(--d2); background: var(--d8); padding: 1.6rem 1.5rem 2.25rem; transition: background 180ms; }
.crew-chapters a:hover { background: var(--d6); }
.chapter-number, .feature-index { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em; color: var(--d3); }
.crew-chapters h3 { margin: 1rem 0 .7rem; font-size: 1.2rem; color: var(--d0); }
.crew-chapters p { font-size: .9375rem; line-height: 1.5; margin: 0; max-width: 26ch; }
.chapter-arrow { position: absolute; right: 1.25rem; bottom: .75rem; color: var(--blue); font-size: 1.5rem; }
.crew-pass .pillar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.section-kicker { padding-top: 1rem; margin-top: 1.7rem; border-top: 1px solid var(--d4); font-size: .875rem; font-weight: 600; color: var(--d0); }
.preview-caption { border-top: 1px solid var(--d4); padding: .55rem .85rem; font-size: .625rem; color: var(--d3); letter-spacing: .02em; }
/* Recorded product clips (video/README.md). The still is the clip's own poster frame, so a reader
   who asked for less motion gets the same picture, standing still. */
.shot-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--d9); }
.still-only { display: none; }
@media (prefers-reduced-motion: reduce) { .motion-only { display: none; } .still-only { display: block; } }
.after-section { background: var(--d9); }
.after-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.5rem; margin-top: 3rem; }
.feature-heading h3 { font-size: 1.45rem; color: var(--d0); margin: .6rem 0; }
.feature-heading p { font-size: .9375rem; color: var(--d2); line-height: 1.65; margin: 0 0 1.5rem; min-height: 6.4rem; }
.recap-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.recap-preview h4 { font-size: 1.6rem; line-height: 1.15; color: var(--d0); margin: 1.1rem 0 .8rem; }
.recap-text { line-height: 1.7; color: var(--d2); }
.recap-beat { margin: 1.25rem 0; padding: .9rem; border-left: 2px solid var(--go); background: var(--d6); display: grid; gap: .4rem; }
.recap-beat p { margin: 0; color: var(--d3); }
.recap-next { border-top: 1px solid var(--d4); padding-top: .9rem; }
.recap-next p { margin: .6rem 0; }
.after-kicker { text-align: center; margin-top: 2.5rem; }
.task-preview .shot-body { padding: 1.25rem; }
.task-row { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; gap: .75rem; padding: 1.2rem 0; border-bottom: 1px solid var(--d4); align-items: start; }
.task-row strong { display: block; font-size: .875rem; line-height: 1.4; }
.task-row small { display: block; margin-top: .4rem; font-size: .6875rem; color: var(--d3); }
.task-box { border: 1px solid var(--d3); width: 13px; height: 13px; margin-top: 4px; }
.task-handoff { padding-top: 1.25rem; }
.task-handoff p { margin-bottom: .3rem; color: var(--d2); }
.context-section { background: var(--d9); }
.maker-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3.5rem; }
.maker-section .lede { font-size: 1.1rem; }
.text-link { color: var(--blue); text-underline-offset: .3rem; display: inline-block; margin-top: 1rem; font-size: .9375rem; }
.crew-pass .beta-grid { align-items: start; gap: 3.5rem; }
.beta-details { display: grid; gap: .65rem; margin: 1.5rem 0; color: var(--d0); font-size: .875rem; }
.beta-details span::before { content: '↗'; color: var(--d3); margin-right: .7rem; }
@media (max-width: 60rem) {
  .crew-pass .hero-copy { width: min(32rem, 53vw); }
  .crew-pass .hero { min-height: 42rem; }
  .crew-pass .pillar { gap: 2rem; }
  .section-heading { gap: 2rem; }
  .after-grid { gap: 1.5rem; }
}
@media (max-width: 44rem) {
  .crew-pass .hero { min-height: 44rem; padding: 3rem 0 7rem; }
  .crew-pass .hero-copy { width: auto; padding-inline: var(--gutter); margin: 0; }
  .crew-pass .hero-scrim { background: linear-gradient(90deg, rgba(6,9,10,.87), rgba(6,9,10,.72)), linear-gradient(0deg,var(--d9),transparent 60%); }
  .crew-pass .hero-media img { object-position: 30% center; }
  .crew-pass .crew-headline { font-size: clamp(44px, 10vw, 64px); }
  .crew-pass .hero-lede { font-size: 1.1rem; }
  .crew-pass .hero-detail { max-width: 44ch; }
  .section-heading, .crew-pass .pillar, .after-grid, .maker-grid { grid-template-columns: 1fr; }
  .crew-chapters { grid-template-columns: 1fr; }
  .crew-chapters a { padding: 1.4rem; }
  .crew-chapters p { max-width: 38ch; padding-right: 1rem; }
  .crew-chapters h3 { margin-top: .65rem; }
  .feature-heading p { min-height: 0; }
  .after-grid { gap: 2.5rem; }
  .crew-pass .pillar.flip .pillar-copy { order: 0; }
  .crew-pass .pillar.flip .shot { order: 1; }
  .features-link { display: none; }
}
@media (max-width: 30rem) {
  .crew-pass .site-head { flex-wrap: nowrap; padding: .9rem var(--gutter); gap: .5rem; }
  .crew-pass .site-head .wordmark-sm { font-size: .875rem; }
  .crew-pass .brand-lockup { gap: .4rem; }
  .crew-pass .brand-lockup svg { width: 17px; }
  .crew-pass .site-head .btn { font-size: .7rem; padding: .55rem .6rem; }
  .signin-link { display: none; }
  .crew-pass .hero .cta-row { gap: .65rem; }
  .crew-pass .hero .btn { font-size: .75rem; padding: .8rem .9rem; }
  .task-row { grid-template-columns: 13px minmax(0,1fr); }
  .task-row > .ui-pill { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .crew-chapters a { transition: none; } }

.crew-pass main section[id] { scroll-margin-top: 6rem; }

.crew-pass .hero { display: grid; }
.crew-pass .hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
@media (min-width: 44.01rem) and (max-width: 54rem) {
  .crew-pass .hero { min-height: 44rem; padding: 3rem 0 7rem; }
  .crew-pass .hero-copy { width: min(38rem, 100%); margin: 0; padding-inline: var(--gutter); }
  .crew-pass .hero-scrim { background: linear-gradient(90deg, rgba(6,9,10,.87), rgba(6,9,10,.72)), linear-gradient(0deg,var(--d9),transparent 60%); }
  .crew-pass .crew-headline { font-size: 60px; }
}
@media (max-width: 44rem) {
  .crew-pass .beta-grid { grid-template-columns: minmax(0, 1fr); }
}

.maker-claim { font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.25; margin: 0 0 1.3rem; color: var(--d1); font-weight: 600; }
.maker-claim strong { font-weight: 700; }
@media (max-width: 54rem) { .crew-pass .hero { padding-bottom: 3rem; } }

/* Account selection remains inline and keyboard reachable; the form never depends on it. */
#channel-suggestions { display: grid; gap: 0.35rem; max-height: 15rem; overflow-y: auto; }
#channel-suggestions:empty { display: none; }
.channel-choice { background: transparent; width: 100%; text-align: left; justify-content: flex-start; cursor: pointer; font-family: var(--font-body, sans-serif); text-transform: none; letter-spacing: normal; }

/* ---- Help: /help and /help/<slug> -------------------------------------
   Generated by help-build.js from help/articles/*.md. Built on .legal:
   an article is read in full, so it is REGISTER 01 like the policies, with
   no texture, stickers or display face. What it adds: screenshots framed
   like the product UI they show, tables that scroll on a phone, a note
   callout, a table of contents and the index cards. Every colour is an
   existing token. */
.help .wrap { max-width: 52rem; }
.help-crumbs { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d3); margin-bottom: 1.25rem; }
.help-crumbs a { color: var(--d2); border-bottom-color: var(--d4); }
.help-lede { font-size: 1.125rem; color: var(--d1) !important; margin-top: 1.25rem !important; }
.help h2 { scroll-margin-top: 5rem; }
.help h3 { scroll-margin-top: 5rem; }
.help ol { margin-top: 0.9rem; padding-left: 1.4rem; display: grid; gap: 0.5rem; }
.help li > ul, .help li > ol { margin-top: 0.5rem; }
.help code { font-family: var(--font-mono); font-size: 0.85em; color: var(--d1); background: var(--d6); border: 1px solid var(--d4); padding: 0.05rem 0.35rem; }
.help-code { margin: 1.1rem 0 0; padding: 0.9rem 1.1rem; background: var(--d6); border: 1px solid var(--d4); white-space: pre-wrap; overflow-wrap: anywhere; }
.help-code code { padding: 0; border: 0; background: none; font-size: 0.85rem; line-height: 1.55; }
.help em { color: var(--d1); }

.help-toc { margin-top: 2rem; padding: 1.1rem 1.25rem; border: 1px solid var(--d4); background: var(--d7); }
.help-toc .eyebrow { margin-bottom: 0.6rem; }
.help-toc ol { margin: 0; gap: 0.3rem; }
.help-toc li { color: var(--d3); }
.help-toc a { color: var(--d1); }

/* A screenshot reads as a window onto the product: square, a 1px aluminium
   rule, no shadow or tilt (that would be the marketing register). The link
   opens the full 2x image for the fine print. */
.help-shot { margin: 1.75rem 0 2rem; }
.help-shot a { display: block; border: 1px solid var(--d4) !important; background: var(--d9); line-height: 0; }
.help-shot a:hover { border-color: var(--d3) !important; }
.help-shot img { display: block; width: 100%; height: auto; }
.help-shot figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--d3); }

.help-note { margin: 1.5rem 0; padding: 0.9rem 1.1rem; border-left: 3px solid var(--hazard); background: var(--d7); }
.help-note p { margin-top: 0; }

.help-table { overflow-x: auto; margin-top: 1.1rem; }
.help-table table { margin-top: 0; min-width: 32rem; }
.help-table .a-center { text-align: center; }
.help-table .a-right { text-align: right; }

.help-app, .help-related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--d4); }
.help-app p:last-child { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.help-app .btn { border-bottom: 1px solid var(--d4); color: var(--d1); }
.help-related ul { list-style: none; padding: 0; margin-top: 0.4rem; }

.help-cards { list-style: none; padding: 0 !important; display: grid !important; gap: 1rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.help-card { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.25rem; border: 1px solid var(--d4) !important; background: var(--d6); color: var(--d2) !important; }
.help-card:hover { border-color: var(--blue) !important; }
.help-card-title { color: var(--d0); font-weight: 700; line-height: 1.3; }
.help-card-summary { font-size: 0.9375rem; flex: 1; }
.help-card .stamp { margin-top: 0.25rem; }
.help-index section { padding-block: 0; margin-top: 2.5rem; }
.help-more { margin-top: 3rem !important; }
@media (max-width: 44rem) { .help-cards { grid-template-columns: 1fr; } }