.legal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}
.legal-header a.brand { color: var(--text); text-decoration: none; }
.legal-back { font-size: 13px; color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.legal-back:hover { color: var(--accent); }

.legal {
  width: 100%; max-width: 780px;
  margin: 0 auto; padding: 48px 24px 64px;
  flex: 1;
  font-size: 15px; line-height: 1.7; color: var(--text-2);
}
.legal h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.02em; color: var(--text); }
.legal .updated { margin: 0 0 32px; font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
.legal h2 { margin: 36px 0 10px; font-size: 17px; color: var(--text); }
.legal p, .legal ul { margin: 0 0 14px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent); }

.legal-callout {
  margin: 0 0 28px; padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--mid) 40%, transparent);
  border-left: 3px solid var(--mid);
  border-radius: var(--radius-sm);
  background: var(--mid-bg);
  color: var(--text);
}
.legal-callout h2 { margin-top: 0; color: var(--mid); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.legal-callout p:last-child { margin-bottom: 0; }

.legal-toc {
  margin: 0 0 32px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel);
  font-size: 13.5px;
}
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.legal-toc a { color: var(--text-2); text-decoration: none; }
.legal-toc a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .legal { padding-top: 32px; }
  .legal h1 { font-size: 24px; }
  .legal-toc ol { columns: 1; }
}