FINAL CTA SECTION RULES:
- Dark background (var(--color-dark) or strong gradient) for maximum visual impact — this is the last chance to convert
- Structure: urgency eyebrow → bold headline → subheading → primary CTA button → trust microcopy
- This section's headline is subject to the universal SECTION FIRST-HEADING MINIMUM FONT-SIZE rule in non_negotiable_rules.md (35px desktop / 30px tablet / 25px mobile minimum) — see that rule for full details.
- Urgency eyebrow: "⚡ LIMITED TIME OFFER" or "🔥 ACT NOW — OFFER EXPIRES SOON"
- Headline: restate the biggest benefit and the offer ("Get [Product] Today And [Big Promise]")
- Subheading: reinforce the value and remove final objections ("Join [X] people who have already [result]")
- Primary CTA: large <a> tag with btn btn--primary btn--pulse classes and Font Awesome arrow icon
- Trust microcopy below CTA: "✓ 30-Day Money-Back Guarantee  ✓ Instant Access  ✓ Secure Checkout" Must carry the exact class "cta-note" — not "cta-disclaimer" or any other variant. Per DO NOT DOUBLE UP THE GAP BETWEEN A BUTTON AND TEXT DIRECTLY BELOW IT in non_negotiable_rules.md, never give this element its own margin-top. EXCEPTION: if the primary CTA itself is left-aligned (not centered/full-width), do not include this microcopy at all — see the BUTTON ITSELF IS LEFT-ALIGNED exception under TEXT IMMEDIATELY UNDER A BUTTON MUST BE CENTERED AND BALANCED in non_negotiable_rules.md.
- Optional: countdown timer embedded in this section for maximum urgency
- Text color: white/light on dark background
- This section must feel like a natural conclusion to the page story — not a hard sell


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 — CTA / FINAL CALL-TO-ACTION
[GRAPESJS BUILDER ONLY — page generator: ignore this section]
Run these checks after adding or modifying the CTA section in GrapesJS.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. CTA BUTTON centered, full-width-safe, wraps properly:
   editor.addStyle('@media (max-width:767px) { .btn.final-cta-btn, a.btn.final-cta-btn, tempbutton.btn.final-cta-btn { display: block; margin-left: auto; margin-right: auto; width: auto; max-width: 100%; white-space: normal; text-wrap: balance; } }');

2. CTA-NOTE (trust line below button) centered and balanced:
   editor.Css.setRule('.cta-note', {'text-align':'center','text-wrap':'balance','max-width':'100%'}, {atRuleType:'media',atRuleParams:'(max-width:767px)'});

3. SECTION HEADING minimum 25px on mobile:
   editor.addStyle('@media (max-width:767px) { [id*="cta"] h2, [id*="final"] h2, [id*="action"] h2 { font-size: clamp(25px,7vw,35px); } }');

4. SECTION WRAPPER 10px horizontal padding:
   editor.addStyle('@media (max-width:767px) { section[id*="cta"], section[id*="final"], section[id*="action"] { padding-left: 10px; padding-right: 10px; } }');

5. COUNTDOWN TIMER (if embedded in CTA) stays in flex row — see COUNTDOWN mobile checks.
