Marketing: step spacing fix and mobile layout

apps/marketing/src/components/variants/doc-body.astro

@@ -43,7 +43,7 @@ const { gh } = Astro.props;
         <li>
           <span class="doc__num">01</span>
           <span>
-            Connect
+            Connect{" "}
             <span class="doc__pop" tabindex="0">
               <span class="doc__pop-word">everything</span>
               <span class="doc__pop-panel" aria-hidden="true">
@@ -53,13 +53,13 @@ const { gh } = Astro.props;
                 <span class="doc__pop-pill" style={`--i:${toolLogos.length}`}>any OpenAPI, GraphQL, or MCP</span>
               </span>
             </span>
-            to Executor.
+            {" "}to Executor.
           </span>
         </li>
         <li>
           <span class="doc__num">02</span>
           <span>
-            Give
+            Give{" "}
             <span class="doc__pop" tabindex="0">
               <span class="doc__pop-word">your agent</span>
               <span class="doc__pop-panel" aria-hidden="true">
@@ -69,12 +69,12 @@ const { gh } = Astro.props;
                 <span class="doc__pop-pill" style={`--i:${agentLogos.length}`}>any MCP client</span>
               </span>
             </span>
-            the Executor tool.
+            {" "}the Executor tool.
           </span>
         </li>
         <li>
           <span class="doc__num">03</span>
-          <span>That's it. <a href="#install">Get started.</a></span>
+          <span>That's it.{" "}<a href="#install">Get started.</a></span>
         </li>
       </ol>
       <p class="doc__subhead">One MCP. All your accounts.</p>

apps/marketing/src/styles/global.css

@@ -1742,3 +1742,13 @@ main:has(.page > .page__rail) > .pattern-bg,
 main:has(.page > .page__rail) > .pattern-bg + div {
   display: none;
 }
+
+/* Below the desktop breakpoint the rail is a top bar; keep it in view. */
+@media (max-width: 1023.98px) {
+  .page__rail {
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    background: var(--color-surface);
+  }
+}

apps/marketing/src/styles/variants/doc.css

@@ -1,7 +1,10 @@
 /* Document-style homepage body. Measured prose, hairline sections. */
 .doc {
   max-width: 720px;
+  /* Without the rail there is nothing to align to, so the column centres. */
+  margin-inline: auto;
   padding: 4rem 1.5rem 6rem;
+  overflow-x: clip;
 }
 @media (min-width: 640px) {
   .doc {
@@ -12,6 +15,7 @@
   /* Fill the content column; the frame around rail + content is centred. */
   .doc {
     max-width: none;
+    margin-inline: 0;
     padding-inline: 0;
   }
   .doc__intro,
@@ -613,16 +617,20 @@ a.doc__term-v:hover {
     0 12px 32px -12px rgba(13, 13, 16, 0.18);
   opacity: 0;
   pointer-events: none;
+  visibility: hidden;
   transform: translateY(-4px);
   transition:
     opacity 0.15s ease,
-    transform 0.15s ease;
+    transform 0.15s ease,
+    visibility 0s linear 0.15s;
 }
 .doc__pop:hover .doc__pop-panel,
 .doc__pop:focus-within .doc__pop-panel {
   opacity: 1;
   pointer-events: auto;
+  visibility: visible;
   transform: translateY(0);
+  transition-delay: 0s;
 }
 .doc__pop-tile,
 .doc__pop-pill {
@@ -818,3 +826,126 @@ a.doc__term-v:hover {
 .doc__list--open li:last-child {
   border-bottom: 0;
 }
+
+/* ── Phones ── */
+@media (max-width: 719.98px) {
+  .doc {
+    padding: 2.25rem 1.25rem 4rem;
+  }
+  .doc__title {
+    font-size: 1.75rem;
+  }
+  .doc__steps {
+    font-size: 16px;
+  }
+  .doc__steps li {
+    grid-template-columns: 1.75rem 1fr;
+  }
+  .doc__subhead {
+    font-size: 16px;
+  }
+  /* Hover reveals become tap reveals. The word can sit anywhere on the line,
+     so the panel is not anchored to it; it is fixed across the viewport width
+     just under the top bar. */
+  .doc__pop {
+    position: static;
+  }
+  .doc__pop-panel {
+    position: fixed;
+    left: 1rem;
+    right: 1rem;
+    top: 64px;
+    width: auto;
+    max-width: none;
+  }
+  .doc__tabs {
+    display: flex;
+    width: 100%;
+  }
+  .doc__tabs button {
+    flex: 1;
+    padding: 0.45rem 0.4rem;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+  .doc__tabpanes p {
+    min-height: 0;
+  }
+  .doc__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .doc__actions > .btn-primary,
+  .doc__actions > .btn-secondary,
+  .doc__actions > .doc__cmd,
+  .doc__actions > .doc__dl {
+    width: 100%;
+    justify-content: center;
+    text-align: center;
+  }
+  .doc__dl {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .doc__dl > a {
+    width: 100%;
+    justify-content: center;
+  }
+  .doc__dl-other {
+    align-self: center;
+  }
+  .doc__dl .download-other-list {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .doc__section {
+    margin-top: 2.5rem;
+    padding-top: 1.75rem;
+  }
+  .doc__h {
+    font-size: 20px;
+  }
+  .doc__ways {
+    grid-template-columns: 1fr;
+  }
+  .doc__way-a .btn-primary,
+  .doc__way-a .btn-secondary {
+    width: 100%;
+    justify-content: center;
+    text-align: center;
+  }
+  .doc__way-a .doc__dl {
+    width: 100%;
+  }
+  .doc__fig--hero .surface-card {
+    padding: 1rem;
+  }
+}
+
+/* Below the rail breakpoint the intro is centred, not left-ragged. */
+@media (max-width: 1023.98px) {
+  .doc__intro {
+    text-align: center;
+  }
+  .doc__steps {
+    justify-content: center;
+  }
+  .doc__steps li {
+    display: flex;
+    justify-content: center;
+    gap: 0.6rem;
+  }
+  .doc__tabs {
+    margin-inline: auto;
+  }
+  .doc__tabpanes p {
+    margin-inline: auto;
+  }
+  .doc__actions {
+    justify-content: center;
+  }
+  .doc__pop-panel {
+    text-align: left;
+  }
+}

apps/marketing/src/styles/variants/rail.css

@@ -290,60 +290,69 @@
   color: var(--color-ink-2);
 }
 
-/* ═══ Mobile: every rail collapses to one horizontal top bar ═══ */
+/* ═══ Mobile: the rail becomes a slim top bar ═══
+   Brand on the left, three links and the Get started button on the right.
+   Everything else in the rail (index, star pill, YC badge, contact) is hidden;
+   the page body carries it. */
 @media (max-width: 1023.98px) {
   .rail {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    gap: 16px;
+    gap: 12px;
     height: 56px;
-    padding: 0 24px;
+    padding: 0 16px;
     border-right: 0;
     border-bottom: 1px solid var(--color-rule);
   }
+  .rail .rail__brand {
+    margin: 0;
+  }
   .rail .rail__toc,
   .rail .rail__toc-label,
   .rail .rail__divider,
   .rail .rail__foot,
   .rail .rail__contact,
-  .rail .rail__secondary {
+  .rail .rail__secondary,
+  .rail .gh-star,
+  .rail .rail__box--yc {
     display: none;
   }
-  .rail .rail__nav {
-    flex-direction: row;
-    align-items: center;
-    gap: 20px;
-  }
-  .rail .rail__cta {
+  .rail .rail__stack {
+    flex: 0 1 auto;
     flex-direction: row;
     align-items: center;
-    gap: 12px;
-    margin-top: 0;
+    gap: 16px;
   }
-  .rail .rail__stack {
-    flex: 0 1 auto;
+  .rail .rail__nav {
     flex-direction: row;
     align-items: center;
-    justify-content: flex-end;
-    gap: 20px;
+    gap: 14px;
   }
   .rail .rail__link {
-    padding: 0 0 0 0;
+    padding: 0;
     font-size: 14px;
+    white-space: nowrap;
   }
   .rail .rail__link::before {
     display: none;
   }
-  /* The star pill and the mono count are the first things to go when the bar
-     gets tight; the links themselves survive longest. */
-  .rail .gh-star {
-    display: none;
+  .rail .rail__cta {
+    display: block;
+    margin-top: 0;
+  }
+  .rail--b .rail__box--primary {
+    width: auto;
+    height: 32px;
+    padding: 0 12px;
+    font-size: 13px;
   }
 }
-
-@media (max-width: 719.98px) {
+@media (max-width: 479.98px) {
   .rail .rail__nav .rail__link:not(.rail__link--keep) {
     display: none;
   }
+  .rail .rail__nav {
+    gap: 12px;
+  }
 }

apps/marketing/src/styles/variants/testimonials.css

@@ -155,3 +155,17 @@
     width: calc(50% - 6px);
   }
 }
+
+@media (max-width: 719.98px) {
+  .testi {
+    /* No edge fade on phones: it eats the first card's left edge. */
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+  .testi__card {
+    width: 240px;
+  }
+  .testi__text {
+    -webkit-line-clamp: 5;
+  }
+}