Fix mobile search overflow and replace ADP home GIF with video

src/css/component-home-v3.css

@@ -19,11 +19,6 @@
   }
 }
 
-/* Mobile nav toggle: invert to white on dark hero background */
-.component-home .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 /* Hide all icons on landing pages */
 .ch3-path-icon,
 .ch3-deploy-icon,

src/css/data-platform.css

@@ -2,11 +2,6 @@
    This page serves as the umbrella landing for Self-managed, Cloud, and Connect docs.
    =================================================================================== */
 
-/* Mobile nav toggle: invert to white on dark hero background */
-.data-platform .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 /* Hide all icons on landing page */
 .dp-product-bullet-icon,
 .dp-popular-icon {

src/css/home.css

@@ -2,11 +2,6 @@ body.article.home {
   background-color: var(--home-background);
 }
 
-/* Mobile nav toggle: invert to white on dark hero background */
-body.article.home .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 /* Layout: full-width content area for home page */
 /* Higher specificity selector to override main > .content (main.css:52-64) */
 main.article.home > .content {
@@ -547,7 +542,8 @@ html[data-theme="dark"] .home-intent-card-visual {
   background: rgba(255, 255, 255, 0.03);
 }
 
-.home-intent-card-visual img {
+.home-intent-card-visual img,
+.home-intent-card-visual video {
   max-width: 100%;
   height: auto;
   display: block;

src/css/labs-home.css

@@ -3,11 +3,6 @@
    Styling for the Labs landing page with hero, filters, and card grid
    ============================================================================= */
 
-/* Mobile nav toggle: invert to white on dark hero background */
-.labs-wrap .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 /* Labs page wrapper */
 .labs-wrap {
   background: var(--body-background);

src/css/search.css

@@ -263,6 +263,7 @@ article.search .ais-Heading > a {
 .aa-Header {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   padding: 12px;
@@ -654,6 +655,14 @@ li.aa-Item:not([id*=filters]) {
     display: flex;
   }
 
+  article.search .ais-InstantSearch .container {
+    flex-wrap: wrap;
+  }
+
+  article.search .searchbox {
+    flex: 1 1 100%;
+  }
+
   article.search .ais-Hits {
     padding: 25px;
   }

src/css/toolbar.css

@@ -32,11 +32,6 @@ html[data-theme=dark] .nav-toggle {
   filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
 }
 
-/* Landing pages have dark backgrounds in light mode - invert nav toggle icon */
-.home .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 @media screen and (min-width: 1024px) {
   .nav-toggle {
     display: none;

src/partials/home.hbs

@@ -78,7 +78,17 @@
 
         {{!-- ADP Visual --}}
         <div class="home-intent-card-visual">
-          <img src="./_images/adp-infographic.gif" alt="Agentic Data Plane infographic" />
+          <video
+            class="home-intent-card-video"
+            width="960" height="320"
+            autoplay loop muted playsinline
+            preload="metadata"
+            poster="./_images/adp-infographic-poster.jpg"
+            aria-label="Agentic Data Plane infographic"
+          >
+            <source src="./_images/adp-infographic.webm" type="video/webm" />
+            <source src="./_images/adp-infographic.mp4" type="video/mp4" />
+          </video>
         </div>
 
         {{!-- Quick Links --}}