diff --git a/src/components/SectionSpyNav/SectionSpyNav.stories.tsx b/src/components/SectionSpyNav/SectionSpyNav.stories.tsx
new file mode 100644
index 00000000..a2e4430f
--- /dev/null
+++ b/src/components/SectionSpyNav/SectionSpyNav.stories.tsx
@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SectionSpyNav, type SectionSpyItem } from './SectionSpyNav';
+
+const meta: Meta<typeof SectionSpyNav> = {
+  title: 'Components/Navigation/SectionSpyNav',
+  component: SectionSpyNav,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          "Sticky horizontal in-page wayfinding: anchor links to a page's major sections, a " +
+          'sliding underline tracking the section in view (via `useScrollSpy`), and an ' +
+          'optional page-specific CTA whose `tier` sets its visual weight. The horizontal ' +
+          'complement to `TableOfContents`. Section elements need matching `id`s.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      description: 'Sections to link to, in page order.',
+      control: false,
+    },
+    cta: {
+      description:
+        'Optional next-step CTA (`tier`: explore | evaluate | commit).',
+      control: false,
+    },
+    label: { description: 'Eyebrow before the links.', control: 'text' },
+    tone: {
+      description: 'Visual tone of the band.',
+      control: 'select',
+      options: ['surface', 'brand'],
+    },
+    rootMargin: {
+      description: 'IntersectionObserver root margin tuning.',
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ITEMS: SectionSpyItem[] = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'capabilities', label: 'Capabilities' },
+  { id: 'compliance', label: 'Compliance' },
+  { id: 'integrations', label: 'Integrations' },
+  { id: 'pricing', label: 'Pricing' },
+];
+
+function DemoSections() {
+  return (
+    <main className="flex flex-col">
+      {ITEMS.map((it, i) => (
+        <section
+          key={it.id}
+          id={it.id}
+          className={
+            'flex min-h-[70vh] flex-col justify-center gap-2 px-8 ' +
+            (i % 2 ? 'bg-muted/40' : 'bg-background')
+          }
+        >
+          <h2 className="text-foreground text-2xl font-bold">{it.label}</h2>
+          <p className="text-muted-foreground max-w-lg text-sm">
+            Scroll to see the underline slide to the section in view. This
+            section stands in for the page&apos;s {it.label.toLowerCase()}{' '}
+            content.
+          </p>
+        </section>
+      ))}
+    </main>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    items: ITEMS,
+    cta: { label: 'Book a demo', href: '#pricing', tier: 'evaluate' },
+  },
+  render: (args) => (
+    <div>
+      <SectionSpyNav {...args} />
+      <DemoSections />
+    </div>
+  ),
+};
+
+export const BrandTone: Story = {
+  args: {
+    items: ITEMS,
+    tone: 'brand',
+    cta: { label: 'Get started', href: '/signup', tier: 'commit' },
+  },
+  render: (args) => (
+    <div>
+      <SectionSpyNav {...args} />
+      <DemoSections />
+    </div>
+  ),
+};
+
+export const WithoutCta: Story = {
+  args: { items: ITEMS },
+  render: (args) => (
+    <div>
+      <SectionSpyNav {...args} />
+      <DemoSections />
+    </div>
+  ),
+};
diff --git a/src/components/SectionSpyNav/SectionSpyNav.test.tsx b/src/components/SectionSpyNav/SectionSpyNav.test.tsx
new file mode 100644
index 00000000..d366860e
--- /dev/null
+++ b/src/components/SectionSpyNav/SectionSpyNav.test.tsx
@@ -0,0 +1,98 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithTheme } from '../../test/test-utils';
+import { SectionSpyNav, type SectionSpyItem } from './SectionSpyNav';
+
+const ITEMS: SectionSpyItem[] = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'pricing', label: 'Pricing' },
+];
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+beforeEach(() => {
+  // jsdom has no IntersectionObserver; the spy falls back to the first item
+  vi.stubGlobal(
+    'IntersectionObserver',
+    vi.fn(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
+      takeRecords: vi.fn(() => []),
+    }))
+  );
+  for (const it of ITEMS) {
+    if (!document.getElementById(it.id)) {
+      const el = document.createElement('section');
+      el.id = it.id;
+      document.body.appendChild(el);
+    }
+  }
+});
+
+describe('SectionSpyNav', () => {
+  it('renders anchor links for every section', () => {
+    renderWithTheme(<SectionSpyNav items={ITEMS} />);
+    expect(screen.getByRole('link', { name: 'Overview' })).toHaveAttribute(
+      'href',
+      '#overview'
+    );
+    expect(screen.getByRole('link', { name: 'Pricing' })).toHaveAttribute(
+      'href',
+      '#pricing'
+    );
+  });
+
+  it('marks the first section active before the spy runs', () => {
+    renderWithTheme(<SectionSpyNav items={ITEMS} />);
+    expect(screen.getByRole('link', { name: 'Overview' })).toHaveAttribute(
+      'aria-current',
+      'true'
+    );
+    expect(screen.getByRole('link', { name: 'Pricing' })).not.toHaveAttribute(
+      'aria-current'
+    );
+  });
+
+  it('uses the label as the accessible nav name', () => {
+    renderWithTheme(<SectionSpyNav items={ITEMS} label="Jump to" />);
+    expect(
+      screen.getByRole('navigation', { name: 'Jump to' })
+    ).toBeInTheDocument();
+  });
+
+  it('reports link clicks', () => {
+    const onItemClick = vi.fn();
+    renderWithTheme(<SectionSpyNav items={ITEMS} onItemClick={onItemClick} />);
+    fireEvent.click(screen.getByRole('link', { name: 'Pricing' }));
+    expect(onItemClick).toHaveBeenCalledWith('pricing');
+  });
+
+  it('renders the CTA and reports clicks', () => {
+    const onCtaClick = vi.fn();
+    const cta = {
+      label: 'Book a demo',
+      href: '/demo',
+      tier: 'commit' as const,
+    };
+    renderWithTheme(
+      <SectionSpyNav items={ITEMS} cta={cta} onCtaClick={onCtaClick} />
+    );
+    const link = screen.getByRole('link', { name: /book a demo/i });
+    expect(link).toHaveAttribute('href', '/demo');
+    fireEvent.click(link);
+    expect(onCtaClick).toHaveBeenCalledWith(cta);
+  });
+
+  it('omits the CTA when not provided', () => {
+    renderWithTheme(<SectionSpyNav items={ITEMS} />);
+    expect(screen.getAllByRole('link')).toHaveLength(ITEMS.length);
+  });
+
+  it('applies the brand tone', () => {
+    renderWithTheme(<SectionSpyNav items={ITEMS} tone="brand" />);
+    expect(screen.getByRole('navigation')).toHaveClass('bg-primary-900');
+  });
+});
diff --git a/src/components/SectionSpyNav/SectionSpyNav.tsx b/src/components/SectionSpyNav/SectionSpyNav.tsx
new file mode 100644
index 00000000..20040ca8
--- /dev/null
+++ b/src/components/SectionSpyNav/SectionSpyNav.tsx
@@ -0,0 +1,231 @@
+'use client';
+
+import * as React from 'react';
+import { ArrowDown, ArrowRight, ArrowUpRight } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import { useScrollSpy } from '../../hooks/useScrollSpy';
+import { buttonVariants } from '../Button';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/** One section the nav links to. The id must match a `section[id]` on the page. */
+export interface SectionSpyItem {
+  id: string;
+  label: string;
+}
+
+/**
+ * Funnel intent for the bar's single contextual CTA — drives its visual
+ * weight so the in-page strip never out-shouts a page's primary CTA:
+ * `explore` (quiet next step) → `evaluate` (sales-ready ask) → `commit`
+ * (high-intent action).
+ */
+export type SectionSpyCtaTier = 'explore' | 'evaluate' | 'commit';
+
+export interface SectionSpyCta {
+  label: string;
+  href: string;
+  tier?: SectionSpyCtaTier;
+}
+
+export interface SectionSpyNavProps {
+  /** Sections to link to, in page order. */
+  items: SectionSpyItem[];
+  /** Optional single page-specific next-step CTA at the end of the bar. */
+  cta?: SectionSpyCta;
+  /** Eyebrow before the links (default "On this page"). */
+  label?: string;
+  /**
+   * Visual tone: `surface` sits on the page background; `brand` renders the
+   * inverted primary band.
+   */
+  tone?: 'surface' | 'brand';
+  /** IntersectionObserver root margin tuning for the scroll spy. */
+  rootMargin?: string;
+  /** Called with the section id when a nav link is clicked. */
+  onItemClick?: (id: string) => void;
+  /** Called when the CTA is clicked (e.g. for analytics). */
+  onCtaClick?: (cta: SectionSpyCta) => void;
+  className?: string;
+}
+
+// =============================================================================
+// Internals
+// =============================================================================
+
+/** Directional glyph inferred from the destination. */
+function CtaArrow({ href }: { href: string }) {
+  const Icon = href.startsWith('#')
+    ? ArrowDown
+    : href.startsWith('/')
+      ? ArrowRight
+      : ArrowUpRight;
+  return <Icon aria-hidden="true" className="h-3.5 w-3.5" />;
+}
+
+const CTA_TIER_VARIANT = {
+  explore: 'ghost',
+  evaluate: 'outline',
+  commit: 'primary',
+} as const;
+
+// =============================================================================
+// SectionSpyNav
+// =============================================================================
+
+/**
+ * Sticky horizontal in-page wayfinding: jumps between a page's major
+ * sections, highlights the one in view with a sliding underline, and can
+ * carry a single page-specific next-step CTA. Pure anchor links, so it
+ * still works if the scroll spy never runs.
+ *
+ * The horizontal complement to `TableOfContents` — use that for a sidebar
+ * outline, this for a band under the page header. Section elements need
+ * matching `id`s.
+ *
+ * @example
+ * ```tsx
+ * <SectionSpyNav
+ *   items={[
+ *     { id: 'overview', label: 'Overview' },
+ *     { id: 'pricing', label: 'Pricing' },
+ *   ]}
+ *   cta={{ label: 'Book a demo', href: '/demo', tier: 'evaluate' }}
+ * />
+ * ```
+ */
+export function SectionSpyNav({
+  items,
+  cta,
+  label = 'On this page',
+  tone = 'surface',
+  rootMargin = '-22% 0px -68% 0px',
+  onItemClick,
+  onCtaClick,
+  className,
+}: SectionSpyNavProps) {
+  const ids = React.useMemo(() => items.map((it) => it.id), [items]);
+  const { activeId } = useScrollSpy({ ids, rootMargin });
+  const active = activeId ?? items[0]?.id ?? '';
+
+  const railRef = React.useRef<HTMLDivElement>(null);
+  const markRef = React.useRef<HTMLSpanElement>(null);
+
+  // Find the active link by dataset rather than a CSS selector, so ids
+  // never need escaping and CSS.escape availability doesn't matter.
+  const findActiveLink = React.useCallback((): HTMLAnchorElement | null => {
+    const links = railRef.current?.querySelectorAll<HTMLAnchorElement>('a');
+    if (!links) return null;
+    for (const link of links) {
+      if (link.dataset.id === active) return link;
+    }
+    return null;
+  }, [active]);
+
+  // Slide the underline beneath the active link. offsetLeft/offsetWidth are
+  // physical and measured against the rail, so the marker tracks the link
+  // in both directions and while the rail is scrolled horizontally.
+  const syncMarker = React.useCallback(() => {
+    const link = findActiveLink();
+    const mark = markRef.current;
+    if (!link || !mark) return;
+    mark.style.left = `${link.offsetLeft}px`;
+    mark.style.width = `${link.offsetWidth}px`;
+  }, [findActiveLink]);
+
+  React.useEffect(() => {
+    const link = findActiveLink();
+    link?.scrollIntoView?.({ inline: 'center', block: 'nearest' });
+    syncMarker();
+  }, [findActiveLink, syncMarker]);
+
+  React.useEffect(() => {
+    window.addEventListener('resize', syncMarker);
+    return () => window.removeEventListener('resize', syncMarker);
+  }, [syncMarker]);
+
+  const brand = tone === 'brand';
+
+  return (
+    <nav
+      className={cn(
+        'sticky top-0 z-30 w-full',
+        brand
+          ? 'bg-primary-900 text-white'
+          : 'border-border bg-card/95 border-b backdrop-blur',
+        className
+      )}
+      aria-label={label}
+    >
+      <div className="flex items-center gap-4 px-4 py-0.5">
+        <span
+          className={cn(
+            'shrink-0 text-[11px] font-semibold tracking-wide uppercase max-md:hidden',
+            brand ? 'text-white/60' : 'text-muted-foreground'
+          )}
+          aria-hidden="true"
+        >
+          {label}
+        </span>
+        <div
+          ref={railRef}
+          className="relative flex min-w-0 flex-1 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        >
+          {items.map((it) => {
+            const isActive = active === it.id;
+            return (
+              <a
+                key={it.id}
+                href={`#${it.id}`}
+                data-id={it.id}
+                onClick={() => onItemClick?.(it.id)}
+                className={cn(
+                  'shrink-0 rounded px-2.5 py-2 text-sm whitespace-nowrap transition-colors',
+                  brand
+                    ? isActive
+                      ? 'font-semibold text-white'
+                      : 'text-white/70 hover:text-white'
+                    : isActive
+                      ? 'text-foreground font-semibold'
+                      : 'text-muted-foreground hover:text-foreground'
+                )}
+                aria-current={isActive ? 'true' : undefined}
+              >
+                {it.label}
+              </a>
+            );
+          })}
+          <span
+            ref={markRef}
+            className={cn(
+              'absolute bottom-0 h-0.5 rounded-full transition-[left,width] duration-300',
+              brand ? 'bg-primary-400' : 'bg-primary-500'
+            )}
+            aria-hidden="true"
+          />
+        </div>
+        {cta && (
+          <a
+            href={cta.href}
+            onClick={() => onCtaClick?.(cta)}
+            className={cn(
+              buttonVariants({
+                variant: CTA_TIER_VARIANT[cta.tier ?? 'explore'],
+                size: 'sm',
+              }),
+              'shrink-0',
+              brand &&
+                (cta.tier ?? 'explore') !== 'commit' &&
+                'text-white hover:bg-white/10 hover:text-white'
+            )}
+          >
+            {cta.label}
+            <CtaArrow href={cta.href} />
+          </a>
+        )}
+      </div>
+    </nav>
+  );
+}
diff --git a/src/components/SectionSpyNav/index.ts b/src/components/SectionSpyNav/index.ts
new file mode 100644
index 00000000..fa460bc2
--- /dev/null
+++ b/src/components/SectionSpyNav/index.ts
@@ -0,0 +1,7 @@
+export {
+  SectionSpyNav,
+  type SectionSpyNavProps,
+  type SectionSpyItem,
+  type SectionSpyCta,
+  type SectionSpyCtaTier,
+} from './SectionSpyNav';
diff --git a/src/index.ts b/src/index.ts
index a45ee23f..8824bc43 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -154,6 +154,7 @@ export * from './components/ServicePricingManager';
 export * from './components/ServiceShippingSettings';
 export * from './components/Separator';
 export * from './components/Sheet';
+export * from './components/SectionSpyNav';
 // SetupServiceModal exports ServiceCategory which conflicts with ServiceAccordion
 export {
   SetupServiceModal,
diff --git a/tsup.config.ts b/tsup.config.ts
index d4e1d637..34e7835c 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -45,6 +45,7 @@ export default defineConfig({
     'components/RichTextEditor/index': 'src/components/RichTextEditor/index.ts',
     'components/SchedulePicker/index': 'src/components/SchedulePicker/index.ts',
     'components/ScrollArea/index': 'src/components/ScrollArea/index.ts',
+    'components/SectionSpyNav/index': 'src/components/SectionSpyNav/index.ts',
     'components/Select/index': 'src/components/Select/index.ts',
     'components/Separator/index': 'src/components/Separator/index.ts',
     'components/Sheet/index': 'src/components/Sheet/index.ts',