## 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/iris/650a6ac7-5b2c-4108-91e1-31520e600e3c-1790748230-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/iris/650a6ac7-5b2c-4108-91e1-31520e600e3c-1790748183746-full.webp
- Component on Kage: https://kage.design/component/iris-faq

## Before you start
Ask what objections or deployment questions users have about the user's product, and ask for its support/contact preference. Apply the principles below to that context.

Create an FAQ section on an off-white background with a two-column desktop layout. The left column contains a small accent eyebrow, a large editorial serif heading, a short explanation, a small conversational/support icon, and a dark contact CTA. The right column is a vertical accordion of 6–8 questions. Use white or near-white rows around `#ffffff`, subtle 1px borders or very soft shadows, 12–16px radii, 18–20px horizontal padding, and a plus icon aligned to the far right. Questions use a clean 15–17px sans-serif with strong contrast; expanded answers should animate gently and remain readable.

Give the section 72–104px vertical padding and a 40/60 split with a 32–56px gap. Support keyboard interaction, `aria-expanded`, focus rings, and deep-linkable answer IDs. On mobile stack the intro above the accordion and avoid overly tall rows.

### Never
- Never copy the reference questions, answers, product name, or support icon.
- Never hide essential product limitations inside inaccessible accordions.
- Never use animation that prevents keyboard or reduced-motion users from reading answers.