if this fixes the issues ill marry cursor

Author: tcaldwell-x

pilot.mdx

@@ -7,7 +7,7 @@ mode: 'custom'
 import { Button } from '/snippets/button.mdx';
 
 <div
-  className="relative w-full flex items-center justify-center"
+  className="pilot-hero relative w-full flex items-center justify-center"
   style={{
     minHeight: '28rem',
     backgroundColor: 'black',
@@ -76,13 +76,13 @@ import { Button } from '/snippets/button.mdx';
 </div>
 
 <div
-  className="relative w-full flex flex-col items-center justify-center"
+  className="pilot-section relative w-full flex flex-col items-center justify-center"
   style={{paddingTop: '6rem', paddingBottom: '6rem', maxWidth: '70rem', marginLeft: 'auto',
    marginRight: 'auto', paddingLeft: '1.25rem',
    paddingRight: '1.25rem', backgroundColor: 'black' }}
 >
   <div
-    className="text-gray-900 dark:text-gray-200 font-branded"
+    className="pilot-section-title text-gray-900 dark:text-gray-200 font-branded"
     style={{
      textAlign: 'center',
      fontSize: '24px',
@@ -119,7 +119,7 @@ import { Button } from '/snippets/button.mdx';
 </div>
 
 <div
-  className="relative w-full flex flex-col items-center justify-center"
+  className="pilot-section relative w-full flex flex-col items-center justify-center"
   style={{
     paddingTop: '6rem',
     paddingBottom: '6rem',
@@ -161,7 +161,7 @@ import { Button } from '/snippets/button.mdx';
   {/* Content */}
   <div style={{ position: 'relative', maxWidth: '70rem', zIndex: 1 }}>
     <div
-      className="text-gray-900 dark:text-gray-200 font-branded"
+      className="pilot-section-title text-gray-900 dark:text-gray-200 font-branded"
       style={{
         textAlign: 'center',
         fontSize: '24px',
@@ -245,14 +245,14 @@ import { Button } from '/snippets/button.mdx';
 </div>
 
 <div
-  className="relative w-full flex flex-col items-center justify-center"
+  className="pilot-section relative w-full flex flex-col items-center justify-center"
   style={{paddingTop: '6rem', paddingBottom: '6rem', maxWidth: '70rem', marginLeft: 'auto',
    marginRight: 'auto', paddingLeft: '1.25rem',
    paddingRight: '1.25rem', backgroundColor: 'black' }}
 >
 <div style={{maxWidth: '70rem'}}>
   <div
-    className="text-gray-900 dark:text-gray-200 font-branded"
+    className="pilot-section-title text-gray-900 dark:text-gray-200 font-branded"
     style={{
      textAlign: 'center',
      fontSize: '24px',
@@ -262,10 +262,10 @@ import { Button } from '/snippets/button.mdx';
     Credit Consumption Details
   </div>
 <div 
-  className="rounded-lg overflow-hidden border border-zinc-500/20"
+  className="pilot-table-container rounded-lg overflow-hidden border border-zinc-500/20"
   style={{ marginTop: '1rem' }}
 >
-  <table className="w-full text-left text-white" style={{maxWidth: '70rem'}}>
+  <table className="pilot-table w-full text-left text-white" style={{maxWidth: '70rem'}}>
     <thead className="bg-zinc-500/10 backdrop-blur-md border-b border-gray-500">
       <tr>
         <th className="p-4 font-semibold text-white">Resource</th>
@@ -322,7 +322,7 @@ import { Button } from '/snippets/button.mdx';
 </div>
 
 <div
-  className="relative w-full flex flex-col items-center justify-center"
+  className="pilot-section relative w-full flex flex-col items-center justify-center"
   style={{
     paddingTop: '6rem',
     paddingBottom: '6rem',
@@ -364,7 +364,7 @@ import { Button } from '/snippets/button.mdx';
   {/* Content */}
   <div style={{ position: 'relative', maxWidth: '70rem', zIndex: 1 }}>
     <div
-      className="text-gray-900 dark:text-gray-200 font-branded"
+      className="pilot-section-title text-gray-900 dark:text-gray-200 font-branded"
       style={{
         textAlign: 'center',
         fontSize: '24px',
@@ -375,10 +375,10 @@ import { Button } from '/snippets/button.mdx';
     </div>
 
 <div 
-  className="rounded-lg overflow-hidden border border-zinc-500/20"
+  className="pilot-table-container rounded-lg overflow-hidden border border-zinc-500/20"
   style={{ marginTop: '1rem' }}
 >
-  <table className="w-full text-left border-collapse text-white" style={{maxWidth: '70rem'}}>
+  <table className="pilot-table w-full text-left border-collapse text-white" style={{maxWidth: '70rem'}}>
     <thead className="bg-zinc-500/10 backdrop-blur-md border-b border-gray-500">
       <tr>
         <th className="p-4 font-semibold text-white">Feature</th>
@@ -437,13 +437,13 @@ import { Button } from '/snippets/button.mdx';
 </div>
 
 <div
-  className="relative w-full flex flex-col items-center justify-center"
+  className="pilot-section relative w-full flex flex-col items-center justify-center"
   style={{paddingTop: '6rem', paddingBottom: '6rem', maxWidth: '70rem', marginLeft: 'auto',
    marginRight: 'auto', paddingLeft: '1.25rem',
    paddingRight: '1.25rem', backgroundColor: 'black' }}
 >
   <div
-    className="text-gray-900 dark:text-gray-200 font-branded"
+    className="pilot-section-title text-gray-900 dark:text-gray-200 font-branded"
     style={{
      textAlign: 'center',
      fontSize: '24px',

style.css

@@ -149,4 +149,86 @@ td[data-label="Free Limit"] strong {
     padding-right: 1.5rem;
     font-size: 1rem;
   }
-}
+}
+/* Pilot page responsive styles */
+.pilot-hero {
+  min-height: 24rem;
+}
+
+.pilot-section {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.pilot-section-title {
+  font-size: 20px;
+}
+
+.pilot-table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.pilot-table {
+  min-width: 600px;
+}
+
+@media (max-width: 640px) {
+  .pilot-hero {
+    min-height: 20rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .pilot-section {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .pilot-section-title {
+    font-size: 18px;
+  }
+
+  .pilot-table th,
+  .pilot-table td {
+    padding: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .text-hero {
+    font-size: 1.75rem !important;
+    line-height: 1.2;
+  }
+}
+
+@media (max-width: 480px) {
+  .pilot-hero {
+    min-height: 18rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .pilot-section {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .pilot-section-title {
+    font-size: 16px;
+  }
+
+  .pilot-table th,
+  .pilot-table td {
+    padding: 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .text-hero {
+    font-size: 1.5rem !important;
+    line-height: 1.1;
+  }
+}