From a56b8738b3a877a40bf21d78b2eee3cb82d4cf07 Mon Sep 17 00:00:00 2001
From: Eric <eric.fennis@gmail.com>
Date: Thu, 12 Nov 2026 19:05:41 +0100
Subject: [PATCH] Adjust hero styling

---
 .../theme/components/waitlist/McpDiagram.vue  |  9 ++---
 .../components/waitlist/WaitlistHero.vue      | 33 ++++++++++++++-----
 .../theme/components/waitlist/waitlist.css    |  2 +-
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/docs/.vitepress/theme/components/waitlist/McpDiagram.vue b/docs/.vitepress/theme/components/waitlist/McpDiagram.vue
index a22e541b4..237cb80cd 100644
--- a/docs/.vitepress/theme/components/waitlist/McpDiagram.vue
+++ b/docs/.vitepress/theme/components/waitlist/McpDiagram.vue
@@ -30,7 +30,7 @@ const RESET_END = RESET_START + RESET_FADE;
 const REST = 0.6;
 
 /** A multiple of the 8-unit dash period, so the dashes stop on the same phase they started on. */
-const DASH_TRAVEL = 64;
+const DASH_TRAVEL = 128;
 
 const ICON_NAMES = [
   'heart',
@@ -243,6 +243,7 @@ watch(inView, (isInView) => {
 <style scoped>
 .diagram {
   width: 230px;
+  transform: scale(0.75);
 }
 
 .node {
@@ -327,14 +328,10 @@ watch(inView, (isInView) => {
   transform: translateX(-50%);
 }
 
-.dot-request {
+.dot-request, .dot-response {
   --dot-color: var(--vp-c-brand-3);
 }
 
-.dot-response {
-  --dot-color: var(--vp-a11y-success);
-}
-
 .dot-response::after {
   border-radius: 2px;
 }
diff --git a/docs/.vitepress/theme/components/waitlist/WaitlistHero.vue b/docs/.vitepress/theme/components/waitlist/WaitlistHero.vue
index 031cdad7a..c87a8373d 100644
--- a/docs/.vitepress/theme/components/waitlist/WaitlistHero.vue
+++ b/docs/.vitepress/theme/components/waitlist/WaitlistHero.vue
@@ -34,8 +34,7 @@ const config = computed(() => waitlistProducts[props.product]);
 .waitlist-hero {
   display: flex;
   align-items: center;
-  padding: 48px 24px 64px;
-  background: var(--vp-sidebar-bg-color);
+  padding-bottom: 64px;
 }
 
 .inner {
@@ -45,6 +44,7 @@ const config = computed(() => waitlistProducts[props.product]);
   width: 100%;
   max-width: calc(var(--vp-layout-max-width) - 64px);
   margin: 0 auto;
+  padding: 0 24px 64px;
 }
 
 .intro {
@@ -54,6 +54,7 @@ const config = computed(() => waitlistProducts[props.product]);
   width: 100%;
   max-width: 576px;
   margin-inline: auto;
+
 }
 
 .tag {
@@ -64,8 +65,9 @@ const config = computed(() => waitlistProducts[props.product]);
 
 .title {
   margin: 16px 0 0;
-  font-size: 40px;
-  line-height: 48px;
+  max-width: 392px;
+  font-size: 32px;
+  line-height: 40px;
   font-weight: 700;
   letter-spacing: -0.4px;
   color: var(--vp-c-text-1);
@@ -87,23 +89,35 @@ const config = computed(() => waitlistProducts[props.product]);
   display: flex;
   justify-content: center;
   min-width: 0;
+  background: var(--vp-sidebar-bg-color);
+  margin: 0 -24px;
+  border-bottom: 1px solid var(--vp-c-gutter);
+}
+
+@media (min-width: 640px) {
+  .title {
+    max-width: 576px;
+    line-height: 56px;
+    font-size: 48px;
+  }
 }
 
 @media (min-width: 768px) {
-  .title {
-    font-size: 56px;
-    line-height: 64px;
-  }
-
   .tag {
     display: inline-block;
   }
 }
 
 @media (min-width: 960px) {
+  .title {
+    line-height: 64px;
+    font-size: 56px;
+  }
+
   .waitlist-hero {
     min-height: calc(100vh - var(--vp-nav-height) - 113px);
     padding: 80px 32px 64px;
+    background: var(--vp-sidebar-bg-color);
   }
 
   .inner {
@@ -119,6 +133,7 @@ const config = computed(() => waitlistProducts[props.product]);
   .visual {
     flex: 1 1 0;
     align-items: center;
+    border-bottom: none;
   }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/waitlist/waitlist.css b/docs/.vitepress/theme/components/waitlist/waitlist.css
index 0640389a1..60ca65316 100644
--- a/docs/.vitepress/theme/components/waitlist/waitlist.css
+++ b/docs/.vitepress/theme/components/waitlist/waitlist.css
@@ -3,7 +3,7 @@ div.waitlist-card.card {
   gap: 20px;
   width: 100%;
   padding: 32px;
-  box-shadow: 0 5px 11px 4px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--vp-c-shadow);
 }
 
 .waitlist-card-header {