/* Shared by privacy.html and terms.html. Same visual language as the inline
   styles on how-it-works.html, kept in one file so the two legal pages cannot
   drift apart. Loaded after style.css, so it can use that file's tokens. */

.legal { width: 100%; max-width: 640px; padding: calc(28px + env(safe-area-inset-top, 0px)) 24px 80px; margin: 0 auto; position: relative; z-index: 1; }
.legal h1 { font-family: var(--font-display); font-size: 1.75rem; margin: 18px 0 4px; }
.legal h2 {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); margin: 34px 0 10px;
}
.legal h3 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); margin: 18px 0 6px; }
.legal p, .legal li { font-size: 0.875rem; line-height: 1.65; color: var(--text); }
.legal ul, .legal ol { margin: 8px 0; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--white-accent); text-decoration: underline; text-underline-offset: 2px; }
.legal .lead { color: var(--text-muted); font-size: 0.8125rem; }
.legal .meta { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; margin: 0 0 18px; }
.legal code { font-family: var(--font-mono); font-size: 0.75rem; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 4px; padding: 1px 6px; }
.legal .callout {
  font-size: 0.8125rem; line-height: 1.6; color: var(--white-accent); background: var(--red-dim);
  border: 1px solid var(--red-line); border-radius: var(--r-field); padding: 13px 15px; margin: 14px 0;
}
.legal .callout strong { color: var(--white-accent); }
.legal .caps { text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.01em; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.8125rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--panel-line); line-height: 1.55; }
.legal th { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.legal-foot { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--panel-line); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.75rem; }
.legal-foot a { color: var(--text-muted); text-decoration: none; }
.legal-foot a:hover { color: var(--text); text-decoration: underline; }
.legal-back {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--panel-line); background: var(--panel-2); color: var(--text); text-decoration: none; font-size: 1.0625rem;
}
.legal-back:hover { background: var(--panel-3); }
.legal-back:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 520px) {
  .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; }
  .legal thead { display: none; }
  .legal tr { border-bottom: 1px solid var(--panel-line); padding: 8px 0; }
  .legal td { border: 0; padding: 3px 0; }
  .legal td:first-child { font-weight: 600; }
}
@media (max-width: 520px) {
  .legal td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
  }
}