/* Shared styles for /privacy and /terms — identical card layout on both.
   Shared header/drawer/footer/page-hero CSS lives in /static/base.css. */

.legal-main { max-width: 720px; margin: 0 auto; padding: 36px 24px 60px; }

.legal-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 28px; box-shadow: var(--shadow); margin-bottom: 20px;
}
.legal-card h2 {
  font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: var(--ink); margin-bottom: 12px;
}
.legal-card p { font-size: 0.9rem; color: var(--ink-light); line-height: 1.75; margin-bottom: 12px; }
.legal-card p:last-child { margin-bottom: 0; }
.legal-card ul { margin: 0 0 12px 20px; }
.legal-card li { font-size: 0.9rem; color: var(--ink-light); line-height: 1.75; margin-bottom: 4px; }
.legal-card a { color: var(--accent); text-decoration: none; font-weight: 500; }
.legal-card a:hover { text-decoration: underline; }

.legal-updated { font-size: 0.78rem; color: var(--ink-faint); text-align: center; margin-bottom: 24px; }

@media (max-width: 600px) {
  .legal-main { padding: 28px 16px 48px; }
  .legal-card { padding: 22px 20px; }
}