From a8e29788cffc4ef2137a00bdfc2c1e1e1bd2eea5 Mon Sep 17 00:00:00 2001
From: Mike Morper <mike.morper@virtru.com>
Date: Mon, 2 Mar 2026 20:27:46 -0800
Subject: [PATCH 1/4] fix: improve responsive layout for mobile and tablet
 viewports

Apply mobile-first responsive fixes across all landing page sections:
reduce section padding at small viewports, compact hero text/buttons,
add horizontal scroll handling for code blocks and diagrams, center
CTAs in single-column layouts, fix navbar for Docusaurus hamburger
menu, and improve footer contrast/stacking on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Mike Morper <mike.morper@virtru.com>
---
 src/components/landing/Community.module.css   | 10 +-
 .../landing/DeveloperFirst.module.css         | 10 +-
 src/components/landing/FinalCTA.module.css    | 10 +-
 src/components/landing/Hero.module.css        | 99 +++++++++++++++----
 .../landing/ProblemSolution.module.css        | 10 +-
 src/components/landing/Standards.module.css   | 49 ++++++++-
 src/components/landing/Standards.tsx          |  2 +-
 src/css/custom.css                            | 50 +++++++++-
 8 files changed, 213 insertions(+), 27 deletions(-)

diff --git a/src/components/landing/Community.module.css b/src/components/landing/Community.module.css
index a140a5db..14cbb42f 100644
--- a/src/components/landing/Community.module.css
+++ b/src/components/landing/Community.module.css
@@ -1,6 +1,6 @@
 .section {
   position: relative;
-  padding: 6rem 0;
+  padding: 3rem 0; /* R-08: was 6rem ��� reduced for mobile */
   color: var(--otdf-text-primary);
 }
 
@@ -90,6 +90,10 @@
 
 /* Responsive */
 @media (min-width: 640px) {
+  .section {
+    padding: 4rem 0; /* R-08: tablet */
+  }
+
   .cards {
     grid-template-columns: repeat(3, 1fr);
   }
@@ -104,6 +108,10 @@
 }
 
 @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 9f4d14a0..11c8dc0f 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: 3rem 0; /* R-08: was 6rem — reduced for mobile */
   color: var(--otdf-text-primary);
 }
 
@@ -201,6 +201,10 @@
 
 /* Responsive */
 @media (min-width: 640px) {
+  .section {
+    padding: 4rem 0; /* R-08: tablet */
+  }
+
   .cards {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -215,6 +219,10 @@
 }
 
 @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 4c303110..8dacc30f 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: 3rem 0; /* R-08: was 6rem — reduced for mobile */
   overflow: hidden;
   color: var(--otdf-text-primary);
 }
@@ -96,6 +96,10 @@
 
 /* Responsive */
 @media (min-width: 640px) {
+  .section {
+    padding: 4rem 0; /* R-08: tablet */
+  }
+
   .inner {
     padding: 0 1.5rem;
   }
@@ -106,6 +110,10 @@
 }
 
 @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 e0faf6ca..2438524e 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: 3rem 0; /* R-08: was 6rem — reduced for mobile */
+  min-height: auto; /* R-08: fit content naturally on mobile */
   color: var(--otdf-text-primary);
 }
 
@@ -14,6 +14,10 @@
   max-width: 80rem;
   margin: 0 auto;
   padding: 0 1rem;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  text-align: center; /* R-13: centered in single-column mobile */
 }
 
 .grid {
@@ -48,7 +52,7 @@
 
 /* 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;
@@ -59,10 +63,12 @@
 /* Body */
 .bodyPrimary {
   margin-top: 1.5rem;
-  font-size: 1.125rem;
+  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 {
@@ -70,7 +76,9 @@
   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 */
@@ -79,16 +87,17 @@
   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 {
@@ -157,14 +167,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 +206,41 @@
 .cGreen  { color: #86efac; }
 .cGray   { color: #6b7280; }
 
-/* Responsive */
+/* Responsive — mobile-first: smallest breakpoint first (R-06 fix) */
+@media (min-width: 640px) {
+  .section {
+    padding: 4rem 0; /* R-08: tablet */
+  }
+
+  .heading {
+    font-size: 2.5rem; /* R-04: was 3rem */
+  }
+
+  .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 {
@@ -197,18 +252,26 @@
     font-size: 3.75rem;
   }
 
-  .section {
-    padding-top: 6rem;
+  /* R-03/R-13: Left-align CTAs and body text in 2-column layout */
+  .ctas {
+    justify-content: flex-start;
   }
-}
 
-@media (min-width: 640px) {
-  .heading {
-    font-size: 3rem;
+  .bodyPrimary,
+  .bodySecondary {
+    margin-left: 0;
+    margin-right: 0;
   }
 
-  .inner {
-    padding: 0 1.5rem;
+  /* 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 b3150d19..3cbdc689 100644
--- a/src/components/landing/ProblemSolution.module.css
+++ b/src/components/landing/ProblemSolution.module.css
@@ -1,6 +1,6 @@
 .section {
   position: relative;
-  padding: 6rem 0;
+  padding: 3rem 0; /* R-08: was 6rem — reduced for mobile */
   color: var(--otdf-text-primary);
 }
 
@@ -124,6 +124,10 @@
 
 /* Responsive */
 @media (min-width: 768px) {
+  .section {
+    padding: 4rem 0; /* R-08: tablet */
+  }
+
   .cards {
     grid-template-columns: repeat(3, 1fr);
   }
@@ -138,6 +142,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 6f533d50..e5e40e36 100644
--- a/src/components/landing/Standards.module.css
+++ b/src/components/landing/Standards.module.css
@@ -1,6 +1,6 @@
 .section {
   position: relative;
-  padding: 6rem 0;
+  padding: 3rem 0; /* R-08: was 6rem — reduced for mobile */
   color: var(--otdf-text-primary);
 }
 
@@ -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 {
@@ -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: 4rem 0; /* R-08: tablet */
+  }
+
   .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;
@@ -179,6 +207,21 @@
   .heading {
     font-size: 2.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;
+  }
 }
 
 /* Light mode overrides — diagram intentionally stays dark */
diff --git a/src/components/landing/Standards.tsx b/src/components/landing/Standards.tsx
index d4b023c7..9ecef0b3 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 0e55c7de..56cd2614 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,19 @@ 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;
+}
+
+/* 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 +370,41 @@ 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;
+  }
+}
+
+/* R-05: Reset the 3-column absolute-positioning layout on mobile so
+   Docusaurus's built-in hamburger sidebar works correctly */
+@media (max-width: 996px) {
+  .navbar__inner {
+    justify-content: space-between;
+  }
+
+  .navbar .navbar__brand {
+    position: static;
+    transform: none;
+  }
+
+  .navbar .navbar__items--right {
+    position: static;
+    transform: none;
+  }
+
+  .navbar__inner > .navbar__items:not(.navbar__items--right) {
+    max-width: none;
+  }
+}
+
 /**************
 ** NAVBAR — THEME-AWARE (light + dark)
 ***************/

From 3eb53d62e2ce2907d1399ec36d07cf1237870cfa Mon Sep 17 00:00:00 2001
From: Mike Morper <mike.morper@virtru.com>
Date: Mon, 2 Mar 2026 21:00:01 -0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20responsive=20mobile=20layout=20?=
 =?UTF-8?q?=E2=80=94=20navbar,=20spacing,=20and=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix hamburger menu: move R-05 overrides after desktop rules to win
  cascade, remove backdrop-filter on mobile (was trapping fixed sidebar),
  slide sidebar from right to match hamburger position
- Hide GitHub button on mobile (accessible in sidebar), reorder navbar
  to logo-left / hamburger-right
- Improve spacing hierarchy: tighten heading→body gap (1.5rem→0.75rem),
  increase section padding (3rem→4rem mobile, 4rem→5rem tablet),
  increase CTA separation (2rem→2.5rem), widen inner padding (1rem→1.25rem)
- Footer: 2×2 grid on mobile, sponsor text matches link-item sizing
- Fix code window inheriting text-align:center from mobile layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Mike Morper <mike.morper@virtru.com>
---
 src/components/landing/Community.module.css   |  8 +-
 .../landing/DeveloperFirst.module.css         |  8 +-
 src/components/landing/FinalCTA.module.css    |  8 +-
 src/components/landing/Hero.module.css        | 17 ++--
 .../landing/ProblemSolution.module.css        | 10 +-
 src/components/landing/Standards.module.css   |  8 +-
 src/css/custom.css                            | 95 ++++++++++++++-----
 7 files changed, 103 insertions(+), 51 deletions(-)

diff --git a/src/components/landing/Community.module.css b/src/components/landing/Community.module.css
index 14cbb42f..c767f9df 100644
--- a/src/components/landing/Community.module.css
+++ b/src/components/landing/Community.module.css
@@ -1,13 +1,13 @@
 .section {
   position: relative;
-  padding: 3rem 0; /* R-08: was 6rem ��� reduced for mobile */
+  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 {
@@ -91,7 +91,7 @@
 /* Responsive */
 @media (min-width: 640px) {
   .section {
-    padding: 4rem 0; /* R-08: tablet */
+    padding: 5rem 0;
   }
 
   .cards {
diff --git a/src/components/landing/DeveloperFirst.module.css b/src/components/landing/DeveloperFirst.module.css
index 11c8dc0f..e3f7ec83 100644
--- a/src/components/landing/DeveloperFirst.module.css
+++ b/src/components/landing/DeveloperFirst.module.css
@@ -1,6 +1,6 @@
 .section {
   position: relative;
-  padding: 3rem 0; /* R-08: was 6rem — reduced for mobile */
+  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 {
@@ -202,7 +202,7 @@
 /* Responsive */
 @media (min-width: 640px) {
   .section {
-    padding: 4rem 0; /* R-08: tablet */
+    padding: 5rem 0;
   }
 
   .cards {
diff --git a/src/components/landing/FinalCTA.module.css b/src/components/landing/FinalCTA.module.css
index 8dacc30f..67de1849 100644
--- a/src/components/landing/FinalCTA.module.css
+++ b/src/components/landing/FinalCTA.module.css
@@ -1,6 +1,6 @@
 .section {
   position: relative;
-  padding: 3rem 0; /* R-08: was 6rem — reduced for mobile */
+  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 {
@@ -97,7 +97,7 @@
 /* Responsive */
 @media (min-width: 640px) {
   .section {
-    padding: 4rem 0; /* R-08: tablet */
+    padding: 5rem 0;
   }
 
   .inner {
diff --git a/src/components/landing/Hero.module.css b/src/components/landing/Hero.module.css
index 2438524e..8a68cb0d 100644
--- a/src/components/landing/Hero.module.css
+++ b/src/components/landing/Hero.module.css
@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   overflow: hidden;
-  padding: 3rem 0; /* R-08: was 6rem — reduced for mobile */
+  padding: 4rem 0;
   min-height: auto; /* R-08: fit content naturally on mobile */
   color: var(--otdf-text-primary);
 }
@@ -13,7 +13,7 @@
   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;
@@ -57,12 +57,12 @@
   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;
+  margin-top: 0;
   font-size: 1rem; /* R-04: was 1.125rem — reduced for mobile */
   color: #9ca3af;
   line-height: 1.7;
@@ -72,7 +72,7 @@
 }
 
 .bodySecondary {
-  margin-top: 1.5rem;
+  margin-top: 0.75rem;
   font-size: 1rem;
   color: #6b7280;
   line-height: 1.7;
@@ -83,7 +83,7 @@
 
 /* CTAs */
 .ctas {
-  margin-top: 2rem;
+  margin-top: 2.5rem;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
@@ -138,6 +138,7 @@
   background: #0f1117;
   color: #e8eaf0;
   overflow: hidden;
+  text-align: left; /* R-13: override inherited center from .inner on mobile */
 }
 
 .windowChrome {
@@ -209,11 +210,11 @@
 /* Responsive — mobile-first: smallest breakpoint first (R-06 fix) */
 @media (min-width: 640px) {
   .section {
-    padding: 4rem 0; /* R-08: tablet */
+    padding: 5rem 0;
   }
 
   .heading {
-    font-size: 2.5rem; /* R-04: was 3rem */
+    font-size: 2.5rem;
   }
 
   .inner {
diff --git a/src/components/landing/ProblemSolution.module.css b/src/components/landing/ProblemSolution.module.css
index 3cbdc689..45385d89 100644
--- a/src/components/landing/ProblemSolution.module.css
+++ b/src/components/landing/ProblemSolution.module.css
@@ -1,13 +1,13 @@
 .section {
   position: relative;
-  padding: 3rem 0; /* R-08: was 6rem — reduced for mobile */
+  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;
 }
@@ -125,7 +125,7 @@
 /* Responsive */
 @media (min-width: 768px) {
   .section {
-    padding: 4rem 0; /* R-08: tablet */
+    padding: 5rem 0;
   }
 
   .cards {
diff --git a/src/components/landing/Standards.module.css b/src/components/landing/Standards.module.css
index e5e40e36..6ee935f1 100644
--- a/src/components/landing/Standards.module.css
+++ b/src/components/landing/Standards.module.css
@@ -1,13 +1,13 @@
 .section {
   position: relative;
-  padding: 3rem 0; /* R-08: was 6rem — reduced for mobile */
+  padding: 4rem 0;
   color: var(--otdf-text-primary);
 }
 
 .inner {
   max-width: 80rem;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 1.25rem;
 }
 
 .grid {
@@ -76,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 {
@@ -174,7 +174,7 @@
 
 @media (min-width: 640px) {
   .section {
-    padding: 4rem 0; /* R-08: tablet */
+    padding: 5rem 0;
   }
 
   .inner {
diff --git a/src/css/custom.css b/src/css/custom.css
index 56cd2614..11a3652d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -220,6 +220,21 @@ a[class*="embed_documentation_footer-"] {
   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 {
@@ -383,28 +398,6 @@ Breakpoints:
   }
 }
 
-/* R-05: Reset the 3-column absolute-positioning layout on mobile so
-   Docusaurus's built-in hamburger sidebar works correctly */
-@media (max-width: 996px) {
-  .navbar__inner {
-    justify-content: space-between;
-  }
-
-  .navbar .navbar__brand {
-    position: static;
-    transform: none;
-  }
-
-  .navbar .navbar__items--right {
-    position: static;
-    transform: none;
-  }
-
-  .navbar__inner > .navbar__items:not(.navbar__items--right) {
-    max-width: none;
-  }
-}
-
 /**************
 ** NAVBAR — THEME-AWARE (light + dark)
 ***************/
@@ -552,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
 ***************/

From 428338fe7c0bdbcb5b180c9b6c450efea13c2a32 Mon Sep 17 00:00:00 2001
From: Mike Morper <mike.morper@virtru.com>
Date: Mon, 2 Mar 2026 21:08:21 -0800
Subject: [PATCH 3/4] fix: restore desktop heading margins after mobile spacing
 pass

The mobile spacing reduction (heading margin 0.75rem) applied at all
breakpoints, making desktop headings feel cramped. Restore comfortable
margins (1.25rem, 1.5rem for Hero) at tablet/desktop breakpoints.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Mike Morper <mike.morper@virtru.com>
---
 src/components/landing/Community.module.css       | 1 +
 src/components/landing/DeveloperFirst.module.css  | 1 +
 src/components/landing/FinalCTA.module.css        | 1 +
 src/components/landing/Hero.module.css            | 5 +++++
 src/components/landing/ProblemSolution.module.css | 1 +
 src/components/landing/Standards.module.css       | 1 +
 6 files changed, 10 insertions(+)

diff --git a/src/components/landing/Community.module.css b/src/components/landing/Community.module.css
index c767f9df..c096d54c 100644
--- a/src/components/landing/Community.module.css
+++ b/src/components/landing/Community.module.css
@@ -104,6 +104,7 @@
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
   }
 }
 
diff --git a/src/components/landing/DeveloperFirst.module.css b/src/components/landing/DeveloperFirst.module.css
index e3f7ec83..998db924 100644
--- a/src/components/landing/DeveloperFirst.module.css
+++ b/src/components/landing/DeveloperFirst.module.css
@@ -215,6 +215,7 @@
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
   }
 }
 
diff --git a/src/components/landing/FinalCTA.module.css b/src/components/landing/FinalCTA.module.css
index 67de1849..978fffcf 100644
--- a/src/components/landing/FinalCTA.module.css
+++ b/src/components/landing/FinalCTA.module.css
@@ -106,6 +106,7 @@
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
   }
 }
 
diff --git a/src/components/landing/Hero.module.css b/src/components/landing/Hero.module.css
index 8a68cb0d..36a6eb7c 100644
--- a/src/components/landing/Hero.module.css
+++ b/src/components/landing/Hero.module.css
@@ -251,6 +251,11 @@
 
   .heading {
     font-size: 3.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .bodyPrimary {
+    margin-top: 0;
   }
 
   /* R-03/R-13: Left-align CTAs and body text in 2-column layout */
diff --git a/src/components/landing/ProblemSolution.module.css b/src/components/landing/ProblemSolution.module.css
index 45385d89..2216b5bc 100644
--- a/src/components/landing/ProblemSolution.module.css
+++ b/src/components/landing/ProblemSolution.module.css
@@ -134,6 +134,7 @@
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
   }
 
   .inner {
diff --git a/src/components/landing/Standards.module.css b/src/components/landing/Standards.module.css
index 6ee935f1..5d237ee0 100644
--- a/src/components/landing/Standards.module.css
+++ b/src/components/landing/Standards.module.css
@@ -206,6 +206,7 @@
 
   .heading {
     font-size: 2.25rem;
+    margin-bottom: 1.25rem;
   }
 
   /* R-11: Left-align CTAs in 2-column layout */

From 3d957a00c69958d02b31ca69c6fe3568343f0051 Mon Sep 17 00:00:00 2001
From: Ryan Schumacher <jschumacher@virtru.com>
Date: Tue, 3 Mar 2026 10:40:05 -0600
Subject: [PATCH 4/4] Apply suggestion from @dmihalcik-virtru

Co-authored-by: Dave Mihalcik <dmihalcik@virtru.com>
Signed-off-by: Mary Dickson <mary.dickson@virtru.com>
---
 src/components/landing/Community.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing/Community.module.css b/src/components/landing/Community.module.css
index c096d54c..40080376 100644
--- a/src/components/landing/Community.module.css
+++ b/src/components/landing/Community.module.css
@@ -1,6 +1,6 @@
 .section {
   position: relative;
-  padding: 4rem 0; /* R-08: was 6rem ��� reduced for mobile */
+  padding: 4rem 0; /* R-08: was 6rem - reduced for mobile */
   color: var(--otdf-text-primary);
 }