/* ExeFast public legal pages — minimal, legible styling (brief: readability over
   polish). The marketing site (PR B+) introduces the full design system; this is the
   trust-page baseline: high-contrast, system fonts, comfortable measure. */

/* Palette aligned to the pre-launch marketing identity (light paper + signal orange)
   so a footer legal link doesn't jump to a different look; body stays system-font for
   long-form readability (brief: "written to be read"). Contrast: ink/slate on paper
   clears 4.5:1.

   ══════════════════════════════════════════════════════════════════════════════════════════
   🔴 `--signal` IS DELIBERATELY NOT DECLARED HERE — COO ruling, RUN 65. ONE ORANGE.

   This file declared `--signal: #FF4A1C` and, because it is linked AFTER the brand token block
   these pages now inject, it WON — so nine published pages painted a different orange from every
   other surface on the estate. That is DECISION-184's rule ("the accent follows the mark") being
   silently overridden by stylesheet order, and it became visible to a stranger the moment RUN 64
   gave these pages the same header as everywhere else: click Terms from that header and the
   accent changes underneath you.

   🔑 THE DECLARATION IS DELETED RATHER THAN CORRECTED. Setting it to the brand's value here would
   leave two copies of one colour and nothing asserting they agree — which is exactly how this
   drifted in the first place. The value now comes from `brandTokenDeclarations()`, injected in the
   page head by `website/render.mjs`, and `website/test/legal-shell.test.mjs` asserts the RENDERED
   colour against the token so a missing injection cannot fail silently.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --ink: #0D1219;
  --bone: #F4F5F7;
  --card: #FFFFFF;
  --slate: #1C2B47;
  --muted: #5B6675;
  --rule: #DCE0E6;
  --measure: 46rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  border-top: 3px solid var(--signal);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

/* 🔴 overflow-wrap: RUN 64. These documents cite sub-processors' privacy policies as bare URLs,
   and three of them are longer than a phone viewport: /subprocessors scrolled 194px SIDEWAYS at
   390px, which is the whole page moving under the reader's thumb, not just the link. Measured
   from the rendered page, not inferred - the offending boxes were the anchors themselves. */
.legal-doc a, .legal-footer a { color: var(--slate); text-decoration: underline; text-underline-offset: 2px;
  overflow-wrap: anywhere; }
.legal-doc a:hover, .legal-footer a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* 🔴 THE HEADER IS THE PRODUCT'S NOW — RUN 64, founder item 1. `.legal-header`, `.legal-nav`,
   `.legal-nav .brand` and their three link rules lived here and are DELETED, not overridden:
   these pages render `headerHtml()` with `navCss()`'s stylesheet, the same as every other page
   on the estate. They had no collapse at any width, so at 390px eight links sat on two rows and
   `/subprocessors` scrolled 197px sideways.

   ⚠️ `a { text-decoration: underline }` below is a DOCUMENT rule and would underline every nav
   link, so `navCss()`'s `.nav-links a { text-decoration: none }` has to keep winning. It does —
   the token block and `navCss()` are injected in the page head, and equal specificity means the
   later of the two wins. That is why the anchor rule below is scoped to `.legal-doc` rather than
   left bare, which is the one change this file needed rather than a deletion. */

.legal-doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
  /* 🔴 A PHONE MUST NOT SCROLL SIDEWAYS — RUN 64, measured at 375px, not assumed. These documents
     are counsel-set text nobody re-flows for a viewport, and two things in them are wider than a
     small phone: bare sub-processor privacy URLs (handled on the anchor rule above) and one long
     unbroken token in the AUP, which pushed the whole page 3px. `break-word` breaks a word only
     when it cannot otherwise fit, so ordinary prose is unaffected. */
  overflow-wrap: break-word;
}

/* 🔴 THE SUB-PROCESSOR TABLE SCROLLS INSIDE ITSELF, NOT THE PAGE. Measured at 375px: the table is
   368px wide inside 375px of viewport minus 2×1.25rem of padding, so it pushed the document 13px
   sideways — the whole page moving under the reader's thumb, which is far worse than a table they
   can swipe. `display:block` is what gives the table its own scroll container; the row structure
   inside is unchanged. */
.legal-doc table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.legal-doc h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 1rem; }
.legal-doc h2 {
  font-size: 1.3rem;
  margin: 2.25rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.legal-doc h3 { font-size: 1.08rem; margin: 1.5rem 0 0.5rem; }
.legal-doc p { margin: 0 0 1rem; }
.legal-doc ul { margin: 0 0 1rem; padding-left: 1.4rem; }
.legal-doc li { margin: 0.3rem 0; }
.legal-doc strong { font-weight: 650; }

.legal-index { list-style: none; padding-left: 0; }
.legal-index li { margin: 0.6rem 0; font-size: 1.05rem; }

.legal-footer {
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.legal-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; }
.legal-footer-links a { color: var(--muted); }
.legal-footer-meta { margin: 0; font-size: 0.85rem; }

/* Tables (e.g. the Referral Program reward schedule). */
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}
.legal-doc th, .legal-doc td {
  border: 1px solid var(--rule);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.legal-doc thead th { background: var(--card); font-weight: 650; }