/* ==========================================================================
   Legal / content pages — shares the design tokens in style.css
   ========================================================================== */

.legal { max-width: 760px; }
.legal h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.legal .legal-updated {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin-bottom: 28px;
}
.legal h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 38px 0 12px;
}
.legal h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 24px 0 8px;
}
.legal p { color: var(--text-secondary); line-height: 1.65; margin-bottom: 14px; font-size: var(--text-base); }
.legal ul { color: var(--text-secondary); line-height: 1.65; margin: 0 0 14px 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--accent-blue); }
.legal strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.legal .lead { font-size: var(--text-lg); color: var(--text-secondary); }
.legal .legal-note {
  border-left: 2px solid var(--accent-blue);
  background: var(--bg-band);
  padding: 12px 16px;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 18px 0;
}
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: var(--text-sm); }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--separator); vertical-align: top; }
.legal th { color: var(--text-primary); font-weight: var(--weight-semibold); }
.legal td { color: var(--text-secondary); }