/* ---------- Closing call to action ---------- */
.cta {
  display: flex;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 48px) 128px;   /* 128px above (from the FAQ) and below: the site's section rhythm */
}

.cta__card {
  --pad: clamp(24px, 3.6vw, 44px);
  position: relative;
  overflow: hidden;
  padding: var(--pad);
  border-radius: 14px;
  background: var(--btn-dark);
  color: #fafafa;
}

.cta__body { position: relative; display: grid; gap: 12px; justify-items: start; max-width: 520px; }

.cta__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.cta__text { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: #bdbdbb; text-wrap: balance; }

/* Entrance: the text eases up one piece after another when the card scrolls into view */
.cta.is-ready .cta__body > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.cta.is-ready .cta__body > :nth-child(2) { transition-delay: .09s; }
.cta.is-ready .cta__body > :nth-child(3) { transition-delay: .18s; }
.cta.is-in .cta__body > * { opacity: 1; transform: none; }