## 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/mermaidonline-live/7b9ecc63-d7b9-4b92-a5d2-b69508fba7f2-1792152744-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mermaidonline-live/7b9ecc63-d7b9-4b92-a5d2-b69508fba7f2-1792152710959-full.webp
- Component on Kage: https://kage.design/component/mermaidonline-live-feature-grid-2

## Before you start
Ask what the user's product is, what visual best demonstrates it, and which three benefits matter most. Then build an original section following these rules.

Create a two-column product overview with a contained visual or interface preview on one side and a heading, explanatory paragraph, and three icon-led benefit rows on the other. Use a generous white canvas, 40–64px section padding, a 44–50px heading, 16px body copy, and 16–20px gaps between benefit rows. Use dark charcoal #303238, muted gray #70757c, and a single blue accent #4285df for icons and links. The visual should have a light border and restrained shadow; stack columns on mobile. Keep the reading order logical: heading and explanation should remain close to the benefits.

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