diff --git a/src/components/landing/Community.module.css b/src/components/landing/Community.module.css
index a140a5d..4008037 100644
--- a/src/components/landing/Community.module.css
+++ b/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;
   }
diff --git a/src/components/landing/DeveloperFirst.module.css b/src/components/landing/DeveloperFirst.module.css
index 9f4d14a..998db92 100644
--- a/src/components/landing/DeveloperFirst.module.css
+++ b/src/components/landing/DeveloperFirst.module.css
@@ -1,6 +1,6 @@
 .section {
   position: relative;
-  padding: 6rem 0;
+  padding: 4rem 0;
   color: var(--otdf-text-primary);
 }
 
@@ -8,7 +8,7 @@
   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);
   }
diff --git a/src/components/landing/FinalCTA.module.css b/src/components/landing/FinalCTA.module.css
index 4c30311..978fffc 100644
--- a/src/components/landing/FinalCTA.module.css
+++ b/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;
   }
diff --git a/src/components/landing/Hero.module.css b/src/components/landing/Hero.module.css
index e0faf6c..36a6eb7 100644
--- a/src/components/landing/Hero.module.css
+++ b/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;
   }
 }
 
diff --git a/src/components/landing/ProblemSolution.module.css b/src/components/landing/ProblemSolution.module.css
index b3150d1..2216b5b 100644
--- a/src/components/landing/ProblemSolution.module.css
+++ b/src/components/landing/ProblemSolution.module.css
@@ -1,13 +1,13 @@
 .section {
   position: relative;
-  padding: 6rem 0;
+  padding: 4rem 0;
   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;
 }
 
 .bodyPrimary {
@@ -98,7 +98,7 @@
 }
 
 .cta {
-  margin-top: 2rem;
+  margin-top: 2.5rem;
   display: flex;
   justify-content: center;
 }
@@ -124,12 +124,17 @@
 
 /* Responsive */
 @media (min-width: 768px) {
+  .section {
+    padding: 5rem 0;
+  }
+
   .cards {
     grid-template-columns: repeat(3, 1fr);
   }
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
   }
 
   .inner {
@@ -138,6 +143,10 @@
 }
 
 @media (min-width: 1024px) {
+  .section {
+    padding: 6rem 0; /* R-08: restore desktop */
+  }
+
   .inner {
     padding: 0 2rem;
   }
diff --git a/src/components/landing/Standards.module.css b/src/components/landing/Standards.module.css
index 6f533d5..5d237ee 100644
--- a/src/components/landing/Standards.module.css
+++ b/src/components/landing/Standards.module.css
@@ -1,13 +1,13 @@
 .section {
   position: relative;
-  padding: 6rem 0;
+  padding: 4rem 0;
   color: var(--otdf-text-primary);
 }
 
 .inner {
   max-width: 80rem;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 1.25rem;
 }
 
 .grid {
@@ -37,6 +37,8 @@
   padding: 1.5rem;
   font-family: "JetBrains Mono", "Fira Code", monospace;
   font-size: 0.875rem;
+  overflow-x: auto; /* R-09: allow horizontal scroll on narrow screens */
+  -webkit-overflow-scrolling: touch;
 }
 
 .diagramComment {
@@ -74,7 +76,7 @@
   font-weight: 700;
   letter-spacing: -0.02em;
   color: var(--otdf-text-primary);
-  margin: 0 0 1.5rem;
+  margin: 0 0 0.75rem;
 }
 
 .body {
@@ -114,19 +116,25 @@
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
+  justify-content: center; /* R-11: centered on mobile */
 }
 
 .btn {
   display: inline-flex;
   align-items: center;
-  padding: 0.625rem 1.25rem;
+  padding: 0.5rem 1rem; /* R-12: compact on mobile */
   border-radius: 0.5rem;
   font-weight: 600;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem; /* R-12: compact on mobile */
   text-decoration: none;
   transition: all 0.2s ease;
 }
 
+/* R-12: Hide "Overview" suffix on mobile to keep buttons side-by-side */
+.btnSuffix {
+  display: none;
+}
+
 .btnSecondary {
   background: transparent;
   color: var(--otdf-text-primary);
@@ -152,13 +160,33 @@
 }
 
 /* Responsive */
+
+/* R-09: Reduce diagram size on narrow screens */
+@media (max-width: 639px) {
+  .diagram {
+    font-size: 0.75rem;
+    padding: 1rem;
+  }
+  .pl4  { padding-left: 0.75rem; }
+  .pl8  { padding-left: 1.5rem; }
+  .pl12 { padding-left: 2.25rem; }
+}
+
 @media (min-width: 640px) {
+  .section {
+    padding: 5rem 0;
+  }
+
   .inner {
     padding: 0 1.5rem;
   }
 }
 
 @media (min-width: 1024px) {
+  .section {
+    padding: 6rem 0; /* R-08: restore desktop */
+  }
+
   .grid {
     grid-template-columns: 1fr 1fr;
     gap: 3rem;
@@ -178,6 +206,22 @@
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
+  }
+
+  /* R-11: Left-align CTAs in 2-column layout */
+  .ctas {
+    justify-content: flex-start;
+  }
+
+  /* R-12: Restore button sizing and show full label on desktop */
+  .btn {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.9375rem;
+  }
+
+  .btnSuffix {
+    display: inline;
   }
 }
 
diff --git a/src/components/landing/Standards.tsx b/src/components/landing/Standards.tsx
index d4b023c..9ecef0b 100644
--- a/src/components/landing/Standards.tsx
+++ b/src/components/landing/Standards.tsx
@@ -102,7 +102,7 @@ export default function Standards() {
                 View Specification
               </a>
               <a href="/architecture" className={`${styles.btn} ${styles.btnGhost}`}>
-                Architecture Overview
+                Architecture<span className={styles.btnSuffix}> Overview</span>
               </a>
             </div>
           </div>
diff --git a/src/css/custom.css b/src/css/custom.css
index 0e55c7d..11a3652 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -207,7 +207,7 @@ a[class*="embed_documentation_footer-"] {
 
 .footer__copyright {
   font-size: 0.75rem;
-  color: #374151;
+  color: #6b7280; /* R-10: was #374151 — upgraded for WCAG AA (4.7:1 on #0a0c10) */
   display: block;
 }
 
@@ -216,6 +216,34 @@ a[class*="embed_documentation_footer-"] {
   color: #6b7280;
   line-height: 1.6;
   margin: 0;
+  overflow-wrap: break-word; /* R-10: prevent overflow on mobile */
+  word-wrap: break-word;
+}
+
+/* Footer link columns: 2×2 grid on mobile */
+@media (max-width: 768px) {
+  .footer__links {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+
+  /* Sponsor text: match link-item sizing for consistency */
+  .footer__sponsor-text {
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+}
+
+/* R-10: Footer bottom bar stacks vertically on mobile */
+@media (max-width: 768px) {
+  .footer__bottom {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.75rem;
+    justify-content: center;
+  }
 }
 
 .footer__sponsor-text a {
@@ -357,6 +385,19 @@ Breakpoints:
   line-height: var(--vds-homepage-body-line-height);
 }
 
+/**************
+** NAVBAR — MOBILE: hide search, reset layout for hamburger
+***************/
+
+/* R-01: Hide search field on mobile (below Docusaurus hamburger breakpoint) */
+@media (max-width: 996px) {
+  .navbar .react-autocomplete,
+  .navbar [class*="searchBox"],
+  .navbar .navbar__search {
+    display: none !important;
+  }
+}
+
 /**************
 ** NAVBAR — THEME-AWARE (light + dark)
 ***************/
@@ -504,6 +545,64 @@ html[data-theme='dark'] .navbar__items--right .navbar__item.navbar__link[href*="
   color: #fff;
 }
 
+/**************
+** NAVBAR — MOBILE: reset 3-column layout for hamburger
+** MUST come after desktop layout rules above so overrides win
+***************/
+@media (max-width: 996px) {
+  /* R-05: Undo the 3-column absolute layout so hamburger sidebar works */
+  .navbar__inner {
+    justify-content: space-between !important;
+  }
+
+  .navbar .navbar__brand {
+    position: static !important;
+    transform: none !important;
+  }
+
+  /* Hide right container — color mode toggle + GitHub are in the sidebar */
+  .navbar .navbar__items--right {
+    display: none !important;
+  }
+
+  /* Left container takes full width: logo left, hamburger right */
+  .navbar__inner > .navbar__items:not(.navbar__items--right) {
+    flex: 1 1 auto !important;
+    max-width: none !important;
+    justify-content: space-between !important;
+    width: 100%;
+  }
+
+  /* Push hamburger to the far right */
+  .navbar__toggle {
+    order: 1;
+    margin-right: 0;
+  }
+
+  /* Remove backdrop-filter on mobile — it creates a containing block
+     that traps the position:fixed navbar-sidebar inside the navbar */
+  .navbar {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    background-color: rgba(255, 255, 255, 0.97);
+  }
+
+  html[data-theme='dark'] .navbar {
+    background-color: rgba(10, 12, 16, 0.97);
+  }
+
+  /* Slide sidebar in from the right instead of left */
+  .navbar-sidebar {
+    left: auto !important;
+    right: 0;
+    transform: translate3d(100%, 0, 0) !important;
+  }
+
+  .navbar-sidebar--show .navbar-sidebar {
+    transform: translate3d(0, 0, 0) !important;
+  }
+}
+
 /**************
 ** SHELL PROMPT
 ***************/