## 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/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146602-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146540058-full.webp
- Component on Kage: https://kage.design/component/copilot-money-feature-grid

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and colours are. Apply the principles below to that product rather than reproducing this reference.

Build a dark feature-grid section:
- Center a concise two-line heading at the top, around 36–44px, with generous space before the grid.
- Use a 2-column desktop grid with one wide lead card spanning both columns, then four equal cards arranged in two rows.
- Each card needs a clear 18px title, one short muted explanation, and a simple data visualization or UI fragment that supports the claim.
- Surfaces should be #061a30 or #071d35 against #020d1b, with 1px rgba(130,170,220,.12) borders, 18–22px radius, and 24px internal padding.
- Use restrained semantic chart colours: green #20c875, yellow #f2c94c, coral #ee6670, cyan #25aeea; avoid decorative noise.
- Make the grid collapse to one column on mobile and keep visualizations readable; cards may have subtle hover elevation but no distracting animation.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference;
- copy the exact feature titles, transaction examples, or charts;
- make every card visually identical when hierarchy can improve scanning.