## 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-5.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-2

## 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.

Create a light feature panel with:
- A large rounded outer container on a pale background, approximately #f5f7fa, with very generous top and bottom padding and a 28–34px corner radius.
- A centered heading around 36–42px in deep navy #10243a, then a dashboard-like asymmetric grid: a large left card, two stacked/right-side cards, and a smaller lower workflow card.
- Cards should be white #ffffff with subtle #e6ebf0 borders or shadows, 18px radius, and 22–26px padding.
- Use dark navy titles, slate supporting text, bright green positive lines, and blue horizontal allocation bars. Keep chart labels and account rows highly legible.
- Give the section a calm, editorial rhythm: 20–24px grid gaps, clear card titles, and enough empty space around charts.
- On mobile, reorder content from overview to performance to allocation to workflow and use a single column.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference;
- duplicate real financial institutions, tickers, balances, or address examples;
- imply financial advice or guaranteed returns without appropriate qualification.