Horizontal row of step cards built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro) > an ordered row of "Step Card" component instances, each with a numbered marker, title and description beside its own vertical progress rail. Only the card is a component, with typed props: number, title, text; duplicate, reorder or delete cards in Layers to change the step count. Section options are data attributes on the Row (edit them in Etch's attributes panel): number of steps: duplicate/reorder/delete "Step Card" instances in Layers; step title and description text: props on each card; data-tone (accent|mono|success) recolors the progress bar fill + active number on every card; data-number-style (numeral|dot) switches the step marker between a large tabular number and a plain dot; data-offset (start|center|end) is the trigger line used to compute scroll progress: the card fills as that line crosses the card. A small inline IntersectionObserver + rAF script (off outside the viewport, reduced-motion aware) measures each card against the offset trigger line while the page scrolls and writes a –fill custom property the CSS rail reads, so the active card's rail fills smoothly and the previous card's marker switches to a check mark once its rail is full; the next card's marker and title dim in until it becomes active. Below 34em cards stack in a single column and every rail is shown filled with no scroll-driven motion. Without JS every rail renders at rest (25% fill) and every card stays fully readable. Landmark heading, ordered list semantics, :focus-visible on the (optional) card link, AA contrast in light and dark hosts, forced-colors support.