fix: Safari workaround for env() returning 0 in portrait mode

- Add hardcoded fallbacks using max() function per Apple's recommendation
- Support both constant() and env() for legacy compatibility
- Use 59px fallback for Dynamic Island devices
- Add iOS-specific detection with @supports(-webkit-touch-callout)
- Create improved test page with device detection
- Update hero-content padding with same fallback approach

This works around the known Safari bug where env(safe-area-inset-top)
returns 0px in portrait mode. The video will now extend 59px above the
viewport on Dynamic Island iPhones, ensuring it covers the notch area.

apps/website/assets/css/voyage-layout.css

@@ -490,11 +490,11 @@ html {
     align-items: center;
     justify-items: center;
     text-align: center;
-    /* Use env() directly for safe area padding */
-    padding-top: calc(env(safe-area-inset-top) + clamp(2rem, 8vh, 5rem));
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
-    padding-bottom: calc(env(safe-area-inset-bottom) + clamp(1.25rem, 3vh, 2.5rem));
+    /* Safari-compatible safe area padding with fallbacks */
+    padding-top: calc(max(env(safe-area-inset-top), 44px) + clamp(2rem, 8vh, 5rem));
+    padding-left: max(env(safe-area-inset-left), 0px);
+    padding-right: max(env(safe-area-inset-right), 0px);
+    padding-bottom: calc(max(env(safe-area-inset-bottom), 0px) + clamp(1.25rem, 3vh, 2.5rem));
     row-gap: clamp(2rem, 6vh, 4rem);
 }
 
@@ -505,6 +505,14 @@ html {
     }
 }
 
+/* iOS-specific padding for hero content */
+@supports (-webkit-touch-callout: none) {
+    .hero-content {
+        /* Use larger fallback for Dynamic Island devices */
+        padding-top: calc(max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px) + clamp(2rem, 8vh, 5rem));
+    }
+}
+
 .hero-main {
     width: min(720px, 100%);
     margin: 0 auto;