Journey scroll

The “how it works” section as a vertical scroll story — the second treatment of the same JourneyStep[] that JourneySteps renders as four cards in a row. The lead (heading, intro, CTA) is sticky; the steps scroll past it as a timeline with a rail whose fill grows as you read. A step is reached once its dot crosses the focus line (~45% down the viewport): the dot fills, the step brightens from its dimmed waiting state, and the most recent one pulses.

Progress is written imperatively — one custom property and one attribute per step, no React state per scroll event. The lead's grid cell must stretch to the row height (not align-items: start) or the sticky child has no room to travel and never sticks. Scroll this page to run it.