## 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/loqui/a3dfb9eb-3572-4db1-a73a-a6d0266fe180-1793081143-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loqui/a3dfb9eb-3572-4db1-a73a-a6d0266fe180-1793080985787-full.webp
- Component on Kage: https://kage.design/component/loqui-faq

## Before you start
Ask what objections or uncertainties users have before trying the product. Turn those real concerns into concise, accurate questions and answers.

Build a FAQ section with a large editorial heading on the left and an accordion list on the right. Show one item expanded by default and the rest collapsed, each separated by subtle horizontal rules.

Design rules:
- Use a 32/68 desktop split inside a generous max-width container; stack on mobile.
- Use #111111 headings, #6f6c67 answer text, and #dfddd8 separators on a warm white #fbfaf8 background.
- Use a bold sans-serif heading with an italic serif accent; FAQ questions should be 15–17px semibold.
- Keep each row at least 56px tall with generous vertical padding and a right-aligned plus/minus control.
- Animate expansion with a short height and opacity transition, while respecting reduced-motion preferences.
- Ensure the accordion is keyboard accessible with buttons, focus rings, and correct aria-expanded state.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the reference's exact questions, answers, or accordion styling.