## 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/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789141944-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789138980717-full.webp
- Component on Kage: https://kage.design/component/mercury-feature-grid-4

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

Create an alternating feature section for a sophisticated business product. Start with a large visual on the left and outcome-led copy on the right, then follow with a 2×2 grid of compact feature cards. Each card needs a distinctive abstract UI thumbnail, a short title, and concise explanatory text. Alternate the larger media/text order to create movement while keeping a consistent content rail. Use #171721, #242430 panels, #d8d8df headings, #9b9ba8 body text, 1px borders, and 10px radius. Add focus and hover states to cards without changing layout.

Never: use logos, product names, copy, illustrations, or imagery from the reference.