/* =====================================================================
   D - Redeem CTA band (Figma 10159:9375; reused inside "why" 10159:9409).
   Centred heading (Axiforma Medium 24, gray-7) sitting beside the reused
   secondary "Contact Gold Avenue" button. Standalone = own band padding;
   the --inline modifier drops the band padding for nesting inside another
   section. Content locked to the 1240 area via .container. Tokens only.
   ===================================================================== */

.redeem-cta {
  padding-block: var(--redeem-cta-pad-y);
}
.redeem-cta--inline {
  padding-block: 0;
}

/* A heading-less CTA band directly after the explainer-cards section (e.g. the
   lone "Get Started" button on limit-orders) would stack the explainer's bottom
   padding on top of its own top padding, pushing the button low. Pull the band
   up to abut the cards so the button keeps equal top/bottom padding within the
   band. Matches the explainer section's padding at each breakpoint. CTAs that
   carry a heading (e.g. how-it-works) are intentionally not affected. */
.explainer-cards + .redeem-cta:not(:has(.redeem-cta__heading)) {
  margin-top: calc(var(--home-sec-pad-y) * -1);
}
@media (max-width: 767.98px) {
  .explainer-cards + .redeem-cta:not(:has(.redeem-cta__heading)) {
    margin-top: calc(var(--ta-pad-y-mobile) * -1);
  }
}

.redeem-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--redeem-cta-gap);
}

/* ---- Heading (Axiforma SemiBold 20 — OG Desktop H4) ---- */
.redeem-cta__heading {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: normal;
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}
/* Inline inside the dark "Advantages" band: heading flips to white. */
.redeem-cta--inline .redeem-cta__heading {
  color: var(--gray-0);
}

.redeem-cta__action {
  display: inline-flex;
  flex: none;
}

/* ---- Tablet (768–1023): step down section padding ---- */
@media (max-width: 1023.98px) {
  .redeem-cta {
    padding-block: 64px;
  }
}

/* ---- Mobile (M - EU Redeem CTA 10159:9486 @390): heading over button, stacked ---- */
@media (max-width: 767.98px) {
  .redeem-cta {
    padding-block: var(--ba-pad-y); /* 40px */
  }

  /* M- frame: title row sits above the button as a centred vertical stack. */
  .redeem-cta__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--redeem-cta-gap);
  }
}