.bonus-banner {
  position: relative;
  overflow: hidden;
  min-height: clamp(260px, 32vw, 420px);
  display: flex;
  align-items: center;
  clip-path: var(--card-clip);
  margin-block: var(--space-section);
}
.bonus-banner__bg {
  /* Same treatment as the hero: full-bleed width, fixed 18% crop off the top,
     anchored to the bottom so none of the crop comes off the bottom edge. */
  position: absolute;
  top: -18%;
  left: 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center bottom;
  background: var(--color-bg-dark);
}
.bonus-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9,13,14,0.92) 10%, rgba(9,13,14,0.45) 100%);
}
.bonus-banner__inner { position: relative; z-index: 1; max-width: 34rem; text-align: center; margin-inline: auto; padding-block: 2.5rem; }
.bonus-banner__eyebrow { color: var(--color-heading-accent); font-weight: var(--fw-btn); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin-block-end: 0.5rem; }
.bonus-banner__title { margin-block-end: 0.75rem; }
.bonus-banner__text { color: var(--color-white); opacity: 0.9; margin-block-end: 1.5rem; }