fix(onboarding): make product selection continue button reachable on mobile

The product selection screen vertically centered its content inside a 100vh
container. On mobile browsers, 100vh includes the area behind the bottom browser
chrome, so the centered Continue button sat behind it — and because the content
fit within 100vh, the scroll container never grew, leaving the button
unreachable without force-scrolling.

Top-align the content on mobile (justify-start) so the scroll container can grow
and reveal the button, and add safe-area-aware bottom padding so it clears the
browser chrome. All changes are gated behind the sm breakpoint, leaving desktop
layout unchanged.

Generated-By: PostHog Code
Task-Id: c312ed5c-5699-40b3-99ea-4c2ccc67129a

Author: fercgomes

frontend/src/scenes/onboarding/productSelection/variants/ProductCarousel.tsx

@@ -428,7 +428,7 @@ export function ProductCarousel({ mode, recommendationSource }: ProductCarouselP
           : "Pick your starting point — you'll unlock the rest soon enough."
 
     return (
-        <div className="SimplifiedProductSelection flex flex-col flex-1 w-full min-h-full p-4 items-center justify-center bg-primary overflow-x-hidden">
+        <div className="SimplifiedProductSelection flex flex-col flex-1 w-full min-h-full p-4 pb-[max(env(safe-area-inset-bottom),80px)] sm:pb-4 items-center justify-start sm:justify-center bg-primary overflow-x-hidden">
             {/* Subtle product color wash */}
             <div
                 className="absolute inset-0 transition-colors duration-700 pointer-events-none"
@@ -438,7 +438,7 @@ export function ProductCarousel({ mode, recommendationSource }: ProductCarouselP
                 }}
             />
 
-            <div className="relative flex flex-col items-center justify-center flex-grow w-full max-w-2xl">
+            <div className="relative flex flex-col items-center justify-start sm:justify-center flex-grow w-full max-w-2xl">
                 <div className="flex justify-center mb-4">
                     <Logomark />
                 </div>

frontend/src/scenes/onboarding/productSelection/variants/legacy/LegacyProductSelection.tsx

@@ -252,8 +252,8 @@ export function LegacyProductSelection(): JSX.Element {
     const { currentStep } = useValues(productSelectionLogic)
 
     return (
-        <div className="flex flex-col flex-1 w-full min-h-full p-4 items-center justify-center bg-primary overflow-x-hidden">
-            <div className="flex flex-col items-center justify-center flex-grow w-full">
+        <div className="flex flex-col flex-1 w-full min-h-full p-4 pb-[max(env(safe-area-inset-bottom),80px)] sm:pb-4 items-center justify-start sm:justify-center bg-primary overflow-x-hidden">
+            <div className="flex flex-col items-center justify-start sm:justify-center flex-grow w-full">
                 {currentStep === 'choose_path' && <ChoosePathStep />}
                 {currentStep === 'product_selection' && <ProductSelectionStep />}
                 {currentStep === 'choose_path' && <OnboardingExitAction />}