## 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/loqua/e5cf041a-edc7-487a-b4b8-8f4d563da4de-1789192873-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loqua/e5cf041a-edc7-487a-b4b8-8f4d563da4de-1789192838731-full.webp
- Component on Kage: https://kage.design/component/loqua-feature-grid-2

## Before you start
Ask which 3–5 product capabilities deserve dedicated explanation and what user problem each solves. Use the following reusable editorial system for those capabilities, adapted to the user's product.

Build a sequence of capability sections on a warm ivory canvas. Give each capability group a centered serif heading around 28–34px with thin horizontal rules extending outward. Within each group, use generous vertical space and an alternating two-column layout: a left text block with a small colored line icon, italic editorial subheading around 21–25px, concise body copy, and optionally a short numbered process; a right rounded media/demo placeholder with a soft beige background (`#f3efe4`) or white panel, plus a small “watch/demo” control beneath. Alternate the text and media sides between rows to create rhythm. Keep group headings visually distinct, use 80–120px vertical spacing, 40–48px column gaps, 16–20px radii, and responsive stacking on mobile. For a longer group, let one capability contain a small three-step explanation card.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- copy the exact capability names or claims
- fill media placeholders with unlicensed screenshots or decorative filler