fix(website): add mobile responsive padding and sizing to home page sections (#126)

- PilotSolution: reduce padding to 60px 20px on mobile
- TheStack: reduce section and card padding on mobile
- PilotFooterCTA: responsive heading size with clamp(), reduced vertical padding
- WhitePaperSection: reduce outer section padding on mobile

All breakpoints use existing 767px convention.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: blove

apps/website/src/components/landing/PilotFooterCTA.tsx

@@ -21,8 +21,15 @@ export function PilotFooterCTA() {
         padding: '0 2rem',
       }}
     >
-      <style>{`.pilot-footer-secondary-btn:hover { border-color: rgba(255,255,255,0.6) !important; }`}</style>
+      <style>{`
+        .pilot-footer-secondary-btn:hover { border-color: rgba(255,255,255,0.6) !important; }
+        @media (max-width: 767px) {
+          .pilot-footer-inner { padding-top: 4rem !important; padding-bottom: 4rem !important; }
+          .pilot-footer-heading { font-size: clamp(28px, 6vw, 42px) !important; }
+        }
+      `}</style>
       <motion.div
+        className="pilot-footer-inner"
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
@@ -53,6 +60,7 @@ export function PilotFooterCTA() {
         {/* Heading */}
         <h2
           id="pilot-footer-cta-heading"
+          className="pilot-footer-heading"
           style={{
             fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
             fontSize: '42px',

apps/website/src/components/landing/PilotSolution.tsx

@@ -23,7 +23,12 @@ const STEPS = [
 
 export function PilotSolution() {
   return (
-    <section style={{ padding: '80px 32px' }}>
+    <section className="pilot-solution" style={{ padding: '80px 32px' }}>
+      <style>{`
+        @media (max-width: 767px) {
+          .pilot-solution { padding: 60px 20px !important; }
+        }
+      `}</style>
       <motion.div
         initial={{ opacity: 0, y: 16 }}
         whileInView={{ opacity: 1, y: 0 }}

apps/website/src/components/landing/TheStack.tsx

@@ -57,7 +57,13 @@ function Connector({ fromRgb, toRgb }: { fromRgb: string; toRgb: string }) {
 
 export function TheStack() {
   return (
-    <section style={{ padding: '80px 32px' }}>
+    <section className="the-stack" style={{ padding: '80px 32px' }}>
+      <style>{`
+        @media (max-width: 767px) {
+          .the-stack { padding: 60px 20px !important; }
+          .the-stack-card { padding: 24px 20px 20px !important; }
+        }
+      `}</style>
       <motion.div
         initial={{ opacity: 0, y: 16 }}
         whileInView={{ opacity: 1, y: 0 }}
@@ -109,6 +115,7 @@ export function TheStack() {
               />
             )}
             <motion.div
+              className="the-stack-card"
               initial={{ opacity: 0, y: 24 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}

apps/website/src/components/landing/WhitePaperSection.tsx

@@ -42,7 +42,7 @@ export function WhitePaperSection() {
   };
 
   return (
-    <section style={{ padding: '80px 32px' }}>
+    <section className="wp-section" style={{ padding: '80px 32px' }}>
       <style>{`
         .wp-grid {
           display: grid;
@@ -52,6 +52,7 @@ export function WhitePaperSection() {
           padding: 48px 56px;
         }
         @media (max-width: 767px) {
+          .wp-section { padding: 60px 20px !important; }
           .wp-grid {
             grid-template-columns: 1fr;
             gap: 32px;