/* Shared layout for the legal pages (imprint, privacy, terms).
   Reuses the same design tokens and base styles as the assessment
   (../design-tokens.css, ../styles.css) — this file only adds the
   readable-content-width layout specific to long-form legal text. */

.legal-main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-3) var(--space-12);
}

.legal-main h1 { font-size: var(--text-h1); margin-bottom: var(--space-4); }
.legal-main h2 { font-size: var(--text-h3); margin-top: var(--space-6); }
.legal-main p, .legal-main li { color: var(--text-body); line-height: var(--lh-body); }
.legal-main ul { padding-left: var(--space-3); }
.legal-main a { color: var(--link); }

.legal-back-link { display: inline-block; margin-bottom: var(--space-4); }

.legal-meta { color: var(--text-muted); font-size: var(--text-small); margin-bottom: var(--space-4); }

@media (max-width: 400px) {
  .legal-main { padding: var(--space-4) var(--space-2) var(--space-8); }
}