Progress indicator visible on multi-step checkout

A multi-step checkout with no progress indicator leaves shoppers wondering whether they're two forms away from paying or six. Uncertainty drives abandonment — Nielsen Norman research shows users tolerate longer flows when they can see the end. Missing progress cues also break screen-reader navigation, since assistive tech users rely on landmark regions and aria-current to orient. The progress indicator is also the primary anchor for back-navigation jumps, so its absence forces linear-only movement.

Render a stepper component in src/app/checkout/layout.tsx so it appears on every checkout page. Show current step number, total count, and labeled steps. Wire aria-current="step" on the active step for assistive tech. Do not ship a bare progress bar with no labels — the contract rejects context-free indicators.

<nav aria-label="Checkout progress">
  <p>Step {currentStep} of {totalSteps}</p>
  {steps.map((label, i) => <div aria-current={i === currentStep - 1 ? 'step' : undefined}>{label}</div>)}
</nav>