feat(ui): add responsive navigation and mobile layout improvements

Add hamburger menu toggle with ARIA support for mobile nav. Introduce
responsive breakpoints at 768px (tablet) and 480px (phone) with stacked
nav, adjusted spacing, and full-width elements. Add table overflow
protection and responsive refinements across all page layouts.

src/pages/docs.astro

@@ -798,7 +798,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   
   .concept-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -835,7 +835,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Steps Grid */
   .steps-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -937,7 +937,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Interface Grid */
   .interface-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -1025,7 +1025,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Shortcuts */
   .shortcuts-layout {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -1079,7 +1079,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Commands */
   .commands-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -1175,7 +1175,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Settings */
   .settings-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -1330,7 +1330,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Known Bugs */
   .bugs-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-lg);
     margin-bottom: var(--space-xl);
   }
@@ -1434,7 +1434,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Screenshot Capture */
   .screenshot-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-lg);
     margin-bottom: var(--space-xl);
   }
@@ -1704,11 +1704,28 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       padding-top: calc(var(--space-xl) + 60px);
       padding-bottom: var(--space-md);
     }
+
+    .docs-section {
+      padding: var(--space-xl) 0;
+    }
+
+    .concept-card,
+    .support-card {
+      padding: var(--space-lg);
+    }
     
     .concept-header {
       flex-direction: column;
       align-items: flex-start;
     }
+
+    .concept-header h2 {
+      font-size: 1.5rem;
+    }
+
+    .concept-lead {
+      font-size: 1rem;
+    }
     
     .support-header {
       flex-direction: column;
@@ -1723,5 +1740,48 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       width: 100%;
       justify-content: space-between;
     }
+
+    .tool-calls-link {
+      flex-direction: column;
+      text-align: center;
+      gap: var(--space-md);
+    }
+
+    .step-options {
+      flex-wrap: wrap;
+    }
+
+    .section-title {
+      font-size: clamp(1.5rem, 6vw, 2rem);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .docs-hero {
+      padding-top: calc(var(--space-lg) + 60px);
+    }
+
+    .concept-card,
+    .support-card,
+    .ai-block,
+    .step-card,
+    .setting-card,
+    .feature-detail,
+    .screenshot-notes {
+      padding: var(--space-md);
+    }
+
+    .code-block pre {
+      padding: var(--space-sm);
+      font-size: 0.8rem;
+    }
+
+    .code-block code {
+      font-size: 0.75rem;
+    }
+
+    .step-num {
+      font-size: 2rem;
+    }
   }
 </style>