/* ═══════════════════════════════════════════════════════════════════════════
   DRIIF — LEGAL page layout, shared by privacy-policy.html and terms-of-use.html.
   A long-form numbered document has no other match on the site (the glossary's
   cards and quiz don't apply here), and it's needed by exactly these two pages
   — not by any marketing section — so it lives in its own small shared
   stylesheet rather than components.css (reusable by any page) or duplicated
   across two page-specific files.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO: plain title, no video/parallax — same shape as glossary.html's
   own header, reused here for the same reason: a utility document has
   nothing to show, so it doesn't pretend to. */
/* #top's own eyebrow/h1/lead (privacy-policy.html, terms-of-use.html)
   never wraps in .split — just three plain siblings in .bleed — so it had
   no heading-to-lead gap at all (t-h1 and t-lead both carry margin:0 by
   default, base.css): site-wide standardisation pass, added to match the
   --space-6 gap every plain .split section uses. Eyebrow-to-heading is
   already correct as-is (.eyebrow's own margin-bottom, same --space-5 as
   everywhere else), so only the lead needed a rule here. */
#top .t-lead{ margin-top:var(--space-6); }
.legal-meta{ display:flex; flex-wrap:wrap; column-gap:var(--space-6); row-gap:var(--space-2);
  margin-top:var(--space-5); }
.legal-meta span{ color:var(--color-text-muted); }

/* ── BODY: one continuous read, capped to the long-form measure token
   (--measure-body, tokens.css) rather than the wider .bleed it sits in —
   68ch is tuned for exactly this kind of reading, not for a heading or a
   short lead. */
.legal-intro{ display:flex; flex-direction:column; gap:var(--space-4);
  max-width:var(--measure-body); margin-bottom:var(--section-y-sm); }
.legal-sections{ display:flex; flex-direction:column; gap:var(--space-8);
  max-width:var(--measure-body); }
/* Each numbered clause gets a hairline above it and the section's own
   heading number is part of the source text (e.g. "12. Government, Defence
   and Security-Related Requests") rather than a CSS counter, matching the
   two source documents' own numbering exactly — a counter would drift the
   moment either document's section list changes without this file being
   touched too. */
.legal-section{ padding-top:var(--space-7); border-top:var(--hair) solid var(--color-border-subtle); }
.legal-section:first-child{ padding-top:0; border-top:0; }
.legal-section h2{ margin-bottom:var(--space-4); }
.legal-section h3{ margin:var(--space-5) 0 var(--space-3); }
.legal-section p + p{ margin-top:var(--space-4); }
.legal-section .copy-list{ margin-top:var(--space-4); }
.legal-section .copy-list + p{ margin-top:var(--space-4); }
/* A closing address block (contact/registered-office lines) reuses <address>
   the same way the footer's own .footer-brand address does — one line per
   fact via explicit <br> tags, since most of the content is plain text
   rather than elements a display:block rule could target. */
.legal-section address{ font-style:normal; line-height:1.7; margin-top:var(--space-4); }
.legal-section address + p{ margin-top:var(--space-4); }