/**
 * Privacy page styles.
 * Constrains content to a readable line length and sizes the page's headings
 * for a long-form document. All color, typography and section styles come
 * from site.css: the headings are dual-classed onto .section__heading, so the
 * serif register (face, weight, tracking) has one source and the rules below
 * own only the size and vertical rhythm that vary per page
 * (01-prd-marketing-restyle.md FR 19 — Foundation-only ceiling, task 15.1).
 */

/* ==========================================================================
   Page Header
   ========================================================================== */

.privacy-header__layout {
  max-width: 760px;
}

/* Display size for the page's one h1; face and weight come from
   .section__heading. Color resolves from the dark section's context. */
.privacy-header__heading {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-sm);
}

.privacy-header__meta {
  font-size: var(--font-size-small);
  color: var(--color-text-muted-dark);
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Privacy Content
   ========================================================================== */

.privacy-content__layout {
  max-width: 760px;
}

/* Topic headings inside the one reading section: a step below the section
   heading size (the serif at 400 carries less weight than the bold sans it
   replaced, so xl was too small for it and 4xl too loud for seven of them),
   owning their own rhythm — without the margins the reset zeroes them and
   the gap above each h2 becomes whatever the preceding paragraph left. */
.privacy-content__heading {
  font-size: var(--font-size-3xl);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.privacy-content__heading:first-child {
  margin-top: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .privacy-header__heading {
    font-size: var(--font-size-4xl);
  }
}

@media (max-width: 480px) {
  .privacy-header__heading {
    font-size: var(--font-size-3xl);
  }

  .privacy-content__heading {
    font-size: var(--font-size-2xl);
  }
}