feat(video): add YouTube lightbox to benefits section

Replaces static video link with a self-contained VideoCard component
that opens a native <dialog> lightbox with autoplay on open and
iframe src teardown on close. Includes pulsing ring animation on the
play button and a rounded-triangle SVG icon.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

www/src/components/home/HomeBenefits.astro

@@ -1,5 +1,6 @@
 ---
 import type { BenefitsSection } from '../../types/home-sections';
+import VideoCard from '../VideoCard.astro';
 interface Props { section: BenefitsSection }
 const { section } = Astro.props;
 ---
@@ -10,9 +11,11 @@ const { section } = Astro.props;
       <h3>{section.subheading}</h3>
       <ul class="source-list">{section.items.map((item) => <li>{item}</li>)}</ul>
     </div>
-    <a class="video-card" href={section.videoHref}>
-      <img src={`/assets/images/${section.videoImage}`} alt={section.videoImageAlt} />
-      <span>▶</span>
-    </a>
+    <VideoCard
+      image={section.videoImage}
+      alt={section.videoImageAlt}
+      videoUrl={section.videoUrl}
+      videoTitle={section.videoTitle}
+    />
   </div>
 </section>