The checkout progress shows four circles that replace numbers with checkmarks as you advance

The CheckoutSteps component renders four steps — Package, Details, Pay, Done — as a horizontal sequence of numbered circles connected by lines. The steps are defined in a const array with as const so the StepKey type is a union of the four literal strings, not just string. The component receives the current step key and finds its index with findIndex. Every other step is classified from that index — isActive when the indices match, isCompleted when the step index is lower, isFuture when it is higher. The active circle gets a solid service accent background with black text. The completed circle gets the same accent at twenty percent opacity with accent-coloured text. A future circle gets the glass background with muted text. The transition is visual, not structural — the same span element renders in all three states, only the class string changes. When a step is completed, the number disappears and an SVG checkmark takes its place. The checkmark is a hand-coded path element — M5 13l4 4L19 7 — with a stroke width of three and round line caps. No icon library, no font dependency, one path string. The connecting lines between circles use the same colour logic. A completed connection fills with the service accent. An incomplete connection stays at the glass border colour. The combination means the accent colour flows from left to right as the checkout progresses, pooling at the current step and fading beyond it. The step labels hide on mobile using hidden sm:inline so narrow screens see only the numbered circles and checkmarks. The nav element carries aria-label set to Checkout progress. The active step carries aria-current set to step. A screen reader announces exactly where the client is in the flow without reading all four labels. Four steps, three visual states, one SVG path, zero dependencies.