fix: responsive layout for mobile and tablet viewports

src/components/landing/Community.module.css

@@ -1,13 +1,13 @@
 .section {
   position: relative;
-  padding: 6rem 0;
+  padding: 4rem 0; /* R-08: was 6rem - reduced for mobile */
   color: var(--otdf-text-primary);
 }
 
 .inner {
   max-width: 80rem;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 1.25rem;
 }
 
 .header {
@@ -21,7 +21,7 @@
   font-weight: 700;
   letter-spacing: -0.02em;
   color: var(--otdf-text-primary);
-  margin: 0 0 1.5rem;
+  margin: 0 0 0.75rem;
 }
 
 .body {
@@ -90,6 +90,10 @@
 
 /* Responsive */
 @media (min-width: 640px) {
+  .section {
+    padding: 5rem 0;
+  }
+
   .cards {
     grid-template-columns: repeat(3, 1fr);
   }
@@ -100,10 +104,15 @@
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
   }
 }
 
 @media (min-width: 1024px) {
+  .section {
+    padding: 6rem 0; /* R-08: restore desktop */
+  }
+
   .inner {
     padding: 0 2rem;
   }

src/components/landing/DeveloperFirst.module.css

@@ -1,14 +1,14 @@
 .section {
   position: relative;
-  padding: 6rem 0;
+  padding: 4rem 0;
   color: var(--otdf-text-primary);
 }
 
 .inner {
   width: 100%;
   max-width: 80rem;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 1.25rem;
 }
 
 .header {
@@ -22,7 +22,7 @@
   font-weight: 700;
   letter-spacing: -0.02em;
   color: var(--otdf-text-primary);
-  margin: 0 0 1.5rem;
+  margin: 0 0 0.75rem;
 }
 
 .subheading {
@@ -201,6 +201,10 @@
 
 /* Responsive */
 @media (min-width: 640px) {
+  .section {
+    padding: 5rem 0;
+  }
+
   .cards {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -211,10 +215,15 @@
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
   }
 }
 
 @media (min-width: 1024px) {
+  .section {
+    padding: 6rem 0; /* R-08: restore desktop */
+  }
+
   .cards {
     grid-template-columns: repeat(4, 1fr);
   }

src/components/landing/FinalCTA.module.css

@@ -1,6 +1,6 @@
 .section {
   position: relative;
-  padding: 6rem 0;
+  padding: 4rem 0; /* R-08: was 6rem — reduced for mobile */
   overflow: hidden;
   color: var(--otdf-text-primary);
 }
@@ -22,7 +22,7 @@
   position: relative;
   max-width: 48rem;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 1.25rem;
   text-align: center;
 }
 
@@ -31,7 +31,7 @@
   font-weight: 700;
   letter-spacing: -0.02em;
   color: var(--otdf-text-primary);
-  margin: 0 0 1rem;
+  margin: 0 0 0.75rem;
 }
 
 .body {
@@ -96,16 +96,25 @@
 
 /* Responsive */
 @media (min-width: 640px) {
+  .section {
+    padding: 5rem 0;
+  }
+
   .inner {
     padding: 0 1.5rem;
   }
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
   }
 }
 
 @media (min-width: 1024px) {
+  .section {
+    padding: 6rem 0; /* R-08: restore desktop */
+  }
+
   .inner {
     padding: 0 2rem;
   }

src/components/landing/Hero.module.css

@@ -3,8 +3,8 @@
   display: flex;
   align-items: center;
   overflow: hidden;
-  padding: 6rem 0 6rem;
-  min-height: 100vh;
+  padding: 4rem 0;
+  min-height: auto; /* R-08: fit content naturally on mobile */
   color: var(--otdf-text-primary);
 }
 
@@ -13,7 +13,11 @@
   width: 100%;
   max-width: 80rem;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 1.25rem;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  text-align: center; /* R-13: centered in single-column mobile */
 }
 
 .grid {
@@ -48,47 +52,52 @@
 
 /* Heading */
 .heading {
-  font-size: 2.5rem;
+  font-size: 2rem; /* R-04: was 2.5rem — reduced for mobile */
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.02em;
   color: var(--otdf-text-primary);
-  margin: 0 0 1.5rem;
+  margin: 0 0 0.75rem;
 }
 
 /* Body */
 .bodyPrimary {
-  margin-top: 1.5rem;
-  font-size: 1.125rem;
+  margin-top: 0;
+  font-size: 1rem; /* R-04: was 1.125rem — reduced for mobile */
   color: #9ca3af;
   line-height: 1.7;
-  max-width: 36rem;
+  max-width: min(36rem, 100%);
+  margin-left: auto; /* R-13: center in single-column */
+  margin-right: auto;
 }
 
 .bodySecondary {
-  margin-top: 1.5rem;
+  margin-top: 0.75rem;
   font-size: 1rem;
   color: #6b7280;
   line-height: 1.7;
-  max-width: 36rem;
+  max-width: min(36rem, 100%);
+  margin-left: auto; /* R-13: center in single-column */
+  margin-right: auto;
 }
 
 /* CTAs */
 .ctas {
-  margin-top: 2rem;
+  margin-top: 2.5rem;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
+  justify-content: center; /* R-03: centered on mobile */
 }
 
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.75rem 1.5rem;
+  padding: 0.5rem 1rem; /* R-12: compact on mobile */
   border-radius: 0.5rem;
   font-weight: 600;
-  font-size: 1rem;
+  font-size: 0.8125rem; /* R-12: compact on mobile */
   text-decoration: none;
   transition: all 0.2s ease;
 }
@@ -119,6 +128,7 @@
 /* Code window */
 .codeWrap {
   position: relative;
+  min-width: 0; /* R-07: allow grid item to shrink below content size */
 }
 
 .codeWindow {
@@ -128,6 +138,7 @@
   background: #0f1117;
   color: #e8eaf0;
   overflow: hidden;
+  text-align: left; /* R-13: override inherited center from .inner on mobile */
 }
 
 .windowChrome {
@@ -157,14 +168,28 @@
 }
 
 .code {
+  position: relative;
   padding: 1rem 1.25rem;
   font-family: "JetBrains Mono", "Fira Code", monospace;
-  font-size: 0.8125rem;
+  font-size: 0.6875rem; /* R-07: 11px on mobile — fits ~45 chars */
   line-height: 1.7;
   overflow-x: auto;
   white-space: nowrap;
 }
 
+/* R-07: Fade gradient indicating horizontal scroll on mobile */
+.code::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 2rem;
+  background: linear-gradient(90deg, transparent, #0f1117);
+  pointer-events: none;
+  opacity: 0.6;
+}
+
 .mt {
   margin-top: 0.75rem;
 }
@@ -182,10 +207,41 @@
 .cGreen  { color: #86efac; }
 .cGray   { color: #6b7280; }
 
-/* Responsive */
+/* Responsive — mobile-first: smallest breakpoint first (R-06 fix) */
+@media (min-width: 640px) {
+  .section {
+    padding: 5rem 0;
+  }
+
+  .heading {
+    font-size: 2.5rem;
+  }
+
+  .inner {
+    padding: 0 1.5rem;
+  }
+
+  /* R-04: Restore body font at tablet */
+  .bodyPrimary {
+    font-size: 1.125rem;
+  }
+
+  /* R-07: Restore code font size at tablet+ */
+  .code {
+    font-size: 0.8125rem;
+  }
+}
+
 @media (min-width: 1024px) {
+  .section {
+    padding: 6rem 0; /* R-08: restore desktop */
+    min-height: 100vh;  /* R-08: fallback for older browsers */
+    min-height: 100svh; /* R-08: modern browsers — excludes browser chrome */
+  }
+
   .inner {
     padding: 0 2rem;
+    text-align: left; /* R-13: left-align in 2-column grid */
   }
 
   .grid {
@@ -195,20 +251,33 @@
 
   .heading {
     font-size: 3.75rem;
+    margin-bottom: 1.5rem;
   }
 
-  .section {
-    padding-top: 6rem;
+  .bodyPrimary {
+    margin-top: 0;
   }
-}
 
-@media (min-width: 640px) {
-  .heading {
-    font-size: 3rem;
+  /* R-03/R-13: Left-align CTAs and body text in 2-column layout */
+  .ctas {
+    justify-content: flex-start;
   }
 
-  .inner {
-    padding: 0 1.5rem;
+  .bodyPrimary,
+  .bodySecondary {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  /* R-12: Restore button sizing on desktop */
+  .btn {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.9375rem;
+  }
+
+  /* R-07: Hide scroll fade on desktop — not needed */
+  .code::after {
+    display: none;
   }
 }