/* /privacy, /terms, /terms/rules, /security, /help (src/app/legal.ts): a reading column on the threshold layout. */
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.legal-nav a { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; background: var(--bg-2); }
.legal-nav a:hover { color: var(--ink); background: var(--bg-3); }
.legal-nav a[aria-current='page'] { background: var(--ink); color: var(--bg); }
.legal-meta { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.legal h2 { margin-top: 36px; font: 620 20px/1.2 var(--sans); letter-spacing: -0.02em; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.legal p { margin-top: 10px; }
.legal ul { margin-top: 10px; padding-left: 1.2em; list-style: disc; display: grid; gap: 8px; }
.legal li::marker { color: var(--ink-3); }
.legal b { color: var(--ink); font-weight: 600; }
.legal a:not(.legal-nav a) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal .mono { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }