/* 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;
}
/* The control covers the band without hiding it: no visible box or text, only its focus ring.
   Pointer events pass through, so touch exploration by a screen reader still reaches the texts */
.benefits-toggle {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: none;
  color: transparent;
  font-size: 0;
  pointer-events: none;
}
.benefits-toggle: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:has(.benefits-toggle: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 motion control in the hero wins over everything, also over a hand start; the band's own state stays as it was */
:root.motion-paused .benefits-list { animation-play-state: paused; }
/* The band works as a control only while the toggle is shown (set by main.js) */
.benefits.is-control { 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 or no JavaScript (no motion control, step 4.17): no drift, the six benefits form a static grid (one copy),
   the marker moves before the text */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .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);
    animation: none;
  }
  .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; }
}