/* The policy page (/policy): the cyan hero and one readable text column. */

/* ---------- hero ---------- */

.policy-hero, .policy {
  width: min(100% - 2 * var(--gutter), var(--content));
  margin-inline: auto;
}

.policy-hero {
  padding: clamp(32px, 6vw, 56px) clamp(24px, 6vw, 64px);
  border-radius: 40px;
  background: var(--hero-bg);
}
.policy-intro { display: flex; flex-direction: column; gap: 16px; max-width: 46rem; }
.policy-intro h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -.015em; }
.policy-intro .lede { font-size: 1.15rem; }

/* ---------- content ---------- */

.policy { padding: 56px 0 72px; }
.policy article { display: flex; flex-direction: column; gap: 40px; max-width: 46rem; }
.policy section { display: flex; flex-direction: column; gap: 14px; }
.policy h2 { font-size: 1.35rem; font-stretch: 112%; }
.policy ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.policy strong { color: var(--heading); }