/* ============================================================
   PRIVACY & COOKIES — legal prose page
   ============================================================ */

.legal-hero { padding: clamp(56px, 9vh, 104px) 0 clamp(36px, 6vh, 64px); }

.legal-hero .hero__h1 { margin-bottom: 0; }

.legal-body { padding: clamp(48px, 7vh, 88px) 0 clamp(64px, 9vh, 110px); }

.legal-prose { max-width: 780px; }

.legal-prose h2 {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  color: var(--fg);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 44px 0 14px;
}

.legal-prose h2:first-child { margin-top: 0; }

.legal-prose p {
  color: var(--body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  margin: 0 0 16px;
}

.legal-prose a { word-break: break-word; }

/* Lists and the closing CTA are only used by 404.html today, but they belong
   to the shared .legal-prose component rather than to that one page. */
.legal-prose ul {
  color: var(--body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-prose li { margin-bottom: 8px; }

/* .btn-primary sets padding but never display, so it only lays out correctly
   as a flex item — matching how .hero__ctas blockifies it elsewhere. */
.legal-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}