BONUSES SECTION RULES:
- Display 3–5 bonus items that stack value on top of the core offer
- Each bonus card: image + bonus number label + bold title + description + value (struck through original, highlighted "FREE" or "INCLUDED")
- Bonus image: <img> placeholder at 280x180 with border-radius: var(--radius-md)
- Bonus number label: small eyebrow pill ("BONUS #1", "BONUS #2", etc.) in accent color
- Value display: <span class="price-original" style="text-decoration:line-through;opacity:0.6;">$[VALUE]</span> <span style="color:var(--color-success);font-weight:700;">FREE</span>
- Total value stack at the bottom: a bordered box listing all bonuses + core offer with their values, then a total value line, then the actual price. Set width: fit-content; max-width: 100%; margin: 0 auto on this box.
- Section background: dark (var(--color-dark-2)) to create visual drama and perceived value
- Text color: white/light on dark background
- Animate bonus cards with animate-on-scroll and staggered data-delay attributes
- CTA below bonuses: "Get Everything Above For Just $[Price]" with primary CTA button

BONUS CARD GRID — COLUMN COUNT:
Follow the CARD GRID COLUMN COUNT decision procedure from non_negotiable_rules (3-wide preferred, drop to 2-wide if any heading won't fit in 2 lines, row-balance always wins). Do NOT hardcode a fixed 2-column layout — evaluate the actual bonus count and heading lengths.


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

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

2. BONUS IMAGES full width on mobile:
   editor.addStyle('@media (max-width:767px) { [class*="bonus-img"], [class*="bonus-image"] img { width: 100%; max-width: 100%; height: auto; } }');

3. VALUE DISPLAY (strikethrough + FREE) stays on one line — use nowrap only if it fits:
   editor.addStyle('@media (max-width:767px) { [class*="bonus-value"], .price-original { white-space: nowrap; font-size: clamp(0.85rem,3vw,1rem); } }');

4. TOTAL VALUE STACK BOX full width on mobile (desktop has fit-content which would constrain it weirdly on narrow screens):
   editor.addStyle('@media (max-width:767px) { [class*="value-stack"], [class*="total-value"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } }');

5. CTA BUTTON below bonuses centered and full-width-safe:
   editor.addStyle('@media (max-width:767px) { [id*="bonuses"] .btn, [id*="bonus"] .btn { display: block; margin-left: auto; margin-right: auto; max-width: 100%; white-space: normal; } }');

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