From b22c437b7d8b9185b22016c7e48c7dc87f8335b0 Mon Sep 17 00:00:00 2001
From: Vasanth T <vasanth.dev2004@gmail.com>
Date: Tue, 6 Oct 2026 10:48:38 +0530
Subject: [PATCH] ui: posts, how it works, agents and dashboard in the new
 style

The section pages and the dashboard move to the flat card language with icon headers, chain logos, and the new buttons.
---
 app/src/app/about/page.tsx                    |   3 +-
 app/src/app/agents/page.tsx                   |  24 +--
 app/src/app/feed/loading.tsx                  |  17 +-
 app/src/app/feed/page.tsx                     |   4 +-
 app/src/app/me/loading.tsx                    |  24 ++-
 app/src/app/me/page.tsx                       |   3 +-
 app/src/app/rules/page.tsx                    |  26 +--
 app/src/components/Skeleton.tsx               |   3 +-
 .../launchpad/MeDashboard.module.css          | 159 +++++++++--------
 app/src/components/launchpad/MeDashboard.tsx  |  64 +++----
 app/src/components/sections/Agents.module.css | 164 +++++++++---------
 .../sections/CommunityFeed.module.css         |  92 +++++-----
 app/src/components/sections/CommunityFeed.tsx |  22 ++-
 .../components/sections/RulesGuide.module.css | 128 +++++++-------
 14 files changed, 400 insertions(+), 333 deletions(-)

diff --git a/app/src/app/about/page.tsx b/app/src/app/about/page.tsx
index b9d6b5d3..28fe3f59 100644
--- a/app/src/app/about/page.tsx
+++ b/app/src/app/about/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { pageMetadata } from "@/lib/seo";
 import Link from "next/link";
-import { ArrowRight, ArrowUpRight } from "lucide-react";
+import { ArrowRight, ArrowUpRight, Info } from "lucide-react";
 import SectionIntro from "@/components/sections/SectionIntro";
 import shell from "@/components/sections/SectionShell.module.css";
 import { BRAND, BRAND_DOMAIN, BRAND_GITHUB, BRAND_X, LEGACY_DOMAIN } from "@/lib/brand";
@@ -34,6 +34,7 @@ export default function AboutPage() {
     <main className={shell.page}>
       <SectionIntro
         eyebrow="About"
+        icon={<Info />}
         title={`What ${BRAND} is`}
         description={<>{BRAND} is a free, open-source token launchpad. One transaction deploys a fixed-supply ERC-20, opens a Uniswap v4 pool at the market cap you pick and locks 100% of the supply as liquidity, forever. It runs on Base, Robinhood Chain and Arc.</>}
       >
diff --git a/app/src/app/agents/page.tsx b/app/src/app/agents/page.tsx
index 69a23c1d..950fbd15 100644
--- a/app/src/app/agents/page.tsx
+++ b/app/src/app/agents/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { pageMetadata } from "@/lib/seo";
-import { ArrowDown, ArrowRight, ArrowUpRight, Braces, FileCode2, Terminal } from "lucide-react";
+import { ArrowDown, ArrowLeftRight, ArrowRight, ArrowUpRight, BookOpen, Bot, Braces, FileCode2, Rocket, Terminal } from "lucide-react";
 import SectionIntro from "@/components/sections/SectionIntro";
 import AgentsCodeBlock from "@/components/sections/AgentsCodeBlock";
 import shell from "@/components/sections/SectionShell.module.css";
@@ -8,13 +8,15 @@ import styles from "@/components/sections/Agents.module.css";
 import { launchpad } from "@/lib/launchpad/config";
 import { CHAIN_KEYS, CHAIN_LABELS, CHAINS, SITE_URL, explorerAddress } from "@/lib/chainPublic";
 import { BRAND_GITHUB } from "@/lib/brand";
+import { ChainLogo } from "@/components/launchpad/ChainLogo";
 
 export const metadata: Metadata = pageMetadata({ path: "/agents", title: "Agents", description: "Launch and trade tokens from an agent: one contract call, plus a JSON API for the list, trades and metadata." });
 
+/** The page's sections, each with the mark its heading carries. */
 const sections = [
-  { id: "launch", number: "01", label: "Launch a token" },
-  { id: "read", number: "02", label: "Read the API" },
-  { id: "trade", number: "03", label: "Trade & collect" },
+  { id: "launch", icon: Rocket, label: "Launch a token" },
+  { id: "read", icon: BookOpen, label: "Read the API" },
+  { id: "trade", icon: ArrowLeftRight, label: "Trade & collect" },
 ] as const;
 
 const endpoints = [
@@ -34,13 +36,13 @@ export default function AgentsPage() {
 
   return (
     <main className={`${shell.page} ${styles.page}`}>
-      <SectionIntro eyebrow="Developer reference" title="Agents" description={<>No API key, no signup, no platform fee. A launch is one contract call from any wallet with a little ETH for gas. Everything the site shows is also JSON.</>}>
+      <SectionIntro eyebrow="Developer reference" icon={<Bot />} title="Agents" description={<>No API key, no signup, no platform fee. A launch is one contract call from any wallet with a little ETH for gas. Everything the site shows is also JSON.</>}>
         <a href="/llms.txt" className={shell.action}><FileCode2 size={16} aria-hidden="true" />Read llms.txt<ArrowUpRight size={14} aria-hidden="true" /></a>
         <a href={BRAND_GITHUB} target="_blank" rel="noreferrer" className={shell.textLink}>Explore the source<ArrowUpRight size={14} aria-hidden="true" /></a>
       </SectionIntro>
 
       <div className={styles.entry}>
-        <div className={styles.entryHeading}><Terminal size={19} aria-hidden="true" /><p>The interface is optional.<span>The same protocol is yours to build with.</span></p></div>
+        <div className={styles.entryHeading}><span className={styles.entryIcon} aria-hidden="true"><Terminal size={17} /></span><p>The interface is optional.<span>The same protocol is yours to build with.</span></p></div>
         <a href="#launch">Start with a launch<ArrowDown size={15} aria-hidden="true" /></a>
       </div>
 
@@ -48,19 +50,19 @@ export default function AgentsPage() {
         <aside className={styles.sidebar}>
           <nav aria-label="Agent documentation sections">
             <p className={styles.indexLabel}>On this page</p>
-            {sections.map(({ id, number, label }) => <a key={id} href={`#${id}`}><span>{number}</span>{label}<ArrowRight size={13} aria-hidden="true" /></a>)}
+            {sections.map(({ id, icon: Icon, label }) => <a key={id} href={`#${id}`}><span aria-hidden="true"><Icon size={13} /></span>{label}<ArrowRight size={13} aria-hidden="true" /></a>)}
           </nav>
           <p className={styles.sidebarNote}>Use the JSON API to read.<br />Use your wallet to write on-chain.</p>
         </aside>
 
         <div className={styles.content}>
           <section id="launch" tabIndex={-1} className={`${shell.anchorSection} ${styles.section}`} aria-labelledby="agents-launch-title">
-            <div className={styles.sectionHeading}><span className={styles.sectionNumber}>01</span><div><h2 id="agents-launch-title">Launch a token</h2><p>One call, from your own wallet.</p></div></div>
+            <div className={styles.sectionHeading}><span className={styles.sectionIcon} aria-hidden="true"><Rocket size={17} /></span><div><h2 id="agents-launch-title">Launch a token</h2><p>One call, from your own wallet.</p></div></div>
             <div className={styles.networks}>
               {CHAIN_KEYS.map((chain) => {
                 const config = launchpad(chain);
                 return <div key={chain} className={styles.network}>
-                  <div className={styles.networkHeading}><h3>{CHAIN_LABELS[chain]}</h3><span>Chain <b>{CHAINS[chain].id}</b></span></div>
+                  <div className={styles.networkHeading}><h3><ChainLogo chain={chain} size={16} />{CHAIN_LABELS[chain]}</h3><span>Chain <b>{CHAINS[chain].id}</b></span></div>
                   <dl>{(["factory", "locker"] as const).map((contract) => <div key={contract}>
                     <dt>{contract}</dt>
                     <dd>{config[contract] ? <a href={explorerAddress(chain, config[contract])} target="_blank" rel="noreferrer" aria-label={`${CHAIN_LABELS[chain]} ${contract}: ${config[contract]}, view on explorer`}><code>{config[contract]}</code><ArrowUpRight size={13} aria-hidden="true" /></a> : <span>not deployed yet</span>}</dd>
@@ -90,7 +92,7 @@ export default function AgentsPage() {
           </section>
 
           <section id="read" tabIndex={-1} className={`${shell.anchorSection} ${styles.section}`} aria-labelledby="agents-read-title">
-            <div className={styles.sectionHeading}><span className={styles.sectionNumber}>02</span><div><h2 id="agents-read-title">Read the API</h2><p>JSON endpoints, plus a plain-text agent reference.</p></div></div>
+            <div className={styles.sectionHeading}><span className={styles.sectionIcon} aria-hidden="true"><BookOpen size={17} /></span><div><h2 id="agents-read-title">Read the API</h2><p>JSON endpoints, plus a plain-text agent reference.</p></div></div>
             <div className={styles.endpoints}>
               <div className={styles.endpointHeader}><span>Public endpoints</span><span>No API key</span></div>
               {endpoints.map((endpoint) => <div key={endpoint.path} className={styles.endpoint}>
@@ -106,7 +108,7 @@ export default function AgentsPage() {
           </section>
 
           <section id="trade" tabIndex={-1} className={`${shell.anchorSection} ${styles.section}`} aria-labelledby="agents-trade-title">
-            <div className={styles.sectionHeading}><span className={styles.sectionNumber}>03</span><div><h2 id="agents-trade-title">Trade & collect</h2><p>Standard pools. Direct contract calls.</p></div></div>
+            <div className={styles.sectionHeading}><span className={styles.sectionIcon} aria-hidden="true"><ArrowLeftRight size={17} /></span><div><h2 id="agents-trade-title">Trade & collect</h2><p>Standard pools. Direct contract calls.</p></div></div>
             <div className={styles.tradeReference}>
               <div><span className={styles.tradeLabel}>Swap</span><h3>Speak Uniswap v4</h3><p className={styles.prose}>Pools are plain Uniswap v4, with tick spacing <code>200</code> and no hook. The quote can be ETH, TWIG (Base), GITLAWB (Base and Robinhood Chain), USDG (Robinhood Chain), USDC (Arc) or a supported issuer-registry stock token. Get the actual pool key with <code>poolKeyOf(token)</code> on the factory. Swap through the Universal Router with a <code>V4_SWAP</code> command, or any router that speaks v4.</p></div>
               <div><span className={styles.tradeLabel}>Collect</span><h3>Pay out accrued fees</h3><p className={styles.prose}>Anyone may call <code>collect(tokenId)</code> on that chain&apos;s locker to pay out accrued fees. Base locker: <code>{locker}</code>. Use the matching chain address above.</p></div>
diff --git a/app/src/app/feed/loading.tsx b/app/src/app/feed/loading.tsx
index 80da5400..633acfa6 100644
--- a/app/src/app/feed/loading.tsx
+++ b/app/src/app/feed/loading.tsx
@@ -10,7 +10,7 @@ export default function Loading() {
   return (
     <main className={shell.page} aria-busy="true" aria-label="Loading posts">
       <header className={shell.intro}>
-        <div className="flex h-4 items-center"><Sk className="h-3 w-36" /></div>
+        <Sk className="h-7 w-40 rounded-full" />
         <div className={shell.introRow}>
           <div className={`${shell.introCopy} w-full`}>
             <Sk className="h-9 w-72 max-w-full sm:h-[50px]" />
@@ -19,13 +19,13 @@ export default function Loading() {
               <div className="flex h-[26px] items-center sm:h-[27px]"><Sk className="h-4 w-3/4 max-w-[460px]" /></div>
             </div>
           </div>
-          <Sk className="h-11 w-40 rounded-full" />
+          <Sk className="h-11 w-40 rounded-xl" />
         </div>
       </header>
       <div className={styles.layout}>
         <section className={shell.panel} aria-label="Loading recent community posts">
           <div className={styles.toolbar}><Sk className="h-4 w-44 max-w-full" /><Sk className="h-11 w-11 rounded-full" /></div>
-          <div className={styles.filters}><Sk className="h-[54px] w-60 max-w-full rounded-xl" /><Sk className="h-11 min-w-[180px] flex-1" /></div>
+          <div className={styles.filters}><Sk className="h-[54px] w-60 max-w-full rounded-xl" /><Sk className="h-11 min-w-[180px] flex-1 rounded-xl" /></div>
           <div className={styles.resultLine}><p className="flex h-4 items-center"><Sk className="h-3 w-24" /></p><span className="flex h-4 items-center"><Sk className="h-3 w-36" /></span></div>
           <ul>
             {Array.from({ length: 6 }, (_, i) => (
@@ -36,22 +36,21 @@ export default function Loading() {
         </section>
         <aside className={styles.aside} aria-hidden="true">
           <section className={styles.guide}>
-            <Sk className="h-3 w-44" />
-            <div className="mt-3.5 flex h-[30px] items-center"><Sk className="h-6 w-48 max-w-full" /></div>
-            <div className="mt-3">
+            <div className="flex h-[23px] items-center"><Sk className="h-5 w-48 max-w-full" /></div>
+            <div className="mt-2">
               <div className="flex h-[23px] items-center"><Sk className="h-3.5 w-full" /></div>
               <div className="flex h-[23px] items-center"><Sk className="h-3.5 w-5/6" /></div>
             </div>
             <ul className={styles.steps}>
               {[0, 1, 2].map((i) => (
-                <li key={i}><span className="flex h-5 shrink-0 items-center"><Sk className="h-3 w-5" /></span><div className="min-w-0 flex-1"><div className="flex h-5 items-center"><Sk className="h-3.5 w-32 max-w-full" /></div><div className="mt-1 flex h-5 items-center"><Sk className="h-3 w-44 max-w-full" /></div></div></li>
+                <li key={i}><Sk className="size-8 shrink-0 rounded-[10px]" /><div className="min-w-0 flex-1"><div className="flex h-5 items-center"><Sk className="h-3.5 w-32 max-w-full" /></div><div className="mt-1 flex h-5 items-center"><Sk className="h-3 w-44 max-w-full" /></div></div></li>
               ))}
             </ul>
             <div className="flex h-11 items-center"><Sk className="h-3.5 w-32" /></div>
           </section>
           <section className={styles.note}>
-            <Sk className="h-5 w-5" />
-            <div className="mt-4 flex h-[21px] items-center"><Sk className="h-4 w-44 max-w-full" /></div>
+            <Sk className="size-8 rounded-[10px]" />
+            <div className="mt-3.5 flex h-[21px] items-center"><Sk className="h-4 w-44 max-w-full" /></div>
             <div className="mt-2.5">
               {["w-full", "w-full", "w-full", "w-2/3"].map((w, i) => <div key={i} className="flex h-[21px] items-center"><Sk className={`h-3 ${w}`} /></div>)}
             </div>
diff --git a/app/src/app/feed/page.tsx b/app/src/app/feed/page.tsx
index b573c009..73e209ca 100644
--- a/app/src/app/feed/page.tsx
+++ b/app/src/app/feed/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { pageMetadata } from "@/lib/seo";
 import Link from "next/link";
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRight, MessagesSquare } from "lucide-react";
 import CommunityFeed from "@/components/sections/CommunityFeed";
 import SectionIntro from "@/components/sections/SectionIntro";
 import styles from "@/components/sections/SectionShell.module.css";
@@ -14,7 +14,7 @@ export default async function FeedPage() {
   const result = await listFeed(100).then((posts) => ({ posts, failed: false })).catch(() => ({ posts: [], failed: true }));
   return (
     <main className={styles.page}>
-      <SectionIntro eyebrow="Community / Posts" title="Behind every token." description="Holders, traders and creators, in their own words. Follow the conversation across Base, Robinhood Chain and Arc.">
+      <SectionIntro eyebrow="Community posts" icon={<MessagesSquare />} title="Behind every token." description="Holders, traders and creators, in their own words. Follow the conversation across Base, Robinhood Chain and Arc.">
         <Link href="/#launches" className={styles.action}>Explore tokens <ArrowUpRight size={16} aria-hidden="true" /></Link>
       </SectionIntro>
       <CommunityFeed initial={result.posts} loadError={result.failed} />
diff --git a/app/src/app/me/loading.tsx b/app/src/app/me/loading.tsx
index 09efebbd..d578e5bf 100644
--- a/app/src/app/me/loading.tsx
+++ b/app/src/app/me/loading.tsx
@@ -1,18 +1,30 @@
 import { Sk, SkRow, SkStat } from "@/components/Skeleton";
+import shell from "@/components/sections/SectionShell.module.css";
 
+/* The dashboard page's own frame (its SectionIntro header), then the wallet card, the figures and the rows, so nothing
+   shifts when the dashboard arrives. */
 export default function Loading() {
   return (
-    <main className="mx-auto max-w-4xl px-4 pt-8 sm:pt-10 pb-16 space-y-6" aria-busy="true" aria-label="loading dashboard">
-      <header className="space-y-3">
-        <Sk className="h-9 w-20" />
-        <Sk className="h-5 w-3/4 max-w-xl" />
+    <main className={shell.page} aria-busy="true" aria-label="loading dashboard">
+      <header className={shell.intro}>
+        <Sk className="h-7 w-36 rounded-full" />
+        <div className={shell.introRow}>
+          <div className={`${shell.introCopy} w-full`}>
+            <Sk className="h-9 w-80 max-w-full sm:h-[50px]" />
+            <div className="mt-3.5 space-y-2.5">
+              <Sk className="h-4 w-full max-w-[620px]" />
+              <Sk className="h-4 w-2/3 max-w-[420px]" />
+            </div>
+          </div>
+        </div>
       </header>
-      <dl className="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
+      <Sk className="h-16 w-full rounded-2xl" />
+      <dl className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4">
         {Array.from({ length: 4 }, (_, i) => (
           <SkStat key={i} />
         ))}
       </dl>
-      <ul className="rounded-2xl bg-card border border-line shadow-card overflow-hidden">
+      <ul className="mt-5 overflow-hidden rounded-2xl border border-line bg-card">
         {Array.from({ length: 4 }, (_, i) => (
           <SkRow key={i} i={i} />
         ))}
diff --git a/app/src/app/me/page.tsx b/app/src/app/me/page.tsx
index 7f25da43..133c9efd 100644
--- a/app/src/app/me/page.tsx
+++ b/app/src/app/me/page.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import MeDashboard from "@/components/launchpad/MeDashboard";
+import { LayoutDashboard } from "lucide-react";
 import SectionIntro from "@/components/sections/SectionIntro";
 import shell from "@/components/sections/SectionShell.module.css";
 
@@ -10,7 +11,7 @@ export const dynamic = "force-dynamic";
 export default function MePage() {
   return (
     <main className={shell.page}>
-      <SectionIntro eyebrow="Your dashboard" title="A space for your next move." description="Your launches, the fees they earn, and everything you trade. One wallet across Base, Robinhood Chain and Arc." />
+      <SectionIntro eyebrow="Your dashboard" icon={<LayoutDashboard />} title="A space for your next move." description="Your launches, the fees they earn, and everything you trade. One wallet across Base, Robinhood Chain and Arc." />
       <MeDashboard />
     </main>
   );
diff --git a/app/src/app/rules/page.tsx b/app/src/app/rules/page.tsx
index b2eccfff..cf267b2f 100644
--- a/app/src/app/rules/page.tsx
+++ b/app/src/app/rules/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { pageMetadata } from "@/lib/seo";
 import Link from "next/link";
-import { ArrowDown, ArrowRight, ArrowUpRight, ChevronDown, FileCode2, LockKeyhole } from "lucide-react";
+import { ArrowDown, ArrowRight, ArrowUpRight, BookOpen, Check, ChevronDown, CircleAlert, Coins, FileCode2, LockKeyhole, Rocket } from "lucide-react";
 import SectionIntro from "@/components/sections/SectionIntro";
 import shell from "@/components/sections/SectionShell.module.css";
 import styles from "@/components/sections/RulesGuide.module.css";
@@ -9,6 +9,7 @@ import { launchpad } from "@/lib/launchpad/config";
 import { CHAINS, CHAIN_KEYS, CHAIN_LABELS, explorerAddress } from "@/lib/chainPublic";
 import { BRAND_GITHUB } from "@/lib/brand";
 import LaunchMachine from "@/components/launchpad/LaunchMachine";
+import { ChainLogo } from "@/components/launchpad/ChainLogo";
 
 export const metadata: Metadata = pageMetadata({ path: "/rules", title: "How it works", description: "What a launch does on-chain, what it costs (gas), and what can never happen to your liquidity." });
 
@@ -26,8 +27,9 @@ const FIXED = [
   ["No admin", "No owner, no pause, no upgrade, no allowlist. The contracts are the same for everyone, forever."],
 ] as const;
 
+/** The guide's sections, each with the mark its heading carries. */
 const CONTENTS = [
-  ["launchpad", "The launch"], ["fees", "Fees & routing"], ["immutable", "What stays fixed"], ["know", "Before you begin"], ["contracts", "Contracts"],
+  ["launchpad", "The launch", Rocket], ["fees", "Fees & routing", Coins], ["immutable", "What stays fixed", LockKeyhole], ["know", "Before you begin", CircleAlert], ["contracts", "Contracts", FileCode2],
 ] as const;
 
 /** Verification records stay chain-specific and point to each deployed contract. */
@@ -50,7 +52,7 @@ const VERIFIERS: Record<(typeof CHAIN_KEYS)[number], { name: string; url: (addr:
 export default function RulesPage() {
   return (
     <main className={`${shell.page} ${styles.guide}`}>
-      <SectionIntro eyebrow="The protocol, explained" title="How it works" description="One transaction on Base, Robinhood Chain or Arc. Your token, a market, and a permanently locked liquidity position. You only pay gas.">
+      <SectionIntro eyebrow="The protocol, explained" icon={<BookOpen />} title="How it works" description="One transaction on Base, Robinhood Chain or Arc. Your token, a market, and a permanently locked liquidity position. You only pay gas.">
         <Link href="/launch" className={shell.action}>Launch a token <ArrowRight size={15} aria-hidden="true" /></Link>
         <a href="#contracts" className={shell.textLink}>Verify the contracts <ArrowDown size={14} aria-hidden="true" /></a>
       </SectionIntro>
@@ -60,7 +62,7 @@ export default function RulesPage() {
           <nav aria-label="On this page">
             <p className={styles.eyebrow}>In this guide</p>
             <ol>
-              {CONTENTS.map(([id, title], i) => <li key={id}><a href={`#${id}`}><span>{String(i + 1).padStart(2, "0")}</span>{title}</a></li>)}
+              {CONTENTS.map(([id, title, Icon]) => <li key={id}><a href={`#${id}`}><span aria-hidden="true"><Icon size={13} /></span>{title}</a></li>)}
             </ol>
           </nav>
           <a href={BRAND_GITHUB} target="_blank" rel="noreferrer" className={styles.sourceLink}><FileCode2 size={16} aria-hidden="true" /> Read the source <ArrowUpRight size={13} aria-hidden="true" /></a>
@@ -69,8 +71,8 @@ export default function RulesPage() {
         <div className={styles.article}>
           <section className={shell.anchorSection} id="launchpad" aria-labelledby="launch-heading">
             <div className={styles.sectionHeading}>
-              <div><p className={styles.eyebrow}>01 / The launch</p><h2 id="launch-heading">One signature.<br />Four things happen.</h2></div>
-              <p>All in the same transaction.<br />No separate setup. No platform fee.</p>
+              <div><p className={styles.eyebrow}><Rocket size={14} aria-hidden="true" />The launch</p><h2 id="launch-heading">One signature.<br />Four things happen.</h2></div>
+              <p>All in the same transaction. <br />No separate setup. No platform fee.</p>
             </div>
             {/* the animated walk-through that used to open the home page: token, pool, lock */}
             <div className={styles.machine}><LaunchMachine /></div>
@@ -87,7 +89,7 @@ export default function RulesPage() {
           </section>
 
           <section className={shell.anchorSection} id="fees" aria-labelledby="fees-heading">
-            <div className={styles.sectionHeading}><div><p className={styles.eyebrow}>02 / Fees & routing</p><h2 id="fees-heading">Know where it goes.</h2></div></div>
+            <div className={styles.sectionHeading}><div><p className={styles.eyebrow}><Coins size={14} aria-hidden="true" />Fees & routing</p><h2 id="fees-heading">Know where it goes.</h2></div></div>
             <div className={styles.feePanel}>
               <div className={styles.platformFee}><span className={styles.eyebrow}>Platform fee</span><strong>0%</strong><p>We take nothing.<br />Gas is paid to the network.</p><a href="#contracts">Check the code <ArrowUpRight size={13} aria-hidden="true" /></a></div>
               <div className={styles.tradingFees}>
@@ -106,12 +108,12 @@ export default function RulesPage() {
           </section>
 
           <section className={shell.anchorSection} id="immutable" aria-labelledby="fixed-heading">
-            <div className={styles.sectionHeading}><div><p className={styles.eyebrow}>03 / What stays fixed</p><h2 id="fixed-heading">Code, not a promise.</h2></div><a href="#contracts" className={shell.textLink}>Read the contracts <ArrowUpRight size={14} aria-hidden="true" /></a></div>
-            <ul className={styles.fixedList}>{FIXED.map(([title, description]) => <li key={title}><span className={styles.fixedMark} aria-hidden="true">×</span><div><h3>{title}</h3><p>{description}</p></div></li>)}</ul>
+            <div className={styles.sectionHeading}><div><p className={styles.eyebrow}><LockKeyhole size={14} aria-hidden="true" />What stays fixed</p><h2 id="fixed-heading">Code, not a promise.</h2></div><a href="#contracts" className={shell.textLink}>Read the contracts <ArrowUpRight size={14} aria-hidden="true" /></a></div>
+            <ul className={styles.fixedList}>{FIXED.map(([title, description]) => <li key={title}><span className={styles.fixedMark} aria-hidden="true"><Check size={12} strokeWidth={3} /></span><div><h3>{title}</h3><p>{description}</p></div></li>)}</ul>
           </section>
 
           <section className={shell.anchorSection} id="know" aria-labelledby="know-heading">
-            <div className={styles.sectionHeading}><div><p className={styles.eyebrow}>04 / Before you begin</p><h2 id="know-heading">Locked liquidity.<br />Not a guarantee of value.</h2></div></div>
+            <div className={styles.sectionHeading}><div><p className={styles.eyebrow}><CircleAlert size={14} aria-hidden="true" />Before you begin</p><h2 id="know-heading">Locked liquidity.<br />Not a guarantee of value.</h2></div></div>
             <p className={styles.riskIntro}>Tokens launched here are created by their launchers, not by openlaunch. Do your own research; a locked pool does not make a token valuable. Nothing is refundable.</p>
             <div className={styles.questions}>
               <details open><summary>How does the price move?<ChevronDown size={17} aria-hidden="true" /></summary><div><p>Price follows a single-sided Uniswap v4 curve: the first buyers get the most tokens per unit of the quote asset, and every buy moves the price up. Sells move it down.</p><p>There is no anti-snipe mechanism. Bots can buy in the first block like anyone else.</p><p>The launch form suggests a small first buy (about $25) so your token opens with a holder and a price; clear it and the launch stays free.</p></div></details>
@@ -123,13 +125,13 @@ export default function RulesPage() {
           </section>
 
           <section className={shell.anchorSection} id="contracts" aria-labelledby="contracts-heading">
-            <div className={styles.sectionHeading}><div><p className={styles.eyebrow}>05 / The source of truth</p><h2 id="contracts-heading">Don&apos;t take our word for it.</h2></div><FileCode2 size={28} className={styles.contractIcon} aria-hidden="true" /></div>
+            <div className={styles.sectionHeading}><div><p className={styles.eyebrow}><FileCode2 size={14} aria-hidden="true" />The source of truth</p><h2 id="contracts-heading">Don&apos;t take our word for it.</h2></div></div>
             <p className={styles.contractIntro}>Contracts, addresses and source verification. The same contract design on every chain, with chain-specific Uniswap deployments.</p>
             <div className={styles.registry}>
               {CHAIN_KEYS.map((chain) => {
                 const config = launchpad(chain);
                 return <section key={chain} className={styles.network} aria-labelledby={`${chain}-contracts`}>
-                  <header><h3 id={`${chain}-contracts`}>{CHAIN_LABELS[chain]}</h3><span>Chain ID <strong>{CHAINS[chain].id}</strong></span></header>
+                  <header><h3 id={`${chain}-contracts`}><ChainLogo chain={chain} size={18} />{CHAIN_LABELS[chain]}</h3><span>Chain ID <strong>{CHAINS[chain].id}</strong></span></header>
                   <dl className={styles.addresses}>{(["factory", "locker"] as const).map((kind) => {
                     const address = config[kind];
                     return <div key={kind}><dt>{kind === "factory" ? "Factory" : "Locker"}</dt><dd>{address ? <a href={explorerAddress(chain, address)} target="_blank" rel="noreferrer" aria-label={`${CHAIN_LABELS[chain]} ${kind}: ${address}`}><span>{address}</span><ArrowUpRight size={14} aria-hidden="true" /></a> : <span className={styles.notDeployed}>Not deployed yet</span>}</dd></div>;
diff --git a/app/src/components/Skeleton.tsx b/app/src/components/Skeleton.tsx
index 6475c281..75c19dd9 100644
--- a/app/src/components/Skeleton.tsx
+++ b/app/src/components/Skeleton.tsx
@@ -82,7 +82,8 @@ export function SkFeedPost({ i }: { i: number }) {
         </div>
         <Sk className="h-4 w-4 shrink-0" />
       </div>
-      <div className="mt-[18px]">
+      {/* the body sits in the post's speech bubble */}
+      <div className="mt-[18px] rounded-[6px_16px_16px_16px] bg-ink/[0.045] px-4 py-3">
         {Array.from({ length: lines }, (_, n) => <div key={n} className="flex h-[26px] items-center"><Sk className="h-3.5" style={{ width: n === lines - 1 ? `${30 + ((i * 23) % 45)}%` : "100%" }} /></div>)}
       </div>
       <div className="mt-[18px] flex items-center gap-2"><Sk className="h-5 w-5 shrink-0 rounded-md" /><Sk className="h-3 w-44 max-w-full" /></div>
diff --git a/app/src/components/launchpad/MeDashboard.module.css b/app/src/components/launchpad/MeDashboard.module.css
index ba2e14f2..37729bae 100644
--- a/app/src/components/launchpad/MeDashboard.module.css
+++ b/app/src/components/launchpad/MeDashboard.module.css
@@ -1,111 +1,129 @@
-.dashboard { min-width: 0; margin-top: 32px; color: var(--color-body); }
+.dashboard { min-width: 0; color: var(--color-body); }
 .dashboard :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; border-radius: 6px; }
-.welcome { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-line); border-radius: 20px; overflow: hidden; }
-.welcomeMain { padding: 40px; background: var(--color-card); }
-.walletMark { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--color-line-strong); border-radius: 16px; color: var(--color-ink); margin-bottom: 28px; }
-.eyebrow { color: var(--color-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
-.welcomeMain h2 { margin-top: 12px; color: var(--color-ink); font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -.04em; }
+/* signed out: one card, the invitation on the left and what connecting unlocks on the right */
+.welcome { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); overflow: hidden; }
+.welcomeMain { padding: 36px; }
+.walletMark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent); border-radius: 14px; background: var(--color-brand-soft); color: var(--color-brand); }
+/* a label in sentence case, never a tracked all-caps eyebrow */
+.eyebrow { color: var(--color-muted); font-size: 12px; font-weight: 500; }
+.welcomeMain h2 { margin-top: 10px; color: var(--color-ink); font-size: 34px; font-weight: 700; line-height: 1.12; letter-spacing: -.04em; }
 .welcomeMain h2 span { color: var(--color-muted); }
-.welcomeCopy { max-width: 340px; margin-top: 20px; font-size: 14px; line-height: 1.75; text-wrap: pretty; }
-.connectButton, .outlineButton, .quietButton, .refresh { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--color-line-strong); border-radius: 9999px; color: var(--color-ink); background: var(--color-paper); font-size: 13px; font-weight: 600; cursor: pointer; transition: color 160ms, background-color 160ms, border-color 160ms; }
-.connectButton { margin-top: 28px; background: var(--color-ink); color: var(--color-inverse); border-color: var(--color-ink); padding-inline: 20px; }
-.connectButton:hover:not(:disabled) { background: var(--color-body); border-color: var(--color-body); }
-.outlineButton:hover:not(:disabled), .refresh:hover:not(:disabled) { border-color: var(--color-ink); background: var(--color-card); }
-.quietButton { background: transparent; border-color: transparent; }
-.quietButton:hover:not(:disabled) { background: var(--color-card); border-color: var(--color-line); }
+.welcomeCopy { max-width: 360px; margin-top: 16px; font-size: 14px; line-height: 1.75; text-wrap: pretty; }
+/* the site's buttons: rounded rectangles; the one to connect is filled in the ink colour, like the trade box's */
+.connectButton, .outlineButton, .quietButton, .refresh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--color-line-strong); border-radius: 12px; color: var(--color-ink); background: var(--color-card); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 160ms, background-color 160ms, border-color 160ms, opacity 160ms, transform 150ms; }
+/* connecting is this page's one action: the home hero's button shape (an icon tile, the words, the arrow), filled in ink because the header's Launch keeps the screen's one blue */
+.connectButton { gap: 12px; min-height: 52px; margin-top: 24px; padding: 8px 22px 8px 8px; border-radius: 16px; background: var(--color-ink); color: var(--color-inverse); border-color: var(--color-ink); font-size: 15px; }
+.connectButton:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
+.buttonTile { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; background: color-mix(in srgb, var(--color-inverse) 15%, transparent); }
+/* collecting fees, in the green fees wear everywhere on the site */
+.collectButton { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--color-up) 35%, transparent); border-radius: 12px; background: var(--color-up-soft); color: var(--color-up); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color 160ms, background-color 160ms, color 160ms, transform 150ms; }
+.collectButton:hover:not(:disabled) { border-color: var(--color-up); }
+.collectButton:active:not(:disabled) { transform: scale(.98); }
+.dashboard .collectButton:disabled { opacity: 1; border-color: var(--color-line); background: transparent; color: var(--color-muted); }
+.outlineButton:hover:not(:disabled), .refresh:hover:not(:disabled) { background: var(--color-paper); border-color: color-mix(in srgb, var(--color-ink) 40%, transparent); }
+.quietButton { gap: 6px; background: transparent; border-color: transparent; color: var(--color-body); }
+.quietButton:hover:not(:disabled) { background: color-mix(in srgb, var(--color-ink) 5%, transparent); color: var(--color-ink); }
+:is(.connectButton, .outlineButton, .quietButton, .refresh):active:not(:disabled) { transform: scale(.98); }
 .dashboard button:disabled { opacity: .5; cursor: not-allowed; }
-.readOnly { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; max-width: 330px; color: var(--color-muted); font-size: 11px; line-height: 1.75; text-wrap: pretty; }
+.readOnly { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; max-width: 340px; color: var(--color-muted); font-size: 12px; line-height: 1.7; text-wrap: pretty; }
 .readOnly svg { margin-top: 2px; flex-shrink: 0; }
-.welcomeGuide { padding: 40px; border-left: 1px solid var(--color-line); }
-.capabilities { margin-top: 8px; }
-.capabilities li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-block: 26px; border-bottom: 1px solid var(--color-line); }
-.step { color: var(--color-muted); font-family: var(--font-mono); font-size: 11px; padding-top: 3px; }
-.capabilities h3 { display: flex; align-items: center; gap: 10px; color: var(--color-ink); font-size: 15px; font-weight: 600; }
-.capabilities h3 svg { flex-shrink: 0; }
-.capabilities p { margin-top: 10px; color: var(--color-muted); font-size: 13px; line-height: 1.75; text-wrap: pretty; }
-.browseLink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; color: var(--color-ink); font-size: 12px; }
+.welcomeGuide { padding: 36px; border-left: 1px solid var(--color-line); background: var(--color-paper); }
+.capabilities { margin-top: 6px; }
+.capabilities li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-block: 20px; border-bottom: 1px solid var(--color-line); }
+/* an icon tile, as in the navigation menu */
+.capIcon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-card); color: var(--color-body); }
+.capabilities h3 { padding-top: 1px; color: var(--color-ink); font-size: 15px; font-weight: 600; }
+.capabilities p { margin-top: 6px; color: var(--color-muted); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
+.browseLink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; color: var(--color-ink); font-size: 13px; font-weight: 500; }
 .browseLink:hover { text-decoration: underline; text-underline-offset: 4px; }
-.disclosure { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; color: var(--color-muted); font-size: 11px; line-height: 1.75; }
+.disclosure { display: flex; justify-content: space-between; gap: 20px; margin-top: 20px; color: var(--color-muted); font-size: 12px; line-height: 1.7; }
 .disclosure span { flex-shrink: 0; color: var(--color-body); font-weight: 500; }
 .disclosure p { max-width: 560px; text-align: right; text-wrap: pretty; }
-.walletBar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; border-top: 1px solid var(--color-line); }
+/* signed in: the wallet as a card above the figures */
+.walletBar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 12px 14px 12px 12px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); }
 .identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
-.walletIcon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--color-line); background: var(--color-card); color: var(--color-ink); }
-.identity p { font-size: 11px; color: var(--color-muted); margin-bottom: 2px; }
-.address { font-family: var(--font-mono); font-size: 13px; color: var(--color-ink); }
-.walletUtilities { display: flex; align-items: center; gap: 16px; }
-.updateNote { font-size: 11px; color: var(--color-muted); }
-.refresh { padding-inline: 14px; font-size: 12px; }
-.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--color-line); border-radius: 16px; overflow: hidden; }
-.stat { min-width: 0; padding: 24px; background: var(--color-card); }
-.stat + .stat { border-left: 1px solid var(--color-line); }
-.stat dt { color: var(--color-muted); font-size: 12px; }
-.stat dd:not(.statHint) { margin-top: 10px; font-family: var(--font-mono); font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.04em; overflow-wrap: anywhere; }
-.statHint { margin-top: 8px; color: var(--color-muted); font-size: 10px; line-height: 1.5; text-wrap: pretty; }
-.ledger { margin-top: 28px; border: 1px solid var(--color-line); border-radius: 16px; }
+/* the wallet's own avatar, the one the header shows */
+.walletIcon { display: inline-flex; flex-shrink: 0; }
+.identity p { font-size: 12px; color: var(--color-muted); margin-bottom: 2px; }
+.address { font-family: var(--font-code); font-size: 14px; color: var(--color-ink); }
+.walletUtilities { display: flex; align-items: center; gap: 14px; }
+.updateNote { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-muted); }
+.refresh { padding-inline: 14px; font-size: 13px; }
+/* the four figures as hairline tiles: the lines are the gap over a line-coloured grid */
+.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-line); overflow: hidden; }
+.stat { min-width: 0; padding: 20px 22px; background: var(--color-card); }
+.stat dt { display: flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: 12px; }
+.statIcon { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border: 1px solid var(--color-line); border-radius: 7px; background: var(--color-paper); color: var(--color-body); }
+.stat dd:not(.statHint) { margin-top: 8px; font-family: var(--font-mono); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.04em; overflow-wrap: anywhere; }
+.statHint { margin-top: 6px; color: var(--color-muted); font-size: 11px; line-height: 1.5; text-wrap: pretty; }
+.ledger { margin-top: 20px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); overflow: hidden; }
 .tabsList { padding-inline: 20px; gap: 28px; }
-.tabCount { font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; color: var(--color-muted); }
-.panelHeading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 20px; }
+.tabCount { margin-left: 2px; padding: 1px 6px; border-radius: 999px; background: var(--color-paper); font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; color: var(--color-muted); }
+.panelHeading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px; }
 .panelHeading h2 { color: var(--color-ink); font-size: 15px; font-weight: 600; }
-.panelHeading p { color: var(--color-muted); font-size: 12px; margin-top: 4px; text-wrap: pretty; }
+.panelHeading p { color: var(--color-muted); font-size: 12px; margin-top: 3px; text-wrap: pretty; }
 .tokenList { min-width: 0; }
 .tokenList > li { border-top: 1px solid var(--color-line); }
-.launchRow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px auto; align-items: center; gap: 16px; padding: 20px; }
+.launchRow { display: grid; grid-template-columns: minmax(0, 1fr) 132px 132px auto; align-items: center; gap: 16px; padding: 16px 20px; transition: background-color 160ms; }
+.launchRow:hover { background: color-mix(in srgb, var(--color-ink) 2.5%, transparent); }
 .tokenIdentity { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; }
-.tokenIdentity:hover .tokenName { text-decoration: underline; text-underline-offset: 4px; }
+.tokenIdentity:hover .tokenName > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
+/* the token's mark with its chain on the corner, as on the market board */
+.avatar { position: relative; display: inline-flex; flex-shrink: 0; }
 .tokenName { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
 .tokenName > span:first-child { max-width: 100%; }
-.tokenMeta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; margin-top: 4px; color: var(--color-muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.75; }
+.tokenMeta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; margin-top: 4px; color: var(--color-muted); font-size: 12px; line-height: 1.7; font-variant-numeric: tabular-nums; }
 .figure { min-width: 0; text-align: right; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .rowActions { display: flex; align-items: center; gap: 4px; }
-.rowActions button { border-radius: 10px; padding-inline: 12px; font-size: 12px; }
-.panelNote { display: flex; align-items: flex-start; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 11px; line-height: 1.7; text-wrap: pretty; }
+.rowActions button { padding-inline: 14px; font-size: 13px; }
+.panelNote { display: flex; align-items: flex-start; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--color-line); background: var(--color-paper); color: var(--color-muted); font-size: 12px; line-height: 1.7; text-wrap: pretty; }
 .panelNote svg { flex-shrink: 0; margin-top: 2px; }
-.holdingRow { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 20px; transition: background-color 160ms; }
-.holdingRow:hover { background: var(--color-card); }
+.holdingRow { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px 20px; transition: background-color 160ms; }
+.holdingRow:hover { background: color-mix(in srgb, var(--color-ink) 2.5%, transparent); }
 .holdingValue { flex-shrink: 0; max-width: 40%; text-align: right; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .tradeScroll { max-width: 100%; overflow-x: auto; border-top: 1px solid var(--color-line); }
-.trades { width: 100%; text-align: left; font-size: 12px; }
-.trades th { font-size: 10px; font-weight: 500; color: var(--color-muted); white-space: nowrap; background: var(--color-card); }
+.trades { width: 100%; text-align: left; font-size: 13px; }
+.trades th { font-size: 11px; font-weight: 500; color: var(--color-muted); white-space: nowrap; background: var(--color-paper); }
 .trades :is(th, td) { padding: 12px 20px; }
 .trades td { color: var(--color-ink); }
 .trades :is(th, td):nth-child(n + 3) { text-align: right; }
 .trades td:nth-child(3) { white-space: nowrap; }
 .trades td a { display: inline-flex; align-items: center; min-height: 44px; }
 .trades td a:hover { text-decoration: underline; text-underline-offset: 4px; }
-.tradeSide { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 600; }
-.tradeChain { display: block; font-size: 10px; color: var(--color-muted); }
+/* buy and sell as tinted pills, as on the token page */
+.tradeSide { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; }
+.tradeSide[data-side="buy"] { background: var(--color-up-soft); color: var(--color-up); }
+.tradeSide[data-side="sell"] { background: var(--color-down-soft); color: var(--color-down-ink); }
+.tradeChain { display: block; font-size: 11px; color: var(--color-muted); }
 .trades .txLink { justify-content: flex-end; gap: 5px; color: var(--color-muted); white-space: nowrap; }
-.empty { display: flex; align-items: center; flex-direction: column; text-align: center; border-top: 1px solid var(--color-line); padding: 40px 24px 48px; }
-.emptyIcon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; background: var(--color-card); border: 1px dashed var(--color-line-strong); border-radius: 16px; color: var(--color-muted); }
+.empty { display: flex; align-items: center; flex-direction: column; text-align: center; border-top: 1px solid var(--color-line); padding: 40px 24px 44px; }
+.emptyIcon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-paper); color: var(--color-muted); }
 .empty h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--color-ink); }
-.empty p { max-width: 350px; margin-top: 8px; color: var(--color-muted); font-size: 13px; line-height: 1.75; text-wrap: pretty; }
-.empty .outlineButton { margin-top: 24px; }
-.error { margin-block: 16px; padding: 20px; border: 1px solid var(--color-line-strong); border-radius: 12px; font-size: 13px; line-height: 1.75; }
+.empty p { max-width: 360px; margin-top: 8px; color: var(--color-muted); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
+.empty .outlineButton { margin-top: 22px; }
+.error { margin-block: 16px; padding: 20px; border: 1px solid var(--color-line-strong); border-radius: 16px; background: var(--color-card); font-size: 13px; line-height: 1.7; }
 .error h2 { color: var(--color-ink); font-size: 16px; font-weight: 600; }
 .error p { margin-block: 8px 16px; color: var(--color-muted); }
-.loading { display: grid; gap: 28px; }
+.loading { display: grid; gap: 20px; }
 .loadingStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
 .loadingRows { border: 1px solid var(--color-line); border-radius: 16px; overflow: hidden; }
 @media (max-width: 1023px) {
   .welcomeMain, .welcomeGuide { padding: 28px; }
-  .welcomeMain h2 { font-size: 32px; }
+  .welcomeMain h2 { font-size: 30px; }
   .launchRow { grid-template-columns: minmax(0, 1fr) 120px 120px; }
   .rowActions { grid-column: 1 / -1; justify-content: flex-end; }
-  .stat { padding: 20px; }
+  .stat { padding: 18px; }
   .stat dd:not(.statHint) { font-size: 22px; }
 }
 @media (max-width: 767px) {
   .welcome { grid-template-columns: minmax(0, 1fr); }
   .welcomeGuide { border-left: 0; border-top: 1px solid var(--color-line); }
-  .welcomeMain, .welcomeGuide { padding: 28px 24px; }
+  .welcomeMain, .welcomeGuide { padding: 26px 22px; }
   .welcomeCopy, .readOnly { max-width: none; }
-  .welcomeMain h2 { font-size: 34px; }
+  .welcomeMain h2 { font-size: 30px; }
   .stats, .loadingStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .stat:nth-child(3) { border-left: 0; }
-  .stat:nth-child(n + 3) { border-top: 1px solid var(--color-line); }
   .updateNote { display: none; }
-  .launchRow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
+  .launchRow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
   .tokenIdentity { grid-column: 1 / -1; }
   .figure { text-align: left; }
   .rowActions { justify-content: flex-start; }
@@ -117,11 +135,11 @@
   .holdingValue { flex-basis: 100%; max-width: none; padding-left: 48px; text-align: left; }
 }
 @media (max-width: 399px) {
-  .welcomeMain, .welcomeGuide { padding: 24px 20px; }
-  .welcomeMain h2 { font-size: 30px; }
-  .capabilities li { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
-  .capabilities h3 { align-items: flex-start; font-size: 14px; gap: 8px; }
-  .capabilities h3 svg { margin-top: 2px; width: 16px; }
+  .welcomeMain, .welcomeGuide { padding: 22px 18px; }
+  .welcomeMain h2 { font-size: 28px; }
+  .capabilities li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
+  .capIcon { width: 32px; height: 32px; }
+  .capabilities h3 { font-size: 14px; }
   .tabsList { gap: 20px; padding-inline: 16px; }
   .tabCount { display: none; }
   .walletBar { gap: 8px; }
@@ -129,9 +147,10 @@
   .refresh { padding-inline: 12px; }
   .stat { padding: 16px; }
   .stat dd:not(.statHint) { font-size: 19px; }
-  .panelHeading, .launchRow { padding: 20px 16px; }
+  .panelHeading, .launchRow { padding: 18px 16px; }
   .trades { min-width: 360px; }
 }
 @media (prefers-reduced-motion: reduce) {
   .dashboard *, .dashboard *::before, .dashboard *::after { transition: none !important; }
+  :is(.connectButton, .outlineButton, .quietButton, .refresh, .collectButton):active:not(:disabled), .connectButton:hover:not(:disabled) { transform: none; }
 }
diff --git a/app/src/components/launchpad/MeDashboard.tsx b/app/src/components/launchpad/MeDashboard.tsx
index 1f15f3cb..3ae07bde 100644
--- a/app/src/components/launchpad/MeDashboard.tsx
+++ b/app/src/components/launchpad/MeDashboard.tsx
@@ -2,12 +2,14 @@
 
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
-import { ArrowDownLeft, ArrowRight, ArrowUpRight, Coins, Layers3, LockKeyhole, RefreshCw, Wallet } from "lucide-react";
-import { useAccount, useConfig } from "wagmi";
+import { ArrowDownLeft, ArrowRight, ArrowUpRight, Coins, Hourglass, Layers3, LockKeyhole, PencilLine, RefreshCw, Wallet } from "lucide-react";
+import { useConfig } from "wagmi";
+import { useHydratedAccount } from "@/lib/useHydratedAccount";
 import { getPublicClient, getWalletClient } from "wagmi/actions";
 import type { Address } from "viem";
 import TokenAvatar from "./TokenAvatar";
-import ChainBadge from "./ChainBadge";
+import { ChainCorner, ChainLogoStack } from "./ChainLogo";
+import WalletAvatar from "@/components/WalletAvatar";
 import { QuoteBrandBadge } from "./MuseworldBadge";
 import UnlistedPairBadge from "./UnlistedPairBadge";
 import FeeChip, { feeModeOf } from "./FeeChip";
@@ -15,7 +17,7 @@ import EditTokenSheet from "./EditTokenSheet";
 import { toast } from "./TxToasts";
 import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/vendor/tabs";
 import { LAUNCH_LOCKER_ABI, ERC20_MIN_ABI } from "@/lib/launchpad/abi";
-import { launchpad } from "@/lib/launchpad/config";
+import { VISIBLE_CHAINS, launchpad } from "@/lib/launchpad/config";
 import { earnedSides, feeShareBps, feeSidesUsd, hasFees, holdingUsd, isBurnOnly, type FeeSides } from "@/lib/launchpad/creator";
 import { fmtCompact, fmtQuote, fmtTokens, fmtUsd } from "@/lib/launchpad/math";
 import { capDisplay } from "@/lib/launchpad/market-cap";
@@ -40,7 +42,7 @@ const key = (l: { chain: ChainKey; token: string }) => `${l.chain}:${l.token}`;
  * and creator-signed metadata edits. No server keys, no sessions.
  */
 export default function MeDashboard() {
-  const { address, isConnected } = useAccount();
+  const { address, isConnected } = useHydratedAccount();
   // A different account gets a fresh data, balance, and editing boundary.
   return <WalletDashboard key={address?.toLowerCase() ?? "disconnected"} address={address} isConnected={isConnected} />;
 }
@@ -156,11 +158,12 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
       <div className={styles.dashboard}>
         <section className={styles.welcome} aria-labelledby="wallet-welcome">
           <div className={styles.welcomeMain}>
-            <span className={styles.walletMark} aria-hidden="true"><Wallet size={28} strokeWidth={1.5} /></span>
+            <span className={styles.walletMark} aria-hidden="true"><Wallet size={22} strokeWidth={1.75} /></span>
             <p className={styles.eyebrow}>Start with your wallet</p>
             <h2 id="wallet-welcome">Your wallet.<br /><span>Your workspace.</span></h2>
             <p className={styles.welcomeCopy}>Bring your launches, fees and trading activity into one view. No new account to create.</p>
             <ConnectWallet className={styles.connectButton}>
+              <span className={styles.buttonTile} aria-hidden="true"><Wallet size={17} /></span>
               Connect wallet<ArrowRight size={16} aria-hidden="true" />
             </ConnectWallet>
             <p className={styles.readOnly}><LockKeyhole size={14} aria-hidden="true" />Connecting lets you read. Transactions and edits need your signature.</p>
@@ -168,9 +171,9 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
           <div className={styles.welcomeGuide}>
             <p className={styles.eyebrow}>After you connect</p>
             <ol className={styles.capabilities}>
-              <li><span className={styles.step}>01</span><div><h3><Layers3 size={18} aria-hidden="true" />Manage your launches</h3><p>Open each token, update its description, logo and links. On-chain settings stay fixed.</p></div></li>
-              <li><span className={styles.step}>02</span><div><h3><Coins size={18} aria-hidden="true" />See where fees go</h3><p>View your beneficiary share and uncollected fees. Collect to the recipients set at launch.</p></div></li>
-              <li><span className={styles.step}>03</span><div><h3><ArrowDownLeft size={18} aria-hidden="true" />Follow your activity</h3><p>Check token balances and past trades across every chain, with links to the transactions.</p></div></li>
+              <li><span className={styles.capIcon} aria-hidden="true"><Layers3 size={17} /></span><div><h3>Manage your launches</h3><p>Open each token, update its description, logo and links. On-chain settings stay fixed.</p></div></li>
+              <li><span className={styles.capIcon} aria-hidden="true"><Coins size={17} /></span><div><h3>See where fees go</h3><p>View your beneficiary share and uncollected fees. Collect to the recipients set at launch.</p></div></li>
+              <li><span className={styles.capIcon} aria-hidden="true"><ArrowDownLeft size={17} /></span><div><h3>Follow your activity</h3><p>Check token balances and past trades across every chain, with links to the transactions.</p></div></li>
             </ol>
             <Link href="/#launches" className={styles.browseLink}>Just exploring? Browse launches<ArrowUpRight size={15} aria-hidden="true" /></Link>
           </div>
@@ -189,8 +192,8 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
   const feesUnknown = me?.launches.some((l) => pending[key(l)] === null) ?? false;
 
   const walletBar = <div className={styles.walletBar}>
-    <div className={styles.identity}><span className={styles.walletIcon} aria-hidden="true"><Wallet size={19} /></span><div><p>Connected wallet</p><span className={styles.address} title={address}>{shortAddr(address)}</span></div></div>
-    <div className={styles.walletUtilities}><span className={styles.updateNote}>{refreshing ? "Updating your dashboard" : now ? "Latest loaded snapshot" : "Base + Robinhood Chain + Arc"}</span><button type="button" className={styles.refresh} onClick={() => void load()} disabled={refreshing || busy !== null}><RefreshCw size={15} aria-hidden="true" />{refreshing ? "Refreshing…" : "Refresh"}</button></div>
+    <div className={styles.identity}><span className={styles.walletIcon} aria-hidden="true"><WalletAvatar address={address} size={40} /></span><div><p>Connected wallet</p><span className={styles.address} title={address}>{shortAddr(address)}</span></div></div>
+    <div className={styles.walletUtilities}><span className={styles.updateNote}><ChainLogoStack chains={VISIBLE_CHAINS} size={16} />{refreshing ? "Updating your dashboard" : now ? "Latest loaded snapshot" : "Base + Robinhood Chain + Arc"}</span><button type="button" className={styles.refresh} onClick={() => void load()} disabled={refreshing || busy !== null}><RefreshCw size={15} aria-hidden="true" />{refreshing ? "Refreshing…" : "Refresh"}</button></div>
   </div>;
 
   if (!me) {
@@ -206,10 +209,10 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
       {walletBar}
       {err ? <p className={styles.error} role="alert">Refresh failed: {err}. Showing the last loaded data. Try Refresh again.</p> : null}
       <dl className={styles.stats}>
-        <Stat k="Your launches" v={String(me.launches.length)} hint="Across all chains" />
-        <Stat k="Fees earned" v={fmtUsd(earnedUsd, { compact: true })} hint="Your share, USD-priced launches" accent="up" />
-        <Stat k="Uncollected" v={feesReading ? "Reading…" : feesUnknown ? "—" : String(collectable.length)} hint={feesUnknown ? "Some pools could not be read" : "Pools with fees to collect"} accent={!feesReading && !feesUnknown && collectable.length ? "warm" : undefined} />
-        <Stat k="Holdings value" v={holdingsReading ? "Reading…" : holdingsUnknown ? "—" : fmtUsd(holdingsUsd, { compact: true })} hint={holdingsUnknown ? "A balance or price is unavailable" : "Current estimated USD value"} />
+        <Stat k="Your launches" icon={<Layers3 size={14} />} v={String(me.launches.length)} hint="Across all chains" />
+        <Stat k="Fees earned" icon={<Coins size={14} />} v={fmtUsd(earnedUsd, { compact: true })} hint="Your share, USD-priced launches" accent="up" />
+        <Stat k="Uncollected" icon={<Hourglass size={14} />} v={feesReading ? "Reading…" : feesUnknown ? "—" : String(collectable.length)} hint={feesUnknown ? "Some pools could not be read" : "Pools with fees to collect"} accent={!feesReading && !feesUnknown && collectable.length ? "warm" : undefined} />
+        <Stat k="Holdings value" icon={<Wallet size={14} />} v={holdingsReading ? "Reading…" : holdingsUnknown ? "—" : fmtUsd(holdingsUsd, { compact: true })} hint={holdingsUnknown ? "A balance or price is unavailable" : "Current estimated USD value"} />
       </dl>
 
       <Tabs defaultValue="launches" className={styles.ledger}>
@@ -223,8 +226,8 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
         <div className={styles.panelHeading}>
           <div><h2>Your launches</h2><p>Manage details and collect trading fees.</p></div>
           {collectable.length > 1 ? (
-            <button type="button" onClick={() => void collectAll()} disabled={busy !== null} className={styles.outlineButton}>
-              {busy ? "Collecting…" : `Collect all (${collectable.length})`}
+            <button type="button" onClick={() => void collectAll()} disabled={busy !== null} className={styles.collectButton}>
+              <Coins size={15} aria-hidden="true" />{busy ? "Collecting…" : `Collect all (${collectable.length})`}
             </button>
           ) : null}
         </div>
@@ -241,18 +244,18 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
             return (
               <li key={k} className={styles.launchRow}>
                   <Link href={`/t/${l.chain}/${l.token}`} className={styles.tokenIdentity}>
-                    <TokenAvatar chain={l.chain} token={l.token} symbol={l.symbol} image={l.image_url} size={40} />
+                    <span className={styles.avatar}><TokenAvatar chain={l.chain} token={l.token} symbol={l.symbol} image={l.image_url} size={40} className="rounded-xl" /><ChainCorner chain={l.chain} /></span>
                     <div className="min-w-0">
                       <div className={styles.tokenName}>
                         <span className="font-semibold text-[15px] text-ink truncate">{l.name}</span>
                         <span className="font-mono text-xs text-muted">{l.symbol}</span>
-                        <ChainBadge chain={l.chain} />
                         <QuoteBrandBadge quoteKey={l.quote_key} />
                         {l.quote_key === "other" ? <UnlistedPairBadge symbol={l.quote_symbol} /> : null}
                       </div>
                       <div className={styles.tokenMeta}>
                         <FeeChip lpFee={l.lp_fee} mode={feeModeOf(l.lp_fee, l.recipients)} />
-                        <span>mc {capDisplay(l.fdv_quote, l.quote_usd, { key: l.quote_key, symbol: l.quote_symbol, decimals: l.quote_decimals }).compact}</span>
+                        <span>{CHAIN_SHORT[l.chain]}</span>
+                        <span>· mc {capDisplay(l.fdv_quote, l.quote_usd, { key: l.quote_key, symbol: l.quote_symbol, decimals: l.quote_decimals }).compact}</span>
                         <span>· {l.buys + l.sells} trades</span>
                         {now ? <span suppressHydrationWarning>· {ago(l.block_time, now)} ago</span> : null}
                       </div>
@@ -269,11 +272,11 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
                     <div className="text-[11px] text-muted">uncollected</div>
                   </div>
                   <div className={styles.rowActions}>
-                    <button type="button" onClick={() => void collect(l)} disabled={busy !== null || !hasFees(p)} className={styles.outlineButton} aria-label={`Collect fees for ${l.symbol}`}>
-                      {busy === k ? "Collecting…" : "Collect"}
+                    <button type="button" onClick={() => void collect(l)} disabled={busy !== null || !hasFees(p)} className={styles.collectButton} aria-label={`Collect fees for ${l.symbol}`}>
+                      <Coins size={14} aria-hidden="true" />{busy === k ? "Collecting…" : "Collect"}
                     </button>
                     <button type="button" onClick={() => setEditing(l)} className={styles.quietButton} aria-label={`Edit ${l.symbol} details`}>
-                      Edit
+                      <PencilLine size={14} aria-hidden="true" />Edit
                     </button>
                   </div>
               </li>
@@ -294,17 +297,16 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
             return (
               <li key={key(t)}>
                 <Link href={`/t/${t.chain}/${t.token}`} className={styles.holdingRow}>
-                  <TokenAvatar chain={t.chain} token={t.token} symbol={t.symbol} image={t.image_url} size={36} />
+                  <span className={styles.avatar}><TokenAvatar chain={t.chain} token={t.token} symbol={t.symbol} image={t.image_url} size={36} className="rounded-xl" /><ChainCorner chain={t.chain} /></span>
                   <div className="min-w-0 flex-1">
                     <div className={styles.tokenName}>
                       <span className="font-semibold text-ink truncate">{t.name}</span>
                       <span className="font-mono text-xs text-muted">{t.symbol}</span>
-                      <ChainBadge chain={t.chain} />
                       <QuoteBrandBadge quoteKey={t.quote_key} />
                       {t.quote_key === "other" ? <UnlistedPairBadge symbol={t.quote_symbol} /> : null}
                     </div>
                     <div className={styles.tokenMeta}>
-                      {t.my_buys} buys · {t.my_sells} sells · mc {capDisplay(t.fdv_quote, t.quote_usd, { key: t.quote_key, symbol: t.quote_symbol, decimals: t.quote_decimals }).compact}
+                      {CHAIN_SHORT[t.chain]} · {t.my_buys} buys · {t.my_sells} sells · mc {capDisplay(t.fdv_quote, t.quote_usd, { key: t.quote_key, symbol: t.quote_symbol, decimals: t.quote_decimals }).compact}
                     </div>
                   </div>
                   <div className={styles.holdingValue}>
@@ -331,7 +333,7 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
               <tbody className="font-mono tnum">
                 {me.trades.map((t) => (
                   <tr key={t.tx_hash} className="border-b border-line last:border-0">
-                    <td><span className={`${styles.tradeSide} ${t.is_buy ? "text-up" : "text-down-ink"}`}>{t.is_buy ? <ArrowDownLeft size={14} aria-hidden="true" /> : <ArrowUpRight size={14} aria-hidden="true" />}{t.is_buy ? "Buy" : "Sell"}</span></td>
+                    <td><span className={styles.tradeSide} data-side={t.is_buy ? "buy" : "sell"}>{t.is_buy ? <ArrowDownLeft size={14} aria-hidden="true" /> : <ArrowUpRight size={14} aria-hidden="true" />}{t.is_buy ? "Buy" : "Sell"}</span></td>
                     <td><Link href={`/t/${t.chain}/${t.token}`}>{t.symbol}</Link> <span className={styles.tradeChain}>{CHAIN_SHORT[t.chain]}</span></td>
                     <td>{fmtQuote(t.quote_raw, t.quote_decimals, t.quote_symbol)}</td>
                     <td className={styles.usdColumn}>{t.usd !== null ? fmtUsd(t.usd) : "—"}</td>
@@ -354,10 +356,10 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
           chain={editing.chain}
           token={editing.token}
           symbol={editing.symbol}
-          initial={{ description: editing.description ?? "", image_url: editing.image_url ?? "", website: editing.website ?? "", x_handle: editing.x_handle ?? "" }}
+          initial={{ description: editing.description ?? "", image_url: editing.image_url ?? "", banner_url: editing.banner_url ?? "", website: editing.website ?? "", x_handle: editing.x_handle ?? "" }}
           onClose={() => setEditing(null)}
           onSaved={(f: EditFields) => {
-            setMe((m) => (m ? { ...m, launches: m.launches.map((l) => (key(l) === key(editing) ? { ...l, description: f.description || null, image_url: f.image_url || null, website: f.website || null, x_handle: f.x_handle || null } : l)) } : m));
+            setMe((m) => (m ? { ...m, launches: m.launches.map((l) => (key(l) === key(editing) ? { ...l, description: f.description || null, image_url: f.image_url || null, banner_url: f.banner_url || null, website: f.website || null, x_handle: f.x_handle || null } : l)) } : m));
             toast({ kind: "info", title: `${editing.symbol} details updated` });
           }}
         />
@@ -366,10 +368,10 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
   );
 }
 
-function Stat({ k, v, hint, accent }: { k: string; v: string; hint: string; accent?: "up" | "warm" }) {
+function Stat({ k, icon, v, hint, accent }: { k: string; icon: React.ReactNode; v: string; hint: string; accent?: "up" | "warm" }) {
   return (
     <div className={styles.stat}>
-      <dt>{k}</dt>
+      <dt><span className={styles.statIcon} aria-hidden="true">{icon}</span>{k}</dt>
       <dd className={accent === "up" ? "text-up" : accent === "warm" ? "text-warm-ink" : "text-ink"}>{v}</dd>
       <dd className={styles.statHint}>{hint}</dd>
     </div>
diff --git a/app/src/components/sections/Agents.module.css b/app/src/components/sections/Agents.module.css
index 861efb31..0e594939 100644
--- a/app/src/components/sections/Agents.module.css
+++ b/app/src/components/sections/Agents.module.css
@@ -1,112 +1,118 @@
 .page { color: var(--color-body); }
 .page a:focus-visible, .page button:focus-visible, .code:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; border-radius: 6px; }
-.entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 32px 0 40px; padding: 22px 24px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); }
-.entryHeading { display: flex; align-items: center; gap: 16px; min-width: 0; }
-.entryHeading > svg { flex-shrink: 0; color: var(--color-brand); }
+.entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 40px; padding: 20px 24px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); }
+.entryHeading { display: flex; align-items: center; gap: 14px; min-width: 0; }
+/* an icon tile in the brand tint, as on the other pages' notes */
+.entryIcon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent); border-radius: 12px; background: var(--color-brand-soft); color: var(--color-brand); }
 .entryHeading p { margin: 0; color: var(--color-ink); font-size: 15px; font-weight: 600; line-height: 1.5; }
-.entryHeading p span { display: block; margin-top: 3px; color: var(--color-muted); font-size: 12px; font-weight: 400; text-wrap: pretty; }
-.entry > a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; flex-shrink: 0; color: var(--color-ink); font-size: 13px; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 5px; }
-.entry > a:hover { text-decoration-color: var(--color-ink); }
+.entryHeading p span { display: block; margin-top: 2px; color: var(--color-muted); font-size: 13px; font-weight: 400; text-wrap: pretty; }
+.entry > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; flex-shrink: 0; border: 1px solid var(--color-line-strong); border-radius: 12px; color: var(--color-ink); font-size: 13px; font-weight: 600; transition: border-color 160ms, background-color 160ms; }
+.entry > a:hover { background: var(--color-paper); border-color: color-mix(in srgb, var(--color-ink) 40%, transparent); }
 .layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: start; gap: 48px; }
 .sidebar { position: sticky; top: 100px; min-width: 0; }
-.indexLabel { margin: 0 0 12px; color: var(--color-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
-.sidebar nav > a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 12px; color: var(--color-body); }
-.sidebar nav > a span { color: var(--color-muted); font-family: var(--font-mono); font-size: 10px; }
-.sidebar nav > a svg { margin-left: auto; color: var(--color-muted); }
-.sidebar nav > a:hover, .sidebar nav > a:focus-visible { color: var(--color-ink); }
-.sidebar nav > a:hover svg, .sidebar nav > a:focus-visible svg { color: var(--color-brand); }
-.sidebarNote { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 11px; line-height: 1.8; text-wrap: pretty; }
-.content { display: grid; gap: 48px; min-width: 0; }
+/* the page's index: sentence case, each section with its mark */
+.indexLabel { margin: 0 0 8px; color: var(--color-muted); font-size: 12px; font-weight: 500; }
+.sidebar nav > a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; margin-inline: -10px; border-radius: 10px; font-size: 13px; color: var(--color-body); transition: background-color 160ms, color 160ms; }
+.sidebar nav > a span { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-card); color: var(--color-muted); transition: color 160ms; }
+.sidebar nav > a > svg { margin-left: auto; color: var(--color-muted); }
+.sidebar nav > a:hover, .sidebar nav > a:focus-visible { color: var(--color-ink); background: color-mix(in srgb, var(--color-ink) 5%, transparent); }
+.sidebar nav > a:hover span, .sidebar nav > a:focus-visible span, .sidebar nav > a:hover > svg, .sidebar nav > a:focus-visible > svg { color: var(--color-brand); }
+.sidebarNote { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 12px; line-height: 1.8; text-wrap: pretty; }
+.content { display: grid; gap: 56px; min-width: 0; }
 .section { display: grid; gap: 20px; min-width: 0; }
-.section + .section { border-top: 1px solid var(--color-line); padding-top: 36px; }
-.sectionHeading { display: flex; align-items: flex-start; gap: 14px; }
-.sectionNumber { padding-top: 4px; color: var(--color-brand); font-family: var(--font-mono); font-size: 12px; }
+.section + .section { border-top: 1px solid var(--color-line); padding-top: 40px; }
+.sectionHeading { display: flex; align-items: center; gap: 14px; }
+.sectionIcon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent); border-radius: 12px; background: var(--color-brand-soft); color: var(--color-brand); }
 .sectionHeading h2 { margin: 0; color: var(--color-ink); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
-.sectionHeading p { margin: 6px 0 0; color: var(--color-muted); font-size: 13px; text-wrap: pretty; }
-.networks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--color-line); border-radius: 12px; }
-.network { min-width: 0; padding: 16px; }
-.network + .network { border-left: 1px solid var(--color-line); }
-.networkHeading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
-.networkHeading h3 { margin: 0; color: var(--color-ink); font-size: 13px; font-weight: 600; }
-.networkHeading > span { font-size: 10px; color: var(--color-muted); }
-.networkHeading b { font-family: var(--font-mono); font-weight: 400; }
-.network dl { display: grid; gap: 8px; margin-top: 16px; }
-.network dt { font-size: 10px; color: var(--color-muted); text-transform: capitalize; }
-.network dd { min-width: 0; margin: 0; font-size: 11px; }
+.sectionHeading p { margin: 4px 0 0; color: var(--color-muted); font-size: 13px; text-wrap: pretty; }
+.networks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-line); overflow: hidden; }
+.network { min-width: 0; padding: 18px; background: var(--color-card); }
+/* an odd chain out spans the row, so the grid never shows an empty, line-coloured cell */
+.network:last-child:nth-child(odd) { grid-column: 1 / -1; }
+.networkHeading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
+.networkHeading h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--color-ink); font-size: 14px; font-weight: 600; }
+.networkHeading > span { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid var(--color-line); border-radius: 999px; font-size: 11px; color: var(--color-muted); }
+.networkHeading b { margin-left: 4px; font-family: var(--font-mono); font-weight: 500; color: var(--color-body); }
+.network dl { display: grid; gap: 6px; margin-top: 14px; }
+.network dt { font-size: 11px; color: var(--color-muted); text-transform: capitalize; }
+.network dd { min-width: 0; margin: 0; font-size: 12px; }
 .network dd a { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--color-body); }
 .network dd a:hover { color: var(--color-ink); }
-.network dd code { min-width: 0; font-family: var(--font-mono); overflow-wrap: anywhere; line-height: 1.7; }
+.network dd code { min-width: 0; font-family: var(--font-code); overflow-wrap: anywhere; line-height: 1.7; }
 .network dd svg { flex-shrink: 0; color: var(--color-muted); }
-.prose { margin: 0; font-size: 13px; line-height: 1.9; text-wrap: pretty; }
-.prose code, .parameters code { color: var(--color-ink); font-family: var(--font-mono); font-size: .92em; overflow-wrap: anywhere; }
-.codePanel { min-width: 0; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-card); }
-.codeHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--color-line); }
+.prose { margin: 0; font-size: 14px; line-height: 1.85; text-wrap: pretty; }
+.prose code, .parameters code { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-ink); font-family: var(--font-code); font-size: .88em; overflow-wrap: anywhere; }
+.codePanel { min-width: 0; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); }
+.codeHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 10px 8px 18px; border-bottom: 1px solid var(--color-line); }
 .codeHeader > div { min-width: 0; }
-.codeTitle { display: block; color: var(--color-ink); font-size: 12px; font-weight: 500; }
-.language { display: block; margin-top: 2px; font-size: 10px; color: var(--color-muted); }
-.copyButton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 76px; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; color: var(--color-body); font-size: 11px; cursor: pointer; flex-shrink: 0; }
-.copyButton:hover { border-color: var(--color-line-strong); color: var(--color-ink); }
-.code { max-width: 100%; min-width: 0; margin: 0; padding: 20px 16px; overflow-x: auto; border-radius: 0 0 12px 12px; background: var(--color-paper); color: var(--color-body); font-family: var(--font-mono); font-size: 13px; line-height: 1.9; scrollbar-width: thin; scrollbar-color: var(--color-line-strong) transparent; }
+.codeTitle { display: block; color: var(--color-ink); font-size: 13px; font-weight: 600; }
+.language { display: block; margin-top: 2px; font-size: 11px; color: var(--color-muted); }
+.copyButton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 76px; min-height: 44px; padding: 0 12px; border: 1px solid var(--color-line); border-radius: 10px; color: var(--color-body); font-size: 12px; font-weight: 500; cursor: pointer; flex-shrink: 0; transition: border-color 160ms, color 160ms, background-color 160ms; }
+.copyButton:hover { border-color: var(--color-line-strong); color: var(--color-ink); background: var(--color-paper); }
+.code { max-width: 100%; min-width: 0; margin: 0; padding: 20px 18px; overflow-x: auto; border-radius: 0 0 15px 15px; background: var(--color-paper); color: var(--color-body); font-family: var(--font-code); font-size: 13px; line-height: 1.9; scrollbar-width: thin; scrollbar-color: var(--color-line-strong) transparent; }
 .code code { font-family: inherit; }
-.copyError { margin: 0; padding: 12px 16px; border-top: 1px solid var(--color-line); color: var(--color-body); font-size: 12px; line-height: 1.6; }
-.exampleNote { margin: -8px 0 0; color: var(--color-muted); font-size: 11px; line-height: 1.8; text-wrap: pretty; }
-.reference { border: 1px solid var(--color-line); border-radius: 12px; }
-.referenceHeading { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--color-line); }
-.referenceHeading svg { color: var(--color-muted); flex-shrink: 0; }
-.referenceHeading h3 { margin: 0; color: var(--color-ink); font-size: 13px; font-weight: 500; }
+.copyError { margin: 0; padding: 12px 18px; border-top: 1px solid var(--color-line); color: var(--color-body); font-size: 12px; line-height: 1.6; }
+.exampleNote { margin: -8px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.8; text-wrap: pretty; }
+.reference { border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); overflow: hidden; }
+.referenceHeading { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--color-line); }
+.referenceHeading svg { color: var(--color-brand); flex-shrink: 0; }
+.referenceHeading h3 { margin: 0; color: var(--color-ink); font-size: 14px; font-weight: 600; }
 .parameters { margin: 0; }
-.parameters > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px 16px; }
+.parameters > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px 18px; }
 .parameters > div + div { border-top: 1px solid var(--color-line); }
 .parameters dt { font-size: 12px; }
-.parameters dd { margin: 0; font-size: 12px; line-height: 1.8; text-wrap: pretty; }
+.parameters dd { margin: 0; font-size: 13px; line-height: 1.8; text-wrap: pretty; }
 .metadata { display: grid; min-width: 0; gap: 14px; padding-top: 8px; }
 .subheading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
-.subheading h3 { margin: 0; color: var(--color-ink); font-size: 14px; font-weight: 600; }
-.method { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 24px; border: 1px solid var(--color-line-strong); border-radius: 6px; color: var(--color-ink); font-family: var(--font-mono); font-size: 10px; }
-.optional { margin-left: auto; color: var(--color-muted); font-size: 11px; }
-.endpoints { border: 1px solid var(--color-line); border-radius: 12px; }
-.endpointHeader { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; color: var(--color-muted); font-size: 11px; background: var(--color-card); border-radius: 12px 12px 0 0; }
-.endpoint { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 14px; padding: 18px 16px; border-top: 1px solid var(--color-line); }
-.endpointPath { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink); overflow-wrap: anywhere; }
+.subheading h3 { margin: 0; color: var(--color-ink); font-size: 15px; font-weight: 600; }
+.method { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 24px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent); border-radius: 7px; background: var(--color-brand-soft); color: var(--color-brand); font-family: var(--font-code); font-size: 11px; font-weight: 600; }
+.optional { margin-left: auto; color: var(--color-muted); font-size: 12px; }
+.endpoints { border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); overflow: hidden; }
+.endpointHeader { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; color: var(--color-muted); font-size: 12px; background: var(--color-paper); }
+.endpoint { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 14px; padding: 18px; border-top: 1px solid var(--color-line); }
+.endpointPath { font-family: var(--font-code); font-size: 13px; color: var(--color-ink); overflow-wrap: anywhere; }
 .endpoint p { margin: 4px 0 0; color: var(--color-muted); font-size: 12px; }
-.query { display: block; margin-top: 12px; color: var(--color-muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
-.dataNote { margin: 0; padding-left: 14px; border-left: 2px solid var(--color-line-strong); color: var(--color-muted); font-size: 12px; line-height: 1.8; text-wrap: pretty; }
+.query { display: block; margin-top: 12px; color: var(--color-muted); font-family: var(--font-code); font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
+.dataNote { margin: 0; padding: 16px 18px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); color: var(--color-muted); font-size: 13px; line-height: 1.8; text-wrap: pretty; }
 .dataNote p { margin: 0; }
 .dataNote p + p { margin-top: 12px; }
-.dataNote code { color: var(--color-body); font-family: var(--font-mono); font-size: .92em; overflow-wrap: anywhere; }
-.tradeReference { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-line); border-radius: 12px; }
-.tradeReference > div { min-width: 0; padding: 20px; }
-.tradeReference > div + div { border-left: 1px solid var(--color-line); }
-.tradeLabel { color: var(--color-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
+.dataNote code { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-body); font-family: var(--font-code); font-size: .88em; overflow-wrap: anywhere; }
+.tradeReference { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-line); overflow: hidden; }
+.tradeReference > div { min-width: 0; padding: 20px; background: var(--color-card); }
+.tradeLabel { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--color-paper); color: var(--color-muted); font-size: 11px; font-weight: 500; }
 .tradeReference h3 { margin: 10px 0; color: var(--color-ink); font-size: 15px; font-weight: 600; }
 @media (max-width: 1023px) {
   .layout { grid-template-columns: 148px minmax(0, 1fr); gap: 28px; }
   .networks { grid-template-columns: minmax(0, 1fr); }
-  .network + .network { border-left: 0; border-top: 1px solid var(--color-line); }
-  .network dl { grid-template-columns: 1fr 1fr; gap: 20px; }
+  /* the narrow index drops its arrows, so a label like "Launch a token" keeps one line */
+  .sidebar nav > a > svg { display: none; }
   .tradeReference { grid-template-columns: minmax(0, 1fr); }
-  .tradeReference > div + div { border-left: 0; border-top: 1px solid var(--color-line); }
 }
 @media (max-width: 767px) {
-  .entry { flex-wrap: wrap; gap: 12px; padding: 18px; margin: 24px 0; }
-  .entry > a { margin-left: 35px; }
-  .layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
-  .sidebar { position: static; }
-  .sidebar nav { display: flex; flex-wrap: wrap; column-gap: 18px; border-bottom: 1px solid var(--color-line); }
-  .indexLabel { width: 100%; margin-bottom: 4px; }
-  .sidebar nav > a { gap: 8px; }
-  .sidebar nav > a svg, .sidebarNote { display: none; }
+  .entry { flex-wrap: wrap; gap: 12px; padding: 18px; margin: 0 0 28px; }
+  .entry > a { margin-left: 54px; }
+  .layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
+  .sidebar { position: static; padding: 12px 16px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); }
+  .sidebar nav { display: flex; flex-wrap: wrap; column-gap: 18px; }
+  .indexLabel { width: 100%; margin-bottom: 2px; }
+  .sidebar nav > a { gap: 8px; margin-inline: 0; padding: 0; }
+  .sidebar nav > a:hover, .sidebar nav > a:focus-visible { background: transparent; }
+  .sidebar nav > a > svg, .sidebarNote { display: none; }
   .sectionHeading h2 { font-size: 22px; }
-  .content { gap: 36px; }
-  .section + .section { padding-top: 28px; }
+  .content { gap: 40px; }
+  .section + .section { padding-top: 32px; }
   .parameters > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
 }
 @media (max-width: 479px) {
-  .network dl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+  .network dl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
   .entryHeading { gap: 12px; }
-  .entry > a { margin-left: 31px; }
-  .codeHeader { padding-left: 12px; gap: 8px; }
-  .code { padding: 16px 12px; font-size: 12px; }
-  .endpoint { gap: 10px; padding: 16px 12px; }
-  .endpointPath { font-size: 11px; }
+  .entry > a { margin-left: 0; }
+  .codeHeader { padding-left: 14px; gap: 8px; }
+  .code { padding: 16px 14px; font-size: 12px; }
+  .endpoint { gap: 10px; padding: 16px 14px; }
+  .endpointPath { font-size: 12px; }
+  .sectionIcon { width: 36px; height: 36px; border-radius: 10px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .entry > a, .sidebar nav > a, .sidebar nav > a span, .copyButton { transition: none; }
 }
diff --git a/app/src/components/sections/CommunityFeed.module.css b/app/src/components/sections/CommunityFeed.module.css
index d049a2ac..5c4125f8 100644
--- a/app/src/components/sections/CommunityFeed.module.css
+++ b/app/src/components/sections/CommunityFeed.module.css
@@ -1,62 +1,72 @@
-.layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; align-items: start; gap: 32px; }
-.toolbar { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--color-line); }
-.feedTitle { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--color-muted); }
+.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
+.toolbar { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--color-line); }
+.feedTitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--color-muted); }
+/* an icon tile, as in the navigation menu */
+.titleIcon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-paper); color: var(--color-body); }
 .feedTitle h2 { color: var(--color-ink); font-size: 14px; font-weight: 600; }
-.feedTitle > span { margin-left: 8px; font-size: 11px; }
-.refresh { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--color-muted); border: 1px solid var(--color-line); border-radius: 50%; }
-.refresh:hover { color: var(--color-ink); border-color: var(--color-line-strong); }
+.feedTitle > span:last-child { font-size: 12px; }
+.refresh { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--color-muted); border: 1px solid var(--color-line); border-radius: 12px; transition: color 160ms, border-color 160ms, background-color 160ms; }
+.refresh:hover { color: var(--color-ink); border-color: var(--color-line-strong); background: var(--color-paper); }
 .refresh:disabled { opacity: .5; cursor: wait; }
 .filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
-.search { display: flex; align-items: center; gap: 9px; min-width: 180px; flex: 1; min-height: 44px; border-bottom: 1px solid var(--color-line-strong); color: var(--color-muted); }
-.search input { width: 100%; min-width: 0; min-height: 44px; background: transparent; font-size: 12px; color: var(--color-ink); outline-offset: 0; }
+/* the board's search field: a rounded, bordered input with the icon inside */
+.search { display: flex; align-items: center; gap: 9px; min-width: 180px; flex: 1; min-height: 44px; padding-left: 12px; border: 1px solid var(--color-line-strong); border-radius: 12px; background: var(--color-paper); color: var(--color-muted); transition: border-color 160ms; }
+.search:focus-within { border-color: var(--color-brand); }
+.search input { width: 100%; min-width: 0; min-height: 42px; background: transparent; font-size: 13px; color: var(--color-ink); outline: none; }
 .search input::placeholder { color: var(--color-muted); }
-.search button { display: flex; align-items: center; justify-content: center; height: 44px; width: 44px; flex-shrink: 0; }
-.resultLine { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 11px 20px; border-block: 1px solid var(--color-line); color: var(--color-muted); font-size: 11px; }
-.resultLine p span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.search button { display: flex; align-items: center; justify-content: center; height: 42px; width: 42px; flex-shrink: 0; border-radius: 0 11px 11px 0; }
+.search button:hover { color: var(--color-ink); }
+.resultLine { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 11px 20px; border-block: 1px solid var(--color-line); background: var(--color-paper); color: var(--color-muted); font-size: 12px; }
+.resultLine p span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-body); }
 .empty { padding: 44px 24px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; }
-.conversationMark { position: relative; display: flex; align-items: center; justify-content: center; width: 116px; height: 88px; margin-bottom: 28px; color: var(--color-body); }
-.conversationMark > svg { z-index: 1; width: 68px; height: 60px; padding: 14px; background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: 12px; }
-.conversationMark > span { position: absolute; width: 64px; height: 48px; border: 1px solid var(--color-line); border-radius: 12px; }
+.conversationMark { position: relative; display: flex; align-items: center; justify-content: center; width: 116px; height: 88px; margin-bottom: 24px; color: var(--color-body); }
+.conversationMark > svg { z-index: 1; width: 68px; height: 60px; padding: 14px; background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: 14px; }
+.conversationMark > span { position: absolute; width: 64px; height: 48px; border: 1px solid var(--color-line); border-radius: 14px; }
 .conversationMark > span:first-of-type { left: 0; top: 0; }
 .conversationMark > span:last-of-type { right: 0; bottom: 0; border-bottom-color: var(--color-brand); }
 .emptyIcon { margin-bottom: 20px; color: var(--color-muted); }
-.empty .emptyEyebrow { margin: 0 0 12px; color: var(--color-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
-.empty h3 { max-width: 340px; color: var(--color-ink); font-size: 23px; font-weight: 600; line-height: 1.28; letter-spacing: -.035em; text-wrap: balance; }
+.empty .emptyEyebrow { margin: 0 0 10px; color: var(--color-muted); font-size: 12px; font-weight: 500; }
+.empty h3 { max-width: 340px; color: var(--color-ink); font-size: 22px; font-weight: 600; line-height: 1.28; letter-spacing: -.03em; text-wrap: balance; }
 .empty > p { max-width: 370px; margin-top: 12px; color: var(--color-muted); font-size: 13px; line-height: 1.75; text-wrap: pretty; }
 .empty > :is(a, button) { margin-top: 24px; }
 .posts { list-style: none; margin: 0; padding: 0; }
 .posts > li + li { border-top: 1px solid var(--color-line); }
 .post { min-width: 0; }
 .postLink { display: block; padding: 24px; transition: background-color 160ms; }
-.postLink:hover { background: var(--color-card); }
+.postLink:hover { background: color-mix(in srgb, var(--color-ink) 3%, transparent); }
 .postHeading { display: flex; align-items: center; gap: 12px; }
 .postAuthor { flex: 1; min-width: 0; }
-.postAuthor h3 { color: var(--color-ink); font: 400 13px var(--font-mono); overflow-wrap: anywhere; }
-.postAuthor p { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--color-muted); font-size: 10px; min-height: 20px; margin-top: 4px; }
+.postAuthor h3 { color: var(--color-ink); font: 500 13px var(--font-code); overflow-wrap: anywhere; }
+.postAuthor p { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--color-muted); font-size: 11px; min-height: 20px; margin-top: 4px; }
 .postAuthor time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 .postArrow { flex-shrink: 0; color: var(--color-muted); }
-.postBody { margin-top: 18px; color: var(--color-ink); font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
-.postMeta { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--color-muted); font-size: 11px; }
+/* the words in a speech bubble that points back at the author, as on the home page's posts */
+.postBody { margin-top: 18px; padding: 12px 16px; border-radius: 6px 16px 16px 16px; background: color-mix(in srgb, var(--color-ink) 4.5%, transparent); color: var(--color-ink); font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
+.postMeta { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--color-muted); font-size: 12px; }
 .postToken { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
 .postToken strong { color: var(--color-body); font-weight: 500; }
-.role { border: 1px solid var(--color-line-strong); border-radius: 4px; padding: 2px 5px; }
-.discussion { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 8px; color: var(--color-muted); font-size: 11px; }
+/* a post's standing: Creator in the brand tint, Whale in amber, Holder in green */
+.role { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10px; font-weight: 600; background: var(--color-paper); color: var(--color-body); }
+.role[data-tag="creator"] { background: var(--color-brand-soft); color: var(--color-brand); }
+.role[data-tag="whale"] { background: var(--color-warm-soft); color: var(--color-warm-ink); }
+.role[data-tag="holder"] { background: var(--color-up-soft); color: var(--color-up); }
+.discussion { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 8px; color: var(--color-muted); font-size: 12px; }
 .postLink:is(:hover, :focus-visible) .discussion, .postLink:is(:hover, :focus-visible) .postArrow { color: var(--color-brand); }
-.feedFoot { padding: 16px 20px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 11px; line-height: 1.6; text-wrap: pretty; }
-.aside { min-width: 0; }
-.guide { padding: 4px 0 20px; }
-.asideEyebrow { color: var(--color-muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
-.guide h2 { margin-top: 14px; color: var(--color-ink); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.035em; }
-.guide > p:not(.asideEyebrow) { margin-top: 12px; color: var(--color-body); font-size: 13px; line-height: 1.75; text-wrap: pretty; }
-.steps { margin: 28px 0 8px; list-style: none; padding: 0; }
-.steps > li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-line); }
-.steps > li > span { font-family: var(--font-mono); color: var(--color-muted); font-size: 10px; }
-.steps h3 { font-size: 13px; font-weight: 500; color: var(--color-ink); }
-.steps p { margin-top: 4px; color: var(--color-muted); font-size: 12px; line-height: 1.65; }
-.note { padding: 24px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); color: var(--color-muted); }
-.note h2 { margin-top: 16px; color: var(--color-ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
-.note p { margin-top: 10px; font-size: 12px; line-height: 1.75; text-wrap: pretty; }
-.note .caution { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--color-line); }
-@media (max-width: 1023px) { .layout { grid-template-columns: minmax(0, 1fr); } .aside { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 32px; } }
-@media (max-width: 639px) { .toolbar, .filters { padding-inline: 16px; } .feedTitle > span { display: none; } .resultLine { padding-inline: 16px; } .resultLine > span { display: none; } .empty { padding: 32px 18px; } .empty h3 { font-size: 22px; } .aside { grid-template-columns: 1fr; gap: 16px; } .postLink { padding: 20px 16px; } .postBody { font-size: 14px; } }
-@media (prefers-reduced-motion: reduce) { .postLink { transition: none; } }
+.feedFoot { padding: 16px 20px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 12px; line-height: 1.6; text-wrap: pretty; }
+.aside { display: grid; gap: 16px; min-width: 0; }
+.guide { padding: 20px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); }
+.guide h2 { color: var(--color-ink); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
+.guide > p { margin-top: 8px; color: var(--color-body); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
+.steps { margin: 16px 0 6px; list-style: none; padding: 0; }
+.steps > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-line); }
+.steps > li > span { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-paper); color: var(--color-body); }
+.steps h3 { font-size: 13px; font-weight: 600; color: var(--color-ink); }
+.steps p { margin-top: 2px; color: var(--color-muted); font-size: 12px; line-height: 1.6; }
+.note { padding: 20px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); color: var(--color-muted); }
+.noteIcon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent); border-radius: 10px; background: var(--color-brand-soft); color: var(--color-brand); }
+.note h2 { margin-top: 14px; color: var(--color-ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
+.note p { margin-top: 8px; font-size: 12px; line-height: 1.75; text-wrap: pretty; }
+.note .caution { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--color-line); }
+@media (max-width: 1023px) { .layout { grid-template-columns: minmax(0, 1fr); } .aside { grid-template-columns: 1fr 1fr; align-items: start; } }
+@media (max-width: 639px) { .toolbar, .filters { padding-inline: 16px; } .feedTitle > span:last-child { display: none; } .resultLine { padding-inline: 16px; } .resultLine > span { display: none; } .empty { padding: 32px 18px; } .empty h3 { font-size: 21px; } .aside { grid-template-columns: 1fr; } .postLink { padding: 20px 16px; } .postBody { font-size: 14px; } }
+@media (prefers-reduced-motion: reduce) { .postLink, .refresh, .search { transition: none; } }
diff --git a/app/src/components/sections/CommunityFeed.tsx b/app/src/components/sections/CommunityFeed.tsx
index 8eaffa80..5eeebf05 100644
--- a/app/src/components/sections/CommunityFeed.tsx
+++ b/app/src/components/sections/CommunityFeed.tsx
@@ -3,9 +3,10 @@
 import Link from "next/link";
 import { useEffect, useRef, useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
-import { ArrowRight, ArrowUpRight, MessageSquare, RefreshCw, Search, Signature, X } from "lucide-react";
+import { ArrowRight, ArrowUpRight, MessageSquare, MessagesSquare, RefreshCw, Search, Signature, X } from "lucide-react";
 import { ToggleGroup, ToggleGroupItem } from "@/components/vendor/toggle-group";
 import TokenAvatar from "@/components/launchpad/TokenAvatar";
+import { ChainLogo } from "@/components/launchpad/ChainLogo";
 import WalletAvatar from "@/components/WalletAvatar";
 import { useLive } from "@/components/launchpad/LiveProvider";
 import { CHAIN_SHORT, shortAddr, type ChainKey } from "@/lib/chainPublic";
@@ -16,6 +17,9 @@ import { communityFingerprint, filterCommunityPosts } from "@/lib/launchpad/comm
 import shell from "./SectionShell.module.css";
 import styles from "./CommunityFeed.module.css";
 
+/** A post's standing on its token, worded and coloured as on the home page's posts. */
+const ROLE: Record<NonNullable<PostRow["tag"]>, string> = { creator: "Creator", whale: "Whale", holder: "Holder" };
+
 export default function CommunityFeed({ initial, loadError = false }: { initial: PostRow[]; loadError?: boolean }) {
   const router = useRouter();
   const { subscribe } = useLive();
@@ -52,13 +56,14 @@ export default function CommunityFeed({ initial, loadError = false }: { initial:
   return <div className={styles.layout}>
     <section className={shell.panel} aria-label="Recent community posts" aria-busy={refreshing}>
       <div className={styles.toolbar}>
-        <div className={styles.feedTitle}><MessageSquare size={17} aria-hidden="true" /><h2>Community feed</h2><span>Newest first</span></div>
+        <div className={styles.feedTitle}><span className={styles.titleIcon} aria-hidden="true"><MessagesSquare size={16} /></span><h2>Community feed</h2><span>Newest first</span></div>
         <button type="button" className={styles.refresh} onClick={() => startTransition(() => router.refresh())} disabled={refreshing} aria-label="Refresh posts" title="Refresh posts"><RefreshCw size={15} aria-hidden="true" /></button>
       </div>
       <div className={styles.filters}>
         <ToggleGroup multiple={false} value={[chain ?? "all"]} onValueChange={(values) => { if (values[0]) setChain(values[0] === "all" ? null : values[0] as ChainKey); }} aria-label="Filter posts by chain">
           <ToggleGroupItem value="all" className="min-h-11">All chains</ToggleGroupItem>
-          {VISIBLE_CHAINS.map((k) => <ToggleGroupItem key={k} value={k} className="min-h-11">{CHAIN_SHORT[k]}</ToggleGroupItem>)}
+          {/* the market board's chain filter: each chain's mark, its name from sm up */}
+          {VISIBLE_CHAINS.map((k) => <ToggleGroupItem key={k} value={k} className="min-h-11" title={CHAIN_SHORT[k]}><ChainLogo chain={k} size={16} /><span className="max-sm:sr-only">{CHAIN_SHORT[k]}</span></ToggleGroupItem>)}
         </ToggleGroup>
         <div className={styles.search}>
           <Search size={15} aria-hidden="true" />
@@ -84,7 +89,7 @@ export default function CommunityFeed({ initial, loadError = false }: { initial:
                 <div className={styles.postAuthor}>
                   <h3 title={post.wallet}><span className="sr-only">Post by </span>{shortAddr(post.wallet)}</h3>
                   <p>
-                    {post.tag ? <span className={styles.role}>{post.tag}</span> : null}
+                    {post.tag ? <span className={styles.role} data-tag={post.tag}>{ROLE[post.tag]}</span> : null}
                     <time dateTime={post.created_at} title={post.created_at} suppressHydrationWarning>{now ? `${ago(post.created_at, now)} ago` : ""}</time>
                   </p>
                 </div>
@@ -108,18 +113,17 @@ export default function CommunityFeed({ initial, loadError = false }: { initial:
 
     <aside className={styles.aside} aria-label="About the community">
       <section className={styles.guide}>
-        <p className={styles.asideEyebrow}>A little context goes a long way</p>
         <h2>Join from the token.</h2>
         <p>Every post belongs to a token. The full thread, the market and the contracts stay together.</p>
         <ol className={styles.steps}>
-          <li><span>01</span><div><h3>Find your token</h3><p>Browse launches on any chain.</p></div></li>
-          <li><span>02</span><div><h3>Open Conversation</h3><p>Read the thread or reply to a post.</p></div></li>
-          <li><span>03</span><div><h3>Sign your words</h3><p>A wallet signature, not a transaction.</p></div></li>
+          <li><span aria-hidden="true"><Search size={15} /></span><div><h3>Find your token</h3><p>Browse launches on any chain.</p></div></li>
+          <li><span aria-hidden="true"><MessageSquare size={15} /></span><div><h3>Open Conversation</h3><p>Read the thread or reply to a post.</p></div></li>
+          <li><span aria-hidden="true"><Signature size={15} /></span><div><h3>Sign your words</h3><p>A wallet signature, not a transaction.</p></div></li>
         </ol>
         <Link href="/#launches" className={shell.textLink}>Explore launches <ArrowUpRight size={15} aria-hidden="true" /></Link>
       </section>
       <section className={styles.note}>
-        <Signature size={21} aria-hidden="true" />
+        <span className={styles.noteIcon} aria-hidden="true"><Signature size={16} /></span>
         <h2>A wallet behind every post.</h2>
         <p>Posting is open to creators, token holders, and wallets that have traded or launched here. No account to create. No gas to post.</p>
         <p className={styles.caution}>Posts are community opinions, not endorsements. Check the token and its contracts for yourself.</p>
diff --git a/app/src/components/sections/RulesGuide.module.css b/app/src/components/sections/RulesGuide.module.css
index 2a7f45f0..31656c0b 100644
--- a/app/src/components/sections/RulesGuide.module.css
+++ b/app/src/components/sections/RulesGuide.module.css
@@ -1,107 +1,116 @@
 .guide { color: var(--color-body); }
-.guide :is(a, summary):focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; border-radius: 4px; }
+.guide :is(a, summary):focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; border-radius: 6px; }
 .guide p { text-wrap: pretty; }
-.layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 56px; margin-top: 48px; }
+.layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 48px; }
 .contents { position: sticky; top: 112px; align-self: start; }
-.eyebrow { color: var(--color-muted); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
-.contents ol { margin-top: 14px; }
-.contents li a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--color-body); font-size: 12px; border-radius: 6px; }
-.contents li a span { color: var(--color-muted); font: 10px var(--font-mono); font-variant-numeric: tabular-nums; }
-.contents li a:hover { color: var(--color-ink); }
+/* a section's label: sentence case with its mark, never a tracked all-caps eyebrow */
+.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--color-muted); font-size: 12px; font-weight: 500; }
+.eyebrow > svg { flex-shrink: 0; color: var(--color-brand); }
+.contents ol { margin-top: 10px; }
+.contents li a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; margin-inline: -10px; color: var(--color-body); font-size: 13px; border-radius: 10px; transition: background-color 160ms, color 160ms; }
+.contents li a span { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-card); color: var(--color-muted); transition: color 160ms; }
+.contents li a:hover { color: var(--color-ink); background: color-mix(in srgb, var(--color-ink) 5%, transparent); }
 .contents li a:hover span { color: var(--color-brand); }
-.sourceLink { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 12px; }
+.sourceLink { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 12px; }
 .sourceLink:hover { color: var(--color-ink); }
 .article { min-width: 0; display: grid; gap: 64px; }
 .sectionHeading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
 .sectionHeading h2, .closing h2 { margin-top: 10px; color: var(--color-ink); font-size: 30px; font-weight: 600; line-height: 1.18; letter-spacing: -.035em; text-wrap: balance; }
 .sectionHeading > p { padding-bottom: 2px; color: var(--color-muted); font-size: 12px; line-height: 1.7; }
 .machine { max-width: 40rem; margin: 0 auto 32px; }
-.steps { border-block: 1px solid var(--color-line-strong); }
-.step { display: grid; grid-template-columns: 44px minmax(0, 1fr) 124px; gap: 20px; align-items: start; position: relative; padding: 26px 0; }
+/* the four things one launch does, as a card: a real sequence, so each keeps its number */
+.steps { padding: 0 24px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); }
+.step { display: grid; grid-template-columns: 44px minmax(0, 1fr) 124px; gap: 20px; align-items: start; position: relative; padding: 24px 0; }
 .step + .step { border-top: 1px solid var(--color-line); }
-.stepNumber { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--color-line-strong); border-radius: 50%; background: var(--color-paper); color: var(--color-brand); font: 12px var(--font-mono); font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
-.step:not(:last-child)::after { content: ""; position: absolute; width: 1px; background: var(--color-line); left: 21px; top: 70px; bottom: -26px; }
+.stepNumber { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--color-brand) 35%, transparent); border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand); font: 600 12px var(--font-mono); font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
+.step:not(:last-child)::after { content: ""; position: absolute; width: 1px; background: var(--color-line-strong); left: 21px; top: 68px; bottom: -24px; }
 .stepCopy h3, .tradingFees h3, .collectNote h3, .fixedList h3 { color: var(--color-ink); font-size: 15px; font-weight: 600; }
 .stepCopy p { margin-top: 8px; font-size: 13px; line-height: 1.7; }
 .stepValue { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; padding-top: 2px; text-align: right; }
 .stepValue strong { color: var(--color-ink); font: 700 22px var(--font-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
-.stepValue span { color: var(--color-muted); font-size: 10px; }
-.mechanismNote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 14px; color: var(--color-muted); font-size: 11px; }
+.stepValue span { color: var(--color-muted); font-size: 11px; }
+.mechanismNote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 14px; color: var(--color-muted); font-size: 12px; }
 .mechanismNote > svg { flex-shrink: 0; color: var(--color-brand); }
 .mechanismNote a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: auto; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
 .mechanismNote a:hover, .platformFee a:hover, .verifiers a:hover, .contractNote a:hover { color: var(--color-ink); }
-.feePanel { display: grid; grid-template-columns: 200px minmax(0, 1fr); border: 1px solid var(--color-line); border-radius: 16px; overflow: hidden; }
-.platformFee { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; background: var(--color-card); }
-.platformFee > strong { color: var(--color-up); font: 700 58px var(--font-mono); font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.06em; margin-top: 20px; }
-.platformFee p { margin-top: 12px; font-size: 12px; line-height: 1.7; }
-.platformFee a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: auto; padding-top: 12px; font-size: 11px; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
+.feePanel { display: grid; grid-template-columns: 210px minmax(0, 1fr); border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); overflow: hidden; }
+/* the platform fee in the up tint, like the home page's $0 */
+.platformFee { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; background: var(--color-up-soft); }
+.platformFee > strong { color: var(--color-up); font: 700 58px var(--font-mono); font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.06em; margin-top: 16px; }
+.platformFee p { margin-top: 10px; color: var(--color-body); font-size: 12px; line-height: 1.7; }
+.platformFee a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: auto; padding-top: 12px; font-size: 12px; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
 .tradingFees { padding: 24px; border-left: 1px solid var(--color-line); }
 .tradingFees dl { margin-top: 12px; }
-.tradingFees dl > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
+.tradingFees dl > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; padding: 14px 0; }
+.tradingFees dl > div + div { border-top: 1px solid var(--color-line); }
 .tradingFees dt { color: var(--color-ink); font: 700 13px/1.7 var(--font-mono); font-variant-numeric: tabular-nums; }
 .tradingFees dd, .tradingFees > p { font-size: 12px; line-height: 1.7; }
 .tradingFees > p { padding-top: 16px; border-top: 1px solid var(--color-line); color: var(--color-muted); }
-.collectNote { display: grid; gap: 12px; margin-top: 20px; padding-left: 20px; border-left: 1px solid var(--color-line-strong); }
+.collectNote { display: grid; gap: 12px; margin-top: 20px; padding-left: 20px; border-left: 2px solid var(--color-line-strong); }
 .collectNote h3 { font-size: 13px; }
 .collectNote p { margin-top: 8px; font-size: 12px; line-height: 1.8; }
 .collectNote > p { margin-top: 0; color: var(--color-muted); }
-.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
-.fixedList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
-.fixedList li { display: flex; gap: 14px; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--color-line); }
-.fixedList li:nth-child(even) { padding-right: 0; padding-left: 24px; border-left: 1px solid var(--color-line); }
-.fixedMark { color: var(--color-muted); font-size: 20px; line-height: 1.1; }
-.fixedList p { margin-top: 8px; font-size: 12px; line-height: 1.8; }
-.riskIntro { max-width: 660px; padding-bottom: 24px; font-size: 14px; line-height: 1.8; }
-.questions { border-top: 1px solid var(--color-line-strong); }
-.questions details { border-bottom: 1px solid var(--color-line); }
-.questions summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-block: 16px; color: var(--color-ink); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
+.mono { font-family: var(--font-code); }
+/* what can never happen, as hairline tiles: the lines are the gap over a line-coloured grid */
+.fixedList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-line); overflow: hidden; }
+.fixedList li { display: flex; gap: 14px; padding: 22px; background: var(--color-card); }
+.fixedMark { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 999px; background: var(--color-up-soft); color: var(--color-up); }
+.fixedList p { margin-top: 6px; font-size: 12px; line-height: 1.8; }
+.riskIntro { max-width: 660px; padding-bottom: 20px; font-size: 14px; line-height: 1.8; }
+.questions { border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); overflow: hidden; }
+.questions details + details { border-top: 1px solid var(--color-line); }
+.questions summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 14px 20px; color: var(--color-ink); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; transition: background-color 160ms; }
+.questions summary:hover { background: color-mix(in srgb, var(--color-ink) 3%, transparent); }
 .questions summary::-webkit-details-marker { display: none; }
 .questions summary > svg { flex-shrink: 0; color: var(--color-muted); transition: transform 160ms; }
 .questions details[open] summary > svg { transform: rotate(180deg); }
-.questions details > div { padding: 0 32px 24px 0; font-size: 13px; line-height: 1.8; }
+.questions details > div { padding: 0 52px 22px 20px; font-size: 13px; line-height: 1.8; }
 .questions details p + p { margin-top: 12px; }
-.contractIcon { color: var(--color-muted); flex-shrink: 0; }
 .contractIntro { margin-top: -10px; margin-bottom: 24px; color: var(--color-muted); font-size: 13px; line-height: 1.7; }
-.registry { border: 1px solid var(--color-line); border-radius: 16px; overflow: hidden; }
+.registry { border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); overflow: hidden; }
 .network { padding: 24px; }
-.network + .network { border-top: 1px solid var(--color-line-strong); }
-.network > header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; }
-.network h3 { color: var(--color-ink); font-size: 16px; font-weight: 600; }
-.network > header > span { color: var(--color-muted); font-size: 10px; }
-.network > header strong { margin-left: 4px; color: var(--color-body); font: 11px var(--font-mono); font-variant-numeric: tabular-nums; }
+.network + .network { border-top: 1px solid var(--color-line); }
+.network > header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
+.network h3 { display: inline-flex; align-items: center; gap: 9px; color: var(--color-ink); font-size: 16px; font-weight: 600; }
+.network > header > span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-muted); font-size: 11px; }
+.network > header strong { margin-left: 4px; color: var(--color-body); font: 500 11px var(--font-mono); font-variant-numeric: tabular-nums; }
 .addresses > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; min-height: 48px; border-top: 1px solid var(--color-line); }
 .addresses dt { color: var(--color-muted); font-size: 12px; }
 .addresses dd { min-width: 0; }
-.addresses a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--color-ink); font: 12px/1.7 var(--font-mono); font-variant-numeric: tabular-nums; }
+.addresses a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--color-ink); font: 12px/1.7 var(--font-code); }
 .addresses a > span { overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 4px; }
 .addresses a:hover { color: var(--color-brand); }
 .addresses a > svg { flex-shrink: 0; color: var(--color-muted); }
 .notDeployed { display: inline-block; padding-block: 12px; font-size: 12px; color: var(--color-muted); }
-.verifiers { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-line); }
-.verifiers > p { margin-bottom: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); }
+.verifiers { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-line); }
+.verifiers > p { margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--color-muted); }
 .verifiers > div { display: grid; grid-template-columns: minmax(0, 1fr) 86px 78px; align-items: center; gap: 8px; font-size: 12px; }
-.verifiers a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--color-muted); font-size: 11px; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
+.verifiers a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--color-muted); font-size: 12px; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
 .contractNote { margin-top: 20px; font-size: 12px; line-height: 1.8; color: var(--color-muted); }
 .contractNote a { text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
-.closing { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--color-line-strong); padding-top: 32px; }
+.closing { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); }
 .closing h2 { font-size: 24px; }
 .closing > a { flex-shrink: 0; }
 @media (max-width: 1023px) {
-  .layout { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
-  .contents { position: static; padding-block: 16px; border-block: 1px solid var(--color-line); }
-  .contents ol { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 6px; }
+  .layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
+  .contents { position: static; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); }
+  .contents ol { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
+  .contents li a { margin-inline: 0; padding: 0; }
+  .contents li a:hover { background: transparent; }
   .sourceLink { display: none; }
 }
 @media (max-width: 639px) {
   .article { gap: 44px; }
-  .contents ol { column-gap: 18px; }
-  .contents li a { gap: 7px; font-size: 11px; }
+  .contents ol { column-gap: 16px; }
+  .contents li a { gap: 7px; font-size: 12px; }
+  .contents li a span { width: 22px; height: 22px; border-radius: 7px; }
   .sectionHeading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 20px; }
   .sectionHeading h2 { font-size: 26px; }
   .sectionHeading > p br { display: none; }
-  .step { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 14px; padding: 22px 0; }
-  .stepNumber { width: 36px; height: 36px; font-size: 10px; }
-  .step:not(:last-child)::after { left: 17px; top: 58px; bottom: -22px; }
+  .steps { padding: 0 16px; }
+  .step { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 14px; padding: 20px 0; }
+  .stepNumber { width: 36px; height: 36px; font-size: 11px; }
+  .step:not(:last-child)::after { left: 17px; top: 56px; bottom: -20px; }
   .stepCopy h3 { font-size: 14px; }
   .stepCopy p { font-size: 12px; }
   .stepValue { grid-column: 2; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; padding-top: 6px; text-align: left; }
@@ -121,20 +130,19 @@
   .tradingFees dl > div { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
   .tradingFees dt { font-size: 11px; }
   .fixedList { grid-template-columns: minmax(0, 1fr); }
-  .fixedList li, .fixedList li:nth-child(even) { padding: 20px 0; border-left: none; }
+  .fixedList li { padding: 18px; }
   .fixedList h3 { font-size: 14px; }
-  .questions summary { font-size: 13px; }
-  .questions details > div { padding-right: 0; font-size: 12px; }
+  .questions summary { padding-inline: 16px; font-size: 13px; }
+  .questions details > div { padding: 0 16px 18px; font-size: 12px; }
   .riskIntro { font-size: 13px; }
-  .contractIcon { display: none; }
-  .network { padding: 20px; }
+  .network { padding: 18px; }
   .network > header { flex-direction: column; align-items: flex-start; }
   .addresses > div { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
   .addresses a { font-size: 11px; padding-block: 8px; }
   .verifiers > div { grid-template-columns: minmax(0, 1fr) 68px 61px; gap: 4px; font-size: 11px; }
-  .verifiers a { font-size: 10px; }
-  .closing { flex-direction: column; align-items: flex-start; }
+  .verifiers a { font-size: 11px; }
+  .closing { flex-direction: column; align-items: flex-start; padding: 22px; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .questions summary > svg { transition: none; }
+  .questions summary > svg, .questions summary, .contents li a, .contents li a span { transition: none; }
 }