Design Language tweaks

src/lib/components/ServiceLandingPage.svelte

@@ -55,14 +55,18 @@
     return typeof window !== 'undefined' && window.innerWidth <= 768;
   }
 
+  function benefitCardScrollLeft(card: HTMLElement) {
+    return Math.max(0, card.offsetLeft - 8);
+  }
+
   async function scrollBenefits(direction: -1 | 1) {
     if (!benefitScroller || !isMobileViewport()) return;
 
     const nextIndex = Math.max(0, Math.min(activeBenefitIndex + direction, benefitCards.length - 1));
-    await scrollBenefitTo(nextIndex);
+    await scrollBenefitTo(nextIndex, 'smooth');
   }
 
-  async function scrollBenefitTo(index: number) {
+  async function scrollBenefitTo(index: number, behavior: ScrollBehavior = 'smooth') {
     if (!benefitScroller || !isMobileViewport()) return;
 
     const cards = benefitScroller.querySelectorAll<HTMLElement>('.service-benefit-card');
@@ -71,10 +75,9 @@
 
     activeBenefitIndex = index;
     await tick();
-    targetCard.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'start'
+    benefitScroller.scrollTo({
+      left: benefitCardScrollLeft(targetCard),
+      behavior
     });
   }
 
@@ -117,7 +120,7 @@
           benefitScroller.scrollTo({ left: 0, behavior: 'auto' });
         }
         bindMobileBenefitObserver();
-        void scrollBenefitTo(activeBenefitIndex);
+        void scrollBenefitTo(activeBenefitIndex, 'auto');
       } else {
         mobileBenefitObserver?.disconnect();
       }
@@ -252,7 +255,7 @@
                 aria-label={`Go to benefit ${index + 1}`}
                 aria-pressed={index === activeBenefitIndex}
                 on:click={() => scrollBenefitTo(index)}
-              />
+              ></button>
             {/each}
           </div>
           <button