Act as a service designer. Build a how-it-works section for {{business_name}}, a {{business_type}}, ending with {{call_to_action}}. Style: {{visual_style}}. Keep the current components. Write the real steps of how a customer goes from first contact to result, not a generic "Sign up, Customize, Launch". For each step: - a verb-first title ("Send us your floor plan") - one or two sentences on what happens - who does it: "You" or "We", shown as a small label - how long it takes ("about 5 minutes", "within 2 business days") - a small real visual: a cropped screenshot, a photo of the work, or a sample document If there are only 2 real steps, show 2. If there are more than 5, group them into phases. Semantics: an ordered list; numbers come from the list, not typed into text; the connecting line is decorative and aria-hidden. Layout: - 360: vertical, number and line on the left, content right; visual below each step - 768: vertical, visuals to the right of each step - 1280: 3 or 4 columns side by side if every step is short; otherwise a vertical timeline with a sticky intro column on the left (4 columns) and steps on the right (8) Spacing between steps 32 / 40 / 48px. Type: numbers 40 to 48px in tabular-nums in the accent token; titles 18 to 20px weight 600; body 16px at max 50ch. States: missing visual hides the slot; long titles wrap; the final step's button has hover, focus-visible, active and, if it submits, loading. Motion: the line fills as you scroll using a scroll-driven animation, with a static line as the fallback and under prefers-reduced-motion. Avoid: three identical icon cards, arrows between cards that break when they wrap, vague time promises, "seamless" anywhere. Give me the change list and any step where you guessed the timing.