/* ============================================================================
   legal.css — shared styles for the public legal pages
   ----------------------------------------------------------------------------
   Sits ON TOP of /landing/scrollcraft.css (the token + device floor) and the
   landing's brand overrides, so the legal documents read as the same folio as
   the marketing site: same canvas (#0C0D0F), same accent (#D6552B), same
   Archivo/Geist pairing. Legal pages are documents, not demos — no scroll
   choreography, no devices — just the token floor and careful document
   typography.

   These pages exist for carrier/A2P-10DLC vetting (Twilio loads them
   unauthenticated), so they render fully with JS disabled: no script needed.
   ========================================================================== */

:root {
  --sc-font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --sc-font-text:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, monospace;

  --legal-steel: #2A2E34;
  --legal-zinc:  #3C424A;
  --legal-rule:  color-mix(in oklab, var(--sc-ink) 14%, transparent);
}

html { background: var(--sc-canvas); }

body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* ── folio bar: wordmark left, cross-links right ─────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: var(--sc-3) var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--legal-steel);
}
.bar__mark {
  font-family: var(--sc-font-display); font-weight: 700;
  letter-spacing: -0.02em; font-size: var(--sc-t-sm);
  text-transform: uppercase; text-decoration: none; color: var(--sc-ink);
}
.bar__mark b { color: var(--sc-accent); font-weight: 700; }
.bar__nav { display: flex; gap: var(--sc-4); flex-wrap: wrap; }
.bar__nav a {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.bar__nav a:hover,
.bar__nav a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }

/* ── document shell ──────────────────────────────────────────────────────── */
.doc {
  max-width: 74rem; margin: 0 auto;
  padding: var(--sc-8) var(--sc-gutter) var(--sc-10);
}
.doc__grid { display: grid; gap: var(--sc-8); }
@media (min-width: 900px) {
  .doc__grid { grid-template-columns: 16rem 1fr; gap: var(--sc-9); }
}

/* the running contents rail (desktop) / collapsed definition list (mobile) */
.toc { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.toc h2 {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--sc-ink-soft); margin: 0 0 var(--sc-3);
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); }
.toc a { color: var(--sc-ink-soft); text-decoration: none; display: block;
  padding: var(--sc-1) 0; border-left: 2px solid var(--legal-steel); padding-left: var(--sc-3);
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out); }
.toc a:hover { color: var(--sc-ink); }
.toc li:last-child a { margin-bottom: 0; }
@media (min-width: 900px) {
  .toc { position: sticky; top: var(--sc-9); align-self: start; }
}

/* ── headings + prose ────────────────────────────────────────────────────── */
.body { max-width: 68ch; }
.kicker {
  display: flex; align-items: baseline; gap: var(--sc-4);
  font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  border-top: 1px solid var(--legal-steel);
  padding-top: var(--sc-2); margin: 0 0 var(--sc-4);
}
.kicker b { color: var(--sc-accent); font-weight: 500; }
.doc h1 {
  font-family: var(--sc-font-display); font-size: var(--sc-t-3xl);
  line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight);
  font-weight: 700; text-wrap: balance; margin: 0 0 var(--sc-3);
}
.doc .lede { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); max-width: 46ch; margin: 0 0 var(--sc-5); }
.meta {
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  padding-bottom: var(--sc-6); border-bottom: 1px solid var(--legal-steel); margin-bottom: var(--sc-7);
}
.meta dt { color: var(--sc-ink); font-weight: 500; }
.meta div { display: flex; gap: var(--sc-2); }

.doc h2 {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl);
  line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-snug);
  font-weight: 600; margin: var(--sc-7) 0 var(--sc-3);
  scroll-margin-top: var(--sc-9);
}
.doc h2:first-of-type { margin-top: 0; }
.doc h3 {
  font-family: var(--sc-font-text); font-size: var(--sc-t-base); font-weight: 600;
  margin: var(--sc-5) 0 var(--sc-2); letter-spacing: var(--sc-track-normal);
}
.doc p { margin: 0 0 var(--sc-4); color: var(--sc-ink); }
.doc p,
.doc li { max-width: var(--sc-measure); }
.doc ul, .doc ol { margin: 0 0 var(--sc-4); padding-left: var(--sc-5); display: grid; gap: var(--sc-2); }
.doc li { color: var(--sc-ink); }
.doc a { color: var(--sc-accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.doc a:hover { border-bottom-color: var(--sc-accent); }
.doc strong { font-weight: 600; }
.doc code, .doc kbd {
  font-family: var(--sc-font-mono, ui-monospace, monospace); font-size: 0.92em;
  background: var(--sc-surface); border: 1px solid var(--legal-rule);
  border-radius: var(--sc-r-sm); padding: 0.1em 0.4em;
}

/* ── notice blocks ───────────────────────────────────────────────────────── */
.note {
  border-left: 3px solid var(--sc-accent);
  background: color-mix(in oklab, var(--sc-surface) 70%, var(--sc-canvas));
  padding: var(--sc-4) var(--sc-5);
  margin: var(--sc-5) 0;
  border-radius: 0 var(--sc-r-md) var(--sc-r-md) 0;
}
.note p:last-child { margin-bottom: 0; }
.note__tag {
  font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sc-accent); font-weight: 500; display: block; margin-bottom: var(--sc-2);
}

/* ── quick-facts table (SMS terms) ───────────────────────────────────────── */
.facts { width: 100%; border-collapse: collapse; margin: var(--sc-4) 0 var(--sc-6); font-size: var(--sc-t-sm); }
.facts caption {
  text-align: left; font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft); padding-bottom: var(--sc-3);
}
.facts th, .facts td {
  text-align: left; vertical-align: top;
  padding: var(--sc-3) var(--sc-4); border-bottom: 1px solid var(--legal-steel);
}
.facts th {
  font-weight: 500; color: var(--sc-ink-soft); white-space: nowrap;
  font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase;
}
.facts td { color: var(--sc-ink); }
.facts td strong { color: var(--sc-ink); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--legal-steel);
  padding: var(--sc-5) var(--sc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  flex-wrap: wrap; color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
}
.foot__links { display: flex; gap: var(--sc-4); flex-wrap: wrap; }
.foot a { color: var(--sc-ink-soft); text-decoration: none; border-bottom: 1px solid var(--legal-rule); }
.foot a:hover { color: var(--sc-ink); }

@media (max-width: 640px) {
  .bar__nav { display: none; }
  .facts th, .facts td { display: block; width: 100%; }
  .facts th { border-bottom: none; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bar, .toc a, .bar__nav a { transition: none; }
}