/* The legal pages (terms.html, privacy.html): one reading column in the glass room.
   The documents are styled through their own tags, plus two classes they carry:
   `em` on the conspicuous all-caps blocks, and `cl` on a numbered clause, whose
   number hangs in the margin so wrapped lines align with the clause text. */
.lgl-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:calc(74ch + 2 * var(--edge)); margin:0 auto; padding:22px var(--edge) 0; }
.lgl-brand{ display:inline-flex; align-items:center; gap:9px; color:var(--lx-ink); text-decoration:none; }
.lgl-brand img{ width:22px; height:22px; }
.lgl-brand b{ font-family:var(--font-num); font-size:14.5px; font-weight:600; letter-spacing:-.01em; }
.lgl-bar nav{ display:flex; gap:2px; }
.lgl-bar nav a{ font-family:var(--font-num); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lx-mut); text-decoration:none; padding:8px 10px; border-radius:var(--rad-pill); }
.lgl-bar nav a:hover, .lgl-bar nav a[aria-current]{ color:var(--lx-ink); }

.lgl{ max-width:calc(74ch + 2 * var(--edge)); margin:0 auto; padding:24px var(--edge) 96px;
  font-size:15px; line-height:1.65; }
.lgl h1{ font-size:clamp(30px, 5vw, 44px); font-weight:600; letter-spacing:-.02em; line-height:1.1; margin:40px 0 0; }
/* the effective date, the one line that is not the document's prose */
.lgl h1 + p{ font-family:var(--font-num); font-size:12px; letter-spacing:.08em; color:var(--lx-mut); margin:12px 0 40px; }
.lgl h2{ font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1.25; text-wrap:balance;
  border-top:1px solid var(--lx-line); margin:48px 0 16px; padding-top:32px; }
.lgl h3{ font-size:17px; font-weight:600; margin:28px 0 10px; }
.lgl h4{ font-size:15px; font-weight:600; margin:22px 0 8px; }
.lgl p{ margin:0 0 16px; color:var(--lx-ink-2); text-wrap:pretty; }
.lgl strong{ color:var(--lx-ink); font-weight:600; }
.lgl .em{ color:var(--lx-ink); font-weight:500; }
.lgl .cl{ position:relative; padding-left:7ch; }
.lgl .cl > span:first-child{ position:absolute; left:0; color:var(--lx-mut); font-variant-numeric:tabular-nums; }
.lgl .cl.sub{ padding-left:11ch; }
.lgl .cl.sub > span:first-child{ left:7ch; }
.lgl a{ color:var(--lx-ink); text-decoration:underline; text-decoration-color:var(--lx-faint); text-underline-offset:3px; }
.lgl a:hover{ text-decoration-color:currentColor; }
/* `display:block` so the table is its own scroll box: five columns do not fit a phone */
.lgl table{ display:block; overflow-x:auto; width:100%; border-collapse:collapse; margin:0 0 24px;
  border:1px solid var(--lx-line); border-radius:var(--rad-block); font-size:13px; line-height:1.5; }
.lgl th, .lgl td{ padding:10px 12px; border-bottom:1px solid var(--lx-line); text-align:left; vertical-align:top; }
.lgl th{ color:var(--lx-ink); font-weight:600; white-space:nowrap; }
.lgl td{ color:var(--lx-ink-2); }
.lgl tbody tr:last-child td{ border-bottom:0; }
.lgl code{ font-family:var(--font-mono); font-size:.92em; }
@media (max-width:560px){
  .lgl .cl{ padding-left:5.5ch; }
  .lgl .cl.sub{ padding-left:8.5ch; }
  .lgl .cl.sub > span:first-child{ left:5.5ch; }
}