/* ============================================================
   CAPELY: legal pages (privacy.html, terms.html)
   Long-form reading content: a narrow column, generous leading,
   a plain heading rhythm. Colours are tokens only (contract §1.2).
   This file lives in css/pages/ on purpose: build.js auto-includes
   everything directly in css/ into the homepage, and this stylesheet
   is for the two standalone legal pages only.
   ============================================================ */

.legal-head { margin-bottom: clamp(28px, 5vw, 44px); }
.legal-head h1 { font-size: clamp(30px, 4.6vw, 44px); margin-bottom: 10px; }
.legal-updated { color: var(--text-mute); font-size: 13.5px; }

.legal-body h2 {
  font-size: clamp(19px, 2.4vw, 22px);
  margin-top: clamp(34px, 5vw, 48px);
  margin-bottom: 14px;
}
.legal-body h2:first-child { margin-top: 0; }

.legal-body p {
  color: var(--text-dim);
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-body ul {
  color: var(--text-dim);
  line-height: 1.8;
  margin: 0 0 16px 20px;
}
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--text-faint); }

.legal-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover { color: var(--mint-300); }

.legal-body strong { color: var(--text); font-weight: 600; }