## 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/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146555-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146502433-full.webp
- Component on Kage: https://kage.design/component/betterment-hero

## Before you start
Ask what the user's product, audience, and brand are, then apply these principles to that product rather than copying the reference.

Create a full-width hero beneath the header with a rich blue background and a large lifestyle or product visual occupying the right half, with a dark gradient overlay where text needs protection. Align a constrained text column to the left and vertically center it. Use an expressive serif or high-contrast display heading at roughly 56–72px desktop, 42px mobile, with tight line-height; pair it with calm 16px sans-serif supporting text. Follow with three short benefit rows using small circular check icons, then a warm yellow filled CTA and a tiny image disclaimer. Use generous 20px side gutters, a 1100–1240px max width, and a minimum hero height around 600px desktop. Add a small media-control treatment only when the visual is motion content. Ensure text remains readable over the image and stack text above the image on narrow screens.

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