diff --git a/docs/app/(home)/cloud/EnterpriseSection.module.css b/docs/app/(home)/cloud/EnterpriseSection.module.css
index 4077d28da..98c5e9417 100644
--- a/docs/app/(home)/cloud/EnterpriseSection.module.css
+++ b/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;
diff --git a/docs/app/(home)/cloud/EnterpriseSection.tsx b/docs/app/(home)/cloud/EnterpriseSection.tsx
index 0e60f94de..226dd1a82 100644
--- a/docs/app/(home)/cloud/EnterpriseSection.tsx
+++ b/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}
diff --git a/docs/app/(home)/cloud/gateway/WhySection.tsx b/docs/app/(home)/cloud/gateway/WhySection.tsx
index cea71af8d..69a814be3 100644
--- a/docs/app/(home)/cloud/gateway/WhySection.tsx
+++ b/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>
diff --git a/docs/app/(home)/cloud/gateway/page.module.css b/docs/app/(home)/cloud/gateway/page.module.css
index 04bb59810..804a73a69 100644
--- a/docs/app/(home)/cloud/gateway/page.module.css
+++ b/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;
   }
 }
 
diff --git a/docs/app/(home)/cloud/gateway/sections.module.css b/docs/app/(home)/cloud/gateway/sections.module.css
index 8fadc71c4..43741e34d 100644
--- a/docs/app/(home)/cloud/gateway/sections.module.css
+++ b/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;
diff --git a/docs/app/(home)/cloud/observability/EarlyAccessForm.tsx b/docs/app/(home)/cloud/observability/EarlyAccessForm.tsx
index 56824ecef..4ffa00830 100644
--- a/docs/app/(home)/cloud/observability/EarlyAccessForm.tsx
+++ b/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>
 
diff --git a/docs/app/(home)/cloud/observability/page.module.css b/docs/app/(home)/cloud/observability/page.module.css
index 1baf0e46c..dbcaa7c9e 100644
--- a/docs/app/(home)/cloud/observability/page.module.css
+++ b/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,17 +291,18 @@
   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,
@@ -309,7 +310,9 @@
 }
 
 [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. */
diff --git a/docs/app/(home)/components/ExternalTextLink/ExternalTextLink.module.css b/docs/app/(home)/components/ExternalTextLink/ExternalTextLink.module.css
index d58a7ff3b..9e99cb4d2 100644
--- a/docs/app/(home)/components/ExternalTextLink/ExternalTextLink.module.css
+++ b/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 {
diff --git a/docs/app/(home)/sections/ProductIllustrations/ProductIllustrations.module.css b/docs/app/(home)/sections/ProductIllustrations/ProductIllustrations.module.css
index b34a678df..3762376ee 100644
--- a/docs/app/(home)/sections/ProductIllustrations/ProductIllustrations.module.css
+++ b/docs/app/(home)/sections/ProductIllustrations/ProductIllustrations.module.css
@@ -1247,7 +1247,7 @@
 .invalidNodeLabel {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: 5px;
   color: var(--flow-muted);
   font-family: var(--home-font-text);
   font-size: 10px;
@@ -1969,34 +1969,71 @@
   top: 88.85%;
 }
 
-.modelOutputLabel {
+.responseLegend {
   position: absolute;
   z-index: 2;
   bottom: 22px;
   left: 22px;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  gap: 7px 12px;
+  max-width: 340px;
   padding: 8px 10px;
-  border: 0;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--response-canvas) 92%, transparent);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--response-canvas) 94%, transparent);
   text-align: left;
 }
 
-.modelOutputLabel span {
+.responseLegendItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   color: var(--response-muted);
   font-family: var(--home-font-text);
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0;
   line-height: 1;
+  white-space: nowrap;
+}
+
+.responseLegendItem > i {
+  display: block;
+  width: 8px;
+  height: 8px;
+  flex: none;
+  background: currentColor;
+}
+
+.responseLegendItem[data-tone="valid"] > i,
+.responseLegendItem[data-tone="type"] > i {
+  border-radius: 50%;
+}
+
+.responseLegendItem[data-tone="valid"] > i {
+  background: var(--response-valid);
+}
+
+.responseLegendItem[data-tone="root"] > i {
+  background: var(--response-error);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.responseLegendItem[data-tone="reference"] > i {
+  border-radius: 2px;
+  background: var(--response-reference);
+}
+
+.responseLegendItem[data-tone="type"] > i {
+  background: var(--response-type);
 }
 
 .responseGatewayNode {
   position: absolute;
   z-index: 4;
   top: 34.6%;
-  left: 31.25%;
+  left: 28%;
   display: flex;
   width: 20.55%;
   min-width: 228px;
@@ -2366,7 +2403,7 @@
   }
 
   .modelSources {
-    top: 58px;
+    top: 72px;
     right: 12px;
     bottom: auto;
     left: 12px;
@@ -2377,21 +2414,23 @@
 
   .modelSource {
     position: static;
-    width: max-content;
+    width: 100%;
+    max-width: 60px;
     min-width: 0;
+    height: 64px;
     justify-self: center;
     flex-direction: column;
     justify-content: center;
     gap: 4px;
     padding: 5px 2px 6px;
-    border-radius: 9px;
-    font-size: 7px;
+    border-radius: 4px;
+    font-size: 8px;
     transform: none;
   }
 
   .modelSourceIcon {
-    width: 18px;
-    height: 18px;
+    width: 22px;
+    height: 22px;
   }
 
   .modelSourceIcon img {
@@ -2410,56 +2449,76 @@
     height: 16px;
   }
 
-  .modelOutputLabel {
-    top: 22px;
+  .responseLegend {
+    top: 18px;
     bottom: auto;
-    left: 22px;
+    left: 50%;
+    width: max-content;
+    max-width: calc(100% - 24px);
+    justify-content: center;
+    transform: translateX(-50%);
+  }
+
+  .responseLegendItem {
+    font-size: 11px;
+  }
+
+  .responseLegendItem > i {
+    width: 9px;
+    height: 9px;
   }
 
   .responseGatewayNode {
-    top: 33.9%;
-    left: 17%;
-    width: 66%;
+    top: 34%;
+    left: 18%;
+    width: 64%;
     min-width: 0;
-    height: 24.5%;
+    height: 22%;
     min-height: 0;
     border-radius: 16px;
   }
 
   .renderedInterface {
-    top: 61%;
+    top: 62%;
     left: 8%;
     width: 84%;
-    height: 43%;
+    height: 38%;
     border-radius: 18px;
   }
 
   .responseFlowHeroOpen .renderedInterface {
-    top: 61%;
+    top: 62%;
     left: 8%;
     width: 84%;
   }
 }
 
 @media (max-width: 767px) {
-  .modelOutputLabel {
-    top: 16px;
+  .responseLegend {
+    top: 18px;
     bottom: auto;
-    left: 12px;
+    left: 50%;
+    gap: 6px 10px;
+    max-width: calc(100% - 24px);
     padding: 6px 8px;
-    border-radius: 7px;
+    border-radius: 4px;
   }
 
-  .modelOutputLabel span {
-    font-size: 7px;
+  .responseLegendItem {
+    font-size: 10px;
+  }
+
+  .responseLegendItem > i {
+    width: 8px;
+    height: 8px;
   }
 
   .responseGatewayNode {
-    top: 33.9%;
-    left: 14%;
-    width: 72%;
+    top: 34%;
+    left: 18%;
+    width: 64%;
     min-width: 0;
-    height: 24.5%;
+    height: 22%;
     min-height: 0;
     gap: 2px;
     padding: 4px;
@@ -2532,15 +2591,15 @@
   }
 
   .renderedInterface {
-    top: 61%;
+    top: 62%;
     left: 6%;
     width: 88%;
-    height: 43%;
+    height: 38%;
     border-radius: 12px;
   }
 
   .responseFlowHeroOpen .renderedInterface {
-    top: 61%;
+    top: 62%;
     left: 6%;
     width: 88%;
   }
diff --git a/docs/app/(home)/sections/ProductIllustrations/ProductIllustrations.tsx b/docs/app/(home)/sections/ProductIllustrations/ProductIllustrations.tsx
index 25042ff43..b450cf33c 100644
--- a/docs/app/(home)/sections/ProductIllustrations/ProductIllustrations.tsx
+++ b/docs/app/(home)/sections/ProductIllustrations/ProductIllustrations.tsx
@@ -41,40 +41,40 @@ type ResponseTone = "valid" | "root" | "reference" | "type";
 
 const responseLanes = [
   {
-    path: "M 22 96 H 164 C 196 96 204 106 220 128 S 248 160 276 160 H 296 C 322 160 324 190 344 204 S 388 218 405 222",
+    path: "M 96 96 H 164 C 196 96 204 106 220 128 S 248 160 276 160 H 296 C 322 160 324 190 344 204 S 388 218 405 222",
   },
   {
-    path: "M 22 176 H 170 C 204 176 210 188 228 206 S 256 226 284 226 H 304 C 330 226 348 238 405 242",
+    path: "M 111 176 H 170 C 204 176 210 188 228 206 S 256 226 284 226 H 304 C 330 226 348 238 405 242",
   },
-  { path: "M 22 260 H 188 C 222 260 230 244 256 244 H 286 C 312 244 338 260 405 260" },
+  { path: "M 97 260 H 188 C 222 260 230 244 256 244 H 286 C 312 244 338 260 405 260" },
   {
-    path: "M 22 344 H 170 C 204 344 210 332 228 314 S 256 294 284 294 H 304 C 330 294 348 282 405 280",
+    path: "M 83 344 H 170 C 204 344 210 332 228 314 S 256 294 284 294 H 304 C 330 294 348 282 405 280",
   },
   {
-    path: "M 22 424 H 164 C 196 424 204 414 220 392 S 248 360 276 360 H 296 C 322 360 324 330 344 316 S 388 302 405 300",
+    path: "M 75 424 H 164 C 196 424 204 414 220 392 S 248 360 276 360 H 296 C 322 360 324 330 344 316 S 388 302 405 300",
   },
 ] as const;
 
 const openResponseLanes = [
   {
-    path: "M 22 58 H 174 C 204 58 210 84 228 112 S 258 154 286 154 H 304 C 330 154 344 202 405 222",
+    path: "M 96 58 H 174 C 204 58 210 84 228 112 S 258 154 286 154 H 304 C 330 154 344 202 405 222",
   },
   {
-    path: "M 22 159 H 174 C 206 159 214 178 232 198 S 260 224 288 224 H 306 C 332 224 350 238 405 242",
+    path: "M 111 159 H 174 C 206 159 214 178 232 198 S 260 224 288 224 H 306 C 332 224 350 238 405 242",
   },
-  { path: "M 22 260 H 190 C 224 260 230 244 256 244 H 286 C 312 244 338 260 405 260" },
+  { path: "M 97 260 H 190 C 224 260 230 244 256 244 H 286 C 312 244 338 260 405 260" },
   {
-    path: "M 22 361 H 174 C 206 361 214 342 232 322 S 260 296 288 296 H 306 C 332 296 350 282 405 280",
+    path: "M 83 361 H 174 C 206 361 214 342 232 322 S 260 296 288 296 H 306 C 332 296 350 282 405 280",
   },
   {
-    path: "M 22 462 H 174 C 204 462 210 436 228 408 S 258 366 286 366 H 304 C 330 366 344 318 405 300",
+    path: "M 75 462 H 174 C 204 462 210 436 228 408 S 258 366 286 366 H 304 C 330 366 344 318 405 300",
   },
 ] as const;
 
 const validatedLanes = [
-  { path: "M 656 236 H 690 C 724 236 724 186 758 186 H 1120" },
-  { path: "M 656 260 H 706 C 730 260 736 260 758 260 H 1120" },
-  { path: "M 656 284 H 690 C 724 284 724 334 758 334 H 1120" },
+  { path: "M 616 236 H 690 C 724 236 724 186 758 186 H 1120" },
+  { path: "M 616 260 H 706 C 730 260 736 260 758 260 H 1120" },
+  { path: "M 616 284 H 690 C 724 284 724 334 758 334 H 1120" },
 ] as const;
 
 const responseModels = [
@@ -86,17 +86,17 @@ const responseModels = [
 ] as const;
 
 const mobileResponseLanes = [
-  { path: "M 42 -24 V 34 C 42 74 76 76 76 112 C 76 150 116 160 154 210" },
-  { path: "M 116 -24 V 54 C 116 88 142 96 142 128 C 142 164 166 176 176 210" },
-  { path: "M 195 -24 V 210" },
-  { path: "M 274 -24 V 54 C 274 88 248 96 248 128 C 248 164 224 176 214 210" },
-  { path: "M 348 -24 V 34 C 348 74 314 76 314 112 C 314 150 274 160 236 210" },
+  { path: "M 42 130 V 150 C 42 180 76 184 76 208 C 76 228 116 236 154 248" },
+  { path: "M 116 130 V 165 C 116 192 142 198 142 220 C 142 234 166 240 176 248" },
+  { path: "M 195 130 V 248" },
+  { path: "M 274 130 V 165 C 274 192 248 198 248 220 C 248 234 224 240 214 248" },
+  { path: "M 348 130 V 150 C 348 180 314 184 314 208 C 314 228 274 236 236 248" },
 ] as const;
 
 const mobileValidatedLanes = [
-  { path: "M 160 362 V 382 C 160 404 128 406 128 434 V 640" },
-  { path: "M 195 362 V 640" },
-  { path: "M 230 362 V 382 C 230 404 262 406 262 434 V 640" },
+  { path: "M 160 397 V 420 C 160 442 128 444 128 468 V 720" },
+  { path: "M 195 397 V 720" },
+  { path: "M 230 397 V 420 C 230 442 262 444 262 468 V 720" },
 ] as const;
 
 const incomingResponses: Array<{ lane: number; delay: number; tone: ResponseTone }> = [
@@ -149,8 +149,23 @@ function GatewayReliabilityFlow({ openCanvas = false }: { openCanvas?: boolean }
         ))}
       </div>
 
-      <div className={styles.modelOutputLabel} aria-hidden="true">
-        <span>Each marker is one response</span>
+      <div className={styles.responseLegend} aria-hidden="true">
+        <span className={styles.responseLegendItem} data-tone="valid">
+          <i />
+          <span>Valid</span>
+        </span>
+        <span className={styles.responseLegendItem} data-tone="root">
+          <i />
+          <span>No valid root</span>
+        </span>
+        <span className={styles.responseLegendItem} data-tone="reference">
+          <i />
+          <span>Reference</span>
+        </span>
+        <span className={styles.responseLegendItem} data-tone="type">
+          <i />
+          <span>Type / argument</span>
+        </span>
       </div>
 
       <div className={styles.responseGatewayNode} aria-hidden="true">
@@ -218,7 +233,7 @@ function ResponsePaths({
       className={`${styles.gatewayPaths} ${
         mobile ? styles.gatewayPathsMobile : styles.gatewayPathsDesktop
       }`}
-      viewBox={mobile ? "0 0 390 620" : "0 0 1280 520"}
+      viewBox={mobile ? "0 0 390 720" : "0 0 1280 520"}
       preserveAspectRatio="none"
       aria-hidden="true"
     >
diff --git a/docs/components/button.module.css b/docs/components/button.module.css
index 93b13ad38..14078551e 100644
--- a/docs/components/button.module.css
+++ b/docs/components/button.module.css
@@ -5,6 +5,11 @@
   height: auto !important;
   padding: 0 !important;
   background: transparent !important;
+  transition: color 160ms ease;
+}
+
+.tertiary:hover {
+  color: var(--openui-text-neutral-secondary) !important;
 }
 
 .tertiary:hover,
diff --git a/docs/components/button.tsx b/docs/components/button.tsx
index eb1644933..28f191c40 100644
--- a/docs/components/button.tsx
+++ b/docs/components/button.tsx
@@ -7,9 +7,16 @@ interface ButtonProps {
   text: string;
   size?: "lg";
   variant?: "primary" | "secondary" | "tertiary";
+  external?: boolean;
 }
 
-export function Button({ href, text, size = "lg", variant = "primary" }: ButtonProps) {
+export function Button({
+  href,
+  text,
+  size = "lg",
+  variant = "primary",
+  external = false,
+}: ButtonProps) {
   const sizeClasses = size === "lg" ? "openui-button-base-large" : "";
   const variantClasses = {
     primary: "openui-button-base-primary",
@@ -20,6 +27,8 @@ export function Button({ href, text, size = "lg", variant = "primary" }: ButtonP
   return (
     <Link
       href={href}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noopener noreferrer" : undefined}
       className={`openui-button-base no-underline ${sizeClasses} ${variantClasses} ${
         variant === "tertiary" ? styles.tertiary : ""
       }`}
diff --git a/docs/public/images/gateway/usage-dark.webp b/docs/public/images/gateway/usage-dark.webp
index 3d5052177..a3b72b4f5 100644
Binary files a/docs/public/images/gateway/usage-dark.webp and b/docs/public/images/gateway/usage-dark.webp differ
diff --git a/docs/public/images/gateway/usage-light.webp b/docs/public/images/gateway/usage-light.webp
index 9d1c2df80..a4517ed8b 100644
Binary files a/docs/public/images/gateway/usage-light.webp and b/docs/public/images/gateway/usage-light.webp differ