Embed team build walkthrough video on homepage; allow YouTube in CSP

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/index.html

@@ -7,6 +7,7 @@
 <main>
 <section class="hero wrap"><div class="eyebrow">Premium • Polygon • Team Duplication</div><h1 id="bridgeHeadline"><span class="gold">Get Your 2.</span><br>Help Your 2 Get Their 2.</h1><p id="bridgeSubheadline">A team-first strategy built around qualification, depth, and duplication.</p><div class="hero-actions"><a class="btn btn-primary" href="/start">Show Me the Current Team Placement →</a><a class="btn btn-secondary" href="#strategy">See the Strategy</a></div><div class="micro">Independent team training resource • Participation involves risk • No income is guaranteed</div>
 <figure class="roadmap-figure" style="margin-top:34px"><a href="/roadmap.webp" target="_blank" rel="noopener"><img src="/roadmap.webp" alt="RM Circle Premium Team Build Roadmap — core strategy, step-by-step guide, premium levels, and duplication formula" width="1149" height="1369"></a><figcaption>The RM Circle is a team build project of the <strong>Crypto Team Build Network</strong>. This roadmap is the plan every member follows — tap to view full size.</figcaption></figure></section>
+<section class="section" style="padding-bottom:0"><div class="wrap"><div class="section-head"><div class="eyebrow">Watch first</div><h2>See how simple this is.</h2><p>A quick walkthrough of the team build in action. Watch this before you dive into the strategy below.</p></div><div class="video-card"><iframe class="video-frame" src="https://www.youtube-nocookie.com/embed/VOhwBiAO7to" title="RM Circle Premium team build walkthrough video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div></div></section>
 <section id="strategy" class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">The strategy</div><h2>Simple enough to duplicate.</h2><p>The goal is not endless personal recruiting. Each position gets two directs, retires that referral link, then helps the next two positions repeat the process.</p></div><div class="grid-3"><article class="card"><div class="card-icon">2</div><h3>Get exactly two</h3><p>Use your position's link until two direct positions are placed beneath you and your position is qualified.</p></article><article class="card"><div class="card-icon">↘</div><h3>Move the effort down</h3><p>Retire the qualified link. Help each of your two directs use their links until they each have two.</p></article><article class="card"><div class="card-icon">↑</div><h3>Upgrade responsibly</h3><p>Use earned POL to advance when practical. Active builders may also choose to self-fund, but only within their own risk tolerance.</p></article></div></div></section>
 <section class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">Moving-link workflow</div><h2>Links retire. Recruiting keeps moving.</h2></div><div class="flow"><div class="flow-step"><b>Step 1</b><strong>Use link</strong><p>Share the current position's referral link.</p></div><div class="flow-step"><b>Step 2</b><strong>Get 2</strong><p>Place exactly two direct positions.</p></div><div class="flow-step"><b>Step 3</b><strong>Retire link</strong><p>Stop creating extra shallow legs.</p></div><div class="flow-step"><b>Step 4</b><strong>Help your 2</strong><p>Shift the team effort to their links.</p></div><div class="flow-step"><b>Step 5</b><strong>Repeat</strong><p>Keep the qualification wave moving down.</p></div></div></div></section>
 <section class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">Depth over width</div><h2>2 → 4 → 8 → 16 → 32</h2><p>The first major team milestone is 30 correctly placed positions across the first four generations: 2 + 4 + 8 + 16.</p></div><div class="matrix" aria-label="Matrix growth illustration"><div class="matrix-group"><div class="people"><span class="person"></span><span class="person"></span></div><b>2</b></div><div class="matrix-group"><div class="people"><span class="person"></span><span class="person"></span><span class="person"></span><span class="person"></span></div><b>4</b></div><div class="matrix-group"><div class="people" id="p8"></div><b>8</b></div><div class="matrix-group"><div class="people" id="p16"></div><b>16</b></div></div><div class="notice"><strong>Team principle:</strong> once your two are in place, do not keep adding more directs to the same qualified link. Help the next positions become qualified so the matrix develops depth instead of extra shallow legs.</div></div></section>

public/styles.css

@@ -17,3 +17,6 @@ a{color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.nav{heigh
 .roadmap-figure figcaption strong{color:var(--teal)}
 
 .funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
+
+.video-card{max-width:880px;margin:0 auto;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
+.video-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px}

server.js

@@ -63,7 +63,7 @@ function securityHeaders(extra={}) {
   return {
     'X-Content-Type-Options':'nosniff','X-Frame-Options':'DENY','Referrer-Policy':'strict-origin-when-cross-origin',
     'Permissions-Policy':'camera=(), microphone=(), geolocation=()',
-    'Content-Security-Policy':"default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:; form-action 'self'; frame-ancestors 'none'",
+    'Content-Security-Policy':"default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:; form-action 'self'; frame-src https://www.youtube-nocookie.com; frame-ancestors 'none'",
     ...extra
   };
 }