/* ============================================================
   Legal pages (/legal/security, /legal/privacy-policy,
   /legal/terms-of-service) — reuses the shared .article_wrap /
   .article_body rhythm (css/article.css) with two additions:
   an eyebrow for hierarchy (every other page has one above its
   H1; these didn't), and section dividers so long documents with
   20+ H2 sections are scannable instead of one dense block.
   ============================================================ */

.legal_eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; }
.legal_eyebrow_dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--swatch--colors3, #d5fe70); flex-shrink: 0; }
.legal_eyebrow_text { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--swatch--colors3, #d5fe70); }

/* extra room below the H1 so the first section reads as the start of
   the document, not a subtitle glued to the title */
.legal_article .article_title { margin-bottom: 1.75rem; }

/* each H2 reads as its own section: a rule + generous top space
   instead of a fixed margin, so 20+ sections stay scannable */
.legal_article .article_body h2 {
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.legal_article .article_body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* a heading pair (e.g. Security's "Certifications" > "SOC 2") reads as
   one section, not two — no divider between them */
.legal_article .article_body h2 + h2 {
  margin-top: 1.15em;
  padding-top: 0;
  border-top: none;
}

@media (max-width: 767px) {
  .legal_article .article_body h2 { margin-top: 2.5rem; padding-top: 1.5rem; }
}