/* What you'll learn (section#accounts): a slow continuous marquee, right to left, no controls.
   roadmap.js duplicates the cards once so the loop is seamless (the strip slides exactly half its
   width, then restarts). Same mechanics as the steps marquee in #recognition. */

.section-accounts .roadmap-track {
  overflow: hidden;
  scroll-snap-type: none;
  scrollbar-width: none;
  padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.section-accounts .roadmap-track::-webkit-scrollbar { display: none; }

.section-accounts .mc-marquee {
  display: flex;
  gap: inherit;
  width: max-content;
  flex: 0 0 auto;
  animation: mc-roadmap-marquee var(--mc-dur, 40s) linear infinite;
}
.section-accounts .mc-marquee > * {
  flex: 0 0 auto;
  width: min(432px, 80vw);
  min-width: 0;
  scroll-snap-align: none;
}
.section-accounts .mc-marquee > * > div:first-child { width: 100%; }
.section-accounts .roadmap-track:hover .mc-marquee { animation-play-state: paused; }
.section-accounts .carousel-controls { display: none !important; }

@keyframes mc-roadmap-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--mc-gap, 0px) / 2)); }
}
@media (prefers-reduced-motion: reduce) { .section-accounts .mc-marquee { animation-duration: 120s; } }