/*
  Chrome for /terms, /privacy and /account-deletion.

  Separate from guide.css because these pages are not guides: no contents rail,
  no calls to action, narrower measure, and numbered structure. Mixing them
  would mean one sheet where a change for a guide can move a legal page.
*/

.legal-head { padding: 56px 0 32px; border-bottom: 1px solid var(--border); }
.legal-head .wrap { display: flex; flex-direction: column; gap: 12px; }
.legal-head h1 { font-size: clamp(30px, 4.4vw, 44px); max-width: 20ch; }
.legal-head .updated {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}

.legal { padding-top: 44px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 34px; }
.legal section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.legal h2 { font-size: clamp(19px, 2.3vw, 23px); max-width: 30ch; }
.legal h3 { font-size: 16px; margin-top: 4px; }
/* 66ch, not the guides' 68 — legal prose is read carefully, not skimmed. */
.legal p, .legal li { color: var(--muted); max-width: 66ch; }
.legal p strong, .legal li strong { color: var(--text); font-weight: 500; }
.legal a { color: var(--blue); }
.legal .lede { font-size: 16.5px; }

.legal ul, .legal ol { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li::marker { color: var(--faint); }

.legal .callout {
  border-left: 3px solid var(--blue); background: rgba(95,168,206,.07);
  border-radius: 0 8px 8px 0; padding: 15px 18px;
  display: flex; flex-direction: column; gap: 9px; max-width: 66ch;
}
.legal .callout .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue);
}
.legal .callout p { font-size: 15px; }

.legal-nav {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding: 14px 0 0; border-top: 1px solid var(--border); margin-top: 10px;
  font-size: 14px;
}
.legal-nav a { color: var(--muted); }
.legal-nav a[aria-current="page"] { color: var(--text); }