FAQ SECTION RULES:
- Include 6–8 frequently asked questions that address common objections and concerns
- Questions should address: price objections, results/proof, time commitment, guarantee, how it works, who it's for
- FAQ HEADING WRAPPER — REQUIRED, EXACT STRUCTURE: The section headline and subhead must be wrapped together in their own dedicated div, separate from the FAQ items list below it — e.g. `<div class="faq-header"><h2 class="faq-headline">...</h2><p class="faq-sub">...</p></div>`. This wrapper div must have `max-width: 1080px; margin: 0 auto;` on desktop, matching the standard heading width used elsewhere on the page. Do NOT let the heading inherit its width from the narrower FAQ items container below — the heading wrapper and the FAQ items wrapper are two separate elements with two different max-widths, never the same div serving both purposes.
- FAQ ITEMS CONTAINER CLASS NAME — REQUIRED, EXACT NAME: The actual list of FAQ items (the repeating `.faq-item` elements, NOT the heading above them) must be wrapped in a container with the exact class `faq-list` (e.g. `<div class="faq-list">...repeating .faq-item elements...</div>`). This container must have `max-width: 800px; margin: 0 auto;` on desktop — narrower than the 1080px heading wrapper above it, since a long list of question rows reads better at a narrower, more readable width than the wider heading. The platform's landing-base.css also forces this exact width on `.faq-list`, but write it yourself rather than relying on that alone.

ACCORDION STRUCTURE — EXACT MARKUP REQUIRED, NON-NEGOTIABLE:
Each .faq-item wrapper must contain a clickable .faq-question and a structural .faq-answer wrapper.
Inside .faq-answer, ALWAYS wrap the actual text content inside an inner .faq-content container — this is NOT optional and NOT a stylistic suggestion: it is the ONLY thing that holds the answer's padding.
The outer .faq-answer handles collapse (max-height/overflow) and carries ZERO padding of its own. The inner .faq-content holds 100% of the padding.
NEVER put padding directly on .faq-answer — this breaks the collapse animation.
NEVER place answer text, a <p>, or any other content as a direct/bare child of .faq-answer — it MUST go through the .faq-content wrapper first, every single time, with no exceptions for short answers, single-line answers, or any other case.
CONFIRMED REAL-WORLD FAILURE: a generation wrote the answer text directly inside `.faq-answer` with no `.faq-content` wrapper at all. No padding rule in the generated CSS (which only targeted `.faq-content`) ever matched, so the answer rendered completely flush against the box's edges and the question row above it — zero left/right padding, zero top/bottom spacing. This is the single most common FAQ markup mistake — double-check every `.faq-item` you write has the full three-level structure below before finalizing, not just some of them.
BEFORE FINALIZING — FOR EVERY SINGLE FAQ ITEM ON THE PAGE, NOT JUST THE FIRST ONE: verify `.faq-answer`'s only child is a `.faq-content` div, and that the actual text/paragraph content lives inside THAT div, not beside it or instead of it.

<div class="faq-item">
  <button class="faq-question" aria-expanded="false">
    Question text <i class="fas fa-chevron-down faq-icon" aria-hidden="true"></i>
  </button>
  <div class="faq-answer">
    <div class="faq-content">
      <p>Answer text</p>
    </div>
  </div>
</div>

CSS REQUIRED:
.faq-item {
  background: /* a color from this page's design system, e.g. a card surface color, semi-transparent white/black, or the page's --color-card-bg equivalent */;
  border: 1px solid /* a subtle border color from this page's palette */;
  border-radius: /* a radius consistent with this page's other cards/buttons */;
  overflow: hidden;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-content {
  padding: 1.25rem 1.5rem;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}
.faq-icon { transition: transform 0.3s ease; }

FAQ ITEM VISUAL STYLING — NON-NEGOTIABLE: `.faq-item` is a behavior-owned platform class, not a visually-owned one — the platform's landing-base.css only handles its accordion collapse mechanics, not its appearance. The platform does NOT give `.faq-item` a background, border, or border-radius. You must write all of that yourself, matching the design system used elsewhere on this page (the same surface color/border treatment as your cards, pricing boxes, or feature boxes — do not leave it as bare unstyled text). A confirmed real-world failure: a generated FAQ section rendered as plain bold question text with chevron icons and zero card background, border, or separation between rows, because the model assumed the platform's mention of `.faq-item` in its baseline-class list meant the platform also handled its look. It does not — only spacing/collapse behavior is platform-owned; the visual treatment is entirely yours to write.

FAQ ANSWER TOP SPACING — NON-NEGOTIABLE, ESPECIALLY WHEN A VISIBLE DIVIDER LINE IS PRESENT: .faq-content MUST have equal non-zero padding-top and padding-bottom (e.g. padding: 1.25rem 1.5rem). NEVER use padding: 0 1.5rem 1.25rem — the zero top value leaves the answer text flush against the question row with no breathing room. THIS RULE IS CRITICAL, NOT OPTIONAL, WHENEVER A VISIBLE LINE OR BORDER SEPARATES THE QUESTION FROM THE ANSWER: if your FAQ design includes a border (e.g. `border-top: 1px solid rgba(255,255,255,0.1)` between the question and answer, or between each `.faq-item`), the answer text must never rest directly against that line with no gap — there must be visible breathing room between the line and the start of the answer text, created by the equal top/bottom padding on `.faq-content` described above. If you are adding such a border, place it on `.faq-question` (e.g. `border-top` on the question button of every item after the first, or `border-bottom` on the question of every item) rather than on `.faq-answer` or `.faq-item` — this keeps the line's position predictable and independent of whether the answer is open or collapsed, and ensures the padding-top on `.faq-content` is what creates the gap below it once expanded. The max-height:0 on .faq-answer clips this padding while collapsed, so it is safe and only becomes visible when the item is open.

BEFORE FINALIZING — CHECK THE ANSWER'S TOP AND BOTTOM SPACING ARE ACTUALLY EQUAL: Mentally open one expanded FAQ item and compare the gap above the answer text (between the question row and where the text starts) against the gap below it (between where the text ends and the row's bottom edge). These two gaps must read as equal. If they don't — most commonly, generous space above the text but the text sitting flush against the bottom with no breathing room — that asymmetry is the single most common visible symptom of a missing or incomplete `.faq-content` wrapper: the platform's own `padding-top: 24px` on `.faq-answer` (per FAQ PADDING below) still applies even without `.faq-content`, so you can get top spacing "for free" while bottom spacing silently stays at zero if the answer text isn't actually wrapped in `<div class="faq-content">...</div>` inside `.faq-answer`. If you notice this asymmetry, verify the answer text is genuinely wrapped in `.faq-content` (not sitting directly inside `.faq-answer` as a bare text node or a `<p>` with no wrapper) before finalizing.

FAQ PADDING — OUTER OR INNER, NEVER BOTH: Exactly one layer owns the padding around question and answer text. Put padding on .faq-question and .faq-content. Leave .faq-item and .faq-answer themselves without padding in your own CSS. (One narrow exception: the platform's landing-base.css adds `padding-top: 24px` to `.faq-answer` specifically when its parent `.faq-item` carries the "faq-open" class, per FAQ-OPEN CLASS above — this is platform-owned, you never write it yourself, and it doesn't change the rule that you should never add your own padding to .faq-item or .faq-answer.) Never double-stack padding on both an outer wrapper and an inner content element.

GRAPESJS EDITABILITY — CRITICAL:
The platform's landing-base.css now guarantees the FAQ collapse mechanics for you: `.faq-answer` defaults to `max-height: 0` (collapsed) with `overflow: hidden` on the LIVE page, automatically switches to `max-height: none` ONLY inside the GrapesJS editor (so answers stay visible/selectable while editing), and expands the answer for every common open-state class (`.faq-open`, `.open`, `.is-open`, `.active`, and `aria-expanded="true"`). You therefore do NOT need to write the `.faq-answer { max-height: 0 }` closed default yourself — but if you do, use exactly `max-height: 0` and NEVER set a pixel max-height in your static CSS (that is the runtime JS's job).
OPEN-STATE CLASS MUST MATCH THE SCRIPT: The accordion script below toggles the class `faq-open` on the open `.faq-item`. If you write your own open-state CSS (e.g. for rotating the chevron), key it to `.faq-item.faq-open` to match the script — do not invent a different open class like `.open` or `.is-open` and toggle that instead, or the script's class and your CSS's class won't match and the accordion can render stuck open or stuck closed. The platform stylesheet now also recognizes `.open`/`.is-open`/`.active` as a safety net, but `faq-open` (matching the unmodified script) is the correct, required name.

ACCORDION SCRIPT — MUST BE INLINE IN HTML, NOT IN THE JAVASCRIPT FIELD:
External script.js does not reliably execute inside the GrapesJS editor canvas. This accordion script MUST be placed as an inline <script> tag directly in the HTML, immediately after the FAQ section's closing </section> tag. Use this exact script, unmodified:

<script>
(function() {
  if (window.location.search.includes('grapesjs') || document.body.classList.contains('gjs-no-pointer')) return;
  document.querySelectorAll('.faq-question').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var answer = btn.nextElementSibling;
      var content = answer ? answer.querySelector('.faq-content') : null;
      var isOpen = btn.getAttribute('aria-expanded') === 'true';
      document.querySelectorAll('.faq-question').forEach(function(b) {
        b.setAttribute('aria-expanded', 'false');
        var a = b.nextElementSibling;
        if (a) a.style.maxHeight = '0';
        var icon = b.querySelector('.faq-icon');
        if (icon) icon.style.transform = 'rotate(0deg)';
        var item = b.closest('.faq-item');
        if (item) item.classList.remove('faq-open');
      });
      if (!isOpen && answer && content) {
        btn.setAttribute('aria-expanded', 'true');
        answer.style.maxHeight = content.scrollHeight + 'px';
        var icon = btn.querySelector('.faq-icon');
        if (icon) icon.style.transform = 'rotate(180deg)';
        var item = btn.closest('.faq-item');
        if (item) item.classList.add('faq-open');
      }
    });
  });
})();
</script>

FAQ-OPEN CLASS — REQUIRED, EXACT NAME: The script above adds the class "faq-open" to a `.faq-item` while its answer is expanded, and removes it when collapsed (or when another item opens, since only one item is open at a time). This is in addition to, not a replacement for, the aria-expanded/max-height mechanism — never remove this classList logic from the script even if it looks redundant with aria-expanded. The platform's landing-base.css uses this exact class name (`.faq-item.faq-open .faq-answer`) to add extra breathing room above the answer text once expanded — this only works if the script above is included unmodified with the classList.add/remove calls intact.


MOBILE HORIZONTAL SPACING REMINDER: This section is subject to the MOBILE HORIZONTAL SPACING rule in non_negotiable_rules.md — on mobile (max-width:767px), no element you write for this section (outer wrapper, inner container, cards, headings, paragraphs, buttons, icons, anything) may have padding-left, padding-right, margin-left, or margin-right greater than 10px, and this section's outermost div must have at least 10px. Check this section's mobile CSS against that rule before finalizing.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GRAPESJS MOBILE CHECKS — FAQ
[GRAPESJS BUILDER ONLY — page generator: ignore this section]
Run these checks after adding or modifying FAQ in GrapesJS.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. FAQ-LIST full width and padded on mobile:
   editor.Css.setRule('.faq-list', {'max-width':'100%','padding-left':'10px','padding-right':'10px'}, {atRuleType:'media',atRuleParams:'(max-width:767px)'});

2. FAQ-QUESTION horizontal padding ≤ 10px on mobile:
   editor.Css.setRule('.faq-question', {'padding-left':'1rem','padding-right':'1rem'}, {atRuleType:'media',atRuleParams:'(max-width:767px)'});

3. FAQ-CONTENT horizontal padding ≤ 10px (text must not touch card edges but also not overflow section):
   editor.Css.setRule('.faq-content', {'padding':'1rem'}, {atRuleType:'media',atRuleParams:'(max-width:767px)'});

4. FAQ-ITEM full width, no horizontal overflow:
   editor.addStyle('@media (max-width:767px) { .faq-item { width: 100%; box-sizing: border-box; overflow: hidden; } }');

5. QUESTION TEXT wraps — must not use white-space:nowrap:
   editor.addStyle('@media (max-width:767px) { .faq-question { white-space: normal; text-align: left; } }');

6. CHEVRON ICON still visible and rotates — verify .faq-icon is not clipped:
   editor.Canvas.getDocument().querySelectorAll('.faq-icon').forEach(el => { const r = el.getBoundingClientRect(); if(r.width < 10) console.warn('FAQ icon too small/clipped'); });
