From e758fc9215ea32890183ddc9c02a6c2a77dcd5a1 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 11:18:14 +0200
Subject: [PATCH 01/18] Add fallback variant to SkillsCallout

---
 src/components/SkillsCallout/index.tsx | 57 +++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/SkillsCallout/index.tsx b/src/components/SkillsCallout/index.tsx
index df01410a..ea4638d7 100644
--- a/src/components/SkillsCallout/index.tsx
+++ b/src/components/SkillsCallout/index.tsx
@@ -10,7 +10,7 @@ import styles from './styles.module.css';
 interface SkillsCalloutProps {
   product?: string;
   framework?: string;
-  variant?: 'product' | 'shared';
+  variant?: 'product' | 'shared' | 'fallback';
   banner?: boolean;
 }
 
@@ -68,6 +68,30 @@ function getSharedMoreInfoUrl(search: string): string {
   return `/sdks/${path}/agent-skills`;
 }
 
+interface SharedBodyProps {
+  sharedFrameworkSlug: string;
+  sharedMoreInfoUrl: string;
+}
+
+const SharedBody: React.FC<SharedBodyProps> = ({
+  sharedFrameworkSlug,
+  sharedMoreInfoUrl,
+}) => (
+  <>
+    <p className={styles.description}>
+      Install our <code>{skillsData.shared}</code> skill so your coding
+      agent can answer questions about Scandit products and recommend
+      the right one for your use case, directly from your editor.{' '}
+      <a href={sharedMoreInfoUrl}>More info →</a>
+    </p>
+    <InstallTabs
+      skillSlug={skillsData.shared}
+      product="shared"
+      framework={sharedFrameworkSlug}
+    />
+  </>
+);
+
 const SkillsCallout: React.FC<SkillsCalloutProps> = ({ product, framework, variant = 'product', banner = false }) => {
   const { pathname, search } = useLocation();
 
@@ -81,22 +105,33 @@ const SkillsCallout: React.FC<SkillsCalloutProps> = ({ product, framework, varia
       <aside className={calloutClass} aria-label="Install Scandit Agent Skills">
         <div className={contentClass}>
           <h3 className={styles.title}>Not sure which Scandit product fits your use case?</h3>
-          <p className={styles.description}>
-            Install our <code>{skillsData.shared}</code> skill so your coding
-            agent can answer questions about Scandit products and recommend
-            the right one for your use case, directly from your editor.{' '}
-            <a href={sharedMoreInfoUrl}>More info →</a>
-          </p>
-          <InstallTabs
-            skillSlug={skillsData.shared}
-            product="shared"
-            framework={sharedFrameworkSlug}
+          <SharedBody
+            sharedFrameworkSlug={sharedFrameworkSlug}
+            sharedMoreInfoUrl={sharedMoreInfoUrl}
           />
         </div>
       </aside>
     );
   }
 
+  if (variant === 'fallback') {
+    const sharedFrameworkSlug = getSharedFrameworkSlug(search);
+    const sharedMoreInfoUrl = getSharedMoreInfoUrl(search);
+    return (
+      <details className={styles.fallbackDetails}>
+        <summary className={styles.fallbackSummary}>
+          Not sure which Scandit product fits your use case?
+        </summary>
+        <div className={styles.fallbackBody}>
+          <SharedBody
+            sharedFrameworkSlug={sharedFrameworkSlug}
+            sharedMoreInfoUrl={sharedMoreInfoUrl}
+          />
+        </div>
+      </details>
+    );
+  }
+
   const route = parseSdksRoute(pathname);
   const resolvedProduct = product || route.product;
   const resolvedFramework = framework || route.framework;

From 40c9c528a7518edc73626ec01adf1173a94b2496 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 11:20:44 +0200
Subject: [PATCH 02/18] Dedupe shared/fallback derivations and heading literal

---
 src/components/SkillsCallout/index.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/SkillsCallout/index.tsx b/src/components/SkillsCallout/index.tsx
index ea4638d7..1374b984 100644
--- a/src/components/SkillsCallout/index.tsx
+++ b/src/components/SkillsCallout/index.tsx
@@ -7,6 +7,9 @@ import { parseSdksRoute } from '../utils/frameworks';
 import InstallTabs from './InstallTabs';
 import styles from './styles.module.css';
 
+const PRODUCT_DISAMBIGUATION_HEADING =
+  'Not sure which Scandit product fits your use case?';
+
 interface SkillsCalloutProps {
   product?: string;
   framework?: string;
@@ -97,14 +100,14 @@ const SkillsCallout: React.FC<SkillsCalloutProps> = ({ product, framework, varia
 
   const calloutClass = banner ? `${styles.callout} ${styles.banner}` : styles.callout;
   const contentClass = banner ? styles.bannerContent : undefined;
+  const sharedFrameworkSlug = getSharedFrameworkSlug(search);
+  const sharedMoreInfoUrl = getSharedMoreInfoUrl(search);
 
   if (variant === 'shared') {
-    const sharedFrameworkSlug = getSharedFrameworkSlug(search);
-    const sharedMoreInfoUrl = getSharedMoreInfoUrl(search);
     return (
       <aside className={calloutClass} aria-label="Install Scandit Agent Skills">
         <div className={contentClass}>
-          <h3 className={styles.title}>Not sure which Scandit product fits your use case?</h3>
+          <h3 className={styles.title}>{PRODUCT_DISAMBIGUATION_HEADING}</h3>
           <SharedBody
             sharedFrameworkSlug={sharedFrameworkSlug}
             sharedMoreInfoUrl={sharedMoreInfoUrl}
@@ -115,12 +118,10 @@ const SkillsCallout: React.FC<SkillsCalloutProps> = ({ product, framework, varia
   }
 
   if (variant === 'fallback') {
-    const sharedFrameworkSlug = getSharedFrameworkSlug(search);
-    const sharedMoreInfoUrl = getSharedMoreInfoUrl(search);
     return (
       <details className={styles.fallbackDetails}>
         <summary className={styles.fallbackSummary}>
-          Not sure which Scandit product fits your use case?
+          {PRODUCT_DISAMBIGUATION_HEADING}
         </summary>
         <div className={styles.fallbackBody}>
           <SharedBody

From 20d1ef6a1a7f7e845d1fd3398680c07e69a9703c Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 11:21:43 +0200
Subject: [PATCH 03/18] Add fallback disclosure styling

---
 .../SkillsCallout/styles.module.css           | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index 4350e09c..52d631f2 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -205,3 +205,55 @@ html[data-theme='dark'] .tab:hover,
 html[data-theme='dark'] .tabActive {
   color: var(--dark-blue-accent, #2385ec);
 }
+
+.fallbackDetails {
+  display: block;
+  margin: 0 0 2rem 0;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  background: var(--ifm-background-surface-color, #f7f8fa);
+  border: 1px solid rgba(35, 133, 236, 0.15);
+  font-family: var(--font-family, inherit);
+}
+
+.fallbackSummary {
+  list-style: none;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--ifm-color-content, #1a1a1a);
+  padding: 0.25rem 0;
+}
+
+.fallbackSummary::-webkit-details-marker {
+  display: none;
+}
+
+.fallbackSummary::before {
+  content: '▸';
+  display: inline-block;
+  margin-right: 0.5rem;
+  transition: transform 120ms ease;
+  color: var(--light-blue-100, #2385ec);
+}
+
+.fallbackDetails[open] .fallbackSummary::before {
+  transform: rotate(90deg);
+}
+
+.fallbackBody {
+  padding: 0.75rem 0 0.25rem 0;
+}
+
+html[data-theme='dark'] .fallbackDetails {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(35, 133, 236, 0.25);
+}
+
+html[data-theme='dark'] .fallbackSummary {
+  color: var(--ifm-color-content, #f5f5f5);
+}
+
+html[data-theme='dark'] .fallbackSummary::before {
+  color: var(--dark-blue-accent, #2385ec);
+}

From a91c264ed41ad9c23f87c3376141ac3717894801 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 11:26:10 +0200
Subject: [PATCH 04/18] Add fallback-disclosure denylist predicate

---
 src/components/SkillsCallout/routes.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/components/SkillsCallout/routes.ts

diff --git a/src/components/SkillsCallout/routes.ts b/src/components/SkillsCallout/routes.ts
new file mode 100644
index 00000000..7d3f715c
--- /dev/null
+++ b/src/components/SkillsCallout/routes.ts
@@ -0,0 +1,14 @@
+// Returns true when the page should NOT show the fallback
+// "Not sure which Scandit product fits your use case?" disclosure.
+//
+// The rule is anchored to the final non-empty path segment so unrelated
+// paths like /foo/migrate-tool/bar are not caught.
+export function isOnFallbackDenylist(pathname: string): boolean {
+  const segments = pathname.split('/').filter(Boolean);
+  const last = segments[segments.length - 1];
+  if (!last) return false;
+  if (last === 'release-notes') return true;
+  if (last === 'agent-skills') return true;
+  if (last.startsWith('migrate-')) return true;
+  return false;
+}

From 44303cbc81e7569e7c3752697611c8a8c8c0f3c4 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 11:26:10 +0200
Subject: [PATCH 05/18] Render fallback disclosure on non-product doc pages

---
 src/theme/DocItem/Content/index.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/theme/DocItem/Content/index.tsx b/src/theme/DocItem/Content/index.tsx
index 6297adf9..cdd27558 100644
--- a/src/theme/DocItem/Content/index.tsx
+++ b/src/theme/DocItem/Content/index.tsx
@@ -1,16 +1,31 @@
 import React from 'react';
+import { useLocation } from '@docusaurus/router';
 import Content from '@theme-original/DocItem/Content';
 import type ContentType from '@theme/DocItem/Content';
 import type { WrapperProps } from '@docusaurus/types';
 
 import SkillsCallout from '@site/src/components/SkillsCallout';
+import { parseSdksRoute } from '@site/src/components/utils/frameworks';
+import { isOnFallbackDenylist } from '@site/src/components/SkillsCallout/routes';
 
 type Props = WrapperProps<typeof ContentType>;
 
 export default function ContentWrapper(props: Props): JSX.Element {
+  const { pathname } = useLocation();
+  const route = parseSdksRoute(pathname);
+
+  let callout: JSX.Element | null;
+  if (route.product) {
+    callout = <SkillsCallout variant="product" />;
+  } else if (isOnFallbackDenylist(pathname)) {
+    callout = null;
+  } else {
+    callout = <SkillsCallout variant="fallback" />;
+  }
+
   return (
     <>
-      <SkillsCallout />
+      {callout}
       <Content {...props} />
     </>
   );

From a6380d86176c23fcfe05259796eb2a7cead68254 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 11:31:17 +0200
Subject: [PATCH 06/18] Treat only known products as product-callout pages

Without this, framework-level pages like /sdks/ios/add-sdk are parsed
as if 'add-sdk' were a product, so the swizzle renders the product
variant (which then no-ops because skills.json has no entry for it)
instead of falling through to the fallback disclosure.
---
 src/theme/DocItem/Content/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/theme/DocItem/Content/index.tsx b/src/theme/DocItem/Content/index.tsx
index cdd27558..46fd6bed 100644
--- a/src/theme/DocItem/Content/index.tsx
+++ b/src/theme/DocItem/Content/index.tsx
@@ -5,17 +5,21 @@ import type ContentType from '@theme/DocItem/Content';
 import type { WrapperProps } from '@docusaurus/types';
 
 import SkillsCallout from '@site/src/components/SkillsCallout';
+import skillsData from '@site/src/data/skills.json';
 import { parseSdksRoute } from '@site/src/components/utils/frameworks';
 import { isOnFallbackDenylist } from '@site/src/components/SkillsCallout/routes';
 
 type Props = WrapperProps<typeof ContentType>;
 
+const KNOWN_PRODUCTS = new Set(Object.keys(skillsData.products));
+
 export default function ContentWrapper(props: Props): JSX.Element {
   const { pathname } = useLocation();
   const route = parseSdksRoute(pathname);
+  const isKnownProductPage = !!route.product && KNOWN_PRODUCTS.has(route.product);
 
   let callout: JSX.Element | null;
-  if (route.product) {
+  if (isKnownProductPage) {
     callout = <SkillsCallout variant="product" />;
   } else if (isOnFallbackDenylist(pathname)) {
     callout = null;

From db0e8c1b86461560510c7df618b800b70e250318 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 11:36:18 +0200
Subject: [PATCH 07/18] Explicit link color inside fallback disclosure

---
 src/components/SkillsCallout/styles.module.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index 52d631f2..6f4638d1 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -245,6 +245,11 @@ html[data-theme='dark'] .tabActive {
   padding: 0.75rem 0 0.25rem 0;
 }
 
+.fallbackDetails a {
+  color: var(--light-blue-100, #2385ec);
+  text-decoration: underline;
+}
+
 html[data-theme='dark'] .fallbackDetails {
   background: rgba(255, 255, 255, 0.04);
   border-color: rgba(35, 133, 236, 0.25);
@@ -257,3 +262,7 @@ html[data-theme='dark'] .fallbackSummary {
 html[data-theme='dark'] .fallbackSummary::before {
   color: var(--dark-blue-accent, #2385ec);
 }
+
+html[data-theme='dark'] .fallbackDetails a {
+  color: var(--dark-blue-accent, #2385ec);
+}

From 1ff5ee5e803082b7aef4b6ae68d990e35f3517e5 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 14:05:48 +0200
Subject: [PATCH 08/18] Match existing blue callout styling for fallback
 disclosure

---
 src/components/SkillsCallout/index.tsx        |  4 +--
 .../SkillsCallout/styles.module.css           | 35 ++-----------------
 2 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/src/components/SkillsCallout/index.tsx b/src/components/SkillsCallout/index.tsx
index 1374b984..82b15aa5 100644
--- a/src/components/SkillsCallout/index.tsx
+++ b/src/components/SkillsCallout/index.tsx
@@ -119,8 +119,8 @@ const SkillsCallout: React.FC<SkillsCalloutProps> = ({ product, framework, varia
 
   if (variant === 'fallback') {
     return (
-      <details className={styles.fallbackDetails}>
-        <summary className={styles.fallbackSummary}>
+      <details className={`${styles.callout} ${styles.fallbackDetails}`}>
+        <summary className={`${styles.title} ${styles.fallbackSummary}`}>
           {PRODUCT_DISAMBIGUATION_HEADING}
         </summary>
         <div className={styles.fallbackBody}>
diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index 6f4638d1..6e93319b 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -206,23 +206,10 @@ html[data-theme='dark'] .tabActive {
   color: var(--dark-blue-accent, #2385ec);
 }
 
-.fallbackDetails {
-  display: block;
-  margin: 0 0 2rem 0;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  background: var(--ifm-background-surface-color, #f7f8fa);
-  border: 1px solid rgba(35, 133, 236, 0.15);
-  font-family: var(--font-family, inherit);
-}
-
 .fallbackSummary {
+  margin: 0;
   list-style: none;
   cursor: pointer;
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--ifm-color-content, #1a1a1a);
-  padding: 0.25rem 0;
 }
 
 .fallbackSummary::-webkit-details-marker {
@@ -242,27 +229,9 @@ html[data-theme='dark'] .tabActive {
 }
 
 .fallbackBody {
-  padding: 0.75rem 0 0.25rem 0;
-}
-
-.fallbackDetails a {
-  color: var(--light-blue-100, #2385ec);
-  text-decoration: underline;
-}
-
-html[data-theme='dark'] .fallbackDetails {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(35, 133, 236, 0.25);
-}
-
-html[data-theme='dark'] .fallbackSummary {
-  color: var(--ifm-color-content, #f5f5f5);
+  padding: 0.75rem 0 0;
 }
 
 html[data-theme='dark'] .fallbackSummary::before {
   color: var(--dark-blue-accent, #2385ec);
 }
-
-html[data-theme='dark'] .fallbackDetails a {
-  color: var(--dark-blue-accent, #2385ec);
-}

From bb2f2ba5b2b0ee909d91293b1afd28583cabbe38 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 14:15:01 +0200
Subject: [PATCH 09/18] Collapse all callouts by default and move shared
 variant to homepage top
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Both product and shared variants now render as a collapsed <details>
  with the existing blue callout chrome. Both consolidate behind a small
  internal CalloutDetails wrapper so the toggle handling and tracking
  stay in one place.
- The `fallback` variant is removed; non-product/non-denylist doc pages
  now render the shared variant directly.
- A `details.callout` rule with !important overrides Docusaurus's
  `[class^=docMainContainer_] details { background-color: transparent }`
  selector, which was wiping the blue background on doc pages.
- Homepage shared callout moves above the slogan and product cards so
  it's the first thing on the page.
- Extract `capturePostHogEvent` into its own module and fire
  `skills_callout_expanded` on every open of the disclosure, with
  variant / pathname / product / framework as properties. PostHog can
  compute the expand→copy funnel against the existing
  `skills_command_copied` event.
---
 src/components/SkillsCallout/InstallTabs.tsx  |  9 +-
 src/components/SkillsCallout/analytics.ts     |  7 ++
 src/components/SkillsCallout/index.tsx        | 93 ++++++++++++-------
 .../SkillsCallout/styles.module.css           | 22 +++--
 src/pages/index.tsx                           |  8 +-
 src/theme/DocItem/Content/index.tsx           |  2 +-
 6 files changed, 88 insertions(+), 53 deletions(-)
 create mode 100644 src/components/SkillsCallout/analytics.ts

diff --git a/src/components/SkillsCallout/InstallTabs.tsx b/src/components/SkillsCallout/InstallTabs.tsx
index 2afdf6b9..7e1edf86 100644
--- a/src/components/SkillsCallout/InstallTabs.tsx
+++ b/src/components/SkillsCallout/InstallTabs.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import skillsData from '@site/src/data/skills.json';
+import { capturePostHogEvent } from './analytics';
 import styles from './styles.module.css';
 
 type TabKey = 'any' | 'claude-code' | 'cursor';
@@ -50,14 +51,6 @@ interface CommandBlockProps {
   framework?: string;
 }
 
-type PostHogCapture = (event: string, props?: Record<string, unknown>) => void;
-
-function capturePostHogEvent(event: string, props?: Record<string, unknown>): void {
-  if (typeof window === 'undefined') return;
-  const ph = (window as unknown as { posthog?: { capture?: PostHogCapture } }).posthog;
-  ph?.capture?.(event, props);
-}
-
 const CommandBlock: React.FC<CommandBlockProps> = ({ command, trackingId, product, framework }) => {
   const [copied, setCopied] = useState(false);
   const handleCopy = async () => {
diff --git a/src/components/SkillsCallout/analytics.ts b/src/components/SkillsCallout/analytics.ts
new file mode 100644
index 00000000..020668f2
--- /dev/null
+++ b/src/components/SkillsCallout/analytics.ts
@@ -0,0 +1,7 @@
+type PostHogCapture = (event: string, props?: Record<string, unknown>) => void;
+
+export function capturePostHogEvent(event: string, props?: Record<string, unknown>): void {
+  if (typeof window === 'undefined') return;
+  const ph = (window as unknown as { posthog?: { capture?: PostHogCapture } }).posthog;
+  ph?.capture?.(event, props);
+}
diff --git a/src/components/SkillsCallout/index.tsx b/src/components/SkillsCallout/index.tsx
index 82b15aa5..66719502 100644
--- a/src/components/SkillsCallout/index.tsx
+++ b/src/components/SkillsCallout/index.tsx
@@ -4,6 +4,7 @@ import { useLocation } from '@docusaurus/router';
 import skillsData from '@site/src/data/skills.json';
 import productsData from '@site/src/data/products.json';
 import { parseSdksRoute } from '../utils/frameworks';
+import { capturePostHogEvent } from './analytics';
 import InstallTabs from './InstallTabs';
 import styles from './styles.module.css';
 
@@ -13,7 +14,7 @@ const PRODUCT_DISAMBIGUATION_HEADING =
 interface SkillsCalloutProps {
   product?: string;
   framework?: string;
-  variant?: 'product' | 'shared' | 'fallback';
+  variant?: 'product' | 'shared';
   banner?: boolean;
 }
 
@@ -71,6 +72,37 @@ function getSharedMoreInfoUrl(search: string): string {
   return `/sdks/${path}/agent-skills`;
 }
 
+interface CalloutDetailsProps {
+  heading: string;
+  banner?: boolean;
+  trackingProps: Record<string, unknown>;
+  children: React.ReactNode;
+}
+
+const CalloutDetails: React.FC<CalloutDetailsProps> = ({
+  heading,
+  banner = false,
+  trackingProps,
+  children,
+}) => {
+  const className = banner ? `${styles.callout} ${styles.banner}` : styles.callout;
+  const handleToggle: React.ReactEventHandler<HTMLDetailsElement> = (e) => {
+    if (!e.currentTarget.open) return;
+    capturePostHogEvent('skills_callout_expanded', trackingProps);
+  };
+  return (
+    <details className={className} onToggle={handleToggle}>
+      <summary
+        className={`${styles.title} ${styles.calloutSummary}`}
+        aria-label="Install Scandit Agent Skills"
+      >
+        {heading}
+      </summary>
+      <div className={styles.calloutBody}>{children}</div>
+    </details>
+  );
+};
+
 interface SharedBodyProps {
   sharedFrameworkSlug: string;
   sharedMoreInfoUrl: string;
@@ -98,38 +130,24 @@ const SharedBody: React.FC<SharedBodyProps> = ({
 const SkillsCallout: React.FC<SkillsCalloutProps> = ({ product, framework, variant = 'product', banner = false }) => {
   const { pathname, search } = useLocation();
 
-  const calloutClass = banner ? `${styles.callout} ${styles.banner}` : styles.callout;
-  const contentClass = banner ? styles.bannerContent : undefined;
-  const sharedFrameworkSlug = getSharedFrameworkSlug(search);
-  const sharedMoreInfoUrl = getSharedMoreInfoUrl(search);
-
   if (variant === 'shared') {
+    const sharedFrameworkSlug = getSharedFrameworkSlug(search);
+    const sharedMoreInfoUrl = getSharedMoreInfoUrl(search);
     return (
-      <aside className={calloutClass} aria-label="Install Scandit Agent Skills">
-        <div className={contentClass}>
-          <h3 className={styles.title}>{PRODUCT_DISAMBIGUATION_HEADING}</h3>
-          <SharedBody
-            sharedFrameworkSlug={sharedFrameworkSlug}
-            sharedMoreInfoUrl={sharedMoreInfoUrl}
-          />
-        </div>
-      </aside>
-    );
-  }
-
-  if (variant === 'fallback') {
-    return (
-      <details className={`${styles.callout} ${styles.fallbackDetails}`}>
-        <summary className={`${styles.title} ${styles.fallbackSummary}`}>
-          {PRODUCT_DISAMBIGUATION_HEADING}
-        </summary>
-        <div className={styles.fallbackBody}>
-          <SharedBody
-            sharedFrameworkSlug={sharedFrameworkSlug}
-            sharedMoreInfoUrl={sharedMoreInfoUrl}
-          />
-        </div>
-      </details>
+      <CalloutDetails
+        heading={PRODUCT_DISAMBIGUATION_HEADING}
+        banner={banner}
+        trackingProps={{
+          variant: 'shared',
+          pathname,
+          framework: sharedFrameworkSlug,
+        }}
+      >
+        <SharedBody
+          sharedFrameworkSlug={sharedFrameworkSlug}
+          sharedMoreInfoUrl={sharedMoreInfoUrl}
+        />
+      </CalloutDetails>
     );
   }
 
@@ -153,8 +171,15 @@ const SkillsCallout: React.FC<SkillsCalloutProps> = ({ product, framework, varia
   const moreInfoUrl = frameworkPath ? `/sdks/${frameworkPath}/agent-skills` : null;
 
   return (
-    <aside className={styles.callout} aria-label="Install Scandit Agent Skills">
-      <h3 className={styles.title}>Speed up {productName} integration with Agent Skills</h3>
+    <CalloutDetails
+      heading={`Speed up ${productName} integration with Agent Skills`}
+      trackingProps={{
+        variant: 'product',
+        pathname,
+        product: resolvedProduct,
+        framework: frameworkSlug,
+      }}
+    >
       <p className={styles.description}>
         Install the official skill to help your coding agent (Claude Code,
         Codex, Cursor, etc.) integrate, debug, and customize{' '}
@@ -172,7 +197,7 @@ const SkillsCallout: React.FC<SkillsCalloutProps> = ({ product, framework, varia
         product={resolvedProduct}
         framework={frameworkSlug}
       />
-    </aside>
+    </CalloutDetails>
   );
 };
 
diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index 6e93319b..e8aa8f3c 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -206,17 +206,27 @@ html[data-theme='dark'] .tabActive {
   color: var(--dark-blue-accent, #2385ec);
 }
 
-.fallbackSummary {
+/* Beat Docusaurus's "#__docusaurus [class^=docMainContainer_] details { background-color: transparent }"
+   override that would otherwise wipe the blue callout background on doc pages. */
+details.callout {
+  background: var(--light-blue-60, #f0f5ff) !important;
+}
+
+html[data-theme='dark'] details.callout {
+  background: rgba(35, 133, 236, 0.08) !important;
+}
+
+.calloutSummary {
   margin: 0;
   list-style: none;
   cursor: pointer;
 }
 
-.fallbackSummary::-webkit-details-marker {
+.calloutSummary::-webkit-details-marker {
   display: none;
 }
 
-.fallbackSummary::before {
+.calloutSummary::before {
   content: '▸';
   display: inline-block;
   margin-right: 0.5rem;
@@ -224,14 +234,14 @@ html[data-theme='dark'] .tabActive {
   color: var(--light-blue-100, #2385ec);
 }
 
-.fallbackDetails[open] .fallbackSummary::before {
+details.callout[open] .calloutSummary::before {
   transform: rotate(90deg);
 }
 
-.fallbackBody {
+.calloutBody {
   padding: 0.75rem 0 0;
 }
 
-html[data-theme='dark'] .fallbackSummary::before {
+html[data-theme='dark'] .calloutSummary::before {
   color: var(--dark-blue-accent, #2385ec);
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bff45cee..1dced76c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -25,6 +25,10 @@ export default function HomePage() {
     <div className={style.homeWrapper}>
       <Header></Header>
       <div className={`${style.body} ${isFlashing ? style.flash : ""}`}>
+        <div className={style.skillsCalloutWrapper}>
+          <SkillsCallout variant="shared" banner />
+        </div>
+
         <Slogan></Slogan>
 
         <div className={style.frameworksMobile}>
@@ -37,10 +41,6 @@ export default function HomePage() {
 
         <CardsPart></CardsPart>
 
-        <div className={style.skillsCalloutWrapper}>
-          <SkillsCallout variant="shared" banner />
-        </div>
-
         <DataCapture></DataCapture>
       </div>
       <Footer></Footer>
diff --git a/src/theme/DocItem/Content/index.tsx b/src/theme/DocItem/Content/index.tsx
index 46fd6bed..01f190fc 100644
--- a/src/theme/DocItem/Content/index.tsx
+++ b/src/theme/DocItem/Content/index.tsx
@@ -24,7 +24,7 @@ export default function ContentWrapper(props: Props): JSX.Element {
   } else if (isOnFallbackDenylist(pathname)) {
     callout = null;
   } else {
-    callout = <SkillsCallout variant="fallback" />;
+    callout = <SkillsCallout variant="shared" />;
   }
 
   return (

From 3fb3005d23271fd44157433aa2c85c511159f2fd Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 14:16:48 +0200
Subject: [PATCH 10/18] Move homepage shared callout after framework selection

---
 src/pages/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1dced76c..309d38c2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -25,10 +25,6 @@ export default function HomePage() {
     <div className={style.homeWrapper}>
       <Header></Header>
       <div className={`${style.body} ${isFlashing ? style.flash : ""}`}>
-        <div className={style.skillsCalloutWrapper}>
-          <SkillsCallout variant="shared" banner />
-        </div>
-
         <Slogan></Slogan>
 
         <div className={style.frameworksMobile}>
@@ -39,6 +35,10 @@ export default function HomePage() {
           <Frameworks handleFrameworkClick={handleFrameworkClick}></Frameworks>
         </div>
 
+        <div className={style.skillsCalloutWrapper}>
+          <SkillsCallout variant="shared" banner />
+        </div>
+
         <CardsPart></CardsPart>
 
         <DataCapture></DataCapture>

From 381020eb3168ff2df8ccf369b6e329c88fa1974c Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 14:21:54 +0200
Subject: [PATCH 11/18] Optically center collapsed callout summary text

---
 src/components/SkillsCallout/styles.module.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index e8aa8f3c..1e554670 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -1,7 +1,11 @@
 .callout {
   display: block;
   margin: 0 0 2rem 0;
-  padding: 1.25rem 1.5rem;
+  /* Asymmetric vertical padding compensates for the font line box being
+     taller than the visible glyphs (cap-height/descender asymmetry).
+     The [open] selector below restores symmetric padding once the body
+     content is visible and provides its own visual balance. */
+  padding: 1.3rem 1.5rem 1.05rem;
   border-radius: 8px;
   background: var(--light-blue-60, #f0f5ff);
   border-left: 4px solid var(--light-blue-100, #2385ec);
@@ -11,6 +15,11 @@
   font-family: var(--font-family, inherit);
 }
 
+details.callout[open] {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
 .banner {
   margin: 0;
   padding: 1.75rem 2rem;

From 1139a072c7193c6fbe242118a3c3cda318537df3 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 14:34:51 +0200
Subject: [PATCH 12/18] Redesign callout summary: right chevron, show/hide
 hint, button-like hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move the disclosure chevron to the right and pair it with a small
  uppercase "Show"/"Hide" hint that swaps via CSS based on the [open]
  state. Makes the affordance unambiguous without leaning on body copy.
- Whole collapsed callout now reads as a single interactive surface:
  hover-tinted background, focus-visible outline on the summary. Hover
  styles deliberately drop once expanded — the user is reading, not
  clicking.
- Keep padding-top constant across collapsed/open (1.3rem) so the title
  stays in the exact same vertical position when expanding. Only
  padding-bottom flexes for optical centering of the single summary
  line when collapsed.
- Drop the .banner padding override so the homepage callout matches the
  docs callout height when collapsed. .banner keeps margin: 0 only.
- Remove the 4px blue side-stripe in favor of a uniform 1px border on
  all sides. Side-stripe accents on callouts read as a SaaS-template
  tic; the background + soft border carry the same Scandit-blue signal
  without that connotation.
---
 src/components/SkillsCallout/index.tsx        |  6 +-
 .../SkillsCallout/styles.module.css           | 85 +++++++++++++------
 2 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/src/components/SkillsCallout/index.tsx b/src/components/SkillsCallout/index.tsx
index 66719502..8f1a7abd 100644
--- a/src/components/SkillsCallout/index.tsx
+++ b/src/components/SkillsCallout/index.tsx
@@ -96,7 +96,11 @@ const CalloutDetails: React.FC<CalloutDetailsProps> = ({
         className={`${styles.title} ${styles.calloutSummary}`}
         aria-label="Install Scandit Agent Skills"
       >
-        {heading}
+        <span className={styles.calloutHeading}>{heading}</span>
+        <span className={styles.calloutHint} aria-hidden="true">
+          <span className={styles.calloutHintText} />
+          <span className={styles.calloutChevron}>›</span>
+        </span>
       </summary>
       <div className={styles.calloutBody}>{children}</div>
     </details>
diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index 1e554670..bcb30096 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -1,32 +1,24 @@
 .callout {
   display: block;
   margin: 0 0 2rem 0;
-  /* Asymmetric vertical padding compensates for the font line box being
-     taller than the visible glyphs (cap-height/descender asymmetry).
-     The [open] selector below restores symmetric padding once the body
-     content is visible and provides its own visual balance. */
+  /* padding-top is constant across collapsed/open so the title doesn't
+     shift vertically when expanding. padding-bottom flexes via [open]
+     below: tighter in the collapsed state for optical centering of the
+     single summary line, restored when there's body content beneath. */
   padding: 1.3rem 1.5rem 1.05rem;
   border-radius: 8px;
   background: var(--light-blue-60, #f0f5ff);
-  border-left: 4px solid var(--light-blue-100, #2385ec);
-  border-top: 1px solid rgba(35, 133, 236, 0.15);
-  border-right: 1px solid rgba(35, 133, 236, 0.15);
-  border-bottom: 1px solid rgba(35, 133, 236, 0.15);
+  border: 1px solid rgba(35, 133, 236, 0.18);
   font-family: var(--font-family, inherit);
+  transition: background 120ms ease;
 }
 
 details.callout[open] {
-  padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
 
 .banner {
   margin: 0;
-  padding: 1.75rem 2rem;
-}
-
-.bannerContent {
-  max-width: 100%;
 }
 
 .title {
@@ -186,10 +178,7 @@ html[data-theme='dark'] .copyButton:hover {
 
 html[data-theme='dark'] .callout {
   background: rgba(35, 133, 236, 0.08);
-  border-left-color: var(--dark-blue-accent, #2385ec);
-  border-top-color: rgba(35, 133, 236, 0.2);
-  border-right-color: rgba(35, 133, 236, 0.2);
-  border-bottom-color: rgba(35, 133, 236, 0.2);
+  border-color: rgba(35, 133, 236, 0.22);
 }
 
 html[data-theme='dark'] .title {
@@ -229,28 +218,74 @@ html[data-theme='dark'] details.callout {
   margin: 0;
   list-style: none;
   cursor: pointer;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
 }
 
 .calloutSummary::-webkit-details-marker {
   display: none;
 }
 
-.calloutSummary::before {
-  content: '▸';
-  display: inline-block;
-  margin-right: 0.5rem;
-  transition: transform 120ms ease;
+.calloutHeading {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.calloutHint {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
   color: var(--light-blue-100, #2385ec);
 }
 
-details.callout[open] .calloutSummary::before {
+.calloutHintText::before {
+  content: 'Show';
+}
+
+details.callout[open] .calloutHintText::before {
+  content: 'Hide';
+}
+
+.calloutChevron {
+  display: inline-block;
+  font-size: 1rem;
+  line-height: 1;
   transform: rotate(90deg);
+  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+details.callout[open] .calloutChevron {
+  transform: rotate(-90deg);
 }
 
 .calloutBody {
   padding: 0.75rem 0 0;
 }
 
-html[data-theme='dark'] .calloutSummary::before {
+/* Button-like hover/focus on the collapsed callout so the whole banner
+   reads as a single interactive surface. Skipped when open: once content
+   is visible, the user is reading, not clicking. */
+details.callout:not([open]):hover {
+  background: var(--light-blue-80, #d9e6ff) !important;
+}
+
+details.callout:not([open]) .calloutSummary:focus-visible {
+  outline: 2px solid var(--light-blue-100, #2385ec);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+html[data-theme='dark'] .calloutHint {
   color: var(--dark-blue-accent, #2385ec);
 }
+
+html[data-theme='dark'] details.callout:not([open]):hover {
+  background: rgba(35, 133, 236, 0.16) !important;
+}

From 667ff21142a9a8b053ee9c015fb2dd49f0f6c409 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 14:41:13 +0200
Subject: [PATCH 13/18] Add cursor-follow spotlight and magnetic chevron on
 callout hover

When the callout is collapsed and the visitor hovers it, a soft
blue radial gradient follows the cursor across the surface, and the
right-aligned Show + chevron hint slides 4px toward the edge with
an ease-out-quart curve. Both effects fall away once the disclosure
is open so the chrome doesn't compete with the content the user is
now reading. Replaces the previous solid hover-tint.

The cursor position is written to --callout-mx / --callout-my via a
React onMouseMove handler; the gradient lives on a ::before overlay
that's clipped by overflow:hidden on the callout so the spotlight
respects the rounded corners. Summary and body get z-index:1 to sit
above the overlay; the overlay itself is pointer-events:none.

Dark-mode variant uses a higher alpha on the gradient so the
spotlight remains legible against the darker base background.
---
 src/components/SkillsCallout/index.tsx        | 11 +++-
 .../SkillsCallout/styles.module.css           | 57 +++++++++++++++----
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/components/SkillsCallout/index.tsx b/src/components/SkillsCallout/index.tsx
index 8f1a7abd..41dae18f 100644
--- a/src/components/SkillsCallout/index.tsx
+++ b/src/components/SkillsCallout/index.tsx
@@ -90,8 +90,17 @@ const CalloutDetails: React.FC<CalloutDetailsProps> = ({
     if (!e.currentTarget.open) return;
     capturePostHogEvent('skills_callout_expanded', trackingProps);
   };
+  // Cursor-follow spotlight: write the mouse position into CSS variables on
+  // the element so the radial-gradient ::before can read them. Only meaningful
+  // while collapsed; once expanded we let the user read in peace.
+  const handleMouseMove: React.MouseEventHandler<HTMLDetailsElement> = (e) => {
+    if (e.currentTarget.open) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    e.currentTarget.style.setProperty('--callout-mx', `${e.clientX - rect.left}px`);
+    e.currentTarget.style.setProperty('--callout-my', `${e.clientY - rect.top}px`);
+  };
   return (
-    <details className={className} onToggle={handleToggle}>
+    <details className={className} onToggle={handleToggle} onMouseMove={handleMouseMove}>
       <summary
         className={`${styles.title} ${styles.calloutSummary}`}
         aria-label="Install Scandit Agent Skills"
diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index bcb30096..d4ef6ae6 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -1,5 +1,7 @@
 .callout {
   display: block;
+  position: relative;
+  overflow: hidden;
   margin: 0 0 2rem 0;
   /* padding-top is constant across collapsed/open so the title doesn't
      shift vertically when expanding. padding-bottom flexes via [open]
@@ -10,7 +12,39 @@
   background: var(--light-blue-60, #f0f5ff);
   border: 1px solid rgba(35, 133, 236, 0.18);
   font-family: var(--font-family, inherit);
-  transition: background 120ms ease;
+  /* Default spotlight origin (centered) before the first mousemove. */
+  --callout-mx: 50%;
+  --callout-my: 50%;
+}
+
+/* Cursor-follow spotlight. Sits above the background, below the content.
+   Only revealed when collapsed + hovered — once expanded, the user is
+   reading and we don't want chrome competing with content. */
+.callout::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    480px circle at var(--callout-mx) var(--callout-my),
+    rgba(35, 133, 236, 0.22),
+    rgba(35, 133, 236, 0) 55%
+  );
+  opacity: 0;
+  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  pointer-events: none;
+  z-index: 0;
+}
+
+details.callout:not([open]):hover::before {
+  opacity: 1;
+}
+
+html[data-theme='dark'] .callout::before {
+  background: radial-gradient(
+    480px circle at var(--callout-mx) var(--callout-my),
+    rgba(35, 133, 236, 0.32),
+    rgba(35, 133, 236, 0) 55%
+  );
 }
 
 details.callout[open] {
@@ -215,6 +249,8 @@ html[data-theme='dark'] details.callout {
 }
 
 .calloutSummary {
+  position: relative;
+  z-index: 1;
   margin: 0;
   list-style: none;
   cursor: pointer;
@@ -243,6 +279,11 @@ html[data-theme='dark'] details.callout {
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--light-blue-100, #2385ec);
+  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+details.callout:not([open]):hover .calloutHint {
+  transform: translateX(4px);
 }
 
 .calloutHintText::before {
@@ -266,15 +307,13 @@ details.callout[open] .calloutChevron {
 }
 
 .calloutBody {
+  position: relative;
+  z-index: 1;
   padding: 0.75rem 0 0;
 }
 
-/* Button-like hover/focus on the collapsed callout so the whole banner
-   reads as a single interactive surface. Skipped when open: once content
-   is visible, the user is reading, not clicking. */
-details.callout:not([open]):hover {
-  background: var(--light-blue-80, #d9e6ff) !important;
-}
+/* Focus state for keyboard users — the spotlight does the visual work
+   for hover, so we only need an explicit focus indicator here. */
 
 details.callout:not([open]) .calloutSummary:focus-visible {
   outline: 2px solid var(--light-blue-100, #2385ec);
@@ -285,7 +324,3 @@ details.callout:not([open]) .calloutSummary:focus-visible {
 html[data-theme='dark'] .calloutHint {
   color: var(--dark-blue-accent, #2385ec);
 }
-
-html[data-theme='dark'] details.callout:not([open]):hover {
-  background: rgba(35, 133, 236, 0.16) !important;
-}

From 1b78110dba8f654c47294b7b6310bb6c52a20c80 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 14:49:37 +0200
Subject: [PATCH 14/18] Polish callout typography and add expansion animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Polish:
- Scale the install-command monospace from 1rem to 0.9375rem so it
  reads at the same optical size as the surrounding proportional text.
- Bump .description and .tabHint line-height from 1.5 to 1.65 so the
  description's wrapped lines have room to breathe — particularly
  important when inline <code> chips inflate the line metrics.

Animation:
- Use ::details-content + interpolate-size: allow-keywords + longhand
  transition (height, opacity, content-visibility) + transition-behavior:
  allow-discrete for a smooth slide-and-fade on open/close. Chrome 131+
  / Edge 131+ get the animation; Firefox and older Safari gracefully
  snap as today. Respects prefers-reduced-motion.
- The longhand transition is required because the build's CSS minifier
  strips `allow-discrete` from the transition shorthand.

Magnetic chevron:
- Drop the :not([open]) gate. The right-side hint now glides on hover
  in both states so the click affordance for "close" stays signaled
  once the disclosure is open. Spotlight stays collapsed-only so it
  doesn't compete with body content.
---
 .../SkillsCallout/styles.module.css           | 49 +++++++++++++++++--
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index d4ef6ae6..8596e042 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -15,6 +15,45 @@
   /* Default spotlight origin (centered) before the first mousemove. */
   --callout-mx: 50%;
   --callout-my: 50%;
+  /* Enable height: auto ↔ 0 transitions on the ::details-content
+     pseudo-element below (Chrome 129+, Safari 18+). Older browsers
+     gracefully snap open with no animation. */
+  interpolate-size: allow-keywords;
+}
+
+/* Smooth open/close animation. ::details-content is the pseudo-element
+   the browser provides for the disclosure body; transitioning its height
+   and opacity (with content-visibility transitioning as a discrete
+   property so the content is rendered during the animation) gives a
+   clean slide-and-fade. @starting-style defines the "entering" state.
+   Longhand transition syntax — the shorthand with `allow-discrete` is
+   stripped by the build's CSS minifier. */
+.callout::details-content {
+  overflow-y: clip;
+  height: 0;
+  opacity: 0;
+  transition-property: height, opacity, content-visibility;
+  transition-duration: 280ms, 220ms, 280ms;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  transition-behavior: allow-discrete;
+}
+
+.callout[open]::details-content {
+  height: auto;
+  opacity: 1;
+}
+
+@starting-style {
+  .callout[open]::details-content {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .callout::details-content {
+    transition: none;
+  }
 }
 
 /* Cursor-follow spotlight. Sits above the background, below the content.
@@ -65,7 +104,7 @@ details.callout[open] {
 .description {
   margin: 0 0 0.75rem 0;
   font-size: 1rem;
-  line-height: 1.5;
+  line-height: 1.65;
   color: var(--ifm-color-content-secondary, #444);
 }
 
@@ -82,7 +121,9 @@ details.callout[open] {
   border: 1px solid var(--light-blue-80, #c2cce3);
   border-radius: 6px;
   font-family: var(--third-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: 1rem;
+  /* Monospace at 1rem optically reads larger than proportional body text;
+     scaling to 0.9375rem matches the body visually. */
+  font-size: 0.9375rem;
   line-height: 1.5;
   overflow-x: auto;
   white-space: pre-wrap;
@@ -179,7 +220,7 @@ html[data-theme='dark'] .copyButton:hover {
 .tabHint {
   margin: 0 0 0.5rem 0;
   font-size: 1rem;
-  line-height: 1.5;
+  line-height: 1.65;
   color: var(--ifm-color-content-secondary, #444);
 }
 
@@ -282,7 +323,7 @@ html[data-theme='dark'] details.callout {
   transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-details.callout:not([open]):hover .calloutHint {
+details.callout:hover .calloutHint {
   transform: translateX(4px);
 }
 

From 008b6f444bac5649346687ebc87dda6de20d6093 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 14:53:19 +0200
Subject: [PATCH 15/18] Scope magnetic chevron hover to summary row
 specifically
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the callout is open, body-content hover was triggering the hint
translate at the top of the box where the user wasn't looking. Scope
to .calloutSummary:hover (and :focus-visible for keyboard) so the
animation fires precisely when the user is aiming at the click
target — both collapsed and open.
---
 src/components/SkillsCallout/styles.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index 8596e042..ad2e507c 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -323,7 +323,8 @@ html[data-theme='dark'] details.callout {
   transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-details.callout:hover .calloutHint {
+.calloutSummary:hover .calloutHint,
+.calloutSummary:focus-visible .calloutHint {
   transform: translateX(4px);
 }
 

From a4347a35d2da2c7fce3abaecc82a65fcad7c51a6 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 15:03:53 +0200
Subject: [PATCH 16/18] Keep cursor-follow spotlight active in the expanded
 state

Drop the :not([open]) guard on both the React mouse-move handler and
the CSS hover rule so the soft blue gradient follows the cursor across
the surface regardless of whether the disclosure is collapsed or open.
The 0.22 alpha keeps it subtle enough not to compete with the install
tabs underneath.
---
 src/components/SkillsCallout/index.tsx         | 4 +---
 src/components/SkillsCallout/styles.module.css | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/SkillsCallout/index.tsx b/src/components/SkillsCallout/index.tsx
index 41dae18f..3d2a71e8 100644
--- a/src/components/SkillsCallout/index.tsx
+++ b/src/components/SkillsCallout/index.tsx
@@ -91,10 +91,8 @@ const CalloutDetails: React.FC<CalloutDetailsProps> = ({
     capturePostHogEvent('skills_callout_expanded', trackingProps);
   };
   // Cursor-follow spotlight: write the mouse position into CSS variables on
-  // the element so the radial-gradient ::before can read them. Only meaningful
-  // while collapsed; once expanded we let the user read in peace.
+  // the element so the radial-gradient ::before can read them.
   const handleMouseMove: React.MouseEventHandler<HTMLDetailsElement> = (e) => {
-    if (e.currentTarget.open) return;
     const rect = e.currentTarget.getBoundingClientRect();
     e.currentTarget.style.setProperty('--callout-mx', `${e.clientX - rect.left}px`);
     e.currentTarget.style.setProperty('--callout-my', `${e.clientY - rect.top}px`);
diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index ad2e507c..89d08bbd 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -74,7 +74,7 @@
   z-index: 0;
 }
 
-details.callout:not([open]):hover::before {
+details.callout:hover::before {
   opacity: 1;
 }
 

From 7e86cb215e4d9a0be9cf59dd3b80f5a153a8e1d9 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 15:42:57 +0200
Subject: [PATCH 17/18] Tone down spotlight and scope magnetic chevron to
 collapsed only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Spotlight alpha: 0.22 → 0.12 (light) and 0.32 → 0.18 (dark). Still
  visible enough to read as cursor-tracking, no longer competes with
  the install tabs content underneath.
- Magnetic chevron translate now only fires when collapsed. Once open,
  the right-side hint stays put — the user isn't aiming to expand it
  again, and the spotlight already signals interactivity.
- Side note: keyboard focus outline on the summary now fires in both
  states (was incorrectly scoped to :not([open])). Keyboard users need
  the focus indicator regardless of disclosure state.
---
 src/components/SkillsCallout/styles.module.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/SkillsCallout/styles.module.css b/src/components/SkillsCallout/styles.module.css
index 89d08bbd..4bb76aba 100644
--- a/src/components/SkillsCallout/styles.module.css
+++ b/src/components/SkillsCallout/styles.module.css
@@ -65,7 +65,7 @@
   inset: 0;
   background: radial-gradient(
     480px circle at var(--callout-mx) var(--callout-my),
-    rgba(35, 133, 236, 0.22),
+    rgba(35, 133, 236, 0.12),
     rgba(35, 133, 236, 0) 55%
   );
   opacity: 0;
@@ -81,7 +81,7 @@ details.callout:hover::before {
 html[data-theme='dark'] .callout::before {
   background: radial-gradient(
     480px circle at var(--callout-mx) var(--callout-my),
-    rgba(35, 133, 236, 0.32),
+    rgba(35, 133, 236, 0.18),
     rgba(35, 133, 236, 0) 55%
   );
 }
@@ -323,8 +323,8 @@ html[data-theme='dark'] details.callout {
   transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.calloutSummary:hover .calloutHint,
-.calloutSummary:focus-visible .calloutHint {
+details.callout:not([open]) .calloutSummary:hover .calloutHint,
+details.callout:not([open]) .calloutSummary:focus-visible .calloutHint {
   transform: translateX(4px);
 }
 
@@ -357,7 +357,7 @@ details.callout[open] .calloutChevron {
 /* Focus state for keyboard users — the spotlight does the visual work
    for hover, so we only need an explicit focus indicator here. */
 
-details.callout:not([open]) .calloutSummary:focus-visible {
+.calloutSummary:focus-visible {
   outline: 2px solid var(--light-blue-100, #2385ec);
   outline-offset: 2px;
   border-radius: 4px;

From 31efe880ad040023ed5c7ba388aa08f8025d44a7 Mon Sep 17 00:00:00 2001
From: Raffaele Farinaro <raffaele.farinaro@scandit.com>
Date: Thu, 21 May 2026 15:54:09 +0200
Subject: [PATCH 18/18] Remove SLC smart-devices image from intro partial

---
 docs/partials/intro/_about-smart-label-capture.mdx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/docs/partials/intro/_about-smart-label-capture.mdx b/docs/partials/intro/_about-smart-label-capture.mdx
index abd6028b..077d1c0e 100644
--- a/docs/partials/intro/_about-smart-label-capture.mdx
+++ b/docs/partials/intro/_about-smart-label-capture.mdx
@@ -2,11 +2,6 @@ Smart Label Capture enables the simultaneous scanning of multiple barcodes and p
 
 This technology is particularly beneficial in scenarios where labels contain various data points, such as serial numbers, weights, or expiry dates.
 
-<p align="center">
-  <img src="/img/batch-scanning/SLC-smart-devices.jpg" width="650px" alt="Label Capture result for scanning smart device labels" />
-  <br/>Capturing multiple barcodes and text data from labels in a single scan
-</p>
-
 ## Understanding Labels in Smart Label Capture
 
 The first step to using Smart Label Capture is to [define the labels](../label-definitions) that you want to capture.