/* Privacy policy — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference "Privacy Policy.dc.html"
 * without its 169 inline styles. Every value below was read out of the reference, not guessed.
 *
 * THIS FILE IS THE TERMS STYLESHEET, RE-SCOPED. The two legal references are the same document
 * shape built from the same vocabulary, so `terms/page.css` transferred essentially whole: the
 * only changes are the scope class, the removal of the appendix rules (Terms has one dark card,
 * Privacy has none), and two additions Privacy needs and Terms does not — an ordered list and
 * inline links. Everything else is byte-identical between the two files on purpose, so that if
 * one of these rules later graduates into the design system it graduates for both at once.
 *
 * THIS PAGE IS A DIFFERENT SHAPE from the audience pages. It is not a stack of designed
 * sections; it is ONE long legal document — three sections (a legal subnav, a small hero, and
 * the body) where the body is a sticky table of contents beside 13 prose cards. So almost all
 * of the styling below is TYPOGRAPHY, declared once as element rules under `.dc-legal` and
 * inherited by ~200 paragraphs. The reference does exactly the same thing: its whole legal
 * type scale lives in a `<style>` block keyed on `[data-legal]`, NOT in the 208 inline styles.
 * That is why this page has so few inline styles for its size, and why the transfer is clean.
 *
 * WHAT CAME FROM THE DESIGN SYSTEM
 *   .section / .page-container   section wrapper + centred measure (geometry overridden below)
 *   .card                        the legal card — bg + radius + shadow, nudged to 18px/soft
 *   --color-* tokens             every colour on the page except two (see below)
 *   var(--shadow-soft)           the card shadow is EXACTLY 0 14px 40px rgba(15,26,79,.07)
 *   var(--font-heading/body/label)  the three faces
 *
 * HOW THE REFERENCE COMPARES TO OUR TOKENS (read off its :root)
 *   IDENTICAL, so we use ours: --sand #F4F5F9 (page-bg) · --ink #0F1A4F (ink-deep) ·
 *   --ink-soft #4D5B7F · --ink-mute #8893B0 · --rule #E6E8EF (rule) ·
 *   --accent #EC634B (coral-500) · --paper #FFFFFF.
 *   DIFFERENT, so declared here (owner's call: keep the reference's colours):
 *     #E9ECF3  subnav pill hover fill   (no token; the reference calls it --sand-2)
 *
 * Every rule is scoped under `.privacy-page`, so this file is inert on any other page — the
 * pattern proven in production by /r/10 (`.about-page`).
 * ============================================================================================ */

.privacy-page {
  --dc-sand-2: #E9ECF3;          /* subnav pill hover fill */

  background: var(--color-page-bg);
}

/* Smooth anchor scrolling, which the reference puts on `html`. Scroll behaviour is read off the
   scrolling element, so it cannot live under `.privacy-page` itself; `:has()` keeps it page-scoped
   and inert everywhere else. Neutralised under prefers-reduced-motion at the foot of the file. */
html:has(.privacy-page) { scroll-behavior: smooth; }

/* ── Container: 1200px, 24px gutter — set-wide, `_shared/page-shared.css` §2 ─────────── */
/* ── Vertical rhythm ────────────────────────────────────────────────────────────────────── */
/* Only three sections, so only three values. `dc-py-<top>-<bottom>` is deliberately literal,
   as on every other ported page, so a later normalisation pass can map each one to a DS step
   or say why not. The 132px top on the subnav clears the reference's own 60px fixed nav; in
   the CMS the site-header global occupies that space, so this is the value to re-check first. */
.privacy-page .dc-py-132-0 { padding-bottom: 0; }
.privacy-page .dc-py-36    { padding-top: 36px;  padding-bottom: 36px; }
.privacy-page .dc-py-0-88  { padding-top: 0;     padding-bottom: 88px; }

/* ── Display type ───────────────────────────────────────────────────────────────────────── */
/* One step only: the page's single h1. Named by its maximum, as elsewhere. */
.privacy-page [class*="dc-t-"] {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* margin + text-wrap at ZERO specificity via :where(), so an ordinary Tailwind utility can
   still override them. Written as a plain descendant selector this is 0-2-0 and silently beats
   an unlayered utility (0-1-0) — the single most expensive trap in this port series. */
:where(.privacy-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.privacy-page .dc-t-60 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.04em; }

/* ── Body copy ──────────────────────────────────────────────────────────────────────────── */
.privacy-page .dc-lede {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.7vw, 17.5px);
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 18px 0 0;
  max-width: 62ch;               /* the reference measures this one in ch, not px */
}

/* ── Mono labels ────────────────────────────────────────────────────────────────────────── */
/* The reference declares every label with the `font:` SHORTHAND and no `/line-height`, so each
   computes to `normal`. Inheriting our body 1.5 instead makes every label row taller — the
   largest single source of height error found across this port series — so `normal` is stated
   explicitly on each step rather than left to inherit. */
.privacy-page .dc-label-10 {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.07em;
  color: var(--color-ink-mute);
}

/* Same step, the reference's other tracking (.08em): the subnav's LEGAL and the TOC heading. */
.privacy-page .dc-label-10w { letter-spacing: 0.08em; }

/* ── Section 1 · the legal subnav ───────────────────────────────────────────────────────── */
.privacy-page .dc-subnav      { display: flex; align-items: center; gap: 8px 6px; flex-wrap: wrap; }
.privacy-page .dc-subnav-lead { margin-right: 8px; }

.privacy-page .dc-pill {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  line-height: normal;
  color: var(--color-ink-soft);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  transition: background-color 200ms cubic-bezier(.2, .8, .2, 1), color 200ms;
}
.privacy-page .dc-pill:hover  { background: var(--dc-sand-2); color: var(--color-ink-deep); }
.privacy-page .dc-pill-on,
.privacy-page .dc-pill-on:hover { background: var(--color-ink-deep); color: #fff; }

/* ── Section 2 · the hero ───────────────────────────────────────────────────────────────── */
.privacy-page .dc-hero-meta { display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap; margin-top: 18px; }

/* ── Section 3 · the document ───────────────────────────────────────────────────────────── */
.privacy-page .dc-legalgrid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.privacy-page .dc-tocwrap { position: sticky; top: 96px; }
.privacy-page .dc-toc-head { margin-bottom: 14px; }
.privacy-page .dc-toc-list { display: flex; flex-direction: column; gap: 2px; }

.privacy-page .dc-toc {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  line-height: normal;
  text-decoration: none;
  padding: 8px 14px;
  color: var(--color-ink-soft);
  border-left: 2px solid var(--color-rule);
  transition: color 200ms, border-color 200ms;
}
.privacy-page .dc-toc:hover { color: var(--color-ink-deep); }

/* The active state. The class is toggled by page.js (scroll-spy); with JS off the first item
   keeps the class the markup ships with, exactly as the reference's own `data-on` does. */
.privacy-page .dc-toc-on {
  color: var(--color-ink-deep);
  border-left-color: var(--color-coral-500);
  font-weight: 700;
}

.privacy-page .dc-legal-stack { display: flex; flex-direction: column; gap: 16px; }

/* Anchor offset, so a TOC jump does not tuck the heading under the sticky site header. */
.privacy-page .dc-legal-card { scroll-margin-top: 96px; }

/* The card. Markup carries the DS `.card` (bg + radius + shadow + relative); these three
   declarations are the reference's metric delta from it — 18px instead of rounded-2xl's 16px,
   shadow-soft instead of shadow-card, and the reference's clamped padding. */
.privacy-page .dc-legal-card {
  border-radius: var(--radius-4\.5);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 3vw, 36px) clamp(26px, 3.2vw, 40px);
}

/* ── Legal typography ───────────────────────────────────────────────────────────────────── */
/* Element rules, because that is what the reference does and because ~200 paragraphs carrying
   a class each would be markup noise for no gain. Scoped to `.dc-legal` so nothing else on the
   page (or in a CMS block beside it) inherits them. */
.privacy-page .dc-legal h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--color-ink-deep);
}

.privacy-page .dc-legal h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 22px 0 8px;
  color: var(--color-ink-deep);
}

.privacy-page .dc-legal p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0 0 14px;
}

.privacy-page .dc-legal ul,
.privacy-page .dc-legal ol { margin: 0 0 14px; padding-left: 20px; }

/* The reference styles `ol` inline rather than in its `[data-legal]` block, and gives that one
   list 10px between items instead of the 7px every other list uses — except its LAST item,
   which it forgets, so that one falls back to 7px. Reproduced exactly rather than tidied: this
   is the reference's own inconsistency, not a value to normalise mid-port. */
.privacy-page .dc-legal ol li { margin-bottom: 10px; }
.privacy-page .dc-legal ol li:last-child { margin-bottom: 7px; }

.privacy-page .dc-legal li {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin-bottom: 7px;
}

.privacy-page .dc-legal p:last-child,
.privacy-page .dc-legal ul:last-child { margin-bottom: 0; }

.privacy-page .dc-legal strong { color: var(--color-ink-deep); }

/* Inline links (10 of them: mailto, tel, and one to the cookie policy). The reference styles
   these with a bare global `a { color: #EC634B }`, which would reach every link on the page;
   scoping it to the document keeps the subnav pills and the TOC on their own colours. */
.privacy-page .dc-legal a { color: var(--color-coral-500); }
.privacy-page .dc-legal a:hover { color: var(--color-ink-deep); }

/* ── Responsive: the reference's own breakpoint, which is 1000px, not our 992 ────────────── */
@media (max-width: 1000px) {
  .privacy-page .dc-legalgrid { grid-template-columns: minmax(0, 1fr); }
  .privacy-page .dc-tocwrap   { position: static; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */
/* This page defines no @keyframes; the only motion is the pill/TOC colour transitions and the
   smooth anchor scroll, so those are the only two things to neutralise. */