diff --git a/website/src/app/benchmarks/BenchmarksContent.tsx b/website/src/app/benchmarks/BenchmarksContent.tsx
index 48b4b551..f05d78b6 100644
--- a/website/src/app/benchmarks/BenchmarksContent.tsx
+++ b/website/src/app/benchmarks/BenchmarksContent.tsx
@@ -86,10 +86,10 @@ export function BenchmarksContent() {
                   <caption className="sr-only">GoSQLX Parse Benchmarks</caption>
                   <thead>
                     <tr className="border-b border-white/[0.06]">
-                      <th scope="col" className="px-6 py-4 font-medium text-zinc-400">Benchmark</th>
-                      <th scope="col" className="px-6 py-4 font-medium text-zinc-400">Query Type</th>
-                      <th scope="col" className="px-6 py-4 font-medium text-zinc-400">Apple M4</th>
-                      <th scope="col" className="px-6 py-4 font-medium text-zinc-400">Baseline (CI)</th>
+                      <th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Benchmark</th>
+                      <th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Query Type</th>
+                      <th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Apple M4</th>
+                      <th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Baseline (CI)</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -98,10 +98,10 @@ export function BenchmarksContent() {
                         key={b.name}
                         className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors"
                       >
-                        <td className="px-6 py-4 text-white font-medium">{b.name}</td>
-                        <td className="px-6 py-4 text-zinc-400">{b.query}</td>
-                        <td className="px-6 py-4 text-zinc-300 font-mono">{b.m4}</td>
-                        <td className="px-6 py-4 text-zinc-400 font-mono">{b.baseline}</td>
+                        <td className="px-3 py-3 sm:px-6 sm:py-4 text-white font-medium">{b.name}</td>
+                        <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">{b.query}</td>
+                        <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-mono">{b.m4}</td>
+                        <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">{b.baseline}</td>
                       </tr>
                     ))}
                   </tbody>
@@ -124,52 +124,52 @@ export function BenchmarksContent() {
                   <caption className="sr-only">Competitor Library Comparison</caption>
                   <thead>
                     <tr className="border-b border-white/[0.06]">
-                      <th scope="col" className="px-6 py-4 font-medium text-zinc-400">Library</th>
-                      <th scope="col" className="px-6 py-4 font-medium text-zinc-400">Language</th>
-                      <th scope="col" className="px-6 py-4 font-medium text-zinc-400">Ops/sec</th>
-                      <th scope="col" className="px-6 py-4 font-medium text-zinc-400">Memory/op</th>
-                      <th scope="col" className="px-6 py-4 font-medium text-zinc-400">Zero-copy</th>
+                      <th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Library</th>
+                      <th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Language</th>
+                      <th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Ops/sec</th>
+                      <th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Memory/op</th>
+                      <th scope="col" className="px-3 py-3 sm:px-6 sm:py-4 font-medium text-zinc-400">Zero-copy</th>
                     </tr>
                   </thead>
                   <tbody>
                     <tr className="border-b border-white/[0.04] transition-colors bg-indigo-500/10 border-l-2 border-l-indigo-500">
-                      <td className="px-6 py-4 text-white font-medium">
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-white font-medium">
                         GoSQLX{' '}
                         <span className="ml-2 inline-block rounded-full bg-indigo-500/20 px-2 py-0.5 text-xs font-medium text-indigo-300">
                           This Library
                         </span>
                       </td>
-                      <td className="px-6 py-4 text-zinc-400">Go</td>
-                      <td className="px-6 py-4 text-zinc-300 font-mono">1.38M+</td>
-                      <td className="px-6 py-4 text-zinc-300">Low</td>
-                      <td className="px-6 py-4 text-accent-green font-medium">
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-mono">1.38M+</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300">Low</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-accent-green font-medium">
                         <span aria-label="Yes">✓</span>
                       </td>
                     </tr>
                     <tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
-                      <td className="px-6 py-4 text-zinc-300 font-medium">xwb1989/sqlparser</td>
-                      <td className="px-6 py-4 text-zinc-400">Go</td>
-                      <td className="px-6 py-4 text-zinc-400 font-mono">~380K</td>
-                      <td className="px-6 py-4 text-zinc-400">Higher</td>
-                      <td className="px-6 py-4 text-zinc-500">
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-medium">xwb1989/sqlparser</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">~380K</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Higher</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-500">
                         <span aria-label="No">✗</span>
                       </td>
                     </tr>
                     <tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
-                      <td className="px-6 py-4 text-zinc-300 font-medium">pg_query_go</td>
-                      <td className="px-6 py-4 text-zinc-400">Go</td>
-                      <td className="px-6 py-4 text-zinc-400 font-mono">~220K</td>
-                      <td className="px-6 py-4 text-zinc-400">Higher (CGo)</td>
-                      <td className="px-6 py-4 text-zinc-500">
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-medium">pg_query_go</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">~220K</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Higher (CGo)</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-500">
                         <span aria-label="No">✗</span>
                       </td>
                     </tr>
                     <tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
-                      <td className="px-6 py-4 text-zinc-300 font-medium">blastrain/sqlparser</td>
-                      <td className="px-6 py-4 text-zinc-400">Go</td>
-                      <td className="px-6 py-4 text-zinc-400 font-mono">~290K</td>
-                      <td className="px-6 py-4 text-zinc-400">Medium</td>
-                      <td className="px-6 py-4 text-zinc-500">
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-300 font-medium">blastrain/sqlparser</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Go</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400 font-mono">~290K</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-400">Medium</td>
+                      <td className="px-3 py-3 sm:px-6 sm:py-4 text-zinc-500">
                         <span aria-label="No">✗</span>
                       </td>
                     </tr>
diff --git a/website/src/components/home/CodeExamples.tsx b/website/src/components/home/CodeExamples.tsx
index 0e821a5b..699cf3b7 100644
--- a/website/src/components/home/CodeExamples.tsx
+++ b/website/src/components/home/CodeExamples.tsx
@@ -109,7 +109,7 @@ export function CodeExamples() {
           </h2>
         </FadeIn>
         <FadeIn delay={0.1}>
-          <div className="flex gap-1 mb-4">
+          <div className="flex flex-wrap gap-1 mb-4">
             {tabs.map((tab, i) => (
               <button
                 key={tab.label}
diff --git a/website/src/components/home/Hero.tsx b/website/src/components/home/Hero.tsx
index 5550aecd..f61874f5 100644
--- a/website/src/components/home/Hero.tsx
+++ b/website/src/components/home/Hero.tsx
@@ -158,7 +158,7 @@ export function Hero() {
             <GlassCard hover={false} className="p-0 overflow-hidden shadow-2xl shadow-indigo-500/5">
               <div className="grid md:grid-cols-2 divide-y md:divide-y-0 divide-x-0 md:divide-x divide-white/[0.06]">
                 {/* SQL Input side */}
-                <div className="text-left">
+                <div className="text-left min-w-0">
                   <div className="flex items-center gap-2 px-4 py-2.5 border-b border-white/[0.06]">
                     <div className="flex gap-1.5">
                       <span className="w-2.5 h-2.5 rounded-full bg-red-500/60" />
@@ -181,10 +181,10 @@ export function Hero() {
                 </div>
 
                 {/* AST Output side */}
-                <div className="text-left">
+                <div className="text-left min-w-0">
                   <div className="flex items-center gap-2 px-4 py-2.5 border-b border-white/[0.06]">
                     <span className="text-xs text-zinc-400 font-mono">AST Output</span>
-                    <span className="ml-auto text-[10px] text-emerald-400 font-mono">parsed in &lt;1ms</span>
+                    <span className="ml-auto text-xs text-emerald-400 font-mono">parsed in &lt;1ms</span>
                   </div>
                   <pre
                     tabIndex={0}
diff --git a/website/src/components/home/StatsBar.tsx b/website/src/components/home/StatsBar.tsx
index 12cacc97..65744207 100644
--- a/website/src/components/home/StatsBar.tsx
+++ b/website/src/components/home/StatsBar.tsx
@@ -21,7 +21,7 @@ export function StatsBar() {
               <GlassCard className="p-6 text-center w-full">
                 <div className="flex items-baseline justify-center gap-0.5">
                   {stat.prefix && (
-                    <span className={`text-4xl font-bold ${stat.color}`}>{stat.prefix}</span>
+                    <span className={`text-3xl sm:text-4xl font-bold ${stat.color}`}>{stat.prefix}</span>
                   )}
                   <AnimatedCounter value={stat.value} suffix={stat.suffix} color={stat.color} />
                 </div>
diff --git a/website/src/components/home/VscodeSection.tsx b/website/src/components/home/VscodeSection.tsx
index b690242f..ea4226a5 100644
--- a/website/src/components/home/VscodeSection.tsx
+++ b/website/src/components/home/VscodeSection.tsx
@@ -8,7 +8,7 @@ export function VscodeSection() {
   return (
     <section className="py-20 border-t border-white/[0.06]">
       <div className="max-w-6xl mx-auto px-4">
-        <div className="flex flex-col md:flex-row items-center gap-10">
+        <div className="flex flex-col md:flex-row items-center gap-6 md:gap-10">
           {/* Left: Copy */}
           <div className="md:w-1/2">
             <FadeIn>
diff --git a/website/src/components/layout/Navbar.tsx b/website/src/components/layout/Navbar.tsx
index 77cd2b16..df73480c 100644
--- a/website/src/components/layout/Navbar.tsx
+++ b/website/src/components/layout/Navbar.tsx
@@ -104,7 +104,7 @@ export function Navbar() {
         {/* Mobile hamburger */}
         <button
           type="button"
-          className="lg:hidden p-2 rounded-lg hover:bg-white/[0.04] transition-colors"
+          className="lg:hidden w-11 h-11 flex items-center justify-center rounded-lg hover:bg-white/[0.04] transition-colors"
           onClick={() => setMobileOpen(!mobileOpen)}
           aria-label="Toggle menu"
           aria-expanded={mobileOpen}
diff --git a/website/src/components/playground/Playground.tsx b/website/src/components/playground/Playground.tsx
index 5bd8f19e..fd2a1ab0 100644
--- a/website/src/components/playground/Playground.tsx
+++ b/website/src/components/playground/Playground.tsx
@@ -135,7 +135,7 @@ export default function Playground() {
         {/* Skeleton panels */}
         <div className="flex flex-col lg:flex-row flex-1 min-h-0">
           {/* Left: editor skeleton */}
-          <div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-0 p-4 gap-3">
+          <div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-[240px] lg:min-h-0 p-4 gap-3">
             <div className="animate-pulse bg-zinc-800 rounded h-3 w-3/4" />
             <div className="animate-pulse bg-zinc-800 rounded h-3 w-full" />
             <div className="animate-pulse bg-zinc-800 rounded h-3 w-5/6" />
@@ -206,11 +206,11 @@ export default function Playground() {
   return (
     <div className="flex flex-col h-full bg-[#09090b]">
       {/* Top toolbar */}
-      <div className="flex items-center justify-between px-4 py-2 border-b border-slate-800 bg-slate-900/50">
+      <div className="flex items-center justify-between px-4 py-2 border-b border-slate-800 bg-slate-900/50 min-h-[44px]">
         <div className="flex items-center gap-3">
           <h1 className="sr-only">SQL Playground</h1>
-          <span className="text-sm font-semibold text-slate-200" aria-hidden="true">SQL Playground</span>
-          <div className="h-4 w-px bg-slate-700" />
+          <span className="hidden sm:block text-sm font-semibold text-slate-200" aria-hidden="true">SQL Playground</span>
+          <div className="hidden sm:block h-4 w-px bg-slate-700" />
           <label htmlFor="dialect-select" className="flex items-center gap-2 text-sm text-slate-400">
             Dialect:
             <select
@@ -236,7 +236,7 @@ export default function Playground() {
       {/* Main content: split panels */}
       <div className="flex flex-col lg:flex-row flex-1 min-h-0">
         {/* Left panel - SQL Editor */}
-        <div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-0">
+        <div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-[240px] lg:min-h-0">
           <div className="px-4 py-2 border-b border-slate-800 bg-slate-900/30">
             <span className="text-xs text-slate-400 uppercase tracking-wider font-medium">Input</span>
           </div>
@@ -251,7 +251,7 @@ export default function Playground() {
         </div>
 
         {/* Right panel - Tabs + Content */}
-        <div className="w-full lg:w-1/2 flex flex-col min-h-0">
+        <div className="w-full lg:w-1/2 flex flex-col min-h-[240px] lg:min-h-0">
           {/* Tab bar with animated underline */}
           <div className="flex border-b border-slate-800 bg-slate-900/30" role="tablist" aria-label="Output format">
             {TABS.map((tab) => (
@@ -302,7 +302,7 @@ export default function Playground() {
             </code>
             <button
               onClick={handleCopy}
-              className="text-xs text-slate-400 hover:text-white border border-slate-700 hover:border-slate-500 rounded px-2 py-1 transition-colors flex-shrink-0"
+              className="text-xs text-slate-400 hover:text-white border border-slate-700 hover:border-slate-500 rounded px-3 py-2 transition-colors flex-shrink-0 min-h-[36px]"
               aria-label="Copy install command"
             >
               {copied ? '✓ Copied' : 'Copy'}
diff --git a/website/src/components/ui/AnimatedCounter.tsx b/website/src/components/ui/AnimatedCounter.tsx
index 25d2d8e8..7068346b 100644
--- a/website/src/components/ui/AnimatedCounter.tsx
+++ b/website/src/components/ui/AnimatedCounter.tsx
@@ -29,7 +29,7 @@ export function AnimatedCounter({ value, suffix = '', color = 'text-white' }: {
   }, [spring]);
 
   return (
-    <span ref={ref} className={`text-4xl font-bold tabular-nums ${color}`}>
+    <span ref={ref} className={`text-3xl sm:text-4xl font-bold tabular-nums ${color}`}>
       {display}{suffix}
     </span>
   );