Restyle FuneralFinderV3 to standard design system palette

- Container: opaque white (surface.raised), standard card shadow/radius
- Status cards: white bg + neutral border, brand border + warm bg when selected
- Fields: white bg, neutral-200 border, brand border on focus, no focus ring
- CTA: standard Button contained, no custom shadows
- Keep: overline labels in brand-800, layout structure, form logic, a11y

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

src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx

@@ -26,32 +26,6 @@ export const Loading: Story = {
   args: { loading: true },
 };
 
-/** Over a hero image — demonstrates the glassmorphism effect */
-export const OnHeroImage: Story = {
-  decorators: [
-    (Story) => (
-      <Box
-        sx={{
-          minHeight: '100vh',
-          background:
-            'linear-gradient(135deg, #2C2E35 0%, #4C5B6B 40%, #8EA2A7 70%, #D8C3B5 100%)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          p: 4,
-        }}
-      >
-        <Box sx={{ maxWidth: 480, width: '100%' }}>
-          <Story />
-        </Box>
-      </Box>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
 /** Below a masthead — overlapping hero section */
 export const BelowMasthead: Story = {
   decorators: [

src/components/organisms/FuneralFinder/FuneralFinderV3.tsx

@@ -130,11 +130,11 @@ const StatusCard = React.forwardRef<
       border: '2px solid',
       borderColor: selected
         ? 'var(--fa-color-border-brand, #BA834E)'
-        : 'transparent',
+        : 'var(--fa-color-border-default, #E8E8E8)',
-      borderRadius: 'var(--fa-border-radius-lg, 12px)',
+      borderRadius: 'var(--fa-card-border-radius-default, 8px)',
       bgcolor: selected
         ? 'var(--fa-color-surface-warm, #FEF9F5)'
-        : 'var(--fa-color-brand-100, #F7ECDF)',
+        : 'var(--fa-color-surface-default, #fff)',
       cursor: 'pointer',
       fontFamily: 'inherit',
       textAlign: 'center',
@@ -143,10 +143,10 @@ const StatusCard = React.forwardRef<
       '&:hover': {
         borderColor: selected
           ? 'var(--fa-color-border-brand, #BA834E)'
-          : 'var(--fa-color-brand-300, #D8C3B5)',
+          : 'var(--fa-color-border-strong, #BFBFBF)',
         bgcolor: selected
           ? 'var(--fa-color-surface-warm, #FEF9F5)'
-          : 'var(--fa-color-brand-200, #EBDAC8)',
+          : 'var(--fa-color-surface-subtle, #FAFAFA)',
       },
       '&:active': {
         transform: 'scale(0.98)',
@@ -176,7 +176,7 @@ const StatusCard = React.forwardRef<
       component="span"
       sx={{
         display: 'block',
-        color: 'var(--fa-color-brand-800, #6B3C13)',
+        color: 'text.secondary',
         lineHeight: 1.4,
       }}
     >
@@ -188,19 +188,21 @@ StatusCard.displayName = 'StatusCard';
 
 // ─── Shared field styles ────────────────────────────────────────────────────
 
-/** Warm tonal fill, no visible border, no focus ring (per design spec) */
+/** Standard outlined fields — white bg, neutral border, no focus ring per design spec */
 const fieldBaseSx = {
   width: '100%',
-  bgcolor: 'var(--fa-color-brand-100, #F7ECDF)',
+  bgcolor: 'var(--fa-color-surface-default, #fff)',
   borderRadius: 'var(--fa-border-radius-md, 8px)',
   '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
+    borderColor: 'var(--fa-color-border-default, #E8E8E8)',
+    borderRadius: 'var(--fa-border-radius-md, 8px)',
   },
-  '&:hover .MuiOutlinedInput-notchedOutline': {
+  '&:hover:not(.Mui-disabled) .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
+    borderColor: 'var(--fa-color-border-strong, #BFBFBF)',
   },
   '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
+    borderColor: 'var(--fa-color-border-brand, #BA834E)',
+    borderWidth: 1,
   },
   '&.Mui-focused': {
     boxShadow: 'none',
@@ -227,7 +229,7 @@ const selectMenuProps = {
         fontSize: '0.9375rem',
         fontFamily: 'var(--fa-font-family-body)',
         whiteSpace: 'normal' as const,
-        '&:hover': { bgcolor: 'var(--fa-color-surface-warm)' },
+        '&:hover': { bgcolor: 'var(--fa-color-surface-subtle)' },
         '&.Mui-selected': {
           bgcolor: 'var(--fa-color-surface-warm)',
           fontWeight: 600,
@@ -244,8 +246,8 @@ const selectMenuProps = {
  * Hero search widget v3 — clean vertical form with status cards.
  *
  * Two tappable status cards (Immediate Need / Pre-planning), a funeral type
- * dropdown, a location input, and a CTA. Glassmorphism container with warm
+ * dropdown, a location input, and a CTA. Standard card container with
- * tonal field backgrounds. Overline section labels. CTA is always active —
+ * overline section labels. CTA is always active —
  * clicking it with missing required fields scrolls to the first gap.
  *
  * Required fields: status + location (min 3 chars).
@@ -368,14 +370,9 @@ export const FuneralFinderV3 = React.forwardRef<
       aria-label="Find funeral directors"
       sx={[
         {
-          // Glassmorphism — semi-transparent for backdrop-blur effect.
+          bgcolor: 'var(--fa-color-surface-raised, #fff)',
-          // No token equivalent for translucent white or warm-tinted border.
+          borderRadius: 'var(--fa-card-border-radius-default, 8px)',
-          bgcolor: 'rgba(255, 255, 255, 0.92)',
+          boxShadow: 'var(--fa-card-shadow-default)',
-          backdropFilter: 'blur(12px)',
-          WebkitBackdropFilter: 'blur(12px)',
-          border: '1px solid rgba(213, 195, 182, 0.15)',
-          borderRadius: 'var(--fa-border-radius-lg, 12px)',
-          boxShadow: 'var(--fa-shadow-xl)',
           px: { xs: 3.5, sm: 5 },
           py: { xs: 4, sm: 5 },
           display: 'flex',
@@ -548,17 +545,7 @@ export const FuneralFinderV3 = React.forwardRef<
           loading={loading}
           endIcon={!loading ? <ArrowForwardIcon /> : undefined}
           onClick={handleSubmit}
-          sx={{
+          sx={{ minHeight: 52 }}
-            minHeight: 52,
-            // Warm brand-tinted shadow — uses brand.600 (#B0610F / rgb 176,97,15)
-            // at low opacity. No token for coloured shadows.
-            boxShadow:
-              '0 10px 15px -3px rgba(176, 97, 15, 0.2), 0 4px 6px -4px rgba(176, 97, 15, 0.15)',
-            '&:hover': {
-              boxShadow:
-                '0 10px 20px -3px rgba(176, 97, 15, 0.3), 0 4px 8px -4px rgba(176, 97, 15, 0.2)',
-            },
-          }}
         >
           Find Funeral Directors
         </Button>