Day Track Hiring Process Block for React

Edit STAGES at the top of the file: each has a name, an expect sentence and the number of days it takes. The track has one column per day, so a stage's bar spans as many columns as it has days, the "Day 4–8" badges are computed from the running total and the ruler's ends follow the sum. The closing promise is plain text in the last paragraph. The track is laid out for a total of 14 columns: if your total differs, change grid-cols-14 and the calc(100%/14) in the day lines to the new number.

Yes: it is a grid with a column per day, and a faint line at each day, so a four-day stage is exactly twice as wide as a two-day one. Below a wide screen the bars are too narrow for names, so they keep only the stage's number; the cells below carry the names and the days.

The track is hidden from assistive technology on purpose: it repeats what the cells say. The cells are an ordered list, one item per stage with its name as an h3, its days and what to expect, and the closing promise is a paragraph, so a reader gets each fact once, in order. The numbers beside each name are decorative.

The cells stack, each full width with its day badge at the end of its first line, and the track keeps its bars with only their numbers. Between the two bands and under the cells there is one hairline each, rail to rail. Nothing scrolls sideways at 320 pixels, and the track and its ruler keep their order in a right-to-left layout while the cells flip.

It is a process drawn to scale, so it works for anything that runs as stages over days: a security review, an implementation, a refund. Rename the stages and the closing promise and it reads the same way. The "reply within two days" line is the one piece of copy that is a commitment: only keep it if you will.

The header and the two bands fade up once on load. With reduced motion they simply appear. Nothing else moves.