## 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/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060564-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060532-full.webp
- Component on Kage: https://kage.design/component/strawberrybrowser-footer

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual system are. Then apply the principles below to my product rather than reproducing a specific reference.

## Build this section
Create a responsive transition section that introduces an FAQ area near the lower part of a modern product landing page. The section should feel quiet, premium, and editorial: leave generous vertical breathing room, use a warm near-white background, and transition from a subtle technical texture into a clean FAQ surface.

### Layout and alignment
- Use a full-width section with a centered content container, approximately 1080–1200px wide.
- Reserve a large upper zone of whitespace, roughly 180–260px on desktop, so the section feels like a visual pause after the preceding content.
- Add a very low-contrast horizontal grid or pixel-like technical texture around the middle of the transition. It should fade softly at its edges and remain atmospheric rather than decorative.
- Place the FAQ introduction in a two-column row near the lower portion of the section: a larger heading block on the left and the first FAQ question or accordion trigger on the right.
- Align both columns to the top. Use an approximate 44/56 split, with a generous gap between them.
- Keep the first question visually discoverable without making it look like a large card. On smaller screens, stack the heading above the question and reduce the empty vertical space.
- Ensure the section can continue naturally into additional accordion rows below the visible crop.

### Typography hierarchy
- Use a contemporary sans-serif with a clean, slightly humanist or grotesk character.
- Make the FAQ heading bold and compact, around 32–38px on desktop with tight line-height around 1.05–1.15; scale to 28–32px on mobile.
- Use supporting copy below the heading at approximately 16px with a relaxed 1.5 line-height and a muted tone.
- Render the question trigger at approximately 16–18px, medium weight, with comfortable line-height and enough padding for an accessible hit area.
- Keep text wrapping intentional: the heading should remain a strong short block, while questions may occupy one or two lines.

### Spacing, borders, and shape
- Use generous section padding: approximately 64–96px horizontally and 0–48px at the lower FAQ start, adapting to viewport size.
- Preserve large empty space above the FAQ row; do not fill it with extra cards or navigation.
- Use thin, low-contrast dividers around FAQ triggers, approximately 1px.
- Prefer a subtle radius of 10–16px only if the product’s existing system uses rounded surfaces; otherwise keep the trigger nearly flat and editorial.
- If the question is presented as a contained row, use restrained internal padding around 18–24px rather than a prominent elevated card.

### Colour and texture
- Use a warm ivory base around `#F7F4EE` or `#FAF8F3`.
- Use near-black text around `#242321`.
- Use muted secondary text around `#77736D`.
- Use borders around `#E8E3DB` with low contrast against the background.
- Make the grid texture slightly lighter than the background, around `#F1EEE8`, with opacity between 25% and 55%; fade it using a mask or gradient so it never competes with the content.
- Avoid strong shadows, saturated fills, or high-contrast decorative elements.

### Interaction and accessibility
- Make each FAQ question a real button or link with an accessible label and visible keyboard focus state.
- On hover, use a restrained background tint or text-colour change rather than a dramatic animation.
- If accordions are implemented, animate expansion and collapse with a short ease-out transition and expose `aria-expanded` plus a controlled panel relationship.
- Maintain at least a 44px effective touch target for question rows.
- Respect reduced-motion preferences.

## Never
- Never copy the reference’s logos, product names, brand marks, or proprietary wording.
- Never reuse the reference’s FAQ question, supporting copy, or any other exact text; generate content for my product.
- Never reproduce distinctive illustrations, imagery, icons, screenshots, or decorative assets from the reference.
- Never treat the texture as a required branded asset; recreate only the general idea of a faint, fading technical pattern if it suits my brand.
- Never force the warm palette, typography, radius, or proportions if they conflict with my product’s established brand system.
- Never sacrifice responsive behaviour, semantic HTML, accessibility, or readable contrast for visual similarity.