/* ── Legal family (accessibility.html + cookies.html + privacy.html + terms.html only) ── */
.container { max-width: 800px; margin: 0 auto; padding: 0 24px; }

/* ── Legal hero ─────────────────────────────────────────────────────────── */
.legal-hero {
  padding: 72px 0 60px; text-align: center; border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,140,30,0.10) 0%, transparent 60%);
}
.legal-eyebrow {
  font-family: var(--body); text-transform: uppercase; letter-spacing: 3px;
  font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 14px;
}
.legal-hero h1 {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(32px, 5vw, 56px); color: var(--paper);
  margin-bottom: 14px; line-height: 1.05;
}
.legal-hero .sub { color: var(--text-dim); font-size: 16px; }

/* Byte-identical across cookies.html/privacy.html/terms.html — confirmed via
   direct diff, not assumed. accessibility.html has no matching markup, so
   this is harmless unused CSS there, same as other rules in this file. */
.legal-intro { padding: 40px 0 0; color: var(--text-dim); font-size: 15px; line-height: 1.85; }
.legal-intro p + p { margin-top: 14px; }
.legal-intro a { color: var(--accent-light); text-decoration: underline; }

/* ── Legal content ──────────────────────────────────────────────────────── */
.legal-section { padding: 44px 0 28px; border-top: 1px solid var(--border); }
.legal-section h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(18px, 2.4vw, 24px); color: var(--paper);
  margin-bottom: 18px; line-height: 1.2;
}
.legal-body { color: var(--text-dim); font-size: 15px; line-height: 1.85; }
.legal-body p + p { margin-top: 15px; }
.legal-body a { color: var(--accent-light); text-decoration: underline; }
.legal-body strong { color: var(--text); }

.legal-list { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 7px; }
.legal-list li { padding-left: 18px; position: relative; color: var(--text-dim); font-size: 15px; line-height: 1.75; }
.legal-list li::before { content: '\2013'; position: absolute; left: 0; color: var(--text-faint); }
.legal-list li strong { color: var(--text); }
.legal-list li a { color: var(--accent-light); text-decoration: underline; }

@media (max-width: 640px) {
  .legal-hero { padding: 52px 0 40px; }
  .legal-section { padding: 32px 0 20px; }
}