/* Benefits band (step 4.7): a thin full-width strip below the hero that slowly drifts sideways.
   Each list copy moves by its own width, so the loop is seamless at any screen width.
   It pauses on hover, keyboard focus and tap; with reduced motion it is a static wrapped list. */
.benefits {
  position: relative;
  border-block: 1px solid var(--color-line);
  background: #ffffff05;
}
.benefits:focus-visible { outline-offset: -2px; }

/* Faded edges live on an inner wrapper, so they do not fade the focus ring */
.benefits-viewport {
  --fade: 8%;
  overflow: hidden;
  padding-block: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.benefits-track { display: flex; width: max-content; }

.benefits-list {
  display: flex;
  list-style: none;
  padding: 0;
  animation: benefits-move 45s linear infinite;
}
/* Paused when stopped by hand, while focused from the keyboard, or under a mouse pointer (not on touch,
   where a tap would leave a sticky hover); a hand start (.is-running) wins over focus and hover */
.benefits.is-paused .benefits-list,
.benefits:focus-visible:not(.is-running) .benefits-list { animation-play-state: paused; }
@media (hover: hover) {
  .benefits:hover:not(.is-running) .benefits-list { animation-play-state: paused; }
}
/* The hint is linked by main.js only while the band works as a control */
.benefits[aria-describedby] { cursor: pointer; }

.benefits-list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font: 500 1.0625rem/1.4 var(--font-display);
  color: var(--color-text);
}
.benefits-list li::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-inline: 34px;
  border-radius: 2px;
  rotate: 45deg;
  background: var(--gradient-accent);
  opacity: 0.9;
}

@keyframes benefits-move { to { transform: translateX(-100%); } }

@media (max-width: 640px) {
  /* Only the page gutter fades, so the longest benefit is fully readable when paused, even at 320 px */
  .benefits-viewport { --fade: var(--gutter); padding-block: 18px; }
  .benefits-list li { font-size: 1rem; }
  .benefits-list li::after { margin-inline: 26px; }
}

/* Reduced motion: no drift, the six benefits form a static grid (one copy), the marker moves before the text */
@media (prefers-reduced-motion: reduce) {
  .benefits-viewport { -webkit-mask-image: none; mask-image: none; }
  .benefits-track { display: block; width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .benefits-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-3) var(--space-8);
  }
  .benefits-list[aria-hidden="true"] { display: none; }
  .benefits-list li { gap: var(--space-4); white-space: normal; }
  .benefits-list li::after { order: -1; flex: none; margin-inline: 0; }
}