/* Legal and long-form pages. Reading comfort over decoration: one column, generous
   measure, no motion. These pages exist to be read carefully, sometimes by a lawyer. */
.legal { padding-block: calc(68px + clamp(48px, 8vh, 96px)) clamp(64px, 10vh, 120px); }
.legal h1 { margin-bottom: 8px; }
.legal__updated {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 32px;
}
.legal .lede { margin-bottom: 40px; }
.legal h2 {
  font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; letter-spacing: -0.02em;
  margin-top: 40px; margin-bottom: 12px;
}
.legal p { color: var(--text-secondary); margin-bottom: 14px; max-width: 68ch; }
.legal ul { color: var(--text-secondary); margin: 0 0 14px 0; padding-left: 20px; max-width: 68ch; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--aqua); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--mint); }
.legal__note {
  border-left: 2px solid var(--border-gold); padding-left: 14px;
  font-size: 15px; color: var(--text-muted);
}
.legal__grid { display: grid; gap: 10px; margin-bottom: 14px; }
.legal__row {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); max-width: 68ch;
}
/* min-width let a long label grow past the others, so one row in the claim list
   used a 169px label column and the rest used 152px: the list read as two
   layouts stacked, and the eye finds that before it finds the claims. A fixed
   basis keeps every label column identical and lets long labels wrap inside it,
   which is what a list of promises should look like. */
.legal__row b { font-size: 14px; flex: 0 0 152px; }
.legal__row span { color: var(--text-secondary); font-size: 14px; flex: 1 1 260px; }
@media (max-width: 560px) { .legal__row b { flex: 1 1 100%; } }