Fix WorkflowCarousel mobile layout: compact 2x2 pill grid

Step cards now display as compact pills in a 2x2 grid on mobile so both
the selectors and detail panel fit on screen without scrolling. Desktop
layout unchanged.

src/components/features/WorkflowStep.tsx

@@ -37,31 +37,31 @@ export function WorkflowStep({ step, isActive, onClick, stepNumber }: WorkflowSt
       onClick={onClick}
       onKeyDown={handleKeyDown}
       className={cn(
-        'bg-white border rounded-2xl p-6 cursor-pointer transition-all duration-300 ease-in-out',
+        'bg-white border rounded-xl px-3 py-2 md:rounded-2xl md:px-6 md:py-6 cursor-pointer transition-all duration-300 ease-in-out',
         isActive
           ? 'opacity-100 shadow-lg scale-100 border-primary'
           : 'opacity-70 shadow-md scale-95 border-border hover:opacity-90 hover:shadow-lg'
       )}
     >
       {/* Header */}
-      <div className="flex items-center gap-4 mb-2">
+      <div className="flex items-center gap-2 md:gap-4 md:mb-2">
         <div
           data-testid="workflow-step-icon"
           className={cn(
-            'p-3 rounded-xl transition-colors duration-300',
+            'p-1.5 md:p-3 rounded-lg md:rounded-xl transition-colors duration-300',
             isActive ? 'bg-primary/10 text-primary' : 'bg-secondary/10 text-secondary'
           )}
         >
-          <Icon className="w-6 h-6" />
+          <Icon className="w-4 h-4 md:w-6 md:h-6" />
         </div>
         <div>
-          <p className="text-sm text-muted-foreground font-medium">Step {stepNumber}</p>
-          <h3 className="text-xl font-bold text-foreground">{step.title}</h3>
+          <p className="hidden md:block text-sm text-muted-foreground font-medium">Step {stepNumber}</p>
+          <h3 className="text-sm font-semibold md:text-xl md:font-bold text-foreground">{step.title}</h3>
         </div>
       </div>
 
       {/* Tagline */}
-      <p className="text-muted-foreground">{step.tagline}</p>
+      <p className="hidden md:block text-muted-foreground">{step.tagline}</p>
     </div>
   )
 }

src/components/sections/WorkflowCarousel.tsx

@@ -55,7 +55,7 @@ export function WorkflowCarousel({
     >
       <Container>
         {/* Section Header */}
-        <div className="text-center mb-16">
+        <div className="text-center mb-8 md:mb-16">
           <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4">
             How We Work
           </h2>
@@ -65,7 +65,7 @@ export function WorkflowCarousel({
         </div>
 
         {/* Step Tabs */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="grid grid-cols-2 gap-2 md:grid-cols-2 lg:grid-cols-4 md:gap-6">
           {workflowSteps.map((step, index) => (
             <WorkflowStep
               key={step.id}
@@ -78,7 +78,7 @@ export function WorkflowCarousel({
         </div>
 
         {/* Detail Panel — grid overlay keeps both panels in the same cell during crossfade */}
-        <div className="grid mt-8 mb-12 [&>*]:col-start-1 [&>*]:row-start-1">
+        <div className="grid mt-4 md:mt-8 mb-8 md:mb-12 [&>*]:col-start-1 [&>*]:row-start-1">
           <AnimatePresence>
             <motion.div
               key={activeStep}
@@ -125,7 +125,7 @@ export function WorkflowCarousel({
         </div>
 
         {/* Progress Dots */}
-        <div className="flex justify-center items-center gap-3">
+        <div className="hidden md:flex justify-center items-center gap-3">
           {workflowSteps.map((_, index) => (
             <button
               key={index}

src/styles/index.css

@@ -94,4 +94,13 @@
   .hover-rotate:hover {
     transform: rotate(12deg) scale(1.1);
   }
+
+  /* Hide scrollbar for horizontal scroll containers */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
 }