PRICING SECTION RULES:
- Display 1–3 pricing tiers in a horizontal card grid (stacks to single column on mobile)
- GRID CONTAINER CLASS NAME — REQUIRED WHEN MORE THAN ONE TIER: When displaying 2 or more pricing tiers side by side, the grid container itself must carry the exact class "pricing-grid". The platform's landing-base.css mobile rules key off this exact class name for stacking behavior. (A single-tier pricing card, like `.pricing-card` alone with no surrounding multi-tier grid, doesn't need this wrapper class.)
- PRICING / PAYMENT CARD ALIGNMENT: Pricing card headers (plan name, price, strikethrough original price, billing period) MUST be center-aligned. However, feature lists and body text inside the pricing card should be left-aligned. Do NOT force every element inside the card to be centered.
- Each card must include: tier name, price (large and prominent), billing period, feature list with checkmarks, and a CTA button
- Featured/recommended card: add class "pricing-card--featured", slightly larger, with a "Most Popular" badge, elevated shadow, and accent border
- LARGE PRICE SPACING RULE: The price amount (e.g. "$97") must have font-size: clamp(3rem, 8vw, 5rem) and font-weight: 800. On mobile, the price in a card must use font-size: clamp(2rem, 8vw, 3rem) — never smaller.
- PRICING CARD HEADINGS — MINIMUM FONT-SIZE — NON-NEGOTIABLE: Every heading inside a pricing card (the plan name/title, e.g. "AI Rebels Complete Training System"; any "Everything Included" or value-stack header; any other h2–h6 living inside `.pricing-card`) must never render smaller than: 30px on desktop (1025px+), 25px on tablet (768px–1024px), 20px on mobile (max-width:767px). This is separate from, and in addition to, the LARGE PRICE SPACING RULE above — the price number itself follows its own much larger clamp() values, while this rule governs every other heading-level element inside the card. A confirmed real-world failure: a pricing card's plan-name heading rendered small and visually de-emphasized relative to the price below it, reading more like a caption than a heading. If you use a clamp() or relative unit for any of these headings, ensure its floor never drops below the minimum for that breakpoint — do not rely on a generic small heading default inside the pricing card.
- Strike-through original price: use <span class="price-original"> with text-decoration: line-through and muted color
- Feature list: use <ul> with Font Awesome checkmark icons (<i class="fas fa-check" style="color:var(--color-success)"></i>) — never plain bullet points
- FEATURE LIST CENTERING WITHIN CARD: the <ul> itself must be set to width: fit-content; max-width: 100%; margin: 0 auto so the list block sits centered within the card, while the text/icons inside each <li> remain left-aligned (text-align: left). Do NOT let the <ul> stretch to the card's full width with left-aligned text — that reads as the list being shoved against the left edge instead of centered as a group. This applies to every pricing tier, featured or not.
- CTA button on each card: <a> tag with btn btn--primary classes — NEVER <button>
- PRICING CTA WRAPPER CLASS NAME — REQUIRED, EXACT NAME: The wrapper div containing the CTA button and the disclaimer text below it must carry the exact class "pricing-cta-wrap" (e.g. `<div class="pricing-cta-wrap"><a class="btn btn--primary">...</a><p class="pricing__disclaimer">...</p></div>`). This wrapper must use `gap: 0` if it's a flex/grid container — per DO NOT DOUBLE UP THE GAP BETWEEN A BUTTON AND TEXT DIRECTLY BELOW IT in non_negotiable_rules.md, the button's own margin-bottom is the only thing that should create space between it and the disclaimer. The platform's landing-base.css also forces `gap:0` on this exact class name as a safety net, but write it yourself rather than relying on that alone.
- Value stack box (if present): set width: fit-content; max-width: 100%; margin: 0 auto — never full width
- Guarantee badge below pricing: small trust element (e.g. "30-Day Money-Back Guarantee" with shield icon)
- One-time payment option vs subscription: clearly label the billing model
- PRICING DISCLAIMER CLASS NAME — REQUIRED, EXACT NAME: Any small trust/legal disclaimer text below the pricing card or CTA (e.g. "Secure checkout · SSL encrypted · 30-day money-back guarantee") must carry the exact class "pricing__disclaimer" — not "pricing-disclaimer", "pricing-disclaimer-text", or any other variant. The platform's landing-base.css uses this exact class name to control its spacing and line-height; a different naming convention will not be matched. EXCEPTION: if the pricing card's CTA button itself is left-aligned (not centered/full-width), do not include this disclaimer 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.


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

1. PRICING-GRID collapses to 1 column (platform landing-base.css handles this — verify):
   editor.addStyle('@media (max-width:767px) { .pricing-grid { grid-template-columns: 1fr !important; } }');

2. PRICE AMOUNT does NOT wrap mid-number (critical — a price split across two lines looks broken):
   editor.addStyle('@media (max-width:767px) { .pricing-card .price, [class*="price-amount"], [class*="price-value"] { font-size: clamp(2rem,8vw,3rem); white-space: nowrap; } }');

3. PRICING CARD full width, no horizontal margin:
   editor.addStyle('@media (max-width:767px) { .pricing-card, .pricing-box { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } }');

4. CTA BUTTON on pricing card full width:
   editor.addStyle('@media (max-width:767px) { .pricing-cta-wrap .btn, .pricing-cta-wrap a.btn { width: 100%; display: block; } }');

5. PLAN NAME HEADING minimum 20px:
   editor.addStyle('@media (max-width:767px) { .pricing-card h2, .pricing-card h3 { font-size: clamp(20px,5vw,28px); } }');

6. FEATURE LIST fits within card:
   editor.addStyle('@media (max-width:767px) { .pricing-card ul { max-width: 100%; text-align: left; } }');

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