diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index f88b080..785c1e5 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -677,31 +677,34 @@ mark { color: inherit; background: none; }
 }
 .copy-btn:hover { color: var(--accent); border-color: var(--accent); }
 
-/* Ticker band: the accent, full bleed, one line of facts scrolling. */
+/* Ticker band: the marks of the two protocols Wasit checks and the four
+   chains it reads, each in its own colour on the page's dark, one line
+   scrolling. The protocols' marks carry their names; the chains' are small
+   glyphs, so their names follow them. */
 .ticker {
   overflow: hidden;
-  background: var(--accent);
-  color: var(--on-accent);
-  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--fg);
+  border-block: 1px solid var(--border-strong);
 }
 .ticker-track {
   display: flex;
   width: max-content;
   animation: ticker 38s linear infinite;
 }
-.ticker-group { display: flex; flex: none; }
+.ticker-group { display: flex; flex: none; align-items: center; }
 .ticker-item {
   display: inline-flex;
   align-items: center;
-  gap: 22px;
-  padding: 11px 0 11px 22px;
-  font-family: var(--font-code);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
+  gap: 9px;
+  padding: 13px 0 13px 30px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--muted);
   white-space: nowrap;
 }
-.ticker-square { width: 7px; height: 7px; background: var(--on-accent); }
+.ticker-item svg { display: block; flex: none; fill: currentColor; }
+.ticker-dot { width: 4px; height: 4px; margin-left: 30px; background: var(--dim); flex: none; }
 @keyframes ticker {
   to { transform: translateX(-50%); }
 }
@@ -710,21 +713,11 @@ mark { color: inherit; background: none; }
 }
 
 /* The stack strip under the ticker (components/StackStrip.tsx): a short
-   line, then one cell per project — the two protocols Wasit checks and
-   the chain it trusts — each with its logo in the page's own colour. */
+   line, then the protocols joined by a line to each chain they run on.
+   Two drawings of it; CSS shows the wide one from 1100px. */
 .stack { border-bottom: 1px solid var(--border); }
-.stack-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
-}
-.stack-intro {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 10px;
-  padding: 32px 28px 32px 0;
-  border-right: 1px solid var(--border-strong);
-}
+.stack-fan { display: flex; flex-direction: column; gap: 24px; padding-block: 40px 44px; }
+.stack-intro { display: flex; flex-direction: column; gap: 10px; }
 .stack-kicker {
   display: inline-flex;
   align-items: center;
@@ -737,41 +730,37 @@ mark { color: inherit; background: none; }
 }
 .stack-kicker::before { content: ""; width: 7px; height: 7px; background: var(--accent); }
 .stack-title { margin: 0; font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
-.stack-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 28px 24px;
-  border-right: 1px solid var(--border-strong);
-  color: var(--fg);
-  transition: background 160ms ease;
-}
-.stack-cell:last-child { border-right: none; }
-.stack-cell:hover { color: var(--fg); background: color-mix(in oklab, var(--accent), transparent 90%); }
-.stack-role {
-  font-family: var(--font-code);
-  font-size: 10.5px;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--accent);
-}
-.stack-role::before { content: "// "; color: var(--dim); }
-.stack-mark { display: flex; align-items: center; height: 48px; margin: 6px 0 4px; color: var(--fg); opacity: 0.85; transition: opacity 160ms ease; }
-.stack-cell:hover .stack-mark { opacity: 1; }
-.stack-logo { display: block; width: auto; fill: currentColor; }
-.stack-logo--x402 { height: 40px; }
-.stack-logo--mpp { height: 26px; }
-.stack-logo--stellar { height: 36px; }
-.stack-name { font-size: 14.5px; font-weight: 600; }
-.stack-meta { font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); }
-@media (max-width: 960px) {
-  .stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .stack-intro { grid-column: 1 / -1; padding: 28px 0 20px; border-right: none; border-bottom: 1px solid var(--border-strong); }
-}
-@media (max-width: 600px) {
-  .stack-grid { grid-template-columns: minmax(0, 1fr); }
-  .stack-cell { border-right: none; border-bottom: 1px solid var(--border-strong); padding: 22px 0; }
-  .stack-cell:last-child { border-bottom: none; }
+.stack-diagram { min-width: 0; }
+.fan { display: block; width: 100%; height: auto; }
+.fan--narrow { display: none; max-width: 560px; }
+@media (max-width: 1099px) {
+  .fan--wide { display: none; }
+  .fan--narrow { display: block; }
+}
+.fan-box { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; transition: fill 160ms ease, stroke 160ms ease; }
+.fan-node:hover .fan-box,
+.fan-node:focus-visible .fan-box { fill: color-mix(in oklab, var(--accent), var(--surface) 88%); stroke: var(--accent); }
+.fan-node:focus-visible { outline: none; }
+.fan-role { font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--accent); }
+.fan-role--sm { font-size: 9.5px; }
+.fan-slash { fill: var(--dim); }
+.fan-name { font-family: var(--font-body); font-size: 17px; font-weight: 600; fill: var(--fg); }
+.fan-name--sm { font-size: 15px; }
+.fan-name--xs { font-size: 12.5px; }
+.fan-meta { font-family: var(--font-code); font-size: 13px; letter-spacing: 0.03em; fill: var(--muted); }
+.fan-meta--sm { font-size: 10px; }
+.fan-mark { fill: var(--fg); opacity: 0.88; transition: opacity 160ms ease; }
+.fan-node:hover .fan-mark { opacity: 1; }
+.fan-line { fill: none; stroke-width: 1.5; }
+.fan-line--x { stroke: var(--accent); }
+.fan-line--m { stroke: var(--accent-2); }
+.fan-joint { stroke: var(--bg); stroke-width: 2; }
+.fan-joint--x { fill: var(--accent); }
+.fan-joint--m { fill: var(--accent-2); }
+.fan-flow--x { fill: var(--fg); }
+.fan-flow--m { fill: var(--accent-2); }
+@media (prefers-reduced-motion: reduce) {
+  .fan-flow { display: none; }
 }
 
 /* Bands: every section below the hero. */
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 41625d8..e54832c 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -9,6 +9,7 @@ import { FaqList, type FaqEntry } from "@/components/FaqList";
 import { McpSession } from "@/components/McpSession";
 import { SequenceFlow } from "@/components/SequenceFlow";
 import { StackStrip } from "@/components/StackStrip";
+import { BrandSprite, Mark, type MarkId } from "@/components/BrandMarks";
 import { StrokeText } from "@/components/StrokeText";
 import { TechText } from "@/components/TechText";
 import { ScrollReveal } from "@/components/ScrollReveal";
@@ -24,17 +25,19 @@ import { CHECK_COUNT, WASIT_VERSION } from "@/lib/site-facts";
 const INSTALL_CMD = "npx @wasit-dev/cli test --target <your-service-url> --read-only";
 const GITHUB_URL = "https://github.com/wasit-dev/wasit";
 
-// Words for the ticker band under the hero. Every item is a fact the page
-// makes elsewhere; the band repeats them, it does not add to them. Set in
-// capitals here rather than by CSS, which would also capitalise "x402".
-const TICKER_ITEMS = [
-  "VERIFY THE SETTLEMENT",
-  "x402",
-  "MPP",
-  "STELLAR · BASE · ETHEREUM · SOLANA",
-  `${CHECK_COUNT} CHECKS`,
-  "CLI · MCP · CORE",
-  "APACHE-2.0",
+// The ticker band under the hero: the two protocols Wasit checks and the
+// four chains it reads the settlement from, as their marks. x402's and MPP's
+// marks are their names, so they stand alone; the chains' are glyphs, so
+// each is followed by its name. Brand colours, except Stellar's mark, which
+// is white on this dark band.
+type TickerMark = { id: MarkId; height: number; label?: string; style: React.CSSProperties }
+const TICKER_MARKS: TickerMark[] = [
+  { id: "x402", height: 19, style: { color: "var(--fg)" } },
+  { id: "mpp", height: 13, style: { color: "var(--fg)" } },
+  { id: "stellar", height: 20, label: "Stellar", style: { color: "var(--fg)" } },
+  { id: "base", height: 18, label: "Base", style: { color: "#3d5afe" } },
+  { id: "ethereum", height: 21, label: "Ethereum", style: { color: "#8a92f2" } },
+  { id: "solana", height: 19, label: "Solana", style: { fill: "url(#wm-solana-gradient)" } },
 ];
 
 type CompareRow = { without: string; with: string };
@@ -244,16 +247,20 @@ export default function Home() {
           </div>
         </section>
 
+        <BrandSprite />
         <div className="ticker" aria-hidden="true">
           <div className="ticker-track">
             {[0, 1].map((copy) => (
               <div className="ticker-group" key={copy}>
-                {TICKER_ITEMS.map((item) => (
-                  <span className="ticker-item" key={item}>
-                    {item}
-                    <span className="ticker-square" />
-                  </span>
-                ))}
+                {[0, 1].flatMap((half) =>
+                  TICKER_MARKS.map((m) => (
+                    <span className="ticker-item" key={`${half}-${m.id}`}>
+                      <Mark id={m.id} height={m.height} style={m.style} />
+                      {m.label}
+                      <span className="ticker-dot" />
+                    </span>
+                  )),
+                )}
               </div>
             ))}
           </div>
diff --git a/frontend/components/BrandMarks.tsx b/frontend/components/BrandMarks.tsx
new file mode 100644
index 0000000..0d4d8c8
--- /dev/null
+++ b/frontend/components/BrandMarks.tsx
@@ -0,0 +1,96 @@
+// The marks of the two protocols Wasit checks and the four chains it reads
+// settlement from, drawn once as an SVG sprite and placed with <use>, so
+// the ticker and the stack strip share one copy of each path.
+//
+// x402 and MPP come from their official brand files. Stellar, Ethereum and
+// Solana are simple-icons' paths (CC0). Base's mark is the Square, a square
+// with a 5% corner radius (brand.base.org, core identifiers). Every mark
+// draws in currentColor unless the caller sets a fill, so it takes the
+// page's colour by default.
+
+export type MarkId = "x402" | "mpp" | "stellar" | "base" | "ethereum" | "solana"
+
+/** Width over height of each mark's viewBox. */
+const RATIO: Record<MarkId, number> = {
+  x402: 486.3 / 187.4,
+  mpp: 81.2195 / 18,
+  stellar: 1,
+  base: 1,
+  ethereum: 1,
+  solana: 1,
+}
+
+/** Width a mark takes at a given height, for laying marks out in SVG. */
+export function markWidth(id: MarkId, height: number): number {
+  return height * RATIO[id]
+}
+
+/** Rendered once per page; every Mark below points into it. */
+export function BrandSprite() {
+  return (
+    <svg width="0" height="0" style={{ position: "absolute" }} aria-hidden="true" focusable="false">
+      <defs>
+        <linearGradient id="wm-solana-gradient" x1="0" y1="1" x2="1" y2="0">
+          <stop offset="0" stopColor="#9945FF" />
+          <stop offset="1" stopColor="#14F195" />
+        </linearGradient>
+      </defs>
+      <symbol id="wm-x402" viewBox="0 0 486.3 187.4">
+        <path d="M10.5,59.5c.6-.6,1.6-.6,2.3,0l50.9,50.9,19.5-19.5c.6-.6,1.6-.6,2.3,0l10,10c.6.6.6,1.7,0,2.3l-14.4,14.4v10.4l45.8,45.8c.6.6.6,1.7,0,2.3l-10,10c-.6.6-1.6.6-2.3,0l-50.9-50.9-50.9,50.9c-.6.6-1.6.6-2.3,0L.5,176.1c-.6-.6-.6-1.7,0-2.3l45.8-45.8v-10.4L.5,71.8c-.6-.6-.6-1.7,0-2.3l10-10Z" />
+        <path d="M374.1,151.7c0-2.5,1-4.9,2.7-6.7l91-93.6c.4-.5.7-1.1.7-1.7v-7.4c0-.6-.2-1.2-.7-1.7l-18.9-19.9c-.4-.5-1.1-.7-1.7-.7h-37.9c-.6,0-1.3.3-1.7.7l-22.9,23c-.9.9-2.5.9-3.4,0l-9.1-9.1c-.9-.9-.9-2.5,0-3.4l26-26c1.8-1.8,4.3-2.8,6.8-2.8h46.7c2.6,0,5.2,1.1,7,3l24.9,26.1c1.7,1.8,2.7,4.2,2.7,6.7v15.9c0,2.5-1,4.9-2.7,6.7l-91,93.6c-.4.5-.7,1.1-.7,1.7v11.4c0,1.3,1.1,2.4,2.4,2.4h89.6c1.3,0,2.4,1.1,2.4,2.4v12.9c0,1.3-1.1,2.4-2.4,2.4h-100.1c-5.3,0-9.7-4.3-9.7-9.7v-26.1Z" />
+        <path d="M317.9,2.2c17.8,0,32.2,14.4,32.2,32.2v121.6c-.4,17.1-14.2,30.9-31.3,31.4h-41.2c-17.1-.4-30.9-14.2-31.3-31.4v-.8s0-120.8,0-120.8c0-17.8,14.4-32.2,32.2-32.2h39.5ZM263.8,144.8v10.5c0,8,6.5,14.5,14.5,14.5h39.5c8,0,14.5-6.5,14.5-14.5v-79l-68.5,68.6ZM278.3,19.9c-8,0-14.5,6.5-14.5,14.5v85.3l68.5-68.6v-16.7c0-8-6.5-14.5-14.5-14.5h-39.5Z" />
+        <path d="M199.3,0c1.3,0,2.4,1.1,2.4,2.4v78.6c0,1.3,1.1,2.4,2.4,2.4h17.3c1.3,0,2.4,1.1,2.4,2.4v12.9c0,1.3-1.1,2.4-2.4,2.4h-17.3c-1.3,0-2.4,1.1-2.4,2.4v81.5c0,1.3-1.1,2.4-2.4,2.4h-12.9c-1.3,0-2.4-1.1-2.4-2.4v-81.5c0-1.3-1.1-2.4-2.4-2.4h-60.8c-.6,0-1.3-.3-1.7-.7l-21-21c-.9-.9-.9-2.5,0-3.4L172.9.7c.5-.5,1.1-.7,1.7-.7h24.7ZM123,76c-.9.9-.9,2.5,0,3.4l3.3,3.3c.5.5,1.1.7,1.7.7h53.5c1.3,0,2.4-1.1,2.4-2.4V19.9c0-1.2-1-2.2-2.2-2.2s-1.1.2-1.5.6l-57.3,57.6Z" />
+      </symbol>
+      <symbol id="wm-mpp" viewBox="0 0 81.2195 18">
+        <path d="M33.1162 17.9828H29.2324V2.84079e-05H51.2711C52.7167 2.84079e-05 53.8884 1.17531 53.8884 2.62538V8.65536C53.8884 10.1054 52.7167 11.2807 51.2711 11.2807H33.7302C33.3911 11.2807 33.1162 11.5556 33.1162 11.8948V17.9828ZM33.9887 7.62911H49.1322C49.6143 7.62911 50.0047 7.2375 50.0047 6.754V4.52674C50.0047 4.04324 49.6143 3.65162 49.1322 3.65162H33.9887C33.5066 3.65162 33.1162 4.04324 33.1162 4.52674V6.754C33.1162 7.2375 33.5066 7.62911 33.9887 7.62911Z" />
+        <path d="M26.5978 17.9828H22.7141V5.6935C22.7141 5.30451 22.246 5.10892 21.9707 5.38284L16.511 10.8126C16.2658 11.0564 15.9347 11.1933 15.5897 11.1933H11.0099C10.6661 11.1933 10.3364 11.0577 10.0916 10.8157L4.62666 5.41609C4.35096 5.14349 3.88419 5.33952 3.88419 5.72763V17.9828H0V0H4.67988L11.8982 7.13351C12.0613 7.29496 12.2812 7.3851 12.5106 7.3851H14.0824C14.3123 7.3851 14.5334 7.29409 14.6966 7.13132L21.8669 0H26.5983V17.9828H26.5978Z" />
+        <path d="M60.4063 17.9828H56.5226V2.84079e-05H78.5612C80.0068 2.84079e-05 81.1786 1.17531 81.1786 2.62538V8.65536C81.1786 10.1054 80.0068 11.2807 78.5612 11.2807H61.0204C60.6812 11.2807 60.4063 11.5556 60.4063 11.8948V17.9828ZM61.2788 7.62911H76.4223C76.9044 7.62911 77.2948 7.2375 77.2948 6.754V4.52674C77.2948 4.04324 76.9044 3.65162 76.4223 3.65162H61.2788C60.7968 3.65162 60.4063 4.04324 60.4063 4.52674V6.754C60.4063 7.2375 60.7968 7.62911 61.2788 7.62911Z" />
+      </symbol>
+      <symbol id="wm-stellar" viewBox="0 0 24 24">
+        <path d="M12.003 1.716c-1.37 0-2.7.27-3.948.78A10.18 10.18 0 0 0 2.66 7.901a10.136 10.136 0 0 0-.797 3.954c0 .258.01.516.027.775a1.942 1.942 0 0 1-1.055 1.88L0 14.934v1.902l2.463-1.26.072-.032v.005l.77-.39.758-.385.066-.039 14.807-7.56 1.666-.847 3.392-1.732V2.694L17.792 5.86 3.744 13.025l-.104.055-.017-.115a8.286 8.286 0 0 1-.071-1.105c0-2.255.88-4.377 2.474-5.977a8.462 8.462 0 0 1 2.71-1.82 8.513 8.513 0 0 1 3.2-.654h.067a8.41 8.41 0 0 1 4.09 1.055l1.628-.83.126-.066a10.11 10.11 0 0 0-5.845-1.853zM24 7.143 5.047 16.808l-1.666.847L0 19.382v1.902l3.282-1.671 2.91-1.485 14.058-7.153.105-.055.016.115c.05.369.072.743.072 1.11 0 2.255-.88 4.383-2.475 5.978a8.461 8.461 0 0 1-2.71 1.82 8.305 8.305 0 0 1-3.2.654h-.06c-1.441 0-2.86-.369-4.102-1.061l-.066.033-1.683.857c.594.418 1.232.776 1.903 1.062a10.11 10.11 0 0 0 3.947.797 10.09 10.09 0 0 0 7.17-2.975 10.136 10.136 0 0 0 2.969-7.18c0-.259-.005-.523-.027-.781a1.942 1.942 0 0 1 1.055-1.88L24 9.044z" />
+      </symbol>
+      <symbol id="wm-base" viewBox="0 0 24 24">
+        <rect x="1.5" y="1.5" width="21" height="21" rx="1.05" />
+      </symbol>
+      <symbol id="wm-ethereum" viewBox="0 0 24 24">
+        <path d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z" />
+      </symbol>
+      <symbol id="wm-solana" viewBox="0 0 24 24">
+        <path d="m23.8764 18.0313-3.962 4.1393a.9201.9201 0 0 1-.306.2106.9407.9407 0 0 1-.367.0742H.4599a.4689.4689 0 0 1-.2522-.0733.4513.4513 0 0 1-.1696-.1962.4375.4375 0 0 1-.0314-.2545.4438.4438 0 0 1 .117-.2298l3.9649-4.1393a.92.92 0 0 1 .3052-.2102.9407.9407 0 0 1 .3658-.0746H23.54a.4692.4692 0 0 1 .2523.0734.4531.4531 0 0 1 .1697.196.438.438 0 0 1 .0313.2547.4442.4442 0 0 1-.1169.2297zm-3.962-8.3355a.9202.9202 0 0 0-.306-.2106.941.941 0 0 0-.367-.0742H.4599a.4687.4687 0 0 0-.2522.0734.4513.4513 0 0 0-.1696.1961.4376.4376 0 0 0-.0314.2546.444.444 0 0 0 .117.2297l3.9649 4.1394a.9204.9204 0 0 0 .3052.2102c.1154.049.24.0744.3658.0746H23.54a.469.469 0 0 0 .2523-.0734.453.453 0 0 0 .1697-.1961.4382.4382 0 0 0 .0313-.2546.4444.4444 0 0 0-.1169-.2297zM.46 6.7225h18.7815a.9411.9411 0 0 0 .367-.0742.9202.9202 0 0 0 .306-.2106l3.962-4.1394a.4442.4442 0 0 0 .117-.2297.4378.4378 0 0 0-.0314-.2546.453.453 0 0 0-.1697-.196.469.469 0 0 0-.2523-.0734H4.7596a.941.941 0 0 0-.3658.0745.9203.9203 0 0 0-.3052.2102L.1246 5.9687a.4438.4438 0 0 0-.1169.2295.4375.4375 0 0 0 .0312.2544.4512.4512 0 0 0 .1692.196.4689.4689 0 0 0 .2518.0739z" />
+      </symbol>
+    </svg>
+  )
+}
+
+/** A mark as its own inline SVG, `height` pixels tall. Decorative. */
+export function Mark({
+  id,
+  height,
+  className,
+  style,
+}: {
+  id: MarkId
+  height: number
+  className?: string
+  style?: React.CSSProperties
+}) {
+  const w = 24 * RATIO[id]
+  return (
+    <svg
+      viewBox={`0 0 ${w} 24`}
+      width={markWidth(id, height)}
+      height={height}
+      className={className}
+      style={style}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <use href={`#wm-${id}`} width={w} height={24} />
+    </svg>
+  )
+}
+
+/** A mark placed inside another SVG, at (x, y) and `height` units tall. */
+export function SvgMark({ id, x, y, height, className }: { id: MarkId; x: number; y: number; height: number; className?: string }) {
+  return <use href={`#wm-${id}`} x={x} y={y} width={markWidth(id, height)} height={height} className={className} />
+}
diff --git a/frontend/components/StackStrip.tsx b/frontend/components/StackStrip.tsx
index 2961388..6415e65 100644
--- a/frontend/components/StackStrip.tsx
+++ b/frontend/components/StackStrip.tsx
@@ -1,81 +1,200 @@
-import Image from "next/image"
+import { SvgMark, markWidth, type MarkId } from "@/components/BrandMarks"
 
-// The two protocols' marks, inlined (from their official brand files) so
-// they take the page's colour through currentColor. Stellar's lockup is
-// only available as a bitmap, so it ships as public/brand/stellar-white.png.
+// The stack strip under the ticker: the two protocols Wasit checks on the
+// left, the four chains whose own record it reads the settlement from on
+// the right, and a line wherever a protocol runs on a chain. The lines are
+// facts, not decoration: in 0.7.0 x402 pays on all four testnets and MPP on
+// Stellar's only, so MPP has one line. A dot runs each line from protocol
+// to chain, the direction the payment goes.
+//
+// Drawn as SVG at a fixed viewBox, so the lines meet the boxes exactly at
+// every width. Two layouts, chosen in CSS: wide (side by side) from 1100px,
+// narrow (protocols above chains) below it, where the wide one's text would
+// shrink too far.
 
-function X402Logo() {
+type Node = { id: MarkId; name: string; short: string; meta: string; metaShort: string; href: string }
+
+// Check counts as docs/CHECKS.md lists them: ten for x402, one for MPP
+// charge mode and five for channel mode.
+const PROTOCOLS: Node[] = [
+  { id: "x402", name: "x402", short: "x402", meta: "10 checks · exact scheme", metaShort: "10 checks", href: "https://x402.org" },
+  { id: "mpp", name: "Machine Payments Protocol", short: "MPP", meta: "6 checks · charge and channel", metaShort: "6 checks", href: "https://paymentauth.org" },
+]
+
+// The testnet each chain is tested on, and what Wasit reads the settlement
+// from there (docs/CHECKS.md, X402-06 and MPP-01).
+const CHAINS: Node[] = [
+  { id: "stellar", name: "Stellar", short: "Stellar", meta: "testnet · contract transfer event", metaShort: "testnet", href: "https://stellar.org" },
+  { id: "base", name: "Base", short: "Base", meta: "Sepolia · ERC-20 Transfer log", metaShort: "Sepolia", href: "https://base.org" },
+  { id: "ethereum", name: "Ethereum", short: "Ethereum", meta: "Sepolia · ERC-20 Transfer log", metaShort: "Sepolia", href: "https://ethereum.org" },
+  { id: "solana", name: "Solana", short: "Solana", meta: "devnet · token balances", metaShort: "devnet", href: "https://solana.com" },
+]
+
+/** Which chains each protocol runs on, as 0.7.0 tests them. */
+const RUNS_ON: Record<"x402" | "mpp", readonly MarkId[]> = {
+  x402: ["stellar", "base", "ethereum", "solana"],
+  mpp: ["stellar"],
+}
+
+function chainList(ids: readonly MarkId[]): string {
+  const names = ids.map((id) => CHAINS.find((c) => c.id === id)!.name)
+  return names.length === 1 ? names[0]! : `${names.slice(0, -1).join(", ")} and ${names.at(-1)}`
+}
+
+function protocolLabel(p: Node): string {
+  const on = RUNS_ON[p.id as "x402" | "mpp"]
+  return `${p.name}: ${p.meta}. Tested on ${chainList(on)} ${on.length === 1 ? "testnet" : "testnets"}.`
+}
+
+function chainLabel(c: Node): string {
+  const by = (Object.keys(RUNS_ON) as Array<"x402" | "mpp">).filter((p) => RUNS_ON[p].includes(c.id))
+  return `${c.name}, ${c.meta}. Settlement read here for ${by.map((p) => (p === "mpp" ? "MPP" : p)).join(" and ")}.`
+}
+
+/** A dot that runs the path `id` from start to end, forever. */
+function Flow({ path, dur, begin, kind }: { path: string; dur: number; begin: number; kind: "x" | "m" }) {
   return (
-    <svg viewBox="0 0 486.3 187.4" className="stack-logo stack-logo--x402" role="img" aria-label="x402">
-      <path d="M10.5,59.5c.6-.6,1.6-.6,2.3,0l50.9,50.9,19.5-19.5c.6-.6,1.6-.6,2.3,0l10,10c.6.6.6,1.7,0,2.3l-14.4,14.4v10.4l45.8,45.8c.6.6.6,1.7,0,2.3l-10,10c-.6.6-1.6.6-2.3,0l-50.9-50.9-50.9,50.9c-.6.6-1.6.6-2.3,0L.5,176.1c-.6-.6-.6-1.7,0-2.3l45.8-45.8v-10.4L.5,71.8c-.6-.6-.6-1.7,0-2.3l10-10Z" />
-      <path d="M374.1,151.7c0-2.5,1-4.9,2.7-6.7l91-93.6c.4-.5.7-1.1.7-1.7v-7.4c0-.6-.2-1.2-.7-1.7l-18.9-19.9c-.4-.5-1.1-.7-1.7-.7h-37.9c-.6,0-1.3.3-1.7.7l-22.9,23c-.9.9-2.5.9-3.4,0l-9.1-9.1c-.9-.9-.9-2.5,0-3.4l26-26c1.8-1.8,4.3-2.8,6.8-2.8h46.7c2.6,0,5.2,1.1,7,3l24.9,26.1c1.7,1.8,2.7,4.2,2.7,6.7v15.9c0,2.5-1,4.9-2.7,6.7l-91,93.6c-.4.5-.7,1.1-.7,1.7v11.4c0,1.3,1.1,2.4,2.4,2.4h89.6c1.3,0,2.4,1.1,2.4,2.4v12.9c0,1.3-1.1,2.4-2.4,2.4h-100.1c-5.3,0-9.7-4.3-9.7-9.7v-26.1Z" />
-      <path d="M317.9,2.2c17.8,0,32.2,14.4,32.2,32.2v121.6c-.4,17.1-14.2,30.9-31.3,31.4h-41.2c-17.1-.4-30.9-14.2-31.3-31.4v-.8s0-120.8,0-120.8c0-17.8,14.4-32.2,32.2-32.2h39.5ZM263.8,144.8v10.5c0,8,6.5,14.5,14.5,14.5h39.5c8,0,14.5-6.5,14.5-14.5v-79l-68.5,68.6ZM278.3,19.9c-8,0-14.5,6.5-14.5,14.5v85.3l68.5-68.6v-16.7c0-8-6.5-14.5-14.5-14.5h-39.5Z" />
-      <path d="M199.3,0c1.3,0,2.4,1.1,2.4,2.4v78.6c0,1.3,1.1,2.4,2.4,2.4h17.3c1.3,0,2.4,1.1,2.4,2.4v12.9c0,1.3-1.1,2.4-2.4,2.4h-17.3c-1.3,0-2.4,1.1-2.4,2.4v81.5c0,1.3-1.1,2.4-2.4,2.4h-12.9c-1.3,0-2.4-1.1-2.4-2.4v-81.5c0-1.3-1.1-2.4-2.4-2.4h-60.8c-.6,0-1.3-.3-1.7-.7l-21-21c-.9-.9-.9-2.5,0-3.4L172.9.7c.5-.5,1.1-.7,1.7-.7h24.7ZM123,76c-.9.9-.9,2.5,0,3.4l3.3,3.3c.5.5,1.1.7,1.7.7h53.5c1.3,0,2.4-1.1,2.4-2.4V19.9c0-1.2-1-2.2-2.2-2.2s-1.1.2-1.5.6l-57.3,57.6Z" />
-    </svg>
+    <circle r="3.2" className={`fan-flow fan-flow--${kind}`}>
+      <animateMotion dur={`${dur}s`} begin={`${begin}s`} repeatCount="indefinite">
+        <mpath href={`#${path}`} />
+      </animateMotion>
+    </circle>
   )
 }
 
-function MppLogo() {
+/** Where a protocol's line meets a chain; MPP lands a little lower so the two never merge. */
+function landing(p: "x402" | "mpp", centre: number, offset: number): number {
+  return p === "mpp" ? centre + offset : centre
+}
+
+function Wide() {
+  const W = 1200
+  const H = 440
+  const pw = 340, ph = 150, py = [36, 254]
+  const cx = W - 340, cw = 340, ch = 92, cy = [0, 116, 232, 348]
+  const pc = py.map((y) => y + ph / 2)
+  const cc = cy.map((y) => y + ch / 2)
+  const lines: React.ReactNode[] = []
+  PROTOCOLS.forEach((p, i) => {
+    const key = p.id as "x402" | "mpp"
+    RUNS_ON[key].forEach((chainId, n) => {
+      const j = CHAINS.findIndex((c) => c.id === chainId)
+      const y0 = pc[i]!, y1 = landing(key, cc[j]!, 16)
+      const id = `fan-w-${key}-${chainId}`
+      const kind = key === "x402" ? "x" : "m"
+      lines.push(
+        <g key={id}>
+          <path id={id} d={`M${pw},${y0} C${pw + 220},${y0} ${cx - 220},${y1} ${cx},${y1}`} className={`fan-line fan-line--${kind}`} />
+          <circle cx={cx} cy={y1} r="4" className={`fan-joint fan-joint--${kind}`} />
+          <Flow path={id} dur={key === "x402" ? 2.6 : 2.9} begin={n * 0.45 + (kind === "m" ? 0.3 : 0)} kind={kind} />
+        </g>,
+      )
+    })
+    lines.push(<circle key={`j-${key}`} cx={pw} cy={pc[i]} r="4" className={`fan-joint fan-joint--${key === "x402" ? "x" : "m"}`} />)
+  })
   return (
-    <svg viewBox="0 0 81.2195 18" className="stack-logo stack-logo--mpp" role="img" aria-label="MPP">
-      <path d="M33.1162 17.9828H29.2324V2.84079e-05H51.2711C52.7167 2.84079e-05 53.8884 1.17531 53.8884 2.62538V8.65536C53.8884 10.1054 52.7167 11.2807 51.2711 11.2807H33.7302C33.3911 11.2807 33.1162 11.5556 33.1162 11.8948V17.9828ZM33.9887 7.62911H49.1322C49.6143 7.62911 50.0047 7.2375 50.0047 6.754V4.52674C50.0047 4.04324 49.6143 3.65162 49.1322 3.65162H33.9887C33.5066 3.65162 33.1162 4.04324 33.1162 4.52674V6.754C33.1162 7.2375 33.5066 7.62911 33.9887 7.62911Z" />
-      <path d="M26.5978 17.9828H22.7141V5.6935C22.7141 5.30451 22.246 5.10892 21.9707 5.38284L16.511 10.8126C16.2658 11.0564 15.9347 11.1933 15.5897 11.1933H11.0099C10.6661 11.1933 10.3364 11.0577 10.0916 10.8157L4.62666 5.41609C4.35096 5.14349 3.88419 5.33952 3.88419 5.72763V17.9828H0V0H4.67988L11.8982 7.13351C12.0613 7.29496 12.2812 7.3851 12.5106 7.3851H14.0824C14.3123 7.3851 14.5334 7.29409 14.6966 7.13132L21.8669 0H26.5983V17.9828H26.5978Z" />
-      <path d="M60.4063 17.9828H56.5226V2.84079e-05H78.5612C80.0068 2.84079e-05 81.1786 1.17531 81.1786 2.62538V8.65536C81.1786 10.1054 80.0068 11.2807 78.5612 11.2807H61.0204C60.6812 11.2807 60.4063 11.5556 60.4063 11.8948V17.9828ZM61.2788 7.62911H76.4223C76.9044 7.62911 77.2948 7.2375 77.2948 6.754V4.52674C77.2948 4.04324 76.9044 3.65162 76.4223 3.65162H61.2788C60.7968 3.65162 60.4063 4.04324 60.4063 4.52674V6.754C60.4063 7.2375 60.7968 7.62911 61.2788 7.62911Z" />
+    <svg viewBox={`0 0 ${W} ${H}`} className="fan fan--wide" role="group" aria-label="Which protocol runs on which chain">
+      {lines}
+      {PROTOCOLS.map((p, i) => {
+        const y = py[i]!
+        const markH = p.id === "x402" ? 30 : 18
+        return (
+          <a key={p.id} href={p.href} target="_blank" rel="noreferrer noopener" aria-label={protocolLabel(p)} className="fan-node">
+            <rect x="0" y={y} width={pw} height={ph} className="fan-box" />
+            <text x="22" y={y + 28} className="fan-role"><tspan className="fan-slash">{"// "}</tspan>checks</text>
+            <SvgMark id={p.id} x={22} y={y + 44} height={markH} className="fan-mark" />
+            <text x="22" y={y + ph - 42} className="fan-name">{p.name}</text>
+            <text x="22" y={y + ph - 20} className="fan-meta">{p.meta}</text>
+          </a>
+        )
+      })}
+      {CHAINS.map((c, j) => {
+        const y = cy[j]!
+        return (
+          <a key={c.id} href={c.href} target="_blank" rel="noreferrer noopener" aria-label={chainLabel(c)} className="fan-node">
+            <rect x={cx} y={y} width={cw} height={ch} className="fan-box" />
+            <text x={cx + 22} y={y + 26} className="fan-role"><tspan className="fan-slash">{"// "}</tspan>trusts</text>
+            <text x={cx + 22} y={y + 54} className="fan-name">{c.name}</text>
+            <text x={cx + 22} y={y + 76} className="fan-meta">{c.meta}</text>
+            <SvgMark id={c.id} x={cx + cw - 22 - markWidth(c.id, 30)} y={y + 31} height={30} className="fan-mark" />
+          </a>
+        )
+      })}
     </svg>
   )
 }
 
-type Cell = { key: string; href: string; name: string; role: "checks" | "trusts"; meta: string; logo: React.ReactNode }
-
-// Check counts as docs/CHECKS.md lists them: ten for x402, one for MPP
-// charge mode and five for channel mode. Links are the homepages the repo
-// already cites.
-const CELLS: Cell[] = [
-  { key: "x402", href: "https://x402.org", name: "x402", role: "checks", meta: "10 checks · exact scheme on Stellar, EVM and Solana", logo: <X402Logo /> },
-  { key: "mpp", href: "https://paymentauth.org", name: "Machine Payments Protocol", role: "checks", meta: "6 checks · charge and channel", logo: <MppLogo /> },
-  {
-    key: "stellar",
-    href: "https://stellar.org",
-    name: "Stellar",
-    role: "trusts",
-    meta: "settlement read from Stellar RPC; for x402 also Base, Ethereum and Solana",
-    logo: <Image src="/brand/stellar-white.png" alt="Stellar" width={1200} height={300} className="stack-logo stack-logo--stellar" />,
-  },
-]
+function Narrow() {
+  const W = 420
+  const H = 404
+  const pw = 200, ph = 118, px = [0, 220]
+  const cw = 96, ch = 122, cy = H - ch, cx = [0, 108, 216, 324]
+  const pc = px.map((x) => x + pw / 2)
+  const cc = cx.map((x) => x + cw / 2)
+  const lines: React.ReactNode[] = []
+  PROTOCOLS.forEach((p, i) => {
+    const key = p.id as "x402" | "mpp"
+    RUNS_ON[key].forEach((chainId, n) => {
+      const j = CHAINS.findIndex((c) => c.id === chainId)
+      const x0 = pc[i]!, x1 = landing(key, cc[j]!, 16)
+      const id = `fan-n-${key}-${chainId}`
+      const kind = key === "x402" ? "x" : "m"
+      lines.push(
+        <g key={id}>
+          <path id={id} d={`M${x0},${ph} C${x0},${ph + 90} ${x1},${cy - 90} ${x1},${cy}`} className={`fan-line fan-line--${kind}`} />
+          <circle cx={x1} cy={cy} r="3.5" className={`fan-joint fan-joint--${kind}`} />
+          <Flow path={id} dur={2.2} begin={n * 0.4 + (kind === "m" ? 0.3 : 0)} kind={kind} />
+        </g>,
+      )
+    })
+    lines.push(<circle key={`j-${key}`} cx={pc[i]} cy={ph} r="3.5" className={`fan-joint fan-joint--${key === "x402" ? "x" : "m"}`} />)
+  })
+  return (
+    <svg viewBox={`0 0 ${W} ${H}`} className="fan fan--narrow" role="group" aria-label="Which protocol runs on which chain">
+      {lines}
+      {PROTOCOLS.map((p, i) => {
+        const x = px[i]!
+        const markH = p.id === "x402" ? 22 : 13
+        return (
+          <a key={p.id} href={p.href} target="_blank" rel="noreferrer noopener" aria-label={protocolLabel(p)} className="fan-node">
+            <rect x={x} y="0" width={pw} height={ph} className="fan-box" />
+            <text x={x + 16} y="22" className="fan-role fan-role--sm"><tspan className="fan-slash">{"// "}</tspan>checks</text>
+            <SvgMark id={p.id} x={x + 16} y={34} height={markH} className="fan-mark" />
+            <text x={x + 16} y={ph - 32} className="fan-name fan-name--sm">{p.short}</text>
+            <text x={x + 16} y={ph - 14} className="fan-meta fan-meta--sm">{p.metaShort}</text>
+          </a>
+        )
+      })}
+      {CHAINS.map((c, j) => {
+        const x = cx[j]!
+        return (
+          <a key={c.id} href={c.href} target="_blank" rel="noreferrer noopener" aria-label={chainLabel(c)} className="fan-node">
+            <rect x={x} y={cy} width={cw} height={ch} className="fan-box" />
+            <text x={x + 12} y={cy + 20} className="fan-role fan-role--sm"><tspan className="fan-slash">{"// "}</tspan>trusts</text>
+            <SvgMark id={c.id} x={x + 12} y={cy + 32} height={24} className="fan-mark" />
+            <text x={x + 12} y={cy + ch - 32} className="fan-name fan-name--xs">{c.short}</text>
+            <text x={x + 12} y={cy + ch - 14} className="fan-meta fan-meta--sm">{c.metaShort}</text>
+          </a>
+        )
+      })}
+    </svg>
+  )
+}
 
-/**
- * The stack Wasit works on, as a logo strip under the hero: the two
- * payment protocols it checks and the chain it trusts for the settlement.
- * Stellar has the cell because both protocols run there; the x402 chains
- * beyond it are named in its line rather than given logos of their own.
- * Each cell links to that project's own site.
- */
 export function StackStrip() {
   return (
     <section className="stack" aria-labelledby="stack-title">
-      <div className="frame stack-grid">
+      <div className="frame stack-fan">
         <div className="stack-intro" data-reveal>
           <span className="stack-kicker">The stack</span>
           <p id="stack-title" className="stack-title">
-            Two protocols it <span className="hl-2">checks</span>. Only the chain it <span className="hl-2">trusts</span>.
+            Two protocols it <span className="hl-2">checks</span>. Four chains it <span className="hl-2">trusts</span>.
           </p>
         </div>
-        {CELLS.map((cell, i) => (
-          <a
-            key={cell.key}
-            className="stack-cell"
-            href={cell.href}
-            target="_blank"
-            rel="noreferrer noopener"
-            data-reveal
-            data-reveal-delay={String(100 * (i + 1))}
-          >
-            <span className="stack-role">{cell.role}</span>
-            <span className="stack-mark">{cell.logo}</span>
-            <span className="stack-name">{cell.name}</span>
-            <span className="stack-meta">{cell.meta}</span>
-          </a>
-        ))}
+        <div className="stack-diagram" data-reveal data-reveal-delay="120">
+          <Wide />
+          <Narrow />
+        </div>
       </div>
     </section>
   )
diff --git a/frontend/public/brand/stellar-white.png b/frontend/public/brand/stellar-white.png
deleted file mode 100644
index 6dc2faf..0000000
Binary files a/frontend/public/brand/stellar-white.png and /dev/null differ