/* =========================================================================
   CTA BANNER, SMALL — Figma set 6417:57407 · 420 2146:19533
   · 1024 6417:57408 · 1440 2043:10626 · 1920 6417:57416
   A line and two buttons on a Blue 10 banner: stacked in a 360 card on
   the 420 frame, one row (line left, buttons right) from 1024.
   ========================================================================= */

.s-why-cta :is(h2)[class*="t-"] { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap); }

/* the ground: White on the 420 frame, Gray on the others (the section's
   class is the Gray one; the phone frame is the exception) */
@media (max-width: 1023px) { .s-why-cta.l-section--gray { background: var(--color-white); } }

.s-why-cta__banner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-xl);
  width: 100%;
  max-width: 360px;                        /* Figma: fixed 360 on the 420 frame */
  padding: var(--spacing-stack-xl) var(--spacing-page-margin);
  border-radius: 4px;                      /* Figma: 4, no token */
  background: var(--color-blue-10);
}
.s-why-cta__title { width: 100%; }

@media (min-width: 1024px) {
  .s-why-cta__banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-stack-l);           /* Figma: space-between; a floor for long lines */
    max-width: none;
    padding: var(--spacing-section-gap);
    border-radius: 0;
  }
  .s-why-cta__title { width: auto; white-space: nowrap; }
  .s-why-cta__actions { flex-wrap: nowrap; }
}