diff --git a/docs/sdks/ios/sparkscan/intro.md b/docs/sdks/ios/sparkscan/intro.md
index 0c4784a07f..da671845b4 100644
--- a/docs/sdks/ios/sparkscan/intro.md
+++ b/docs/sdks/ios/sparkscan/intro.md
@@ -5,12 +5,69 @@ sidebar_position: 1
 displayed_sidebar: iosSidebar
 pagination_prev: null
 framework: ios
+product: sparkscan
+user_intents:
+  - "scan one barcode at a time on iOS"
+  - "add a ready-made scanning UI without building your own"
+  - "scan items one by one to build a list (inventory, receiving)"
+not_for:
+  - "scan and count many barcodes at once — use MatrixScan Count"
+  - "build a fully custom scanning UI — use Barcode Capture"
 keywords:
   - ios
 ---
 
+import ProductChooser from '@site/src/components/ProductChooser';
+
 # About SparkScan
 
 import AboutSparkScan from '../../../partials/intro/_about-sparkscan.mdx';
 
+SparkScan bundles multiple scanning features together and addresses many common challenges associated with scanning on smart devices. It is designed to be easily integrated into any application, and can be customized to fit your specific needs.
+
+<ProductChooser frontMatter={frontMatter}/>
+
+## UI Overview
+
+The UI elements in SparkScan are intentionally minimalistic, meant to be overlayed on any application without the need to adapt the existing app while offering the best user experience.
+
+Two main elements compose the UI:
+
+![SparkScan UI](/img/sparkscan/features_web.png)
+
+- **Camera preview**: A small camera preview that helps with aiming and shows scan feedback. When not in use, the camera preview is hidden. It can be expanded and hosts easy to access controls (zoom level, flash etc).
+- **Trigger button**: A large-sized, semi-transparent floating button that users can drag to position it in the most ergonomic position. When not in use, the trigger button collapses to occupy less space.
+
+There are additional UI elements available for displaying additional scanning modes, errors, or providing feedback to the user. These are described in the [Advanced](./advanced.md) section.
+
+## Workflow Description
+
+When SparkScan is started, the UI presents just the trigger button, collapsed. The user can move the trigger button by simply dragging it around: the position of the trigger button is remembered across sessions, so the user can place the button where it's the most comfortable to use.
+To start scanning, the user can simply tap on it.
+
+When the scanner is active, the mini preview is shown. The mini preview too can be placed anywhere in the view by simply pressing on it for a little while and then dragging it around. Also the position of the mini preview is remembered across sessions, so the user can place it where it prefers (e.g. not to cover an important information at the top of the app).
+
+In the default configuration:
+- Upon scan the user will receive audio/haptic feedback confirming the scan, and the mini preview will display the scanned barcode for a small amount of time before fading away.
+- Tapping on the trigger button or the mini preview will restart immediately the scanner.
+
+Upon completing the scanning process (or to interact with the customer app layer), the user can tap in any area outside the trigger button and the mini preview. This collapses the scanner button, going back to the initial state.
+
+If instead of tapping on the trigger button the user taps and holds it pressed, he will be able to scan multiple barcodes in a row. The scanner will stop when the trigger button is released.
+
+<p align="center">
+  <img src="/img/sparkscan/workflow-example.gif" alt="SparkScan Workflow" /><br></br>List building use case using SparkScan.
+</p>
+
+The default workflow just described has been carefully designed as a result of extensive user testing and customer feedback from the field.
+
+But not all use-cases look the same, and your needs may differ for most users. That's why SparkScan comes with a set of options to configure the scanner and to best fit in the desired workflow. Check the [Workflow Options](./advanced.md#workflow-options) guide to discover more.
+
+## Supported Symbologies
+
+SparkScan supports all of the major symbologies listed here: [Barcode Symbologies](../barcode-symbologies.mdx).
+
+## AI-Powered Features
+
+SparkScan includes AI-powered scanning capabilities that enhance accuracy and user experience. These features automatically handle challenging scenarios such as avoiding unintentional scans, selecting barcodes in dense environments, scanning damaged barcodes with OCR fallback, and intelligently filtering duplicate scans. Learn more about these capabilities in our [AI-Powered Barcode Scanning](../ai-powered-barcode-scanning.md) guide.
 <AboutSparkScan framework="ios"/>
diff --git a/docs/start.mdx b/docs/start.mdx
new file mode 100644
index 0000000000..cff78ef7ea
--- /dev/null
+++ b/docs/start.mdx
@@ -0,0 +1,29 @@
+---
+title: "Not sure which Scandit product? Start here"
+description: "Pick what you want to scan and the task you need to do, and go straight to the right Scandit product's docs for your platform."
+sidebar_position: 0
+pagination_prev: null
+pagination_next: null
+keywords:
+  - get started
+  - which product
+  - product chooser
+  - start here
+  - scan one item
+  - stocktake
+  - order picking
+  - proof of delivery
+---
+
+import IntentNavigator from '@site/src/components/IntentNavigator';
+
+# Not sure which Scandit product? Start here
+
+The home page's platform picker assumes you already know your product. This is the other
+axis — **pick your intent, get the product** — for the cross-product confusion the replay
+and ticket data shows (SparkScan vs Barcode Capture, ID Capture vs ID Bolt…). It is driven
+by **one shared intent taxonomy**, the same scan type → task → product map the sign-up quiz
+uses, so the docs and sign-up recommend the **same product**. Each recommendation links to
+that product's docs for your platform.
+
+<IntentNavigator/>
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
new file mode 100644
index 0000000000..a040282299
--- /dev/null
+++ b/docs/troubleshooting.md
@@ -0,0 +1,41 @@
+---
+title: "Troubleshooting: Scandit SDK error messages and fixes"
+description: "Paste a Scandit SDK error message to find its cause and fix — licensing, activation, and camera errors."
+product: [sparkscan, barcode-capture, id-capture]
+topic_type: troubleshooting
+version_status: current
+canonical_id: scandit.troubleshooting.error-codes
+user_intents:
+  - "find out what a Scandit SDK error message means"
+  - "fix a Scandit license or activation error"
+  - "resolve a camera permission error when scanning"
+not_for:
+  - "reporting a new bug — contact support instead"
+keywords:
+  - error
+  - error code
+  - license error
+  - invalid license
+  - license expired
+  - troubleshooting
+  - activation
+hide_table_of_contents: true
+---
+
+import ErrorCodeFinder from '@site/src/components/ErrorCodeFinder';
+
+# Troubleshooting: Scandit SDK error messages and fixes
+
+Hit an error while integrating the SDK? **Paste the exact message from your console** into the box below (or start typing a few words from it). The list narrows to the matching issue with its cause and fix. You can also press <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>F</kbd> to search the page directly.
+
+Most integration failures are licensing problems — an invalid, expired, or wrong-application key, or the documentation placeholder left in the code. Those are grouped first.
+
+:::caution Demo preview — sample content
+The entries below are **illustrative samples** (each tagged `SAMPLE` with a `SAMPLE-…` code) that demonstrate the finder. They are **not** real Scandit error messages and must not be relied on. Verified messages and fixes will replace them once the support/licensing error data is supplied.
+:::
+
+<ErrorCodeFinder/>
+
+## Still stuck?
+
+If your error isn't listed, or a fix doesn't resolve it, contact [Scandit support](https://www.scandit.com/support/) with the full console output, your SDK version, and the framework you're using.
diff --git a/src/components/ErrorCodeFinder/index.tsx b/src/components/ErrorCodeFinder/index.tsx
new file mode 100644
index 0000000000..54c77c64c1
--- /dev/null
+++ b/src/components/ErrorCodeFinder/index.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+import Link from '@docusaurus/Link';
+import errorData from '@site/src/data/troubleshooting-errors.json';
+import styles from './styles.module.css';
+
+/**
+ * ErrorCodeFinder — the paste-to-filter troubleshooting index (backlog #5).
+ *
+ * A reader who hits an SDK error pastes the console message here and the list
+ * narrows to the matching entry with its cause and fix. Typing a fragment works
+ * too. A get-started page links here with the input auto-focused so the reader
+ * can paste immediately; a `?q=` URL param pre-filters (e.g. a deep link).
+ *
+ * LLM / GEO retrieval:
+ *   - The full entry list is rendered SERVER-SIDE (not behind BrowserOnly), so
+ *     every message/cause/fix is in the static HTML for crawlers, Algolia, and
+ *     our knowledge-extractor. The search box is progressive enhancement:
+ *     with no JS every entry still shows.
+ *   - Each entry has a stable anchor id, so an answer can cite
+ *     /troubleshooting/#<id>.
+ *   - We emit schema.org FAQPage JSON-LD built from the same catalog, so
+ *     search engines and LLMs get a machine-readable question→answer map.
+ */
+
+interface ErrorEntry {
+  id: string;
+  code: string;
+  area: string;
+  sample?: boolean;
+  title: string;
+  message: string;
+  match?: string[];
+  cause: string;
+  fix: string;
+  link?: string;
+  linkLabel?: string;
+}
+
+const ENTRIES = ((errorData as { entries?: ErrorEntry[] }).entries || []) as ErrorEntry[];
+
+function normalize(s: string | undefined): string {
+  return (s || '').toLowerCase().replace(/\s+/g, ' ').trim();
+}
+
+/** Match either way: a typed fragment appears in a field, OR the reader pasted
+ *  a whole console line that CONTAINS one of the entry's invariant substrings
+ *  (their own key/app id in the pasted text is ignored this way). */
+function matches(entry: ErrorEntry, nq: string): boolean {
+  if (!nq) return true;
+  const fields = [entry.title, entry.code, entry.message, entry.cause, ...(entry.match || [])].map(
+    normalize,
+  );
+  const forwardHit = fields.some((h) => h && h.includes(nq));
+  const invariants = [entry.message, ...(entry.match || [])].map(normalize).filter(Boolean);
+  const pasteHit = nq.length >= 12 && invariants.some((h) => nq.includes(h));
+  return forwardHit || pasteHit;
+}
+
+function buildJsonLd() {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: ENTRIES.map((e) => ({
+      '@type': 'Question',
+      name: e.message,
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: `Cause: ${e.cause} Fix: ${e.fix}`,
+      },
+    })),
+  };
+}
+
+export default function ErrorCodeFinder(): JSX.Element {
+  const [q, setQ] = React.useState('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    try {
+      const fromQuery = new URLSearchParams(window.location.search).get('q') || '';
+      if (fromQuery) setQ(fromQuery);
+    } catch {
+      /* SSR / no window */
+    }
+    inputRef.current?.focus();
+  }, []);
+
+  const nq = normalize(q);
+  const visible = ENTRIES.filter((e) => matches(e, nq));
+
+  return (
+    <div className={styles.finder}>
+      <Head>
+        <script type="application/ld+json">{JSON.stringify(buildJsonLd())}</script>
+      </Head>
+
+      <input
+        ref={inputRef}
+        className={styles.search}
+        type="search"
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        placeholder="Paste your error message here, or start typing…"
+        aria-label="Search Scandit error messages"
+        spellCheck={false}
+        autoComplete="off"
+      />
+      <p className={styles.count}>
+        {q ? `${visible.length} of ${ENTRIES.length} matching` : `${ENTRIES.length} known issues`}
+      </p>
+
+      {visible.length === 0 && (
+        <p className={styles.empty}>
+          No match yet. Try pasting a shorter part of the message, or search the full documentation.
+        </p>
+      )}
+
+      <ul className={styles.list}>
+        {visible.map((e) => (
+          <li key={e.id} id={e.id} className={styles.card}>
+            <div className={styles.head}>
+              <span className={styles.area}>{e.area}</span>
+              {e.sample && <span className={styles.sampleTag}>SAMPLE</span>}
+              <code className={styles.code}>{e.code}</code>
+            </div>
+            <h3 className={styles.title}>{e.title}</h3>
+            <blockquote className={styles.message}>{e.message}</blockquote>
+            <p className={styles.line}>
+              <strong>Cause:</strong> {e.cause}
+            </p>
+            <p className={styles.line}>
+              <strong>Fix:</strong> {e.fix}
+            </p>
+            {e.link && (
+              <Link className={styles.link} to={e.link}>
+                {e.linkLabel || 'Learn more'} →
+              </Link>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/ErrorCodeFinder/styles.module.css b/src/components/ErrorCodeFinder/styles.module.css
new file mode 100644
index 0000000000..7105438ff3
--- /dev/null
+++ b/src/components/ErrorCodeFinder/styles.module.css
@@ -0,0 +1,114 @@
+.finder {
+  margin: 1.5rem 0 2rem;
+}
+
+.search {
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 1rem;
+  padding: 0.7rem 0.9rem;
+  border: 2px solid var(--ifm-color-emphasis-300);
+  border-radius: 10px;
+  background: var(--ifm-background-surface-color);
+  color: var(--ifm-font-color-base);
+}
+
+.search:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.count {
+  margin: 0.5rem 0 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.empty {
+  padding: 1rem 1.1rem;
+  border: 1px dashed var(--ifm-color-emphasis-300);
+  border-radius: 10px;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.card {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 10px;
+  padding: 1rem 1.25rem 1.1rem;
+  background: var(--ifm-background-surface-color);
+  scroll-margin-top: 5rem;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+
+.area {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.sampleTag {
+  font-size: 0.66rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: var(--ifm-color-warning-contrast-background);
+  color: var(--ifm-color-warning-darker);
+  border: 1px solid var(--ifm-color-warning);
+}
+
+.code {
+  margin-left: auto;
+  font-size: 0.74rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.title {
+  margin: 0 0 0.5rem;
+  font-size: 1.05rem;
+}
+
+.message {
+  margin: 0 0 0.7rem;
+  padding: 0.5rem 0.8rem;
+  border-left: 3px solid var(--ifm-color-danger);
+  background: var(--ifm-color-emphasis-100);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.85rem;
+  color: var(--ifm-font-color-base);
+  border-radius: 0 6px 6px 0;
+}
+
+.line {
+  margin: 0.3rem 0;
+  font-size: 0.92rem;
+  line-height: 1.5;
+}
+
+.link {
+  display: inline-block;
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
diff --git a/src/components/IntentNavigator/index.tsx b/src/components/IntentNavigator/index.tsx
new file mode 100644
index 0000000000..9e55fc5c2f
--- /dev/null
+++ b/src/components/IntentNavigator/index.tsx
@@ -0,0 +1,405 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import intents from '@site/src/data/intents.json';
+import productsData from '@site/src/data/products.json';
+import styles from './styles.module.scss';
+
+/**
+ * IntentNavigator — the "Start here / I want to…" entry point.
+ *
+ * Renders the same intent taxonomy as the Unified-Signup PRD product quiz
+ * (scan type → task → delivery → product), so the docs and the signup flow route
+ * the same intent to the same product. Every recommendation links to that
+ * product's docs on the reader's chosen platform.
+ *
+ * Ported from the Phase E demo, keeping its full structure and grouping:
+ *   1. platform bar   — pick your platform, remembered between visits
+ *   2. expert shortcut — "Already know your product? Jump straight in →"
+ *   3. three numbered steps with progressive disclosure, plus "start over"
+ *   4. "Why this matters" — docs ↔ signup parity
+ *   5. the Linux caveat, and a provenance footer
+ *
+ * Two deliberate differences from the demo:
+ *
+ *  - COLOURS COME FROM THE SITE, NOT A PRIVATE PALETTE. The demo carried its own
+ *    hex values; here every colour is an existing docs token so the component
+ *    matches the surrounding page and follows the site's light/dark toggle.
+ *
+ *  - AVAILABILITY IS COMPUTED, NOT COPIED. The demo hard-coded a PROD table
+ *    "derived verbatim from products.json"; a copy drifts the moment products.json
+ *    changes, so this reads products.json directly. Only the two things genuinely
+ *    absent from that file are declared here (hosted products, and Linux).
+ *
+ * Disclosure is done with CSS, exactly as the demo did it, NOT by conditional
+ * rendering — which matters for two reasons. There is no flash of a different
+ * layout before hydration, because the server already renders the stepped UI. And
+ * every task phrasing and every product link is present in the static HTML, so
+ * search, crawlers and the AI retrieval layer see the whole taxonomy even though
+ * the reader is shown one step at a time. A React-state-gated render would have
+ * hidden all of it from them.
+ *
+ * With no JavaScript the step buttons cannot do anything, so a <noscript> block
+ * carries the same taxonomy as a plain list of links.
+ */
+
+interface Option {
+  product: string;
+  name: string;
+  delivery: string;
+  badge: 'ui' | 'sdk' | 'nocode' | 'hosted';
+  href: string;
+}
+interface Goal {
+  task: string;
+  context: string;
+  options: Option[];
+}
+interface ScanType {
+  id: string;
+  icon: string;
+  label: string;
+  hint: string;
+  goals: Goal[];
+}
+interface ProductEntry {
+  key: string;
+  frameworks?: Record<string, { version?: string; apiUrl?: string }>;
+}
+
+const SCAN_TYPES = (intents as { scanTypes: ScanType[] }).scanTypes;
+
+/** The platforms the picker offers: display name + the /sdks/<seg>/ segment. */
+const PLATFORMS: { seg: string; name: string }[] = [
+  { seg: 'web', name: 'Web' },
+  { seg: 'ios', name: 'iOS' },
+  { seg: 'android', name: 'Android' },
+  { seg: 'react-native', name: 'React Native' },
+  { seg: 'flutter', name: 'Flutter' },
+  { seg: 'cordova', name: 'Cordova' },
+  { seg: 'capacitor', name: 'Capacitor' },
+  { seg: 'titanium', name: 'Titanium' },
+  { seg: 'linux', name: 'Linux' },
+  { seg: 'net/ios', name: '.NET iOS' },
+  { seg: 'net/android', name: '.NET Android' },
+];
+
+/** Other spellings that reach us via ?framework= or the homepage selector. */
+const ALIASES: Record<string, string> = {
+  react: 'react-native',
+  netios: 'net/ios',
+  'net-ios': 'net/ios',
+  netandroid: 'net/android',
+  'net-android': 'net/android',
+};
+
+const DEFAULT_SEG = 'web';
+
+/**
+ * Hosted products are not framework SDKs and so are absent from products.json:
+ * Express is no-code and platform-agnostic; ID Bolt is web-only.
+ */
+const HOSTED: Record<string, { href: string; segs: string[] | 'all' }> = {
+  express: { href: '/hosted/express/overview', segs: 'all' },
+  'id-bolt': { href: '/hosted/id-bolt/getting-started', segs: ['web'] },
+};
+
+/**
+ * Linux is absent from products.json entirely, so nothing can be derived for it.
+ * Barcode Capture is the one Linux product we can confirm from the docs tree; the
+ * rest of Linux stays empty until Linux is added to the SSOT. Remove this the day
+ * it is, rather than letting it become a second source of truth.
+ */
+const LINUX_CONFIRMED = new Set(['barcode-capture']);
+
+function segToDisplay(seg: string): string {
+  return PLATFORMS.find((p) => p.seg === seg)?.name ?? 'Web';
+}
+
+function normalizeSeg(raw: string): string | null {
+  const v = raw.trim().toLowerCase();
+  if (!v) return null;
+  const seg = ALIASES[v] ?? v;
+  return PLATFORMS.some((p) => p.seg === seg) ? seg : null;
+}
+
+/** ?framework= wins, then the platform the reader last chose anywhere on the site. */
+function initialSeg(): string {
+  if (typeof window === 'undefined') return DEFAULT_SEG;
+  try {
+    const fromQuery = new URLSearchParams(window.location.search).get('framework') || '';
+    const fromStore = window.localStorage.getItem('framework') || '';
+    return normalizeSeg(fromQuery) ?? normalizeSeg(fromStore) ?? DEFAULT_SEG;
+  } catch {
+    return DEFAULT_SEG;
+  }
+}
+
+function productOnFramework(productKey: string, displayName: string): boolean {
+  const p = (productsData as ProductEntry[]).find((x) => x.key === productKey);
+  const entry = p?.frameworks?.[displayName];
+  const v = String(entry?.version ?? '')
+    .trim()
+    .toLowerCase();
+  return Boolean(entry) && v !== '' && v !== 'n/a';
+}
+
+function isAvailable(productKey: string, seg: string): boolean {
+  const hosted = HOSTED[productKey];
+  if (hosted) return hosted.segs === 'all' || hosted.segs.includes(seg);
+  if (seg === 'linux') return LINUX_CONFIRMED.has(productKey);
+  return productOnFramework(productKey, segToDisplay(seg));
+}
+
+function hrefFor(opt: Option, seg: string): string {
+  const hosted = HOSTED[opt.product];
+  if (hosted) return hosted.href;
+  return opt.href.replace('/sdks/web/', `/sdks/${seg}/`);
+}
+
+/** "About X" for an overview page, "Get started with X" for a task page. */
+function ctaLabel(name: string, href: string): string {
+  return /\/intro\/?$|\/overview\/?$|getting-started/.test(href)
+    ? `About ${name} →`
+    : `Get started with ${name} →`;
+}
+
+export default function IntentNavigator(): JSX.Element {
+  // Starts at the default on both server and client, so the first client render
+  // matches the server exactly; the effect below then applies the reader's own
+  // platform. Doing it in an effect rather than during render is what keeps
+  // hydration from mismatching.
+  const [seg, setSeg] = React.useState(DEFAULT_SEG);
+  const [typeId, setTypeId] = React.useState<string | null>(null);
+  const [goalIdx, setGoalIdx] = React.useState<number | null>(null);
+  const [expertOpen, setExpertOpen] = React.useState(false);
+
+  const step2Ref = React.useRef<HTMLDivElement>(null);
+  const step3Ref = React.useRef<HTMLDivElement>(null);
+  const step1Ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => setSeg(initialSeg()), []);
+
+  const availableOptions = (g: Goal) => g.options.filter((o) => isAvailable(o.product, seg));
+  const availableGoals = (st: ScanType) => st.goals.filter((g) => availableOptions(g).length > 0);
+  const availableTypes = () => SCAN_TYPES.filter((st) => availableGoals(st).length > 0);
+
+  // Changing platform re-filters everything and restarts the flow, so a reader can
+  // never be left looking at a product that is unavailable where they build.
+  const pickPlatform = (next: string) => {
+    setSeg(next);
+    setTypeId(null);
+    setGoalIdx(null);
+    try {
+      // The site-wide key, so the rest of the docs honour the same choice.
+      window.localStorage.setItem('framework', next);
+    } catch {
+      /* private mode */
+    }
+  };
+
+  const scrollTo = (r: React.RefObject<HTMLDivElement>) =>
+    r.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+  const chosenType = availableTypes().find((st) => st.id === typeId) ?? null;
+  const chosenGoal =
+    chosenType && goalIdx != null ? availableGoals(chosenType)[goalIdx] ?? null : null;
+
+  const expertProducts = React.useMemo(() => {
+    const seen = new Set<string>();
+    const out: Option[] = [];
+    SCAN_TYPES.forEach((st) =>
+      st.goals.forEach((g) =>
+        g.options.forEach((o) => {
+          if (!seen.has(o.product) && isAvailable(o.product, seg)) {
+            seen.add(o.product);
+            out.push(o);
+          }
+        }),
+      ),
+    );
+    return out;
+  }, [seg]);
+
+  // ------------------------------------------------------------------ interactive
+  return (
+    <div className={styles.nav}>
+      {/* 1 — platform */}
+      <div className={styles.fwbar}>
+        <div className={styles.fwLabel}>
+          Pick your platform — recommendations show only products available there, linked to that
+          platform&apos;s current-version docs
+        </div>
+        <div className={styles.pills} role="group" aria-label="Choose your platform">
+          {PLATFORMS.map((p) => (
+            <button
+              key={p.seg}
+              type="button"
+              className={styles.pill}
+              aria-pressed={p.seg === seg}
+              onClick={() => pickPlatform(p.seg)}
+            >
+              {p.name}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 2 — expert shortcut */}
+      <div className={styles.expertbar}>
+        <button
+          type="button"
+          className={styles.expertLink}
+          aria-expanded={expertOpen}
+          onClick={() => setExpertOpen((v) => !v)}
+        >
+          Already know your product? Jump straight in →
+        </button>
+        {/* Always in the DOM, hidden with CSS rather than unmounted: this grid is
+            every product link, so keeping it server-rendered is what puts those
+            links in the static HTML for search and the retrieval layer. */}
+        <div
+          className={`${styles.expert}${expertOpen ? '' : ` ${styles.expertHidden}`}`}
+          role="group"
+          aria-label="Direct links to each product"
+        >
+          {expertProducts.length === 0 ? (
+            <p className={styles.stHint}>No products available on this platform yet.</p>
+          ) : (
+            expertProducts.map((o) => (
+              <Link key={o.product} className={styles.xitem} to={hrefFor(o, seg)}>
+                <span className={styles.xname}>{o.name}</span>
+                <span className={styles.xhref}>{hrefFor(o, seg)}</span>
+              </Link>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* 3 — the three steps */}
+      <div className={styles.steps}>
+        <div className={styles.step} ref={step1Ref}>
+          <div className={styles.stepHead}>
+            <span className={styles.stepNum}>1</span>
+            <h3 className={styles.stepTitle}>What do you want to scan?</h3>
+          </div>
+          {availableTypes().length === 0 ? (
+            <p className={styles.stHint}>No products available on this platform yet.</p>
+          ) : (
+            <div className={styles.cards}>
+              {availableTypes().map((st) => (
+                <button
+                  key={st.id}
+                  type="button"
+                  className={styles.card}
+                  aria-pressed={st.id === typeId}
+                  onClick={() => {
+                    setTypeId(st.id);
+                    setGoalIdx(null);
+                    requestAnimationFrame(() => scrollTo(step2Ref));
+                  }}
+                >
+                  <span className={styles.cardIcon} aria-hidden="true">
+                    {st.icon}
+                  </span>
+                  <span className={styles.cardTitle}>{st.label}</span>
+                  <span className={styles.cardHint}>{st.hint}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {chosenType && (
+          <div className={styles.step} ref={step2Ref}>
+            <div className={styles.stepHead}>
+              <span className={styles.stepNum}>2</span>
+              <h3 className={styles.stepTitle}>What&apos;s the task?</h3>
+            </div>
+            <div className={styles.goalList}>
+              {availableGoals(chosenType).map((g, gi) => (
+                <button
+                  key={gi}
+                  type="button"
+                  className={styles.goal}
+                  aria-pressed={gi === goalIdx}
+                  onClick={() => {
+                    setGoalIdx(gi);
+                    requestAnimationFrame(() => scrollTo(step3Ref));
+                  }}
+                >
+                  <span className={styles.goalTask}>{g.task}</span>
+                  <span className={styles.goalContext}>{g.context}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {chosenGoal && (
+          <div className={styles.step} ref={step3Ref}>
+            <div className={styles.stepHead}>
+              <span className={styles.stepNum}>3</span>
+              <h3 className={styles.stepTitle}>Recommended — go straight to the docs</h3>
+            </div>
+            <div className={styles.recos}>
+              {availableOptions(chosenGoal).map((o) => {
+                const href = hrefFor(o, seg);
+                return (
+                  <div key={o.product} className={styles.reco}>
+                    <span className={styles.recoName}>{o.name}</span>
+                    <span className={`${styles.badge} ${styles[`badge_${o.badge}`]}`}>
+                      {o.delivery}
+                    </span>
+                    <Link className={styles.recoCta} to={href}>
+                      {ctaLabel(o.name, href)}
+                    </Link>
+                    <span className={styles.recoPath}>{href}</span>
+                  </div>
+                );
+              })}
+            </div>
+            <button
+              type="button"
+              className={styles.reset}
+              onClick={() => {
+                setTypeId(null);
+                setGoalIdx(null);
+                requestAnimationFrame(() => scrollTo(step1Ref));
+              }}
+            >
+              ↺ start over
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 4 — why this matters */}
+      <aside className={styles.parity}>
+        <h3 className={styles.parityTitle}>Why this matters</h3>
+        <p className={styles.parityBody}>
+          <strong>Docs ↔ signup parity.</strong> Both surfaces read this one taxonomy, so “scan one
+          item → SparkScan” means the same everywhere. When the signup dashboard links into the
+          docs it passes the chosen platform — the same deep-link logic used here — so the reader
+          lands on <em>their</em> platform&apos;s get-started, not a generic page.{' '}
+          <strong>Additive and URL-preserving:</strong> a new entry point, and no existing docs URL
+          changes.
+        </p>
+      </aside>
+
+      {/* 5 — the Linux caveat, shown only when it applies */}
+      {seg === 'linux' && (
+        <p className={styles.lnote}>
+          <strong>Linux is not yet in the product registry</strong>, so only the product we can
+          confirm for Linux is listed. The rest stays hidden until Linux is added, rather than
+          guessed at.
+        </p>
+      )}
+
+      <p className={styles.provenance}>
+        Product availability and links are derived from products.json — the product source of
+        truth. The intent taxonomy mirrors the Unified-Signup PRD, so docs and signup recommend the
+        same product for the same intent.
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/IntentNavigator/styles.module.scss b/src/components/IntentNavigator/styles.module.scss
new file mode 100644
index 0000000000..c4fdfb3f0b
--- /dev/null
+++ b/src/components/IntentNavigator/styles.module.scss
@@ -0,0 +1,523 @@
+/** Component: IntentNavigator */
+
+@import '../../css/_mixins.scss';
+
+/**
+ * Ported from the Phase E demo, restyled in the site's own idiom.
+ *
+ * The demo carried a private hex palette. Everything here is expressed in the
+ * tokens custom.scss already defines, and those tokens ALREADY FLIP between
+ * themes (html[data-theme="dark"] redefines --light-black, --light-blue-100,
+ * --light-gray-100, --light-blue-60, --nav-border, --frameworksBgLight), so light
+ * and dark come for free rather than from a second, parallel theme.
+ *
+ * Only the four delivery badges need explicit dark values, because the green and
+ * blue *soft* tokens are not among the ones custom.scss re-declares for dark.
+ * Those use the `dark` mixin from _mixins.scss.
+ *
+ * Deliberately NOT following card.module.scss in one respect: that file consumes
+ * --spacing-2, --spacing-6 and --neutral-0, none of which are defined anywhere in
+ * this repo. Spacing here is explicit so nothing silently resolves to nothing.
+ */
+
+:root {
+  /* Surfaces and lines - all four of these flip for dark in custom.scss. */
+  --in-panel: var(--frameworksBgLight);
+  --in-raised: var(--light-blue-60);
+  --in-line: var(--nav-border);
+  --in-page: var(--ifm-background-color);
+
+  /* Text. --light-black is the ink token; it flips to #f0f0f0 for dark. */
+  --in-ink: var(--light-black);
+  --in-muted: var(--light-gray-100);
+  --in-faint: var(--toc-title);
+
+  /* Accent. #0a3390 light, #2385ec dark. */
+  --in-accent: var(--light-blue-100);
+  --in-accent-soft: var(--light-blue-60);
+
+  --in-radius: 12px;
+  --in-radius-sm: 9px;
+  --in-mono: var(--ifm-font-family-monospace);
+
+  /* Delivery badges - the one place the site has no dark equivalent. */
+  --in-badge-ui-ink: var(--light-green-100);
+  --in-badge-ui-bg: var(--light-green-60);
+  --in-badge-sdk-ink: var(--light-blue-100);
+  --in-badge-sdk-bg: var(--light-blue-60);
+  --in-badge-nocode-ink: var(--light-yellow-120);
+  --in-badge-nocode-bg: var(--light-yellow-60);
+  --in-badge-hosted-ink: var(--light-gray-100);
+  --in-badge-hosted-bg: var(--light-gray-40);
+}
+
+@include dark {
+  --in-badge-ui-ink: #37c08b;
+  --in-badge-ui-bg: #0f2a21;
+  --in-badge-sdk-ink: #9cbeff;
+  --in-badge-sdk-bg: #13203f;
+  --in-badge-nocode-ink: #e0a44a;
+  --in-badge-nocode-bg: #2b2113;
+  --in-badge-hosted-ink: #a996ff;
+  --in-badge-hosted-bg: #1e1840;
+}
+
+.nav {
+  margin: 24px 0 0;
+  font-family: var(--font-family);
+
+  /* --------------------------------------------------- 1. platform bar */
+  .fwbar {
+    padding: 14px 16px;
+    background: var(--in-panel);
+    border: 1px solid var(--in-line);
+    border-radius: var(--in-radius);
+  }
+
+  .fwLabel {
+    margin-bottom: 9px;
+    font-family: var(--in-mono);
+    font-size: 10.5px;
+    line-height: 1.5;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--in-faint);
+  }
+
+  .pills {
+    @include flex-row(7px, center, null);
+    flex-wrap: wrap;
+  }
+
+  .pill {
+    @include transition;
+    padding: 5px 11px;
+    font-family: inherit;
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--in-muted);
+    background: var(--in-page);
+    border: 1px solid var(--in-line);
+    border-radius: var(--btn-radius);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--in-ink);
+      border-color: var(--in-accent);
+    }
+
+    &[aria-pressed='true'] {
+      color: #fff;
+      background: var(--in-accent);
+      border-color: var(--in-accent);
+    }
+  }
+
+  /* ----------------------------------------------- 2. expert shortcut */
+  .expertbar {
+    margin-top: 8px;
+  }
+
+  .expertLink {
+    padding: 6px 2px;
+    font-family: var(--in-mono);
+    font-size: 11.5px;
+    color: var(--in-accent);
+    background: none;
+    border: 0;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .expert {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+    gap: 8px;
+    margin-top: 8px;
+    padding: 12px 14px;
+    background: var(--in-panel);
+    border: 1px solid var(--in-line);
+    border-radius: var(--in-radius);
+  }
+
+  /* Closed by default. Hidden rather than unmounted (see the note in index.tsx),
+     so TWO classes and declared after `.expert` - a single-class rule placed
+     earlier loses to `.expert { display: grid }` on source order, which is
+     exactly what left the panel open on the first build. */
+  .expert.expertHidden {
+    display: none;
+  }
+
+  .xitem {
+    @include transition;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 9px 11px;
+    background: var(--in-page);
+    border: 1px solid var(--in-line);
+    border-radius: var(--in-radius-sm);
+    text-decoration: none;
+
+    &:hover {
+      border-color: var(--in-accent);
+      text-decoration: none;
+    }
+  }
+
+  .xname {
+    font-size: 13px;
+    font-weight: 650;
+    color: var(--in-ink);
+  }
+
+  .xhref {
+    font-family: var(--in-mono);
+    font-size: 10.5px;
+    color: var(--in-faint);
+    word-break: break-all;
+  }
+
+  /* ------------------------------------------------------ 3. the steps */
+  .steps {
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+    margin-top: 26px;
+  }
+
+  .stepHead {
+    @include flex-row(10px, center, null);
+    margin-bottom: 12px;
+  }
+
+  .stepNum {
+    display: grid;
+    place-items: center;
+    flex: 0 0 24px;
+    width: 24px;
+    height: 24px;
+    font-family: var(--in-mono);
+    font-size: 12.5px;
+    font-weight: 700;
+    color: var(--in-accent);
+    background: var(--in-accent-soft);
+    border-radius: 50%;
+  }
+
+  .stepTitle {
+    margin: 0;
+    font-size: 15.5px;
+    font-weight: 700;
+    color: var(--in-ink);
+  }
+
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: 12px;
+  }
+
+  .card {
+    @include transition;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    font-family: inherit;
+    text-align: left;
+    background: var(--in-panel);
+    border: 1px solid var(--in-line);
+    border-radius: var(--in-radius);
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--in-accent);
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px -12px var(--in-accent);
+    }
+
+    &[aria-pressed='true'] {
+      border-color: var(--in-accent);
+      box-shadow: inset 0 0 0 1px var(--in-accent);
+    }
+  }
+
+  .cardIcon {
+    font-size: 22px;
+    line-height: 1;
+  }
+
+  .cardTitle {
+    margin: 8px 0 3px;
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--in-ink);
+  }
+
+  .cardHint {
+    font-size: 12.5px;
+    color: var(--in-muted);
+  }
+
+  .goalList {
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+  }
+
+  .goal {
+    @include transition;
+    display: block;
+    width: 100%;
+    padding: 14px 16px;
+    font-family: inherit;
+    text-align: left;
+    background: var(--in-panel);
+    border: 1px solid var(--in-line);
+    border-radius: var(--in-radius);
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--in-accent);
+    }
+
+    &[aria-pressed='true'] {
+      border-color: var(--in-accent);
+      box-shadow: inset 0 0 0 1px var(--in-accent);
+    }
+  }
+
+  .goalTask {
+    display: block;
+    font-size: 14px;
+    font-weight: 650;
+    color: var(--in-ink);
+  }
+
+  .goalContext {
+    display: block;
+    margin-top: 2px;
+    font-size: 12px;
+    color: var(--in-faint);
+  }
+
+  .recos {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+    gap: 12px;
+  }
+
+  .reco {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 9px;
+    padding: 16px;
+    background: var(--in-panel);
+    border: 1px solid var(--in-line);
+    border-radius: var(--in-radius);
+  }
+
+  .recoName {
+    font-size: 16px;
+    font-weight: 750;
+    color: var(--in-ink);
+  }
+
+  .badge {
+    padding: 3px 9px;
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    border-radius: var(--btn-radius);
+  }
+
+  .badge_ui {
+    color: var(--in-badge-ui-ink);
+    background: var(--in-badge-ui-bg);
+  }
+
+  .badge_sdk {
+    color: var(--in-badge-sdk-ink);
+    background: var(--in-badge-sdk-bg);
+  }
+
+  .badge_nocode {
+    color: var(--in-badge-nocode-ink);
+    background: var(--in-badge-nocode-bg);
+  }
+
+  .badge_hosted {
+    color: var(--in-badge-hosted-ink);
+    background: var(--in-badge-hosted-bg);
+  }
+
+  .recoCta {
+    font-size: 13.5px;
+    font-weight: 650;
+  }
+
+  .recoPath {
+    align-self: stretch;
+    padding: 6px 8px;
+    font-family: var(--in-mono);
+    font-size: 11px;
+    color: var(--in-faint);
+    word-break: break-all;
+    background: var(--in-raised);
+    border-radius: 6px;
+  }
+
+  .reset {
+    margin-top: 14px;
+    padding: 0;
+    font-family: var(--in-mono);
+    font-size: 11.5px;
+    color: var(--in-accent);
+    background: none;
+    border: 0;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  /* ---------------------------------------------- 4. why this matters */
+  .parity {
+    margin-top: 30px;
+    padding: 18px 20px;
+    background: var(--in-raised);
+    border: 1px solid var(--in-line);
+    border-left: 3px solid var(--in-accent);
+    border-radius: var(--in-radius);
+  }
+
+  .parityTitle {
+    margin: 0 0 6px;
+    font-size: 14.5px;
+    color: var(--in-ink);
+  }
+
+  .parityBody {
+    margin: 0;
+    font-size: 13.5px;
+    color: var(--in-muted);
+  }
+
+  /* ------------------------------- 5. Linux caveat and provenance */
+  .lnote {
+    margin-top: 12px;
+    padding: 8px 11px;
+    font-size: 12.5px;
+    line-height: 1.45;
+    color: var(--in-badge-nocode-ink);
+    background: var(--in-badge-nocode-bg);
+    border: 1px solid var(--in-badge-nocode-ink);
+    border-radius: var(--in-radius-sm);
+  }
+
+  .provenance {
+    margin-top: 18px;
+    padding-top: 14px;
+    font-family: var(--in-mono);
+    font-size: 11px;
+    line-height: 1.5;
+    color: var(--in-faint);
+    border-top: 1px solid var(--in-line);
+  }
+
+  /* ------------------------ the flat, pre-hydration / no-JS fallback */
+  .flatType {
+    margin-bottom: 28px;
+  }
+
+  .flatIcon {
+    margin-right: 8px;
+  }
+
+  .stTitle {
+    margin: 0 0 2px;
+    font-size: 17px;
+    color: var(--in-ink);
+  }
+
+  .stHint {
+    margin: 0 0 12px;
+    font-size: 13.5px;
+    color: var(--in-muted);
+  }
+
+  .flatGoal {
+    padding: 10px 0 12px;
+    border-top: 1px solid var(--in-line);
+  }
+
+  .flatOptions {
+    @include flex-row(8px, stretch, null);
+    flex-wrap: wrap;
+    margin-top: 8px;
+  }
+
+  .flatOption {
+    @include transition;
+    display: inline-flex;
+    flex-direction: column;
+    padding: 7px 11px;
+    font-size: 13px;
+    font-weight: 650;
+    background: var(--in-panel);
+    border: 1px solid var(--in-line);
+    border-radius: var(--in-radius-sm);
+    text-decoration: none;
+
+    &:hover {
+      border-color: var(--in-accent);
+      text-decoration: none;
+    }
+  }
+
+  .flatDelivery {
+    font-size: 11px;
+    font-weight: 400;
+    color: var(--in-faint);
+  }
+
+  /* The demo's rise-in, honoured only where motion is welcome. */
+  @media (prefers-reduced-motion: no-preference) {
+    .step {
+      animation: intentRise 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both;
+    }
+  }
+
+  /* Single column on phones: the pills wrap on their own, but the card,
+     recommendation and expert grids need it. */
+  @media (max-width: 480px) {
+    .cards,
+    .recos,
+    .expert {
+      grid-template-columns: 1fr;
+    }
+
+    .fwLabel {
+      letter-spacing: 0.06em;
+    }
+  }
+}
+
+@keyframes intentRise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
diff --git a/src/components/ProductChooser/index.tsx b/src/components/ProductChooser/index.tsx
new file mode 100644
index 0000000000..4cf95ff186
--- /dev/null
+++ b/src/components/ProductChooser/index.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import productsData from '@site/src/data/products.json';
+import styles from './styles.module.css';
+
+/**
+ * ProductChooser — a "Choose this if / Consider another product if" decision
+ * block plus a supported-frameworks matrix, for product-overview pages.
+ *
+ * It is fed entirely from single sources of truth, so the visible block can
+ * never drift from the machine-readable metadata:
+ *   - `user_intents` and `not_for` come from the page's own frontmatter
+ *     (the same fields that power GEO/AI routing).
+ *   - the supported-frameworks matrix comes from `src/data/products.json`
+ *     (the product registry the Agent Skills pages already use).
+ *
+ * Drop it on any product-overview page and pass the page's frontmatter, which
+ * Docusaurus makes available in MDX scope as `frontMatter`:
+ *
+ *   <ProductChooser frontMatter={frontMatter} />
+ *
+ * Renders nothing if `product`, `user_intents`, and `not_for` are all unset.
+ */
+
+interface FrameworkEntry {
+  version?: string;
+  apiUrl?: string;
+}
+
+interface ProductEntry {
+  key: string;
+  name: string;
+  frameworks?: Record<string, FrameworkEntry> | string[];
+}
+
+// products.json marks a framework the product does NOT support with version "n/a"
+// (e.g. SparkScan on Titanium). Treat those as unsupported.
+function isSupported(entry: FrameworkEntry): boolean {
+  const v = String(entry?.version ?? '').trim().toLowerCase();
+  return v !== '' && v !== 'n/a';
+}
+
+// Map the page's `framework` frontmatter value to the display key products.json uses.
+const FW_TO_PJ: Record<string, string> = {
+  web: 'Web', ios: 'iOS', android: 'Android', 'react-native': 'React Native',
+  flutter: 'Flutter', cordova: 'Cordova', capacitor: 'Capacitor', titanium: 'Titanium',
+  'net/ios': '.NET iOS', 'net/android': '.NET Android',
+};
+
+// Best doc URL for a product on the current framework: the framework's own page,
+// else Web, else any framework the product supports. All from products.json (SSOT).
+function apiUrlFor(product: ProductEntry, fw: string): string | null {
+  const fks = product.frameworks;
+  if (!fks || Array.isArray(fks)) return null;
+  for (const name of [FW_TO_PJ[fw], 'Web']) {
+    const e = name ? fks[name] : undefined;
+    if (e && isSupported(e) && e.apiUrl && e.apiUrl !== 'n/a') return e.apiUrl;
+  }
+  const any = Object.values(fks).find((e) => isSupported(e) && e.apiUrl && e.apiUrl !== 'n/a');
+  return any ? (any.apiUrl as string) : null;
+}
+
+// If a `not_for` line names another product (e.g. "…— use MatrixScan Count"),
+// turn that product name into a framework-aware link to its About page. Matches
+// the LONGEST product name present so "MatrixScan Count" wins over "MatrixScan".
+// Falls back to plain text when there's no match or no resolvable URL.
+function renderNotFor(text: string, fw: string): React.ReactNode {
+  const match = (productsData as ProductEntry[])
+    .filter((p) => p.name && text.includes(p.name))
+    .sort((a, b) => b.name.length - a.name.length)[0];
+  if (!match) return text;
+  const url = apiUrlFor(match, fw);
+  if (!url) return text;
+  const i = text.indexOf(match.name);
+  return (
+    <>
+      {text.slice(0, i)}
+      <Link to={url}>{match.name}</Link>
+      {text.slice(i + match.name.length)}
+    </>
+  );
+}
+
+interface ProductChooserProps {
+  frontMatter?: Record<string, unknown>;
+}
+
+export default function ProductChooser({ frontMatter = {} }: ProductChooserProps): JSX.Element | null {
+  const fm = frontMatter;
+  const fw = (fm.framework as string) || 'web';
+
+  const intents = (fm.user_intents as string[]) || [];
+  const notFor = (fm.not_for as string[]) || [];
+  const productKey = Array.isArray(fm.product)
+    ? (fm.product[0] as string)
+    : (fm.product as string | undefined);
+
+  const product = (productsData as ProductEntry[]).find((p) => p.key === productKey);
+  const name = product?.name || 'this product';
+  const frameworks = product?.frameworks
+    ? Array.isArray(product.frameworks)
+      ? product.frameworks
+      : Object.entries(product.frameworks)
+          .filter(([, entry]) => isSupported(entry))
+          .map(([name]) => name)
+    : [];
+
+  if (!intents.length && !notFor.length && !frameworks.length) return null;
+
+  return (
+    <aside className={styles.chooser} aria-label={`Is ${name} the right product?`}>
+      {(intents.length > 0 || notFor.length > 0) && (
+        <div className={styles.decide}>
+          {intents.length > 0 && (
+            <div className={`${styles.col} ${styles.good}`}>
+              <h4 className={styles.colTitle}>Choose {name} if you want to</h4>
+              <ul>
+                {intents.map((t, i) => (
+                  <li key={i}>{t}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {notFor.length > 0 && (
+            <div className={`${styles.col} ${styles.bad}`}>
+              <h4 className={styles.colTitle}>Consider another product if you need to</h4>
+              <ul>
+                {notFor.map((t, i) => (
+                  <li key={i}>{renderNotFor(t, fw)}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+      {frameworks.length > 0 && (
+        <div className={styles.matrix}>
+          <span className={styles.matrixLabel}>Available on</span>
+          <span className={styles.chips}>
+            {frameworks.map((f, i) => (
+              <span key={i} className={styles.chip}>
+                {f}
+              </span>
+            ))}
+          </span>
+        </div>
+      )}
+    </aside>
+  );
+}
diff --git a/src/components/ProductChooser/styles.module.css b/src/components/ProductChooser/styles.module.css
new file mode 100644
index 0000000000..8deb6f42e2
--- /dev/null
+++ b/src/components/ProductChooser/styles.module.css
@@ -0,0 +1,102 @@
+.chooser {
+  margin: 1.5rem 0 2rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--ifm-background-surface-color);
+}
+
+.decide {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: var(--ifm-color-emphasis-200);
+}
+
+@media (max-width: 700px) {
+  .decide {
+    grid-template-columns: 1fr;
+  }
+}
+
+.col {
+  background: var(--ifm-background-surface-color);
+  padding: 1rem 1.25rem 1.1rem;
+}
+
+.colTitle {
+  margin: 0 0 0.6rem;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.colTitle::before {
+  content: '';
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 50%;
+  flex: none;
+}
+
+.good .colTitle {
+  color: var(--ifm-color-success-darker);
+}
+.good .colTitle::before {
+  background: var(--ifm-color-success);
+}
+
+.bad .colTitle {
+  color: var(--ifm-color-warning-darker);
+}
+.bad .colTitle::before {
+  background: var(--ifm-color-warning);
+}
+
+.col ul {
+  margin: 0;
+  padding-left: 1.1rem;
+}
+
+.col li {
+  margin: 0.35rem 0;
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
+.matrix {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.6rem;
+  padding: 0.8rem 1.25rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.matrixLabel {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.chip {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 0.15rem 0.55rem;
+  border-radius: 999px;
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-emphasis-800);
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
diff --git a/src/data/intents.json b/src/data/intents.json
new file mode 100644
index 0000000000..12f95c87fa
--- /dev/null
+++ b/src/data/intents.json
@@ -0,0 +1,88 @@
+{
+  "_comment": "Intent taxonomy for the docs 'Start here' navigator. Mirrors the Unified-Signup PRD product quiz (scan type -> task -> delivery -> product) so the docs entry point and the signup quiz recommend the same product for the same intent. `href` is the verified WEB landing for each product; IntentNavigator rewrites the /sdks/web/ segment to the reader's selected platform when products.json says that platform has the product. `badge` selects the delivery-style chip: ui | sdk | nocode | hosted. Keep in sync with the PRD decision matrix.",
+  "scanTypes": [
+    {
+      "id": "barcodes",
+      "icon": "▦",
+      "label": "Barcodes",
+      "hint": "QR, EAN-13, Code 128, Data Matrix…",
+      "goals": [
+        {
+          "task": "Scan one item at a time",
+          "context": "point of sale, lookup, list-building",
+          "options": [
+            { "product": "sparkscan", "name": "SparkScan", "delivery": "Ready-made UI", "badge": "ui", "href": "/sdks/web/sparkscan/intro" },
+            { "product": "barcode-capture", "name": "Barcode Capture", "delivery": "Full-control SDK", "badge": "sdk", "href": "/sdks/web/barcode-capture/get-started" },
+            { "product": "express", "name": "Scandit Express", "delivery": "No code", "badge": "nocode", "href": "/hosted/express/overview" }
+          ]
+        },
+        {
+          "task": "Scan and tally many quickly",
+          "context": "stocktake, bulk",
+          "options": [
+            { "product": "matrixscan-batch", "name": "MatrixScan Batch", "delivery": "Full-control SDK", "badge": "sdk", "href": "/sdks/web/matrixscan/intro" },
+            { "product": "express", "name": "Scandit Express", "delivery": "No code", "badge": "nocode", "href": "/hosted/express/overview" }
+          ]
+        },
+        {
+          "task": "Count and check against a list",
+          "context": "proof of delivery, receiving",
+          "options": [
+            { "product": "matrixscan-count", "name": "MatrixScan Count", "delivery": "Full-control SDK", "badge": "sdk", "href": "/sdks/web/matrixscan-count/intro" },
+            { "product": "express", "name": "Scandit Express", "delivery": "No code", "badge": "nocode", "href": "/hosted/express/overview" }
+          ]
+        },
+        {
+          "task": "Find a specific item among many",
+          "context": "order picking",
+          "options": [
+            { "product": "matrixscan-find", "name": "MatrixScan Find", "delivery": "Guided AR search", "badge": "sdk", "href": "/sdks/web/matrixscan-find/intro" },
+            { "product": "matrixscan-pick", "name": "MatrixScan Pick", "delivery": "Pick workflow", "badge": "sdk", "href": "/sdks/web/matrixscan-pick/intro" },
+            { "product": "express", "name": "Scandit Express", "delivery": "No code", "badge": "nocode", "href": "/hosted/express/overview" }
+          ]
+        },
+        {
+          "task": "Show custom info on each item",
+          "context": "price, stock, sorting overlaid on items",
+          "options": [
+            { "product": "matrixscan-ar", "name": "MatrixScan AR", "delivery": "AR overlays", "badge": "sdk", "href": "/sdks/web/matrixscan-ar/intro" },
+            { "product": "express", "name": "Scandit Express", "delivery": "No code", "badge": "nocode", "href": "/hosted/express/overview" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "labels",
+      "icon": "🏷",
+      "label": "Text & barcodes on labels",
+      "hint": "expiry, price, lot number, address",
+      "goals": [
+        {
+          "task": "Capture fields from a label",
+          "context": "expiry, price, lot, address",
+          "options": [
+            { "product": "smart-label-capture", "name": "Smart Label Capture", "delivery": "Full-control SDK", "badge": "sdk", "href": "/sdks/web/label-capture/intro" },
+            { "product": "express", "name": "Scandit Express", "delivery": "No code", "badge": "nocode", "href": "/hosted/express/overview" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "id",
+      "icon": "🪪",
+      "label": "Identity documents",
+      "hint": "passports, driver's licenses, ID cards",
+      "goals": [
+        {
+          "task": "Scan and extract ID data",
+          "context": "onboarding, identity & age checks",
+          "options": [
+            { "product": "id-capture", "name": "ID Capture", "delivery": "Full-control SDK", "badge": "sdk", "href": "/sdks/web/id-capture/intro" },
+            { "product": "id-bolt", "name": "ID Bolt", "delivery": "No code (web)", "badge": "hosted", "href": "/hosted/id-bolt/getting-started" },
+            { "product": "express", "name": "Scandit Express", "delivery": "No code", "badge": "nocode", "href": "/hosted/express/overview" }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/data/troubleshooting-errors.json b/src/data/troubleshooting-errors.json
new file mode 100644
index 0000000000..65f3d2598d
--- /dev/null
+++ b/src/data/troubleshooting-errors.json
@@ -0,0 +1,109 @@
+{
+  "_comment": "DEMO SHELL DATA. Every entry below is an ILLUSTRATIVE SAMPLE with a SAMPLE-* code, not a real Scandit error. Real content (literal console messages + verified fixes) will be supplied from the support/licensing ticket data and replace these. The `match` array holds the invariant substrings used for paste-to-filter matching.",
+  "entries": [
+    {
+      "id": "sample-license-placeholder",
+      "code": "SAMPLE-LICENSE-01",
+      "area": "Licensing & activation",
+      "sample": true,
+      "title": "License key placeholder was never replaced",
+      "message": "A valid license key is required. The provided key looks like the documentation placeholder.",
+      "match": [
+        "enter your scandit license key here",
+        "a valid license key is required",
+        "no license key"
+      ],
+      "cause": "The code still contains the docs placeholder `-- ENTER YOUR SCANDIT LICENSE KEY HERE --` instead of a real key.",
+      "fix": "Paste your real key into the license field at the top of the get-started page (or set it directly in the DataCaptureContext call). Get a free key from the trial dashboard if you don't have one.",
+      "link": "/sdks/ios/sparkscan/get-started/",
+      "linkLabel": "Go to the license step"
+    },
+    {
+      "id": "sample-license-invalid",
+      "code": "SAMPLE-LICENSE-02",
+      "area": "Licensing & activation",
+      "sample": true,
+      "title": "License key is invalid or malformed",
+      "message": "License validation failed: the provided key could not be parsed.",
+      "match": [
+        "license validation failed",
+        "could not be parsed",
+        "invalid license key",
+        "key is invalid"
+      ],
+      "cause": "The key string is truncated, has extra whitespace/line breaks, or was copied only partially.",
+      "fix": "Re-copy the entire key from the dashboard as a single line with no wrapping, and make sure no characters were dropped when pasting.",
+      "link": "/sdks/ios/sparkscan/get-started/",
+      "linkLabel": "Go to the license step"
+    },
+    {
+      "id": "sample-license-expired",
+      "code": "SAMPLE-LICENSE-03",
+      "area": "Licensing & activation",
+      "sample": true,
+      "title": "License has expired",
+      "message": "This license key has expired.",
+      "match": [
+        "license key has expired",
+        "license expired",
+        "expired"
+      ],
+      "cause": "The trial or subscription tied to this key has ended.",
+      "fix": "Generate a new key or extend your trial in the dashboard, then replace the key in your app.",
+      "link": "/sdks/ios/sparkscan/get-started/",
+      "linkLabel": "Go to the license step"
+    },
+    {
+      "id": "sample-license-bundle-mismatch",
+      "code": "SAMPLE-LICENSE-04",
+      "area": "Licensing & activation",
+      "sample": true,
+      "title": "License is not valid for this application",
+      "message": "The license key is not valid for this application's bundle identifier.",
+      "match": [
+        "not valid for this application",
+        "bundle identifier",
+        "app id mismatch",
+        "package name"
+      ],
+      "cause": "The key was issued for a different bundle ID / package name than the app it is running in.",
+      "fix": "Create a key for the current bundle identifier (or add this bundle ID to the existing key's allowed apps in the dashboard).",
+      "link": "/sdks/ios/sparkscan/get-started/",
+      "linkLabel": "Go to the license step"
+    },
+    {
+      "id": "sample-license-feature",
+      "code": "SAMPLE-LICENSE-05",
+      "area": "Licensing & activation",
+      "sample": true,
+      "title": "Enabled feature is not included in the license",
+      "message": "The license does not include the enabled functionality.",
+      "match": [
+        "does not include the enabled",
+        "feature not licensed",
+        "functionality is not licensed"
+      ],
+      "cause": "The code enables a mode (for example a specific scanning capability) that this key is not entitled to.",
+      "fix": "Either disable the unlicensed mode, or request a key that includes the feature you need.",
+      "link": "/sdks/ios/sparkscan/get-started/",
+      "linkLabel": "Go to the license step"
+    },
+    {
+      "id": "sample-camera-permission",
+      "code": "SAMPLE-RUNTIME-01",
+      "area": "Camera & runtime",
+      "sample": true,
+      "title": "Camera permission was denied",
+      "message": "Camera access denied. The scanner cannot start without camera permission.",
+      "match": [
+        "camera access denied",
+        "camera permission",
+        "cannot start without camera"
+      ],
+      "cause": "The app did not request, or the user declined, camera permission — so the preview never opens.",
+      "fix": "Add the camera usage description to your app configuration and request permission before starting the scanner. On device, re-enable camera access for the app in system settings.",
+      "link": "/sdks/ios/sparkscan/get-started/",
+      "linkLabel": "Back to get-started"
+    }
+  ]
+}
diff --git a/src/pages/component-preview.tsx b/src/pages/component-preview.tsx
new file mode 100644
index 0000000000..9236a45c5a
--- /dev/null
+++ b/src/pages/component-preview.tsx
@@ -0,0 +1,213 @@
+import React from "react";
+import Head from "@docusaurus/Head";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import ProductChooser from "@site/src/components/ProductChooser";
+import ErrorCodeFinder from "@site/src/components/ErrorCodeFinder";
+import PageFeedback from "@site/src/components/PageFeedback";
+
+/**
+ * /component-preview - a launcher for the design review.
+ *
+ * IMPORTANT: this page does NOT re-render the three components itself, because
+ * doing that changed how they looked. Two of them are built to sit on a DOCS page,
+ * where they inherit the docs markdown wrapper (markdown.scss, doc-content.scss,
+ * doc-admonition.scss) plus the docs column width and typography. Rendering them on
+ * a src/pages route dropped all of that, so the earlier version of this page showed
+ * something subtly different from what was actually built.
+ *
+ * So the canonical review surfaces are the ORIGINAL pages, copied verbatim from
+ * their own branches, and this page just links to them. The only thing rendered
+ * inline is the ProductChooser framework variant that the real page cannot show
+ * (the same product as seen by a Web reader), clearly labelled as an extra.
+ *
+ * Not documentation: no sidebar entry, noindex, and removed when the PR closes.
+ */
+
+const SPARKSCAN_WEB = {
+  framework: "web",
+  product: "sparkscan",
+  user_intents: [
+    "scan one barcode at a time on iOS",
+    "add a ready-made scanning UI without building your own",
+    "scan items one by one to build a list (inventory, receiving)",
+  ],
+  not_for: [
+    "scan and count many barcodes at once — use MatrixScan Count",
+    "build a fully custom scanning UI — use Barcode Capture",
+  ],
+};
+
+const CARD: React.CSSProperties = {
+  border: "1px solid var(--ifm-toc-border-color)",
+  borderRadius: 8,
+  padding: "1.1rem 1.3rem",
+  marginBottom: "1.1rem",
+};
+
+function Card({
+  n,
+  title,
+  to,
+  intent,
+  source,
+  children,
+}: {
+  n: string;
+  title: string;
+  to: string;
+  intent: string;
+  source: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div style={CARD}>
+      <h3 style={{ margin: "0 0 .35rem" }}>
+        {n}. <Link to={to}>{title}</Link>
+      </h3>
+      <p style={{ margin: "0 0 .5rem", fontSize: ".92rem" }}>
+        <strong>Serves:</strong> {intent}
+      </p>
+      <p style={{ margin: "0 0 .5rem", fontSize: ".8rem", opacity: 0.6 }}>
+        <code>{to}</code> — from <code>{source}</code>
+      </p>
+      {children}
+    </div>
+  );
+}
+
+export default function ComponentPreview(): JSX.Element {
+  return (
+    <Layout
+      title="Component preview (design review)"
+      description="Design review surface for the three documentation IA change proposals."
+    >
+      <Head>
+        <meta name="robots" content="noindex, nofollow" />
+      </Head>
+
+      <main className="container margin-vert--lg" style={{ maxWidth: 860 }}>
+        <h1>Component preview</h1>
+        <p style={{ fontSize: "1.05rem" }}>
+          Three proposed documentation components, each on its own real page so it
+          renders exactly as built.{" "}
+          <strong>Use the light/dark toggle in the header</strong> — all three have to
+          work in both.
+        </p>
+        <p style={{ fontSize: ".9rem", opacity: 0.7 }}>
+          The pages below are copied verbatim from the branches they were built on.
+          Nothing here is part of the documentation: none of it is in a sidebar, this
+          launcher is <code>noindex</code>, and the whole preview disappears when the
+          pull request hosting it is closed.
+        </p>
+
+        <hr />
+
+        <Card
+          n="1"
+          title="Start here — the intent navigator"
+          to="/start"
+          intent="“I know what I want to scan, but not which Scandit product does it.”"
+          source="docs/phase-e-intent-navigator · docs/start.mdx"
+        >
+          <p style={{ margin: 0, fontSize: ".9rem" }}>
+            The page carries the framing copy and — at the bottom — the shortcut for
+            readers who already know their product. Both belong to the page, not the
+            component, which is why they were missing when this preview rendered the
+            component on its own.
+          </p>
+        </Card>
+
+        <Card
+          n="2"
+          title="SparkScan overview — the product chooser"
+          to="/sdks/ios/sparkscan/intro"
+          intent="“I have landed on a product page — is this the right one?” It answers in both directions: each ‘consider another product’ line links to the product that does serve that job."
+          source="docs/product-chooser (PR #417) · docs/sdks/ios/sparkscan/intro.md"
+        >
+          <p style={{ margin: 0, fontSize: ".9rem" }}>
+            This is the only page in the docs where the chooser is currently live, and
+            it reads the page’s own frontmatter for the two lists.
+          </p>
+        </Card>
+
+        <Card
+          n="3"
+          title="Troubleshooting — the error message finder"
+          to="/troubleshooting"
+          intent="“I have this exact error in my console and I want the fix now.” Paste a whole console line — matching ignores your own key or app id inside it."
+          source="0fd2e0a4 on docs/sparkscan-ios-rewrite · docs/troubleshooting.md"
+        >
+          <p style={{ margin: 0, fontSize: ".9rem" }}>
+            <strong>The entries are placeholder data</strong>, each tagged{" "}
+            <code>SAMPLE</code>, and the page says so. Please review the layout and the
+            interaction, not the wording — the verified catalogue exists and will
+            replace them.
+          </p>
+        </Card>
+
+        <hr />
+
+        <h2>One variant the real pages cannot show</h2>
+        <p>
+          The chooser is live on an iOS page only. Below is the same product as a{" "}
+          <strong>Web</strong> reader would see it, so you can compare how the
+          “Available on” row and the outgoing links follow the reader’s framework.
+        </p>
+        {/*
+          Wrapped in the docs markdown container on purpose. markdown.scss scopes its
+          rules to `#__docusaurus .theme-doc-markdown.markdown` — BOTH classes on one
+          element — so without this wrapper the chooser renders with page typography
+          instead of docs typography and looks subtly unlike its real home. This is
+          why it appeared different here in the first place.
+        */}
+        <div className="theme-doc-markdown markdown">
+          <ProductChooser frontMatter={SPARKSCAN_WEB} />
+        </div>
+
+        <hr />
+
+        <h2>The error message finder, in full</h2>
+        <p>
+          Paste a console line into the box — matching ignores your own licence key or
+          app id inside it, so a whole pasted line still finds its entry.
+        </p>
+        <div
+          style={{
+            border: "1px solid var(--ifm-color-warning-dark)",
+            background: "var(--ifm-color-warning-contrast-background)",
+            borderRadius: 6,
+            padding: ".6rem .8rem",
+            fontSize: ".85rem",
+            margin: "0 0 1.2rem",
+          }}
+        >
+          <strong>The entries are placeholder data</strong>, each tagged{" "}
+          <code>SAMPLE</code>. They demonstrate the interaction only and are not real
+          Scandit error messages. Please review the layout and interaction, not the
+          wording.
+        </div>
+
+        {/* Same docs wrapper as the chooser above, for the same reason. */}
+        <div className="theme-doc-markdown markdown">
+          <ErrorCodeFinder />
+
+          <h2>Still stuck?</h2>
+          <p>
+            If your error isn&apos;t listed, or a fix doesn&apos;t resolve it, contact{" "}
+            <a href="https://www.scandit.com/support/">Scandit support</a> with the full
+            console output, your SDK version, and the framework you&apos;re using.
+          </p>
+        </div>
+
+        {/*
+          The per-page evaluator. On real docs pages it arrives automatically via the
+          DocItem/Footer swizzle; this is a src/pages route, so it has to be placed by
+          hand. It is BrowserOnly, so it appears in the browser rather than in the
+          static HTML.
+        */}
+        <PageFeedback url="/component-preview" title="Component preview (design review)" />
+      </main>
+    </Layout>
+  );
+}