.cta {
  background: var(--gradient-sky);
  /* Banded section: the gap must sit outside the band, so it survives whichever
     content section happens to come last. */
  margin-top: var(--section-y);
}

.cta.section-padding {
  padding-top: var(--section-y);
}

.cta-inner {
  text-align: center;
}

.cta-title {
  margin-top: var(--gap);
  text-transform: uppercase;
  color: var(--color-ink);
  font-family: var(--type-section-title-family);
  font-weight: var(--type-section-title-weight);
  font-style: var(--type-section-title-style);
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-height);
}

.cta-accent {
  text-transform: none;
  font-family: var(--type-accent-word-family);
  font-weight: var(--type-accent-word-weight);
  font-style: var(--type-accent-word-style);
  font-size: var(--type-accent-word-size);
  line-height: var(--type-accent-word-height);
}

.cta-lead {
  margin: var(--gap) auto 0;
  max-width: 576px;
  color: var(--color-muted);
  font-family: var(--type-lead-family);
  font-weight: var(--type-lead-weight);
  font-style: var(--type-lead-style);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-height);
}

.cta-actions {
  margin-top: var(--gap);
}