fix(site): repair mobile feature card rendering

The mobile rule .feature-visual { max-height: 240px } constrained the parent flex container while .device-phone--xl (220px wide x 9:19.5 aspect = ~480px tall) overflowed it. With centered alignment, phones spilled above and below the visual container, intersecting description text and tag pills. Browser-device videos also lacked an explicit max-width on small viewports.

- Drop the artificial max-height; let .feature-visual grow to fit its device naturally.
- Cap .device-phone--xl at min(60vw, 220px) and force browser device to 100% of available width on small viewports.
- Switch video object-fit to cover with explicit dims so the device frame fills cleanly.
- Shorten scroll-reveal transition on mobile to 0.4s so cards don't appear blank during fast scrolls.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

packages/site/src/styles/landing.css

@@ -1679,14 +1679,25 @@ section[id] {
   .feature--center .feature-text {
     margin-bottom: 20px;
   }
-  /* Cap visual height so videos don't dominate the page on narrow viewports */
+  /* Allow visual to size to its content (phones are tall by nature). */
   .feature-visual {
-    max-height: 240px;
+    width: 100%;
+    align-self: stretch;
+  }
+  .feature-visual .device-browser--xl {
+    width: 100%;
+    max-width: 100%;
+  }
+  /* Phone aspect on small screens — kept compact so cards don't dominate. */
+  .device-phone--xl,
+  .feature--center .device-phone--xl {
+    width: min(60vw, 220px);
   }
   .feature-visual video {
-    max-height: 240px;
-    width: auto;
-    object-fit: contain;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
   }
   /* Tighten text rhythm to keep mobile feature stack short */
   .feature-text {
@@ -1702,17 +1713,21 @@ section[id] {
   .features-header {
     padding-bottom: 16px;
   }
-  .device-phone--xl {
-    width: 220px;
-  }
-  .feature--center .device-phone--xl {
-    width: 240px;
-  }
   .feature-visual .device-phone--overlay {
     width: 140px;
     right: -5px;
     bottom: -15px;
   }
+  /* Faster, gentler reveal on mobile — avoids cards looking empty mid-scroll. */
+  .js .feature .feature-text,
+  .js .feature .feature-visual {
+    transition-duration: 0.4s;
+    transform: translateY(16px);
+  }
+  .js .feature .feature-visual {
+    transform: translateY(20px) scale(0.99);
+    transition-delay: 0.05s;
+  }
 
   .how-it-works {
     padding: 100px 16px;