VIDEO SECTION RULES:
- Dark background section (var(--color-dark) or var(--color-dark-2)) to focus attention on the video
- Structure: eyebrow → headline → video embed → subtext below video → optional CTA
- Headline: outcome-focused ("Watch How [Product] Transforms [Result] in Just [Timeframe]")
- Text color: white/light on dark background
- INNER CONTAINER BACKGROUNDS: The video wrapper div must be background:transparent — never set a background color on it.

VIDEO EMBED — NON-NEGOTIABLE:
Every video on the page MUST be a real YouTube iframe embed in a responsive 16:9 wrapper.
Use a default YouTube video ID as a placeholder (e.g. dQw4w9WgXcQ) that the user can swap in GrapesJS.
The video ID MUST be stored in a <span> with id="video-id" so it is editable in GrapesJS without touching JavaScript:

<div class="video-wrapper" style="position:relative;aspect-ratio:16/9;width:100%;max-width:800px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;">
  <span id="video-id" style="display:none;">dQw4w9WgXcQ</span>
  <iframe
    id="main-video-iframe"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&modestbranding=1"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:var(--radius-lg);"
    allowfullscreen
    loading="lazy"
    title="Product video">
  </iframe>
</div>

NEVER use a native HTML <video> tag, a custom video player, a fake play button overlay on a static image, or any non-YouTube embed as the primary video element. A native <video> tag has no source file to point to on this platform and will always render as a broken "no supported format" error — this is the single most common cause of broken video sections. The YouTube iframe is the ONLY acceptable video format. The user must be able to change the video by editing the video ID in GrapesJS.

TRUST POINTS BELOW PLAYER:
Include 3 trust indicators below the video in a flex row:
<div style="display:flex;justify-content:center;gap:var(--space-lg);flex-wrap:wrap;margin-top:var(--space-lg);">
  <span><i class="fas fa-lock" style="color:var(--color-primary);margin-right:0.4em;"></i>Secure &amp; Private</span>
  <span><i class="fas fa-clock" style="color:var(--color-primary);margin-right:0.4em;"></i>[X]-Minute Training</span>
  <span><i class="fas fa-check-circle" style="color:var(--color-success);margin-right:0.4em;"></i>Watch Instantly</span>
</div>
Color: rgba(255,255,255,0.7). Apply animate-fade-in with data-delay="2".

SUBTEXT BELOW VIDEO:
Brief instruction or benefit statement below the video (e.g. "Watch this short video to discover...").
Apply animate-fade-in.

GRAPESJS COMPATIBILITY:
The video section must be fully editable in GrapesJS. The YouTube video ID span (id="video-id") allows the user to change the video without touching JavaScript. Do not use any JavaScript-driven video replacement that would break inside the GrapesJS canvas.


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

1. VIDEO WRAPPER full width with 16:9 aspect ratio preserved:
   editor.addStyle('@media (max-width:767px) { .video-wrapper { width: 100% !important; max-width: 100% !important; aspect-ratio: 16/9; height: auto !important; } }');

2. IFRAME inside wrapper 100% of wrapper:
   editor.addStyle('@media (max-width:767px) { .video-wrapper iframe { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } }');

3. NO FIXED HEIGHT on video wrapper (would break 16:9 on mobile):
   Verify: editor.Css.getRule('.video-wrapper') — must not have a fixed pixel height.
   If it does: editor.Css.setRule('.video-wrapper', {'height':'auto'}, {atRuleType:'media',atRuleParams:'(max-width:767px)'});

4. TRUST ROW below video wraps gracefully:
   editor.addStyle('@media (max-width:767px) { .video-wrapper + div, [class*="trust-row"], [class*="video-trust"] { flex-wrap: wrap; gap: 0.75rem; justify-content: center; padding-left: 10px; padding-right: 10px; } }');

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