Row of step cards built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro) > an ordered row of "Step" component instances. Only the step is a component, with typed props: number, title, description; duplicate, reorder or delete instances in Layers to change the step count. Row options are data attributes on the Row (edit them in Etch's attributes panel): step number, title and description: props on each "Step" instance; step count: duplicate/reorder/delete "Step" instances in Layers (2-6 works well); data-tone (accent|violet|emerald|amber) recolors the progress fill and active number; data-interval (ms, default 4200, min 1200) how long each step stays active before handing off; data-autoplay (true|false) — off leaves the first step expanded and lets people click through manually. Each step is a button; the active one widens to reveal its description above a horizontal progress rail that fills over the interval, while the others collapse to a slim number + title strip. An inline script (init-guarded, off outside the viewport, off in the Etch builder canvas) runs the rAF timer, advances to the next step on completion and loops, pauses on hover/focus/click-hold and instantly on prefers-reduced-motion, and lets a click or Enter/Space on any collapsed step jump straight to it and restart its timer. Without JS every step renders expanded in a stacked column so all the content stays readable. Landmark heading, each step is a button with aria-expanded + aria-controls pointing at its own description id, :focus-visible rings, AA contrast, forced-colors support.