Switch UnverifiedProviderStep to list-detail layout for consistency

Matches PackagesStep pattern:
- Left panel: ProviderCardCompact + badge + details + recommendations
- Right panel: warm header band + available info + enquiry CTA
  (mirrors PackageDetail structure)

Users navigating between verified/unverified providers see the same
page structure — left panel for browsing, right panel for action.

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

src/components/pages/UnverifiedProviderStep/UnverifiedProviderStep.tsx

@@ -7,7 +7,6 @@ import { ProviderCardCompact } from '../../molecules/ProviderCardCompact';
 import { ProviderCard } from '../../molecules/ProviderCard';
 import { Badge } from '../../atoms/Badge';
 import { Button } from '../../atoms/Button';
-import { Card } from '../../atoms/Card';
 import { Typography } from '../../atoms/Typography';
 import { Divider } from '../../atoms/Divider';
 
@@ -73,11 +72,12 @@ export interface UnverifiedProviderStepProps {
  * Unverified provider detail page for the FA arrangement wizard.
  *
  * Shown when a user selects an unverified (scraped) provider from
- * the ProvidersStep. Displays whatever information we have, offers
+ * the ProvidersStep. Uses the same list-detail layout as PackagesStep
- * an enquiry CTA, and recommends verified alternatives.
+ * for consistency — left panel has provider info + recommendations,
+ * right panel has the enquiry CTA.
  *
- * Uses centered-form layout — single column, focused experience.
+ * Displays whatever information we have, offers an enquiry CTA,
- * No package selection, no arrangement flow.
+ * and recommends verified alternatives.
  *
  * Pure presentation component — props in, callbacks out.
  */
@@ -100,7 +100,7 @@ export const UnverifiedProviderStep: React.FC<UnverifiedProviderStepProps> = ({
 }) => {
   return (
     <WizardLayout
-      variant="centered-form"
+      variant="list-detail"
       navigation={navigation}
       progressStepper={progressStepper}
       runningTotal={runningTotal}
@@ -108,28 +108,126 @@ export const UnverifiedProviderStep: React.FC<UnverifiedProviderStepProps> = ({
       backLabel="Back to providers"
       onBack={onBack}
       sx={sx}
+      secondaryPanel={
+        /* ── Right panel: Enquiry CTA ── */
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+          }}
+        >
+          {/* Warm header band — matches PackageDetail pattern */}
+          <Box
+            sx={{
+              bgcolor: 'var(--fa-color-surface-warm)',
+              px: 3,
+              py: 2.5,
+              borderBottom: '1px solid',
+              borderColor: 'divider',
+            }}
+          >
+            <Typography variant="overline" color="text.secondary">
+              Enquire
+            </Typography>
+            <Typography variant="h5">{providerName}</Typography>
+          </Box>
+
+          {/* Detail rows — whatever we know */}
+          <Box sx={{ px: 3, py: 2.5, flex: 1 }}>
+            {details.length > 0 ? (
+              <Box
+                component="dl"
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 2,
+                  m: 0,
+                  mb: 3,
+                  '& dt': { color: 'text.secondary', m: 0, fontSize: '0.75rem' },
+                  '& dd': { m: 0, fontWeight: 500 },
+                }}
+              >
+                {details.map((detail) => (
+                  <Box key={detail.label}>
+                    <Typography component="dt" variant="caption">
+                      {detail.label}
+                    </Typography>
+                    <Typography component="dd" variant="body2">
+                      {detail.value}
+                    </Typography>
+                  </Box>
+                ))}
+              </Box>
+            ) : (
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+                Contact this provider directly for pricing and service details.
+              </Typography>
+            )}
+
+            <Divider sx={{ mb: 3 }} />
+
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+              We&rsquo;ll pass your details along so they can reach out to you directly. No
+              commitment required.
+            </Typography>
+
+            <Button
+              variant="contained"
+              size="large"
+              onClick={onEnquire}
+              loading={enquiryLoading}
+              fullWidth
+            >
+              Make an Enquiry
+            </Button>
+
+            {details.length > 0 && (
+              <Typography variant="caption" color="text.secondary" sx={{ mt: 2, display: 'block' }}>
+                Based on publicly available information. Pricing and services may vary.
+              </Typography>
+            )}
+          </Box>
+        </Box>
+      }
     >
-      {/* ── Provider header ── */}
+      {/* ── Left panel: Provider info + recommendations ── */}
-      <Box sx={{ pt: 2, mb: 3 }}>
+
+      {/* Provider compact card */}
+      <Box sx={{ mb: 1.5 }}>
         <ProviderCardCompact
           name={providerName}
           location={providerLocation}
           rating={providerRating}
           reviewCount={providerReviewCount}
         />
-        <Box sx={{ mt: 1.5 }}>
-          <Badge variant="soft" color="default" size="medium" icon={<InfoOutlinedIcon />}>
-            Listing
-          </Badge>
-        </Box>
       </Box>
 
-      {/* ── Available information ── */}
+      <Box sx={{ mb: 3 }}>
+        <Badge variant="soft" color="default" size="medium" icon={<InfoOutlinedIcon />}>
+          Listing
+        </Badge>
+      </Box>
+
+      {/* Heading */}
+      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+        About this provider
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+        This provider hasn&rsquo;t partnered with us yet. We have limited information, but you can
+        still enquire directly.
+      </Typography>
+
+      {/* Available information (inline, if any) */}
       {details.length > 0 && (
-        <Box sx={{ mb: 3 }}>
+        <Box
-          <Typography variant="h6" sx={{ mb: 2 }}>
+          sx={{
-            What we know
+            bgcolor: 'var(--fa-color-surface-subtle)',
-          </Typography>
+            borderRadius: 2,
+            p: 2.5,
+            mb: 3,
+          }}
+        >
           <Box
             component="dl"
             sx={{
@@ -152,82 +250,45 @@ export const UnverifiedProviderStep: React.FC<UnverifiedProviderStepProps> = ({
               </React.Fragment>
             ))}
           </Box>
-          <Typography variant="caption" color="text.secondary" sx={{ mt: 2, display: 'block' }}>
-            Based on publicly available information. Pricing and services may vary.
-          </Typography>
         </Box>
       )}
 
-      {/* ── Enquiry CTA ── */}
-      <Card
-        variant="elevated"
-        sx={{
-          bgcolor: 'var(--fa-color-surface-warm)',
-          p: { xs: 3, sm: 4 },
-          mb: 4,
-          textAlign: 'center',
-        }}
-      >
-        <Typography variant="h5" sx={{ mb: 1 }}>
-          Interested in {providerName}?
-        </Typography>
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          sx={{ mb: 3, maxWidth: 420, mx: 'auto' }}
-        >
-          We&rsquo;ll pass your details along so they can reach out to you directly. No commitment
-          required.
-        </Typography>
-        <Button
-          variant="contained"
-          size="large"
-          onClick={onEnquire}
-          loading={enquiryLoading}
-          fullWidth
-          sx={{ maxWidth: 320, mx: 'auto' }}
-        >
-          Make an Enquiry
-        </Button>
-      </Card>
-
       {/* ── Verified recommendations ── */}
       {recommendations.length > 0 && (
         <>
           <Divider sx={{ mb: 3 }} />
 
-          <Box sx={{ mb: 4 }}>
+          <Typography variant="h6" sx={{ mb: 0.5 }}>
-            <Typography variant="h6" sx={{ mb: 0.5 }}>
+            Verified providers{recommendationContext ? ` ${recommendationContext}` : ''}
-              Verified providers{recommendationContext ? ` ${recommendationContext}` : ''}
+          </Typography>
-            </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-            <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+            Full online arrangement with transparent pricing
-              Full online arrangement with transparent pricing
+          </Typography>
-            </Typography>
 
-            <Box
+          <Box
-              sx={{
+            sx={{
-                display: 'grid',
+              display: 'flex',
-                gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)' },
+              flexDirection: 'column',
-                gap: 2,
+              gap: 2,
-              }}
+              mb: 3,
-            >
+            }}
-              {recommendations.map((provider) => (
+          >
-                <ProviderCard
+            {recommendations.map((provider) => (
-                  key={provider.id}
+              <ProviderCard
-                  name={provider.name}
+                key={provider.id}
-                  location={provider.location}
+                name={provider.name}
-                  verified
+                location={provider.location}
-                  imageUrl={provider.imageUrl}
+                verified
-                  logoUrl={provider.logoUrl}
+                imageUrl={provider.imageUrl}
-                  rating={provider.rating}
+                logoUrl={provider.logoUrl}
-                  reviewCount={provider.reviewCount}
+                rating={provider.rating}
-                  startingPrice={provider.startingPrice}
+                reviewCount={provider.reviewCount}
-                  onClick={
+                startingPrice={provider.startingPrice}
-                    onSelectRecommendation ? () => onSelectRecommendation(provider.id) : undefined
+                onClick={
-                  }
+                  onSelectRecommendation ? () => onSelectRecommendation(provider.id) : undefined
-                />
+                }
-              ))}
+              />
-            </Box>
+            ))}
           </Box>
         </>
       )}