/* =============================================================================
   /privacy/ and /terms/ — two legal pages, one stylesheet.

   Layout only. Every component, token and type style comes from core.css and
   nothing here restyles one. Legal copy earns its own arrangement for exactly
   one reason: somebody scanning for a single clause needs the headings to read
   as edges, not as slightly larger paragraphs. That is the whole file — a rule
   above each h2, a two-column index, and a definition list that lines up.

   Anchor offset is already handled: core.css sets
   html { scroll-padding-top: calc(var(--nav-h) + var(--space-4)) }, so every
   jump link in the index lands clear of the sticky header on its own.
   ============================================================================= */

/* 1 · Opening. The date line sits well clear of the lede so it reads as
   metadata rather than as the first sentence of the policy. */
.page-legal .legal-hero .lede{ margin-top: var(--space-6); }
.page-legal .legal-meta{ margin-top: var(--space-8); }

/* 2 · The index. Two columns of jump links on anything wider than a phone, one
   below. Links inherit ink and the browser underline — a contents list is
   navigation, not emphasis, and does not need a colour of its own. */
.page-legal .legal-toc{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-8);
}
.page-legal .legal-toc a{
  display: block;
  padding-block: var(--space-2);
}
.page-legal .legal-toc a:hover{ color: var(--ink); }

@media (max-width: 559px){
  .page-legal .legal-toc{ grid-template-columns: minmax(0, 1fr); }
}

/* 3 · Section edges. A hairline above each numbered clause turns twelve
   headings into twelve visible sections. The first one carries no rule — it
   would draw a line directly under the section it opens. */
.page-legal .legal-body h2{
  margin-top: var(--space-14);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.page-legal .legal-body > h2:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 4 · Definition lists — the processor list, the retention periods, the rights.
   A term and its explanation instead of twelve near-identical paragraphs. The
   spacing does the grouping: a term sits tight to its own answer and clear of
   the next term, so the pairs read as pairs at a glance. A grid with one gap
   would space both the same and lose that. */
.page-legal .legal-body dl{ max-width: var(--measure); }
.page-legal .legal-body dt{ font-weight: 600; margin-top: var(--space-6); }
.page-legal .legal-body dt:first-child{ margin-top: 0; }
.page-legal .legal-body dd{ margin-top: var(--space-1); }