## 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-6.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-pricing-table

## 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 two-card pricing section on a dark navy background:
- Center a clear heading around 36–42px, then use two equal-width cards with a 20px gap.
- The trial card should lead with a short benefit statement, supporting copy, a primary CTA, and a cropped neutral product preview.
- The paid card should emphasize the price in 32–40px type, include a yearly/monthly segmented toggle, a savings note, and concise reassurance about billing/privacy.
- Use #020d1b background, #061a30 cards, #e6edf5 text, #9eafc1 muted text, and #1769ff CTA. Use 18px card radius and subtle borders.
- Make the billing toggle keyboard accessible and update the price/savings copy without layout shift. Stack cards on narrow screens.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference;
- invent pricing, discounts, or guarantees before confirming the user's business model;
- hide important billing terms below the fold.