## 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/app-store-screenshots/ebba8a13-8dd3-48a7-9b23-a1c0db4171af-1793253671-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/app-store-screenshots/ebba8a13-8dd3-48a7-9b23-a1c0db4171af-1793253637144-full.webp
- Component on Kage: https://kage.design/component/app-store-screenshots-feature-grid

## Before you start
Ask what the user's product workflow, number of steps, user inputs, and key interface visuals are, then apply these principles to that product.

Build a “how it works” section with a left-aligned heading followed by four numbered steps. Use a vertical rule and small circular step markers to create continuity. Each step should have a concise title and supporting detail in one column, while the other column contains a large rounded interface preview, terminal panel, conversation mockup, editor canvas, or export panel appropriate to the product. Alternate or vary the visual alignment slightly while maintaining a consistent grid. Use white backgrounds, thin #e6e7eb borders, soft shadows, 12–16px radii, dark navy interface surfaces around #111722, and a clean black/gray typographic hierarchy. Give each step generous vertical padding, with responsive single-column stacking on small screens. Include visible focus states for controls shown inside mockups, but treat mockups as non-functional unless the product requires interaction.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- copy the exact workflow or interface screens
- sacrifice readable step descriptions for oversized visuals