SOLUTION SECTION RULES:
- Use a light background (var(--color-light) or white) to create contrast with the dark problem section
- This section introduces the product/offer as THE answer to the pain points just agitated
- Structure: eyebrow label ("Introducing...") → solution headline → subheading → product image or mockup → key benefit list
- The solution headline must be bold and outcome-focused: "Introducing [Product Name] — The [Adjective] System That [Big Promise]"
- Product image: centered <img> with class "hero-image" for the float animation, or a 2-column layout (image left, benefits right)
- Key benefits: 3–5 items with Font Awesome checkmark icons (<i class="fas fa-check-circle" style="color:var(--color-success)"></i>)
- Each benefit: bold label + 1-sentence explanation
- Transition CTA at the bottom: secondary CTA button linking to the pricing or order section


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 — SOLUTION SECTION
[GRAPESJS BUILDER ONLY — page generator: ignore this section]
Run these checks after adding or modifying a solution section in GrapesJS.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. TWO-COLUMN LAYOUT (if text + image side by side) collapses to single column:
   editor.addStyle('@media (max-width:767px) { [class*="solution-row"], [class*="solution-grid"], [class*="two-col"] { display: block !important; } }');

2. PRODUCT IMAGE full width on mobile, aspect ratio preserved:
   editor.addStyle('@media (max-width:767px) { .hero-image, [class*="product-img"], [class*="solution-img"] { width: 100%; max-width: 100%; height: auto; margin: 0 auto; display: block; } }');

3. BENEFIT LIST ITEMS icon stays beside text (checkmark < 40px rule):
   editor.addStyle('@media (max-width:767px) { [class*="benefit-item"], [class*="solution-item"] { display: flex; align-items: flex-start; gap: 0.75rem; } }');

4. CTA BUTTON centered on mobile:
   editor.addStyle('@media (max-width:767px) { [id*="solution"] .btn { display: block; margin-left: auto; margin-right: auto; } }');

5. SECTION WRAPPER 10px horizontal padding:
   editor.addStyle('@media (max-width:767px) { [id*="solution"], [id*="introducing"] { padding-left: 10px; padding-right: 10px; } }');
