ABOUT / AUTHOR CREDIBILITY SECTION RULES:
- 2-column layout: photo (left) + bio text (right). On mobile: photo stacks above text.
- Photo: <img> placeholder at 400x400 with border-radius: var(--radius-lg) or border-radius: 50% for circular
- Bio structure: eyebrow label ("Meet Your [Coach/Expert/Guide]") → name as h2 → credentials/title → story paragraph → achievement list → signature (optional)
- Story paragraph: personal, authentic, first-person narrative. Connect the author's own struggle to the reader's pain, then explain how they found the solution.
- Achievement list: 3–5 credibility points with Font Awesome icons (fa-trophy, fa-star, fa-users, fa-award)
- Tone: warm, human, and credible — not boastful. The goal is trust, not bragging.
- Background: light or white section for readability
- Optional: quote pullout in a styled blockquote with large quotation mark decoration

CREDENTIAL BADGES:
3–5 pill-shaped badges below the bio. Each: Font Awesome icon + text.
Background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--radius-full); padding: 0.4rem 1rem; font-size: var(--text-sm); font-weight: 600.
Flex-wrap row. Apply animate-on-scroll with stagger.

SIGNATURE:
Stylized CSS italic text (font-family: cursive or 'Playfair Display' italic, font-size: var(--text-2xl), color: var(--color-primary)) above or below bio.

MISSION QUOTE:
Short italicized pull quote in a blockquote with left border: 4px solid var(--color-accent); color: var(--color-mid). Adds personality and authority.


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 — ABOUT / AUTHOR SECTION
[GRAPESJS BUILDER ONLY — page generator: ignore this section]
Run these checks after adding or modifying an about/author section in GrapesJS.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. TWO-COLUMN (photo + bio) collapses, photo centered above bio:
   editor.addStyle('@media (max-width:767px) { [class*="about-row"], [class*="author-row"], [class*="bio-row"] { display: flex; flex-direction: column; align-items: center; } }');

2. AUTHOR PHOTO max-width so it doesn't fill whole screen (centered):
   editor.addStyle('@media (max-width:767px) { [class*="author-photo"], [class*="bio-photo"], [class*="about-img"] { width: 100%; max-width: 200px; margin: 0 auto 1.5rem; display: block; border-radius: inherit; } }');

3. CREDENTIAL BADGES wrap to new lines (no nowrap causing overflow):
   editor.addStyle('@media (max-width:767px) { [class*="credential-badges"], [class*="badge-row"] { flex-wrap: wrap; justify-content: center; } }');

4. ACHIEVEMENT LIST ITEMS icon stays beside text (icon < 40px rule):
   editor.addStyle('@media (max-width:767px) { [class*="achievement-item"], [class*="credential-item"] { display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; } }');

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