/* Terms and privacy pages. Moved out of inline <style> blocks so the pages
 * carry no inline CSS. Requires styles.css and glass.css. */
.legal {
  max-width: 760px;
  margin: clamp(20px, 5vw, 48px) auto clamp(32px, 6vw, 64px);
  padding: clamp(20px, 5vw, 44px);
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-lg);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.legal h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.legal .legal-meta { color: var(--text-muted); margin: 0 0 2rem; }
.legal h2 { font-size: 1.15rem; margin: 2.25rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-strong); }
.legal p, .legal li { line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.legal ul { padding-inline-start: 1.25rem; }
.legal li { margin-bottom: .4rem; }
.legal a { color: var(--accent); }
.legal a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legal code { font-family: var(--font-mono); font-size: .92em; overflow-wrap: anywhere; }
.legal-footer { border-top: 1px solid var(--glass-border); padding: 1.5rem 0 2.5rem; color: var(--text-muted); font-size: .9rem; }
.legal-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.legal-footer a { color: var(--text-muted); }
.legal-footer a:hover { color: var(--accent); }

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .legal { background: var(--surface-2); border-color: var(--text-muted); box-shadow: none; }
}