Have the landing page working on mobile/small screens using the oh so intuitive 'sm which actually means bigger than sm so not sm' thing in tailwind. Larger screens are still a problem.

static/style.css

@@ -11,6 +11,7 @@
     --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-red-900: oklch(39.6% 0.141 25.723);
     --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-yellow-300: oklch(90.5% 0.182 98.111);
     --color-green-400: oklch(79.2% 0.209 151.711);
@@ -36,6 +37,7 @@
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
+    --container-4xl: 56rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
@@ -53,6 +55,7 @@
     --text-6xl: 3.75rem;
     --text-6xl--line-height: 1;
     --font-weight-light: 300;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -287,6 +290,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-4xl {
+    width: var(--container-4xl);
+  }
   .w-fit {
     width: fit-content;
   }
@@ -311,6 +317,16 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .two-panel {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    @media (width >= 40rem) {
+      grid-template-rows: repeat(1, minmax(0, 1fr));
+    }
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -326,6 +342,9 @@
   .items-center {
     align-items: center;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -365,6 +384,9 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
+  .justify-self-center {
+    justify-self: center;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -399,6 +421,11 @@
       }
     }
   }
+  .debug {
+    border-style: var(--tw-border-style) !important;
+    border-width: 1px !important;
+    border-color: var(--color-red-900) !important;
+  }
   .border-1 {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -499,12 +526,6 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
-  .\!pb-4 {
-    padding-bottom: calc(var(--spacing) * 4) !important;
-  }
-  .\!pb-10 {
-    padding-bottom: calc(var(--spacing) * 10) !important;
-  }
   .\!pb-20 {
     padding-bottom: calc(var(--spacing) * 20) !important;
   }
@@ -526,9 +547,6 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
-  .pb-10 {
-    padding-bottom: calc(var(--spacing) * 10);
-  }
   .pb-10\! {
     padding-bottom: calc(var(--spacing) * 10) !important;
   }
@@ -541,18 +559,10 @@
   .align-top {
     vertical-align: top;
   }
-  .\!text-2xl {
-    font-size: var(--text-2xl) !important;
-    line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
-  }
   .\!text-3xl {
     font-size: var(--text-3xl) !important;
     line-height: var(--tw-leading, var(--text-3xl--line-height)) !important;
   }
-  .\!text-xl {
-    font-size: var(--text-xl) !important;
-    line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
-  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -632,13 +642,6 @@
       }
     }
   }
-  .hover\:bg-gray-950 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-950);
-      }
-    }
-  }
   .dark\:bg-gray-300 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-300);
@@ -672,9 +675,9 @@ main {
   min-height: 100vh;
   flex-direction: column;
   gap: calc(var(--spacing) * 4);
-  background-color: var(--color-gray-100);
+  background-color: var(--color-gray-200);
   padding: calc(var(--spacing) * 0);
-  color: var(--color-gray-950);
+  color: var(--color-black);
   @media (prefers-color-scheme: dark) {
     background-color: var(--color-gray-900);
   }
@@ -779,10 +782,23 @@ details {
   color: var(--color-gray-950);
 }
 aside {
-  border-radius: var(--radius-lg);
-  background-color: var(--color-gray-100);
-  padding: calc(var(--spacing) * 2);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 4);
+  border-radius: 0;
+  background-color: var(--color-gray-300);
+  padding: calc(var(--spacing) * 4);
+  font-size: var(--text-2xl);
+  line-height: var(--tw-leading, var(--text-2xl--line-height));
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
   color: var(--color-gray-950);
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-gray-800);
+  }
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-50);
+  }
 }
 aside > mark {
   border-radius: var(--radius-sm);