SOCIAL PROOF / TESTIMONIALS SECTION RULES:
- Display 3–6 testimonial cards in a grid (3 columns desktop, 2 tablet, 1 mobile)
- GRID CONTAINER CLASS NAME — REQUIRED: The testimonial grid container itself must carry the exact class "testimonials-grid". The platform's landing-base.css mobile rules key off this exact class name for stacking behavior.
- Each testimonial card: avatar image + star rating + quote + name + title/result
- Avatar: circular <img> at 80x80 with border-radius: 50% and aspect-ratio: 1/1
- Star rating: 5 Font Awesome stars (<i class="fas fa-star" style="color:var(--color-warning)"></i>)
- Quote: 2–4 sentences, specific and results-focused. Include actual numbers where possible.
- Name: bold, font-weight: 700
- Title/result: small text below name (var(--text-sm)), muted color — e.g. "Verified Buyer" or "Lost 23 lbs in 6 weeks"
- Card background: white with subtle shadow (var(--shadow-sm)), border-radius: var(--radius-md)
- Animate cards with animate-scale-in and staggered data-delay attributes
- EVERY testimonial MUST contain a specific measurable result: numbers, timeframes, dollar amounts, or quantifiable outcomes.
- Names: realistic, varied. Include city + country or job title.
- Section background: light (var(--color-light)) for contrast

Follow the AVATAR RULE from non_negotiable_rules (56px circular, fixed dimensions, never width:auto/100%).

AUTHOR ROW:
Desktop: display:flex; flex-direction:row; align-items:center; gap:0.75rem; margin-top:var(--space-sm). Avatar on left, name/location on right.
Mobile: follow the AVATAR MOBILE STACKING rule from non_negotiable_rules.

FEATURED TESTIMONIALS (1–2 large cards):
Structure: 5 stars, result headline, body quote, then AUTHOR ROW.
Background: var(--color-white); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-md).
Apply animate-scale-in.

STANDARD TESTIMONIAL GRID:
3-column grid (desktop), 1-column (mobile). Minimum 4 additional cards. Apply animate-on-scroll with stagger.

Optional: stats bar above testimonials — 2-4 large numbers with labels (e.g. "10,000+ Students", "4.9/5 Rating", "$2M+ Earned"). Stats must stay on one row on desktop: `display:flex; flex-wrap:nowrap; justify-content:center; gap: clamp(12px, 2.5vw, 25px);` — NEVER `justify-content:space-between`, and never a gap that can resolve above 25px (this must match the COLUMN GAP CAP / STATS ROW rules in non_negotiable_rules.md — 25px is an absolute ceiling). A CONFIRMED REAL-WORLD FAILURE: `justify-content:space-between` works fine visually with exactly 3 evenly-spaced items, but with only 2 stat items (a common real count, e.g. two earnings figures), `space-between` pushes the two items all the way to the container's literal left and right edges — producing a huge, broken-looking gap in the middle and making the stats appear to "extend the full width" of the section instead of reading as one cohesive group. A SEPARATE, equally damaging version of this same failure: even after switching to `justify-content:center`, an uncapped or overly generous `gap` value (e.g. `clamp(24px, 5vw, 60px)`) can still resolve to 40–60px on a normal desktop viewport — producing the same huge-gap look despite technically using "center." The individual stat cards/items themselves must also be sized to fit their own content (`flex: 0 1 auto`, never `flex: 1 1 0`) rather than stretched to fill the row — see STAT/RESULT CARDS MUST BE SIZED TO FIT THEIR OWN CONTENT in non_negotiable_rules.md. Together, the capped gap and content-sized cards produce a correctly clustered row regardless of how many stat items there actually are (2, 3, or 4) — use this every time, not just when there happen to be 3 items.
Optional: logo strip of media mentions or trust badges below testimonials.


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

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

2. AVATAR DIMENSIONS fixed — never auto or 100% (this breaks the circular shape):
   editor.addStyle('@media (max-width:767px) { .testimonials-grid img[alt], .testimonial-avatar, .avatar { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; border-radius: 50% !important; flex-shrink: 0 !important; } }');

3. AUTHOR ROW stacks on mobile (avatar above name):
   editor.addStyle('@media (max-width:767px) { .testimonial-author, .author-row, [class*="author"] { flex-direction: column; align-items: center; text-align: center; } }');

4. QUOTE TEXT wraps — no overflow:
   editor.addStyle('@media (max-width:767px) { .testimonials-grid blockquote, .testimonials-grid [class*="quote"] { width: 100%; overflow-wrap: break-word; } }');

5. STATS ROW stays on one line with flex (if present above testimonials):
   editor.addStyle('@media (max-width:767px) { [class*="stats-row"], [class*="proof-bar"] { flex-wrap: wrap; justify-content: center; gap: 1rem; } }');

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