## 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-1789146872-4.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-2

## 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 four-column product comparison grid on a very dark surface. Start with a left-aligned heading, supporting sentence, and a secondary comparison CTA. Each card should have a fixed visual area, product title, compact spec badge, description, optional rating row, and a text link. Use equal card widths, 1px borders in `#3a3a3a`, a subtle vertical gradient from `#26232b` to `#101010`, and 0–2px corner radius rather than overly rounded cards. Use 32px section heading, 18px card titles, 13–16px metadata, and 24px card padding. Maintain identical content slots so cards align vertically.

Make the grid responsive: four columns on wide screens, two on tablet, one on mobile. Include focusable cards or links, clear hover border changes, and avoid relying on ratings alone for product evaluation.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never distort product imagery or hide important comparison information below inconsistent card heights.