diff --git a/public/about/activist-guide-unity.png b/public/about/activist-guide-unity.png
new file mode 100644
index 00000000..c62b8d4c
Binary files /dev/null and b/public/about/activist-guide-unity.png differ
diff --git a/public/about/donor-guide-freedom-libertad.jpeg b/public/about/donor-guide-freedom-libertad.jpeg
new file mode 100644
index 00000000..9cc0636c
Binary files /dev/null and b/public/about/donor-guide-freedom-libertad.jpeg differ
diff --git a/public/about/venezuela-libertad-presos-politicos.png b/public/about/venezuela-libertad-presos-politicos.png
new file mode 100644
index 00000000..46fd49ff
Binary files /dev/null and b/public/about/venezuela-libertad-presos-politicos.png differ
diff --git a/public/about/world-map-bg.png b/public/about/world-map-bg.png
new file mode 100644
index 00000000..5c9ec94d
Binary files /dev/null and b/public/about/world-map-bg.png differ
diff --git a/public/help/step-1-account.jpg b/public/help/step-1-account.jpg
new file mode 100644
index 00000000..96082331
Binary files /dev/null and b/public/help/step-1-account.jpg differ
diff --git a/public/help/step-2-send.jpg b/public/help/step-2-send.jpg
new file mode 100644
index 00000000..9e2ff3db
Binary files /dev/null and b/public/help/step-2-send.jpg differ
diff --git a/public/help/step-3-spend.jpg b/public/help/step-3-spend.jpg
new file mode 100644
index 00000000..8ae04c52
Binary files /dev/null and b/public/help/step-3-spend.jpg differ
diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index 6bd699fb..3874ead4 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -32,7 +32,7 @@ const CSAEPolicyPage = lazy(() => import("./pages/CSAEPolicyPage").then(m => ({
 const ExternalContentPage = lazy(() => import("./pages/ExternalContentPage").then(m => ({ default: m.ExternalContentPage })));
 const GeotagPage = lazy(() => import("./pages/GeotagPage").then(m => ({ default: m.GeotagPage })));
 const HashtagPage = lazy(() => import("./pages/HashtagPage").then(m => ({ default: m.HashtagPage })));
-const HelpPage = lazy(() => import("./pages/HelpPage").then(m => ({ default: m.HelpPage })));
+const AboutPage = lazy(() => import("./pages/AboutPage").then(m => ({ default: m.AboutPage })));
 const DonorGuidePage = lazy(() => import("./pages/DonorGuidePage").then(m => ({ default: m.DonorGuidePage })));
 const ActivistGuidePage = lazy(() => import("./pages/ActivistGuidePage").then(m => ({ default: m.ActivistGuidePage })));
 const NetworkSettingsPage = lazy(() => import("./pages/NetworkSettingsPage").then(m => ({ default: m.NetworkSettingsPage })));
@@ -75,7 +75,7 @@ function SiteFooter() {
       <div className="mx-auto max-w-7xl px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-muted-foreground">
         <span>&copy; {new Date().getFullYear()} Agora. Fundraisers on Nostr.</span>
         <nav className="flex items-center gap-5">
-          <Link to="/help" className="hover:text-foreground motion-safe:transition-colors">Help</Link>
+          <Link to="/about" className="hover:text-foreground motion-safe:transition-colors">About</Link>
           <Link to="/privacy" className="hover:text-foreground motion-safe:transition-colors">Privacy</Link>
           <Link to="/safety" className="hover:text-foreground motion-safe:transition-colors">Safety</Link>
           <Link to="/changelog" className="hover:text-foreground motion-safe:transition-colors">Changelog</Link>
@@ -139,9 +139,12 @@ export function AppRouter() {
           <Route path="/wallet" element={<WalletPage />} />
           <Route path="/wallet/recovery" element={<WalletRecoveryPage />} />
           <Route path="/bitcoin" element={<Navigate to="/wallet" replace />} />
-          <Route path="/help" element={<HelpPage />} />
-          <Route path="/help/donors" element={<DonorGuidePage />} />
-          <Route path="/help/activists" element={<ActivistGuidePage />} />
+          {/* Legacy /help routes redirect to /about so existing links keep
+              working. The About page and the two guides themselves live
+              under the wide layout below. */}
+          <Route path="/help" element={<Navigate to="/about" replace />} />
+          <Route path="/help/donors" element={<Navigate to="/about/donors" replace />} />
+          <Route path="/help/activists" element={<Navigate to="/about/activists" replace />} />
           <Route path="/privacy" element={<PrivacyPolicyPage />} />
           <Route path="/safety" element={<CSAEPolicyPage />} />
           <Route path="/changelog" element={<ChangelogPage />} />
@@ -164,6 +167,11 @@ export function AppRouter() {
           <Route path="/pledges/new" element={<CreateActionPage />} />
           <Route path="/dashboard" element={<EventDashboardPage />} />
           <Route path="/i/*" element={<ExternalContentPage />} />
+          {/* About page + Donor / Activist guides. Full-bleed landing-style
+              layouts that render their own internal max-widths. */}
+          <Route path="/about" element={<AboutPage />} />
+          <Route path="/about/donors" element={<DonorGuidePage />} />
+          <Route path="/about/activists" element={<ActivistGuidePage />} />
           {/* NIP-19 route for npub1, note1, naddr1, nevent1, nprofile1.
               Goes through the wide layout because the dispatch may resolve to
               a profile, campaign, action, or community page — all of which
diff --git a/src/components/GuideHero.tsx b/src/components/GuideHero.tsx
index 4d186dcf..0547e9f2 100644
--- a/src/components/GuideHero.tsx
+++ b/src/components/GuideHero.tsx
@@ -27,7 +27,7 @@ interface GuideHeroProps {
  * Same structural recipe as the Organize / Actions homepage heroes
  * ({@link HeroBanner} + {@link HeroAtmosphere} + scrims + overlay copy),
  * but tuned smaller because these are sub-pages, not primary destinations.
- * Also embeds a "Back to Help" link in the top-left as the page's
+ * Also embeds a "Back to About" link in the top-left as the page's
  * primary navigation out — so a separate sticky bar isn't needed.
  */
 export function GuideHero({
@@ -65,16 +65,16 @@ export function GuideHero({
         aria-hidden="true"
       />
 
-      <div className="relative max-w-3xl mx-auto px-4 sm:px-6 py-6 sm:py-8 min-h-[240px] sm:min-h-[280px] flex flex-col">
-        {/* Back-to-Help action sits on its own row at the top so it
+      <div className="relative max-w-3xl lg:max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 min-h-[240px] sm:min-h-[280px] lg:min-h-[320px] flex flex-col">
+        {/* Back-to-About action sits on its own row at the top so it
             doubles as both the navigation out and the breadcrumb. */}
         <div>
           <Link
-            to="/help"
+            to="/about"
             className="inline-flex items-center gap-1.5 rounded-full bg-black/30 hover:bg-black/45 backdrop-blur-sm border border-white/20 px-3 py-1.5 text-xs sm:text-sm font-medium text-white drop-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 transition-colors"
           >
             <ArrowLeft className="size-3.5" />
-            Back to Help
+            Back to About
           </Link>
         </div>
 
diff --git a/src/components/GuideSectionCard.tsx b/src/components/GuideSectionCard.tsx
deleted file mode 100644
index c7ea3960..00000000
--- a/src/components/GuideSectionCard.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { type GuideSection } from '@/lib/helpContent';
-import { renderInlineMarkup } from '@/lib/helpMarkup';
-
-/**
- * Renders a single {@link GuideSection} as a Card. Used by the Donor Guide
- * and Activist Guide pages.
- *
- * Paragraphs accept the same inline markup as FAQ answers (**bold** and
- * [link](url)). Optional `pros` / `cons` arrays render as colored bullet
- * lists beneath the paragraphs.
- */
-export function GuideSectionCard({ section }: { section: GuideSection }) {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-base">{section.heading}</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-3 text-sm leading-relaxed text-foreground/80">
-        {section.paragraphs.map((p, i) => (
-          <p key={i}>{renderInlineMarkup(p)}</p>
-        ))}
-
-        {section.pros && section.pros.length > 0 && (
-          <div className="pt-1">
-            <p className="text-xs font-semibold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">
-              Pros
-            </p>
-            <ul className="list-disc pl-5 space-y-1">
-              {section.pros.map((p, i) => (
-                <li key={i}>{renderInlineMarkup(p)}</li>
-              ))}
-            </ul>
-          </div>
-        )}
-
-        {section.cons && section.cons.length > 0 && (
-          <div className="pt-1">
-            <p className="text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400 mb-1">
-              Cons
-            </p>
-            <ul className="list-disc pl-5 space-y-1">
-              {section.cons.map((c, i) => (
-                <li key={i}>{renderInlineMarkup(c)}</li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/src/components/HelpFAQSection.tsx b/src/components/HelpFAQSection.tsx
index 2ca3e2c8..018c7995 100644
--- a/src/components/HelpFAQSection.tsx
+++ b/src/components/HelpFAQSection.tsx
@@ -1,4 +1,4 @@
-import { useMemo, Fragment } from 'react';
+import { useMemo, useState, Fragment } from 'react';
 
 import {
   Accordion,
@@ -9,6 +9,7 @@ import {
 import { useAppContext } from '@/hooks/useAppContext';
 import { getFAQCategories, type FAQCategory, type FAQItem } from '@/lib/helpContent';
 import { renderInlineMarkup } from '@/lib/helpMarkup';
+import { cn } from '@/lib/utils';
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
@@ -21,6 +22,29 @@ interface HelpFAQSectionProps {
   hideHeadings?: boolean;
   /** Additional class names for the wrapper. */
   className?: string;
+  /**
+   * Rendering variant.
+   *
+   * - `'list'` (default): flat accordion list grouped by category. Used
+   *   inside contextual settings pages where the FAQ is a small inline
+   *   reference.
+   * - `'cards'`: each FAQ item renders as its own rounded card with a
+   *   single-item accordion inside. Used by the About page so the FAQ
+   *   reads as a designed section rather than an undifferentiated dump.
+   */
+  variant?: 'list' | 'cards';
+  /**
+   * When `variant='cards'`, render a row of category-tab pills above the
+   * cards. Only one category is shown at a time. No effect on `'list'`.
+   */
+  tabs?: boolean;
+  /**
+   * When `variant='list'`, choose between the default pill-tinted category
+   * heading (used by inline contextual FAQs in settings pages) and a
+   * quieter 'reference' tone used by the About page's `Need help?`
+   * section where the FAQ is the main content rather than a sidebar.
+   */
+  listTone?: 'default' | 'reference';
 }
 
 /**
@@ -31,16 +55,27 @@ interface HelpFAQSectionProps {
  * relevant subset of questions.
  *
  * @example
- * // Full FAQ (Help page)
+ * // Full FAQ (legacy list layout)
  * <HelpFAQSection />
  *
+ * // About-page integrated FAQ (cards + category tabs)
+ * <HelpFAQSection variant="cards" tabs />
+ *
  * // Only payments questions (wallet settings page)
  * <HelpFAQSection categories={['payments']} hideHeadings />
  *
  * // Specific questions (onboarding)
  * <HelpFAQSection items={['what-are-relays', 'what-are-blossom']} hideHeadings />
  */
-export function HelpFAQSection({ categories, items, hideHeadings, className }: HelpFAQSectionProps) {
+export function HelpFAQSection({
+  categories,
+  items,
+  hideHeadings,
+  className,
+  variant = 'list',
+  tabs = false,
+  listTone = 'default',
+}: HelpFAQSectionProps) {
   const { config } = useAppContext();
 
   const filteredCategories = useMemo(() => {
@@ -71,24 +106,97 @@ export function HelpFAQSection({ categories, items, hideHeadings, className }: H
     return cats;
   }, [categories, items, config.appName]);
 
+  // Tab state: first category is selected by default.
+  const [activeTab, setActiveTab] = useState<string | null>(
+    filteredCategories[0]?.id ?? null,
+  );
+
   if (filteredCategories.length === 0) return null;
 
+  // ── Card variant ─────────────────────────────────────────────────────────
+  if (variant === 'cards') {
+    const showTabs = tabs && filteredCategories.length > 1;
+    const visibleCategories = showTabs
+      ? filteredCategories.filter((c) => c.id === activeTab)
+      : filteredCategories;
+
+    return (
+      <div className={className}>
+        {/* Category tab pills */}
+        {showTabs && (
+          <div className="flex flex-wrap justify-center gap-2 mb-10">
+            {filteredCategories.map((category) => {
+              const active = category.id === activeTab;
+              return (
+                <button
+                  key={category.id}
+                  type="button"
+                  onClick={() => setActiveTab(category.id)}
+                  className={cn(
+                    'rounded-full px-4 py-2 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                    active
+                      ? 'bg-primary text-primary-foreground shadow-sm'
+                      : 'bg-white text-gray-700 border border-gray-200 hover:border-gray-300 hover:bg-gray-50',
+                  )}
+                  aria-pressed={active}
+                >
+                  {category.label}
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        {visibleCategories.map((category) => (
+          <Fragment key={category.id}>
+            {!hideHeadings && !showTabs && (
+              <h3 className="text-xs font-bold uppercase tracking-widest text-primary mt-10 first:mt-0 mb-5">
+                {category.label}
+              </h3>
+            )}
+
+            {/* Masonry-style two-column grid on md+ */}
+            <div className="md:columns-2 md:gap-6 [column-fill:_balance]">
+              {category.items.map((item) => (
+                <FAQCard key={item.id} item={item} />
+              ))}
+            </div>
+          </Fragment>
+        ))}
+      </div>
+    );
+  }
+
+  // ── List variant (default, unchanged behavior) ───────────────────────────
+  const reference = listTone === 'reference';
   return (
     <div className={className}>
       {filteredCategories.map((category, catIndex) => (
         <Fragment key={category.id}>
           {/* Category heading */}
           {!hideHeadings && (
-            <div className={catIndex === 0 ? 'pt-2 pb-2' : 'pt-6 pb-2'}>
-              <h3 className="text-sm font-bold uppercase tracking-wider text-primary bg-primary/10 rounded-full px-3.5 py-1.5 inline-block">
-                {category.label}
-              </h3>
-            </div>
+            reference ? (
+              <div className={catIndex === 0 ? 'pt-2 pb-3' : 'pt-10 pb-3'}>
+                <h3 className="text-xs font-bold uppercase tracking-widest text-primary">
+                  {category.label}
+                </h3>
+              </div>
+            ) : (
+              <div className={catIndex === 0 ? 'pt-2 pb-2' : 'pt-6 pb-2'}>
+                <h3 className="text-sm font-bold uppercase tracking-wider text-primary bg-primary/10 rounded-full px-3.5 py-1.5 inline-block">
+                  {category.label}
+                </h3>
+              </div>
+            )
           )}
 
-          <Accordion type="single" collapsible className="w-full pl-3">
+          <Accordion
+            type="single"
+            collapsible
+            className={cn('w-full', reference ? '' : 'pl-3')}
+          >
             {category.items.map((item) => (
-              <FAQAccordionItem key={item.id} item={item} />
+              <FAQAccordionItem key={item.id} item={item} reference={reference} />
             ))}
           </Accordion>
         </Fragment>
@@ -97,7 +205,40 @@ export function HelpFAQSection({ categories, items, hideHeadings, className }: H
   );
 }
 
-function FAQAccordionItem({ item }: { item: FAQItem }) {
+function FAQAccordionItem({
+  item,
+  reference,
+}: {
+  item: FAQItem;
+  reference?: boolean;
+}) {
+  if (reference) {
+    // 'reference' mode: each Q&A reads as a substantial card-row with
+    // a left orange-accent rule that lights up on hover and open. Used
+    // by the About page where the FAQ is a first-class chapter rather
+    // than a sidebar.
+    return (
+      <AccordionItem
+        value={item.id}
+        className="group relative border-b-0 rounded-lg bg-white border border-gray-200 shadow-sm mb-3 overflow-hidden transition-colors hover:border-primary/40 data-[state=open]:border-primary/50 data-[state=open]:shadow-md"
+      >
+        {/* Left accent rule: orange when open, transparent otherwise */}
+        <span
+          aria-hidden
+          className="absolute left-0 top-0 bottom-0 w-1 bg-transparent group-hover:bg-primary/30 group-data-[state=open]:bg-primary transition-colors"
+        />
+        <AccordionTrigger className="text-left text-base sm:text-lg font-bold tracking-tight leading-snug hover:no-underline gap-3 px-5 sm:px-6 py-5">
+          {item.question}
+        </AccordionTrigger>
+        <AccordionContent className="text-[15px] leading-relaxed text-gray-600 space-y-3 px-5 sm:px-6 pb-5 -mt-1">
+          {item.answer.map((paragraph, i) => (
+            <p key={i}>{renderInlineMarkup(paragraph)}</p>
+          ))}
+        </AccordionContent>
+      </AccordionItem>
+    );
+  }
+
   return (
     <AccordionItem value={item.id}>
       <AccordionTrigger className="text-left text-base font-semibold leading-snug hover:no-underline gap-3">
@@ -111,3 +252,27 @@ function FAQAccordionItem({ item }: { item: FAQItem }) {
     </AccordionItem>
   );
 }
+
+/**
+ * A single FAQ entry rendered as its own rounded card. Wraps a one-item
+ * Radix Accordion so the click-to-expand UX is preserved. Used by the
+ * About page's card-variant FAQ section.
+ */
+function FAQCard({ item }: { item: FAQItem }) {
+  return (
+    <div className="mb-6 break-inside-avoid rounded-2xl border border-gray-200 bg-white shadow-sm">
+      <Accordion type="single" collapsible>
+        <AccordionItem value={item.id} className="border-b-0">
+          <AccordionTrigger className="text-left font-display font-semibold text-gray-900 text-lg leading-snug hover:no-underline px-5 py-4 gap-3">
+            {item.question}
+          </AccordionTrigger>
+          <AccordionContent className="text-[15px] leading-relaxed text-gray-600 space-y-3 px-5 pb-5">
+            {item.answer.map((paragraph, i) => (
+              <p key={i}>{renderInlineMarkup(paragraph)}</p>
+            ))}
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
diff --git a/src/components/HelpTip.tsx b/src/components/HelpTip.tsx
index 8e42ae64..8fe52d72 100644
--- a/src/components/HelpTip.tsx
+++ b/src/components/HelpTip.tsx
@@ -57,7 +57,7 @@ export function HelpTip({ faqId, iconSize = 'size-4', className }: HelpTipProps)
 
         {/* Link to full FAQ */}
         <Link
-          to="/help"
+          to="/about#faq"
           className="block text-xs text-primary hover:text-primary/80 font-medium transition-colors"
         >
           View all FAQs &rarr;
diff --git a/src/components/LandingHero.tsx b/src/components/LandingHero.tsx
index 40820999..f93802e6 100644
--- a/src/components/LandingHero.tsx
+++ b/src/components/LandingHero.tsx
@@ -30,7 +30,7 @@ export function LandingHero({ onJoinClick }: LandingHeroProps) {
             Join
           </Button>
           <Button variant="outline" className="rounded-full px-6" size="sm" asChild>
-            <Link to="/help">FAQ</Link>
+            <Link to="/about#faq">FAQ</Link>
           </Button>
         </div>
       </div>
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 383cb87a..94db2cbd 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -3,8 +3,8 @@ import { Link, NavLink, useNavigate } from 'react-router-dom';
 import {
   Activity,
   Bell,
-  CircleHelp,
   HandHeart,
+  Info,
   Megaphone,
   Menu,
   Search,
@@ -208,7 +208,7 @@ function getProfileMenuItems({
     { label: 'Profile', to: `/${nip19.npubEncode(userPubkey)}`, icon: User },
     { label: 'Search', to: '/search', icon: Search },
     { label: 'Settings', to: '/settings', icon: Settings },
-    { label: 'Help', to: '/help', icon: CircleHelp },
+    { label: 'About', to: '/about', icon: Info },
   ];
 }
 
diff --git a/src/components/auth/AccountSwitcher.tsx b/src/components/auth/AccountSwitcher.tsx
index 99066426..7561b7f6 100644
--- a/src/components/auth/AccountSwitcher.tsx
+++ b/src/components/auth/AccountSwitcher.tsx
@@ -113,9 +113,9 @@ export function AccountSwitcher({ onAddAccountClick }: AccountSwitcherProps) {
           </Link>
         </DropdownMenuItem>
         <DropdownMenuItem asChild className='flex items-center gap-2 cursor-pointer p-2 rounded-md'>
-          <Link to="/help">
+          <Link to="/about">
             <CircleHelp className='w-4 h-4' />
-            <span>Help</span>
+            <span>About</span>
           </Link>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
diff --git a/src/components/guide/CalloutCard.tsx b/src/components/guide/CalloutCard.tsx
new file mode 100644
index 00000000..8da2ac41
--- /dev/null
+++ b/src/components/guide/CalloutCard.tsx
@@ -0,0 +1,73 @@
+import { AlertTriangle, CheckCircle2, Info, ShieldAlert } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { renderInlineMarkup } from '@/lib/helpMarkup';
+import type { GuideCalloutBlock } from '@/lib/helpContent';
+
+const VARIANT_STYLES: Record<
+  GuideCalloutBlock['variant'],
+  { container: string; icon: string; title: string; Icon: LucideIcon }
+> = {
+  info: {
+    container: 'border-sky-500/40 bg-sky-500/5',
+    icon: 'text-sky-600 dark:text-sky-400',
+    title: 'text-sky-700 dark:text-sky-300',
+    Icon: Info,
+  },
+  warning: {
+    container: 'border-amber-500/40 bg-amber-500/5',
+    icon: 'text-amber-600 dark:text-amber-400',
+    title: 'text-amber-700 dark:text-amber-300',
+    Icon: AlertTriangle,
+  },
+  danger: {
+    container: 'border-red-500/40 bg-red-500/5',
+    icon: 'text-red-600 dark:text-red-400',
+    title: 'text-red-700 dark:text-red-300',
+    Icon: ShieldAlert,
+  },
+  success: {
+    container: 'border-emerald-500/40 bg-emerald-500/5',
+    icon: 'text-emerald-600 dark:text-emerald-400',
+    title: 'text-emerald-700 dark:text-emerald-300',
+    Icon: CheckCircle2,
+  },
+};
+
+/**
+ * Tinted callout card with an icon, short title, and one-paragraph body.
+ * The four variants map to common semantic intents (info, warning,
+ * danger, success) and share the same layout so the page reads as a
+ * consistent rhythm of blocks rather than a parade of different shapes.
+ */
+export function CalloutCard({ block }: { block: GuideCalloutBlock }) {
+  const styles = VARIANT_STYLES[block.variant];
+  const { Icon } = styles;
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border p-5 sm:p-6 flex gap-4',
+        styles.container,
+      )}
+    >
+      <div
+        className={cn(
+          'flex size-9 shrink-0 items-center justify-center rounded-full bg-background/70',
+          styles.icon,
+        )}
+      >
+        <Icon className="size-5" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className={cn('font-semibold leading-snug mb-1', styles.title)}>
+          {renderInlineMarkup(block.title)}
+        </p>
+        <p className="text-sm text-foreground/85 leading-relaxed">
+          {renderInlineMarkup(block.body)}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/guide/GuideProse.tsx b/src/components/guide/GuideProse.tsx
new file mode 100644
index 00000000..e96cd9d8
--- /dev/null
+++ b/src/components/guide/GuideProse.tsx
@@ -0,0 +1,21 @@
+import { renderInlineMarkup } from '@/lib/helpMarkup';
+import type { GuideProseBlock } from '@/lib/helpContent';
+
+/**
+ * Plain prose escape hatch. Used sparingly when nothing in the visual
+ * kit fits. Renders an optional heading and short paragraphs.
+ */
+export function GuideProse({ block }: { block: GuideProseBlock }) {
+  return (
+    <section>
+      {block.heading && (
+        <h2 className="text-lg font-bold tracking-tight mb-3">{block.heading}</h2>
+      )}
+      <div className="space-y-3 text-sm leading-relaxed text-foreground/85">
+        {block.paragraphs.map((p, i) => (
+          <p key={i}>{renderInlineMarkup(p)}</p>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/guide/GuideSteps.tsx b/src/components/guide/GuideSteps.tsx
new file mode 100644
index 00000000..94d9a040
--- /dev/null
+++ b/src/components/guide/GuideSteps.tsx
@@ -0,0 +1,37 @@
+import { renderInlineMarkup } from '@/lib/helpMarkup';
+import type { GuideStepsBlock } from '@/lib/helpContent';
+
+/**
+ * Numbered vertical flow of short steps. Each step gets a primary-tinted
+ * circle on the left with its index, then title + body to the right.
+ *
+ * Visual goal: replace 3 or 4 paragraphs of "first X, then Y" prose with
+ * a scannable list that can be read in seconds.
+ */
+export function GuideSteps({ block }: { block: GuideStepsBlock }) {
+  return (
+    <section>
+      <h2 className="text-lg font-bold tracking-tight mb-4">{block.heading}</h2>
+      <ol className="space-y-4">
+        {block.steps.map((step, i) => (
+          <li key={i} className="flex gap-4">
+            <span
+              aria-hidden="true"
+              className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary font-semibold text-sm"
+            >
+              {i + 1}
+            </span>
+            <div className="flex-1 min-w-0 pt-0.5">
+              <p className="font-semibold text-foreground leading-snug">
+                {renderInlineMarkup(step.title)}
+              </p>
+              <p className="text-sm text-muted-foreground leading-relaxed mt-1">
+                {renderInlineMarkup(step.body)}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
diff --git a/src/components/guide/GuideTLDR.tsx b/src/components/guide/GuideTLDR.tsx
new file mode 100644
index 00000000..37f51d22
--- /dev/null
+++ b/src/components/guide/GuideTLDR.tsx
@@ -0,0 +1,40 @@
+import { Check } from 'lucide-react';
+
+import { Card } from '@/components/ui/card';
+import { renderInlineMarkup } from '@/lib/helpMarkup';
+import type { GuideTldrBlock } from '@/lib/helpContent';
+
+/**
+ * Top-of-page summary card. Renders the lede on the left and a checklist
+ * of 2 to 3 next actions on the right (stacked on mobile). Sets the
+ * page's promise in a single screen.
+ */
+export function GuideTLDR({ block }: { block: GuideTldrBlock }) {
+  return (
+    <Card className="overflow-hidden border-primary/20 bg-gradient-to-br from-primary/5 via-card to-card">
+      <div className="grid gap-5 p-5 sm:p-6 sm:grid-cols-[1fr_auto] sm:gap-8 sm:items-center">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary/80 mb-2">
+            The short version
+          </p>
+          <p className="text-lg sm:text-xl font-medium leading-snug text-foreground">
+            {renderInlineMarkup(block.lede)}
+          </p>
+        </div>
+        <ul className="space-y-2 sm:min-w-[220px]">
+          {block.nextActions.map((action, i) => (
+            <li
+              key={i}
+              className="flex items-start gap-2 text-sm text-foreground/85"
+            >
+              <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary">
+                <Check className="size-3" strokeWidth={3} />
+              </span>
+              <span className="leading-snug">{renderInlineMarkup(action)}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/components/guide/InlinePaymentBadge.tsx b/src/components/guide/InlinePaymentBadge.tsx
new file mode 100644
index 00000000..c831ed8b
--- /dev/null
+++ b/src/components/guide/InlinePaymentBadge.tsx
@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import type { PaymentMode } from '@/lib/helpContent';
+
+interface InlinePaymentBadgeProps {
+  mode: PaymentMode;
+  className?: string;
+}
+
+/**
+ * Small inline pill that visually distinguishes the two payment options
+ * a campaign can accept (public Bitcoin or silent payments) wherever
+ * they're mentioned in guide copy or table headers.
+ *
+ * Public uses the project's primary accent (orange). Silent uses an
+ * indigo tint so the two read as visually different at a glance without
+ * either looking like a warning state.
+ */
+export function InlinePaymentBadge({ mode, className }: InlinePaymentBadgeProps) {
+  const label = mode === 'public' ? 'Public' : 'Silent';
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold leading-none',
+        mode === 'public'
+          ? 'bg-primary/15 text-primary border border-primary/30'
+          : 'bg-indigo-500/15 text-indigo-700 dark:text-indigo-300 border border-indigo-500/30',
+        className,
+      )}
+    >
+      {label} Payments
+    </span>
+  );
+}
diff --git a/src/components/guide/OptionGrid.tsx b/src/components/guide/OptionGrid.tsx
new file mode 100644
index 00000000..8ad2e4ad
--- /dev/null
+++ b/src/components/guide/OptionGrid.tsx
@@ -0,0 +1,82 @@
+import { ExternalLink } from 'lucide-react';
+
+import { Card } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { renderInlineMarkup } from '@/lib/helpMarkup';
+import type { GuideOptionGridBlock, GuideOptionItem } from '@/lib/helpContent';
+
+/**
+ * Two-column grid of compact OptionCards (single column on mobile). Used
+ * for the "donate privately" and "cash out" sections. Condenses what
+ * used to be 4 to 6 long-form section cards into a scannable tile grid.
+ */
+export function OptionGrid({ block }: { block: GuideOptionGridBlock }) {
+  return (
+    <section>
+      <h2 className="text-lg font-bold tracking-tight">{block.heading}</h2>
+      {block.intro && (
+        <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
+          {renderInlineMarkup(block.intro)}
+        </p>
+      )}
+      <div className="grid gap-3 sm:grid-cols-2 mt-4">
+        {block.options.map((option) => (
+          <OptionCard key={option.name} option={option} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function OptionCard({ option }: { option: GuideOptionItem }) {
+  const isLink = Boolean(option.href);
+
+  const inner = (
+    <Card
+      className={cn(
+        'h-full p-4 flex flex-col gap-3 border-border/70 motion-safe:transition-shadow motion-safe:duration-200',
+        isLink && 'group-hover:shadow-md group-hover:border-primary/40 motion-safe:transition-colors',
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <p className="font-semibold text-foreground leading-snug">{option.name}</p>
+        {isLink && (
+          <ExternalLink
+            className="size-3.5 mt-1 shrink-0 text-muted-foreground motion-safe:transition-colors group-hover:text-primary"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+      <p className="text-sm text-muted-foreground leading-relaxed flex-1">
+        {renderInlineMarkup(option.purpose)}
+      </p>
+      {option.chips.length > 0 && (
+        <ul className="flex flex-wrap gap-1.5">
+          {option.chips.map((chip) => (
+            <li
+              key={chip}
+              className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-[11px] font-medium text-secondary-foreground/80"
+            >
+              {chip}
+            </li>
+          ))}
+        </ul>
+      )}
+    </Card>
+  );
+
+  if (isLink) {
+    return (
+      <a
+        href={option.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-safe:transition-transform motion-safe:hover:-translate-y-0.5"
+      >
+        {inner}
+      </a>
+    );
+  }
+
+  return inner;
+}
diff --git a/src/components/guide/PaymentComparisonTable.tsx b/src/components/guide/PaymentComparisonTable.tsx
new file mode 100644
index 00000000..92e85cac
--- /dev/null
+++ b/src/components/guide/PaymentComparisonTable.tsx
@@ -0,0 +1,211 @@
+import { Bell, Bug, Eye, EyeOff, Gauge, ShieldCheck, Sparkles, Wallet } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { renderInlineMarkup } from '@/lib/helpMarkup';
+import { InlinePaymentBadge } from './InlinePaymentBadge';
+import type { GuidePaymentComparisonBlock } from '@/lib/helpContent';
+
+interface Row {
+  label: string;
+  Icon: LucideIcon;
+  public: string;
+  silent: string;
+}
+
+const DONOR_ROWS: Row[] = [
+  {
+    label: 'What you see',
+    Icon: Eye,
+    public: 'A regular Bitcoin address you can pay from anywhere.',
+    silent:
+      'The same QR. Your wallet picks the silent-payment endpoint if it supports BIP-352.',
+  },
+  {
+    label: 'Wallet support',
+    Icon: Wallet,
+    public:
+      'Every Bitcoin wallet. Cash App, Coinbase, Strike, hardware, anything.',
+    silent:
+      'Few wallets today. Most fall back to a regular Bitcoin transaction.',
+  },
+  {
+    label: 'Privacy of the donation',
+    Icon: ShieldCheck,
+    public:
+      'Public on-chain. Your sending address is permanently linked to the campaign.',
+    silent:
+      "Receiving side is unlinkable on-chain. Your sending wallet's trail is still public.",
+  },
+  {
+    label: 'Settlement',
+    Icon: Gauge,
+    public: 'Normal Bitcoin confirmations.',
+    silent:
+      'Same on-chain confirmations, but the activist has to scan their wallet to find it.',
+  },
+];
+
+const ACTIVIST_ROWS: Row[] = [
+  {
+    label: 'What donors see',
+    Icon: Sparkles,
+    public:
+      'A regular Bitcoin address. Works with every wallet on earth.',
+    silent:
+      "A BIP-352 endpoint. Donors' wallets need silent-payments support; otherwise the donation falls back to a regular Bitcoin transaction.",
+  },
+  {
+    label: 'Receiving speed',
+    Icon: Gauge,
+    public: 'Push-style. Donations show up immediately on the campaign page.',
+    silent:
+      'Manual scanning. Your wallet has to walk the blockchain looking for them. Minutes to hours, depending on the wallet.',
+  },
+  {
+    label: 'Push notifications',
+    Icon: Bell,
+    public: 'Yes. You see new donations the moment they arrive.',
+    silent: 'No. Open the wallet and trigger a scan to discover them.',
+  },
+  {
+    label: 'Donor list / campaign totals',
+    Icon: Eye,
+    public:
+      'Public forever. Amounts and sending addresses are visible to anyone.',
+    silent:
+      "Private. The campaign page can't show silent-payments donation counts or totals.",
+  },
+  {
+    label: 'Ecosystem maturity',
+    Icon: Bug,
+    public: 'Mature. Settled tooling.',
+    silent:
+      'Bleeding-edge. Wallets are still buggy; expect missed payments that show up on a later scan.',
+  },
+  {
+    label: 'Best for',
+    Icon: ShieldCheck,
+    public:
+      'Above-ground fundraisers where social proof and visibility help.',
+    silent:
+      'Campaigns where donor or activist privacy matters more than the visible total.',
+  },
+  {
+    label: 'Watch out for',
+    Icon: EyeOff,
+    public: 'Permanent public record of every donor.',
+    silent:
+      "Bumpy UX today. Some donations won't show until the activist scans.",
+  },
+];
+
+/**
+ * Side-by-side comparison of Public Payments vs. Silent Payments.
+ *
+ * - Desktop (`sm:` and up): three-column grid with row labels on the
+ *   left, Public tinted in primary, Silent tinted in indigo.
+ * - Mobile: collapses to two stacked tinted cards (one per option) with
+ *   the same row labels inside each card. No sideways scrolling.
+ *
+ * Row content is driven by the `audience` flag so donors and activists
+ * get row copy tuned to what they care about.
+ */
+export function PaymentComparisonTable({
+  block,
+}: {
+  block: GuidePaymentComparisonBlock;
+}) {
+  const rows = block.audience === 'donor' ? DONOR_ROWS : ACTIVIST_ROWS;
+
+  return (
+    <section>
+      {/* ── Desktop: aligned 3-column grid ──────────────────────────── */}
+      <div className="hidden sm:block">
+        <div className="rounded-xl border overflow-hidden">
+          {/* Header row */}
+          <div className="grid grid-cols-[1.1fr_1fr_1fr] bg-secondary/40 border-b">
+            <div className="px-4 py-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              {block.audience === 'donor' ? 'When you donate' : 'When you create'}
+            </div>
+            <div className="px-4 py-3 border-l">
+              <InlinePaymentBadge mode="public" />
+            </div>
+            <div className="px-4 py-3 border-l">
+              <InlinePaymentBadge mode="silent" />
+            </div>
+          </div>
+          {/* Body rows */}
+          {rows.map((row, i) => (
+            <div
+              key={row.label}
+              className={cn(
+                'grid grid-cols-[1.1fr_1fr_1fr]',
+                i < rows.length - 1 && 'border-b',
+              )}
+            >
+              <div className="px-4 py-3 flex items-center gap-2 text-sm font-medium text-foreground">
+                <row.Icon className="size-4 text-muted-foreground shrink-0" />
+                {row.label}
+              </div>
+              <div className="px-4 py-3 border-l text-sm text-foreground/85 leading-snug">
+                {renderInlineMarkup(row.public)}
+              </div>
+              <div className="px-4 py-3 border-l text-sm text-foreground/85 leading-snug">
+                {renderInlineMarkup(row.silent)}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Mobile: two stacked tinted cards ───────────────────────── */}
+      <div className="grid gap-3 sm:hidden">
+        <PaymentStack mode="public" rows={rows} />
+        <PaymentStack mode="silent" rows={rows} />
+      </div>
+
+      {block.footnote && (
+        <p className="text-xs text-muted-foreground mt-3 leading-relaxed">
+          {renderInlineMarkup(block.footnote)}
+        </p>
+      )}
+    </section>
+  );
+}
+
+function PaymentStack({
+  mode,
+  rows,
+}: {
+  mode: 'public' | 'silent';
+  rows: Row[];
+}) {
+  return (
+    <div
+      className={cn(
+        'rounded-xl border overflow-hidden',
+        mode === 'public'
+          ? 'border-primary/30 bg-primary/[0.04]'
+          : 'border-indigo-500/30 bg-indigo-500/[0.04]',
+      )}
+    >
+      <div className="px-4 py-3 border-b border-inherit">
+        <InlinePaymentBadge mode={mode} />
+      </div>
+      <dl className="divide-y divide-border/60">
+        {rows.map((row) => (
+          <div key={row.label} className="px-4 py-3">
+            <dt className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              <row.Icon className="size-3.5 shrink-0" />
+              {row.label}
+            </dt>
+            <dd className="mt-1 text-sm text-foreground/85 leading-snug">
+              {renderInlineMarkup(mode === 'public' ? row.public : row.silent)}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}
diff --git a/src/components/guide/index.ts b/src/components/guide/index.ts
new file mode 100644
index 00000000..0f55a168
--- /dev/null
+++ b/src/components/guide/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Block primitives for the Donor Guide and Activist Guide pages. Each
+ * component takes the matching {@link GuideBlock} variant and renders it.
+ * The page just dispatches on `block.kind`.
+ */
+
+export { CalloutCard } from './CalloutCard';
+export { GuideProse } from './GuideProse';
+export { GuideSteps } from './GuideSteps';
+export { GuideTLDR } from './GuideTLDR';
+export { InlinePaymentBadge } from './InlinePaymentBadge';
+export { OptionGrid } from './OptionGrid';
+export { PaymentComparisonTable } from './PaymentComparisonTable';
diff --git a/src/lib/helpContent.ts b/src/lib/helpContent.ts
index 6dc6ad35..fd0ac843 100644
--- a/src/lib/helpContent.ts
+++ b/src/lib/helpContent.ts
@@ -344,212 +344,358 @@ export { TEAM_SOAPBOX as TEAM_SOAPBOX_PACK } from '@/lib/agoraDefaults';
 // ── Donor / Activist guide content ────────────────────────────────────────────
 
 /**
- * A single section inside a long-form guide page (Donor Guide / Activist
- * Guide). Each section renders as a Card on the guide page.
+ * The Donor Guide and Activist Guide pages are composed from a typed
+ * sequence of {@link GuideBlock}s. Each block kind is rendered by a
+ * dedicated component from `@/components/guide/`. The page just
+ * dispatches on `block.kind`.
  *
- * `paragraphs` accept the same inline markup as FAQ answers (**bold** and
- * [link](url)), rendered by `renderInlineMarkup` from `@/lib/helpMarkup`.
- *
- * `pros` / `cons` are optional and render as a bullet pair underneath the
- * paragraphs. They are used for tradeoff-heavy topics like cash-out methods.
+ * String fields may contain the same inline markup as FAQ answers
+ * (`**bold**` and `[link](url)`), and the `{appName}` placeholder. Both
+ * are resolved at read-time by the `getDonorGuideBlocks` /
+ * `getActivistGuideBlocks` helpers below.
  */
-export interface GuideSection {
-  /** Stable key, used for React keys and potential deep-linking. */
-  id: string;
-  /** Section heading. */
-  heading: string;
-  /** Body paragraphs, in order. */
-  paragraphs: string[];
-  /** Optional positives, rendered as a green-flavored bullet list. */
-  pros?: string[];
-  /** Optional negatives / caveats, rendered as an amber-flavored bullet list. */
-  cons?: string[];
+
+/**
+ * The two payment options a campaign can offer. Used by table headers
+ * and inline badges.
+ *
+ * - `'public'`: a regular Bitcoin address. Visible on-chain, every
+ *   wallet can pay it.
+ * - `'silent'`: a BIP-352 silent-payments endpoint. The receiving side
+ *   is unlinkable on-chain, but most wallets can't send to it yet.
+ */
+export type PaymentMode = 'public' | 'silent';
+
+/**
+ * Top-of-page summary card. One-sentence lede, plus 2 to 3 chip-style
+ * next-actions that orient the reader without making them scroll.
+ */
+export interface GuideTldrBlock {
+  kind: 'tldr';
+  lede: string;
+  nextActions: string[];
 }
 
-const DONOR_GUIDE_TEMPLATE: GuideSection[] = [
+/** Numbered vertical flow of 2 to 4 short steps. */
+export interface GuideStepsBlock {
+  kind: 'steps';
+  heading: string;
+  steps: { title: string; body: string }[];
+}
+
+/**
+ * Side-by-side comparison of Public Payments vs. Silent Payments.
+ * Rendered as a real two-column table on desktop and as two stacked
+ * tinted cards on mobile (no sideways scroll). Audience controls row
+ * copy: donors see "what to expect when paying," activists see "what
+ * to choose."
+ */
+export interface GuidePaymentComparisonBlock {
+  kind: 'paymentComparison';
+  audience: 'donor' | 'activist';
+  /** Optional one-line footnote rendered under the table. */
+  footnote?: string;
+}
+
+/** Single-line callout block with a tinted background and an icon. */
+export interface GuideCalloutBlock {
+  kind: 'callout';
+  variant: 'info' | 'warning' | 'danger' | 'success';
+  title: string;
+  body: string;
+}
+
+/** A short prose paragraph block (escape hatch for the rare "needs words"). */
+export interface GuideProseBlock {
+  kind: 'prose';
+  heading?: string;
+  paragraphs: string[];
+}
+
+/** A single tile inside a {@link GuideOptionGridBlock}. */
+export interface GuideOptionItem {
+  /** Tile heading. */
+  name: string;
+  /** One-sentence purpose / payoff. */
+  purpose: string;
+  /** Short tag chips (e.g. `non-custodial`, `low fees`). */
+  chips: string[];
+  /** Optional external URL the tile links to. */
+  href?: string;
+}
+
+/** Grid of compact OptionCard tiles. Used for cash-out and privacy options. */
+export interface GuideOptionGridBlock {
+  kind: 'optionGrid';
+  heading: string;
+  intro?: string;
+  options: GuideOptionItem[];
+}
+
+export type GuideBlock =
+  | GuideTldrBlock
+  | GuideStepsBlock
+  | GuidePaymentComparisonBlock
+  | GuideCalloutBlock
+  | GuideProseBlock
+  | GuideOptionGridBlock;
+
+const DONOR_GUIDE_TEMPLATE: GuideBlock[] = [
   {
-    id: 'how-donating-works',
-    heading: 'How donating works',
-    paragraphs: [
-      'When an activist creates a campaign, they choose what kinds of payments to accept: **public** (a regular Bitcoin address), **private** (silent payments), or **both**. The campaign\'s donate page shows a QR code that matches that choice.',
-      'When a campaign accepts **both**, the QR code encodes both endpoints. Silent-payment-capable wallets read it as a private payment; ordinary Bitcoin wallets read it as a normal payment to the public address. You don\'t have to choose \u2014 your wallet picks the right path automatically.',
-      'Either way, the money goes directly to the activist. {appName} doesn\'t hold or route it, and the address is derived from the activist\'s Nostr key so there\'s no middleman in between.',
+    kind: 'tldr',
+    lede: 'Pay the Bitcoin address on the campaign page from any wallet you already have. If the campaign accepts silent payments and your wallet supports them, your donation is private automatically.',
+    nextActions: [
+      'Pay from any Bitcoin wallet',
+      'No middleman, no holding period',
+      'Want privacy? Read below',
     ],
   },
   {
-    id: 'why-public',
-    heading: 'When your donation is public',
-    paragraphs: [
-      'Public Bitcoin donations are recorded on the public ledger. Anyone can look up an activist\'s address and see every public donation \u2014 the amount, the time, and the address it came from.',
-      'Your sending address can usually be traced back to wherever you bought the Bitcoin \u2014 a KYC consumer app like Cash App, Coinbase, Strike, Venmo, PayPal, Kraken, or Binance ties every transaction to your real identity. That link is what connects a public donation to who you are.',
-      '**Silent-payment donations are different.** They settle on-chain like any Bitcoin transaction, but the output can\'t be linked back to the activist\'s donation code. They don\'t appear in donor lists and don\'t count toward public totals. If the campaign accepts silent payments and your wallet supports them, your donation isn\'t visible to outside observers.',
+    kind: 'steps',
+    heading: 'How a donation flows',
+    steps: [
+      {
+        title: 'Open the campaign',
+        body: 'You see a single QR code. If the campaign accepts both options, it encodes both endpoints; your wallet picks the right one.',
+      },
+      {
+        title: 'Pay it from any wallet',
+        body: 'Cash App, Coinbase, Strike, a hardware wallet, anything. Pay the amount plus the network fee.',
+      },
+      {
+        title: 'It arrives directly',
+        body: "Funds settle straight to the activist. {appName} doesn't hold or route them, and the address is derived from the activist's Nostr key.",
+      },
     ],
   },
   {
-    id: 'privacy-silent-payments',
-    heading: 'For privacy: use a silent-payments wallet',
-    paragraphs: [
-      'The easiest way to donate privately is to use a Bitcoin wallet that supports **silent payments** (BIP-352). When you scan a campaign\'s QR code, your wallet will use the silent-payment rail automatically if the campaign accepts it.',
-      'Two options:',
-      '\u2022 [Ditto Wallet](https://ditto.pub) \u2014 a Nostr-native Bitcoin wallet that supports silent payments.',
-      '\u2022 [Dana](https://github.com/cygnet3/dana/releases/download/v0.7.4/app-live-release.apk) \u2014 a dedicated silent-payments wallet for Android.',
-      'One caveat: silent payments hide the donation itself, but not where the sats in your wallet came from. If you funded the wallet from a KYC exchange, the funding transaction is still traceable to you. For stronger privacy, fund the wallet with non-KYC Bitcoin (see below).',
-    ],
-    pros: ['Simplest privacy path \u2014 no coinjoin, no peer-to-peer trade.', 'Non-custodial \u2014 you keep your keys.', 'Donation never appears in public donor lists or totals.'],
-    cons: ['Only works if the campaign accepts silent payments (most do).', 'Funding the wallet from a KYC exchange still leaks the funding step.'],
+    kind: 'paymentComparison',
+    audience: 'donor',
+    footnote:
+      'Campaigns can accept Public only, Silent only, or both. If both, the QR code carries both endpoints. Your wallet picks the one it can use.',
   },
   {
-    id: 'privacy-non-kyc',
-    heading: 'For stronger privacy: source non-KYC Bitcoin',
-    paragraphs: [
-      'To remove the funding-step link entirely, buy Bitcoin peer-to-peer so it isn\'t tied to your government ID. [Bisq](https://bisq.network) and [HodlHodl](https://hodlhodl.com) let you trade on-chain Bitcoin directly with another person. [RoboSats](https://learn.robosats.com) is Lightning-only, so you\'d swap to Lightning with [Boltz](https://boltz.exchange) and then receive on RoboSats.',
-      'Move those sats into a silent-payments wallet (Ditto Wallet or Dana) and you have both halves of the privacy story: no KYC link on the way in, and no public trace on the way out.',
-    ],
-    pros: ['No exchange knows who you are.', 'Combined with silent payments, this is the strongest privacy setup.'],
-    cons: ['Slower and harder than a consumer app.', 'Requires finding a counterparty.'],
+    kind: 'callout',
+    variant: 'warning',
+    title: 'Public donations are visible on-chain forever',
+    body: 'A **Public** donation lands at a regular Bitcoin address tied to the campaign. Anyone can look up the address and see the amount, the time, and your sending address. **Silent** donations settle on-chain too, but the receiving side is unlinkable to the campaign so they stay out of public donor lists and totals.',
   },
   {
-    id: 'privacy-coinjoin',
-    heading: 'If you can\'t switch wallets: coinjoin first',
-    paragraphs: [
-      'If you\'re stuck using an ordinary Bitcoin wallet (no silent-payments support) and the campaign only accepts public payments, a coinjoin mixes your Bitcoin with other people\'s coins so the output can\'t be linked back to the input. Wallets like [Wasabi](https://wasabiwallet.io), [Sparrow](https://sparrowwallet.com), and [JoinMarket](https://github.com/JoinMarket-Org/joinmarket-clientserver) support this.',
+    kind: 'optionGrid',
+    heading: 'Donating privately',
+    intro:
+      "These steps matter most for **Public** donations, where every transaction is permanently tied to a single address. **Silent** donations already hide the receiving side, so the risk is lower. Targeted analysis of your sending wallet is still possible either way, so if your risk is high these steps are worth taking. Pick one, or stack them.",
+    options: [
+      {
+        name: 'Use a silent-payments wallet',
+        purpose:
+          'Pay with a Bitcoin wallet that supports BIP-352. If the campaign accepts silent payments, your wallet uses that endpoint automatically.',
+        chips: ['non-custodial', 'easiest', 'BIP-352'],
+        href: 'https://ditto.pub',
+      },
+      {
+        name: 'Buy non-KYC Bitcoin',
+        purpose:
+          "Buy Bitcoin peer-to-peer so it isn't linked to your government ID in the first place. Strongest privacy starting point.",
+        chips: ['peer-to-peer', 'no ID'],
+        href: 'https://bisq.network',
+      },
+      {
+        name: 'Coinjoin first',
+        purpose:
+          "Mix your Bitcoin with other people's coins so the output can't be traced to your KYC purchase. Useful when the campaign only accepts public.",
+        chips: ['non-custodial', 'breaks history'],
+        href: 'https://wasabiwallet.io',
+      },
+      {
+        name: 'Use a fresh wallet',
+        purpose:
+          'Donate from a wallet that has never touched your main identity or a KYC exchange.',
+        chips: ['free', 'non-custodial', 'easiest'],
+        href: 'https://sparrowwallet.com',
+      },
     ],
-    pros: ['Breaks the on-chain trail from your KYC purchase.', 'Non-custodial.'],
-    cons: ['Costs fees and takes time.', 'Fewer maintained tools after the Samourai shutdown.', 'Silent payments are usually easier if the campaign accepts them.'],
   },
   {
-    id: 'donor-comparison',
-    heading: 'Quick comparison',
+    kind: 'callout',
+    variant: 'danger',
+    title: "Consumer apps can't make you anonymous",
+    body: 'Cash App, Coinbase, Strike, Venmo, Kraken, Binance, and PayPal all verify your ID. No matter how you send the donation, every transaction stays tied to your real identity. Use a non-custodial wallet you control.',
+  },
+  {
+    kind: 'prose',
+    heading: 'A note on silent payments today',
     paragraphs: [
-      '**Silent-payments wallet (Ditto Wallet, Dana):** non-custodial \u00b7 high privacy \u00b7 easy \u00b7 low fees. Best default if the campaign accepts private payments.',
-      '**Non-KYC source + silent payments:** non-custodial \u00b7 strongest privacy \u00b7 harder \u00b7 variable fees.',
-      '**Coinjoin + public donation:** non-custodial \u00b7 high privacy \u00b7 medium difficulty \u00b7 medium fees. Useful when only public payments are accepted.',
-      '**Consumer app (Cash App, Coinbase, Strike, Venmo, PayPal):** custodial \u00b7 no privacy \u00b7 easiest \u00b7 ties the donation to your real identity. Convenient, but never anonymous.',
+      "Silent payments are the most private way to receive Bitcoin on-chain, but the ecosystem is young. Most popular wallets can't send to a silent-payment endpoint yet, so when a wallet can't, the donation falls back to a regular Bitcoin transaction to the campaign's public address (if the campaign accepts both).",
+      'For activists, silent-payment donations also arrive without push notifications and only appear after the activist scans their wallet, which can take minutes to hours. None of this affects the safety of your funds; it just shapes the experience.',
     ],
   },
 ];
 
-const ACTIVIST_GUIDE_TEMPLATE: GuideSection[] = [
+const ACTIVIST_GUIDE_TEMPLATE: GuideBlock[] = [
   {
-    id: 'how-receiving-works',
+    kind: 'tldr',
+    lede: "Pick what to accept when you create your campaign: Public, Silent, or both. Either option is non-custodial. {appName} never holds your funds.",
+    nextActions: [
+      'Compare the two options',
+      'Plan how you will cash out',
+      'Sweep funds promptly',
+    ],
+  },
+  {
+    kind: 'prose',
     heading: 'How receiving works',
     paragraphs: [
-      'Your {appName} donation addresses are derived from your Nostr public key. When you create a campaign, you pick what kinds of payments to accept:',
-      '\u2022 **Public payments only** \u2014 a regular Bitcoin address. Visible to everyone, works with every wallet.',
-      '\u2022 **Private payments only** \u2014 silent payments (BIP-352). Settles on-chain but unlinkable to your donation code, so it stays out of public donor lists and totals. Donors need a silent-payment-capable wallet to send.',
-      '\u2022 **Both** \u2014 {appName} generates a single QR code that encodes both endpoints. Silent-payment wallets read it as private; ordinary wallets pay the public address. Donors don\'t have to choose.',
-      'Accepting both is usually the right call: you get private donations from supporters who use a silent-payments wallet, and you stay open to donors whose only Bitcoin is in a consumer app. No one stands between you and the funds either way, and no server can be shut down to stop them.',
+      "Your {appName} donation addresses are derived from your Nostr public key. When you create a campaign, you pick what to accept:",
+      "**Public payments only.** A regular Bitcoin address. Visible to everyone, works with every wallet.",
+      "**Silent payments only.** BIP-352 silent payments. The receiving side is unlinkable on-chain, so donations stay out of public donor lists and totals. Donors need a silent-payments-capable wallet to send. If they don't have one, their donation can't go through.",
+      "**Both.** {appName} generates a single QR code that encodes both endpoints. Silent-payments wallets read it as private; ordinary wallets pay the public address. Donors don't have to choose.",
+      'Accepting both is usually the right call: you get private donations from supporters who use a silent-payments wallet, and you stay open to donors whose only Bitcoin is in a consumer app.',
     ],
   },
   {
-    id: 'why-public',
-    heading: 'What\'s visible and what isn\'t',
+    kind: 'prose',
+    heading: 'What everyone can see',
     paragraphs: [
-      '**Public donations** are recorded on the Bitcoin blockchain. Anyone can look up your address and see every public donation \u2014 the amount, the time, and the sending address. Your supporters\' addresses are visible too. These donations show up in your campaign\'s donor list and progress totals.',
-      '**Private donations** use silent payments. They settle on-chain like any Bitcoin transaction, but the output can\'t be linked back to your donation code. By design they don\'t appear in donor lists and don\'t count toward public totals \u2014 only you can see them, by scanning with the wallet that holds the key.',
+      'If your campaign accepts public payments, anyone considering supporting you can look up the address and see the public donation history.',
+      "Silent-payment donations aren't part of that record. They're invisible to outside observers and don't show in the campaign's public totals; new donors only see whatever you publish about the campaign's progress.",
     ],
   },
   {
-    id: 'dont-keep-funds',
-    heading: 'Don\'t keep funds at your {appName} address',
+    kind: 'paymentComparison',
+    audience: 'activist',
+    footnote:
+      "You can't switch a campaign's accepted payment options after it's created. If you change your mind, make a new campaign.",
+  },
+  {
+    kind: 'prose',
+    heading: 'A note on silent payments today',
     paragraphs: [
-      'Move funds to a wallet you control as soon as practical. Treat your {appName} address like a mailbox, not a savings account.',
-      'For public donations: [Sparrow](https://sparrowwallet.com), [BlueWallet](https://bluewallet.io), or [Phoenix](https://phoenix.acinq.co) (Lightning) are good self-custody options.',
-      'For private (silent-payment) donations: a silent-payments wallet like [Ditto Wallet](https://ditto.pub) or [Dana](https://github.com/cygnet3/dana/releases/download/v0.7.4/app-live-release.apk) can scan for and hold them. {appName} itself supports scanning, but moving funds onward to a dedicated wallet is still recommended.',
+      "Silent payments are the most private way to receive Bitcoin on-chain, but the ecosystem is young. Most popular wallets can't send to a silent-payment endpoint yet, so when a donor's wallet can't, the donation falls back to a regular Bitcoin transaction to your public address (if you accept both).",
+      'Silent-payment donations also arrive without push notifications and only appear after you scan your wallet, which can take minutes to hours. None of this affects the safety of your funds; it just shapes the day-to-day experience.',
     ],
   },
   {
-    id: 'cashout-overview',
-    heading: 'Cashing out privately \u2014 overview',
-    paragraphs: [
-      'The simplest privacy exit is to **move your donations into a silent-payments wallet first**, and then spend onward from there. The hop into the silent-payments wallet breaks the link between your public campaign address and what comes next \u2014 once the funds are sitting in that wallet, you can send them to any Bitcoin address with a fresh chain-analysis trail.',
-      'The other approaches below (Lightning swap, coinjoin, peer-to-peer exchange) still work and have their own tradeoffs. Tumblers are usually a bad idea.',
+    kind: 'steps',
+    heading: 'Move donations promptly',
+    steps: [
+      {
+        title: 'Sweep to a wallet you control',
+        body: 'Good self-custody options: [Sparrow](https://sparrowwallet.com), [BlueWallet](https://bluewallet.io), or [Phoenix](https://phoenix.acinq.co) (Lightning).',
+      },
+      {
+        title: "Don't sit on funds at the campaign address",
+        body: 'Treat it like a mailbox, not a savings account. This applies to both Public and Silent donations.',
+      },
     ],
   },
   {
-    id: 'cashout-silent-payments',
-    heading: 'Cash out to a silent-payments wallet',
-    paragraphs: [
-      'Move your public donations into a wallet that can receive via silent payments \u2014 [Ditto Wallet](https://ditto.pub) or [Dana](https://github.com/cygnet3/dana/releases/download/v0.7.4/app-live-release.apk). Both generate a silent-payment receiving code; send your funds to that code from your {appName} address.',
-      'Once the money lands in the silent-payments wallet, the link between your public campaign address and your downstream spending is broken \u2014 the receiving transaction settles on-chain but isn\'t connected to the silent-payments wallet\'s reusable code. From there you can spend to any Bitcoin address and the chain-analysis trail starts fresh.',
-      'If your campaign was set to accept silent payments to begin with, the private donations are already going straight to whatever silent-payments wallet you scan them in \u2014 there\'s nothing extra to do.',
-    ],
-    pros: ['Simplest privacy exit \u2014 no swap services, no peer-to-peer trade.', 'Non-custodial \u2014 you keep your keys throughout.', 'Low fees: just standard on-chain miner fees for the move.'],
-    cons: ['Silent-payments ecosystem is young; fewer wallet options.', 'You need to fund the silent-payments wallet from your {appName} address, which is itself an on-chain transaction.'],
-  },
-  {
-    id: 'cashout-lightning-swap',
-    heading: 'Lightning swap (Boltz, Bolt.exchange)',
-    paragraphs: [
-      'Services like [Boltz](https://boltz.exchange) atomic-swap your on-chain Bitcoin into Lightning. Lightning payments are private by default \u2014 they don\'t appear on the public blockchain.',
-    ],
-    pros: ['Instant and non-custodial.', 'Lightning payments aren\'t publicly traceable.'],
-    cons: ['Per-swap limits and swap fees.', 'Depends on the swap service being online.'],
-  },
-  {
-    id: 'cashout-coinjoin',
-    heading: 'Coinjoin',
-    paragraphs: [
-      'A coinjoin mixes your Bitcoin with other users\' coins so the output can\'t be linked to the input. [Wasabi](https://wasabiwallet.io) and [JoinMarket](https://github.com/JoinMarket-Org/joinmarket-clientserver) are the main maintained options after the Samourai shutdown.',
-    ],
-    pros: ['Strong on-chain unlinkability.', 'Non-custodial.'],
-    cons: ['Fees and wait time.', 'Steeper learning curve than the silent-payments hop.'],
-  },
-  {
-    id: 'cashout-p2p',
-    heading: 'Peer-to-peer exchange',
-    paragraphs: [
-      'Trade Bitcoin for fiat directly with another person. [Bisq](https://bisq.network) and [HodlHodl](https://hodlhodl.com) trade on-chain Bitcoin. [RoboSats](https://learn.robosats.com) is Lightning-only \u2014 swap your on-chain Bitcoin to Lightning first with [Boltz](https://boltz.exchange), then sell on RoboSats. No exchange records your identity either way.',
-    ],
-    pros: ['Cash in hand without KYC.', 'No central exchange knows you.'],
-    cons: ['Slower than an exchange.', 'Requires a willing counterparty.', 'Some learning curve.'],
-  },
-  {
-    id: 'cashout-tumblers',
-    heading: 'Tumblers and centralized mixers',
-    paragraphs: [
-      '**Generally not recommended.** Centralized tumblers are custodial \u2014 you have to trust the operator not to steal your coins or log who sent what. Many are scams or law-enforcement honeypots.',
-      'Silent payments and coinjoin are the non-custodial alternatives, and either is almost always the better choice.',
+    kind: 'optionGrid',
+    heading: 'Cashing out privately',
+    intro:
+      "Spending on-chain creates a trail unless you break it first. The simplest privacy exit is to **move funds into a silent-payments wallet first**, then spend onward; the hop breaks the link between your campaign address and what comes next. The other options below also work and have their own trade-offs.",
+    options: [
+      {
+        name: 'Silent-payments wallet hop',
+        purpose:
+          "Move your donations to a silent-payments wallet ([Ditto Wallet](https://ditto.pub), [Dana](https://github.com/cygnet3/dana/releases/download/v0.7.4/app-live-release.apk)). From there your downstream spending isn't tied to the campaign.",
+        chips: ['non-custodial', 'easiest', 'low fees'],
+        href: 'https://ditto.pub',
+      },
+      {
+        name: 'Lightning swap',
+        purpose:
+          "Atomic-swap on-chain Bitcoin to Lightning. Lightning payments don't hit the public blockchain.",
+        chips: ['non-custodial', 'easy', 'low fees'],
+        href: 'https://boltz.exchange',
+      },
+      {
+        name: 'Coinjoin',
+        purpose:
+          "Mix your Bitcoin with other users' coins so the output can't be linked back to the input.",
+        chips: ['non-custodial', 'high privacy'],
+        href: 'https://wasabiwallet.io',
+      },
+      {
+        name: 'Peer-to-peer',
+        purpose:
+          'Trade Bitcoin for fiat directly with another person or through a broker on Bisq, HodlHodl, or RoboSats.',
+        chips: ['cash', 'no KYC'],
+        href: 'https://bisq.network',
+      },
+      {
+        name: 'Spend it directly',
+        purpose:
+          'Buy gift cards (Amazon, Uber, groceries, travel) straight from Bitcoin without converting to cash first.',
+        chips: ['skip cash-out', 'instant'],
+        href: 'https://www.bitrefill.com/us/en/',
+      },
     ],
   },
   {
-    id: 'cashout-comparison',
-    heading: 'Quick comparison',
-    paragraphs: [
-      '**Silent-payments wallet (Ditto Wallet, Dana):** non-custodial \u00b7 high privacy \u00b7 easy \u00b7 low fees. Recommended default.',
-      '**Lightning swap (Boltz):** non-custodial \u00b7 medium privacy \u00b7 easy \u00b7 low fees.',
-      '**Coinjoin (Wasabi, JoinMarket):** non-custodial \u00b7 high privacy \u00b7 medium difficulty \u00b7 medium fees.',
-      '**Peer-to-peer (Bisq, HodlHodl, RoboSats via Boltz):** non-custodial \u00b7 high privacy \u00b7 harder \u00b7 variable fees.',
-      '**Tumblers:** custodial \u00b7 unpredictable privacy \u00b7 easy \u00b7 high risk. **Avoid.**',
-    ],
-  },
-  {
-    id: 'donors-can-be-seen',
-    heading: 'Your public donation history is visible to future supporters',
-    paragraphs: [
-      'If your campaign accepts public payments, anyone considering supporting you can look up your address and see the full public donation history. Keep in mind how that history reads to a new donor.',
-      'Silent-payment donations aren\'t part of this \u2014 they\'re invisible to outside observers and don\'t show in your campaign\'s public totals.',
-    ],
+    kind: 'callout',
+    variant: 'danger',
+    title: 'Avoid centralized tumblers',
+    body: 'Custodial mixers can steal your coins, log who sent what, or turn out to be law-enforcement honeypots. Use a silent-payments hop or a non-custodial coinjoin instead.',
   },
 ];
 
-/** Substitute placeholders in a single guide section. */
-function substituteGuideSection(section: GuideSection, appName: string): GuideSection {
-  return {
-    ...section,
-    heading: substitute(section.heading, appName),
-    paragraphs: section.paragraphs.map((p) => substitute(p, appName)),
-    pros: section.pros?.map((p) => substitute(p, appName)),
-    cons: section.cons?.map((c) => substitute(c, appName)),
-  };
+/** Substitute placeholders in a single guide block. */
+function substituteGuideBlock(block: GuideBlock, appName: string): GuideBlock {
+  switch (block.kind) {
+    case 'tldr':
+      return {
+        ...block,
+        lede: substitute(block.lede, appName),
+        nextActions: block.nextActions.map((a) => substitute(a, appName)),
+      };
+    case 'steps':
+      return {
+        ...block,
+        heading: substitute(block.heading, appName),
+        steps: block.steps.map((s) => ({
+          title: substitute(s.title, appName),
+          body: substitute(s.body, appName),
+        })),
+      };
+    case 'paymentComparison':
+      return {
+        ...block,
+        footnote: block.footnote ? substitute(block.footnote, appName) : undefined,
+      };
+    case 'callout':
+      return {
+        ...block,
+        title: substitute(block.title, appName),
+        body: substitute(block.body, appName),
+      };
+    case 'prose':
+      return {
+        ...block,
+        heading: block.heading ? substitute(block.heading, appName) : undefined,
+        paragraphs: block.paragraphs.map((p) => substitute(p, appName)),
+      };
+    case 'optionGrid':
+      return {
+        ...block,
+        heading: substitute(block.heading, appName),
+        intro: block.intro ? substitute(block.intro, appName) : undefined,
+        options: block.options.map((o) => ({
+          ...o,
+          name: substitute(o.name, appName),
+          purpose: substitute(o.purpose, appName),
+          chips: o.chips.map((c) => substitute(c, appName)),
+        })),
+      };
+  }
 }
 
-/** Donor guide sections with `{appName}` resolved. */
-export function getDonorGuideSections(appName: string): GuideSection[] {
-  return DONOR_GUIDE_TEMPLATE.map((s) => substituteGuideSection(s, appName));
+/** Donor guide blocks with `{appName}` resolved. */
+export function getDonorGuideBlocks(appName: string): GuideBlock[] {
+  return DONOR_GUIDE_TEMPLATE.map((b) => substituteGuideBlock(b, appName));
 }
 
-/** Activist guide sections with `{appName}` resolved. */
-export function getActivistGuideSections(appName: string): GuideSection[] {
-  return ACTIVIST_GUIDE_TEMPLATE.map((s) => substituteGuideSection(s, appName));
+/** Activist guide blocks with `{appName}` resolved. */
+export function getActivistGuideBlocks(appName: string): GuideBlock[] {
+  return ACTIVIST_GUIDE_TEMPLATE.map((b) => substituteGuideBlock(b, appName));
 }
diff --git a/src/lib/sidebarItems.tsx b/src/lib/sidebarItems.tsx
index 37177ea9..fa421068 100644
--- a/src/lib/sidebarItems.tsx
+++ b/src/lib/sidebarItems.tsx
@@ -18,7 +18,7 @@ import {
   HandHeart,
   HelpCircle,
   Highlighter,
-  LifeBuoy,
+  Info,
   List,
   MessageSquare,
   MessageSquareMore,
@@ -160,7 +160,7 @@ export const SIDEBAR_ITEMS: SidebarItemDef[] = [
   },
   { id: "settings", label: "Settings", path: "/settings", icon: Settings },
   { id: "changelog", label: "Changelog", path: "/changelog", icon: ScrollText },
-  { id: "help", label: "Help", path: "/help", icon: LifeBuoy },
+  { id: "help", label: "About", path: "/about", icon: Info },
   { id: "agent", label: "Agent", path: "/agent", icon: Bot },
   // Content types
   { id: "actions", label: "Pledges", path: "/pledges", icon: Megaphone },
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
new file mode 100644
index 00000000..b764aa41
--- /dev/null
+++ b/src/pages/AboutPage.tsx
@@ -0,0 +1,872 @@
+import { useSeoMeta } from '@unhead/react';
+import { useMemo } from 'react';
+import {
+  AlertTriangle,
+  ArrowRight,
+  BadgeCheck,
+  Bitcoin,
+  CircleCheck,
+  Globe,
+  HandHeart,
+  Megaphone,
+  ShieldCheck,
+  ShieldOff,
+} from 'lucide-react';
+import { nip19 } from 'nostr-tools';
+import { Link } from 'react-router-dom';
+
+import { useAppContext } from '@/hooks/useAppContext';
+import { HelpFAQSection } from '@/components/HelpFAQSection';
+import { TEAM_SOAPBOX_PACK } from '@/lib/helpContent';
+import { cn } from '@/lib/utils';
+
+/**
+ * The /about page. A landing-style document modeled on the public
+ * https://soapbox.pub/agora landing, brought in-app to explain how
+ * the platform works. Five sections:
+ *
+ *   1. Hero (dark)
+ *   2. How it works, in three steps (cream)
+ *   3. Two ways to get paid: compare cards (dark)
+ *   4. Need help? FAQ in three chapters (cream)
+ *   5. Pick the side you're on: Donor / Activist guides (white)
+ *
+ * Typography follows the CampaignsPage hero recipe exactly: Bebas Neue
+ * (`font-display`) is reserved for the hero H1 (italic, normal weight,
+ * stroke-painted) and the step numerals. Every other heading uses
+ * Inter Bold (`font-sans font-bold tracking-tight`), the project's
+ * canonical section-heading idiom. Bebas Neue is never bolded; doing
+ * so produces unreadable synthetic-bold smear.
+ */
+export function AboutPage() {
+  const { config } = useAppContext();
+  // Routed under the wide FundraiserLayout in AppRouter so sections can
+  // span the viewport with their own backgrounds.
+
+  useSeoMeta({
+    title: `About | ${config.appName}`,
+    description: `How ${config.appName} works: connecting activists to unstoppable funding through Bitcoin and Nostr.`,
+  });
+
+  const appName = config.appName;
+
+  // In-app link to the Team Soapbox follow pack, via the addressable
+  // /:nip19 route. Encoded once per render (cheap).
+  const teamSoapboxNaddr = useMemo(
+    () =>
+      nip19.naddrEncode({
+        kind: TEAM_SOAPBOX_PACK.kind,
+        pubkey: TEAM_SOAPBOX_PACK.pubkey,
+        identifier: TEAM_SOAPBOX_PACK.identifier,
+      }),
+    [],
+  );
+
+  return (
+    <main className="min-h-screen bg-background">
+      {/* ── 1. Hero ──────────────────────────────────────────────────────── */}
+      <section
+        className="relative overflow-hidden bg-[#0a0c14] text-white"
+        style={{
+          backgroundImage: "url('/about/world-map-bg.png')",
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+        }}
+      >
+        {/* Map-tint overlay */}
+        <div
+          aria-hidden
+          className="absolute inset-0 bg-gradient-to-b from-[#0a0c14]/85 via-[#0a0c14]/70 to-[#0a0c14]/95"
+        />
+        {/* Soft orange halos */}
+        <div
+          aria-hidden
+          className="absolute -top-32 -right-32 size-[28rem] rounded-full bg-primary/25 blur-3xl"
+        />
+        <div
+          aria-hidden
+          className="absolute -bottom-40 -left-32 size-[24rem] rounded-full bg-primary/15 blur-3xl"
+        />
+
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28 lg:py-32">
+          <div className="grid lg:grid-cols-12 gap-10 lg:gap-16 items-center">
+            {/* Headline column */}
+            <div className="lg:col-span-7">
+              <p className="text-xs font-semibold tracking-widest uppercase text-primary mb-4">
+                About {appName}
+              </p>
+              {/* Hero H1: verbatim CampaignsPage recipe. Bebas Neue at
+                  italic, font-normal, with -webkit-text-stroke painting
+                  the optical weight. Never font-bold. */}
+              <h1
+                className="font-display italic font-normal tracking-wide leading-none uppercase text-white text-4xl sm:text-7xl lg:text-8xl mb-8 whitespace-nowrap sm:whitespace-normal"
+                style={{
+                  WebkitTextStroke: '0.022em currentColor',
+                }}
+              >
+                How{' '}
+                {/* Orange highlighter span: same negative-margin trick
+                    as CampaignsPage so the inner letter aligns with the
+                    column edge despite the box padding. */}
+                <span className="inline-block w-fit pl-0 pr-3 pt-1 pb-0 -mt-1 -mb-3 bg-primary text-white leading-[0.8] align-baseline">
+                  <span className="-ml-1 inline-block">{appName}</span>
+                </span>
+                {/* Line break only on sm+ — on mobile the whole
+                    headline fits on one line. */}
+                <br className="hidden sm:inline" />
+                {' '}works.
+              </h1>
+              <p className="text-lg lg:text-xl text-gray-300 max-w-2xl leading-relaxed mb-8">
+                {appName} is a censorship-resistant donation platform built on
+                Nostr and Bitcoin. No frozen bank accounts. No corporate
+                shut-downs. Just direct support from people who believe in your
+                cause.
+              </p>
+
+              {/* Trust chips */}
+              <ul className="mb-10 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-400">
+                {['Decentralized', 'Open source', 'Censorship resistant'].map(
+                  (label) => (
+                    <li key={label} className="flex items-center gap-2">
+                      <CircleCheck className="size-4 text-primary" />
+                      {label}
+                    </li>
+                  ),
+                )}
+              </ul>
+
+              {/* CTAs */}
+              <div className="flex flex-wrap gap-3">
+                <Link
+                  to="/about/donors"
+                  className="group inline-flex items-center justify-center gap-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 font-semibold h-12 px-6 text-base shadow-lg shadow-primary/25 transition-all motion-safe:hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                >
+                  <HandHeart className="size-5" />
+                  Read the Donor Guide
+                  <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+                </Link>
+                <Link
+                  to="/about/activists"
+                  className="group inline-flex items-center justify-center gap-2 rounded-md border border-white/30 bg-white/5 text-white hover:bg-white/10 font-medium h-12 px-6 text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
+                >
+                  <Megaphone className="size-5" />
+                  Read the Activist Guide
+                  <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+                </Link>
+              </div>
+            </div>
+
+            {/* Tilted preview card: sample campaign in the style of the
+                Soapbox Agora landing. Hidden on mobile so the hero
+                stays focused on the headline + CTAs. */}
+            <div className="hidden lg:block lg:col-span-5 relative">
+              <div className="relative max-w-md mx-auto">
+                {/* Orange halo behind the card */}
+                <div
+                  aria-hidden
+                  className="absolute inset-0 -m-8 rounded-3xl opacity-50 blur-3xl"
+                  style={{
+                    background:
+                      'radial-gradient(circle, rgba(255,102,0,0.4), transparent 65%)',
+                  }}
+                />
+                <div className="relative rounded-lg border border-white/10 bg-[#1a1d24] overflow-hidden shadow-2xl rotate-[1.5deg] hover:rotate-0 transition-transform duration-500">
+                  {/* Image header */}
+                  <div className="relative aspect-[16/9] bg-gradient-to-br from-orange-900 via-red-900 to-orange-800">
+                    <img
+                      src="/about/venezuela-libertad-presos-politicos.png"
+                      alt="Venezuelan activists at a candlelight vigil holding a sign reading 'Liberen a todos los presos políticos · ¡Cese la represión!'"
+                      className="absolute inset-0 size-full object-cover"
+                      loading="lazy"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
+                    {/* Country pill */}
+                    <div className="absolute top-3 left-3 px-2.5 py-1 rounded-full bg-black/60 backdrop-blur text-white text-xs font-medium flex items-center gap-1.5">
+                      <span className="text-sm leading-none" aria-hidden>
+                        🇻🇪
+                      </span>
+                      <span>Venezuela</span>
+                    </div>
+                    {/* Public pill */}
+                    <div className="absolute top-3 right-3 px-2.5 py-1 rounded-full bg-primary/90 backdrop-blur text-primary-foreground text-[11px] font-semibold flex items-center gap-1.5">
+                      <Globe className="size-3" />
+                      <span>Public</span>
+                    </div>
+                  </div>
+                  {/* Card body */}
+                  <div className="p-5 text-white">
+                    {/* Org row */}
+                    <div className="flex items-center gap-2 mb-3">
+                      <div className="size-7 rounded-full bg-gradient-to-br from-yellow-400 via-red-500 to-red-700 flex items-center justify-center text-white text-xs font-bold">
+                        V
+                      </div>
+                      <span className="text-xs text-gray-400">
+                        Venezolanos Libres
+                      </span>
+                      <BadgeCheck className="size-3.5 text-primary" />
+                    </div>
+                    <h3 className="text-lg font-bold tracking-tight text-white leading-snug mb-3">
+                      Free Venezuela's Political Prisoners
+                    </h3>
+                    <p className="text-xs text-gray-400 leading-snug mb-4 line-clamp-2">
+                      Legal defense and family support for 800+ political
+                      prisoners detained by the Maduro regime.
+                    </p>
+                    {/* Progress bar */}
+                    <div className="h-1.5 w-full rounded-full bg-white/10 overflow-hidden mb-2">
+                      <div className="h-full bg-gradient-to-r from-primary/70 to-primary rounded-full w-[78%]" />
+                    </div>
+                    {/* Amount row */}
+                    <div className="flex items-baseline justify-between mb-1">
+                      <div>
+                        <span className="font-bold text-white text-base">
+                          $8,420
+                        </span>
+                        <span className="text-gray-400 text-xs"> raised</span>
+                      </div>
+                      <span className="text-gray-500 text-xs">of $10,000</span>
+                    </div>
+                    <p className="text-[11px] text-gray-500 mb-4">
+                      247 donors · 12 countries
+                    </p>
+                    {/* Donate button */}
+                    <Link
+                      to="/"
+                      className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold text-sm h-10 rounded-md flex items-center justify-center gap-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                    >
+                      <Bitcoin className="size-4" />
+                      Donate Bitcoin
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── 2. How it works, in three steps (light cream) ──────────────── */}
+      <section
+        id="how-it-works"
+        className="relative bg-[#faf8f4] py-20 md:py-28 overflow-hidden"
+      >
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <SectionHeader
+            eyebrow="How it works"
+            title="Three steps. No middleman."
+            lede={`No banks, no borders, no permission.`}
+          />
+
+          <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
+            <StepCard
+              number="01"
+              image="/help/step-1-account.jpg"
+              imageAlt="A glowing orange cryptographic key floating in dark space, symbolizing self-sovereign identity"
+              title="Activists sign up in seconds."
+              body={`No bank. No paperwork. No approval. The moment an activist creates an account on ${appName}, they have a Bitcoin address ready to receive support, anywhere in the world.`}
+            />
+            <StepCard
+              number="02"
+              image="/help/step-2-send.jpg"
+              imageAlt="A glowing Bitcoin coin flying through the air across a dark world map, symbolizing instant cross-border payment"
+              title="Donors send Bitcoin directly."
+              body={`Donors send Bitcoin from any wallet they already use (Cash App, Coinbase, Strike, a hardware wallet) straight to the activist. ${appName} never touches the money. No server in the middle, no custodian.`}
+            />
+            <StepCard
+              number="03"
+              image="/help/step-3-spend.jpg"
+              imageAlt="An open hand with warm orange light radiating from the palm, symbolizing receiving and agency"
+              title="Support lands where it matters."
+              body="Funds arrive at the activist directly. They keep custody, they keep control. Move it, swap it, or spend it; the guides below explain how to do it privately and safely."
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* ── 3. Two ways to get paid (white) ─────────────────────────────── */}
+      <section className="relative bg-white py-20 md:py-28 overflow-hidden">
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <SectionHeader
+            eyebrow="Bitcoin · One QR, two options"
+            title="Two ways to get paid."
+            lede="Both options are Bitcoin. The difference is what you trade off for privacy. When an activist creates a campaign, they choose which options to accept. If both, the donation page shows a single QR code that works for any wallet."
+          />
+
+          <div className="grid md:grid-cols-2 gap-6 lg:gap-8 max-w-5xl mx-auto items-start">
+            {/* Bitcoin Public Payments */}
+            <RailCard
+              accent="orange"
+              kicker="Bitcoin Public Payments"
+              tagline="Universal · Fast · Transparent"
+              icon={<Bitcoin className="size-4" />}
+              title="Works with every wallet on earth."
+              description="Donations land at a regular Bitcoin address the activist controls. Anyone with any Bitcoin wallet can send. No new app, no new account, no learning curve."
+              bullets={[
+                'Works in every Bitcoin wallet: Cash App, Coinbase, Strike, hardware',
+                'Fastest settlement: Bitcoin confirmations only',
+                'Verifiable on-chain: anyone can see what an activist has received',
+              ]}
+              tradeoffEmphasized
+              tradeoffTitle="Trade-off: Public on-chain."
+              tradeoffIntro={
+                <p>
+                  Every donation is public on the Bitcoin blockchain and on
+                  Nostr. {appName} is recommended only for above-ground
+                  activism. If you or your donors require extreme privacy,
+                  including from state actors, read the{' '}
+                  <Link
+                    to="/about/donors"
+                    className="font-semibold text-primary hover:underline"
+                  >
+                    Donor Guide
+                  </Link>{' '}
+                  and{' '}
+                  <Link
+                    to="/about/activists"
+                    className="font-semibold text-primary hover:underline"
+                  >
+                    Activist Guide
+                  </Link>{' '}
+                  before participating.
+                </p>
+              }
+            />
+            {/* Bitcoin Silent Payments */}
+            <RailCard
+              accent="indigo"
+              kicker="Bitcoin Silent Payments"
+              tagline="Unlinkable · Direct · BIP-352"
+              icon={<ShieldOff className="size-4" />}
+              title="Unlinkable, on-chain, direct."
+              description="Donations are sent as BIP-352 silent payments. Each one lands at a fresh, unlinkable Bitcoin output that an observer staring at the blockchain can't tie back to the campaign."
+              bullets={[
+                "Donation trail can't be reconstructed on-chain",
+                'Protects activists facing serious adversaries',
+                "Lands directly in the activist's wallet, no server in the middle",
+              ]}
+              tradeoffTitle="Trade-off: Silent payments are early."
+              tradeoffIntro={
+                <p>
+                  The most private way to receive Bitcoin on-chain, but the
+                  ecosystem is young and rough today:
+                </p>
+              }
+              tradeoffBullets={[
+                <strong className="text-gray-800">Few wallets support it.</strong>,
+                <strong className="text-gray-800">Receiving is slow.</strong>,
+                <strong className="text-gray-800">No push notifications.</strong>,
+                <strong className="text-gray-800">Wallets are still buggy.</strong>,
+                <strong className="text-gray-800">
+                  Donation counts aren't public.
+                </strong>,
+              ]}
+            />
+          </div>
+
+          {/* No custody comparison block. The compare cards above show
+              the two options; this block answers the obvious next
+              question, "how is this actually different from existing
+              crowdfunding sites?", by name-checking the failure modes
+              of centralized and even other Bitcoin-based options. */}
+          <div className="mt-10 max-w-5xl mx-auto rounded-2xl border border-primary/20 bg-gradient-to-br from-white to-primary/5 p-6 sm:p-8">
+            <div className="flex flex-col sm:flex-row items-start gap-5 mb-6">
+              <div className="size-12 shrink-0 rounded-xl bg-primary/10 border border-primary/30 flex items-center justify-center">
+                <ShieldCheck className="size-6 text-primary" />
+              </div>
+              <div>
+                <h3 className="text-xl sm:text-2xl font-bold tracking-tight text-gray-900 mb-1.5">
+                  No custody. No middleman.
+                </h3>
+                <p className="text-gray-600 leading-relaxed text-[15px]">
+                  {appName} never holds funds. Donations move
+                  wallet-to-wallet on Bitcoin. There's no server standing
+                  between donor and activist on either option. If {appName}{' '}
+                  disappeared tomorrow, every campaign would keep working.
+                </p>
+              </div>
+            </div>
+
+            {/* Comparison grid */}
+            <ul className="grid sm:grid-cols-3 gap-5 sm:gap-6 pt-5 border-t border-primary/10">
+              <ComparisonItem
+                heading="Unlike GoFundMe"
+                body="No platform can freeze your donations, demand refunds, or terminate your campaign over policy disagreements."
+              />
+              <ComparisonItem
+                heading="Unlike GiveSendGo"
+                body="No payment processor sits in the middle, so no Stripe, no Visa, no bank can cut you off mid-campaign."
+              />
+              <ComparisonItem
+                heading="Unlike other &lsquo;Bitcoin&rsquo; platforms"
+                body="No central Lightning node, custodian, or LSP to fail or go offline. Funds settle directly on-chain to a wallet you control."
+              />
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      {/* ── 4. Need help? FAQ (cream, integrated as three chapters) ───── */}
+      <section
+        id="faq"
+        className="bg-[#f5f1eb] py-20 md:py-28 scroll-mt-16"
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <SectionHeader
+            eyebrow="Questions"
+            title="Frequently asked."
+          />
+
+          {/* Three chapter mini-sections, rendered inline in page flow */}
+          <div className="max-w-3xl mx-auto space-y-16">
+            {FAQ_CHAPTERS.map((chapter) => (
+              <FAQChapter
+                key={chapter.id}
+                number={chapter.number}
+                title={chapter.label}
+                description={chapter.description}
+                categoryId={chapter.id}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── 5. Pick the side you're on (white) ──────────────────────────── */}
+      <section className="bg-white py-20 md:py-28">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <SectionHeader
+            eyebrow="Guides"
+            title="Pick the side you're on."
+            lede="Whether you're sending or receiving, learn how to do it safely and privately."
+          />
+
+          <div className="grid md:grid-cols-2 gap-6 lg:gap-8 max-w-5xl mx-auto">
+            <GuideCard
+              to="/about/donors"
+              image="/about/donor-guide-freedom-libertad.jpeg"
+              imageAlt="Hooded protesters marching through a European city street at dusk, holding burning red flares and 'FREEDOM' and 'LIBERTAD' banners"
+              role="For Donors"
+              icon={<HandHeart className="size-5" />}
+              accent="blue"
+              title="Support causes the banks won't."
+              description="Send Bitcoin directly to activists and movements anywhere in the world, without asking a payment processor for permission."
+              bullets={[
+                'Use any Bitcoin wallet you already have.',
+                'Donations land directly with the activist. No custodian, no middleman.',
+                'For privacy, use a wallet that supports silent payments.',
+              ]}
+              cta="Read the Donor Guide"
+            />
+            <GuideCard
+              to="/about/activists"
+              image="/about/activist-guide-unity.png"
+              imageAlt="Aerial view of thousands of protesters gathered at night in a city square with burning red flares, beneath a 'UNITY IN DARKNESS' banner projected on the surrounding buildings"
+              role="For Activists"
+              icon={<Megaphone className="size-5" />}
+              accent="orange"
+              title="Get funded without permission."
+              description="Receive support directly from people who believe in your cause. No bank account, no application form, no company in the middle."
+              bullets={[
+                'Start receiving donations as soon as you sign up.',
+                'Pick which payment types to accept: public, silent payments, or both.',
+                'For private cash-out, send to a silent-payments wallet first, then forward anywhere.',
+              ]}
+              cta="Read the Activist Guide"
+            />
+          </div>
+
+          {/* Page-closing 'Still stuck?' line: quiet pointer to the
+              Team Soapbox follow pack via the in-app /:nip19 route. */}
+          <p className="mt-16 text-center text-sm text-muted-foreground">
+            Still stuck?{' '}
+            <Link
+              to={`/${teamSoapboxNaddr}`}
+              className="font-medium text-primary hover:underline"
+            >
+              Follow Team Soapbox on Nostr
+            </Link>
+            . We triage questions there.
+          </p>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+// ── Building blocks ───────────────────────────────────────────────────────
+
+/**
+ * Three FAQ chapters rendered in page flow. Category IDs match
+ * `helpContent.ts` so we can hand them to `HelpFAQSection` for
+ * rendering. Labels and descriptions are page-side copy, not the
+ * helpContent.ts labels (kept here so the chapter chrome stays
+ * editorial without coupling helpContent to the About page.
+ */
+const FAQ_CHAPTERS: Array<{
+  id: string;
+  number: string;
+  label: string;
+  description: string;
+}> = [
+  {
+    id: 'getting-started',
+    number: '01',
+    label: 'Getting started',
+    description: 'What Agora is, who built it, and what it costs.',
+  },
+  {
+    id: 'payments',
+    number: '02',
+    label: 'Bitcoin donations',
+    description: 'How payments work, why on-chain, why public, why these trade-offs.',
+  },
+  {
+    id: 'about-nostr',
+    number: '03',
+    label: 'About Nostr',
+    description: 'The open protocol Agora is built on, and how your account works.',
+  },
+];
+
+interface FAQChapterProps {
+  number: string;
+  title: string;
+  description: string;
+  categoryId: string;
+}
+
+/**
+ * A single chapter within the FAQ section: chapter numeral on the
+ * left, chapter heading + description, then the accordion items for
+ * the matching helpContent category underneath. Inline in page flow.
+ * no tabs, no JS state. Anchored via `id="faq-<id>"` so the chapter
+ * quick-jump strip can link directly to it.
+ */
+function FAQChapter({ number, title, description, categoryId }: FAQChapterProps) {
+  return (
+    <div id={`faq-${categoryId}`} className="scroll-mt-20">
+      <div className="flex items-baseline gap-4 sm:gap-5 mb-6">
+        <span
+          aria-hidden
+          className="font-display italic font-normal text-4xl sm:text-5xl text-primary leading-none tabular-nums"
+        >
+          {number}
+        </span>
+        <div>
+          <h3 className="text-xl sm:text-2xl font-bold tracking-tight text-gray-900 leading-snug">
+            {title}
+          </h3>
+          <p className="text-sm sm:text-base text-gray-600 mt-1 leading-relaxed">
+            {description}
+          </p>
+        </div>
+      </div>
+      <HelpFAQSection
+        categories={[categoryId]}
+        hideHeadings
+        listTone="reference"
+      />
+    </div>
+  );
+}
+
+interface ComparisonItemProps {
+  heading: string;
+  body: string;
+  /** Defaults to light. On dark backgrounds, body copy switches to gray-300. */
+  theme?: 'light' | 'dark';
+}
+
+/**
+ * One cell in the "Unlike GoFundMe / GiveSendGo / Bitcoin" grid
+ * inside the No-Custody banner. Small heading + short body, no
+ * separating border (the parent grid gap is the separator).
+ */
+function ComparisonItem({ heading, body, theme = 'light' }: ComparisonItemProps) {
+  return (
+    <li>
+      <p className="text-xs font-bold uppercase tracking-widest text-primary mb-1.5">
+        {heading}
+      </p>
+      <p
+        className={cn(
+          'text-sm leading-relaxed',
+          theme === 'dark' ? 'text-gray-300' : 'text-gray-600',
+        )}
+      >
+        {body}
+      </p>
+    </li>
+  );
+}
+
+interface SectionHeaderProps {
+  eyebrow: string;
+  title: string;
+  lede?: string;
+  /** Light backgrounds use dark text; dark backgrounds invert. */
+  theme?: 'light' | 'dark';
+}
+
+function SectionHeader({
+  eyebrow,
+  title,
+  lede,
+  theme = 'light',
+}: SectionHeaderProps) {
+  return (
+    <div className="text-center max-w-3xl mx-auto mb-14">
+      <p className="text-xs font-semibold tracking-widest uppercase text-primary mb-3">
+        {eyebrow}
+      </p>
+      {/* Inter Bold, NOT Bebas Neue. The codebase's canonical section H2. */}
+      <h2
+        className={cn(
+          'text-2xl sm:text-3xl font-bold tracking-tight mb-4',
+          theme === 'dark' ? 'text-white' : 'text-gray-900',
+        )}
+      >
+        {title}
+      </h2>
+      {lede && (
+        <p
+          className={cn(
+            'text-base sm:text-lg leading-relaxed',
+            theme === 'dark' ? 'text-gray-400' : 'text-gray-600',
+          )}
+        >
+          {lede}
+        </p>
+      )}
+    </div>
+  );
+}
+
+interface StepCardProps {
+  number: string;
+  image: string;
+  imageAlt: string;
+  title: string;
+  body: string;
+}
+
+function StepCard({ number, image, imageAlt, title, body }: StepCardProps) {
+  return (
+    <div className="relative bg-white rounded-2xl overflow-hidden border border-gray-200 shadow-sm transition-all duration-300 motion-safe:hover:-translate-y-1 hover:shadow-md">
+      <div className="aspect-[4/3] bg-[#0a0c14] relative overflow-hidden">
+        <img
+          src={image}
+          alt={imageAlt}
+          className="absolute inset-0 size-full object-cover"
+          loading="lazy"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
+        {/* Step numeral: Bebas Neue is appropriate here as designed
+            signage, not a heading. font-normal, not bold. */}
+        <div className="absolute top-4 left-4 font-display font-normal text-white text-5xl leading-none drop-shadow-lg">
+          {number}
+        </div>
+      </div>
+      <div className="p-6 sm:p-7">
+        <h3 className="text-xl font-bold tracking-tight text-gray-900 mb-3 leading-snug">
+          {title}
+        </h3>
+        <p className="text-gray-600 leading-relaxed text-[15px]">{body}</p>
+      </div>
+    </div>
+  );
+}
+
+interface RailCardProps {
+  accent: 'orange' | 'indigo';
+  kicker: string;
+  tagline: string;
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  bullets: string[];
+  tradeoffTitle: string;
+  tradeoffIntro: React.ReactNode;
+  tradeoffBullets?: React.ReactNode[];
+  /** When true, the trade-off block uses an amber alert-style title icon. */
+  tradeoffEmphasized?: boolean;
+}
+
+function RailCard({
+  accent,
+  kicker,
+  tagline,
+  icon,
+  title,
+  description,
+  bullets,
+  tradeoffTitle,
+  tradeoffIntro,
+  tradeoffBullets,
+  tradeoffEmphasized,
+}: RailCardProps) {
+  const headerGradient =
+    accent === 'orange'
+      ? 'from-primary to-primary/80'
+      : 'from-indigo-600 to-indigo-700';
+  const taglineColor =
+    accent === 'orange' ? 'text-primary-foreground/85' : 'text-indigo-100';
+  const checkColor =
+    accent === 'orange' ? 'text-emerald-600' : 'text-indigo-600';
+
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden flex flex-col">
+      {/* Gradient header strip */}
+      <div className={cn('bg-gradient-to-r px-6 py-5 text-white', headerGradient)}>
+        <div className="flex items-center gap-2 mb-1">
+          {icon}
+          <span className="text-xs font-semibold uppercase tracking-widest">
+            {kicker}
+          </span>
+        </div>
+        <p className={cn('text-sm', taglineColor)}>{tagline}</p>
+      </div>
+
+      {/* Body */}
+      <div className="p-6 space-y-5 flex-1 flex flex-col">
+        <div>
+          <h3 className="text-xl sm:text-2xl font-bold tracking-tight text-gray-900 mb-2 leading-snug">
+            {title}
+          </h3>
+          <p className="text-gray-600 leading-relaxed text-[15px]">
+            {description}
+          </p>
+        </div>
+
+        <ul className="space-y-2.5">
+          {bullets.map((b, i) => (
+            <li key={i} className="flex items-start gap-2.5">
+              <CircleCheck className={cn('size-4 shrink-0 mt-0.5', checkColor)} />
+              <span className="text-gray-700 text-sm leading-snug">{b}</span>
+            </li>
+          ))}
+        </ul>
+
+        {/* Trade-off block */}
+        <div className="mt-auto pt-5 border-t border-gray-100">
+          <div className="flex items-center gap-2 mb-2">
+            {tradeoffEmphasized ? (
+              <AlertTriangle className="size-4 text-amber-600" />
+            ) : (
+              <span aria-hidden className="size-2 rounded-full bg-amber-500" />
+            )}
+            <span className="text-xs font-bold uppercase tracking-widest text-amber-700">
+              {tradeoffTitle}
+            </span>
+          </div>
+          <div className="text-sm text-gray-600 leading-relaxed space-y-2.5">
+            {tradeoffIntro}
+            {tradeoffBullets && tradeoffBullets.length > 0 && (
+              <ul className="space-y-2 pt-1">
+                {tradeoffBullets.map((b, i) => (
+                  <li key={i} className="flex items-start gap-2.5">
+                    <span
+                      aria-hidden
+                      className="mt-1.5 size-1.5 shrink-0 rounded-full bg-amber-500"
+                    />
+                    <span className="leading-snug">{b}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface GuideCardProps {
+  to: string;
+  image: string;
+  imageAlt: string;
+  role: string;
+  icon: React.ReactNode;
+  accent: 'blue' | 'orange';
+  title: string;
+  description: string;
+  bullets: string[];
+  cta: string;
+}
+
+function GuideCard({
+  to,
+  image,
+  imageAlt,
+  role,
+  icon,
+  accent,
+  title,
+  description,
+  bullets,
+  cta,
+}: GuideCardProps) {
+  const accentText = accent === 'blue' ? 'text-blue-600' : 'text-primary';
+  const accentBg =
+    accent === 'blue'
+      ? 'bg-blue-600 hover:bg-blue-700'
+      : 'bg-primary hover:bg-primary/90';
+  return (
+    <Link
+      to={to}
+      className="group rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden flex flex-col transition-all duration-300 motion-safe:hover:-translate-y-1 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+    >
+      {/* Image header */}
+      <div className="aspect-[16/9] bg-gray-100 relative overflow-hidden">
+        <img
+          src={image}
+          alt={imageAlt}
+          className="absolute inset-0 size-full object-cover transition-transform duration-700 group-hover:scale-105"
+          loading="lazy"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent" />
+        <div className="absolute bottom-4 left-5 flex items-center gap-3">
+          <div
+            className={cn(
+              'size-10 rounded-xl bg-white/95 backdrop-blur flex items-center justify-center shadow',
+              accentText,
+            )}
+          >
+            {icon}
+          </div>
+          <span className="text-white text-xs font-semibold uppercase tracking-widest drop-shadow">
+            {role}
+          </span>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="p-7 sm:p-8 flex flex-col flex-1">
+        <h3 className="text-xl font-bold tracking-tight text-gray-900 mb-2 leading-snug">
+          {title}
+        </h3>
+        <p className="text-gray-600 mb-5 leading-relaxed">{description}</p>
+        <ul className="space-y-2.5 mb-7">
+          {bullets.map((b, i) => (
+            <li key={i} className="flex items-start gap-2.5">
+              <CircleCheck className={cn('size-4 shrink-0 mt-0.5', accentText)} />
+              <span className="text-gray-700 text-sm leading-snug">{b}</span>
+            </li>
+          ))}
+        </ul>
+        <div className="mt-auto">
+          <span
+            className={cn(
+              'inline-flex items-center justify-center gap-2 rounded-md text-white font-semibold text-sm h-10 px-5 transition-colors w-full sm:w-auto',
+              accentBg,
+            )}
+          >
+            {cta}
+            <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/pages/ActivistGuidePage.tsx b/src/pages/ActivistGuidePage.tsx
index 22e6d02e..ef9eaa17 100644
--- a/src/pages/ActivistGuidePage.tsx
+++ b/src/pages/ActivistGuidePage.tsx
@@ -1,20 +1,26 @@
 import { useSeoMeta } from '@unhead/react';
-import { AlertTriangle } from 'lucide-react';
 
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { GuideHero } from '@/components/GuideHero';
-import { GuideSectionCard } from '@/components/GuideSectionCard';
+import {
+  CalloutCard,
+  GuideProse,
+  GuideSteps,
+  GuideTLDR,
+  OptionGrid,
+  PaymentComparisonTable,
+} from '@/components/guide';
 import { useAppContext } from '@/hooks/useAppContext';
 import { DEFAULT_ACTION_COVERS } from '@/lib/defaultActionCovers';
-import { getActivistGuideSections } from '@/lib/helpContent';
+import { getActivistGuideBlocks, type GuideBlock } from '@/lib/helpContent';
 import { HOPE_PALETTE } from '@/lib/hopePalette';
 
 /**
- * Activist Guide — long-form companion to the Help page.
+ * Activist Guide. The long-form companion to the About page.
  *
- * Explains how receiving donations works on Agora, why incoming donations
- * are public, and the main paths for cashing out privately. Linked from
- * `/help` as one of the two large guide buttons.
+ * The page body is composed from a typed sequence of `GuideBlock`s
+ * defined in `src/lib/helpContent.ts`. Each block kind has a dedicated
+ * component; this page just hands each block to the right one. Linked
+ * from `/about` as one of the two large guide buttons.
  */
 export function ActivistGuidePage() {
   const { config } = useAppContext();
@@ -24,48 +30,48 @@ export function ActivistGuidePage() {
     description: `How to receive donations on ${config.appName} and cash out privately.`,
   });
 
-  const sections = getActivistGuideSections(config.appName);
+  const blocks = getActivistGuideBlocks(config.appName);
 
   return (
     <main className="min-h-screen pb-16 sidebar:pb-0">
       <GuideHero
         title="Activist Guide"
-        subtitle="How to receive donations on Agora and move funds privately when you need to."
+        subtitle="Pick what to accept, receive donations, cash out. Plain English, no walls of text."
         images={ACTIVIST_HERO_IMAGES}
         palette={HOPE_PALETTE}
       />
 
-      <div className="px-4 pt-4 pb-4 space-y-4 max-w-3xl mx-auto">
-        {/* Above-ground recommendation alert */}
-        <Alert className="border-amber-500/50 [&>svg]:text-amber-500">
-          <AlertTriangle className="size-4" />
-          <AlertTitle className="text-amber-700 dark:text-amber-400">
-            Recommended for above-ground activism
-          </AlertTitle>
-          <AlertDescription className="text-foreground/80">
-            <p>
-              {config.appName} is recommended only for above-ground activism. Every donation you
-              receive is recorded publicly on the Bitcoin blockchain and on Nostr. If you or your
-              donors require extreme privacy &mdash; including protection from state actors
-              &mdash; additional steps are needed to protect yourself and the people supporting you.
-              Read the sections below before accepting donations.
-            </p>
-          </AlertDescription>
-        </Alert>
-
-        {/* Sections */}
-        {sections.map((section) => (
-          <GuideSectionCard key={section.id} section={section} />
+      <div className="px-4 pt-6 pb-4 space-y-6 max-w-3xl mx-auto sm:px-6 lg:max-w-4xl">
+        {blocks.map((block, i) => (
+          <GuideBlockRenderer key={i} block={block} />
         ))}
       </div>
     </main>
   );
 }
 
+/** Dispatches a single block to the correct visual component. */
+function GuideBlockRenderer({ block }: { block: GuideBlock }) {
+  switch (block.kind) {
+    case 'tldr':
+      return <GuideTLDR block={block} />;
+    case 'steps':
+      return <GuideSteps block={block} />;
+    case 'paymentComparison':
+      return <PaymentComparisonTable block={block} />;
+    case 'callout':
+      return <CalloutCard block={block} />;
+    case 'optionGrid':
+      return <OptionGrid block={block} />;
+    case 'prose':
+      return <GuideProse block={block} />;
+  }
+}
+
 /**
  * Hero images for the Activist Guide. Reuses the protest / action cover
- * gallery already used by the Actions page hero — raised fists, people
- * power, freedom imagery — so the page reads as belonging to activists,
+ * gallery already used by the Actions page hero (raised fists, people
+ * power, freedom imagery) so the page reads as belonging to activists,
  * not just generic "users."
  */
 const ACTIVIST_HERO_IMAGES: readonly string[] = DEFAULT_ACTION_COVERS.map(
diff --git a/src/pages/CampaignsPage.tsx b/src/pages/CampaignsPage.tsx
index 4706fd23..d9ea3f83 100644
--- a/src/pages/CampaignsPage.tsx
+++ b/src/pages/CampaignsPage.tsx
@@ -218,7 +218,7 @@ export function CampaignsPage() {
                 asChild
                 className="rounded-full h-12 px-6 text-base border-white/30 bg-white/5 text-white hover:bg-white/10 hover:text-white hover:border-white/50 [&_svg]:size-[18px]"
               >
-                <Link to="/help">
+                <Link to="/about">
                   How it works
                   <ArrowRight className="ml-2" />
                 </Link>
diff --git a/src/pages/DonorGuidePage.tsx b/src/pages/DonorGuidePage.tsx
index 044d3834..1a1f1361 100644
--- a/src/pages/DonorGuidePage.tsx
+++ b/src/pages/DonorGuidePage.tsx
@@ -1,19 +1,25 @@
 import { useSeoMeta } from '@unhead/react';
-import { AlertTriangle } from 'lucide-react';
 
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { GuideHero } from '@/components/GuideHero';
-import { GuideSectionCard } from '@/components/GuideSectionCard';
+import {
+  CalloutCard,
+  GuideProse,
+  GuideSteps,
+  GuideTLDR,
+  OptionGrid,
+  PaymentComparisonTable,
+} from '@/components/guide';
 import { useAppContext } from '@/hooks/useAppContext';
-import { getDonorGuideSections } from '@/lib/helpContent';
+import { getDonorGuideBlocks, type GuideBlock } from '@/lib/helpContent';
 import { COOL_PALETTE } from '@/lib/hopePalette';
 
 /**
- * Donor Guide — long-form companion to the Help page.
+ * Donor Guide. The long-form companion to the About page.
  *
- * Explains how on-chain donations on Agora work, why they are publicly
- * visible, and what a donor can do if they need privacy. Linked from
- * `/help` as one of the two large guide buttons.
+ * The page body is composed from a typed sequence of `GuideBlock`s
+ * defined in `src/lib/helpContent.ts`. Each block kind has a dedicated
+ * component; this page just hands each block to the right one. Linked
+ * from `/about` as one of the two large guide buttons.
  */
 export function DonorGuidePage() {
   const { config } = useAppContext();
@@ -23,46 +29,47 @@ export function DonorGuidePage() {
     description: `How donating works on ${config.appName} and how to protect your privacy.`,
   });
 
-  const sections = getDonorGuideSections(config.appName);
+  const blocks = getDonorGuideBlocks(config.appName);
 
   return (
     <main className="min-h-screen pb-16 sidebar:pb-0">
       <GuideHero
         title="Donor Guide"
-        subtitle="Real Bitcoin, sent directly. Here's how it works and how to do it privately."
+        subtitle="Real Bitcoin, sent directly. The whole flow in one short page."
         images={DONOR_HERO_IMAGES}
         palette={COOL_PALETTE}
       />
 
-      <div className="px-4 pt-4 pb-4 space-y-4 max-w-3xl mx-auto">
-        {/* Above-ground recommendation alert */}
-        <Alert className="border-amber-500/50 [&>svg]:text-amber-500">
-          <AlertTriangle className="size-4" />
-          <AlertTitle className="text-amber-700 dark:text-amber-400">
-            Recommended for above-ground activism
-          </AlertTitle>
-          <AlertDescription className="text-foreground/80">
-            <p>
-              {config.appName} is recommended only for supporting above-ground activism. Your
-              donation is public on the Bitcoin blockchain and on Nostr. If you need extreme
-              privacy &mdash; including protection from state actors &mdash; additional steps are
-              required before donating. Read the sections below first.
-            </p>
-          </AlertDescription>
-        </Alert>
-
-        {/* Sections */}
-        {sections.map((section) => (
-          <GuideSectionCard key={section.id} section={section} />
+      <div className="px-4 pt-6 pb-4 space-y-6 max-w-3xl mx-auto sm:px-6 lg:max-w-4xl">
+        {blocks.map((block, i) => (
+          <GuideBlockRenderer key={i} block={block} />
         ))}
       </div>
     </main>
   );
 }
 
+/** Dispatches a single block to the correct visual component. */
+function GuideBlockRenderer({ block }: { block: GuideBlock }) {
+  switch (block.kind) {
+    case 'tldr':
+      return <GuideTLDR block={block} />;
+    case 'steps':
+      return <GuideSteps block={block} />;
+    case 'paymentComparison':
+      return <PaymentComparisonTable block={block} />;
+    case 'callout':
+      return <CalloutCard block={block} />;
+    case 'optionGrid':
+      return <OptionGrid block={block} />;
+    case 'prose':
+      return <GuideProse block={block} />;
+  }
+}
+
 /**
  * Hero images for the Donor Guide. Reuses the World Liberty Congress
- * event photos already in `/public/hero/` — they read as "community of
+ * event photos already in `/public/hero/`. They read as "community of
  * supporters," which fits a donor-facing page. Same assets used by the
  * Organize and Communities homepage heroes, so we get free preload
  * caching across the app.
diff --git a/src/pages/HelpPage.tsx b/src/pages/HelpPage.tsx
deleted file mode 100644
index 1f5b6b71..00000000
--- a/src/pages/HelpPage.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useSeoMeta } from '@unhead/react';
-import { AlertTriangle, ChevronRight, HandHeart, HelpCircle, Megaphone, Shield } from 'lucide-react';
-import { Link } from 'react-router-dom';
-
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { useAppContext } from '@/hooks/useAppContext';
-import { PageHeader } from '@/components/PageHeader';
-import { TeamSoapboxCard } from '@/components/TeamSoapboxCard';
-import { HelpFAQSection } from '@/components/HelpFAQSection';
-
-export function HelpPage() {
-  const { config } = useAppContext();
-
-  useSeoMeta({
-    title: `Help | ${config.appName}`,
-    description: `Get help with ${config.appName} — donor and activist guides, FAQs, and support`,
-  });
-
-  return (
-    <main className="min-h-screen pb-16 sidebar:pb-0">
-      <PageHeader title="Help" icon={<HelpCircle className="size-5" />} />
-
-      {/* Top-of-page disclaimer: first thing visitors see */}
-      <div className="px-4 pt-2">
-        <Alert className="border-amber-500/50 [&>svg]:text-amber-500">
-          <AlertTriangle className="size-4" />
-          <AlertTitle className="text-amber-700 dark:text-amber-400">Read this first</AlertTitle>
-          <AlertDescription className="text-foreground/80">
-            <p>
-              {config.appName} is recommended only for above-ground activism. Every donation
-              &mdash; given or received &mdash; is public on the Bitcoin blockchain and on Nostr. If
-              you or your donors require extreme privacy, including from state actors, additional
-              steps are required to protect yourself. Read the <strong>Donor Guide</strong> and{' '}
-              <strong>Activist Guide</strong> below before participating.
-            </p>
-          </AlertDescription>
-        </Alert>
-      </div>
-
-      {/* Two large guide buttons */}
-      <div className="px-4 pt-4 grid gap-3 sm:grid-cols-2">
-        <GuideButton
-          to="/help/donors"
-          icon={<HandHeart className="size-6" />}
-          title="Donor Guide"
-          description="How to support activists privately and safely."
-        />
-        <GuideButton
-          to="/help/activists"
-          icon={<Megaphone className="size-6" />}
-          title="Activist Guide"
-          description="Receiving donations and cashing out privately."
-        />
-      </div>
-
-      {/* FAQ heading */}
-      <div className="px-4 pt-6 pb-1">
-        <h2 className="text-lg font-bold">Frequently Asked Questions</h2>
-        <p className="text-sm text-muted-foreground mt-1">
-          Everything else you need to know about Nostr, {config.appName}, and how it all works.
-        </p>
-      </div>
-
-      {/* FAQ accordion sections */}
-      <HelpFAQSection className="px-4 pb-4" />
-
-      {/* Team Soapbox follow pack — at the end, after the FAQ */}
-      <TeamSoapboxCard className="px-4 pt-2 pb-4" />
-
-      {/* Privacy policy link */}
-      <div className="px-4 pb-8">
-        <Link
-          to="/privacy"
-          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <Shield className="size-4" />
-          <span>Privacy Policy</span>
-        </Link>
-      </div>
-    </main>
-  );
-}
-
-interface GuideButtonProps {
-  to: string;
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-}
-
-function GuideButton({ to, icon, title, description }: GuideButtonProps) {
-  return (
-    <Link
-      to={to}
-      className="group flex items-center gap-4 rounded-xl border bg-card p-4 text-left shadow-sm transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    >
-      <div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
-        {icon}
-      </div>
-      <div className="flex-1 min-w-0">
-        <p className="font-semibold leading-snug">{title}</p>
-        <p className="text-sm text-muted-foreground leading-snug">{description}</p>
-      </div>
-      <ChevronRight className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
-    </Link>
-  );
-}