Fix Gateway page visual inconsistencies

docs/app/(home)/cloud/EnterpriseSection.module.css

@@ -27,12 +27,6 @@
   text-wrap: balance;
 }
 
-.link {
-  font-family: var(--home-font-display);
-  font-size: var(--home-body-size);
-  line-height: 1.3;
-}
-
 @media (max-width: 767px) {
   .section {
     padding-block: 96px;

docs/app/(home)/cloud/EnterpriseSection.tsx

@@ -1,4 +1,4 @@
-import { ExternalTextLink } from "../components/ExternalTextLink/ExternalTextLink";
+import { Button } from "@/components/button";
 import {
   FeatureGridSection,
   type GridFeature,
@@ -62,9 +62,7 @@ export function EnterpriseSection({
         <h2 id={titleId} className={styles.title}>
           {title}
         </h2>
-        <ExternalTextLink className={styles.link} href="https://trust.thesys.dev/">
-          {linkLabel}
-        </ExternalTextLink>
+        <Button href="https://trust.thesys.dev/" text={linkLabel} variant="tertiary" external />
       </div>
       <FeatureGridSection
         features={features}

docs/app/(home)/cloud/gateway/WhySection.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@/components/button";
 import { production } from "@/lib/benchmark-data";
 import { FailureBreakdown } from "./FailureBreakdown";
 import styles from "./sections.module.css";
@@ -26,12 +27,8 @@ export function WhySection() {
           and repairs what remains before users see it.
         </p>
         <div className={styles.linkRow}>
-          <a className={styles.link} href="/benchmarks?view=formats">
-            Compare formats →
-          </a>
-          <a className={styles.link} href="/benchmarks">
-            Compare models →
-          </a>
+          <Button href="/benchmarks?view=formats" text="Compare formats" variant="tertiary" />
+          <Button href="/benchmarks" text="Compare models" variant="tertiary" />
         </div>
       </div>
     </section>

docs/app/(home)/cloud/gateway/page.module.css

@@ -65,7 +65,7 @@
   overflow: hidden;
   width: 100%;
   aspect-ratio: 1280 / 520;
-  border: 1px solid var(--home-hairline);
+  border: 0;
   border-radius: 24px;
   background: var(--home-color-surface-soft);
 }
@@ -114,7 +114,7 @@
   }
 
   .heroArtSpace {
-    aspect-ratio: 390 / 620;
+    aspect-ratio: 390 / 720;
   }
 }
 

docs/app/(home)/cloud/gateway/sections.module.css

@@ -59,19 +59,6 @@
   margin-top: 1.5rem;
 }
 
-.link {
-  color: var(--openui-text-neutral-primary);
-  font-family: var(--home-font-text);
-  font-size: var(--home-body-size);
-  line-height: var(--home-body-leading);
-  text-decoration: none;
-  border-bottom: 1px solid currentColor;
-}
-
-.link:hover {
-  opacity: 0.7;
-}
-
 .problemLockup .heading {
   max-width: 501px;
 }
@@ -88,15 +75,6 @@
   margin-top: 18px;
 }
 
-.problemConclusion .link {
-  padding-bottom: 7px;
-  border-bottom: 0;
-}
-
-.problemConclusion .link:hover {
-  text-decoration: underline;
-}
-
 .diagram {
   margin-top: 72px;
 }
@@ -108,6 +86,7 @@
   max-width: 1120px;
   margin-inline: auto;
   aspect-ratio: 1120 / 440;
+  overflow: hidden;
   border: 0;
   border-radius: 24px;
   background: transparent;

docs/app/(home)/cloud/observability/EarlyAccessForm.tsx

@@ -98,7 +98,9 @@ export function EarlyAccessForm() {
           disabled={status === "pending"}
         >
           <span className={styles.emailSubmitText}>Join waitlist</span>
-          <ArrowRight className={styles.emailSubmitIcon} size={16} weight="bold" />
+          <span className={styles.emailSubmitBadge} aria-hidden="true">
+            <ArrowRight className={styles.emailSubmitIcon} size={16} weight="bold" />
+          </span>
         </button>
       </form>
 

docs/app/(home)/cloud/observability/page.module.css

@@ -258,7 +258,7 @@
      than squeezing the field. */
   flex: 0 0 auto;
   min-width: 0;
-  width: 14rem;
+  width: 16rem;
   border: 0;
   background: none;
   outline: none;
@@ -291,25 +291,28 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 8.75rem;
-  height: 2.5rem;
-  gap: 8px;
-  padding: 0 16px;
-  border: 0;
+  min-width: 10.25rem;
+  height: 3rem;
+  gap: 10px;
+  padding: 0 8px 0 20px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 9999px;
   background: #0a0a0a;
+  box-shadow: var(--home-bevel-on-dark);
   color: #ffffff;
-  font-family: var(--home-font-text);
-  font-size: 14px;
-  font-weight: 600;
+  font-family: "Inter Display", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
   cursor: pointer;
   transition:
     opacity 0.15s ease,
     transform 0.15s ease;
 }
 
 [data-theme="dark"] .emailSubmit {
-  background: #f3f3f4;
+  border-color: rgba(0, 0, 0, 0.08);
+  background: var(--home-surface-raised);
+  box-shadow: var(--home-bevel);
   color: #0d0d0f;
 }
 
@@ -393,14 +396,42 @@
 }
 
 .emailSubmitText {
-  line-height: 1;
+  line-height: 1.5rem;
   white-space: nowrap;
 }
 
+.emailSubmitBadge {
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: #ffffff;
+  color: #0a0a0a;
+}
+
+[data-theme="dark"] .emailSubmitBadge {
+  background: #0a0a0a;
+  color: #ffffff;
+}
+
 .emailSubmitIcon {
   flex: none;
 }
 
+@media (min-width: 768px) and (max-width: 899.98px) {
+  .emailForm {
+    width: 100%;
+  }
+
+  .emailInput {
+    flex: 1 1 auto;
+    width: auto;
+  }
+}
+
 /* ---- Phone ----
    The pill splits: the field is its own input, and the button sits under it at
    full width, always labelled. Swapping an icon in a shared pill is a desktop
@@ -438,22 +469,18 @@
 
   .emailSubmit {
     width: 100%;
-    height: 2.875rem;
-    padding: 0 1rem;
+    height: 3rem;
+    justify-content: space-between;
+    padding: 0 8px 0 20px;
     border-radius: 9999px;
-    font-family: var(--home-font-text);
-    font-size: 15px;
+    font-family: "Inter Display", sans-serif;
+    font-size: 16px;
     font-weight: 500;
     line-height: 1;
   }
 
-  /* No swap here, the button is only ever the labelled one. */
-  .emailSubmitIcon {
-    display: none;
-  }
-
   .emailSubmitText {
-    font-size: 15px;
+    font-size: 16px;
   }
 
   /* The field carries the border the shared pill used to. */

docs/app/(home)/components/ExternalTextLink/ExternalTextLink.module.css

@@ -6,7 +6,7 @@
   color: var(--openui-text-neutral-primary);
   font-weight: inherit;
   text-decoration: none;
-  transition: background-color 160ms ease;
+  transition: opacity 160ms ease;
 }
 
 .label {
@@ -22,7 +22,7 @@
 }
 
 .link:hover {
-  background-color: color-mix(in srgb, currentColor 6%, transparent);
+  opacity: 0.7;
 }
 
 .link:focus-visible {