.sm.steps li { position: relative; padding-left: 2.25rem; margin-bottom: 2.25rem; }
.sm.steps li:last-child { margin-bottom: 0; }


.sm-link {
  position: absolute;
  left: 0.375rem;
  top: calc(100% - 0.5rem);
  width: 3px;
  height: 2.75rem;
  background: repeating-linear-gradient(to bottom, var(--color-line) 0 5px, transparent 5px 10px);
}


.sm-link__fill {
  position: absolute;
  inset: 0;
  transform: scaleY(0);
  transform-origin: top;
  background: repeating-linear-gradient(to bottom, var(--color-accent) 0 5px, transparent 5px 10px);
  transition: transform var(--dur-ui) var(--ease-out);
}
.sm-link__fill[data-p="1"] { transform: scaleY(0.1); }
.sm-link__fill[data-p="2"] { transform: scaleY(0.2); }
.sm-link__fill[data-p="3"] { transform: scaleY(0.3); }
.sm-link__fill[data-p="4"] { transform: scaleY(0.4); }
.sm-link__fill[data-p="5"] { transform: scaleY(0.5); }
.sm-link__fill[data-p="6"] { transform: scaleY(0.6); }
.sm-link__fill[data-p="7"] { transform: scaleY(0.7); }
.sm-link__fill[data-p="8"] { transform: scaleY(0.8); }
.sm-link__fill[data-p="9"] { transform: scaleY(0.9); }
.sm-link__fill[data-p="10"] { transform: scaleY(1); }


@media (prefers-reduced-motion: reduce) {
  .sm-link__fill[data-p] { transition: none; transform: scaleY(1); }
}