/* ═════════════════════════════════════════════════════════════════════
   PULSE Legal — "Instrument document" (terms / privacy / refund)
   Long-form prose rendered as a precision spec document: a readable single
   column, a cyan channel marker on the title, monospace metadata + index,
   hairline section rules, Ion Cyan used sparingly as the live "signal".
   Matches the v3 landing / pricing / auth language (tokens-v3.css).

   SCOPING: element selectors are scoped to the content column (.legal-page
   .w …) — NEVER bare .legal-page a/p/li — so they cannot touch the shared
   nav (which lives outside .w; a bare `.legal-page a` recoloured the cyan
   Download button text to cyan-on-cyan). Component classes (.toc, .legal-
   note, .promise-card, .legal-footer) are unique enough to scope directly.

   Includes the shared print stylesheet (legal docs are routinely printed)
   so each page no longer needs an inline <style>.

   Depends on shared.css (loaded first) + tokens-v3.css + bg.css.
   ═════════════════════════════════════════════════════════════════════ */

.legal-page {
  font-family: var(--font-display);
  background: var(--ink-0);
  color: var(--text-1);
  line-height: var(--lead-body);
}

/* ── Content column ─────────────────────────────────────────────────── */
.legal-page .w {
  position: relative;
  z-index: var(--z-content);
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(92px, 12vh, 120px) var(--sp-6) var(--sp-9);
}

/* ── Title with a cyan channel rule (instrument marker) ─────────────── */
.legal-page .w h1 {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: var(--track-mega);
  line-height: 1.06;
  color: var(--text-1);
  margin: 0 0 var(--sp-3);
  padding-top: var(--sp-4);
  text-wrap: balance;
}
.legal-page .w h1::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--c-500), transparent);
}

/* ── Metadata line ──────────────────────────────────────────────────── */
.legal-page .updated {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--sp-5);
  font-variant-numeric: tabular-nums;
}

/* ── "English authoritative" note → instrument note panel ───────────── */
.legal-page .legal-note {
  border: 1px solid var(--line-2);
  border-inline-start: 2px solid var(--line-accent);
  border-radius: var(--r-2);
  background: oklch(0.08 0.006 250 / 0.5);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-7);
  font-family: var(--font-mono);
  font-size: var(--tx-xs);
  line-height: 1.6;
  color: var(--text-3);
}

/* ── Table of contents → index panel (overrides shared.css) ─────────── */
.legal-page .toc {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: oklch(0.08 0.006 250 / 0.4);
}
.legal-page .toc strong {
  display: block;
  position: relative;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--sp-4);
  padding-inline-start: 16px;
}
.legal-page .toc strong::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 50%;
  width: 9px; height: 1px;
  transform: translateY(-50%);
  background: var(--c-500);
}
.legal-page .toc ol {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-6);
}
@media (max-width: 600px) { .legal-page .toc ol { grid-template-columns: 1fr; } }
/* NOTE: these three carry an extra `.w` (specificity 0,3,1) so they beat the
   prose-link / body-li rules `.legal-page .w li a|li` (0,2,2) — without it the
   TOC index would inherit cyan+underline + body spacing. TOC is always in .w. */
.legal-page .w .toc li { margin: 0; }
.legal-page .w .toc a {
  display: block;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: 0.01em;
  color: var(--text-2);
  text-decoration: none;
  border: 0;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-2) var(--ease-out-quart);
}
.legal-page .w .toc a:hover { color: var(--c-400); }

/* ── Section headers — hairline rule between sections ───────────────── */
.legal-page .w h2 {
  font-family: var(--font-display);
  font-size: var(--tx-lg);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--text-1);
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
  scroll-margin-top: 88px; /* TOC anchors must clear the fixed nav */
}
.legal-page .w h3 {
  font-family: var(--font-display);
  font-size: var(--tx-base);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--text-1);
  margin: var(--sp-6) 0 var(--sp-3);
  scroll-margin-top: 88px;
}

/* ── Body copy ──────────────────────────────────────────────────────── */
.legal-page .w p,
.legal-page .w li {
  font-size: var(--tx-sm);
  color: var(--text-2);
  margin: 0 0 var(--sp-4);
  line-height: var(--lead-body);
}
.legal-page .w ul,
.legal-page .w > ol { padding-inline-start: var(--sp-5); margin: 0 0 var(--sp-4); }
.legal-page .w li { margin-bottom: var(--sp-2); }
.legal-page .w li::marker { color: var(--c-700); }
.legal-page .w strong { color: var(--text-1); font-weight: 700; }

/* Inline prose links: cyan + underlined so they're distinguishable
   without relying on colour alone (WCAG 1.4.1 / link-in-text-block). */
.legal-page .w p a,
.legal-page .w li a {
  color: var(--c-400);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-page .w p a:hover,
.legal-page .w li a:hover { text-decoration-thickness: 2px; }

/* ── Refund "money-back" highlight → instrument signal panel ────────── */
.legal-page .promise-card {
  position: relative;
  border: 1px solid var(--line-accent);
  border-radius: var(--r-3);
  background: oklch(0.10 0.06 184 / 0.05);
  box-shadow: var(--glow-c-sm), var(--inner-bevel);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-5) 0;
  font-size: var(--tx-sm);
  color: var(--text-1);
  overflow: hidden;
}
.legal-page .promise-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-500), transparent);
}
.legal-page .promise-card strong { color: var(--c-400); }

/* ── Footer link row (AA-contrast muted nav, not cyan) ──────────────── */
.legal-page .legal-footer {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: 0.04em;
}
.legal-page .legal-footer a {
  color: var(--text-2);
  text-decoration: none;
  margin: 0 12px;
  transition: color var(--dur-2) var(--ease-out-quart);
}
.legal-page .legal-footer a:hover { color: var(--c-400); }

/* ── Light-mode panel surfaces (tokens flip text/line/ink) ──────────── */
[data-theme="light"] .legal-page .legal-note,
[data-theme="light"] .legal-page .toc {
  background: oklch(0.99 0.003 250 / 0.6);
}
[data-theme="light"] .legal-page .promise-card {
  background: oklch(0.92 0.06 184 / 0.18);
}
/* Light-mode prose links: the bright signal cyan fails contrast on a
   near-white background — use a dark teal (still on-brand, AA-compliant). */
[data-theme="light"] .legal-page .w p a,
[data-theme="light"] .legal-page .w li a,
[data-theme="light"] .legal-page .promise-card strong { color: var(--c-800); }

/* ════════════════════════════════════════════════════════════════════
   PRINT — legal docs are routinely printed. Strip motion, background,
   decorations, navigation; render plain black-on-white with link URLs.
   ════════════════════════════════════════════════════════════════════ */
@media print {
  .grain, .vignette, .bg-halo, #star-flow, .nav, .toc, .skip-link { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .legal-page .w { padding-top: 24px; }
  .legal-page .w h1::before, .legal-page .promise-card::after { display: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  .legal-page .w h1, .legal-page .w h2, .legal-page .w h3 { color: #000 !important; page-break-after: avoid; border-color: #ccc !important; }
  .legal-page .w p, .legal-page .w li { color: #222 !important; font-size: 11pt; line-height: 1.5; orphans: 3; widows: 3; }
  .legal-page .legal-note, .legal-page .promise-card { border-color: #ccc !important; background: #fff !important; color: #222 !important; }
  .legal-page .legal-footer { border-color: #ccc !important; }
  .updated { font-style: italic; }
}