/* /privacy, /terms, /data-security — page styles. Content from the Paper boards "Rebuild — /privacy | /terms | /data-security (editable)";
   the page shell (header, footer) comes from site.css v3. Legal text stays left-aligned on phones. */

.legal { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; padding: 74px 0 116px; text-align: left; display: flex; flex-direction: column; gap: 42px; }
.legal-head { display: flex; flex-direction: column; gap: 14px; }
.legal h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(52px, 8vw, 80px); line-height: .95; letter-spacing: -0.055em; color: #0C0A08; }
.legal-updated { font-size: var(--text-body-sm); line-height: 18px; color: #6D6C6B; }
.legal section { display: flex; flex-direction: column; gap: var(--spacing-5); }
.legal h2 { font-family: var(--font-serif); font-weight: 400; font-size: 25px; line-height: 41.25px; color: #0C0A08; }
.legal p { font-size: var(--text-body); line-height: 26.4px; color: #6D6C6B; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:hover { color: var(--color-accent); }

@media (max-width: 760px) {
  .legal { padding: 48px 0 72px; gap: 32px; }
  .legal h2 { font-size: 22px; line-height: 30px; }
  .legal p { font-size: 15px; line-height: 24px; }
}