diff --git a/src/App.tsx b/src/App.tsx
index 4a3f487..1e52d96 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,6 +22,7 @@ import ThemePlayground from "./pages/ThemePlayground";
 import DesignSystemDocs from "./pages/DesignSystemDocs";
 import A11yAudit from "./pages/A11yAudit";
 import RateLimitCard from "./pages/RateLimitCard";
+import OnboardingTour from "./pages/OnboardingTour";
 import { ShortcutsModal } from "./components/ShortcutsModal";
 import { ToastProvider } from "./components/Toast";
 import { InvoiceCard } from "./pages/InvoiceCard";
@@ -123,6 +124,7 @@ const APP_ROUTES = {
   designSystem: "/design-system/docs",
   serverError: "/500",
   rateLimitCard: "/rate-limit",
+  onboardingTour: "/onboarding-tour",
 } as const;
 
 function createMockHash() {
@@ -685,6 +687,11 @@ function App() {
 
             <Route path={APP_ROUTES.rateLimitCard} element={<RateLimitCard />} />
 
+            <Route
+              path={APP_ROUTES.onboardingTour}
+              element={<OnboardingTour onComplete={() => navigate(APP_ROUTES.dashboard)} />}
+            />
+
             <Route path="*" element={<NotFound onGoHome={() => navigate(APP_ROUTES.dashboard)} />} />
           </Routes>
         </main>
diff --git a/src/pages/OnboardingTour.test.tsx b/src/pages/OnboardingTour.test.tsx
new file mode 100644
index 0000000..8876df1
--- /dev/null
+++ b/src/pages/OnboardingTour.test.tsx
@@ -0,0 +1,517 @@
+/**
+ * OnboardingTour.test.tsx
+ *
+ * Focused keyboard-accessibility tests for the OnboardingTour component.
+ *
+ * Coverage areas
+ * ──────────────
+ * 1. Rendering & initial focus
+ *    - skip link renders and is the first focusable element
+ *    - step panel renders with correct ARIA attributes
+ *    - stepper tabs render with correct WAI-ARIA roles
+ *
+ * 2. Keyboard navigation — step panel
+ *    - "Next" button advances to the next step
+ *    - "Back" button returns to the previous step
+ *    - "Back" is hidden (visibility:hidden) on the first step
+ *    - "Finish" button on the last step transitions to the complete screen
+ *
+ * 3. Keyboard navigation — stepper tabs (WAI-ARIA tabs pattern)
+ *    - Arrow-right advances the active tab
+ *    - Arrow-left retreats the active tab
+ *    - Home jumps to the first tab
+ *    - End jumps to the last tab
+ *    - Clicking a tab directly jumps to that step
+ *
+ * 4. Skip link
+ *    - Clicking "Skip tour" calls onComplete
+ *
+ * 5. Completion screen
+ *    - "Finish" on the last step shows the completion screen
+ *    - "Go to Dashboard" calls onComplete
+ *    - "Restart tour" returns to step 1
+ *
+ * 6. Focus-visible CSS selectors (focus.css @layer contract)
+ *    - focus.css defines :focus-visible rules for every interactive class
+ *    - Rules are inside the @layer focus block
+ *    - Rules use the accent token and 3px offset
+ *    - No bare :focus selectors (only :focus-visible) in OnboardingTour.tsx
+ *
+ * 7. ARIA attributes
+ *    - tabpanel has aria-live="polite" for announcements
+ *    - tablist carries an aria-label containing step count
+ *    - Each tab has aria-controls pointing to the panel id
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import OnboardingTour from "./OnboardingTour";
+
+/* ── Helpers ─────────────────────────────────────────────────────────── */
+
+const readFile = (p: string) =>
+  readFileSync(resolve(process.cwd(), p), "utf8");
+
+function renderTour(onComplete = vi.fn()) {
+  return render(<OnboardingTour onComplete={onComplete} />);
+}
+
+/* ── 1. Rendering & initial state ────────────────────────────────────── */
+
+describe("OnboardingTour — rendering", () => {
+  it("renders the skip-tour link as the first focusable element", () => {
+    renderTour();
+    const skip = screen.getByRole("link", { name: /skip.*tour/i });
+    expect(skip).toBeInTheDocument();
+
+    // Verify it appears before the first tab button in the DOM
+    const firstTab = screen.getAllByRole("tab")[0];
+    expect(
+      skip.compareDocumentPosition(firstTab) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it("renders the correct number of stepper tabs", () => {
+    renderTour();
+    const tabs = screen.getAllByRole("tab");
+    // 5 steps defined in TOUR_STEPS
+    expect(tabs).toHaveLength(5);
+  });
+
+  it("marks only the first tab as selected initially", () => {
+    renderTour();
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+    tabs.slice(1).forEach((tab) => {
+      expect(tab).toHaveAttribute("aria-selected", "false");
+    });
+  });
+
+  it("renders the step panel with role=tabpanel", () => {
+    renderTour();
+    expect(screen.getByRole("tabpanel")).toBeInTheDocument();
+  });
+
+  it("renders the first step content by default", () => {
+    renderTour();
+    expect(screen.getByText(/welcome to callora/i)).toBeInTheDocument();
+  });
+
+  it("renders the progress bar (aria-hidden)", () => {
+    renderTour();
+    const bar = document.querySelector(".onboarding-tour__progress");
+    expect(bar).toBeInTheDocument();
+    expect(bar).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("does not render the completion screen initially", () => {
+    renderTour();
+    expect(
+      screen.queryByTestId("tour-complete"),
+    ).not.toBeInTheDocument();
+  });
+});
+
+/* ── 2. Step navigation with buttons ─────────────────────────────────── */
+
+describe("OnboardingTour — button navigation", () => {
+  it("advances to the next step when Next is clicked", async () => {
+    renderTour();
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: /go to step 2/i }));
+    // Second step is now active
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText(/get your api key/i)).toBeInTheDocument();
+  });
+
+  it("goes back to the previous step when Back is clicked", async () => {
+    renderTour();
+    const user = userEvent.setup();
+
+    // Advance to step 2 first
+    await user.click(screen.getByRole("button", { name: /go to step 2/i }));
+    // Now go back
+    await user.click(screen.getByRole("button", { name: /go to previous/i }));
+
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText(/welcome to callora/i)).toBeInTheDocument();
+  });
+
+  it("hides the Back button on the first step", () => {
+    renderTour();
+    // The Back button is visibility:hidden + disabled on step 1.
+    // getByRole excludes inaccessible / disabled elements, so we query
+    // directly on the DOM class name instead.
+    const back = document.querySelector(
+      ".tour-nav-button--ghost",
+    ) as HTMLElement;
+    expect(back).toBeInTheDocument();
+    expect(back).toHaveStyle({ visibility: "hidden" });
+  });
+
+  it("shows the Back button on any non-first step", async () => {
+    renderTour();
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: /go to step 2/i }));
+    // After advancing, the Back button is no longer disabled or hidden
+    const back = screen.getByRole("button", { name: /go to previous onboarding step/i });
+    expect(back).toHaveStyle({ visibility: "visible" });
+  });
+
+  it("shows Finish label on the last step", async () => {
+    renderTour();
+    const user = userEvent.setup();
+
+    // Click through all steps to reach the last one
+    for (let i = 0; i < 4; i++) {
+      const nextBtn = screen.getByRole("button", {
+        name: /go to step|go to step/i,
+      });
+      await user.click(nextBtn);
+    }
+
+    expect(
+      screen.getByRole("button", { name: /finish onboarding tour$/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows the completion screen when Finish is clicked on the last step", async () => {
+    renderTour();
+    const user = userEvent.setup();
+
+    // Navigate to the last step
+    for (let i = 0; i < 4; i++) {
+      const nextBtn = document.querySelector(".tour-nav-button--primary") as HTMLElement;
+      await user.click(nextBtn);
+    }
+
+    // Click Finish
+    const finishBtn = document.querySelector(".tour-nav-button--primary") as HTMLElement;
+    await user.click(finishBtn);
+
+    expect(screen.getByTestId("tour-complete")).toBeInTheDocument();
+    expect(screen.getByText(/you're all set/i)).toBeInTheDocument();
+  });
+});
+
+/* ── 3. Stepper tab keyboard navigation ──────────────────────────────── */
+
+describe("OnboardingTour — stepper tab keyboard navigation", () => {
+  it("moves to the next step on ArrowRight", () => {
+    renderTour();
+    const tabList = screen.getByRole("tablist");
+    // Focus the tablist then fire arrow right
+    fireEvent.keyDown(tabList, { key: "ArrowRight" });
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("moves to the previous step on ArrowLeft", () => {
+    renderTour();
+    // First advance to step 2
+    const tabList = screen.getByRole("tablist");
+    fireEvent.keyDown(tabList, { key: "ArrowRight" });
+    // Now go back
+    fireEvent.keyDown(tabList, { key: "ArrowLeft" });
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("does not go below step 0 on ArrowLeft at the first step", () => {
+    renderTour();
+    const tabList = screen.getByRole("tablist");
+    fireEvent.keyDown(tabList, { key: "ArrowLeft" });
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("jumps to the first step on Home key", () => {
+    renderTour();
+    const tabList = screen.getByRole("tablist");
+    // Advance to step 3 first
+    fireEvent.keyDown(tabList, { key: "ArrowRight" });
+    fireEvent.keyDown(tabList, { key: "ArrowRight" });
+    // Home should jump back to step 1
+    fireEvent.keyDown(tabList, { key: "Home" });
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("jumps to the last step on End key", () => {
+    renderTour();
+    const tabList = screen.getByRole("tablist");
+    fireEvent.keyDown(tabList, { key: "End" });
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[4]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("selects a step when a tab is clicked directly", async () => {
+    renderTour();
+    const user = userEvent.setup();
+    const tabs = screen.getAllByRole("tab");
+    await user.click(tabs[2]);
+    expect(tabs[2]).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText(/browse the marketplace/i)).toBeInTheDocument();
+  });
+
+  it("moves to the next step on ArrowDown", () => {
+    renderTour();
+    const tabList = screen.getByRole("tablist");
+    fireEvent.keyDown(tabList, { key: "ArrowDown" });
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("moves to the previous step on ArrowUp", () => {
+    renderTour();
+    const tabList = screen.getByRole("tablist");
+    fireEvent.keyDown(tabList, { key: "ArrowDown" });
+    fireEvent.keyDown(tabList, { key: "ArrowUp" });
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+  });
+});
+
+/* ── 4. Skip link ─────────────────────────────────────────────────────── */
+
+describe("OnboardingTour — skip link", () => {
+  it("calls onComplete when the skip link is clicked", async () => {
+    const onComplete = vi.fn();
+    renderTour(onComplete);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("link", { name: /skip.*tour/i }));
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it("prevents default navigation on the skip link click", async () => {
+    const onComplete = vi.fn();
+    renderTour(onComplete);
+    const skip = screen.getByRole("link", { name: /skip.*tour/i });
+
+    const clickEvent = new MouseEvent("click", { bubbles: true, cancelable: true });
+    skip.dispatchEvent(clickEvent);
+    // onComplete may or may not be called via dispatchEvent but default should
+    // be preventable — the real test is that the component handles it without error
+    expect(skip).toBeInTheDocument();
+  });
+});
+
+/* ── 5. Completion screen ─────────────────────────────────────────────── */
+
+describe("OnboardingTour — completion screen", () => {
+  async function reachCompletion() {
+    const onComplete = vi.fn();
+    const user = userEvent.setup();
+    renderTour(onComplete);
+
+    for (let i = 0; i < 4; i++) {
+      const primaryBtn = document.querySelector(
+        ".tour-nav-button--primary",
+      ) as HTMLElement;
+      await user.click(primaryBtn);
+    }
+    const finishBtn = document.querySelector(
+      ".tour-nav-button--primary",
+    ) as HTMLElement;
+    await user.click(finishBtn);
+
+    return { onComplete, user };
+  }
+
+  it("renders the completion screen after the final step", async () => {
+    await reachCompletion();
+    expect(screen.getByTestId("tour-complete")).toBeInTheDocument();
+  });
+
+  it("calls onComplete when 'Go to Dashboard' is clicked", async () => {
+    const { onComplete, user } = await reachCompletion();
+    await user.click(screen.getByRole("button", { name: /finish onboarding.*dashboard/i }));
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it("restarts the tour when 'Restart tour' is clicked", async () => {
+    const { user } = await reachCompletion();
+    await user.click(screen.getByRole("button", { name: /restart.*tour/i }));
+    // Completion screen gone
+    expect(screen.queryByTestId("tour-complete")).not.toBeInTheDocument();
+    // Back on step 1
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+  });
+});
+
+/* ── 6. ARIA attributes ──────────────────────────────────────────────── */
+
+describe("OnboardingTour — ARIA attributes", () => {
+  it("tabpanel has aria-live='polite'", () => {
+    renderTour();
+    expect(screen.getByRole("tabpanel")).toHaveAttribute(
+      "aria-live",
+      "polite",
+    );
+  });
+
+  it("tablist carries an aria-label containing the step count", () => {
+    renderTour();
+    const tabList = screen.getByRole("tablist");
+    expect(tabList).toHaveAttribute(
+      "aria-label",
+      expect.stringMatching(/step\s+1\s+of\s+5/i),
+    );
+  });
+
+  it("each tab has aria-controls='tour-panel'", () => {
+    renderTour();
+    const tabs = screen.getAllByRole("tab");
+    tabs.forEach((tab) => {
+      expect(tab).toHaveAttribute("aria-controls", "tour-panel");
+    });
+  });
+
+  it("tabpanel id matches the tabs' aria-controls value", () => {
+    renderTour();
+    const panel = screen.getByRole("tabpanel");
+    expect(panel).toHaveAttribute("id", "tour-panel");
+  });
+
+  it("active tab has tabIndex=0, inactive tabs have tabIndex=-1", () => {
+    renderTour();
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("tabindex", "0");
+    tabs.slice(1).forEach((tab) => {
+      expect(tab).toHaveAttribute("tabindex", "-1");
+    });
+  });
+
+  it("skip link has a descriptive aria-label", () => {
+    renderTour();
+    const skip = screen.getByRole("link", { name: /skip onboarding tour/i });
+    expect(skip).toBeInTheDocument();
+  });
+
+  it("Next button has aria-label describing target step", () => {
+    renderTour();
+    const next = screen.getByRole("button", { name: /go to step 2 of 5/i });
+    expect(next).toBeInTheDocument();
+  });
+
+  it("Finish button has aria-label on the last step", async () => {
+    renderTour();
+    const user = userEvent.setup();
+    const tabList = screen.getByRole("tablist");
+    // Jump to last step
+    fireEvent.keyDown(tabList, { key: "End" });
+    // Finish button should now be present
+    expect(
+      screen.getByRole("button", { name: /finish onboarding tour$/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("'Go to Dashboard' done button has an accessible name", async () => {
+    // Reach completion
+    renderTour();
+    const user = userEvent.setup();
+    for (let i = 0; i < 4; i++) {
+      const primaryBtn = document.querySelector(
+        ".tour-nav-button--primary",
+      ) as HTMLElement;
+      await user.click(primaryBtn);
+    }
+    const finishBtn = document.querySelector(
+      ".tour-nav-button--primary",
+    ) as HTMLElement;
+    await user.click(finishBtn);
+
+    const doneBtn = screen.getByRole("button", {
+      name: /finish onboarding.*dashboard/i,
+    });
+    expect(doneBtn).toBeInTheDocument();
+  });
+});
+
+/* ── 7. focus.css @layer focus contract — OnboardingTour ─────────────── */
+
+describe("focus.css @layer focus — OnboardingTour selectors", () => {
+  const css = readFile("src/styles/focus.css");
+
+  it("defines the @layer focus block", () => {
+    expect(css).toMatch(/@layer\s+focus\s*\{/);
+  });
+
+  it("includes a :focus-visible rule for .onboarding-tour__skip", () => {
+    expect(css).toMatch(/\.onboarding-tour__skip:focus-visible/);
+  });
+
+  it("includes a :focus-visible rule for .tour-step-tab", () => {
+    expect(css).toMatch(/\.tour-step-tab:focus-visible/);
+  });
+
+  it("includes a :focus-visible rule for .onboarding-tour__panel", () => {
+    expect(css).toMatch(/\.onboarding-tour__panel:focus-visible/);
+  });
+
+  it("includes a :focus-visible rule for .tour-nav-button", () => {
+    expect(css).toMatch(/\.tour-nav-button:focus-visible/);
+  });
+
+  it("includes a :focus-visible rule for .tour-done-button", () => {
+    expect(css).toMatch(/\.tour-done-button:focus-visible/);
+  });
+
+  it("includes a :focus-visible rule for .tour-restart-link", () => {
+    expect(css).toMatch(/\.tour-restart-link:focus-visible/);
+  });
+
+  it("includes the catch-all .onboarding-tour *:focus-visible rule", () => {
+    expect(css).toMatch(/\.onboarding-tour\s+\*:focus-visible/);
+  });
+
+  it("uses the accent token for every OnboardingTour focus ring", () => {
+    // Extract the OnboardingTour section of focus.css
+    const tourSection = css.slice(
+      css.indexOf(".onboarding-tour__skip:focus-visible"),
+    );
+    expect(tourSection).toMatch(/outline:\s*2px solid var\(--accent\)/);
+  });
+
+  it("uses 3px offset for every OnboardingTour focus ring", () => {
+    const tourSection = css.slice(
+      css.indexOf(".onboarding-tour__skip:focus-visible"),
+    );
+    expect(tourSection).toMatch(/outline-offset:\s*3px/);
+  });
+
+  it("OnboardingTour rules are inside the @layer focus block", () => {
+    // Verify the closing brace of @layer focus comes after our selectors
+    const layerStart = css.indexOf("@layer focus {");
+    const layerEnd = css.lastIndexOf("}"); // last } closes the layer
+    const skipRulePos = css.indexOf(".onboarding-tour__skip:focus-visible");
+    expect(skipRulePos).toBeGreaterThan(layerStart);
+    expect(skipRulePos).toBeLessThan(layerEnd);
+  });
+});
+
+/* ── 8. OnboardingTour.tsx does not use bare :focus selectors ─────────── */
+
+describe("OnboardingTour.tsx — :focus-visible only (no bare :focus)", () => {
+  const src = readFile("src/pages/OnboardingTour.tsx");
+
+  it("does not set outline:none unconditionally on any element", () => {
+    // Allow outline: none inside a :focus { } block but not as a top-level style prop
+    expect(src).not.toMatch(/style=\{[^}]*outline:\s*['"]none['"]/);
+  });
+
+  it("does not include a bare :focus selector in inline <style>", () => {
+    // The scoped <style> block in OnboardingTour must use :focus-visible not bare :focus
+    expect(src).not.toMatch(/:focus\s*\{[^:]/);
+  });
+});
diff --git a/src/pages/OnboardingTour.tsx b/src/pages/OnboardingTour.tsx
new file mode 100644
index 0000000..65ee349
--- /dev/null
+++ b/src/pages/OnboardingTour.tsx
@@ -0,0 +1,667 @@
+/**
+ * OnboardingTour — GrantFox FWC26 campaign (WCAG 2.1 AA)
+ *
+ * A multi-step guided tour that introduces new users to Callora.
+ *
+ * Accessibility guarantees (WCAG 2.1 AA):
+ *   2.1.1 Keyboard        — every interactive element is reachable and
+ *                           operable via keyboard alone.
+ *   2.4.7 Focus Visible   — all buttons, links, and the skip link display
+ *                           the 2px solid var(--accent) focus ring via
+ *                           :focus-visible (suppressed for mouse users).
+ *   1.3.1 Info & Relation — step counter communicated via aria-label on
+ *                           the tablist and each tab.
+ *   4.1.2 Name, Role, Val — stepper tabs carry role="tab", aria-selected,
+ *                           aria-controls; panels carry role="tabpanel".
+ *
+ * Focus management:
+ *   - "Skip tour" link is the first focusable element so keyboard-only users
+ *     can bypass the tour immediately.
+ *   - Advancing / going back via keyboard moves focus to the step panel so
+ *     the updated content is announced to screen readers.
+ *   - Completing the tour moves focus to the "Done" / exit link.
+ *
+ * Design tokens:
+ *   All colours reference var(--*) tokens so the component works in both
+ *   light and dark themes without modification.
+ *
+ * Part of GrantFox FWC26 campaign UI/UX requirements.
+ */
+
+import { useState, useRef, useCallback, useEffect, KeyboardEvent } from "react";
+import useDocumentTitle from "../hooks/useDocumentTitle";
+
+/* ─── Tour step data ───────────────────────────────────────────────────── */
+
+interface TourStep {
+  /** Short heading shown inside the step panel. */
+  title: string;
+  /** Body copy for the step. */
+  description: string;
+  /** Decorative emoji illustration (aria-hidden). */
+  icon: string;
+  /** Hint displayed below the step body (optional). */
+  hint?: string;
+}
+
+const TOUR_STEPS: TourStep[] = [
+  {
+    icon: "👋",
+    title: "Welcome to Callora",
+    description:
+      "Callora is a pay-per-call API marketplace. You only pay for the requests your app makes — no subscriptions, no waste.",
+    hint: 'Press the right arrow key or click \u201cNext\u201d to continue.',
+  },
+  {
+    icon: "🔑",
+    title: "Get your API key",
+    description:
+      "Generate a live API key from the dashboard in seconds. Your key is scoped to your vault balance so billing stays transparent.",
+  },
+  {
+    icon: "🛒",
+    title: "Browse the Marketplace",
+    description:
+      "Search hundreds of programmable APIs by category, price, and availability. Pin your favourites to the dashboard for quick access.",
+  },
+  {
+    icon: "💸",
+    title: "Fund your vault",
+    description:
+      "Deposit USDC once and let Callora handle the rest. Every API call is settled on-chain with a verifiable record.",
+  },
+  {
+    icon: "📊",
+    title: "Track your usage",
+    description:
+      "The API Usage page shows request history, error rates, and spend so you always know what your app is doing.",
+  },
+];
+
+const TOTAL_STEPS = TOUR_STEPS.length;
+
+/* ─── Component ────────────────────────────────────────────────────────── */
+
+interface OnboardingTourProps {
+  /**
+   * Called when the user finishes the tour ("Done" button or "Skip tour"
+   * link). Callers typically navigate to the dashboard or close the overlay.
+   */
+  onComplete?: () => void;
+}
+
+export default function OnboardingTour({ onComplete }: OnboardingTourProps) {
+  useDocumentTitle(
+    "Getting Started – Callora",
+    "A short guided tour that introduces the Callora API marketplace to new users.",
+  );
+
+  /** Zero-indexed current step. */
+  const [activeStep, setActiveStep] = useState(0);
+
+  /** Whether the tour has been finished. */
+  const [isComplete, setIsComplete] = useState(false);
+
+  // Refs for programmatic focus management
+  const stepPanelRef = useRef<HTMLDivElement>(null);
+  const doneButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement | null>(null);
+  const skipLinkRef = useRef<HTMLAnchorElement>(null);
+
+  /** Move to the next step, or complete the tour on the last step. */
+  const handleNext = useCallback(() => {
+    if (activeStep < TOTAL_STEPS - 1) {
+      setActiveStep((s) => s + 1);
+    } else {
+      setIsComplete(true);
+    }
+  }, [activeStep]);
+
+  /** Move to the previous step. */
+  const handleBack = useCallback(() => {
+    if (activeStep > 0) {
+      setActiveStep((s) => s - 1);
+    }
+  }, [activeStep]);
+
+  /** Jump directly to a specific step via the stepper tabs. */
+  const handleStepSelect = useCallback((index: number) => {
+    setActiveStep(index);
+  }, []);
+
+  /** Skip the tour entirely. */
+  const handleSkip = useCallback(() => {
+    onComplete?.();
+  }, [onComplete]);
+
+  /** Complete the tour from the final screen. */
+  const handleDone = useCallback(() => {
+    onComplete?.();
+  }, [onComplete]);
+
+  /**
+   * Keyboard arrow navigation for the stepper tab list (WAI-ARIA tabs pattern):
+   *   Left/Up  → previous tab
+   *   Right/Down → next tab
+   *   Home     → first tab
+   *   End      → last tab
+   */
+  const handleTabListKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveStep((s) => Math.max(s - 1, 0));
+      } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveStep((s) => Math.min(s + 1, TOTAL_STEPS - 1));
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActiveStep(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActiveStep(TOTAL_STEPS - 1);
+      }
+    },
+    [],
+  );
+
+  // Move focus to the step panel whenever the active step changes so that
+  // screen readers announce the new content.
+  useEffect(() => {
+    if (!isComplete) {
+      stepPanelRef.current?.focus();
+    }
+  }, [activeStep, isComplete]);
+
+  // Once the tour is marked complete, move focus to the "Done" button so the
+  // congratulations screen is announced immediately.
+  useEffect(() => {
+    if (isComplete) {
+      // Cast to HTMLElement so .focus() is always available
+      (doneButtonRef.current as HTMLElement | null)?.focus();
+    }
+  }, [isComplete]);
+
+  const step = TOUR_STEPS[activeStep];
+  const isFirst = activeStep === 0;
+  const isLast = activeStep === TOTAL_STEPS - 1;
+
+  /* ── Shared style blocks ─────────────────────────────────────────── */
+
+  const pageStyles = `
+    /* ── OnboardingTour page layout ───────────────────────────────── */
+    .onboarding-tour {
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      padding: 24px 16px 48px;
+      background: var(--page-bg);
+    }
+
+    .onboarding-tour__card {
+      width: min(640px, 100%);
+      background: var(--surface);
+      border: 1px solid var(--line-strong);
+      border-radius: var(--radius-xl, 28px);
+      padding: 40px 36px 32px;
+      box-shadow: var(--shadow);
+      position: relative;
+    }
+
+    /* ── Skip link ────────────────────────────────────────────────── */
+    .onboarding-tour__skip {
+      display: block;
+      margin-bottom: 24px;
+      font-size: 0.8125rem;
+      color: var(--muted);
+      text-decoration: underline;
+      text-underline-offset: 3px;
+      /* outline is handled by focus.css @layer */
+    }
+
+    .onboarding-tour__skip:hover {
+      color: var(--accent);
+    }
+
+    /* ── Stepper / tab list ──────────────────────────────────────── */
+    .onboarding-tour__stepper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 36px;
+    }
+
+    .tour-step-tab {
+      /*
+       * Each dot acts as a WAI-ARIA tab.
+       * Sizing meets the 24×24 px minimum touch target.
+       */
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 2px solid var(--line);
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.6875rem;
+      font-weight: 700;
+      color: var(--muted);
+      transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
+      /* outline suppressed for mouse (handled by focus.css) */
+    }
+
+    .tour-step-tab[aria-selected="true"] {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: #fff;
+    }
+
+    .tour-step-tab:hover:not([aria-selected="true"]) {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    .onboarding-tour__step-counter {
+      margin-left: auto;
+      font-size: 0.8125rem;
+      color: var(--muted);
+    }
+
+    /* ── Step panel ──────────────────────────────────────────────── */
+    .onboarding-tour__panel {
+      outline: none; /* visible ring applied in focus.css for :focus-visible */
+      min-height: 220px;
+    }
+
+    .onboarding-tour__icon {
+      font-size: 3rem;
+      margin-bottom: 16px;
+      line-height: 1;
+    }
+
+    .onboarding-tour__step-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--text);
+      margin: 0 0 12px;
+      line-height: 1.2;
+    }
+
+    .onboarding-tour__step-body {
+      font-size: 0.9375rem;
+      color: var(--muted);
+      margin: 0 0 16px;
+      line-height: 1.6;
+    }
+
+    .onboarding-tour__hint {
+      font-size: 0.8125rem;
+      color: var(--muted);
+      opacity: 0.7;
+      margin: 0;
+    }
+
+    /* ── Navigation buttons ──────────────────────────────────────── */
+    .onboarding-tour__nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-top: 32px;
+      padding-top: 24px;
+      border-top: 1px solid var(--line);
+    }
+
+    .tour-nav-button {
+      padding: 10px 24px;
+      border-radius: 10px;
+      font-size: 0.9375rem;
+      font-weight: 600;
+      cursor: pointer;
+      min-height: 44px; /* touch target */
+      transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
+    }
+
+    .tour-nav-button--secondary {
+      background: transparent;
+      border: 1px solid var(--line-strong);
+      color: var(--text);
+    }
+
+    .tour-nav-button--secondary:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    .tour-nav-button--primary {
+      background: var(--accent);
+      border: 1px solid var(--accent);
+      color: #fff;
+    }
+
+    .tour-nav-button--primary:hover {
+      background: var(--accent-strong, #1ed6a4);
+      border-color: var(--accent-strong, #1ed6a4);
+    }
+
+    .tour-nav-button--ghost {
+      background: transparent;
+      border: 1px solid transparent;
+      color: var(--muted);
+      padding: 10px 12px;
+    }
+
+    .tour-nav-button--ghost:hover {
+      color: var(--text);
+    }
+
+    /* ── Progress bar ────────────────────────────────────────────── */
+    .onboarding-tour__progress {
+      height: 4px;
+      background: var(--line);
+      border-radius: 99px;
+      margin-bottom: 28px;
+      overflow: hidden;
+    }
+
+    .onboarding-tour__progress-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 99px;
+      transition: width 300ms ease;
+    }
+
+    /* ── Completion screen ───────────────────────────────────────── */
+    .onboarding-tour__complete {
+      text-align: center;
+      padding: 16px 0 8px;
+    }
+
+    .onboarding-tour__complete-icon {
+      font-size: 4rem;
+      margin-bottom: 20px;
+      line-height: 1;
+    }
+
+    .onboarding-tour__complete-title {
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: var(--text);
+      margin: 0 0 12px;
+    }
+
+    .onboarding-tour__complete-body {
+      font-size: 0.9375rem;
+      color: var(--muted);
+      margin: 0 0 32px;
+      line-height: 1.6;
+    }
+
+    .onboarding-tour__complete-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .tour-done-button {
+      padding: 12px 32px;
+      border-radius: 10px;
+      font-size: 1rem;
+      font-weight: 700;
+      cursor: pointer;
+      min-height: 48px;
+      background: var(--accent);
+      border: 1px solid var(--accent);
+      color: #fff;
+      transition: background 180ms ease, border-color 180ms ease;
+    }
+
+    .tour-done-button:hover {
+      background: var(--accent-strong, #1ed6a4);
+      border-color: var(--accent-strong, #1ed6a4);
+    }
+
+    .tour-restart-link {
+      padding: 12px 24px;
+      border-radius: 10px;
+      font-size: 0.9375rem;
+      font-weight: 600;
+      cursor: pointer;
+      min-height: 48px;
+      background: transparent;
+      border: 1px solid var(--line-strong);
+      color: var(--text);
+      display: flex;
+      align-items: center;
+      transition: border-color 180ms ease, color 180ms ease;
+      text-decoration: none;
+    }
+
+    .tour-restart-link:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    /* ── Responsive ──────────────────────────────────────────────── */
+    @media (max-width: 480px) {
+      .onboarding-tour__card {
+        padding: 28px 20px 24px;
+      }
+
+      .onboarding-tour__step-title {
+        font-size: 1.25rem;
+      }
+
+      .tour-nav-button {
+        padding: 10px 16px;
+        font-size: 0.875rem;
+      }
+    }
+  `;
+
+  /* ─── Render ────────────────────────────────────────────────────── */
+
+  return (
+    <div className="onboarding-tour">
+      {/* Scoped styles — same pattern as RateLimitCard / ApiDetailPage */}
+      <style>{pageStyles}</style>
+
+      <article className="onboarding-tour__card">
+        {/*
+         * "Skip tour" is the very first focusable element on the page so
+         * keyboard-only users can bypass the tour in one Tab press.
+         * WCAG 2.4.1 Bypass Blocks.
+         */}
+        <a
+          ref={skipLinkRef}
+          href="#"
+          className="onboarding-tour__skip"
+          onClick={(e) => {
+            e.preventDefault();
+            handleSkip();
+          }}
+          aria-label="Skip onboarding tour and go to dashboard"
+        >
+          Skip tour
+        </a>
+
+        {/* ── Progress bar (decorative, aria-hidden) ─────────────────── */}
+        <div
+          className="onboarding-tour__progress"
+          aria-hidden="true"
+          role="presentation"
+        >
+          <div
+            className="onboarding-tour__progress-fill"
+            style={{
+              width: isComplete
+                ? "100%"
+                : `${((activeStep + 1) / TOTAL_STEPS) * 100}%`,
+            }}
+          />
+        </div>
+
+        {isComplete ? (
+          /* ── Completion screen ─────────────────────────────────────── */
+          <div className="onboarding-tour__complete" data-testid="tour-complete">
+            <p className="onboarding-tour__complete-icon" aria-hidden="true">
+              🎉
+            </p>
+            <h1 className="onboarding-tour__complete-title">
+              You're all set!
+            </h1>
+            <p className="onboarding-tour__complete-body">
+              You now know the core Callora workflow. Head to the dashboard to
+              start using APIs or explore the marketplace.
+            </p>
+            <div className="onboarding-tour__complete-actions">
+              {/*
+               * Primary action — programmatic focus targets this button
+               * when the tour completes.
+               */}
+              <button
+                ref={doneButtonRef as React.RefObject<HTMLButtonElement>}
+                type="button"
+                className="tour-done-button"
+                onClick={handleDone}
+                aria-label="Finish onboarding tour and go to dashboard"
+              >
+                Go to Dashboard
+              </button>
+
+              {/*
+               * Secondary action — restart the tour without navigation.
+               * Rendered as a <button> (not a link) because it modifies
+               * page state rather than navigating.
+               */}
+              <button
+                type="button"
+                className="tour-restart-link"
+                onClick={() => {
+                  setIsComplete(false);
+                  setActiveStep(0);
+                }}
+                aria-label="Restart the onboarding tour from the beginning"
+              >
+                Restart tour
+              </button>
+            </div>
+          </div>
+        ) : (
+          /* ── Stepper + step panel ──────────────────────────────────── */
+          <>
+            {/*
+             * WAI-ARIA tabs pattern:
+             *   role="tablist" on the container
+             *   role="tab" + aria-selected + aria-controls on each dot
+             *   role="tabpanel" on the content panel
+             *
+             * Arrow-key navigation is handled by handleTabListKeyDown so
+             * keyboard users can jump to any step using arrow keys.
+             */}
+            <div
+              role="tablist"
+              aria-label={`Onboarding tour — step ${activeStep + 1} of ${TOTAL_STEPS}`}
+              className="onboarding-tour__stepper"
+              onKeyDown={handleTabListKeyDown}
+            >
+              {TOUR_STEPS.map((s, i) => (
+                <button
+                  key={s.title}
+                  role="tab"
+                  type="button"
+                  id={`tour-tab-${i}`}
+                  aria-selected={i === activeStep}
+                  aria-controls="tour-panel"
+                  aria-label={`Step ${i + 1}: ${s.title}`}
+                  className="tour-step-tab"
+                  tabIndex={i === activeStep ? 0 : -1}
+                  onClick={() => handleStepSelect(i)}
+                >
+                  {i + 1}
+                </button>
+              ))}
+
+              <span
+                className="onboarding-tour__step-counter"
+                aria-hidden="true"
+              >
+                {activeStep + 1} / {TOTAL_STEPS}
+              </span>
+            </div>
+
+            {/*
+             * tabIndex={0} — the panel receives programmatic focus when the
+             * step changes, ensuring screen readers announce the new content
+             * without the user needing to navigate there manually.
+             *
+             * role="tabpanel" matches the WAI-ARIA tabs pattern above.
+             * aria-labelledby points to the active tab id.
+             */}
+            <div
+              id="tour-panel"
+              ref={stepPanelRef}
+              role="tabpanel"
+              aria-labelledby={`tour-tab-${activeStep}`}
+              aria-live="polite"
+              tabIndex={0}
+              className="onboarding-tour__panel"
+              data-testid="tour-panel"
+            >
+              <p
+                className="onboarding-tour__icon"
+                aria-hidden="true"
+              >
+                {step.icon}
+              </p>
+              <h2 className="onboarding-tour__step-title">{step.title}</h2>
+              <p className="onboarding-tour__step-body">{step.description}</p>
+              {step.hint && (
+                <p className="onboarding-tour__hint">{step.hint}</p>
+              )}
+            </div>
+
+            {/* ── Navigation ─────────────────────────────────────────── */}
+            <nav
+              className="onboarding-tour__nav"
+              aria-label="Tour navigation"
+            >
+              {/*
+               * "Back" is hidden on the first step so there is nothing to
+               * go back to.  We render it as a ghost button with reduced
+               * visibility rather than removing it to maintain layout
+               * stability (avoids jump when it disappears).
+               */}
+              <button
+                type="button"
+                className="tour-nav-button tour-nav-button--ghost"
+                onClick={handleBack}
+                disabled={isFirst}
+                aria-disabled={isFirst}
+                aria-label="Go to previous onboarding step"
+                style={{ visibility: isFirst ? "hidden" : "visible" }}
+              >
+                ← Back
+              </button>
+
+              <button
+                type="button"
+                className="tour-nav-button tour-nav-button--primary"
+                onClick={handleNext}
+                aria-label={
+                  isLast
+                    ? "Finish onboarding tour"
+                    : `Go to step ${activeStep + 2} of ${TOTAL_STEPS}`
+                }
+              >
+                {isLast ? "Finish" : "Next →"}
+              </button>
+            </nav>
+          </>
+        )}
+      </article>
+    </div>
+  );
+}
diff --git a/src/styles/focus.css b/src/styles/focus.css
index a357c0b..6cccb76 100644
--- a/src/styles/focus.css
+++ b/src/styles/focus.css
@@ -346,6 +346,74 @@
     outline: 2px solid var(--accent);
     outline-offset: 2px;
   }
+
+  /* ── OnboardingTour: interactive elements (WCAG 2.1 AA, FWC26) ─────────
+     The tour contains six categories of interactive elements:
+       1. .onboarding-tour__skip       — skip-tour anchor
+       2. .tour-step-tab               — WAI-ARIA tab dots (stepper)
+       3. .onboarding-tour__panel      — tabpanel (receives programmatic focus)
+       4. .tour-nav-button             — Back / Next / Finish navigation buttons
+       5. .tour-done-button            — "Go to Dashboard" CTA on complete screen
+       6. .tour-restart-link           — "Restart tour" secondary action
+
+     All rules use the 2px solid var(--accent) ring and 3px offset that the
+     rest of the codebase uses.  No bare :focus rules are set here; the
+     global *:focus { outline: none } in index.css suppresses mouse-triggered
+     rings and :focus-visible restores them for keyboard navigation.
+     ─────────────────────────────────────────────────────────────────────── */
+
+  /* Skip-tour link */
+  .onboarding-tour__skip:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+    border-radius: 2px;
+  }
+
+  /* Stepper tab dots */
+  .tour-step-tab:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+    box-shadow: var(--focus-ring);
+  }
+
+  /* Step tabpanel — receives programmatic focus on step change */
+  .onboarding-tour__panel:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+
+  /* Navigation buttons: Back, Next, Finish */
+  .tour-nav-button:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+    box-shadow: var(--focus-ring);
+  }
+
+  /* "Go to Dashboard" CTA on the completion screen */
+  .tour-done-button:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+    box-shadow: var(--focus-ring);
+  }
+
+  /* "Restart tour" secondary action (rendered as <button>) */
+  .tour-restart-link:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+    box-shadow: var(--focus-ring);
+  }
+
+  /* ── OnboardingTour global catch-all ─────────────────────────────
+     Belt-and-braces rule that ensures any additional interactive
+     elements added to the tour in future iterations automatically
+     inherit a visible focus ring.  Specificity is intentionally
+     low (one class + pseudo-class) so individual per-element overrides
+     above can still win.                                           */
+  .onboarding-tour *:focus-visible {
+    outline: 2px solid var(--accent, #4e85ff);
+    outline-offset: 3px;
+  }
 }
 
 /* ── reduced-motion: suppress transition on focus for ApiUsage controls ── */