/* ============================================================
   Legal pages — a narrow reading column.
   Loads AFTER css/aw-base.css and css/jc.css, exactly like every other page.

   ⛔ REWRITTEN 16 Sep. This file used to name the tokens from css/tokens.css
   (--deep, --accent-bright, --ink, --surface, --paper …), which is the
   SUPERSEDED turquoise palette. That made /privacy-policy/ and /terms/ the only
   pages on the site running a second, contradictory set of brand colours — the
   exact "second place that names a value" failure CLAUDE.md §3 is written about.
   The variable names below are now jc.css's own, so these pages retint with
   everything else and there is nothing left to keep in sync.

   ⛔ css/tokens.css, css/base.css and css/scale.css are now loaded by NO page.
   Do not revive them. If something here is missing, add it to jc.css.

   The dosage rule from jc.css §12 holds here too: the accent means "press me",
   so the only accent-coloured thing on a legal page is a link in the body copy.
   The eyebrow and the tldr rule take the neutral --label.
   ============================================================ */

/* The dark band under the header. --charcoal is the deep ground in BOTH themes,
   so this stays a band rather than becoming a white-on-white gap in light. */
.subhero {
  background: var(--charcoal); color: var(--bone);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.subhero .eyebrow { color: var(--label); display: flex; align-items: center; gap: .75rem; }
.subhero .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--label); opacity: .8; flex: none; }
.subhero h1 { color: var(--bone); max-width: 20ch; line-height: 1.08; letter-spacing: -0.018em; }
.subhero__meta { color: var(--bone-faint); font-size: var(--fs-sm); margin: var(--space-sm) 0 0; }

.prose { max-width: 68ch; padding-block: var(--section-y); }
.prose h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  margin: var(--space-xl) 0 var(--space-sm);
  padding-top: var(--space-md); border-top: 1px solid var(--hairline);
}
.prose h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.15rem; margin: var(--space-lg) 0 var(--space-2xs); }
.prose p, .prose li { color: var(--bone-dim); line-height: 1.75; }
.prose strong { color: var(--bone); font-weight: 600; }
.prose ul { padding-left: 1.15rem; margin: 0 0 var(--space-sm); }
.prose li { margin-bottom: .4rem; }
/* the one accent on the page: a real link in the body copy */
.prose a { color: var(--accent-text); text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--hairline-2); }
.prose th { color: var(--bone); font-weight: 600; }

/* The short version block: the thing people actually read */
.prose__tldr {
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-left: 3px solid var(--label-line); border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-xl);
}
.prose__tldr h2 { border: 0; padding: 0; margin: 0 0 var(--space-2xs); font-size: 1.15rem; }
.prose__tldr p:last-child { margin-bottom: 0; }

/* The legal header is a bare logo bar, so it needs the one rule base.css used to
   carry for it. Ported here rather than reviving base.css. */
.funnel-header__logo { height: 52px; width: auto; }
@media (min-width: 768px) { .funnel-header__logo { height: 58px; } }

@media print {
  .subhero { background: #fff; color: var(--bone); padding-block: 0 1rem; }
  .subhero h1 { color: var(--bone); }
  .prose { max-width: 100%; padding-block: 0; }
}