soulmate-mobile-offers {
  --offers-max-width: 460px;
  --offers-gutter: 20px;
  --offers-card-min-height: 236px;
  --offers-card-padding: 22px;
  --offers-radius: 18px;
  --offers-sticky-top: calc(100px + env(safe-area-inset-top, 0px));
  --offers-final-start: #b52a75;
  --offers-final-end: #613e9c;
  --offers-heading-opacity: 1;
  --offers-deck-opacity: 1;
  display: block;
  position: relative;
  isolation: isolate;
  padding: 34px max(var(--offers-gutter), env(safe-area-inset-right, 0px)) 0 max(var(--offers-gutter), env(safe-area-inset-left, 0px));
  color: var(--page-text, #f8eff6);
  scroll-margin-top: var(--offers-sticky-top);
}
soulmate-mobile-offers *,
soulmate-mobile-offers *::before,
soulmate-mobile-offers *::after { box-sizing: border-box; }

.sm-offers-section { max-width: var(--offers-max-width); margin-inline: auto; }
.sm-offers-heading { margin-bottom: 32px; opacity: var(--offers-heading-opacity); }
.sm-offers-eyebrow { margin: 0 0 16px; color: var(--brand-pink, #d9aecb); font: 600 .7rem/1.3 var(--font-primary); letter-spacing: .13em; }
.sm-offers-title { margin: 0; font: 800 clamp(1.8rem, 8vw, 2.5rem)/1.06 var(--font-primary); letter-spacing: -.05em; text-wrap: balance; }
.sm-offers-intro { max-width: 52ch; margin: 20px 0 0; color: var(--page-muted, #bfb2c6); font: 400 1rem/1.6 var(--font-primary); }

/* Natural document flow is the fallback before enhancement or with reduced motion. */
.sm-offers-runway { position: relative; }
.sm-offers-deck {
  position: relative;
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  scroll-margin-top: var(--offers-sticky-top);
  opacity: var(--offers-deck-opacity);
}
.sm-offers-item { position: relative; min-width: 0; z-index: calc(var(--offer-index) + 1); transform-origin: 50% 0; }
.sm-offers-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 18px;
  min-height: var(--offers-card-min-height);
  height: var(--offers-card-height, auto);
  padding: var(--offers-card-padding);
  border: 1px solid var(--page-border, #e9ddea24);
  border-radius: var(--offers-radius);
  background: linear-gradient(135deg, #ffffff05, transparent 65%), var(--page-surface, #211c29);
  color: var(--page-text, #faf4f8);
  box-shadow: 0 8px 22px #00000012, inset 0 1px 0 #ffffff0c;
}
.sm-offers-icon { display: block; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; color: var(--brand-violet, #ae97e7); }
.sm-offers-copy { min-width: 0; }
.sm-offers-card-title { margin: 0 0 12px; font: 750 clamp(1rem, 4.4vw, 1.18rem)/1.16 var(--font-primary); letter-spacing: -.035em; overflow-wrap: anywhere; text-wrap: balance; }
.sm-offers-description { margin: 0; color: var(--page-muted, #bfb4c7); font: 400 .9375rem/1.5 var(--font-primary); }
.sm-offers-card--closing {
  background: linear-gradient(125deg, var(--offers-final-start), var(--offers-final-end));
  border-color: #efb4df52;
  color: #fff7fc;
  box-shadow: 0 8px 20px #160a211c, inset 0 1px 0 #ffcfea38;
}
.sm-offers-card--closing .sm-offers-icon { color: #f7dff0; }
.sm-offers-card--closing .sm-offers-description { color: #fff1f9; }

/* One sticky stage, one scroll progress. Future cards remain visible below it.
   Their travel is shorter than the runway, so they never overlap the next section. */
soulmate-mobile-offers[data-stack] .sm-offers-runway { height: var(--offers-runway-height); }
soulmate-mobile-offers[data-stack] .sm-offers-deck {
  position: sticky;
  top: var(--offers-pin-top);
  display: block;
  height: var(--offers-stage-height);
}
soulmate-mobile-offers[data-stack] .sm-offers-item { position: absolute; inset: 0 0 auto; }

@media (min-width: 1024px) {
  soulmate-mobile-offers {
    --offers-max-width: 860px;
    --offers-gutter: clamp(32px, 5vw, 72px);
    --offers-card-min-height: clamp(180px, 25svh, 224px);
    --offers-card-padding: clamp(26px, 2.4vw, 36px);
    --offers-sticky-top: clamp(112px, 20svh, 200px);
    --offers-radius: 18px;
    padding-top: 48px;
  }
  .sm-offers-heading { max-width: 740px; margin: 0 auto 44px; text-align: center; }
  .sm-offers-title { font-size: clamp(2rem, 3vw, 2.75rem); }
  .sm-offers-intro { margin-inline: auto; }
  .sm-offers-card { grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: clamp(24px, 2.2vw, 36px); }
  .sm-offers-icon { width: 60px; height: 60px; }
  .sm-offers-card-title { font-size: clamp(1.125rem, 1.6vw, 1.5rem); }
  .sm-offers-description { max-width: 66ch; font-size: clamp(.9375rem, 1.1vw, 1rem); line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  soulmate-mobile-offers .sm-offers-heading,
  soulmate-mobile-offers .sm-offers-deck { opacity: 1; }
  soulmate-mobile-offers .sm-offers-runway { height: auto; }
  soulmate-mobile-offers .sm-offers-deck { position: relative; top: auto; display: grid; height: auto; overflow: visible; }
  soulmate-mobile-offers .sm-offers-item { position: relative; inset: auto; transform: none !important; opacity: 1 !important; }
}
@media (forced-colors: active) {
  .sm-offers-card { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .sm-offers-icon, .sm-offers-description, .sm-offers-card--closing .sm-offers-icon,
  .sm-offers-card--closing .sm-offers-description { color: CanvasText; }
}