diff --git a/apps/website/e2e/website.spec.ts b/apps/website/e2e/website.spec.ts
index 71a6932dd..b0f79690a 100644
--- a/apps/website/e2e/website.spec.ts
+++ b/apps/website/e2e/website.spec.ts
@@ -12,9 +12,9 @@ test('landing page renders architecture section', async ({ page }) => {
   await expect(page.getByText('Architecture').first()).toBeVisible();
 });
 
-test('landing page renders fair comparison section', async ({ page }) => {
+test('landing page renders libraries section', async ({ page }) => {
   await page.goto('/');
-  await expect(page.getByText('What Angular Agent Framework adds').first()).toBeVisible();
+  await expect(page.getByText('Three libraries. One architecture.').first()).toBeVisible();
 });
 
 test('pricing page shows 4 plan cards', async ({ page }) => {
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index f7eaac84a..4fdd64df7 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -8,7 +8,6 @@ import { StatsStrip } from '../components/landing/StatsStrip';
 import { ProblemSection } from '../components/landing/ProblemSection';
 import { LibrariesSection } from '../components/landing/LibrariesSection';
 import { ChatFeaturesSection } from '../components/landing/ChatFeaturesSection';
-import { FairComparisonSection } from '../components/landing/FairComparisonSection';
 import { WhitePaperSection } from '../components/landing/WhitePaperSection';
 import { HomePilotCTA } from '../components/landing/HomePilotCTA';
 import { tokens } from '../../lib/design-tokens';
@@ -41,8 +40,6 @@ export default async function HomePage() {
       {/* 7. Depth — capability showcases */}
       <LangGraphShowcase />
       <DeepAgentsShowcase />
-      {/* 8. Fair comparison — honest LangChain + Angular Agent Framework table */}
-      <FairComparisonSection />
       {/* 9. White paper free download */}
       <WhitePaperSection />
       {/* 10. Pilot program CTA */}
diff --git a/apps/website/src/components/landing/ChatFeaturesSection.tsx b/apps/website/src/components/landing/ChatFeaturesSection.tsx
index f02485e38..88e831ad6 100644
--- a/apps/website/src/components/landing/ChatFeaturesSection.tsx
+++ b/apps/website/src/components/landing/ChatFeaturesSection.tsx
@@ -448,6 +448,9 @@ export function ChatFeaturesSection() {
             gap: 16px !important;
             padding: 0 !important;
           }
+          .chat-features-grid > div:nth-child(2) {
+            height: 380px !important;
+          }
           #feat-left, #feat-right {
             flex-direction: row !important;
             flex-wrap: wrap !important;
diff --git a/apps/website/src/components/landing/LibrariesSection.tsx b/apps/website/src/components/landing/LibrariesSection.tsx
index 9cc213d4b..9da062bc2 100644
--- a/apps/website/src/components/landing/LibrariesSection.tsx
+++ b/apps/website/src/components/landing/LibrariesSection.tsx
@@ -75,7 +75,7 @@ export function LibrariesSection() {
       <div style={{
         maxWidth: 1000, margin: '0 auto',
         display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))',
         gap: 24,
       }}>
         {LIBRARIES.map((lib, i) => (
diff --git a/apps/website/src/components/landing/ProblemSection.tsx b/apps/website/src/components/landing/ProblemSection.tsx
index 78e80e046..a2c412f94 100644
--- a/apps/website/src/components/landing/ProblemSection.tsx
+++ b/apps/website/src/components/landing/ProblemSection.tsx
@@ -113,7 +113,7 @@ export function ProblemSection() {
   const showEnd = phase === 'done';
 
   return (
-    <section style={{ padding: '80px 32px' }}>
+    <section className="problem-section" style={{ padding: '80px 32px' }}>
       {/* Eyebrow + headline */}
       <motion.div
         initial={{ opacity: 0, y: 16 }}
@@ -205,6 +205,7 @@ export function ProblemSection() {
       {/* Gap animation */}
       <motion.div
         ref={triggerRef}
+        className="problem-gap-card"
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
@@ -358,6 +359,10 @@ export function ProblemSection() {
       <style>{`
         @keyframes sr-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }
         @keyframes sr-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }
+        @media (max-width: 767px) {
+          .problem-section { padding: 60px 20px !important; }
+          .problem-gap-card { padding: 24px 20px !important; }
+        }
       `}</style>
     </section>
   );
diff --git a/apps/website/src/components/landing/WhitePaperSection.tsx b/apps/website/src/components/landing/WhitePaperSection.tsx
index 86c7aef1b..d8aabd732 100644
--- a/apps/website/src/components/landing/WhitePaperSection.tsx
+++ b/apps/website/src/components/landing/WhitePaperSection.tsx
@@ -43,7 +43,24 @@ export function WhitePaperSection() {
 
   return (
     <section style={{ padding: '80px 32px' }}>
+      <style>{`
+        .wp-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 56px;
+          align-items: center;
+          padding: 48px 56px;
+        }
+        @media (max-width: 767px) {
+          .wp-grid {
+            grid-template-columns: 1fr;
+            gap: 32px;
+            padding: 32px 24px;
+          }
+        }
+      `}</style>
       <motion.div
+        className="wp-grid"
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
@@ -57,11 +74,6 @@ export function WhitePaperSection() {
           WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
           border: `1px solid ${tokens.glass.border}`,
           boxShadow: tokens.glass.shadow,
-          padding: '48px 56px',
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr',
-          gap: 56,
-          alignItems: 'center',
         }}
       >
         {/* Left — form / soft gate */}
diff --git a/apps/website/src/components/landing/angular/AngularCodeShowcase.tsx b/apps/website/src/components/landing/angular/AngularCodeShowcase.tsx
index b77115302..01880d836 100644
--- a/apps/website/src/components/landing/angular/AngularCodeShowcase.tsx
+++ b/apps/website/src/components/landing/angular/AngularCodeShowcase.tsx
@@ -55,7 +55,7 @@ export function AngularCodeShowcase() {
 
       <div style={{
         maxWidth: 900, margin: '0 auto',
-        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 24,
+        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(380px, 100%), 1fr))', gap: 24,
       }}>
         {[{ title: 'Minimal Setup', code: SNIPPET_1 }, { title: 'Full Configuration', code: SNIPPET_2 }].map((s, i) => (
           <motion.div
diff --git a/apps/website/src/components/landing/angular/AngularComparison.tsx b/apps/website/src/components/landing/angular/AngularComparison.tsx
index c74658ae8..31cdb3014 100644
--- a/apps/website/src/components/landing/angular/AngularComparison.tsx
+++ b/apps/website/src/components/landing/angular/AngularComparison.tsx
@@ -50,11 +50,11 @@ export function AngularComparison() {
           maxWidth: 860, margin: '0 auto', borderRadius: 20,
           background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
           WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
-          border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow, overflow: 'hidden',
+          border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow, overflow: 'auto',
         }}
       >
         <div style={{
-          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
+          display: 'grid', gridTemplateColumns: 'minmax(100px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr)',
           background: 'rgba(255,255,255,.3)', borderBottom: `1px solid ${tokens.glass.border}`, padding: '14px 24px',
         }}>
           {['Capability', 'LangGraph Angular SDK', '@cacheplane/angular'].map((h, i) => (
@@ -75,7 +75,7 @@ export function AngularComparison() {
             viewport={{ once: true }}
             transition={{ delay: i * 0.05, duration: 0.35 }}
             style={{
-              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', padding: '14px 24px',
+              display: 'grid', gridTemplateColumns: 'minmax(100px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr)', padding: '14px 24px',
               borderBottom: i < ROWS.length - 1 ? '1px solid rgba(0,0,0,.05)' : 'none', alignItems: 'center',
             }}
           >
diff --git a/apps/website/src/components/landing/angular/AngularProblemSolution.tsx b/apps/website/src/components/landing/angular/AngularProblemSolution.tsx
index adf64a9f2..7b099cf37 100644
--- a/apps/website/src/components/landing/angular/AngularProblemSolution.tsx
+++ b/apps/website/src/components/landing/angular/AngularProblemSolution.tsx
@@ -30,7 +30,7 @@ export function AngularProblemSolution() {
         transition={{ duration: 0.5 }}
         style={{
           maxWidth: 900, margin: '0 auto',
-          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 32,
+          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(360px, 100%), 1fr))', gap: 32,
         }}
       >
         <div style={{
diff --git a/apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx b/apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx
index 3f3ee75ab..5831d6e1a 100644
--- a/apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx
+++ b/apps/website/src/components/landing/angular/AngularWhitePaperGate.tsx
@@ -48,7 +48,7 @@ export function AngularWhitePaperGate() {
           background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
           WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
           border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow,
-          padding: '48px 56px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 56, alignItems: 'center',
+          padding: '32px 24px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))', gap: 56, alignItems: 'center',
         }}
       >
         <div>
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
index a50da8de6..f84aad841 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
@@ -56,7 +56,7 @@ export function ChatLandingCodeShowcase() {
 
       <div style={{
         maxWidth: 900, margin: '0 auto',
-        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 24,
+        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(380px, 100%), 1fr))', gap: 24,
       }}>
         {[{ title: 'Prebuilt Chat', code: SNIPPET_1 }, { title: 'Custom Theming', code: SNIPPET_2 }].map((s, i) => (
           <motion.div
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx
index dfdfa56b8..13e189b89 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingComparison.tsx
@@ -50,11 +50,11 @@ export function ChatLandingComparison() {
           maxWidth: 860, margin: '0 auto', borderRadius: 20,
           background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
           WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
-          border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow, overflow: 'hidden',
+          border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow, overflow: 'auto',
         }}
       >
         <div style={{
-          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
+          display: 'grid', gridTemplateColumns: 'minmax(100px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr)',
           background: 'rgba(255,255,255,.3)', borderBottom: `1px solid ${tokens.glass.border}`, padding: '14px 24px',
         }}>
           {['Capability', 'Build Incrementally', '@cacheplane/chat'].map((h, i) => (
@@ -75,7 +75,7 @@ export function ChatLandingComparison() {
             viewport={{ once: true }}
             transition={{ delay: i * 0.05, duration: 0.35 }}
             style={{
-              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', padding: '14px 24px',
+              display: 'grid', gridTemplateColumns: 'minmax(100px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr)', padding: '14px 24px',
               borderBottom: i < ROWS.length - 1 ? '1px solid rgba(0,0,0,.05)' : 'none', alignItems: 'center',
             }}
           >
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingProblemSolution.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingProblemSolution.tsx
index 20a55940d..d835c3308 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingProblemSolution.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingProblemSolution.tsx
@@ -31,7 +31,7 @@ export function ChatLandingProblemSolution() {
         transition={{ duration: 0.5 }}
         style={{
           maxWidth: 900, margin: '0 auto',
-          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 32,
+          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(360px, 100%), 1fr))', gap: 32,
         }}
       >
         <div style={{
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx
index 6bbe75de3..721df36d0 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingWhitePaperGate.tsx
@@ -48,7 +48,7 @@ export function ChatLandingWhitePaperGate() {
           background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
           WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
           border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow,
-          padding: '48px 56px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 56, alignItems: 'center',
+          padding: '32px 24px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))', gap: 56, alignItems: 'center',
         }}
       >
         <div>
diff --git a/apps/website/src/components/landing/render/RenderCodeShowcase.tsx b/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
index fc1442ccb..bde5c9dbe 100644
--- a/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
+++ b/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
@@ -47,7 +47,7 @@ export function RenderCodeShowcase() {
 
       <div style={{
         maxWidth: 900, margin: '0 auto',
-        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 24,
+        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(380px, 100%), 1fr))', gap: 24,
       }}>
         {[{ title: 'Registry Setup', code: SNIPPET_1 }, { title: 'Template Binding', code: SNIPPET_2 }].map((s, i) => (
           <motion.div
diff --git a/apps/website/src/components/landing/render/RenderComparison.tsx b/apps/website/src/components/landing/render/RenderComparison.tsx
index 24defef59..e78f40a4f 100644
--- a/apps/website/src/components/landing/render/RenderComparison.tsx
+++ b/apps/website/src/components/landing/render/RenderComparison.tsx
@@ -49,11 +49,11 @@ export function RenderComparison() {
           maxWidth: 860, margin: '0 auto', borderRadius: 20,
           background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
           WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
-          border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow, overflow: 'hidden',
+          border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow, overflow: 'auto',
         }}
       >
         <div style={{
-          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
+          display: 'grid', gridTemplateColumns: 'minmax(100px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr)',
           background: 'rgba(255,255,255,.3)', borderBottom: `1px solid ${tokens.glass.border}`, padding: '14px 24px',
         }}>
           {['Capability', 'Hardcoded Approach', '@cacheplane/render'].map((h, i) => (
@@ -74,7 +74,7 @@ export function RenderComparison() {
             viewport={{ once: true }}
             transition={{ delay: i * 0.05, duration: 0.35 }}
             style={{
-              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', padding: '14px 24px',
+              display: 'grid', gridTemplateColumns: 'minmax(100px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr)', padding: '14px 24px',
               borderBottom: i < ROWS.length - 1 ? '1px solid rgba(0,0,0,.05)' : 'none', alignItems: 'center',
             }}
           >
diff --git a/apps/website/src/components/landing/render/RenderProblemSolution.tsx b/apps/website/src/components/landing/render/RenderProblemSolution.tsx
index c13840aae..ed4165a61 100644
--- a/apps/website/src/components/landing/render/RenderProblemSolution.tsx
+++ b/apps/website/src/components/landing/render/RenderProblemSolution.tsx
@@ -30,7 +30,7 @@ export function RenderProblemSolution() {
         transition={{ duration: 0.5 }}
         style={{
           maxWidth: 900, margin: '0 auto',
-          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 32,
+          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(360px, 100%), 1fr))', gap: 32,
         }}
       >
         <div style={{
diff --git a/apps/website/src/components/landing/render/RenderWhitePaperGate.tsx b/apps/website/src/components/landing/render/RenderWhitePaperGate.tsx
index 03ba37a18..31bb3e8f9 100644
--- a/apps/website/src/components/landing/render/RenderWhitePaperGate.tsx
+++ b/apps/website/src/components/landing/render/RenderWhitePaperGate.tsx
@@ -48,7 +48,7 @@ export function RenderWhitePaperGate() {
           background: tokens.glass.bg, backdropFilter: `blur(${tokens.glass.blur})`,
           WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
           border: `1px solid ${tokens.glass.border}`, boxShadow: tokens.glass.shadow,
-          padding: '48px 56px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 56, alignItems: 'center',
+          padding: '32px 24px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))', gap: 56, alignItems: 'center',
         }}
       >
         <div>