## 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/portfolio-frame/48220de1-a18c-43ab-aca5-f2ed5e4c7799-1789538575-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/portfolio-frame/48220de1-a18c-43ab-aca5-f2ed5e4c7799-1789538513158-full.webp
- Component on Kage: https://kage.design/component/portfolio-frame-faq

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

Create a dark FAQ section with a max-width content rail. Use a mono eyebrow, an editorial heading, then a vertical accordion list spanning most of the rail. Each row should be 54–64px tall with a thin #242a2a bottom border, a bold readable question on the left, and a blue plus or chevron on the right. On activation, expand an answer beneath the question with a smooth but brief height transition; only one or multiple items may be open according to the product's needs. Use #0b0d0d, #f0f1f2, #9a9fa2, and #52afe1. Provide keyboard focus rings, aria-expanded state, and sufficient contrast.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- copy the reference questions or answers
- hide important support information behind inaccessible interactions