Apply aggressive mobile overflow fixes

- Add !important declarations to override any conflicting styles
- Force overflow-x: hidden on html and body globally
- Apply universal max-width: 100% on mobile
- Specifically target code blocks with word-break and overflow fixes
- Reduce container padding to prevent width issues

This should definitively resolve horizontal scrolling on 375px viewports.

public/index.html

@@ -144,21 +144,47 @@ footer .container { display: flex; align-items: center; justify-content: space-b
 }
 
 /* Additional mobile overflow fixes */
+html, body {
+  overflow-x: hidden !important;
+  max-width: 100vw !important;
+}
+
 @media (max-width: 768px) {
-  body { overflow-x: hidden; }
-  .container { overflow-x: hidden; }
+  * {
+    max-width: 100% !important;
+  }
+  body { 
+    overflow-x: hidden !important; 
+  }
+  .container { 
+    overflow-x: hidden !important; 
+    max-width: 100vw !important;
+    padding: 0 16px !important;
+  }
   .code-section { 
-    max-width: calc(100vw - 48px); 
-    overflow: hidden; 
+    max-width: calc(100vw - 32px) !important; 
+    overflow: hidden !important;
   }
   .code-block {
-    overflow-x: hidden;
-    white-space: pre-wrap;
-    word-break: break-all;
+    overflow-x: hidden !important;
+    white-space: pre-wrap !important;
+    word-break: break-all !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
   }
   .trust-grid {
-    justify-content: center;
-    overflow-x: hidden;
+    justify-content: center !important;
+    overflow-x: hidden !important;
+    max-width: 100% !important;
+  }
+  
+  /* Force any wide elements to fit */
+  pre, code, .code-block, .code-section {
+    max-width: calc(100vw - 32px) !important;
+    overflow-wrap: break-word !important;
+    word-break: break-all !important;
+    white-space: pre-wrap !important;
+    overflow-x: hidden !important;
   }
 }
 </style>