## 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/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789141840-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789138376488-full.webp
- Component on Kage: https://kage.design/component/granola-footer

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

Build a responsive footer with a thin top border and several compact link columns grouped by useful categories. Include a small social/legal row and a large bottom brand treatment or wordmark area that can be typographic rather than image-based. Use a white background, near-black text (#242424), small 12–14px link typography, and generous horizontal padding. Maintain clear hierarchy between column headings and links, provide visible hover/focus states, and collapse columns into accordion groups on narrow screens if there are many links.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- reproduce the reference’s brand lockup, link labels, or copyright text
- let the footer become visually louder than the primary CTA