## 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/open-for-sales/9a311215-a6aa-4eac-b69d-0b0434feabcf-1793253812-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/open-for-sales/9a311215-a6aa-4eac-b69d-0b0434feabcf-1793253735957-full.webp
- Component on Kage: https://kage.design/component/open-for-sales-feature-grid

## Before you start
Ask what product capabilities deserve emphasis, which workflows matter most, and what screenshots or UI states are available. Build a capability section for that product using these reusable principles.

Use a left-aligned section heading and concise supporting paragraph within the same max-width container as the cards. Establish a clear hierarchy: one wide, prominent feature card first, then three equal cards beneath or beside it depending on viewport. Use white cards (#ffffff) on a near-white background (#fafafa), 1px borders in #e5e5e2, 14–18px radius, and subtle shadows only where needed. The lead card can use a split layout with explanatory text on the left and a soft, cropped product UI preview on the right; secondary cards should place a 20–24px title and muted description above a contained screenshot or abstract data panel. Use 24–32px internal padding, 16–20px gaps, and consistent card heights where possible. Add a small circular expand/open affordance only if previews genuinely open or zoom.

Never: reuse reference screenshots, feature names, product copy, logos, illustrations, or interface imagery.