/* Each benefit row draws its own lines with the same reveal progress as its text. */
body.nuweb-site #content .nuweb-home .scene--benefits .benefit-list {
  border-inline-color: transparent;
}

body.nuweb-site #content .nuweb-home .scene--benefits .benefit-list > li {
  --benefit-line-progress: 0;
  position: relative;
  border-bottom-color: transparent;
}

body.nuweb-site #content .nuweb-home .scene--benefits .benefit-list > li::before,
body.nuweb-site #content .nuweb-home .scene--benefits .benefit-list > li:not(:last-child)::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  transition: none;
}

/* The transparent list border keeps its width; the rails occupy those same pixels. */
body.nuweb-site #content .nuweb-home .scene--benefits .benefit-list > li::before {
  inset: 0 -1px -1px;
  border-inline: 1px solid var(--line);
  transform: scaleY(var(--benefit-line-progress));
  transform-origin: center top;
}

body.nuweb-site #content .nuweb-home .scene--benefits .benefit-list > li:last-child::before {
  inset-block-end: 0;
}

body.nuweb-site #content .nuweb-home .scene--benefits .benefit-list > li:not(:last-child)::after {
  inset-inline: 0;
  inset-block-end: -1px;
  height: 1px;
  background: var(--line);
  transform: scaleX(var(--benefit-line-progress));
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  body.nuweb-site #content .nuweb-home .scene--benefits.scene--linear .benefit-list > li::before,
  body.nuweb-site #content .nuweb-home .scene--benefits.scene--linear .benefit-list > li:not(:last-child)::after {
    transition: transform .65s ease;
    transition-delay: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.nuweb-site #content .nuweb-home .scene--benefits .benefit-list > li {
    --benefit-line-progress: 1 !important;
  }
}