Fix ProviderCard from user feedback + /critique

User feedback:
- "Trusted Partner" → "Verified" badge text
- Override Card hover bg fill (grey blended with shadow) — shadow lift only
- Logo 48px → 56px, removed white border (shadow only)
- Tightened spacing: content padding 16→12px, gap 8→4px, footer py 12→8px

/critique findings (27/40 → fixes applied):
- P1: Price promoted from footer into content area as bold primary text
- P2: Footer simplified to "View packages >" CTA with space-between
- Image fallback changed from grey to warm brand.50
- Name truncation relaxed to maxLines={2} for mobile

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

src/components/molecules/ProviderCard/ProviderCard.tsx

@@ -43,7 +43,7 @@ export interface ProviderCardProps {
 // ─── Constants ───────────────────────────────────────────────────────────────
 
 const LOGO_SIZE = 'var(--fa-provider-card-logo-size)';
-const LOGO_OVERLAP = 24; // half of 48px logo, in px
+const LOGO_OVERLAP = 28; // half of 56px logo, in px
 const IMAGE_HEIGHT = 'var(--fa-provider-card-image-height)';
 const CONTENT_PADDING = 'var(--fa-provider-card-content-padding)';
 const CONTENT_GAP = 'var(--fa-provider-card-content-gap)';
@@ -60,7 +60,7 @@ const FOOTER_PY = 'var(--fa-provider-card-footer-padding-y)';
  * list. Supports verified (paid partner) and unverified (scraped listing)
  * providers with consistent text alignment for scan readability.
  *
- * **Verified providers** get a hero image, logo overlay, and "Trusted Partner"
+ * **Verified providers** get a hero image, logo overlay, and "Verified"
  * badge. **Unverified providers** show text content only — no image, logo,
  * or verification badge.
  *
@@ -111,7 +111,14 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
         padding="none"
         onClick={onClick}
         sx={[
-          { overflow: 'hidden' },
+          {
+            overflow: 'hidden',
+            // Override Card's default hover bg fill — shadow lift is enough
+            // for listing cards. The grey bg fill blends into the shadow.
+            '&:hover': {
+              backgroundColor: 'background.paper',
+            },
+          },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       >
@@ -124,10 +131,10 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
               backgroundImage: `url(${imageUrl})`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
-              backgroundColor: 'action.hover', // fallback if image fails
+              backgroundColor: 'var(--fa-color-brand-50)', // warm fallback if image fails
             }}
           >
-            {/* Trusted Partner badge */}
+            {/* Verified badge */}
             <Box sx={{ position: 'absolute', top: 12, right: 12 }}>
               <Badge
                 variant="filled"
@@ -135,7 +142,7 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
                 size="small"
                 icon={<VerifiedOutlinedIcon />}
               >
-                Trusted Partner
+                Verified
               </Badge>
             </Box>
 
@@ -154,9 +161,7 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
                   borderRadius: '50%',
                   objectFit: 'cover',
                   backgroundColor: 'background.paper',
-                  boxShadow: 1,
-                  border: '2px solid',
-                  borderColor: 'background.paper',
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
                 }}
               />
             )}
@@ -175,10 +180,17 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
           }}
         >
           {/* Provider name */}
-          <Typography variant="h5" maxLines={1}>
+          <Typography variant="h5" maxLines={2}>
             {name}
           </Typography>
 
+          {/* Price — primary comparison data, prominent position */}
+          {startingPrice != null && (
+            <Typography variant="labelLg" sx={{ fontWeight: 700 }} color="primary">
+              From ${startingPrice.toLocaleString('en-AU')}
+            </Typography>
+          )}
+
           {/* Meta row: location + reviews */}
           <Box
             sx={{
@@ -227,30 +239,24 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
         </Box>
 
         {/* ── Footer bar ── */}
-        {startingPrice != null && (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              gap: 0.5,
-              backgroundColor: FOOTER_BG,
-              px: FOOTER_PX,
-              py: FOOTER_PY,
-            }}
-          >
-            <Typography variant="label" color="text.secondary">
-              Packages from
-            </Typography>
-            <Typography variant="label" sx={{ fontWeight: 700 }}>
-              ${startingPrice.toLocaleString('en-AU')}
-            </Typography>
-            <ChevronRightIcon
-              sx={{ fontSize: 20, color: 'text.secondary' }}
-              aria-hidden
-            />
-          </Box>
-        )}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            backgroundColor: FOOTER_BG,
+            px: FOOTER_PX,
+            py: FOOTER_PY,
+          }}
+        >
+          <Typography variant="label" color="text.secondary">
+            View packages
+          </Typography>
+          <ChevronRightIcon
+            sx={{ fontSize: 20, color: 'text.secondary' }}
+            aria-hidden
+          />
+        </Box>
       </Card>
     );
   },