UPDATES

mkdocs/docs/stylesheets/extra.css

@@ -45,6 +45,49 @@
     margin-right: 4px;
 }
 
+/* Force code blocks to wrap text instead of horizontal scroll */
+.highlight pre,
+.codehilite pre {
+    white-space: pre-wrap !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    overflow-x: auto !important;
+}
+
+/* Ensure code block containers maintain proper positioning */
+.highlight,
+.codehilite {
+    position: relative !important;
+    overflow: visible !important;
+}
+
+/* For inline code elements only */
+p code,
+li code,
+td code,
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+}
+
+/* Ensure tables with code don't break layout */
+table {
+    table-layout: auto;
+    width: 100%;
+}
+
+table td {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+
+
 /* GitHub Widget Styles */
 .github-widget {
   margin: 1.5rem 0;

mkdocs/docs/stylesheets/home.css

@@ -52,11 +52,11 @@
   --home-max-width: 1400px;
   --grid-gap: var(--space-sm);
   --card-padding: var(--space-md);
+  padding-top: 0rem; /* Reduced from 3.5rem */
 }
 
 /* Homepage body setup */
 body[data-md-template="home"] {
-  background: var(--home-dark-bg);
   margin: 0;
   padding: 0;
   overflow-x: hidden;
@@ -85,7 +85,6 @@ body[data-md-template="home"] .md-main__inner {
 .md-content--home {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   color: var(--home-dark-text);
-  background: var(--home-dark-bg);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
@@ -105,7 +104,7 @@ body[data-md-template="home"] .md-main__inner {
 }
 
 .grid-card {
-  background: var(--home-dark-card);
+  background: var(--md-default-bg-color);
   border: 1px solid var(--grid-border);
   border-radius: 4px;
   padding: var(--space-md);
@@ -141,7 +140,6 @@ body[data-md-template="home"] .md-main__inner {
 
 .hero-grid {
   padding: var(--space-md) 0;
-  background: linear-gradient(180deg, var(--home-dark-bg) 0%, var(--home-dark-surface) 100%);
 }
 
 .hero-grid .grid-container {
@@ -309,8 +307,13 @@ body[data-md-template="home"] .md-main__inner {
 .section-header {
   text-align: center;
   margin-bottom: var(--space-lg);
-  position: relative;
-  z-index: 10;
+  padding: var(--space-sm) 0;
+  background: linear-gradient(to bottom, 
+    rgba(10, 10, 10, 0.9) 0%, 
+    rgba(10, 10, 10, 0.7) 70%, 
+    transparent 100%);
+  backdrop-filter: blur(4px);
+  border-bottom: 1px solid var(--grid-border);
 }
 
 .section-header h2 {
@@ -318,6 +321,18 @@ body[data-md-template="home"] .md-main__inner {
   font-weight: 700;
   margin: 0 0 var(--space-xs) 0;
   color: var(--home-dark-text);
+  position: relative;
+  display: inline-block;
+}
+
+.section-header h2::after {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--trans-blue), transparent);
 }
 
 .section-header p {
@@ -393,7 +408,6 @@ body[data-md-template="home"] .md-main__inner {
 
 .comparison-grid {
   padding: var(--space-lg) 0;
-  background: var(--home-dark-surface);
 }
 
 .comparison-table {