From 7856550ea6712d6b69037154d12c2bde523f7570 Mon Sep 17 00:00:00 2001
From: Henrique Breim <henrique@breim.com.br>
Date: Sun, 19 Apr 2026 02:29:28 +0200
Subject: [PATCH 1/6] fix(relay): keep mobile nav on single line and drop
 register cta

---
 packages/relay/src/views/nav.tsx          |  3 -
 packages/relay/src/views/shared-styles.ts | 69 ++---------------------
 2 files changed, 4 insertions(+), 68 deletions(-)

diff --git a/packages/relay/src/views/nav.tsx b/packages/relay/src/views/nav.tsx
index 6bbc54c..cb2a0b1 100644
--- a/packages/relay/src/views/nav.tsx
+++ b/packages/relay/src/views/nav.tsx
@@ -18,9 +18,6 @@ export const Nav = ({ current }: NavProps) => (
           Dashboard
         </a>
       </div>
-      <a href="/#register" class="nav-cta">
-        Register now
-      </a>
     </div>
   </nav>
 )
diff --git a/packages/relay/src/views/shared-styles.ts b/packages/relay/src/views/shared-styles.ts
index c9d82ca..5edae1b 100644
--- a/packages/relay/src/views/shared-styles.ts
+++ b/packages/relay/src/views/shared-styles.ts
@@ -161,78 +161,25 @@ export const sharedStyles = /* css */ `
     font-weight: 500;
   }
 
-  .nav-cta {
-    display: inline-flex;
-    align-items: center;
-    margin-left: auto;
-    padding: var(--space-sm) var(--space-md);
-    background: var(--accent);
-    color: var(--bg);
-    border-radius: var(--radius);
-    font-size: 0.875rem;
-    font-weight: 500;
-    transition:
-      background-color 150ms,
-      transform 80ms;
-  }
-  .nav-cta:hover {
-    background: var(--accent-deep);
-    text-decoration: none;
-  }
-  .nav-cta:active {
-    transform: scale(0.97);
-  }
-
   @media (min-width: 768px) {
     .nav-links {
       gap: var(--space-lg);
       font-size: 0.875rem;
     }
-    .nav-cta {
-      margin-left: 0;
-    }
   }
 
-  @media (max-width: 480px) {
-    .nav {
-      height: auto;
-    }
+  @media (max-width: 767px) {
     .nav-inner {
-      flex-wrap: wrap;
-      padding-top: 10px;
-      padding-bottom: 6px;
-      column-gap: var(--space-sm);
-      row-gap: var(--space-xs);
-    }
-    .nav-cta {
-      margin-left: auto;
-      padding: 6px 12px;
-      font-size: 0.8125rem;
+      gap: var(--space-md);
     }
     .nav-links {
-      order: 3;
-      width: 100%;
-      margin: 0;
-      gap: var(--space-lg);
+      gap: var(--space-md);
       font-size: 0.75rem;
+      min-width: 0;
       overflow-x: auto;
       scrollbar-width: none;
       -webkit-overflow-scrolling: touch;
       scroll-snap-type: x proximity;
-      -webkit-mask-image: linear-gradient(
-        to right,
-        transparent,
-        black 12px,
-        black calc(100% - 12px),
-        transparent
-      );
-      mask-image: linear-gradient(
-        to right,
-        transparent,
-        black 12px,
-        black calc(100% - 12px),
-        transparent
-      );
     }
     .nav-links::-webkit-scrollbar {
       display: none;
@@ -244,20 +191,12 @@ export const sharedStyles = /* css */ `
     }
   }
 
-  /* Very narrow phones — tighten CTA further so it doesn't crowd the brand. */
-  @media (max-width: 360px) {
-    .nav-cta {
-      padding: 6px 10px;
-    }
-  }
-
   /* ══════════════════════════════════════════
      TOUCH TARGETS — enforce 44px on coarse pointers
      Matches Apple HIG / Material. Desktop mouse users
      keep the denser default.
      ══════════════════════════════════════════ */
   @media (pointer: coarse) {
-    .nav-cta,
     .nav-links a,
     .btn-primary,
     .btn-outline,

From 4ffeff41c084476555a2c0f8a83016a40774009e Mon Sep 17 00:00:00 2001
From: Henrique Breim <henrique@breim.com.br>
Date: Sun, 19 Apr 2026 03:18:39 +0200
Subject: [PATCH 2/6] feat(relay): add testnet banner on landing and dashboard

---
 packages/relay/src/views/dashboard/page.tsx |  2 ++
 packages/relay/src/views/landing/page.tsx   |  2 ++
 packages/relay/src/views/shared-styles.ts   | 27 +++++++++++++++++++++
 packages/relay/src/views/testnet-banner.tsx |  8 ++++++
 4 files changed, 39 insertions(+)
 create mode 100644 packages/relay/src/views/testnet-banner.tsx

diff --git a/packages/relay/src/views/dashboard/page.tsx b/packages/relay/src/views/dashboard/page.tsx
index 74c9042..8d7711a 100644
--- a/packages/relay/src/views/dashboard/page.tsx
+++ b/packages/relay/src/views/dashboard/page.tsx
@@ -1,5 +1,6 @@
 import { Layout } from '../layout'
 import { Nav } from '../nav'
+import { TestnetBanner } from '../testnet-banner'
 import { dashboardStyles } from './styles'
 import { dashboardClientScript } from './client-script'
 import { CHAINS, EXPLORERS } from './config'
@@ -15,6 +16,7 @@ export const DashboardPage = () => (
     description="Live activity for the 402md facilitator: chains, cross-chain routes, resources, sellers, transactions."
     extraStyles={dashboardStyles}
   >
+    <TestnetBanner />
     <Nav current="dashboard" />
 
     <main class="dashboard container">
diff --git a/packages/relay/src/views/landing/page.tsx b/packages/relay/src/views/landing/page.tsx
index d0c4432..2862ebf 100644
--- a/packages/relay/src/views/landing/page.tsx
+++ b/packages/relay/src/views/landing/page.tsx
@@ -1,6 +1,7 @@
 import { resolveNetworkEnv } from '@402md/shared/networks'
 import { Layout } from '../layout'
 import { Nav } from '../nav'
+import { TestnetBanner } from '../testnet-banner'
 import landingContent from './content.html' with { type: 'text' }
 import landingStyles from './styles.css' with { type: 'text' }
 import landingScript from './script.txt' with { type: 'text' }
@@ -24,6 +25,7 @@ export const LandingPage = () => (
     description="Accept USDC payments from any chain. Buyer pays on Solana, seller receives on Stellar. One HTTP request, zero custom code, 0% fee."
     extraStyles={landingStyles}
   >
+    <TestnetBanner />
     <Nav />
     {lockEnvToggle(landingContent, resolveNetworkEnv())}
     <script>{landingScript}</script>
diff --git a/packages/relay/src/views/shared-styles.ts b/packages/relay/src/views/shared-styles.ts
index 5edae1b..384966b 100644
--- a/packages/relay/src/views/shared-styles.ts
+++ b/packages/relay/src/views/shared-styles.ts
@@ -98,6 +98,33 @@ export const sharedStyles = /* css */ `
     padding: 0 clamp(1rem, 5vw, 2.5rem);
   }
 
+  /* ══════════════════════════════════════════
+     TESTNET BANNER — solid amber strip pinned above the nav
+     ══════════════════════════════════════════ */
+  .testnet-banner {
+    background: var(--warn);
+    color: #000;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-align: center;
+    padding: 8px 16px;
+  }
+  .testnet-banner-cta {
+    color: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    white-space: nowrap;
+  }
+  .testnet-banner-cta:hover {
+    text-decoration: none;
+  }
+  @media (min-width: 640px) {
+    .testnet-banner {
+      font-size: 0.875rem;
+    }
+  }
+
   /* ══════════════════════════════════════════
      NAV — canonical source, used by every page
      ══════════════════════════════════════════ */
diff --git a/packages/relay/src/views/testnet-banner.tsx b/packages/relay/src/views/testnet-banner.tsx
new file mode 100644
index 0000000..3c338cf
--- /dev/null
+++ b/packages/relay/src/views/testnet-banner.tsx
@@ -0,0 +1,8 @@
+export const TestnetBanner = () => (
+  <div class="testnet-banner" role="status">
+    Running on testnet only —{' '}
+    <a class="testnet-banner-cta" href="https://402.md" target="_blank" rel="noopener">
+      help us launch on mainnet &rarr;
+    </a>
+  </div>
+)

From 4d8ef82777f01249acbf30aee7838e31035f95f6 Mon Sep 17 00:00:00 2001
From: Henrique Breim <henrique@breim.com.br>
Date: Sun, 19 Apr 2026 03:18:46 +0200
Subject: [PATCH 3/6] fix(relay): improve dashboard readability on mobile

---
 .../src/views/dashboard/client-script.ts      |  4 ++--
 .../relay/src/views/dashboard/components.tsx  |  2 +-
 packages/relay/src/views/dashboard/config.ts  | 19 ++++++++++---------
 packages/relay/src/views/dashboard/styles.ts  | 13 ++++++++++++-
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/relay/src/views/dashboard/client-script.ts b/packages/relay/src/views/dashboard/client-script.ts
index 97f26c8..4eb72ef 100644
--- a/packages/relay/src/views/dashboard/client-script.ts
+++ b/packages/relay/src/views/dashboard/client-script.ts
@@ -124,11 +124,11 @@ export const dashboardClientScript = /* js */ `
       }
 
       let html = '<table class="matrix"><thead><tr><th class="corner" scope="col"></th>'
-      for (const c of CHAINS) html += '<th scope="col">' + c.label + '</th>'
+      for (const c of CHAINS) html += '<th scope="col" title="' + c.label + '">' + c.symbol + '</th>'
       html += '</tr></thead><tbody>'
 
       for (const row of CHAINS) {
-        html += '<tr><th scope="row">' + row.label + '</th>'
+        html += '<tr><th scope="row" title="' + row.label + '">' + row.symbol + '</th>'
         for (const col of CHAINS) {
           const r = lookup.get(row.caip2 + '|' + col.caip2)
           const sameChain = row.caip2 === col.caip2
diff --git a/packages/relay/src/views/dashboard/components.tsx b/packages/relay/src/views/dashboard/components.tsx
index fb81792..0c9487a 100644
--- a/packages/relay/src/views/dashboard/components.tsx
+++ b/packages/relay/src/views/dashboard/components.tsx
@@ -87,7 +87,7 @@ interface LoadingSlotProps {
 
 // Reserved container that the client script hydrates on first poll.
 export const LoadingSlot = ({ id, message = 'Loading…' }: LoadingSlotProps) => (
-  <div id={id}>
+  <div id={id} class="slot">
     <p class="loading">{message}</p>
   </div>
 )
diff --git a/packages/relay/src/views/dashboard/config.ts b/packages/relay/src/views/dashboard/config.ts
index 2668334..4f7448d 100644
--- a/packages/relay/src/views/dashboard/config.ts
+++ b/packages/relay/src/views/dashboard/config.ts
@@ -2,20 +2,21 @@ export interface ChainConfig {
   slug: string
   caip2: string
   label: string
+  symbol: string
 }
 
 // Ordered alphabetically on purpose — the per-chain grid renders with equal
 // visual weight regardless of volume.
 export const CHAINS: ChainConfig[] = [
-  { slug: 'arbitrum', caip2: 'eip155:42161', label: 'Arbitrum' },
-  { slug: 'base', caip2: 'eip155:8453', label: 'Base' },
-  { slug: 'ethereum', caip2: 'eip155:1', label: 'Ethereum' },
-  { slug: 'linea', caip2: 'eip155:59144', label: 'Linea' },
-  { slug: 'optimism', caip2: 'eip155:10', label: 'Optimism' },
-  { slug: 'solana', caip2: 'solana:mainnet', label: 'Solana' },
-  { slug: 'stellar', caip2: 'stellar:pubnet', label: 'Stellar' },
-  { slug: 'unichain', caip2: 'eip155:130', label: 'Unichain' },
-  { slug: 'worldchain', caip2: 'eip155:480', label: 'World Chain' },
+  { slug: 'arbitrum', caip2: 'eip155:42161', label: 'Arbitrum', symbol: 'ARB' },
+  { slug: 'base', caip2: 'eip155:8453', label: 'Base', symbol: 'BASE' },
+  { slug: 'ethereum', caip2: 'eip155:1', label: 'Ethereum', symbol: 'ETH' },
+  { slug: 'linea', caip2: 'eip155:59144', label: 'Linea', symbol: 'LIN' },
+  { slug: 'optimism', caip2: 'eip155:10', label: 'Optimism', symbol: 'OP' },
+  { slug: 'solana', caip2: 'solana:mainnet', label: 'Solana', symbol: 'SOL' },
+  { slug: 'stellar', caip2: 'stellar:pubnet', label: 'Stellar', symbol: 'XLM' },
+  { slug: 'unichain', caip2: 'eip155:130', label: 'Unichain', symbol: 'UNI' },
+  { slug: 'worldchain', caip2: 'eip155:480', label: 'World Chain', symbol: 'WLD' },
 ]
 
 export const EXPLORERS: Record<string, string> = {
diff --git a/packages/relay/src/views/dashboard/styles.ts b/packages/relay/src/views/dashboard/styles.ts
index 928f2e9..db28f22 100644
--- a/packages/relay/src/views/dashboard/styles.ts
+++ b/packages/relay/src/views/dashboard/styles.ts
@@ -2,6 +2,16 @@ export const dashboardStyles = /* css */ `
   main.dashboard {
     padding-top: var(--space-xl);
     padding-bottom: var(--space-2xl);
+    min-width: 0;
+  }
+
+  /* Reserved slots hydrated by the client script. Wrap their content so tables
+     or panels that exceed the viewport scroll inside the slot instead of pushing
+     the whole page. */
+  .slot {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    max-width: 100%;
   }
 
   /* ── Section rhythm ──
@@ -428,7 +438,8 @@ export const dashboardStyles = /* css */ `
     .snapshot {
       grid-template-columns: 1fr;
     }
-    .stat {
+    .stat,
+    .stat + .stat {
       padding: var(--space-md) 0;
       border-right: 0;
       border-bottom: 1px solid var(--border);

From ba726d49e18a799dd8d0ab7aa8a21312346db074 Mon Sep 17 00:00:00 2001
From: Henrique Breim <henrique@breim.com.br>
Date: Sun, 19 Apr 2026 03:18:52 +0200
Subject: [PATCH 4/6] =?UTF-8?q?refactor(relay):=20restructure=20landing=20?=
 =?UTF-8?q?=E2=80=94=20drop=20code=20block,=20surface=20register=20cta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/relay/src/views/landing/content.html | 378 ++++++++----------
 packages/relay/src/views/landing/script.txt   |  42 --
 packages/relay/src/views/landing/styles.css   | 136 +------
 3 files changed, 169 insertions(+), 387 deletions(-)

diff --git a/packages/relay/src/views/landing/content.html b/packages/relay/src/views/landing/content.html
index a4a206d..b5c590b 100644
--- a/packages/relay/src/views/landing/content.html
+++ b/packages/relay/src/views/landing/content.html
@@ -22,47 +22,6 @@ <h1 data-reveal style="--i: 0">
     </div>
   </section>
 
-  <!-- ── Code ── -->
-  <section class="code-section reveal">
-    <div class="container">
-      <div class="section-label">Getting Started</div>
-      <div class="code-block">
-        <div class="code-header">
-          <div class="code-dots" aria-hidden="true">
-            <span class="code-dot-red"></span><span class="code-dot-yellow"></span
-            ><span class="code-dot-green"></span>
-          </div>
-          <span class="code-label">terminal</span>
-        </div>
-        <pre class="code-body"><span class="cm"># 1. Register your wallet (one-time)</span>
-<span class="fn">curl</span> -X POST https://facilitator.402.md/register \
-  -H <span class="st">"Content-Type: application/json"</span> \
-  -d <span class="st">'{"wallet": "GSELLER...", "network": "stellar:pubnet"}'</span>
-
-<span class="cm"># 2. Use standard @x402/express — zero 402md code</span>
-<span class="kw">import</span> { paymentMiddleware } <span class="kw">from</span> <span class="st">"@x402/express"</span>
-
-app.use(paymentMiddleware({
-  <span class="st">"GET /your-endpoint"</span>: {
-    accepts: [
-      { scheme: <span class="st">"exact"</span>, network: <span class="st">"eip155:8453"</span>,    payTo: <span class="st">"0x4C95...c3b9"</span>, price: <span class="st">"$0.001"</span>, extra: { merchantId: <span class="st">"7c-vQZHANEd5ICp"</span> } }, <span class="cm">// Base</span>
-      { scheme: <span class="st">"exact"</span>, network: <span class="st">"eip155:1"</span>,       payTo: <span class="st">"0x8aF2...71d4"</span>, price: <span class="st">"$0.001"</span>, extra: { merchantId: <span class="st">"7c-vQZHANEd5ICp"</span> } }, <span class="cm">// Ethereum</span>
-      { scheme: <span class="st">"exact"</span>, network: <span class="st">"eip155:10"</span>,      payTo: <span class="st">"0x2E19...a0b7"</span>, price: <span class="st">"$0.001"</span>, extra: { merchantId: <span class="st">"7c-vQZHANEd5ICp"</span> } }, <span class="cm">// Optimism</span>
-      { scheme: <span class="st">"exact"</span>, network: <span class="st">"eip155:42161"</span>,   payTo: <span class="st">"0xF1c3...9e82"</span>, price: <span class="st">"$0.001"</span>, extra: { merchantId: <span class="st">"7c-vQZHANEd5ICp"</span> } }, <span class="cm">// Arbitrum</span>
-      { scheme: <span class="st">"exact"</span>, network: <span class="st">"eip155:59144"</span>,   payTo: <span class="st">"0x7b45...d60a"</span>, price: <span class="st">"$0.001"</span>, extra: { merchantId: <span class="st">"7c-vQZHANEd5ICp"</span> } }, <span class="cm">// Linea</span>
-      { scheme: <span class="st">"exact"</span>, network: <span class="st">"eip155:130"</span>,     payTo: <span class="st">"0xD309...4cf1"</span>, price: <span class="st">"$0.001"</span>, extra: { merchantId: <span class="st">"7c-vQZHANEd5ICp"</span> } }, <span class="cm">// Unichain</span>
-      { scheme: <span class="st">"exact"</span>, network: <span class="st">"eip155:480"</span>,     payTo: <span class="st">"0x5a6e...bb28"</span>, price: <span class="st">"$0.001"</span>, extra: { merchantId: <span class="st">"7c-vQZHANEd5ICp"</span> } }, <span class="cm">// World Chain</span>
-      { scheme: <span class="st">"exact"</span>, network: <span class="st">"solana:mainnet"</span>, payTo: <span class="st">"4r7q...BDP5"</span>, price: <span class="st">"$0.001"</span>, extra: { merchantId: <span class="st">"7c-vQZHANEd5ICp"</span> } }, <span class="cm">// Solana</span>
-      { scheme: <span class="st">"exact"</span>, network: <span class="st">"stellar:pubnet"</span>, payTo: <span class="st">"GAX5...5HZR"</span>, price: <span class="st">"$0.001"</span>, extra: { merchantId: <span class="st">"7c-vQZHANEd5ICp"</span> } }, <span class="cm">// Stellar</span>
-    ],
-  },
-}, <span class="st">"https://facilitator.402.md"</span>))
-
-<span class="cm"># Buyers on any of the 9 supported chains can now pay you.</span></pre>
-      </div>
-    </div>
-  </section>
-
   <!-- ── Problem ── -->
   <section class="reveal">
     <div class="container">
@@ -119,19 +78,21 @@ <h2>Three steps. <em>That's it.</em></h2>
               <div>
                 <h3>Register your wallet</h3>
                 <p>
-                  <span class="pill">POST /register</span> with your address and chain. Get
-                  facilitator addresses on all supported chains.
+                  <span class="pill">POST /register</span> with your destination wallet. Get back
+                  a facilitator address on every supported chain, plus a
+                  <span class="pill">merchantId</span> that ties them all back to you.
                 </p>
               </div>
             </div>
             <div class="flow-step">
               <span class="flow-num">02</span>
               <div>
-                <h3>Use standard x402</h3>
+                <h3>Paste into your x402 config</h3>
                 <p>
-                  Add <span class="pill">@x402/express</span> middleware. Point
-                  <span class="pill">payTo</span> to your facilitator address. Zero 402md
-                  dependencies.
+                  Add one <span class="pill">accepts</span> entry per chain — each with its
+                  facilitator <span class="pill">payTo</span> and your
+                  <span class="pill">merchantId</span>. Works with any x402 server library; no
+                  402md SDK.
                 </p>
               </div>
             </div>
@@ -140,8 +101,8 @@ <h3>Use standard x402</h3>
               <div>
                 <h3>Receive USDC on your chain</h3>
                 <p>
-                  Buyer pays on any chain. 402md settles via CCTP V2. Native USDC, directly to your
-                  wallet.
+                  Buyer pays on whichever chain they hold USDC on. 402md settles via CCTP V2 —
+                  native USDC, minted directly into your registered wallet.
                 </p>
               </div>
             </div>
@@ -189,6 +150,161 @@ <h3>Get the resource</h3>
     </div>
   </section>
 
+  <!-- ── CTA / Register ── -->
+  <section id="register" class="cta-section reveal">
+    <div class="container">
+      <div class="section-label">Get Started</div>
+      <h2>One curl. <em>All chains.</em></h2>
+      <p class="section-lead">
+        Register your wallet and start accepting cross-chain USDC in under a minute. No dashboard,
+        no login, no SDK.
+      </p>
+
+      <div class="register-form">
+        <form id="register-form">
+          <fieldset>
+            <label class="register-label">Environment</label>
+            <div class="network-options" role="radiogroup" aria-label="Environment">
+              <input
+                type="radio"
+                name="env-toggle"
+                id="env-mainnet"
+                value="mainnet"
+                class="network-radio"
+                checked
+              />
+              <label for="env-mainnet" class="network-label">Mainnet</label>
+              <input
+                type="radio"
+                name="env-toggle"
+                id="env-testnet"
+                value="testnet"
+                class="network-radio"
+              />
+              <label for="env-testnet" class="network-label">Testnet</label>
+            </div>
+
+            <label class="register-label" id="network-group-label">Receive USDC on</label>
+            <div class="network-options" role="radiogroup" aria-labelledby="network-group-label">
+              <input
+                type="radio"
+                name="network"
+                id="net-base"
+                value="base"
+                class="network-radio"
+                checked
+              />
+              <label for="net-base" class="network-label">Base</label>
+
+              <input
+                type="radio"
+                name="network"
+                id="net-ethereum"
+                value="ethereum"
+                class="network-radio"
+              />
+              <label for="net-ethereum" class="network-label">Ethereum</label>
+
+              <input
+                type="radio"
+                name="network"
+                id="net-optimism"
+                value="optimism"
+                class="network-radio"
+              />
+              <label for="net-optimism" class="network-label">Optimism</label>
+
+              <input
+                type="radio"
+                name="network"
+                id="net-arbitrum"
+                value="arbitrum"
+                class="network-radio"
+              />
+              <label for="net-arbitrum" class="network-label">Arbitrum</label>
+
+              <input
+                type="radio"
+                name="network"
+                id="net-linea"
+                value="linea"
+                class="network-radio"
+              />
+              <label for="net-linea" class="network-label">Linea</label>
+
+              <input
+                type="radio"
+                name="network"
+                id="net-unichain"
+                value="unichain"
+                class="network-radio"
+              />
+              <label for="net-unichain" class="network-label">Unichain</label>
+
+              <input
+                type="radio"
+                name="network"
+                id="net-worldchain"
+                value="worldchain"
+                class="network-radio"
+              />
+              <label for="net-worldchain" class="network-label">World Chain</label>
+
+              <input
+                type="radio"
+                name="network"
+                id="net-solana"
+                value="solana"
+                class="network-radio"
+              />
+              <label for="net-solana" class="network-label">Solana</label>
+
+              <input
+                type="radio"
+                name="network"
+                id="net-stellar"
+                value="stellar"
+                class="network-radio"
+              />
+              <label for="net-stellar" class="network-label">Stellar</label>
+            </div>
+
+            <label class="register-label" for="wallet-input">Wallet address</label>
+            <input
+              type="text"
+              id="wallet-input"
+              name="wallet"
+              class="wallet-input"
+              placeholder="0xd8dA6BF2...aA96045"
+              required
+              minlength="10"
+              autocomplete="off"
+              spellcheck="false"
+              aria-describedby="wallet-hint"
+            />
+            <p id="wallet-hint" class="wallet-hint">0x followed by 40 hex characters</p>
+
+            <div class="register-actions">
+              <button type="submit" class="register-btn" aria-describedby="register-status">
+                Register
+              </button>
+              <a
+                href="https://facilitator.402.md/swagger"
+                class="register-swagger"
+                target="_blank"
+                rel="noopener"
+                >API docs &#8599;</a
+              >
+            </div>
+          </fieldset>
+        </form>
+
+        <span id="register-status" class="sr-only" aria-live="assertive"></span>
+        <div id="register-result" class="register-result" aria-live="polite"></div>
+      </div>
+    </div>
+  </section>
+
   <!-- ── Features ── -->
   <section class="reveal">
     <div class="container">
@@ -348,7 +464,7 @@ <h2>Free. <em>Seriously.</em></h2>
     </div>
   </section>
 
-  <!-- ── FAQ (moved before CTA for better peak-end) ── -->
+  <!-- ── FAQ ── -->
   <section id="faq" class="reveal">
     <div class="container">
       <div class="section-label">FAQ</div>
@@ -436,168 +552,6 @@ <h2>Common questions</h2>
       </div>
     </div>
   </section>
-
-  <!-- ── CTA / Register ── -->
-  <section id="register" class="cta-section reveal">
-    <div class="container">
-      <div class="section-label">Get Started</div>
-      <h2>One curl. <em>All chains.</em></h2>
-      <p class="section-lead">
-        Register your wallet and start accepting cross-chain USDC in under a minute. No dashboard,
-        no login, no SDK.
-      </p>
-
-      <div class="supported-currencies">
-        <span class="currency-label">USDC</span>
-        <span class="chain chain-base">Base</span>
-        <span class="chain chain-solana">Solana</span>
-        <span class="chain chain-stellar">Stellar</span>
-      </div>
-
-      <div class="register-form">
-        <form id="register-form">
-          <fieldset>
-            <label class="register-label">Environment</label>
-            <div class="network-options" role="radiogroup" aria-label="Environment">
-              <input
-                type="radio"
-                name="env-toggle"
-                id="env-mainnet"
-                value="mainnet"
-                class="network-radio"
-                checked
-              />
-              <label for="env-mainnet" class="network-label">Mainnet</label>
-              <input
-                type="radio"
-                name="env-toggle"
-                id="env-testnet"
-                value="testnet"
-                class="network-radio"
-              />
-              <label for="env-testnet" class="network-label">Testnet</label>
-            </div>
-
-            <label class="register-label" id="network-group-label">Receive USDC on</label>
-            <div class="network-options" role="radiogroup" aria-labelledby="network-group-label">
-              <input
-                type="radio"
-                name="network"
-                id="net-base"
-                value="base"
-                class="network-radio"
-                checked
-              />
-              <label for="net-base" class="network-label">Base</label>
-
-              <input
-                type="radio"
-                name="network"
-                id="net-ethereum"
-                value="ethereum"
-                class="network-radio"
-              />
-              <label for="net-ethereum" class="network-label">Ethereum</label>
-
-              <input
-                type="radio"
-                name="network"
-                id="net-optimism"
-                value="optimism"
-                class="network-radio"
-              />
-              <label for="net-optimism" class="network-label">Optimism</label>
-
-              <input
-                type="radio"
-                name="network"
-                id="net-arbitrum"
-                value="arbitrum"
-                class="network-radio"
-              />
-              <label for="net-arbitrum" class="network-label">Arbitrum</label>
-
-              <input
-                type="radio"
-                name="network"
-                id="net-linea"
-                value="linea"
-                class="network-radio"
-              />
-              <label for="net-linea" class="network-label">Linea</label>
-
-              <input
-                type="radio"
-                name="network"
-                id="net-unichain"
-                value="unichain"
-                class="network-radio"
-              />
-              <label for="net-unichain" class="network-label">Unichain</label>
-
-              <input
-                type="radio"
-                name="network"
-                id="net-worldchain"
-                value="worldchain"
-                class="network-radio"
-              />
-              <label for="net-worldchain" class="network-label">World Chain</label>
-
-              <input
-                type="radio"
-                name="network"
-                id="net-solana"
-                value="solana"
-                class="network-radio"
-              />
-              <label for="net-solana" class="network-label">Solana</label>
-
-              <input
-                type="radio"
-                name="network"
-                id="net-stellar"
-                value="stellar"
-                class="network-radio"
-              />
-              <label for="net-stellar" class="network-label">Stellar</label>
-            </div>
-
-            <label class="register-label" for="wallet-input">Wallet address</label>
-            <input
-              type="text"
-              id="wallet-input"
-              name="wallet"
-              class="wallet-input"
-              placeholder="0xd8dA6BF2...aA96045"
-              required
-              minlength="10"
-              autocomplete="off"
-              spellcheck="false"
-              aria-describedby="wallet-hint"
-            />
-            <p id="wallet-hint" class="wallet-hint">0x followed by 40 hex characters</p>
-
-            <div class="register-actions">
-              <button type="submit" class="register-btn" aria-describedby="register-status">
-                Register
-              </button>
-              <a
-                href="https://facilitator.402.md/swagger"
-                class="register-swagger"
-                target="_blank"
-                rel="noopener"
-                >API docs &#8599;</a
-              >
-            </div>
-          </fieldset>
-        </form>
-
-        <span id="register-status" class="sr-only" aria-live="assertive"></span>
-        <div id="register-result" class="register-result" aria-live="polite"></div>
-      </div>
-    </div>
-  </section>
 </main>
 
 <!-- ── Footer ── -->
diff --git a/packages/relay/src/views/landing/script.txt b/packages/relay/src/views/landing/script.txt
index ebd291c..58c43d0 100644
--- a/packages/relay/src/views/landing/script.txt
+++ b/packages/relay/src/views/landing/script.txt
@@ -287,45 +287,3 @@
         }
       })
 
-      /* ── Code typewriter ── */
-      if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-        const codeBody = document.querySelector('.code-section .code-body')
-        if (codeBody) {
-          const fullHTML = codeBody.innerHTML
-          const lines = fullHTML.split('\n')
-          const h = codeBody.offsetHeight
-          codeBody.style.minHeight = h + 'px'
-          codeBody.innerHTML = ''
-
-          const codeObs = new IntersectionObserver(
-            ([e]) => {
-              if (e.isIntersecting) {
-                codeObs.unobserve(e.target)
-                let i = 0
-
-                function typeLine() {
-                  if (i >= lines.length) {
-                    codeBody.insertAdjacentHTML('beforeend', '<span class="code-cursor"></span>')
-                    setTimeout(() => {
-                      const c = codeBody.querySelector('.code-cursor')
-                      if (c) c.remove()
-                    }, 2500)
-                    return
-                  }
-
-                  codeBody.innerHTML = lines.slice(0, i + 1).join('\n')
-                  i++
-
-                  const nextIsBlank = i < lines.length && lines[i].trim() === ''
-                  setTimeout(typeLine, nextIsBlank ? 50 : 100)
-                }
-
-                typeLine()
-              }
-            },
-            { threshold: 0.3 },
-          )
-
-          codeObs.observe(codeBody)
-        }
-      }
diff --git a/packages/relay/src/views/landing/styles.css b/packages/relay/src/views/landing/styles.css
index 22afe6b..67f947e 100644
--- a/packages/relay/src/views/landing/styles.css
+++ b/packages/relay/src/views/landing/styles.css
@@ -131,7 +131,7 @@ section h2 {
        HERO
        ══════════════════════════════════════════ */
 .hero {
-  padding: var(--space-3xl) 0 var(--space-2xl);
+  padding: calc(var(--space-3xl) + var(--space-lg)) 0 var(--space-2xl);
   border-bottom: none;
 }
 
@@ -170,85 +170,6 @@ section h2 {
   flex-wrap: wrap;
 }
 
-/* ══════════════════════════════════════════
-       CODE BLOCK (light theme)
-       ══════════════════════════════════════════ */
-.code-section {
-  padding: var(--space-2xl) 0;
-  border-bottom: none;
-}
-
-.code-block {
-  border: 1px solid var(--border-mid);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  background: var(--bg);
-}
-
-.code-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-md);
-  background: var(--bg-alt);
-  border-bottom: 1px solid var(--border);
-}
-
-.code-dots {
-  display: flex;
-  gap: var(--space-sm);
-}
-
-.code-dots span {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-
-.code-dot-red {
-  background: #ff5f57;
-}
-.code-dot-yellow {
-  background: #febc2e;
-}
-.code-dot-green {
-  background: #28c840;
-}
-
-.code-label {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.6875rem;
-  color: var(--text-2);
-  letter-spacing: 0.02em;
-  margin-left: var(--space-sm);
-}
-
-.code-body {
-  padding: var(--space-lg);
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.8125rem;
-  line-height: 1.75;
-  color: oklch(0.27 0.015 55);
-  overflow-x: auto;
-  font-variant-ligatures: none;
-}
-
-.code-body .cm {
-  color: var(--text-3);
-}
-.code-body .kw {
-  color: oklch(0.4 0.16 265);
-}
-.code-body .st {
-  color: oklch(0.42 0.12 55);
-}
-.code-body .fn {
-  color: oklch(0.42 0.12 320);
-}
-.code-body .op {
-  color: oklch(0.27 0.015 55);
-}
-
 /* ══════════════════════════════════════════
        PROBLEM
        ══════════════════════════════════════════ */
@@ -559,22 +480,6 @@ section h2 {
   padding-bottom: var(--space-4xl);
 }
 
-.supported-currencies {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-xs) var(--space-sm);
-  margin-top: var(--space-lg);
-}
-
-.currency-label {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-2);
-  margin-right: var(--space-xs);
-}
-
 .register-form {
   background: var(--bg);
   border: 1px solid var(--border-mid);
@@ -841,19 +746,6 @@ section h2 {
   color: var(--text);
 }
 
-/* ══════════════════════════════════════════
-       CODE CURSOR
-       ══════════════════════════════════════════ */
-.code-cursor {
-  display: inline-block;
-  width: 2px;
-  height: 1.1em;
-  background: var(--accent);
-  vertical-align: text-bottom;
-  margin-left: 1px;
-  animation: cursor-blink 700ms step-end infinite;
-}
-
 /* ══════════════════════════════════════════
        FOOTER
        ══════════════════════════════════════════ */
@@ -920,16 +812,6 @@ footer {
   }
 }
 
-@keyframes cursor-blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
 /* Hero stagger */
 .hero [data-reveal] {
   opacity: 0;
@@ -1010,10 +892,6 @@ footer {
   .faq-item[open] .faq-answer {
     animation: none;
   }
-  .code-cursor {
-    animation: none;
-    opacity: 0;
-  }
   .register-btn.loading::after {
     animation: none;
     border: 2px solid var(--bg);
@@ -1030,7 +908,7 @@ footer {
   }
 
   .hero {
-    padding: var(--space-4xl) 0 var(--space-3xl);
+    padding: calc(var(--space-4xl) + var(--space-xl)) 0 var(--space-3xl);
   }
 
   .hero-content {
@@ -1061,15 +939,7 @@ footer {
 
 @media (max-width: 480px) {
   .hero h1 {
-    font-size: 2.25rem;
-  }
-  .hero-ctas {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .code-body {
-    font-size: 0.75rem;
-    padding: var(--space-md);
+    font-size: 3.75rem;
   }
   .footer-inner {
     flex-direction: column;

From 9e0a8e821ac233b37d95dcaed0d57c65c776c2e7 Mon Sep 17 00:00:00 2001
From: Henrique Breim <henrique@breim.com.br>
Date: Sun, 19 Apr 2026 03:32:41 +0200
Subject: [PATCH 5/6] fix(relay): polish landing hero spacing and testnet
 banner tokens

---
 packages/relay/src/views/landing/styles.css | 9 +++++----
 packages/relay/src/views/shared-styles.ts   | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/relay/src/views/landing/styles.css b/packages/relay/src/views/landing/styles.css
index 67f947e..bad28f7 100644
--- a/packages/relay/src/views/landing/styles.css
+++ b/packages/relay/src/views/landing/styles.css
@@ -131,7 +131,7 @@ section h2 {
        HERO
        ══════════════════════════════════════════ */
 .hero {
-  padding: calc(var(--space-3xl) + var(--space-lg)) 0 var(--space-2xl);
+  padding: calc(var(--space-3xl) + var(--space-lg)) 0 var(--space-3xl);
   border-bottom: none;
 }
 
@@ -908,7 +908,7 @@ footer {
   }
 
   .hero {
-    padding: calc(var(--space-4xl) + var(--space-xl)) 0 var(--space-3xl);
+    padding: calc(var(--space-4xl) + var(--space-xl)) 0 var(--space-4xl);
   }
 
   .hero-content {
@@ -938,8 +938,9 @@ footer {
 }
 
 @media (max-width: 480px) {
-  .hero h1 {
-    font-size: 3.75rem;
+  .hero-ctas {
+    flex-direction: column;
+    align-items: flex-start;
   }
   .footer-inner {
     flex-direction: column;
diff --git a/packages/relay/src/views/shared-styles.ts b/packages/relay/src/views/shared-styles.ts
index 384966b..1649ae8 100644
--- a/packages/relay/src/views/shared-styles.ts
+++ b/packages/relay/src/views/shared-styles.ts
@@ -103,11 +103,11 @@ export const sharedStyles = /* css */ `
      ══════════════════════════════════════════ */
   .testnet-banner {
     background: var(--warn);
-    color: #000;
+    color: var(--text);
     font-size: 0.75rem;
     font-weight: 500;
     text-align: center;
-    padding: 8px 16px;
+    padding: var(--space-sm) var(--space-md);
   }
   .testnet-banner-cta {
     color: inherit;

From a3294569129ff538ef57cea66d5ca51fc2e3d6c5 Mon Sep 17 00:00:00 2001
From: Henrique Breim <henrique@breim.com.br>
Date: Sun, 19 Apr 2026 04:02:45 +0200
Subject: [PATCH 6/6] style(relay): reflow landing copy line wrapping

---
 packages/relay/src/views/landing/content.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/relay/src/views/landing/content.html b/packages/relay/src/views/landing/content.html
index b5c590b..cf071f1 100644
--- a/packages/relay/src/views/landing/content.html
+++ b/packages/relay/src/views/landing/content.html
@@ -78,8 +78,8 @@ <h2>Three steps. <em>That's it.</em></h2>
               <div>
                 <h3>Register your wallet</h3>
                 <p>
-                  <span class="pill">POST /register</span> with your destination wallet. Get back
-                  a facilitator address on every supported chain, plus a
+                  <span class="pill">POST /register</span> with your destination wallet. Get back a
+                  facilitator address on every supported chain, plus a
                   <span class="pill">merchantId</span> that ties them all back to you.
                 </p>
               </div>
@@ -91,8 +91,8 @@ <h3>Paste into your x402 config</h3>
                 <p>
                   Add one <span class="pill">accepts</span> entry per chain — each with its
                   facilitator <span class="pill">payTo</span> and your
-                  <span class="pill">merchantId</span>. Works with any x402 server library; no
-                  402md SDK.
+                  <span class="pill">merchantId</span>. Works with any x402 server library; no 402md
+                  SDK.
                 </p>
               </div>
             </div>