## 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/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789141838-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789138376488-full.webp
- Component on Kage: https://kage.design/component/granola-feature-grid-2

## Before you start
Ask what the user's product and brand are, then apply these principles to that context rather than copying the reference.

Build a long-form workflow section on a clean white background. Start with a large serif statement aligned toward the content column, then present three vertically stacked modules representing stages of a user's workflow. Each module should pair a short stage label, serif subheading, and concise sans-serif explanation with a large rounded product mockup or abstract visual. Alternate or consistently align the media column, but maintain one strong editorial grid and generous vertical separation. Use subtle borders, 16–24px corner radii, restrained shadows, and a mostly neutral palette with one contextual accent per visual. Make the modules responsive by stacking text above media on small screens.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- reproduce the three reference stage names or interface screenshots
- sacrifice whitespace for excessive feature detail