Vertical Feature Timeline with Colored Bullets

<div class="">
  <span class="text-sm font-normal text-neutral-400">Interface</span>
  <h2 class="text-[44px] sm:text-6xl lg:text-7xl leading-[0.9] text-white tracking-tighter mt-2">
    A timeline built for speed and focus.
  </h2>

  <!-- subtle plus markers with divider -->
  <div class="mt-8 relative">

    <div class="hidden sm:flex flex-col gap-4 relative text-neutral-300 bg-transparent pr-4 pl-4">
      <div class="relative">
        <div class="absolute left-2 top-8 bottom-0 w-px bg-gradient-to-b from-emerald-400 via-indigo-400 to-purple-400">
        </div>

        <div class="flex gap-4 items-start">
          <div
            class="flex-shrink-0 w-4 h-4 z-10 relative bg-neutral-900 border-emerald-400 border-2 rounded-full mt-0.5">
            <div class="w-1.5 h-1.5 absolute top-0.5 left-0.5 bg-emerald-400 rounded-full"></div>
          </div>
          <div class="flex-1 pb-6">
            <span class="text-sm font-medium text-emerald-300">Magnetic timeline</span>
            <p class="text-xs text-neutral-400 mt-1">Smart snapping and precision editing</p>
          </div>
        </div>
      </div>

      <div class="relative">
        <div class="absolute left-2 top-8 bottom-0 w-px bg-gradient-to-b from-emerald-400 via-indigo-400 to-purple-400">
        </div>

        <div class="flex gap-4 items-start">
          <div
            class="flex-shrink-0 w-4 h-4 rounded-full border-2 border-indigo-400 bg-neutral-900 z-10 relative mt-0.5">
            <div class="w-1.5 h-1.5 rounded-full bg-indigo-400 absolute top-0.5 left-0.5"></div>
          </div>
          <div class="flex-1 pb-6">
            <span class="text-sm font-medium text-indigo-300">Ripple trim</span>
            <p class="text-xs text-neutral-400 mt-1">Maintain sync across all tracks</p>
          </div>
        </div>
      </div>

      <div class="relative">
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-4 h-4 rounded-full border-2 border-purple-400 bg-neutral-900 z-10 relative mt-0.5">
            <div class="w-1.5 h-1.5 rounded-full bg-purple-400 absolute top-0.5 left-0.5"></div>
          </div>
          <div class="flex-1">
            <span class="text-sm font-medium text-purple-300">Realtime scopes</span>
            <p class="text-xs text-neutral-400 mt-1">Live waveform and vector analysis</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>