/* cta.css — .cta-banner: brand gradient, white text, r-lg (12 §5). */

.cta-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--grad-cta);
  color: var(--on-dark-muted);
}

.cta-banner__title { color: var(--on-dark); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.cta-banner__text { margin-top: var(--sp-2); color: var(--on-dark-muted); }

/* Primary button on the dark banner: light surface so it keeps contrast in both themes. */
.cta-banner .btn--primary, .cta-banner .btn--store { background: var(--on-dark); color: var(--brand-900); }
.cta-banner .btn--primary:hover, .cta-banner .btn--store:hover { background: var(--brand-50); color: var(--brand-950); }
.cta-banner .btn--ghost { color: var(--on-dark); }
.cta-banner .btn--ghost:hover { background: transparent; text-decoration: underline; }
.cta-banner :focus-visible { outline-color: var(--on-dark); }

@media (min-width: 768px) {
  .cta-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-7);
  }
}