PROBLEM SECTION RULES:
- Use a dark background (var(--color-dark) or var(--color-dark-2)) to create emotional contrast with the hero
- This section agitates the pain — it must make the reader feel deeply understood
- Structure: section headline ("Does This Sound Familiar?") → pain point list → transition statement
- Pain points: 4–6 items, each as a short punchy statement with an icon (e.g. <i class="fas fa-times-circle" style="color:var(--color-danger)"></i>)
- REQUIRED CLASS NAME — EACH PAIN POINT ITEM MUST USE class="pain-card": Whether the pain points render as a stacked list or a grid of pills/boxes, every individual pain-point item MUST carry the exact class `pain-card` — not `pain-point`, `pain-item`, `problem-card`, or any other synonym. Example: `<div class="pain-card animate-on-scroll" data-delay="1"><i class="fas fa-times-circle" style="color:var(--color-danger)"></i><p>"I don't know where to start."</p></div>`. This exact, consistent class name is required so the REPEATING PILL/BOX GROUPS width-matching rule and the ICON OR BADGE BESIDE A CARD'S HEADING alignment rule in non_negotiable_rules.md always have a fixed, predictable selector to target — do not invent a different class per generation.
- PAIN-CARD GRID GAP — KEEP THE CARDS VISUALLY TOGETHER, NON-NEGOTIABLE: When pain-cards render in a multi-column grid (the common 2x2 layout for 4 items), the grid container's `gap`/`row-gap`/`column-gap` must NEVER exceed 24px. A confirmed real-world failure: a 2x2 pain-card grid rendered with a large gap (well beyond what the cards' own internal padding would suggest), leaving so much empty space between the cards horizontally and vertically that they read as four disconnected, unrelated boxes scattered around the section rather than one cohesive group of related pain points. These cards are presenting one continuous idea (a list of relatable problems) — they must look like a tight, deliberate cluster, not isolated islands. Use `gap: 16px` to `24px` on the grid container (e.g. `display:grid; grid-template-columns:repeat(2,1fr); gap:20px;`) — never a value that visually separates the cards more than the cards' own padding separates their internal content.
- PAIN-CARD GRID MAX-WIDTH — SIZE THE GRID TO ITS OWN CONTENT, NEVER THE FULL SECTION WIDTH — NON-NEGOTIABLE: The pain-card grid container itself (the element with `display:grid`/`grid-template-columns` wrapping all the `.pain-card` items) must NOT stretch to the section's full available width by default. Read the actual pain-point text you're writing and set an explicit `max-width` on the grid container sized to comfortably fit that content at a reasonable per-card width (each card roughly 320–420px wide is typical for a short 1-2 sentence pain point) — e.g. `max-width: 760px; margin: 0 auto;` for a 2-column grid of moderate-length items, adjusted up or down based on your actual text length. Do NOT default to `width:100%`/no max-width on this grid just because the section itself is full-width — letting the grid container stretch full-width forces each card unnecessarily wide and pulls them apart even with a correctly capped `gap` value, since `1fr` columns still expand to fill whatever width the grid container itself is given. Determine the max-width from your content first, the same way you would for any other FIT-CONTENT WIDTH box per non_negotiable_rules.md.
- Transition statement at the bottom: bridge from pain to the solution ("There IS a better way...")
- Tone: empathetic, not preachy. The reader should feel "yes, that's exactly me"
- Text color: white/light on dark background
- Animate items with animate-on-scroll and staggered data-delay attributes

PAIN POINTS LIST — SPECIFICS:
- 3–4 items. Each: bold label (color: var(--color-danger)) + 1–2 sentence expansion (color: rgba(255,255,255,0.75)).
- Use <i class="fas fa-times-circle" style="color:var(--color-danger)"></i> or a red left border on each item.
- Apply animate-on-scroll with stagger data-delay="1","2","3".

AGITATION PARAGRAPH:
After the list, one paragraph in italics intensifying the cost of inaction. Color: rgba(255,255,255,0.65). Apply animate-fade-in.

PIVOT BRIDGE SENTENCE:
Ends the section — "But what if there was a better way?" or "That changes today." — centered, font-weight: 700, color: var(--color-primary-light). Apply animate-on-scroll.

Do NOT apply clip-path or a diagonal edge to this section. Section transitions are handled solely by dividers.


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

1. PAIN-CARD GRID collapses to 1 column:
   editor.addStyle('@media (max-width:767px) { .pain-card-grid, [class*="pain-grid"], [class*="problem-grid"] { grid-template-columns: 1fr !important; max-width: 100% !important; } }');

2. EACH PAIN-CARD full width:
   editor.addStyle('@media (max-width:767px) { .pain-card { width: 100%; box-sizing: border-box; } }');

3. PAIN-CARD horizontal padding ≤ 10px (the desktop grid gap handles spacing, on mobile it collapses):
   editor.addStyle('@media (max-width:767px) { .pain-card { padding-left: 1rem; padding-right: 1rem; } }');

4. ICON stays beside heading on mobile (icon < 40px — side-by-side rule persists on all breakpoints):
   Verify the icon+heading grid template (auto 1fr) is not being overridden by the nuclear grid collapse:
   editor.addStyle('@media (max-width:767px) { .pain-card [class*="card-header"], .pain-card [class*="item-header"] { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; } }');

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