diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52d7818a..ffc83661 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ Format follows [Keep a Changelog](https://keepachangelog.com/).
 - Dedicated support guide (`SUPPORT.md`) and issue-template contact links for support/security routing
 
 ### Changed
+- Public `web-next` homepage refreshed around the reviewer-safe live snapshot, anonymized receipt copy, and demo-first CTA path.
 - README command examples and tooling descriptions updated to match current CLI and MCP behavior
 - PR template and contributing checklist now enforce changelog and security/audit validation gates
 - PR template and contributor guide now enforce small, single-purpose PR scope and Linear-linked branch/PR conventions
diff --git a/tests/web-next-demo-fixtures.test.ts b/tests/web-next-demo-fixtures.test.ts
index 821fe9dd..87e39dbb 100644
--- a/tests/web-next-demo-fixtures.test.ts
+++ b/tests/web-next-demo-fixtures.test.ts
@@ -23,6 +23,8 @@ const LAB_METRICS_PACKET_FILE = path.join(
 
 const UI_FIXTURE_FILES = [
   path.join(REPO_ROOT, 'web-next', 'app', 'demo', 'page.tsx'),
+  path.join(REPO_ROOT, 'web-next', 'components', 'bento-section.tsx'),
+  path.join(REPO_ROOT, 'web-next', 'components', 'changelog-section.tsx'),
   path.join(REPO_ROOT, 'web-next', 'components', 'dashboard-preview.tsx'),
   path.join(REPO_ROOT, 'web-next', 'components', 'hero-section.tsx'),
   LIVE_METRICS_SNAPSHOT_FILE,
diff --git a/tests/web-next-homepage-anchors.test.ts b/tests/web-next-homepage-anchors.test.ts
new file mode 100644
index 00000000..5f31bc8e
--- /dev/null
+++ b/tests/web-next-homepage-anchors.test.ts
@@ -0,0 +1,34 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const REPO_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+
+function readRepoFile(relativePath: string): string {
+  return readFileSync(path.join(REPO_ROOT, relativePath), 'utf8');
+}
+
+describe('web-next homepage anchors', () => {
+  it('keeps faq-section owned by a single rendered component root', () => {
+    const pageContent = readRepoFile('web-next/app/page.tsx');
+    const faqContent = readRepoFile('web-next/components/faq-section.tsx');
+
+    expect(pageContent).not.toContain('id="faq-section"');
+    expect((faqContent.match(/id="faq-section"/g) ?? [])).toHaveLength(1);
+  });
+
+  it('keeps the footer audit log link pointed at the history route', () => {
+    const footerContent = readRepoFile('web-next/components/footer-section.tsx');
+
+    expect(footerContent).toMatch(/<Link href="\/history"[^>]*>\s*Audit log\s*<\/Link>/);
+  });
+
+  it('keeps shared landing CTAs rendered through Button asChild', () => {
+    const ctaContent = readRepoFile('web-next/components/landing-ctas.tsx');
+
+    expect(ctaContent).not.toMatch(/<Link href="\/(?:demo|sign-in)">\s*<Button/s);
+    expect(ctaContent).toMatch(/<Button\s+asChild[\s\S]*?<Link href="\/demo">/);
+    expect(ctaContent).toMatch(/<Button\s+asChild[\s\S]*?<Link href="\/sign-in">/);
+  });
+});
diff --git a/tests/web-next-landing-ctas-render.test.tsx b/tests/web-next-landing-ctas-render.test.tsx
new file mode 100644
index 00000000..61f925cb
--- /dev/null
+++ b/tests/web-next-landing-ctas-render.test.tsx
@@ -0,0 +1,136 @@
+import { describe, expect, it } from 'vitest';
+import { DemoCTA, SignInCTA } from '../web-next/components/landing-ctas';
+
+type ElementType = string | ((props: ElementProps) => RenderedNode);
+type RenderedNode =
+  | RenderedElement
+  | readonly RenderedNode[]
+  | string
+  | number
+  | boolean
+  | null
+  | undefined;
+
+interface ElementProps {
+  readonly [key: string]: unknown;
+  readonly children?: RenderedNode;
+}
+
+interface RenderedElement {
+  readonly type: ElementType;
+  readonly props: ElementProps;
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('"', '&quot;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;');
+}
+
+function stringifyAttributeValue(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value);
+  }
+
+  if (value !== null && value !== undefined && typeof value === 'object' && 'toString' in value) {
+    return value.toString();
+  }
+
+  return '';
+}
+
+function renderAttributes(props: ElementProps): string {
+  return Object.entries(props)
+    .filter(([key, value]) => key !== 'children' && key !== 'ref' && value !== false && value !== undefined && value !== null)
+    .map(([key, value]) => {
+      if (value === true) {
+        return key;
+      }
+
+      return `${key}="${escapeHtml(stringifyAttributeValue(value))}"`;
+    })
+    .join(' ');
+}
+
+function createElement(type: ElementType, props: ElementProps): RenderedElement {
+  return {
+    type,
+    props,
+  };
+}
+
+function renderToStaticMarkup(node: RenderedNode): string {
+  if (node === null || node === undefined || typeof node === 'boolean') {
+    return '';
+  }
+
+  if (typeof node === 'string' || typeof node === 'number') {
+    return escapeHtml(String(node));
+  }
+
+  if (Array.isArray(node)) {
+    return node.map((child) => renderToStaticMarkup(child)).join('');
+  }
+
+  if (typeof node.type === 'function') {
+    return renderToStaticMarkup(node.type(node.props));
+  }
+
+  const renderedChildren = renderToStaticMarkup(node.props.children);
+  const attributes = renderAttributes(node.props);
+  const attributePrefix = attributes.length > 0 ? ` ${attributes}` : '';
+
+  return `<${node.type}${attributePrefix}>${renderedChildren}</${node.type}>`;
+}
+
+function countMatches(value: string, pattern: RegExp): number {
+  return value.match(pattern)?.length ?? 0;
+}
+
+describe('web-next landing CTAs', () => {
+  it('renders DemoCTA as one demo anchor without a nested button', () => {
+    const markup = renderToStaticMarkup(createElement(DemoCTA, { className: 'qa-demo-class' }));
+
+    expect(countMatches(markup, /<a\b/g)).toBe(1);
+    expect(markup).toContain('href="/demo"');
+    expect(markup).not.toContain('<button');
+    expect(markup).toContain('qa-demo-class');
+    expect(markup).toContain('inline-flex');
+    expect(markup).toContain('rounded-full');
+    expect(markup).toContain('bg-primary');
+  });
+
+  it('renders SignInCTA as one sign-in anchor without a nested button', () => {
+    const markup = renderToStaticMarkup(createElement(SignInCTA, { className: 'qa-sign-in-class' }));
+
+    expect(countMatches(markup, /<a\b/g)).toBe(1);
+    expect(markup).toContain('href="/sign-in"');
+    expect(markup).not.toContain('<button');
+    expect(markup).toContain('qa-sign-in-class');
+    expect(markup).toContain('inline-flex');
+    expect(markup).toContain('rounded-full');
+  });
+
+  it('keeps required base CTA classes when optional className adds layout tokens', () => {
+    const demoMarkup = renderToStaticMarkup(createElement(DemoCTA, { className: 'qa-demo-wide sm:px-8' }));
+    const signInMarkup = renderToStaticMarkup(createElement(SignInCTA, { className: 'qa-sign-in-wide sm:px-6' }));
+
+    expect(demoMarkup).toContain('qa-demo-wide');
+    expect(demoMarkup).toContain('sm:px-8');
+    expect(demoMarkup).toContain('inline-flex');
+    expect(demoMarkup).toContain('rounded-full');
+    expect(demoMarkup).toContain('bg-primary');
+
+    expect(signInMarkup).toContain('qa-sign-in-wide');
+    expect(signInMarkup).toContain('sm:px-6');
+    expect(signInMarkup).toContain('inline-flex');
+    expect(signInMarkup).toContain('rounded-full');
+    expect(signInMarkup).toContain('hover:text-foreground');
+  });
+});
diff --git a/tests/web-next-percent.test.ts b/tests/web-next-percent.test.ts
new file mode 100644
index 00000000..b0b31597
--- /dev/null
+++ b/tests/web-next-percent.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import {
+  absoluteUnitScoreToPercentValue,
+  clampPercentValue,
+  formatUnitIntervalPercent,
+  unitIntervalToPercentValue,
+} from '../web-next/lib/percent';
+
+describe('web-next percent helpers', () => {
+  it('clamps already-scaled percentages at the lowest level', () => {
+    expect(clampPercentValue(Number.NaN)).toBe(0);
+    expect(clampPercentValue(Number.POSITIVE_INFINITY)).toBe(0);
+    expect(clampPercentValue(Number.NEGATIVE_INFINITY)).toBe(0);
+    expect(clampPercentValue(-1)).toBe(0);
+    expect(clampPercentValue(0)).toBe(0);
+    expect(clampPercentValue(12.5)).toBe(13);
+    expect(clampPercentValue(100)).toBe(100);
+    expect(clampPercentValue(101)).toBe(100);
+  });
+
+  it('keeps unit interval bar widths and labels clamped consistently', () => {
+    expect(unitIntervalToPercentValue(0)).toBe(0);
+    expect(formatUnitIntervalPercent(0)).toBe('0%');
+    expect(unitIntervalToPercentValue(1)).toBe(100);
+    expect(formatUnitIntervalPercent(1)).toBe('100%');
+    expect(unitIntervalToPercentValue(Number.NaN)).toBe(0);
+    expect(formatUnitIntervalPercent(Number.NaN)).toBe('0%');
+    expect(unitIntervalToPercentValue(Number.POSITIVE_INFINITY)).toBe(0);
+    expect(formatUnitIntervalPercent(Number.POSITIVE_INFINITY)).toBe('0%');
+    expect(unitIntervalToPercentValue(Number.NEGATIVE_INFINITY)).toBe(0);
+    expect(formatUnitIntervalPercent(Number.NEGATIVE_INFINITY)).toBe('0%');
+    expect(unitIntervalToPercentValue(1.4)).toBe(100);
+    expect(formatUnitIntervalPercent(1.4)).toBe('100%');
+    expect(unitIntervalToPercentValue(-0.2)).toBe(0);
+    expect(formatUnitIntervalPercent(-0.2)).toBe('0%');
+  });
+
+  it('preserves absolute score behavior for score bars', () => {
+    expect(absoluteUnitScoreToPercentValue(-0.45)).toBe(45);
+    expect(absoluteUnitScoreToPercentValue(1.25)).toBe(100);
+    expect(absoluteUnitScoreToPercentValue(Number.NaN)).toBe(0);
+  });
+});
diff --git a/tests/web-next-score.test.ts b/tests/web-next-score.test.ts
new file mode 100644
index 00000000..33a74356
--- /dev/null
+++ b/tests/web-next-score.test.ts
@@ -0,0 +1,40 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { formatSignedScore, isNonNegativeScore, normalizeScoreValue } from '../web-next/lib/score';
+
+const REPO_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+
+function readRepoFile(relativePath: string): string {
+  return readFileSync(path.join(REPO_ROOT, relativePath), 'utf8');
+}
+
+describe('web-next score helpers', () => {
+  it('normalizes non-finite score values before formatting signed receipts', () => {
+    expect(normalizeScoreValue(Number.NaN)).toBe(0);
+    expect(normalizeScoreValue(Number.POSITIVE_INFINITY)).toBe(0);
+    expect(normalizeScoreValue(Number.NEGATIVE_INFINITY)).toBe(0);
+
+    expect(formatSignedScore(Number.NaN)).toBe('+0.00');
+    expect(formatSignedScore(Number.POSITIVE_INFINITY)).toBe('+0.00');
+    expect(formatSignedScore(Number.NEGATIVE_INFINITY)).toBe('+0.00');
+    expect(formatSignedScore(0.8486208006784361)).toBe('+0.85');
+    expect(formatSignedScore(-0.125)).toBe('-0.13');
+    expect(formatSignedScore(0)).toBe('+0.00');
+    expect(formatSignedScore(-0)).toBe('+0.00');
+
+    expect(isNonNegativeScore(Number.NaN)).toBe(true);
+    expect(isNonNegativeScore(-0.01)).toBe(false);
+  });
+
+  it('keeps homepage receipt score formatting on the shared helper', () => {
+    const bentoContent = readRepoFile('web-next/components/bento-section.tsx');
+    const dashboardContent = readRepoFile('web-next/components/dashboard-preview.tsx');
+
+    expect(bentoContent).not.toContain('function formatScore');
+    expect(bentoContent).toContain('formatSignedScore(LIVE_RANK_ONE_EXPLANATION.totalScore)');
+    expect(dashboardContent).not.toContain('totalScorePrefix');
+    expect(dashboardContent).toContain('formatSignedScore(LIVE_RANK_ONE_EXPLANATION.totalScore)');
+  });
+});
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 00000000..e1ce26eb
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,215 @@
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+const webNextMockModules: Record<string, string> = {
+  '@/components/ui/button': `
+function classNames(...inputs) {
+  return inputs
+    .flatMap((input) => {
+      if (typeof input === 'string') {
+        return [input];
+      }
+      if (Array.isArray(input)) {
+        return input.filter((value) => typeof value === 'string');
+      }
+      return [];
+    })
+    .filter((input) => input.length > 0)
+    .join(' ');
+}
+
+function firstChild(children) {
+  return Array.isArray(children) ? children[0] : children;
+}
+
+function slot(props) {
+  const child = firstChild(props.children);
+  const slotProps = Object.fromEntries(
+    Object.entries(props).filter(([key]) => key !== 'children'),
+  );
+
+  if (child === null || typeof child !== 'object' || !('type' in child) || !('props' in child)) {
+    return {
+      type: 'span',
+      props: {
+        ...slotProps,
+        children: child,
+      },
+    };
+  }
+
+  return {
+    type: child.type,
+    props: {
+      ...child.props,
+      ...slotProps,
+      className: classNames(slotProps.className, child.props.className),
+      children: child.props.children,
+    },
+  };
+}
+
+export function Button(props) {
+  const {
+    asChild,
+    children,
+    className: providedClassName,
+    variant,
+    ...buttonProps
+  } = props;
+  const variantClassName = variant === 'ghost'
+    ? 'hover:bg-accent hover:text-accent-foreground'
+    : 'bg-primary text-primary-foreground hover:bg-primary/90';
+  const className = classNames(
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors',
+    variantClassName,
+    'h-10 px-4 py-2',
+    providedClassName,
+  );
+
+  if (asChild === true) {
+    return slot({
+      ...buttonProps,
+      children,
+      className,
+    });
+  }
+
+  return {
+    type: 'button',
+    props: {
+      ...buttonProps,
+      className,
+      children,
+    },
+  };
+}
+`,
+  '@/lib/utils': `
+export function cn(...inputs) {
+  return inputs
+    .flatMap((input) => {
+      if (typeof input === 'string') {
+        return [input];
+      }
+      if (Array.isArray(input)) {
+        return input.filter((value) => typeof value === 'string');
+      }
+      return [];
+    })
+    .filter((input) => input.length > 0)
+    .join(' ');
+}
+`,
+  'next/link': `
+export default function Link(props) {
+  const {
+    href,
+    children,
+    ...anchorProps
+  } = props;
+
+  return {
+    type: 'a',
+    props: {
+      ...anchorProps,
+      href: typeof href === 'string' ? href : href.toString(),
+      children,
+    },
+  };
+}
+`,
+  'next/link.js': `
+export { default } from 'next/link';
+`,
+  'react/jsx-runtime': `
+export const Fragment = 'fragment';
+
+export function jsx(type, props) {
+  return {
+    type,
+    props: props === null || props === undefined ? {} : props,
+  };
+}
+
+export const jsxs = jsx;
+`,
+  'react/jsx-dev-runtime': `
+export const Fragment = 'fragment';
+
+export function jsxDEV(type, props) {
+  return {
+    type,
+    props: props === null || props === undefined ? {} : props,
+  };
+}
+
+export const jsx = jsxDEV;
+export const jsxs = jsxDEV;
+`,
+};
+
+const webNextMockModulePrefix = '\0web-next-test-mock:';
+
+function resolveWebNextMockSource(source: string): string | null {
+  if (source in webNextMockModules) {
+    return source;
+  }
+
+  const normalizedSource = source.replaceAll('\\', '/');
+
+  if (
+    normalizedSource.endsWith('/web-next/components/ui/button')
+    || normalizedSource.endsWith('/web-next/components/ui/button.tsx')
+  ) {
+    return '@/components/ui/button';
+  }
+
+  if (
+    normalizedSource.endsWith('/web-next/lib/utils')
+    || normalizedSource.endsWith('/web-next/lib/utils.ts')
+  ) {
+    return '@/lib/utils';
+  }
+
+  return null;
+}
+
+export default defineConfig({
+  plugins: [
+    {
+      name: 'web-next-root-test-mocks',
+      enforce: 'pre',
+      resolveId(source: string) {
+        const mockSource = resolveWebNextMockSource(source);
+
+        if (mockSource !== null) {
+          return `${webNextMockModulePrefix}${mockSource}`;
+        }
+
+        return null;
+      },
+      load(id: string) {
+        if (!id.startsWith(webNextMockModulePrefix)) {
+          return null;
+        }
+
+        const source = id.slice(webNextMockModulePrefix.length);
+        return webNextMockModules[source] ?? null;
+      },
+    },
+  ],
+  oxc: false,
+  esbuild: {
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'web-next'),
+    },
+  },
+  test: {
+    environment: 'node',
+  },
+});
diff --git a/web-next/app/page.tsx b/web-next/app/page.tsx
index e71c5daa..8fa127a8 100644
--- a/web-next/app/page.tsx
+++ b/web-next/app/page.tsx
@@ -4,8 +4,8 @@ import { Header } from "@/components/header"
 import { HeroSection } from "@/components/hero-section"
 import { DashboardPreview } from "@/components/dashboard-preview"
 import { SocialProof } from "@/components/social-proof"
-import { GetStartedSection } from "@/components/get-started-section"
 import { BentoSection } from "@/components/bento-section"
+import { GetStartedSection } from "@/components/get-started-section"
 import { ChangelogSection } from "@/components/changelog-section"
 import { FAQSection } from "@/components/faq-section"
 import { CTASection } from "@/components/cta-section"
@@ -19,49 +19,51 @@ export default function LandingPage() {
       <Header />
 
       <div className="relative z-10">
-        {/* Hero + dashboard preview — stacked so preview overhangs below */}
-        <div className="relative max-w-[1320px] mx-auto px-4 md:px-6 lg:px-8">
-          <HeroSection />
-          {/* Dashboard preview sits at the bottom of the hero, overhanging into the next section */}
-          <div className="relative z-20 -mt-24 md:-mt-32 lg:-mt-40 flex justify-center pb-0">
-            <AnimatedSection delay={0.15}>
-              <DashboardPreview />
-            </AnimatedSection>
-          </div>
-        </div>
+        {/* Hero - full bleed */}
+        <HeroSection />
 
-        {/* Open source strip — sits below the preview with top padding to clear the overhang */}
-        <AnimatedSection className="relative z-10 max-w-[1320px] mx-auto px-6 mt-8 md:mt-16" delay={0.1}>
-          <SocialProof />
+        {/* Dashboard preview sits below the hero and overhangs into the next section. */}
+        <AnimatedSection
+          className="relative z-20 max-w-[1320px] mx-auto px-4 md:px-6 lg:px-8 -mt-24 md:-mt-32 lg:-mt-40 pb-0 flex justify-center"
+          delay={0.15}
+        >
+          <DashboardPreview />
         </AnimatedSection>
 
-        {/* Get started */}
-        <AnimatedSection className="relative z-10 max-w-[1320px] mx-auto" delay={0.15}>
-          <GetStartedSection />
-        </AnimatedSection>
+        <div className="max-w-[1320px] mx-auto">
+          {/* Open source strip */}
+          <AnimatedSection className="px-4 md:px-6 lg:px-8 mt-12 md:mt-20" delay={0.1}>
+            <SocialProof />
+          </AnimatedSection>
 
-        {/* Features bento */}
-        <AnimatedSection id="features-section" className="relative z-10 max-w-[1320px] mx-auto" delay={0.2}>
-          <BentoSection />
-        </AnimatedSection>
+          {/* Feature rows */}
+          <AnimatedSection delay={0.15}>
+            <BentoSection />
+          </AnimatedSection>
 
-        {/* Changelog */}
-        <AnimatedSection className="relative z-10 max-w-[1320px] mx-auto" delay={0.2}>
-          <ChangelogSection />
-        </AnimatedSection>
+          {/* Get started */}
+          <AnimatedSection delay={0.15}>
+            <GetStartedSection />
+          </AnimatedSection>
 
-        {/* FAQ */}
-        <AnimatedSection id="faq-section" className="relative z-10 max-w-[1320px] mx-auto" delay={0.2}>
-          <FAQSection />
-        </AnimatedSection>
+          {/* Changelog / proof */}
+          <AnimatedSection className="px-5 md:px-8 lg:px-12" delay={0.2}>
+            <ChangelogSection />
+          </AnimatedSection>
 
-        {/* CTA */}
-        <AnimatedSection className="relative z-10 max-w-[1320px] mx-auto" delay={0.2}>
-          <CTASection />
-        </AnimatedSection>
+          {/* FAQ */}
+          <AnimatedSection className="px-5 md:px-8 lg:px-12" delay={0.2}>
+            <FAQSection />
+          </AnimatedSection>
+
+          {/* CTA */}
+          <AnimatedSection delay={0.2}>
+            <CTASection />
+          </AnimatedSection>
+        </div>
 
         {/* Footer */}
-        <AnimatedSection className="relative z-10 max-w-[1320px] mx-auto" delay={0.2}>
+        <AnimatedSection delay={0.2}>
           <FooterSection />
         </AnimatedSection>
       </div>
diff --git a/web-next/components/bento-section.tsx b/web-next/components/bento-section.tsx
index ab98e989..43fec4c9 100644
--- a/web-next/components/bento-section.tsx
+++ b/web-next/components/bento-section.tsx
@@ -1,289 +1,264 @@
-// Corgi feature bento — six cards mapping to the three brand pillars
-import React from "react"
+import Link from "next/link"
+import { LIVE_FEED_POSTS, LIVE_METRICS_SNAPSHOT, LIVE_RANK_ONE_EXPLANATION } from "@/lib/live-metrics-snapshot"
+import { formatUnitIntervalPercent, unitIntervalToPercentValue } from "@/lib/percent"
+import { formatSignedScore } from "@/lib/score"
 
-const BentoCard = ({
-  title,
-  description,
-  children,
-  accent = false,
-}: {
-  title: string
-  description: string
-  children: React.ReactNode
-  accent?: boolean
-}) => (
-  <div
-    className={`overflow-hidden rounded-2xl flex flex-col justify-start items-start relative border ${
-      accent
-        ? "bg-primary border-primary/30"
-        : "bg-card border-border"
-    } shadow-[0_2px_12px_rgba(46,38,32,0.07)]`}
-  >
-    <div className="self-stretch p-6 pb-4 flex flex-col justify-start items-start gap-1.5 relative z-10">
-      <p className={`self-stretch text-base font-semibold leading-6 ${accent ? "text-primary-foreground" : "text-foreground"}`}>
-        {title}
-      </p>
-      <p className={`self-stretch text-sm font-normal leading-5 ${accent ? "text-primary-foreground/75" : "text-foreground/60"}`}>
-        {description}
-      </p>
-    </div>
-    <div className="self-stretch flex-1 relative z-10 min-h-[220px]">
-      {children}
-    </div>
-  </div>
-)
-
-// Inline mini-illustrations for each bento card
-function VoteWeightsIllustration() {
-  const items = [
-    { label: "Recency", pct: 35 },
-    { label: "Replies", pct: 25 },
-    { label: "Follows", pct: 20 },
-    { label: "Quality", pct: 15 },
-    { label: "Novelty", pct: 5 },
+function VoteWeightsUI() {
+  const weights = [
+    { label: "Recency", value: LIVE_METRICS_SNAPSHOT.weights.recency },
+    { label: "Engagement", value: LIVE_METRICS_SNAPSHOT.weights.engagement },
+    { label: "Bridging", value: LIVE_METRICS_SNAPSHOT.weights.bridging },
+    { label: "Source diversity", value: LIVE_METRICS_SNAPSHOT.weights.source_diversity },
+    { label: "Relevance", value: LIVE_METRICS_SNAPSHOT.weights.relevance },
   ]
-  return (
-    <div className="px-6 pb-6 flex flex-col gap-2.5 w-full">
-      {items.map((item) => (
-        <div key={item.label} className="flex items-center gap-3">
-          <span className="w-16 text-foreground/50 text-xs font-medium flex-shrink-0">{item.label}</span>
-          <div className="flex-1 h-1.5 bg-border rounded-full overflow-hidden">
-            <div
-              className="h-full rounded-full bg-primary transition-all duration-700"
-              style={{ width: `${item.pct * 2.5}%` }}
-            />
-          </div>
-          <span className="w-8 text-right text-foreground/40 text-xs font-mono">{item.pct}%</span>
-        </div>
-      ))}
-      <p className="text-foreground/30 text-xs mt-1.5 font-mono">epoch #47 · community vote</p>
-    </div>
-  )
-}
 
-function ScoreBreakdownIllustration() {
   return (
-    <div className="px-6 pb-6 flex flex-col gap-2.5 w-full">
-      <div className="bg-background rounded-xl border border-border overflow-hidden">
-        {/* Total score header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border/60">
-          <span className="text-foreground/50 text-xs font-medium">Total score</span>
-          <span className="text-foreground font-mono font-bold text-base">2.12</span>
+    <div className="w-full rounded-2xl border border-border bg-card overflow-hidden">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 sm:px-6 py-4 border-b border-border/60 bg-card">
+        <div className="flex items-center gap-2.5">
+          <span className="w-2.5 h-2.5 rounded-full bg-[#FF6058]" />
+          <span className="w-2.5 h-2.5 rounded-full bg-[#FFBD2E]" />
+          <span className="w-2.5 h-2.5 rounded-full bg-[#28CA41]" />
+          <span className="ml-1 sm:ml-2 text-foreground/45 text-xs font-mono">Live governance weights</span>
         </div>
-        {/* Signals */}
-        {[
-          { l: "Recency", v: "+0.82", neg: false },
-          { l: "Reply depth", v: "+0.61", neg: false },
-          { l: "Following author", v: "+0.22", neg: false },
-          { l: "Spam risk", v: "−0.04", neg: true },
-        ].map((r) => (
-          <div key={r.l} className="flex items-center justify-between px-4 py-2 border-b border-border/40 last:border-0">
-            <span className="text-foreground/50 text-xs">{r.l}</span>
-            <span className={`text-xs font-mono font-medium ${r.neg ? "text-[#C0625C]" : "text-primary"}`}>{r.v}</span>
+        <span className="w-fit text-[10px] font-mono text-primary bg-primary/10 px-2.5 py-1 rounded-full border border-primary/15">
+          epoch {LIVE_METRICS_SNAPSHOT.epochId} snapshot
+        </span>
+      </div>
+      <div className="px-5 sm:px-6 py-6 flex flex-col gap-4">
+        {weights.map((item) => (
+          <div key={item.label} className="flex items-center gap-3 sm:gap-4">
+            <span className="w-28 sm:w-36 text-foreground/60 text-sm font-medium flex-shrink-0">{item.label}</span>
+            <div className="flex-1 h-2 bg-border/60 rounded-full overflow-hidden">
+              <div
+                className="h-full rounded-full bg-primary transition-all duration-700"
+                style={{ width: `${unitIntervalToPercentValue(item.value)}%` }}
+              />
+            </div>
+            <span className="w-10 text-right text-foreground/50 text-sm font-mono font-medium flex-shrink-0">
+              {formatUnitIntervalPercent(item.value)}
+            </span>
           </div>
         ))}
       </div>
-      <p className="text-foreground/30 text-xs font-mono">every signal stored · open any post</p>
+      <div className="px-5 sm:px-6 pb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p className="text-foreground/35 text-xs font-mono">
+          {LIVE_METRICS_SNAPSHOT.scoredPosts.toLocaleString("en-US")} scored posts use these weights
+        </p>
+        <Link
+          href="/vote"
+          className="w-fit text-xs font-medium text-primary border border-primary/25 bg-primary/10 px-3.5 py-1.5 rounded-full hover:bg-primary/15 transition-colors"
+        >
+          Review voting screen
+        </Link>
+      </div>
     </div>
   )
 }
 
-function EpochHistoryIllustration() {
-  const epochs = [44, 45, 46, 47]
+function ScoreBreakdownUI() {
   return (
-    <div className="px-6 pb-6 flex flex-col gap-0 w-full">
-      <div className="bg-background rounded-xl border border-border overflow-hidden">
-        {epochs.map((ep, i) => (
-          <div
-            key={ep}
-            className={`flex items-center justify-between px-4 py-2.5 ${i < epochs.length - 1 ? "border-b border-border/40" : ""}`}
-          >
-            <div className="flex items-center gap-2">
-              <span className="text-foreground/70 text-xs font-mono">Epoch #{ep}</span>
-              {ep === 47 && (
-                <span className="text-[10px] font-medium text-primary bg-primary/10 px-2 py-0.5 rounded-full">
-                  current
-                </span>
-              )}
-            </div>
-            <span className="text-foreground/40 text-xs font-mono">{200 + ep * 3} voters</span>
+    <div className="w-full rounded-2xl border border-border bg-card overflow-hidden">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 sm:px-6 py-4 border-b border-border/60">
+        <span className="text-foreground/45 text-xs font-mono">Anonymized live receipt</span>
+        <span className="w-fit text-xs font-mono text-primary font-semibold bg-primary/10 px-2.5 py-1 rounded-full border border-primary/15">
+          rank #{LIVE_RANK_ONE_EXPLANATION.rank}
+        </span>
+      </div>
+      <div className="px-5 sm:px-6 py-5 flex flex-col gap-5">
+        <div className="flex items-start gap-3">
+          <div className="w-9 h-9 rounded-full bg-muted flex-shrink-0 overflow-hidden">
+            <svg viewBox="0 0 36 36" className="w-full h-full" aria-hidden="true">
+              <rect width="36" height="36" fill="hsl(var(--muted))" />
+              <circle cx="18" cy="14" r="6" fill="hsl(var(--border))" />
+              <ellipse cx="18" cy="32" rx="11" ry="8" fill="hsl(var(--border))" />
+            </svg>
           </div>
-        ))}
+          <div className="flex-1 min-w-0">
+            <p className="text-foreground font-semibold text-sm">{LIVE_RANK_ONE_EXPLANATION.authorLabel}</p>
+            <p className="text-foreground/60 text-sm leading-relaxed mt-1">{LIVE_RANK_ONE_EXPLANATION.text}</p>
+          </div>
+        </div>
+        <div className="bg-background rounded-xl border border-border/70 overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border/50 bg-muted/30">
+            <span className="text-foreground/50 text-xs font-medium">Why this ranked first</span>
+            <span className="text-primary text-xs font-mono font-semibold">
+              {formatSignedScore(LIVE_RANK_ONE_EXPLANATION.totalScore)}
+            </span>
+          </div>
+          {LIVE_RANK_ONE_EXPLANATION.components.map((component) => (
+            <div
+              key={component.key}
+              className="flex items-center justify-between gap-4 px-4 py-2.5 border-b border-border/30 last:border-0"
+            >
+              <span className="text-foreground/55 text-xs">{component.label}</span>
+              <span className="text-xs font-mono font-semibold text-primary">
+                {formatSignedScore(component.weighted)}
+              </span>
+            </div>
+          ))}
+        </div>
       </div>
-      <p className="text-foreground/30 text-xs mt-2.5 font-mono">auditable forever</p>
     </div>
   )
 }
 
-function CommunityVoteIllustration({ accent }: { accent?: boolean }) {
-  const options = [
-    { option: "Boost replies from followed accounts", votes: 78 },
-    { option: "Penalise repost-heavy posts", votes: 61 },
-    { option: "Increase recency weight", votes: 45 },
-  ]
-  const max = options[0].votes
-  const bg = accent ? "bg-primary-foreground/10 border-primary-foreground/20" : "bg-muted/60 border-border"
-  const textMain = accent ? "text-primary-foreground/90" : "text-foreground/70"
-  const textMuted = accent ? "text-primary-foreground/50" : "text-foreground/40"
-  const barBg = accent ? "bg-primary-foreground/15" : "bg-border"
-  const barFill = accent ? "bg-primary-foreground/60" : "bg-primary"
-
+function MixedFeedUI() {
   return (
-    <div className="px-6 pb-6 flex flex-col gap-2.5 w-full">
-      {options.map((opt) => (
-        <div key={opt.option} className={`rounded-lg border px-3.5 py-3 flex flex-col gap-2 ${bg}`}>
-          <p className={`text-xs leading-tight font-medium ${textMain}`}>{opt.option}</p>
-          <div className="flex items-center gap-2">
-            <div className={`flex-1 h-1 rounded-full overflow-hidden ${barBg}`}>
-              <div
-                className={`h-full rounded-full ${barFill}`}
-                style={{ width: `${(opt.votes / max) * 100}%` }}
-              />
+    <div className="w-full rounded-2xl border border-border bg-card overflow-hidden">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 sm:px-6 py-4 border-b border-border/60">
+        <div className="flex items-center gap-2.5">
+          <span className="w-2 h-2 rounded-full bg-[#FF6058]" />
+          <span className="w-2 h-2 rounded-full bg-[#FFBD2E]" />
+          <span className="w-2 h-2 rounded-full bg-[#28CA41]" />
+          <span className="ml-1 sm:ml-2 text-foreground/45 text-xs font-mono">Snapshot mixed feed</span>
+        </div>
+        <span className="w-fit text-[10px] font-medium text-foreground/45 border border-border/50 px-2.5 py-1 rounded-full">
+          {LIVE_METRICS_SNAPSHOT.uniqueAuthors.toLocaleString("en-US")} anonymized authors
+        </span>
+      </div>
+      <div className="divide-y divide-border/40">
+        {LIVE_FEED_POSTS.map((post) => (
+          <div key={post.rank} className="px-5 py-4 flex items-start gap-3.5">
+            <div className="flex-shrink-0 w-6 text-center text-foreground/25 text-xs font-mono pt-0.5">
+              {post.rank}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 flex-wrap mb-1">
+                <span className="text-foreground font-semibold text-sm">{post.author}</span>
+                <span className="text-foreground/35 text-xs">snapshot receipt</span>
+              </div>
+              <p className="text-foreground/65 text-sm leading-relaxed">{post.text}</p>
             </div>
-            <span className={`text-[10px] font-mono font-semibold w-8 text-right flex-shrink-0 ${textMuted}`}>{opt.votes}</span>
+            <span className="flex-shrink-0 text-xs font-mono font-semibold text-primary pt-0.5">
+              {formatSignedScore(post.score)}
+            </span>
           </div>
-        </div>
-      ))}
-      <p className={`text-xs mt-0.5 font-mono ${accent ? "text-primary-foreground/30" : "text-foreground/30"}`}>
-        members vote · feed reranks each epoch
-      </p>
+        ))}
+      </div>
+      <div className="px-5 sm:px-6 py-3.5 border-t border-border/40 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <p className="text-foreground/35 text-xs font-mono">one governed ranking, multiple signal types</p>
+        <Link href="/demo" className="text-xs font-medium text-primary hover:underline underline-offset-2">
+          See the receipt demo &rarr;
+        </Link>
+      </div>
     </div>
   )
 }
 
-function AppPasswordIllustration() {
-  const items = [
+function CommunityVoteUI() {
+  const steps = [
     {
-      label: "App-password only",
-      icon: (
-        <path d="M6 1a3 3 0 0 0-3 3v1H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H9V4a3 3 0 0 0-3-3Zm0 1a2 2 0 0 1 2 2v1H4V4a2 2 0 0 1 2-2Z" fill="hsl(var(--primary))" />
-      ),
+      label: "Proposal",
+      text: "A change to ranking weights or rules is made visible before it affects the feed.",
     },
     {
-      label: "Revoke anytime, one click",
-      icon: (
-        <>
-          <circle cx="6" cy="6" r="4" stroke="hsl(var(--primary))" strokeWidth="1.5" />
-          <path d="M4 6l1.5 1.5L8 4" stroke="hsl(var(--primary))" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-        </>
-      ),
+      label: "Vote",
+      text: "Community votes are aggregated into the next set of governance weights.",
     },
     {
-      label: "No main password, ever",
-      icon: (
-        <path d="M6 1L1 4v4l5 3 5-3V4L6 1Z" stroke="hsl(var(--primary))" strokeWidth="1.5" strokeLinejoin="round" />
-      ),
+      label: "Epoch transition",
+      text: "The feed applies the new weights at the boundary instead of changing silently midstream.",
+    },
+    {
+      label: "Receipt",
+      text: "Weights and post-score explanations remain inspectable after the change.",
     },
   ]
+
   return (
-    <div className="px-6 pb-6 flex flex-col gap-2 w-full">
-      <div className="bg-background rounded-xl border border-border overflow-hidden">
-        {items.map((item, i) => (
-          <div
-            key={item.label}
-            className={`flex items-center gap-3 px-4 py-3 ${i < items.length - 1 ? "border-b border-border/40" : ""}`}
-          >
-            <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
-              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">{item.icon}</svg>
+    <div className="w-full rounded-2xl border border-border bg-card overflow-hidden">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 sm:px-6 py-4 border-b border-border/60">
+        <span className="text-foreground/45 text-xs font-mono">Epoch and proposal flow</span>
+        <span className="w-fit text-[10px] font-medium text-primary bg-primary/10 border border-primary/15 px-2.5 py-1 rounded-full">
+          auditable sequence
+        </span>
+      </div>
+      <div className="px-5 sm:px-6 py-5 grid grid-cols-1 md:grid-cols-2 gap-3">
+        {steps.map((step, index) => (
+          <div key={step.label} className="rounded-xl border border-border/60 bg-background px-4 py-3 flex flex-col gap-2.5">
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-foreground/75 text-sm font-semibold leading-snug">{step.label}</p>
+              <span className="text-[11px] font-mono text-foreground/35">{String(index + 1).padStart(2, "0")}</span>
             </div>
-            <span className="text-foreground/70 text-xs font-medium">{item.label}</span>
+            <p className="text-foreground/55 text-sm leading-relaxed">{step.text}</p>
           </div>
         ))}
       </div>
-      <p className="text-foreground/30 text-xs mt-0.5 font-mono">trustworthy by construction</p>
     </div>
   )
 }
 
-function ExportIllustration() {
-  return (
-    <div className="px-6 pb-6 flex flex-col gap-2.5 w-full">
-      <div className="bg-background rounded-xl border border-border overflow-hidden">
-        <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border/40 bg-muted/40">
-          <span className="w-2.5 h-2.5 rounded-full bg-[#FF6058]" />
-          <span className="w-2.5 h-2.5 rounded-full bg-[#FFBD2E]" />
-          <span className="w-2.5 h-2.5 rounded-full bg-[#28CA41]" />
-          <span className="text-foreground/40 text-[10px] font-mono ml-2">export.json</span>
-        </div>
-        <div className="px-4 py-3 font-mono text-xs text-foreground/60 space-y-0.5">
-          <div><span className="text-primary/60">{"{"}</span></div>
-          <div className="pl-3"><span className="text-foreground/40">&quot;post_uri&quot;:</span> <span className="text-foreground/55">&quot;at://...&quot;</span>,</div>
-          <div className="pl-3"><span className="text-foreground/40">&quot;score&quot;:</span> <span className="text-primary font-semibold">2.12</span>,</div>
-          <div className="pl-3"><span className="text-foreground/40">&quot;epoch&quot;:</span> <span className="text-foreground/55">47</span>,</div>
-          <div className="pl-3"><span className="text-foreground/40">&quot;signals&quot;:</span> <span className="text-foreground/55">[...]</span></div>
-          <div><span className="text-primary/60">{"}"}</span></div>
-        </div>
-      </div>
-      <p className="text-foreground/30 text-xs font-mono">research-grade · consent-aware · yours</p>
-    </div>
-  )
-}
+const features = [
+  {
+    id: "weights",
+    headline: "Community weights are visible.",
+    description:
+      "Corgi exposes the ranking weights that drive the feed. The public homepage uses the same live snapshot source as the reviewer demo, so the numbers are receipts instead of marketing decoration.",
+    cta: "Review voting screen",
+    href: "/vote",
+    UI: VoteWeightsUI,
+  },
+  {
+    id: "receipt",
+    headline: "Every top post keeps an anonymized receipt.",
+    description:
+      "The public page can show why a post ranked without leaking raw handles, DIDs, or post URIs. Score components, weights, and totals stay inspectable while the sensitive production content stays redacted.",
+    cta: "Open the live receipt",
+    href: `/demo#snapshot-rank-${LIVE_RANK_ONE_EXPLANATION.rank}`,
+    UI: ScoreBreakdownUI,
+  },
+  {
+    id: "mixed-feed",
+    headline: "The feed is mixed, not topic-siloed.",
+    description:
+      "A governed recommender has to reconcile recency, engagement, bridging, source diversity, and relevance in one ranking. The demo feed shows anonymized production receipts at the same grain reviewers can inspect.",
+    cta: "Explore the demo feed",
+    href: "/demo",
+    UI: MixedFeedUI,
+  },
+  {
+    id: "epochs",
+    headline: "Epochs turn proposals into auditable changes.",
+    description:
+      "Corgi's governance loop is proposal, vote, epoch transition, and receipt. The product story stays grounded in that loop instead of promising private communities or made-up vote totals.",
+    cta: "See epoch history",
+    href: "/history",
+    UI: CommunityVoteUI,
+  },
+]
 
 export function BentoSection() {
-  const cards = [
-    {
-      title: "Vote on the weights.",
-      description: "Your community decides what the feed cares about: recency, replies, who you follow, quality.",
-      Component: VoteWeightsIllustration,
-    },
-    {
-      title: "Every post shows its work.",
-      description: "Tap any post to see its full score broken down signal by signal. Nothing is hidden.",
-      Component: ScoreBreakdownIllustration,
-    },
-    {
-      title: "A full history you can audit.",
-      description: "Every set of weights is saved per epoch. You can look back, compare, and propose changes.",
-      Component: EpochHistoryIllustration,
-    },
-    {
-      title: "One community, one algorithm.",
-      description: "Members vote on the rules. The feed reranks. No back-room decisions.",
-      Component: CommunityVoteIllustration,
-      accent: true,
-    },
-    {
-      title: "Secure by default.",
-      description: "Corgi only ever uses an app-password. Your main Bluesky password stays yours. Revoke access whenever you like.",
-      Component: AppPasswordIllustration,
-    },
-    {
-      title: "Export your data.",
-      description: "Download your feed data in structured JSON, ready for analysis. Consent-aware and yours to keep.",
-      Component: ExportIllustration,
-    },
-  ]
-
   return (
-    <section id="features-section" className="w-full px-5 flex flex-col justify-center items-center overflow-visible bg-transparent">
-      <div className="w-full py-14 md:py-20 relative flex flex-col justify-start items-start gap-6">
-        {/* Subtle warm glow */}
-        <div className="w-[547px] h-[600px] absolute top-[400px] left-[80px] origin-top-left rotate-[-33deg] bg-primary/5 blur-[130px] z-0 pointer-events-none" />
-
-        <div className="self-stretch pb-8 md:pb-12 flex flex-col justify-center items-center gap-2 z-10">
-          <div className="flex flex-col justify-start items-center gap-4">
-            <h2 className="w-full max-w-[480px] text-center text-foreground font-display text-4xl md:text-[2.75rem] font-bold leading-tight tracking-normal text-balance">
-              The feed your community actually chose.
-            </h2>
-            <p className="w-full max-w-[460px] text-center text-foreground/55 text-base font-normal leading-relaxed">
-              No hidden weights, no engagement traps. Your community votes, the feed reflects it — and everyone can see exactly why.
-            </p>
+    <section id="features-section" className="w-full">
+      {features.map((feature) => (
+        <div
+          key={feature.id}
+          className="border-t border-border/60 px-5 md:px-8 lg:px-12"
+        >
+          <div className="flex flex-col md:flex-row md:items-start gap-6 md:gap-16 py-10 md:py-14">
+            <div className="md:w-[40%] flex-shrink-0">
+              <h2 className="text-foreground font-display text-2xl md:text-3xl lg:text-[2rem] font-bold leading-tight tracking-tight text-balance">
+                {feature.headline}
+              </h2>
+            </div>
+            <div className="md:flex-1 flex flex-col gap-5 md:pt-1">
+              <p className="text-foreground/55 text-base leading-relaxed">
+                {feature.description}
+              </p>
+              <Link
+                href={feature.href}
+                className="w-fit text-sm font-medium text-primary hover:text-primary-dark transition-colors"
+              >
+                {feature.cta} &rarr;
+              </Link>
+            </div>
+          </div>
+          <div className="pb-10 md:pb-16">
+            <feature.UI />
           </div>
         </div>
-
-        <div className="self-stretch grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 z-10">
-          {cards.map((card) => (
-            <BentoCard
-              key={card.title}
-              title={card.title}
-              description={card.description}
-              accent={card.accent}
-            >
-              <card.Component accent={card.accent} />
-            </BentoCard>
-          ))}
-        </div>
-      </div>
+      ))}
     </section>
   )
 }
diff --git a/web-next/components/changelog-section.tsx b/web-next/components/changelog-section.tsx
index 93b063e5..d5d0a821 100644
--- a/web-next/components/changelog-section.tsx
+++ b/web-next/components/changelog-section.tsx
@@ -1,51 +1,61 @@
 import Link from "next/link"
+import { LIVE_METRICS_SNAPSHOT, LIVE_RANK_ONE_EXPLANATION } from "@/lib/live-metrics-snapshot"
 
-const entries = [
+const tagColors = {
+  Live: "text-primary bg-primary/[0.08]",
+  Proof: "text-foreground/60 bg-foreground/[0.06]",
+  Audit: "text-[#9B6A2F] bg-[#9B6A2F]/10",
+  Static: "text-foreground/55 bg-muted/70",
+} as const
+
+type ChangelogTag = keyof typeof tagColors
+
+interface ChangelogEntry {
+  readonly date: string
+  readonly tag: ChangelogTag
+  readonly text: string
+}
+
+const entries: readonly ChangelogEntry[] = [
   {
-    date: "Jun 2025",
-    tag: "Feature",
-    text: "Epoch comparison view: diff any two epochs side by side to see how weights shifted.",
+    date: "Snapshot",
+    tag: "Live",
+    text: `${LIVE_METRICS_SNAPSHOT.scoredPosts.toLocaleString("en-US")} scored posts and ${LIVE_METRICS_SNAPSHOT.uniqueAuthors.toLocaleString("en-US")} authors are shown from the production snapshot collected ${LIVE_METRICS_SNAPSHOT.collectedAtLabel}.`,
   },
   {
-    date: "May 2025",
-    tag: "Improvement",
-    text: "Score breakdown is now available on every post in the feed, not just the top 50.",
+    date: "Receipt",
+    tag: "Proof",
+    text: `Rank #${LIVE_RANK_ONE_EXPLANATION.rank} keeps component weights, weighted scores, and counterfactual rank movement while raw identifiers stay redacted.`,
   },
   {
-    date: "Apr 2025",
-    tag: "Feature",
-    text: "Community feeds can now set a minimum epoch length to prevent vote-rushing.",
+    date: "Epoch",
+    tag: "Audit",
+    text: `Epoch ${LIVE_METRICS_SNAPSHOT.epochId} weights are visible on the homepage and tied to the same snapshot used by the reviewer demo.`,
   },
   {
-    date: "Mar 2025",
-    tag: "Fix",
-    text: "App-password revocation now propagates within 60 seconds instead of up to 10 minutes.",
+    date: "Export",
+    tag: "Static",
+    text: "The public homepage remains a static-export route, so reviewers see the polished page without adding a new backend dependency.",
   },
 ]
 
-const tagColors: Record<string, string> = {
-  Feature: "text-primary bg-primary/[0.08]",
-  Improvement: "text-foreground/60 bg-foreground/[0.06]",
-  Fix: "text-[#9B6A2F] bg-[#9B6A2F]/10",
-}
-
 export function ChangelogSection() {
   return (
     <section className="w-full px-5 py-14 md:py-20 flex flex-col items-center gap-8">
       <div className="flex flex-col md:flex-row items-start md:items-center justify-between w-full max-w-3xl gap-3">
         <div className="flex flex-col gap-1">
           <h2 className="text-foreground font-display text-2xl md:text-3xl font-bold leading-tight tracking-tight">
-            What&apos;s new
+            Proof, not promises
           </h2>
           <p className="text-foreground/45 text-sm font-normal">
-            We ship often. Here&apos;s what&apos;s changed recently.
+            The homepage keeps its claims close to receipts reviewers can inspect.
           </p>
         </div>
         <Link
-          href="#"
+          href="/demo"
           className="text-primary text-sm font-medium hover:underline underline-offset-2 flex-shrink-0"
         >
-          Full changelog &rarr;
+          Open live demo &rarr;
         </Link>
       </div>
 
diff --git a/web-next/components/cta-section.tsx b/web-next/components/cta-section.tsx
index 9a9ac722..ec925f56 100644
--- a/web-next/components/cta-section.tsx
+++ b/web-next/components/cta-section.tsx
@@ -1,5 +1,4 @@
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
+import { DemoCTA, SignInCTA } from "@/components/landing-ctas"
 
 export function CTASection() {
   return (
@@ -12,35 +11,20 @@ export function CTASection() {
       <div className="relative z-10 flex flex-col justify-start items-center gap-8 max-w-3xl mx-auto text-center">
         <div className="flex flex-col justify-start items-center gap-4">
           <h2 className="text-foreground font-display text-4xl md:text-5xl lg:text-[64px] font-bold leading-tight tracking-tight text-balance">
-            Take back your feed.
+            Inspect the feed before you trust it.
           </h2>
           <p className="text-foreground/50 text-base md:text-lg font-medium leading-relaxed max-w-xl">
-            Connect your Bluesky account, cast your first vote, and see exactly why every post is where it is.
+            Start with the read-only demo, inspect the live snapshot, then connect a Bluesky app password only when you are ready to participate.
           </p>
         </div>
 
         <div className="flex flex-col sm:flex-row items-center gap-3">
-          <Link href="#">
-            <Button
-              className="px-8 py-3 bg-primary text-primary-foreground text-base font-medium rounded-full shadow-[0_2px_8px_rgba(200,97,44,0.35),0_1px_2px_rgba(200,97,44,0.2)] hover:bg-primary-dark hover:shadow-[0_4px_16px_rgba(200,97,44,0.4)] transition-all duration-200"
-              size="lg"
-            >
-              Connect your Bluesky account
-            </Button>
-          </Link>
-          <Link href="#features-section">
-            <Button
-              variant="ghost"
-              className="px-6 py-3 text-foreground/60 hover:text-foreground rounded-full text-base font-medium"
-              size="lg"
-            >
-              See how ranking works &rarr;
-            </Button>
-          </Link>
+          <DemoCTA className="px-8" />
+          <SignInCTA className="px-6" />
         </div>
 
         <p className="text-xs text-foreground/30 font-medium">
-          Free &middot; App-password secure &middot; Leave anytime
+          Snapshot-first &middot; App-password sign-in &middot; No hidden algorithm
         </p>
       </div>
     </section>
diff --git a/web-next/components/dashboard-preview.tsx b/web-next/components/dashboard-preview.tsx
index 097baf93..d3a23e7e 100644
--- a/web-next/components/dashboard-preview.tsx
+++ b/web-next/components/dashboard-preview.tsx
@@ -1,15 +1,17 @@
 // Score breakdown card — the "killer feature" UI shown below the hero
+import Link from "next/link"
 import { LIVE_METRICS_SNAPSHOT, LIVE_RANK_ONE_EXPLANATION } from "@/lib/live-metrics-snapshot"
+import { absoluteUnitScoreToPercentValue } from "@/lib/percent"
+import { formatSignedScore, isNonNegativeScore } from "@/lib/score"
 
 export function DashboardPreview() {
   const signals = LIVE_RANK_ONE_EXPLANATION.components.map((component) => ({
     label: component.label,
     weight: component.weight,
-    value: `${component.raw_score >= 0 ? "+" : "-"}${Math.abs(component.raw_score).toFixed(2)}`,
-    bar: Math.round(component.raw_score * 100),
-    positive: component.weighted >= 0,
+    value: formatSignedScore(component.raw_score),
+    bar: absoluteUnitScoreToPercentValue(component.raw_score),
+    positive: isNonNegativeScore(component.weighted),
   }))
-  const totalScorePrefix = LIVE_RANK_ONE_EXPLANATION.totalScore >= 0 ? "+" : "-"
 
   return (
     <div className="w-full max-w-[900px]">
@@ -28,7 +30,7 @@ export function DashboardPreview() {
               <span className="text-foreground font-semibold text-sm">{LIVE_RANK_ONE_EXPLANATION.authorLabel}</span>
               <span className="text-foreground/40 text-xs">· anonymized live receipt</span>
               <span className="ml-auto inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary text-xs font-semibold font-mono">
-                score: {LIVE_RANK_ONE_EXPLANATION.totalScore.toFixed(2)}
+                score: {formatSignedScore(LIVE_RANK_ONE_EXPLANATION.totalScore)}
               </span>
             </div>
             <p className="text-foreground/80 text-sm leading-relaxed">
@@ -71,14 +73,14 @@ export function DashboardPreview() {
           <div className="mt-4 pt-3 border-t border-border flex items-center justify-between">
             <span className="text-foreground text-sm font-semibold">Total score</span>
             <span className="text-primary text-lg font-bold font-mono">
-              {totalScorePrefix}{Math.abs(LIVE_RANK_ONE_EXPLANATION.totalScore).toFixed(2)}
+              {formatSignedScore(LIVE_RANK_ONE_EXPLANATION.totalScore)}
             </span>
           </div>
           <div className="mt-3 flex items-center justify-between">
             <span className="text-foreground/40 text-xs">Epoch #{LIVE_METRICS_SNAPSHOT.epochId} · refreshed {LIVE_METRICS_SNAPSHOT.collectedAtLabel}</span>
-            <button className="text-primary text-xs font-medium hover:underline">
+            <Link href="/history" className="text-primary text-xs font-medium hover:underline">
               View epoch history &rarr;
-            </button>
+            </Link>
           </div>
         </div>
       </div>
diff --git a/web-next/components/footer-section.tsx b/web-next/components/footer-section.tsx
index 63966303..984b879a 100644
--- a/web-next/components/footer-section.tsx
+++ b/web-next/components/footer-section.tsx
@@ -1,3 +1,5 @@
+import Link from "next/link"
+
 export function FooterSection() {
   return (
     <footer className="w-full bg-background border-t border-border/70">
@@ -22,9 +24,11 @@ export function FooterSection() {
             </a>
             <span className="text-foreground/20">·</span>
             <a
-              href="#"
+              href="https://github.com/andrewnordstrom-eng/bluesky-community-feed"
               aria-label="GitHub"
               className="text-foreground/40 hover:text-primary transition-colors text-xs font-medium"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               GitHub
             </a>
@@ -39,26 +43,26 @@ export function FooterSection() {
               <a href="#features-section" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
                 How it works
               </a>
-              <a href="#" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
-                Score breakdown
-              </a>
-              <a href="#" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
+              <Link href="/demo" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
+                Live demo
+              </Link>
+              <Link href="/history" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
                 Epoch history
-              </a>
+              </Link>
             </div>
           </div>
           <div className="flex flex-col gap-3">
             <h3 className="text-foreground/40 text-xs font-semibold tracking-wide uppercase">Governance</h3>
             <div className="flex flex-col gap-2">
-              <a href="#" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
+              <Link href="/vote" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
                 Voting guide
-              </a>
-              <a href="#" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
+              </Link>
+              <Link href="/history" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
                 Audit log
-              </a>
-              <a href="#" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
-                Propose a rule
-              </a>
+              </Link>
+              <Link href="/sign-in" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
+                Sign in
+              </Link>
             </div>
           </div>
           <div className="flex flex-col gap-3">
@@ -67,15 +71,20 @@ export function FooterSection() {
               <a href="#faq-section" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
                 FAQ
               </a>
-              <a href="#" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
+              <a
+                href="https://github.com/andrewnordstrom-eng/bluesky-community-feed/tree/main/docs"
+                className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 Documentation
               </a>
-              <a href="#" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
-                Data exports
-              </a>
-              <a href="#" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
+              <Link href="/tos" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
+                Terms
+              </Link>
+              <Link href="/privacy" className="text-foreground/70 text-sm font-normal leading-5 hover:text-primary transition-colors">
                 Privacy policy
-              </a>
+              </Link>
             </div>
           </div>
         </div>
@@ -84,7 +93,7 @@ export function FooterSection() {
       {/* Copyright bar */}
       <div className="border-t border-border/60 py-5 flex flex-col sm:flex-row items-center justify-between gap-2">
         <p className="text-foreground/30 text-xs font-normal">
-          &copy; 2025 Corgi. Built on Bluesky.
+          &copy; 2026 Corgi. Built on Bluesky.
         </p>
         <p className="text-foreground/20 text-xs font-normal">
           Open source &middot; No black box
diff --git a/web-next/components/get-started-section.tsx b/web-next/components/get-started-section.tsx
index f15f329d..737a0420 100644
--- a/web-next/components/get-started-section.tsx
+++ b/web-next/components/get-started-section.tsx
@@ -1,59 +1,63 @@
-import Link from "next/link"
-import { Button } from "@/components/ui/button"
+import { DemoCTA, SignInCTA } from "@/components/landing-ctas"
 
 const steps = [
   {
     number: "01",
-    heading: "Connect your Bluesky account",
-    body: "Generate an app-password in your Bluesky settings and paste it into Corgi. Your main password is never touched.",
+    heading: "Explore the reviewer demo",
+    body: "Start with the read-only demo: live snapshot totals, anonymized receipt rows, and the ranking explanation without signing in.",
   },
   {
     number: "02",
-    heading: "Join or start a community feed",
-    body: "Find an existing Corgi feed for your community, or create a new one. Invite members with a single link.",
+    heading: "Inspect how ranking works",
+    body: "Follow the weight, score, epoch, and receipt views before trusting the feed. The public path is built for review first.",
   },
   {
     number: "03",
-    heading: "Cast your first vote",
-    body: "Vote on how the current weights should change. Every vote counts equally. The feed reranks at the end of the epoch.",
+    heading: "Sign in when ready",
+    body: "Use a Bluesky app password only when you want to participate. Your main password stays outside Corgi.",
   },
 ]
 
 export function GetStartedSection() {
   return (
-    <section className="w-full px-5 py-14 md:py-20 flex flex-col items-center gap-10">
-      <div className="flex flex-col items-center gap-3 max-w-xl text-center">
-        <h2 className="text-foreground font-display text-3xl md:text-4xl font-bold leading-tight tracking-tight text-balance">
-          Up and running in minutes
-        </h2>
-        <p className="text-foreground/50 text-base font-normal leading-relaxed">
-          No code required. No waiting list. Just a Bluesky account.
-        </p>
+    <section className="w-full border-t border-border/60 px-5 md:px-8 lg:px-12">
+      <div className="flex flex-col md:flex-row md:items-start gap-6 md:gap-16 py-10 md:py-14">
+        <div className="md:w-[40%] flex-shrink-0">
+          <h2 className="text-foreground font-display text-2xl md:text-3xl lg:text-[2rem] font-bold leading-tight tracking-tight text-balance">
+            Start with the read-only demo.
+          </h2>
+        </div>
+        <div className="md:flex-1 md:pt-1">
+          <p className="text-foreground/55 text-base leading-relaxed">
+            Inspect the live snapshot and receipt trail first. Account connection stays available for participation, but the reviewer path does not depend on it.
+          </p>
+        </div>
       </div>
 
-      <div className="w-full max-w-4xl relative">
-        {/* Connector line spanning all three cards on desktop */}
-        <div className="hidden md:block absolute top-[2.15rem] left-[calc(16.666%+1.5rem)] right-[calc(16.666%+1.5rem)] h-px border-t border-dashed border-border z-0" />
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 relative z-10">
-          {steps.map((step) => (
-            <div key={step.number} className="flex flex-col gap-4 rounded-2xl border border-border bg-[hsl(34,60%,97%)] p-6 shadow-[0_2px_12px_rgba(46,38,32,0.05)]">
-              <div className="w-9 h-9 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center flex-shrink-0">
-                <span className="font-mono text-primary text-xs font-bold">{step.number}</span>
-              </div>
-              <div className="flex flex-col gap-1.5">
-                <p className="text-foreground font-semibold text-base leading-snug">{step.heading}</p>
-                <p className="text-foreground/55 text-sm font-normal leading-relaxed">{step.body}</p>
-              </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 pb-12 md:pb-16 gap-0 border-t border-border/50">
+        {steps.map((step, i) => (
+          <div
+            key={step.number}
+            className={`flex flex-col gap-4 py-8 md:py-10 ${
+              i < steps.length - 1
+                ? "border-b md:border-b-0 md:border-r border-border/50"
+                : ""
+            } ${i > 0 ? "md:pl-10" : ""} ${i < steps.length - 1 ? "md:pr-10" : ""}`}
+          >
+            <span className="font-mono text-primary/70 text-xs font-bold tracking-widest">{step.number}</span>
+            <div className="flex flex-col gap-2">
+              <p className="text-foreground font-semibold text-base leading-snug">{step.heading}</p>
+              <p className="text-foreground/50 text-sm font-normal leading-relaxed">{step.body}</p>
             </div>
-          ))}
-        </div>
+          </div>
+        ))}
       </div>
 
-      <Link href="#">
-        <Button className="bg-primary text-primary-foreground hover:bg-primary-dark px-7 py-3 rounded-full font-medium text-base shadow-[0_2px_8px_rgba(200,97,44,0.35),0_1px_2px_rgba(200,97,44,0.2)] hover:shadow-[0_4px_16px_rgba(200,97,44,0.4)] transition-all duration-200">
-          Connect your Bluesky account
-        </Button>
-      </Link>
+      <div className="pb-14 md:pb-16 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
+        <DemoCTA />
+        <SignInCTA />
+        <p className="text-foreground/35 text-sm">No account needed for the reviewer demo.</p>
+      </div>
     </section>
   )
 }
diff --git a/web-next/components/hero-section.tsx b/web-next/components/hero-section.tsx
index 28eb602d..a81a7931 100644
--- a/web-next/components/hero-section.tsx
+++ b/web-next/components/hero-section.tsx
@@ -2,38 +2,39 @@ import React from "react"
 import { Button } from "@/components/ui/button"
 import Link from "next/link"
 import { LIVE_METRICS_SNAPSHOT } from "@/lib/live-metrics-snapshot"
+import { DemoCTA } from "@/components/landing-ctas"
 
 export function HeroSection() {
   return (
     <section
-      className="flex flex-col items-center text-center relative mx-auto rounded-2xl overflow-hidden my-4 md:my-6 pt-14 pb-32 md:pt-16 md:pb-44 lg:pt-20 lg:pb-52 px-4 md:px-6
-         w-full max-w-[1220px]"
+      className="flex flex-col items-center text-center relative mx-auto overflow-hidden pt-14 pb-32 md:pt-16 md:pb-44 lg:pt-20 lg:pb-52 px-4 md:px-6
+         w-full"
     >
       {/* SVG Background — warm cream grid */}
       <div className="absolute inset-0 z-0">
         <svg
           width="100%"
           height="100%"
-          viewBox="0 0 1220 810"
+          viewBox="0 0 1440 810"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           preserveAspectRatio="xMidYMid slice"
         >
-          <rect width="1220" height="810" rx="16" fill="hsl(var(--background))" />
+          <rect width="1440" height="810" fill="hsl(var(--background))" />
           <g clipPath="url(#clip0_hero)">
             <mask
               id="mask0_hero"
               style={{ maskType: "alpha" }}
               maskUnits="userSpaceOnUse"
-              x="10"
+              x="0"
               y="-1"
-              width="1200"
+              width="1440"
               height="812"
             >
-              <rect x="10" y="-0.84668" width="1200" height="811.693" fill="url(#paint0_linear_hero)" />
+              <rect x="0" y="-0.84668" width="1440" height="811.693" fill="url(#paint0_linear_hero)" />
             </mask>
             <g mask="url(#mask0_hero)">
-              {[...Array(35)].map((_, i) => (
+              {[...Array(42)].map((_, i) => (
                 <React.Fragment key={`row1-${i}`}>
                   {[9, 45, 81, 117, 153, 189, 225, 261, 297, 333, 369, 405, 441, 477, 513, 549, 585, 621, 657, 693, 729, 765].map((y) => (
                     <rect
@@ -86,11 +87,10 @@ export function HeroSection() {
           <rect
             x="0.5"
             y="0.5"
-            width="1219"
+            width="1439"
             height="809"
-            rx="15.5"
             stroke="hsl(var(--border))"
-            strokeOpacity="0.6"
+            strokeOpacity="0.3"
           />
 
           <defs>
@@ -108,7 +108,7 @@ export function HeroSection() {
               id="paint0_linear_hero"
               x1="35"
               y1="23"
-              x2="903"
+              x2="1390"
               y2="632"
               gradientUnits="userSpaceOnUse"
             >
@@ -116,7 +116,7 @@ export function HeroSection() {
               <stop offset="1" stopColor="hsl(var(--foreground))" stopOpacity="0.5" />
             </linearGradient>
             <clipPath id="clip0_hero">
-              <rect width="1220" height="810" rx="16" fill="white" />
+              <rect width="1440" height="810" fill="white" />
             </clipPath>
           </defs>
         </svg>
@@ -124,7 +124,7 @@ export function HeroSection() {
 
       {/* Eyebrow — GitHub star badge */}
       <a
-        href="https://github.com/corgi-feed/corgi"
+        href="https://github.com/andrewnordstrom-eng/bluesky-community-feed"
         target="_blank"
         rel="noopener noreferrer"
         className="relative z-10 mb-6 md:mb-7 inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-border bg-card/80 hover:bg-card transition-colors text-xs font-medium text-foreground/70 hover:text-foreground shadow-sm"
@@ -137,7 +137,7 @@ export function HeroSection() {
         <svg width="12" height="12" viewBox="0 0 16 16" fill="hsl(var(--primary))" aria-hidden="true">
           <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
         </svg>
-        <span className="font-mono text-foreground/60">Star us</span>
+        <span className="font-mono text-foreground/60">View code</span>
       </a>
 
       {/* Hero copy */}
@@ -153,11 +153,7 @@ export function HeroSection() {
 
       {/* CTAs */}
       <div className="relative z-10 flex flex-col sm:flex-row items-center gap-3">
-        <Link href="#">
-          <Button className="bg-primary text-primary-foreground hover:bg-primary-dark px-7 py-3 rounded-full font-medium text-base shadow-[0_2px_8px_rgba(200,97,44,0.35),0_1px_2px_rgba(200,97,44,0.2)] hover:shadow-[0_4px_16px_rgba(200,97,44,0.4),0_1px_2px_rgba(200,97,44,0.2)] transition-all duration-200">
-            Connect your Bluesky account
-          </Button>
-        </Link>
+        <DemoCTA />
         <Link href="#features-section">
           <Button variant="ghost" className="text-foreground/70 hover:text-foreground px-5 py-3 rounded-full font-medium text-base">
             See how ranking works &rarr;
@@ -166,7 +162,7 @@ export function HeroSection() {
       </div>
       {/* Trust line */}
       <p className="relative z-10 mt-3 text-xs text-foreground/40 font-medium">
-        Free &middot; App-password secure &middot; Leave anytime
+        Read-only demo first &middot; account connection stays optional
       </p>
       <p className="relative z-10 mt-2 text-xs text-foreground/40 font-medium">
         Live snapshot, {LIVE_METRICS_SNAPSHOT.collectedAtLabel}: {LIVE_METRICS_SNAPSHOT.scoredPosts.toLocaleString("en-US")} scored posts &middot; {LIVE_METRICS_SNAPSHOT.uniqueAuthors.toLocaleString("en-US")} authors &middot; epoch {LIVE_METRICS_SNAPSHOT.epochId} active
diff --git a/web-next/components/landing-ctas.tsx b/web-next/components/landing-ctas.tsx
new file mode 100644
index 00000000..4a420f22
--- /dev/null
+++ b/web-next/components/landing-ctas.tsx
@@ -0,0 +1,40 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+interface LandingCTAProps {
+  className?: string
+}
+
+export function DemoCTA({ className }: LandingCTAProps) {
+  return (
+    <Button
+      asChild
+      className={cn(
+        "bg-primary text-primary-foreground hover:bg-primary-dark px-7 py-3 rounded-full font-medium text-base shadow-[0_2px_8px_rgba(200,97,44,0.35),0_1px_2px_rgba(200,97,44,0.2)] hover:shadow-[0_4px_16px_rgba(200,97,44,0.4)] transition-all duration-200",
+        className,
+      )}
+    >
+      <Link href="/demo">
+        Explore the live demo
+      </Link>
+    </Button>
+  )
+}
+
+export function SignInCTA({ className }: LandingCTAProps) {
+  return (
+    <Button
+      asChild
+      variant="ghost"
+      className={cn(
+        "text-foreground/60 hover:text-foreground px-5 py-3 rounded-full font-medium text-base",
+        className,
+      )}
+    >
+      <Link href="/sign-in">
+        Sign in when ready
+      </Link>
+    </Button>
+  )
+}
diff --git a/web-next/components/sign-in-dialog.tsx b/web-next/components/sign-in-dialog.tsx
index a1e95aea..9fd63ae9 100644
--- a/web-next/components/sign-in-dialog.tsx
+++ b/web-next/components/sign-in-dialog.tsx
@@ -2,7 +2,8 @@
 
 import { useEffect, useRef, useState } from "react"
 import Image from "next/image"
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
+import Link from "next/link"
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -76,9 +77,9 @@ export function SignInDialog({ open, onOpenChange }: SignInDialogProps) {
             <DialogTitle className="text-foreground font-display text-2xl font-bold tracking-tight leading-tight">
               Sign in to vote
             </DialogTitle>
-            <p className="text-foreground/55 text-sm leading-relaxed max-w-[300px]">
+            <DialogDescription className="text-foreground/55 text-sm leading-relaxed max-w-[300px]">
               Connect your Bluesky account to participate in feed governance. You&apos;ll need an app password from your Bluesky settings.
-            </p>
+            </DialogDescription>
           </div>
         </div>
 
@@ -154,13 +155,13 @@ export function SignInDialog({ open, onOpenChange }: SignInDialogProps) {
 
           <p className="text-center text-foreground/40 text-xs leading-relaxed">
             By signing in, you agree to our{" "}
-            <a href="#" className="text-foreground/60 underline underline-offset-2 hover:text-foreground transition-colors">
+            <Link href="/tos" className="text-foreground/60 underline underline-offset-2 hover:text-foreground transition-colors">
               Terms of Service
-            </a>{" "}
+            </Link>{" "}
             and{" "}
-            <a href="#" className="text-foreground/60 underline underline-offset-2 hover:text-foreground transition-colors">
+            <Link href="/privacy" className="text-foreground/60 underline underline-offset-2 hover:text-foreground transition-colors">
               Privacy Policy
-            </a>
+            </Link>
             .
           </p>
         </form>
diff --git a/web-next/components/social-proof.tsx b/web-next/components/social-proof.tsx
index 3f83dfcc..bc935938 100644
--- a/web-next/components/social-proof.tsx
+++ b/web-next/components/social-proof.tsx
@@ -10,10 +10,10 @@ const pillars = [
         <path d="M9 18c-4.51 2-5-2-7-2" />
       </svg>
     ),
-    heading: "MIT licensed",
-    body: "Read every line. Fork it. Self-host it. The code is yours.",
-    href: "https://github.com/corgi-feed/corgi",
-    linkLabel: "View on GitHub",
+    heading: "Open source",
+    body: "Read the implementation behind the feed, governance routes, and receipt surfaces.",
+    href: "https://github.com/andrewnordstrom-eng/bluesky-community-feed",
+    linkLabel: "View source",
   },
   {
     icon: (
@@ -22,10 +22,10 @@ const pillars = [
         <path d="M8 21h8M12 17v4" />
       </svg>
     ),
-    heading: "Self-hostable",
-    body: "Run Corgi on your own infrastructure. No dependency on our servers.",
-    href: "https://github.com/corgi-feed/corgi#self-hosting",
-    linkLabel: "Hosting docs",
+    heading: "Reviewer-safe",
+    body: "Inspect the public demo without connecting an account or exposing raw production identifiers.",
+    href: "/demo",
+    linkLabel: "Open demo",
   },
   {
     icon: (
@@ -35,10 +35,10 @@ const pillars = [
         <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
       </svg>
     ),
-    heading: "Community-built",
-    body: "PRs welcome. If something bothers you about the algorithm, you can fix it.",
-    href: "https://github.com/corgi-feed/corgi/contribute",
-    linkLabel: "Contribute",
+    heading: "Receipt-first",
+    body: "Public copy stays tied to anonymized score receipts, live snapshot totals, and auditable epochs.",
+    href: "#features-section",
+    linkLabel: "See receipts",
   },
 ]
 
@@ -60,14 +60,23 @@ export function SocialProof() {
               <p className="text-foreground font-semibold text-sm leading-snug">{p.heading}</p>
               <p className="text-foreground/50 text-sm font-normal leading-relaxed">{p.body}</p>
             </div>
-            <Link
-              href={p.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary text-xs font-medium hover:underline underline-offset-2 w-fit"
-            >
-              {p.linkLabel} &rarr;
-            </Link>
+            {p.href.startsWith("https://") ? (
+              <a
+                href={p.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary text-xs font-medium hover:underline underline-offset-2 w-fit"
+              >
+                {p.linkLabel} &rarr;
+              </a>
+            ) : (
+              <Link
+                href={p.href}
+                className="text-primary text-xs font-medium hover:underline underline-offset-2 w-fit"
+              >
+                {p.linkLabel} &rarr;
+              </Link>
+            )}
           </div>
         ))}
       </div>
diff --git a/web-next/lib/percent.ts b/web-next/lib/percent.ts
new file mode 100644
index 00000000..ea64e496
--- /dev/null
+++ b/web-next/lib/percent.ts
@@ -0,0 +1,27 @@
+export function clampPercentValue(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  return Math.min(100, Math.max(0, Math.round(value)))
+}
+
+export function unitIntervalToPercentValue(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  return clampPercentValue(value * 100)
+}
+
+export function absoluteUnitScoreToPercentValue(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  return unitIntervalToPercentValue(Math.abs(value))
+}
+
+export function formatUnitIntervalPercent(value: number): string {
+  return `${unitIntervalToPercentValue(value)}%`
+}
diff --git a/web-next/lib/score.ts b/web-next/lib/score.ts
new file mode 100644
index 00000000..e98e2a6a
--- /dev/null
+++ b/web-next/lib/score.ts
@@ -0,0 +1,18 @@
+export function normalizeScoreValue(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  return value
+}
+
+export function formatSignedScore(value: number): string {
+  const normalizedValue = normalizeScoreValue(value)
+  const sign = normalizedValue >= 0 ? "+" : "-"
+
+  return `${sign}${Math.abs(normalizedValue).toFixed(2)}`
+}
+
+export function isNonNegativeScore(value: number): boolean {
+  return normalizeScoreValue(value) >= 0
+}