Vertical Detailed Stepper

<!--
  Vertical is the layout that never fights a phone: the connector runs down a
  fixed-width left rail as a flex-1 line, so it stretches to whatever height the
  title-plus-description on the right needs. No absolute positioning to drift.
-->
<nav aria-label="Progress" class="w-full">
  <ol>
    <li class="flex gap-4">
      <div class="flex flex-col items-center">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-600 text-sm font-semibold text-white">
          <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
        </span>
        <span aria-hidden="true" class="mt-1 w-px flex-1 bg-blue-600"></span>
      </div>
      <div class="pb-8">
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Create account</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Set your email and a password to get started.</p>
      </div>
    </li>
    <li class="flex gap-4" aria-current="step">
      <div class="flex flex-col items-center">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 border-blue-600 text-sm font-semibold text-blue-600 dark:text-blue-400">2</span>
        <span aria-hidden="true" class="mt-1 w-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
      </div>
      <div class="pb-8">
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Verify email</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Enter the six-digit code we just sent you.</p>
      </div>
    </li>
    <li class="flex gap-4">
      <div class="flex flex-col items-center">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-300 text-sm font-semibold text-gray-500 dark:border-gray-700 dark:text-gray-400">3</span>
      </div>
      <div>
        <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400">Invite your team</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Add teammates now or skip and do it later.</p>
      </div>
    </li>
  </ol>
</nav>