ui improvement

src/features/onboarding/OnboardingPage.tsx

@@ -231,6 +231,23 @@ export function OnboardingPage() {
     persist(completeStep(state, step, nextOf(step)));
   }
 
+  /*
+  Each step of the wizard starts at the top of itself.
+
+  The steps are STATE, not routes, so the shell's own reset — which keys on the
+  pathname — never fires here: the URL is `/admin/onboarding` for all seven of
+  them. Finishing the inventory step from the bottom of a long list and
+  pressing Save & continue therefore opened the next step already scrolled past
+  its heading and its explanation, which is exactly the part a person setting
+  up a shop for the first time needs to read.
+
+  Instant, for the same reason the shell's is: this replaces the whole page
+  body, so there is nothing continuous for a smooth travel to connect.
+  */
+  useEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+  }, [step]);
+
   const heading = HEADINGS[step];
   const isFirst = step === 'welcome';
   const isLast = step === 'done';

src/features/onboarding/steps/CatalogueStep.tsx

@@ -26,7 +26,7 @@ export function CatalogueStep({ productCount, onUpload, onManual }: CatalogueSte
   return (
     <VStack gap={3} className="ob-panel">
       {productCount > 0 ? (
-        <Card padding={3} elevation="low">
+        <Card padding={3}>
           <VStack gap={0.5}>
             <Text type="label" size="sm" weight="semibold">
               You already have {productCount} product{productCount === 1 ? '' : 's'}

src/features/onboarding/steps/DeliveryStep.tsx

@@ -69,7 +69,7 @@ export function DeliveryStep({ value, errors, onChange }: DeliveryStepProps) {
       {/* Only when it applies. Nothing below exists for a collection-only shop,
           and rendering it disabled would be showing work that is not theirs. */}
       {value.offersDelivery === true ? (
-        <Card padding={3} elevation="low" className="ob-panel">
+        <Card padding={3} className="ob-panel">
           <VStack gap={2}>
             <VStack gap={0}>
               <Text type="label" size="sm" weight="semibold">

src/features/onboarding/steps/InventoryStep.tsx

@@ -53,7 +53,7 @@ const TIPS = [
 export function InventoryStep({ onDownloadTemplate, onUpload }: InventoryStepProps) {
   return (
     <VStack gap={3} className="ob-panel">
-      <Card padding={3} elevation="low">
+      <Card padding={3}>
         <VStack gap={2}>
           <VStack gap={0.5}>
             <Text type="label" size="sm" weight="semibold">
@@ -80,7 +80,7 @@ export function InventoryStep({ onDownloadTemplate, onUpload }: InventoryStepPro
       </Card>
 
       <div className="ob-two">
-      <Card padding={3} elevation="low">
+      <Card padding={3}>
         <VStack gap={2}>
           <HStack justify="between" align="start" gap={2} wrap="wrap">
             <VStack gap={0.5}>
@@ -128,7 +128,7 @@ export function InventoryStep({ onDownloadTemplate, onUpload }: InventoryStepPro
         </VStack>
       </Card>
 
-      <Card padding={3} elevation="low">
+      <Card padding={3}>
         <VStack gap={1.5}>
           <Text type="label" size="sm" weight="semibold">
             Tips

src/features/onboarding/steps/StoreInfoStep.tsx

@@ -158,7 +158,7 @@ function Group({
   children: React.ReactNode;
 }) {
   return (
-    <Card padding={3} elevation="low">
+    <Card padding={3}>
       <VStack gap={2}>
         <VStack gap={0}>
           <Text type="label" size="sm" weight="semibold">

src/features/onboarding/steps/WelcomeStep.tsx

@@ -113,7 +113,7 @@ export function WelcomeStep({
 
       <div className="ob-benefits">
         {benefits.map(({ icon: Icon, title, body }) => (
-          <Card key={title} padding={3} elevation="low">
+          <Card key={title} padding={3}>
             <VStack gap={1}>
               <span style={{ color: 'var(--color-brand)' }} aria-hidden>
                 <Icon size={20} />