/* ============================================================================
   SECTION 09 — CTA  (Figma node 169:6571 "09-cta")
   A green card floating on the cream page: statement + paragraph + button.
   ========================================================================== */

.cta {
  background-color: var(--color-bg);
  padding: var(--space-16);        /* 64px on every side — the card floats inside */
}

.cta__card {
  max-width: 1792px;
  margin-inline: auto;
  background-color: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  padding: var(--space-16) var(--space-20);   /* 64px vertical / 80px horizontal */

  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: min(15.2rem, 17vw);        /* 243px at 1440, shrinks on narrower desktops */
}

.cta__title {
  flex: 0 1 366px;
  color: var(--color-text-on-inverse);
}

.cta__content {
  flex: 0 1 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-9);             /* 36px */
}
.cta__text {
  font-size: var(--text-b2-size);
  line-height: var(--text-b2-lh);
  letter-spacing: var(--text-b2-tr);
  color: var(--color-text-on-inverse-muted);
}

.cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);             /* 20px */
}
.cta__note {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-eyebrow-size);
  line-height: 1;
  letter-spacing: var(--text-eyebrow-tr);
  text-transform: uppercase;
  color: var(--color-accent-warm);
}

/* ================================================================ TABLET === */
@media (max-width: 1024px) {
  .cta { padding: var(--space-10); }
  .cta__card {
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-12);
  }
  .cta__title,
  .cta__content { flex: none; max-width: 34rem; }
}

/* ================================================================ MOBILE === */
@media (max-width: 640px) {
  .cta { padding: var(--space-5); }
  .cta__card { padding: var(--space-8) var(--space-6); }
  .cta__content { gap: var(--space-7); }
  .cta__action { align-self: stretch; }
  .cta__action .button {
    width: 100%;
    white-space: normal;         /* long label wraps rather than overflowing the narrow card */
    text-align: center;
  }
}