$marker-size: 1.5em;
$gap-y: 2em;

ol {
  @apply list-none m-0 p-0;
  counter-reset: step;

  > li {
    @apply relative;
    padding-left: calc(#{$marker-size} + .5em);
    margin-bottom: $gap-y;
    counter-increment: step;

    // the two‑digit number
    &::before {
      content: counter(step, decimal-leading-zero);
      position: absolute;
      top: .2em;
      left: 0;
      @apply text-primary font-bold text-2xl leading-none;
    }

    // the dashed connector, now stretches over the gap too
    &::after {
      content: "";
      position: absolute;
      top: calc(#{$marker-size} + .5em);
      bottom: -$gap-y;              // extend past the li’s bottom margin
      left: calc(#{$marker-size} / 2);
      transform: translateX(-50%);
      @apply border-l-2 border-dashed border-gray-300;
    }

    // last item: no connector & no extra bottom margin
    &:last-child {
      margin-bottom: 0;

      &::after {
        @apply hidden;
      }
    }
  }
}

ul {
  @apply list-none m-0 p-0;

  > li {
    @apply relative pl-8 mb-4; // Adjust padding-left based on icon size + desired gap

    &::before {
      @extend .ci; // Inherit base icon styles
      @extend .ci-check; // Use the check icon
      @apply absolute left-0 top-1 text-primary; // Position and color the icon
      // Adjust 'top' value as needed for vertical alignment
    }
  }
}