/* Legal document pages (Privacy Policy, Terms of Service). Loaded after
   /design/styles.css + /static/app.css so it can use the design-system
   tokens (design-system/tokens/*.css) for color/type consistency with the
   rest of the app. */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 96px;
  line-height: 1.65;
  font-family: var(--font-sans);
  color: var(--text-strong);
}

.legal > p:first-child { margin-top: 0; }
.legal > p:first-child a { font-weight: 600; }

.legal h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--text-strong);
}

.legal .legal-updated {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  margin-top: 2.5rem;
  color: var(--text-strong);
}

.legal h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 1.75rem;
  color: var(--text-strong);
}

.legal-summary {
  background: var(--violet-100);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: .75rem 0 1rem;
  font-size: .95rem;
}

.legal-summary strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--color-primary-ink);
}

.legal-toc {
  columns: 2;
  font-size: .95rem;
}

.legal a {
  color: var(--color-primary);
}

.legal a:hover {
  color: var(--color-primary-hover);
}

.legal-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-hairline);
  color: var(--text-muted);
  font-size: .9rem;
}

@media (max-width: 600px) {
  .legal-toc { columns: 1; }
}