/* Legal pages (privacy, terms, support).
 *
 * Reuses .article-header, .article-title, .article-body from
 * resources.css for the editorial typography. This file only adds the
 * page-specific bits: the "Last updated" line, support's contact card,
 * and a slightly tighter h2 cadence so the long lists of clauses don't
 * feel like article callouts.
 */

.legal-updated {
  margin: var(--sp-3) 0 0 0;
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Tighter h2 spacing on legal pages. The article default is generous
 * whitespace between sections, which suits a feature article but makes
 * a 12-clause Terms of Service feel impossibly long. */
.legal-body h2 {
  margin-top: clamp(28px, 4vh, 40px);
  margin-bottom: var(--sp-3);
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.01em;
}

/* Numbered clauses (h2 starting with "1." etc) read as a sequence,
 * so we keep them visually consistent with body weight. */
.legal-body h2:first-of-type {
  margin-top: clamp(32px, 5vh, 48px);
}

/* Support page: contact card sits at the top, makes the "how to get
 * help" answer immediately visible rather than buried in prose. */
.contact-card {
  margin: clamp(20px, 3vh, 32px) 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.contact-card p {
  margin: 0;
  font-family: var(--font-system);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.88);
}
.contact-card p + p {
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--muted);
}
.contact-card a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--magenta);
  text-underline-offset: 3px;
}
.contact-card a:hover {
  color: var(--magenta);
}