## 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/ledger-com/abaab959-f9d6-43c3-8f0c-09f584ac8799-1789146871-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ledger-com/abaab959-f9d6-43c3-8f0c-09f584ac8799-1789146801441-full.webp
- Component on Kage: https://kage.design/component/ledger-feature-grid

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Apply the following principles to that product rather than reproducing the reference.

Build a three-column benefits section on a black background. Each item needs a small line icon, a short bold title, and two to three lines of explanatory copy. Use equal-width columns, vertical 1px dividers in `#383838`, 24–32px internal padding, and a max-width aligned with the hero. Use 18–20px titles, 15–16px body text in `#c8c8c8`, and generous vertical whitespace. Keep the icons simple, monochrome, and semantically relevant. On mobile, stack the items and replace vertical rules with horizontal separators.

Add subtle hover emphasis only if the items are interactive; otherwise preserve their editorial, non-clickable feel.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never overload each pillar with long paragraphs or competing CTAs.