FAQ section with answers attached
Category: FAQ
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<div data-framer-name="Container" style="display: flex; position: relative; width: 1200px; height: 628px; max-width: 1200px; padding: 96px 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; align-items: center; gap: 64px; opacity: 1; overflow: visible;"><div data-framer-appear-id="11ltsph" data-framer-name="Header" style="will-change: transform; opacity: 1; transform: none; cursor: crosshair; display: flex; position: relative; width: 560px; height: 92px; max-width: 560px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; align-items: center; gap: 16px; overflow: hidden;"><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="cursor: crosshair; display: block; position: relative; width: 51.6375px; height: 28px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible;"><div data-framer-name="White" style="backdrop-filter: blur(4px); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(255, 255, 255, 0.3); border-radius: 99px; box-shadow: rgba(70, 76, 105, 0.2) 0px 0px 4px 0px inset; opacity: 1; display: flex; position: relative; width: 51.6375px; height: 28px; padding: 4px 12px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; gap: 4px; overflow: hidden; cursor: crosshair;"><div data-framer-name="Label" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 27.6375px; height: 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible; cursor: crosshair;"><p data-styles-preset="vd1AstdZF" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33))); cursor: crosshair; display: block; position: static; width: 27.6375px; height: 20px; border: 0px none rgb(36, 39, 52); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(36, 39, 52); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; letter-spacing: -0.14px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">FAQ</p></div></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-framer-name="Heading" data-framer-component-type="RichTextContainer" style="transform: none; display: flex; position: relative; width: 560px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; opacity: 1; overflow: visible; cursor: crosshair;"><h2 data-styles-preset="XqHNLgJth" style="--framer-text-alignment: center; --framer-text-color: var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33)); cursor: crosshair; display: block; position: static; width: 560px; height: 48px; border: 0px none rgb(36, 39, 52); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(36, 39, 52); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 36px; font-weight: 600; line-height: 48px; text-align: center; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Frequently Asked Questions</h2></div></div></div><div data-framer-name="Content" style="display: grid; position: relative; width: 1152px; height: 280px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; gap: 48px; grid-template-columns: 352px 352px 352px; grid-template-rows: 116px 116px; opacity: 1; overflow: hidden;"><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div style="will-change: transform; opacity: 1; transform: none; display: block; position: relative; width: 352px; height: 116px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible;"><div data-framer-name="Default" style="width: 352px; opacity: 1; display: flex; position: relative; height: 116px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 16px; overflow: visible;"><div data-framer-name="Question" data-framer-component-type="RichTextContainer" style="--extracted-1lwpl3i: var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 28px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><h5 data-styles-preset="x5LgRh2Z0" style="--framer-text-color: var(--extracted-1lwpl3i, var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33))); display: block; position: static; width: 352px; height: 28px; border: 0px none rgb(36, 39, 52); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(36, 39, 52); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; text-align: left; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">What kind of projects do you take on?</h5></div><div data-framer-name="Answer" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><p data-styles-preset="hdDmEmbCe" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76))); display: block; position: static; width: 352px; height: 72px; border: 0px none rgb(70, 76, 105); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(70, 76, 105); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">We focus on modern websites, product pages, and high-quality 3D heavy visuals for creative teams and digital products.</p></div></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div style="will-change: transform; opacity: 1; transform: none; display: block; position: relative; width: 352px; height: 116px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible;"><div data-framer-name="Default" style="width: 352px; opacity: 1; display: flex; position: relative; height: 116px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 16px; overflow: visible;"><div data-framer-name="Question" data-framer-component-type="RichTextContainer" style="--extracted-1lwpl3i: var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 28px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><h5 data-styles-preset="x5LgRh2Z0" style="--framer-text-color: var(--extracted-1lwpl3i, var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33))); display: block; position: static; width: 352px; height: 28px; border: 0px none rgb(36, 39, 52); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(36, 39, 52); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; text-align: left; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">How does the process usually work?</h5></div><div data-framer-name="Answer" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><p data-styles-preset="hdDmEmbCe" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76))); display: block; position: static; width: 352px; height: 72px; border: 0px none rgb(70, 76, 105); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(70, 76, 105); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Most projects ship in Framer. For specific project needs, we combine Figma, Framer, and light custom code carefully.</p></div></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div style="will-change: transform; opacity: 1; transform: none; display: block; position: relative; width: 352px; height: 116px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible;"><div data-framer-name="Default" style="width: 352px; opacity: 1; display: flex; position: relative; height: 116px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 16px; overflow: visible;"><div data-framer-name="Question" data-framer-component-type="RichTextContainer" style="--extracted-1lwpl3i: var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 28px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><h5 data-styles-preset="x5LgRh2Z0" style="--framer-text-color: var(--extracted-1lwpl3i, var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33))); display: block; position: static; width: 352px; height: 28px; border: 0px none rgb(36, 39, 52); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(36, 39, 52); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; text-align: left; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Which tools do you use to build sites?</h5></div><div data-framer-name="Answer" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><p data-styles-preset="hdDmEmbCe" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76))); display: block; position: static; width: 352px; height: 72px; border: 0px none rgb(70, 76, 105); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(70, 76, 105); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Most projects ship in Framer. For specific project needs, we combine Figma, Framer, and light custom code.</p></div></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div style="will-change: transform; opacity: 1; transform: none; display: block; position: relative; width: 352px; height: 92px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible;"><div data-framer-name="Default" style="width: 352px; opacity: 1; display: flex; position: relative; height: 92px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 16px; overflow: visible;"><div data-framer-name="Question" data-framer-component-type="RichTextContainer" style="--extracted-1lwpl3i: var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 28px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><h5 data-styles-preset="x5LgRh2Z0" style="--framer-text-color: var(--extracted-1lwpl3i, var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33))); display: block; position: static; width: 352px; height: 28px; border: 0px none rgb(36, 39, 52); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(36, 39, 52); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; text-align: left; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">How long does a typical project take?</h5></div><div data-framer-name="Answer" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><p data-styles-preset="hdDmEmbCe" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76))); display: block; position: static; width: 352px; height: 48px; border: 0px none rgb(70, 76, 105); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(70, 76, 105); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Small landing pages take 1–2 weeks. Larger, multi page sites usually need 3–6 weeks.</p></div></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div style="will-change: transform; opacity: 1; transform: none; display: block; position: relative; width: 352px; height: 92px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible;"><div data-framer-name="Default" style="width: 352px; opacity: 1; display: flex; position: relative; height: 92px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 16px; overflow: visible;"><div data-framer-name="Question" data-framer-component-type="RichTextContainer" style="--extracted-1lwpl3i: var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 28px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><h5 data-styles-preset="x5LgRh2Z0" style="--framer-text-color: var(--extracted-1lwpl3i, var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33))); display: block; position: static; width: 352px; height: 28px; border: 0px none rgb(36, 39, 52); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(36, 39, 52); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; text-align: left; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Can you use our existing branding?</h5></div><div data-framer-name="Answer" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><p data-styles-preset="hdDmEmbCe" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76))); display: block; position: static; width: 352px; height: 48px; border: 0px none rgb(70, 76, 105); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(70, 76, 105); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Yes. We can plug into your current brand system or refine it while we build the site.</p></div></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><div style="will-change: transform; opacity: 1; transform: none; display: block; position: relative; width: 352px; height: 116px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible;"><div data-framer-name="Default" style="width: 352px; opacity: 1; display: flex; position: relative; height: 116px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 16px; overflow: visible;"><div data-framer-name="Question" data-framer-component-type="RichTextContainer" style="--extracted-1lwpl3i: var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 28px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><h5 data-styles-preset="x5LgRh2Z0" style="--framer-text-color: var(--extracted-1lwpl3i, var(--token-3f6952e7-0bb9-4b60-98e1-3004894f3df7, rgb(27, 27, 33))); display: block; position: static; width: 352px; height: 28px; border: 0px none rgb(36, 39, 52); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(36, 39, 52); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; text-align: left; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Do you offer ongoing support after launch?</h5></div><div data-framer-name="Answer" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; display: flex; position: relative; width: 352px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible;"><p data-styles-preset="hdDmEmbCe" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-1655f33c-54b8-43d4-8f16-a9e920ed6c1b, rgb(68, 69, 76))); display: block; position: static; width: 352px; height: 72px; border: 0px none rgb(70, 76, 105); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(70, 76, 105); font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; letter-spacing: -0.32px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Yes. We can handle small updates, new sections, and ongoing design tweaks through simple monthly support plans.</p></div></div></div></div></div></div>
create a canvas to display a faq component. we want the faq component to be centered and the space around it to be flexible empty.
reproduce this Faq component
Created by: LandingHero
