:root {
  --home-benefits-band-background: var(--home-annual-offer-background);
  --home-benefits-foreground: #fff;
  --home-benefits-muted: rgba(255, 255, 255, 0.72);
  --home-benefits-copy-width: max(100vw, 880px);
  --home-benefits-duration: 24s;
}

.benefits-section {
  width: 100%;
  max-width: none;
  overflow: hidden;
  background: var(--home-benefits-band-background);
}

.benefits-section.is-ready {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.benefits-section.is-dragging {
  cursor: grabbing;
}

.benefits-marquee-track {
  width: max-content;
  display: flex;
  will-change: transform;
}

.benefits-section.is-ready .benefits-marquee-track {
  animation: benefits-left-to-right var(--home-benefits-duration) linear infinite;
}

.benefits-marquee-track .benefits-grid {
  width: var(--home-benefits-copy-width);
  flex: 0 0 var(--home-benefits-copy-width);
  border-radius: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: transparent;
}

.benefits-grid .benefit-point {
  min-height: clamp(130px, 15vw, 210px);
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
}

.benefits-grid .benefit-number,
.benefits-grid .benefit-point h3 {
  color: var(--home-benefits-foreground);
}

.benefits-grid .benefit-point > p:not(.benefit-number) {
  color: var(--home-benefits-muted);
}

@keyframes benefits-left-to-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .benefits-marquee-track {
    width: 100%;
  }

  .benefits-marquee-track .benefits-grid {
    width: 100%;
    flex-basis: 100%;
  }
}