/* ==================================================================
   Public legal pages (/privacy/, /terms/).

   These extend dashboard/_chrome.html, so every colour is that chrome's
   own --mf-* token and the rules are scoped to the classes the legal base
   template uses. Nothing here touches element selectors outside .legal, so
   it cannot leak into the chrome. Kept out of landing.css because that
   sheet sets global html/body rules and its own colour tokens.
   ================================================================== */
.legal {
  min-height: 100vh;
  padding: 3rem 1.5rem 4rem;
  background: var(--mf-gray-100);
}
.legal-body {
  max-width: 42rem; /* about 70 characters at body size: a readable measure */
  margin-inline: auto;
  padding: 2.5rem 2.5rem 2rem;
  background: #fff;
  border: 1px solid var(--mf-gray-300);
  border-radius: var(--mf-radius-xl);
  color: var(--mf-gray-800);
  line-height: 1.7;
}
.legal .auth-brand {
  margin: 0 0 2rem;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mf-gray-900);
}
.legal .auth-brand img { display: block; }

.legal-body h1 {
  margin: 0 0 1.25rem;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.1;
  color: var(--mf-gray-900);
}
.legal-body h2 {
  margin: 2.25rem 0 .5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mf-gray-900);
}
.legal-body h3 {
  margin: 1.5rem 0 .25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mf-gray-900);
}
.legal-body p, .legal-body ul, .legal-body ol { margin: 0 0 1rem; }
.legal-body ul, .legal-body ol { padding-inline-start: 1.5rem; }
.legal-body li + li { margin-block-start: .35rem; }
.legal-body a { text-decoration: underline; text-underline-offset: 2px; }

.legal-foot {
  margin: 2.5rem 0 0;
  padding-block-start: 1.25rem;
  border-top: 1px solid var(--mf-gray-300);
  font-size: .875rem;
  color: var(--mf-text-muted);
}

@media (max-width: 575.98px) {
  .legal { padding: 1rem .75rem 2rem; }
  .legal-body { padding: 1.5rem 1.25rem 1.25rem; }
}

/* "Last updated" sits under the title, quieter than body text. */
.legal-updated {
  margin: -.75rem 0 1.5rem;
  font-size: .875rem;
  color: var(--mf-text-muted);
}

/* Every legal page links to the others: reviewers and readers move between them. */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0 0 1rem;
}
.legal-foot p { margin: 0; }