## 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/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789193036-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789192903236-full.webp
- Component on Kage: https://kage.design/component/jackalope-feature-grid

## Before you start
Ask what capabilities the user's product should communicate and what brand colors and illustration style it uses. Then adapt this grid system to those needs.

Build a capabilities section with a left-aligned oversized heading and a responsive card grid. Use two larger cards per row followed by a denser three-card row when the content hierarchy calls for it. Every card should have a soft pastel visual area on top, a compact uppercase eyebrow, a clear benefit-led title, one sentence of supporting text, a thin divider, a small expandable 'How it works' affordance, and a text link with an arrow. Keep all cards equal height within each row and align internal padding consistently. Use an off-white background near #f4f3f8, cards near #f8f7fb with #d7d5df borders, pastel lavender #dcd8f8, sage #d7e6e2, sand #e8dfd4, and blush #ead7dc. Use 26–32px section headings, 22–28px card titles, 11px uppercase labels with tracking, 20px card radius, and 24px gaps. Add hover lift, link color transition, and accordion behavior for the disclosure row.

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