fix the mobile responsive

src/components/strategy/StrategySection.tsx

@@ -12,23 +12,6 @@ const StrategyCanvas = dynamic(() => import("./StrategyCanvas"), { ssr: false })
 /** Center of each stage's scroll window (0…1). */
 const CENTER = (i: number) => i / (N - 1);
 
-/** True only while a card's own opacity window is open (tiny buffer). Keeps
- *  not-yet-reached stage cards out of the DOM / off the compositor until their
- *  stage is on screen — no future workflow state is rendered before activation.
- *  Visually identical: a card outside its window is opacity:0 regardless. */
-function useInWindow(mv: MotionValue<number>, threshold = 0.01): boolean {
-  // `mv` is an external mutable store (a MotionValue). useTransform `.set()`s its
-  // output synchronously while the PARENT renders, so a plain `.on("change") -> setState`
-  // updates this component during the parent's render (React warns). useSyncExternalStore
-  // is built for exactly this: it reads a snapshot and reconciles store-changes-during-
-  // render safely. The snapshot is a primitive boolean, so it never re-renders needlessly.
-  return useSyncExternalStore(
-    (onStoreChange) => mv.on("change", onStoreChange),
-    () => mv.get() > threshold,
-    () => mv.get() > threshold,
-  );
-}
-
 /** Persistent top rail: the 5 stages, current one highlighted. */
 function StageRail({ active }: { active: number }) {
   return (
@@ -54,11 +37,13 @@ function StageCard({
   i,
   scroll,
   side,
+  active,
   children,
 }: {
   i: number;
   scroll: MotionValue<number>;
   side: "left" | "right";
+  active: number;
   children: React.ReactNode;
 }) {
   const c = CENTER(i);
@@ -67,8 +52,8 @@ function StageCard({
   const opacity = useTransform(scroll, [c - 0.1, c - 0.05, c + 0.05, c + 0.1], [0, 1, 1, 0]);
   const y = useTransform(scroll, [c - 0.1, c - 0.05], [34, 0]);
   const s = STAGES[i];
-  // Only mount the card while its stage's cross-fade window is open.
-  if (!useInWindow(opacity)) return null;
+  // Only mount the card while its stage is active.
+  if (active !== i) return null;
   return (
     <motion.div
       className={`dm-st-card-story is-${side}`}
@@ -202,7 +187,7 @@ export default function StrategySection({ connected = false }: { connected?: boo
                detail. Each: short title + one lead line + a couple of key chips. */}
 
             {/* STAGE 01 — INPUT (green) */}
-            <StageCard i={0} scroll={scroll} side="left">
+            <StageCard i={0} scroll={scroll} side="left" active={active}>
               <h3 className="dm-st-pillar__title">Orders &amp; riders enter the system</h3>
               <p className="dm-st-anchor__lead">Orders are uploaded and matched against the available fleet, ready for assignment.</p>
               <div className="dm-st-anchor__chips">
@@ -213,7 +198,7 @@ export default function StrategySection({ connected = false }: { connected?: boo
             </StageCard>
 
             {/* STAGE 02 — PARALLEL EXECUTION (purple) */}
-            <StageCard i={1} scroll={scroll} side="right">
+            <StageCard i={1} scroll={scroll} side="right" active={active}>
               <h3 className="dm-st-pillar__title">Six strategies, evaluated in parallel</h3>
               <p className="dm-st-anchor__lead">The AI runs every routing strategy at the same time — legacy baselines and MileTruth&apos;s unified engine.</p>
               <div className="dm-st-anchor__chips">
@@ -224,7 +209,7 @@ export default function StrategySection({ connected = false }: { connected?: boo
             </StageCard>
 
             {/* STAGE 03 — SMART OPTIMIZATION (blue) */}
-            <StageCard i={2} scroll={scroll} side="left">
+            <StageCard i={2} scroll={scroll} side="left" active={active}>
               <h3 className="dm-st-pillar__title">Routes optimized &amp; validated</h3>
               <p className="dm-st-anchor__lead">Every route is solved for distance, then checked against battery range and delivery SLAs.</p>
               <div className="dm-st-anchor__chips">
@@ -235,7 +220,7 @@ export default function StrategySection({ connected = false }: { connected?: boo
             </StageCard>
 
             {/* STAGE 04 — PERFORMANCE GRADING (orange) */}
-            <StageCard i={3} scroll={scroll} side="right">
+            <StageCard i={3} scroll={scroll} side="right" active={active}>
               <h3 className="dm-st-pillar__title">Every strategy is scored</h3>
               <p className="dm-st-anchor__lead">Each strategy is graded live on fulfillment, SLA compliance, efficiency and battery feasibility.</p>
               <div className="dm-st-anchor__chips">
@@ -246,7 +231,7 @@ export default function StrategySection({ connected = false }: { connected?: boo
             </StageCard>
 
             {/* STAGE 05 — STRATEGY COMPARISON (red, hero) */}
-            <StageCard i={4} scroll={scroll} side="right">
+            <StageCard i={4} scroll={scroll} side="right" active={active}>
               <h3 className="dm-st-pillar__title">Happier riders. Higher fulfillment.</h3>
               <p className="dm-st-anchor__lead">EV Aware wins — the best fulfillment with feasible, battery-safe routes for every rider.</p>
               <div className="dm-st-anchor__chips">