feat(docs): add bootcamp promo video to the landing page

docs/index.css

@@ -377,6 +377,20 @@ section {
   margin-left: 0.5rem;
 }
 
+/* ---------- Watch: promo video ---------- */
+
+.promo {
+  display: block;
+  width: 100%;
+  max-width: 56rem;
+  height: auto;
+  aspect-ratio: 16 / 9;
+  margin-top: 2.25rem;
+  border-radius: var(--radius);
+  background: var(--obsidian);
+  box-shadow: var(--shadow-light);
+}
+
 /* ---------- Covers: module list ---------- */
 
 .modules {

docs/index.html

@@ -29,6 +29,7 @@
         </a>
         <nav aria-label="Page sections">
           <ul class="nav__links">
+            <li class="nav__extra"><a href="#watch">Video</a></li>
             <li class="nav__extra"><a href="#covers">Curriculum</a></li>
             <li class="nav__extra"><a href="#finish">Outcomes</a></li>
             <li class="nav__extra"><a href="#requirements">Requirements</a></li>
@@ -57,7 +58,19 @@ <h1 id="hero-title">Go from zero to working <span class="grad">entity resolution
         </div>
       </section>
 
-      <section class="light white" id="covers" aria-labelledby="covers-title">
+      <section class="light white" id="watch" aria-labelledby="watch-title">
+        <div class="wrap">
+          <p class="label">Watch</p>
+          <h2 id="watch-title">The bootcamp in two minutes</h2>
+          <p class="intro">See what a Bootcamper does, module by module, and what they finish with.</p>
+          <video class="promo" controls playsinline preload="metadata" width="1920" height="1080" poster="images/senzing-bootcamp-promo-poster.jpg" aria-label="Senzing Agentic AI Bootcamp promo video, with on-screen captions">
+            <source src="video/senzing-bootcamp-promo.mp4" type="video/mp4">
+            <p>Your browser cannot play this video. <a href="video/senzing-bootcamp-promo.mp4">Download the promo video</a> (MP4, 21 MB).</p>
+          </video>
+        </div>
+      </section>
+
+      <section class="light offwhite" id="covers" aria-labelledby="covers-title">
         <div class="wrap">
           <p class="label">Curriculum</p>
           <h2 id="covers-title">What the bootcamp covers</h2>
@@ -78,7 +91,7 @@ <h2 id="covers-title">What the bootcamp covers</h2>
         </div>
       </section>
 
-      <section class="light offwhite" id="finish" aria-labelledby="finish-title">
+      <section class="light white" id="finish" aria-labelledby="finish-title">
         <div class="wrap">
           <p class="label">Outcomes</p>
           <h2 id="finish-title">What you finish with</h2>
@@ -90,7 +103,7 @@ <h2 id="finish-title">What you finish with</h2>
         </div>
       </section>
 
-      <section class="light white" id="requirements" aria-labelledby="requirements-title">
+      <section class="light offwhite" id="requirements" aria-labelledby="requirements-title">
         <div class="wrap">
           <p class="label">Before you start</p>
           <h2 id="requirements-title">Requirements</h2>
@@ -102,7 +115,7 @@ <h2 id="requirements-title">Requirements</h2>
         </div>
       </section>
 
-      <section class="light offwhite" id="platforms" aria-labelledby="platforms-title">
+      <section class="light white" id="platforms" aria-labelledby="platforms-title">
         <div class="wrap">
           <p class="label">Next step</p>
           <h2 id="platforms-title">Choose your platform</h2>