Feedback iteration: DialogShell, page consistency, popup standardisation

- Add DialogShell atom — shared dialog container (header, scrollable body, footer)
- Refactor FilterPanel to use DialogShell (Popover → centered Dialog)
- Refactor ArrangementDialog to use DialogShell
- Remove PreviewStep + AuthGateStep pages (consolidated into ArrangementDialog, D-E)
- IntroStep: static subheading, top-left aligned toggle button content
- ProvidersStep: h4 heading "Find a funeral director", location search with pin icon,
  filter moved below search right-aligned, map fill fix, hover scrollbar
- VenueStep: same consistency fixes (h4 heading, filter layout, location icon, map fix)
- PackagesStep: grouped packages ("Matching your preferences" / "Other packages from
  [Provider]"), removed budget filter + Most Popular badge, clickable provider card,
  onArrange replaces onContinue, h4 heading
- WizardLayout: list-map left panel gets thin scrollbar visible on hover

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/pages/VenueStep/VenueStep.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 import InputAdornment from '@mui/material/InputAdornment';
-import SearchIcon from '@mui/icons-material/Search';
 import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import type { SxProps, Theme } from '@mui/material/styles';
@@ -182,7 +181,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
           <Box
             sx={{
               bgcolor: 'var(--fa-color-surface-cool)',
-              height: '100%',
+              flex: 1,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -219,7 +218,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
             px: { xs: 2, md: 3 },
           }}
         >
-          <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+          <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
             Where would you like the service?
           </Typography>
 
@@ -229,22 +228,26 @@ export const VenueStep: React.FC<VenueStepProps> = ({
               : 'Choose a venue for the funeral service. You can filter by location, features, and religion.'}
           </Typography>
 
-          {/* ─── Search + Filter button ─── */}
-          <Box sx={{ display: 'flex', gap: 1, mb: 2, alignItems: 'flex-start' }}>
-            <TextField
-              placeholder="Search a town or suburb..."
-              aria-label="Search venues by town or suburb"
-              value={values.search}
-              onChange={(e) => onChange({ ...values, search: e.target.value })}
-              fullWidth
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <SearchIcon sx={{ color: 'text.secondary' }} />
-                  </InputAdornment>
-                ),
-              }}
-            />
+          {/* ─── Location search ─── */}
+          <TextField
+            placeholder="Search a town or suburb..."
+            aria-label="Search venues by town or suburb"
+            value={values.search}
+            onChange={(e) => onChange({ ...values, search: e.target.value })}
+            fullWidth
+            size="small"
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <LocationOnOutlinedIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
+                </InputAdornment>
+              ),
+            }}
+            sx={{ mb: 1.5 }}
+          />
+
+          {/* ─── Filters — right-aligned below search ─── */}
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
             <FilterPanel activeCount={values.activeFilters.length} onClear={onFilterClear}>
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                 {filterOptions.map((filter) => (
@@ -260,9 +263,14 @@ export const VenueStep: React.FC<VenueStepProps> = ({
           </Box>
 
           {/* ─── Results count ─── */}
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 0 }} aria-live="polite">
-            Found {venues.length} venue{venues.length !== 1 ? 's' : ''}
-            {locationName ? ` near ${locationName}` : ''}
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            sx={{ mb: 0, display: 'block' }}
+            aria-live="polite"
+          >
+            {venues.length} venue{venues.length !== 1 ? 's' : ''}
+            {locationName ? ` near ${locationName}` : ''} found
           </Typography>
         </Box>