FEATURES SECTION RULES:
- Display 3–6 features/benefits in a grid layout (3 columns desktop, 2 tablet, 1 mobile)
- GRID CONTAINER CLASS NAME — REQUIRED: The grid container itself must carry the exact class "features-grid" (or "benefits-grid" if you're framing this section's content as benefits rather than features). The platform's landing-base.css mobile rules key off this exact class name for stacking behavior — use one of these two names, not a synonym like "feature-list" or "benefits-row".
- Each feature card: icon (Font Awesome or SVG) + bold title + 2–3 sentence description
- Icons: use a colored icon-wrap circle (background: var(--color-primary-light), color: var(--color-primary))
- Alternate between: icon-top card layout, icon-left row layout, and numbered step layout for visual variety
- Feature cards must have hover state: translateY(-6px) + shadow
- Animate cards with animate-on-scroll and staggered data-delay="1", "2", "3" attributes
- Section background: light (var(--color-light)) for contrast with adjacent dark sections
- Optional: a "How It Works" 3-step process variant with numbered steps and connecting line
- FEATURE ROW LAYOUT (alternating image + text): alternate image-left/text-right and image-right/text-left for visual rhythm. Use 2-column flex layout with gap: var(--space-xl). Image column: flex: 0 0 45%. Text column: flex: 1.


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

1. GRID collapses to 1 column on mobile (platform landing-base.css handles .features-grid and .benefits-grid — verify it's working):
   editor.addStyle('@media (max-width:767px) { .features-grid, .benefits-grid { grid-template-columns: 1fr !important; } }');

2. EACH CARD full width, no horizontal margin:
   editor.addStyle('@media (max-width:767px) { .features-grid > *, .benefits-grid > * { width: 100%; margin-left: 0; margin-right: 0; } }');

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

4. ICON-WRAP dimensions unchanged on mobile (platform-owned — verify your CSS doesn't override width/height):
   editor.Canvas.getDocument().querySelectorAll('.icon-wrap').forEach(el => { const s = getComputedStyle(el); if(parseInt(s.width) !== parseInt(s.height)) console.warn('icon-wrap dimensions mismatch'); });

5. CARD TEXT minimum 1rem (16px) on mobile:
   editor.addStyle('@media (max-width:767px) { .features-grid p, .benefits-grid p { font-size: 1rem; } }');
