## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/qagent/ac07fafb-2e50-4f4b-8444-88a4bcf31a5f-1789711534-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/qagent/ac07fafb-2e50-4f4b-8444-88a4bcf31a5f-1789711433120-full.webp
- Component on Kage: https://kage.design/component/qagent-feature-grid

## Before you start
Ask what the user's product is, who it serves, and what brand personality and visual system it should use. Then apply the principles below to that product rather than reproducing this reference.

Build a four-step horizontal workflow grid inside a centered container. Each card should have a circular numbered badge, a concise action title, and one or two lines explaining the result of that step. Use equal-width cards with 16–20px gaps, pale cream surfaces (#eee8da), 1px beige borders (#d8d0c0), 8–10px radius, and restrained shadow or inset contrast. Set titles at 14–16px and descriptions at 11–13px with comfortable line height. Add responsive wrapping or a one-column stack on small screens, preserving the numbered sequence.

Never: use logos, product names, copy, illustrations, or imagery from the reference.