## 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/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146541-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146449552-full.webp
- Component on Kage: https://kage.design/component/chime-feature-grid-2

## Before you start
Ask what two or more product benefits deserve equal emphasis and what imagery or illustrations belong to the user's brand. Then build a responsive benefit-card grid.

Create a light page section containing two equal cards in a two-column grid with a 16px gap. Each card should have a dark green gradient surface (#064A35 to #0B5A40), 16–20px radius, generous padding, a large visual zone in the upper half, a bold 26–32px white title, concise supporting copy, and a small outline CTA. Keep card heights equal and align the title, copy, and button consistently. Use subtle texture or gradients rather than heavy borders, with #F8FAF7 as the surrounding background and #F2F5F0 for any card shadow. On mobile, stack cards and preserve visual hierarchy. If interactive, make each card keyboard-focusable and show a clear focus ring.

Never: copy the reference's titles, text, phone or lock imagery, logos, illustrations, product names, or exact color treatment.