/* ===== Legal pages (privacy / terms) ===== */
.legal-hero {
  position: relative; overflow: hidden; padding: 70px 28px 40px;
  background: radial-gradient(700px 360px at 80% -30%, rgba(224,33,138,.14), transparent 60%),
              radial-gradient(560px 320px at 0% -20%, rgba(25,211,218,.12), transparent 55%);
  border-bottom: 1px solid var(--border);
}
.legal-hero .wrap { max-width: 860px; margin: 0 auto; }
.legal-hero .crumb { font-size: 13px; color: var(--text-faint); margin-bottom: 12px; }
.legal-hero .crumb a:hover { color: var(--cyan); }
.legal-hero h1 { font-size: clamp(30px, 5vw, 46px); margin: 0 0 10px; letter-spacing: -.02em; }
.legal-hero p { color: var(--text-muted); margin: 0; font-size: 15px; }

.legal { max-width: 860px; margin: 0 auto; padding: 44px 28px 80px; }
.legal h2 {
  font-size: 21px; margin: 38px 0 12px; padding-top: 8px; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 10px;
}
.legal h2 .n { font-family: var(--font-mono); font-size: 14px; color: var(--cyan); font-weight: 600; }
.legal h3 { font-size: 16px; margin: 22px 0 8px; }
.legal p, .legal li { color: var(--text-muted); line-height: 1.75; font-size: 15px; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal li::marker { color: var(--cyan); }
.legal a { color: var(--cyan); font-weight: 500; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--text); }
.legal .callout {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cyan);
  border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 20px;
}
.legal .callout p { margin: 0; font-size: 14px; }
.legal .toc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 22px; margin-bottom: 30px;
}
.legal .toc b { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.legal .toc ol { margin: 12px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; }
@media (max-width: 600px) { .legal .toc ol { columns: 1; } }
.legal .toc a { color: var(--text-muted); font-weight: 500; }
.legal .toc a:hover { color: var(--cyan); }
.legal .updated { font-size: 13px; color: var(--text-faint); margin-top: 6px; }