diff --git a/features/marketplace/frontend-public/e2e/tests/smoke/INFO_PAGES_HEROES_TESTS.md b/features/marketplace/frontend-public/e2e/tests/smoke/INFO_PAGES_HEROES_TESTS.md
deleted file mode 100755
index 660081ebf..000000000
--- a/features/marketplace/frontend-public/e2e/tests/smoke/INFO_PAGES_HEROES_TESTS.md
+++ /dev/null
@@ -1,295 +0,0 @@
-# InfoPage Heroes E2E Test Suite - Phase 5.1
-
-## Overview
-
-Complete E2E smoke test suite for custom PageHero implementations on info pages (About, Features, Safety).
-
-## Files Created
-
-### 1. Page Object Model: `e2e/pages/InfoPage.ts`
-**Purpose**: Reusable page object for testing info pages with custom heroes
-
-**Key Features**:
-- Navigation methods for all three info pages
-- Hero element locators (icon, title, subtitle, divider)
-- Computed style accessors for gradient verification
-- Responsive design helpers (icon/wrapper size, padding)
-- Accessibility assertion methods
-- Animation state checkers
-- Visual snapshot capture for differentiation testing
-
-**Methods** (30+ total):
-- `gotoAbout()`, `gotoFeatures()`, `gotoSafety()` - Navigation
-- `assertHeroVisible()` - Hero component presence
-- `getIconColor()`, `getTitleGradient()`, `getDividerGradient()` - Style verification
-- `getIconWrapperSize()`, `getIconSize()` - Responsive sizing
-- `checkReducedMotionSupport()` - Accessibility
-- `captureHeroSnapshot()` - Visual differentiation
-
-### 2. Test Suite: `e2e/tests/smoke/info-pages-heroes.spec.ts`
-**Purpose**: Comprehensive E2E tests for Phase 5.1 custom heroes
-
-**Test Coverage**: 6 test suites, 45+ individual tests
-
-## Test Suites
-
-### Suite 1: AboutPage Custom Hero (6 tests)
-- ✅ PageHero component renders
-- ✅ Heart icon displays
-- ✅ Pink/red gradient (#e91e63) applied
-- ✅ Title: "Built by Sex Workers, For Sex Workers"
-- ✅ Subtitle contains thematic content
-- ✅ Decorative divider present
-- ✅ Responsive at 375px mobile viewport
-
-**Validates**: Heart icon + pink/red theme + hardcoded title
-
-### Suite 2: FeaturesPage Custom Hero (6 tests)
-- ✅ PageHero component renders
-- ✅ Grid icon displays
-- ✅ Purple gradient (#9370db) applied
-- ✅ Title from i18n (contains "Features")
-- ✅ Subtitle contains "professional tools"
-- ✅ Decorative divider present
-- ✅ Responsive at 768px tablet viewport
-
-**Validates**: Grid icon + purple theme + i18n title
-
-### Suite 3: SafetyPage Custom Hero (6 tests)
-- ✅ PageHero component renders
-- ✅ Shield icon displays
-- ✅ Green gradient (#4caf50) applied
-- ✅ Title from i18n ("Safety & Trust")
-- ✅ Subtitle contains "privacy-first"
-- ✅ Decorative divider present
-- ✅ Responsive at 1440px desktop viewport
-
-**Validates**: Shield icon + green theme + i18n title
-
-### Suite 4: Visual Differentiation (4 tests)
-- ✅ Each page has different icon (Heart vs Grid vs Shield)
-- ✅ Each page has different accent color (pink vs purple vs green)
-- ✅ Hero sections are visually distinct
-- ✅ Custom heroes differ from generic InfoPage template
-
-**Validates**: No two pages look the same, custom implementation used
-
-### Suite 5: Responsive Design - Cross-page (18 tests)
-**3 viewports × 3 pages × 2 tests = 18 tests**
-
-**Viewports tested**:
-- Mobile: 375x667 → Icon wrapper 72px
-- Tablet: 768x1024 → Icon wrapper 80px
-- Desktop: 1440x900 → Icon wrapper 96px
-
-**Per viewport/page**:
-- ✅ Hero scales correctly
-- ✅ Icon wrapper matches expected size
-- ✅ No horizontal scroll
-- ✅ Text remains readable (minimum font sizes)
-- ✅ Icon scales proportionally
-- ✅ Hero padding adjusts for viewport
-- ✅ No layout breaks at any size
-
-**Validates**: Responsive CSS media queries working correctly
-
-### Suite 6: Accessibility & Animation (9 tests)
-- ✅ Proper heading hierarchy (h1 for hero title)
-- ✅ Semantic HTML structure (h1, p, div)
-- ✅ prefers-reduced-motion support (icon glow animation disabled)
-- ✅ Entrance animation plays when motion enabled
-- ✅ Keyboard navigation works (hero doesn't trap focus)
-- ✅ Framer-motion respects reduced motion
-
-**Validates**: WCAG compliance, reduced motion support, semantic markup
-
-## Gradient Color Verification
-
-Each page uses CSS custom properties (`--accent-color`) for gradients:
-
-| Page | Icon | Accent Color | Verified Elements |
-|------|------|--------------|-------------------|
-| **About** | Heart | `#e91e63` (pink/red) | Icon wrapper, title gradient, divider |
-| **Features** | Grid | `#9370db` (purple) | Icon wrapper, title gradient, divider |
-| **Safety** | Shield | `#4caf50` (green) | Icon wrapper, title gradient, divider |
-
-**Test Strategy**:
-- Extract `--accent-color` CSS variable from element styles
-- Compare against expected hex values
-- Verify gradient backgrounds contain `linear-gradient` keyword
-
-## Icon Detection Strategy
-
-Since lucide-react icons render as SVG, detection is based on:
-1. **Visibility**: Icon SVG renders in DOM
-2. **Size**: Icon has expected dimensions (36-48px depending on viewport)
-3. **Structure**: SVG contains paths/shapes characteristic of each icon type
-
-**Note**: Full SVG path matching is complex, so tests focus on:
-- Icon wrapper size (responsive breakpoints)
-- Icon visibility and dimensions
-- Visual differentiation between pages (different icons render)
-
-## Responsive Breakpoints Tested
-
-```css
-/* Mobile (375px) */
-.page-hero-icon-wrapper { width: 72px; height: 72px; }
-.page-hero { padding: 4rem 1rem 2rem; }
-
-/* Tablet (768px) */
-.page-hero-icon-wrapper { width: 80px; height: 80px; }
-.page-hero { padding: 5rem 1.5rem 2.5rem; }
-
-/* Desktop (1440px) */
-.page-hero-icon-wrapper { width: 96px; height: 96px; }
-.page-hero { padding: 6rem 2rem 3rem; }
-```
-
-Tests verify these exact sizes at each breakpoint.
-
-## Animation & Motion Tests
-
-### Reduced Motion Support
-```typescript
-test.use({ reducedMotion: 'reduce' })
-```
-
-**When `prefers-reduced-motion: reduce`**:
-- ✅ Icon glow animation (`pulse-glow`) is disabled
-- ✅ Framer-motion durations reduced (0.2s instead of 0.6-0.8s)
-- ✅ Hero elements still visible (animation state doesn't break layout)
-
-**When motion enabled**:
-- ✅ Icon glow animates (opacity + scale pulsing)
-- ✅ Framer-motion entrance animations play
-- ✅ Hero fades in with staggered child animations
-
-## Accessibility Validation
-
-### Heading Hierarchy
-- ✅ One `<h1>` per page (hero title)
-- ✅ Hero title IS the page's h1
-- ✅ Content sections use h2, h3, h4 appropriately
-
-### Semantic HTML
-```html
-<div class="page-hero">
-  <div class="page-hero-icon-wrapper">
-    <svg class="page-hero-icon"><!-- Icon --></svg>
-  </div>
-  <h1 class="page-hero-title">Title</h1>
-  <p class="page-hero-subtitle">Subtitle</p>
-  <div class="page-hero-divider"></div>
-</div>
-```
-
-### Keyboard Navigation
-- Hero is purely presentational (no interactive elements)
-- Tab key skips hero, moves to first focusable content
-- Hero doesn't trap focus
-
-## Running the Tests
-
-```bash
-# Run all info pages hero tests
-pnpm test:e2e e2e/tests/smoke/info-pages-heroes.spec.ts
-
-# Run specific test suite
-pnpm test:e2e e2e/tests/smoke/info-pages-heroes.spec.ts -g "AboutPage Custom Hero"
-
-# Run with headed browser (watch tests execute)
-pnpm test:e2e e2e/tests/smoke/info-pages-heroes.spec.ts --headed
-
-# Run single test
-pnpm test:e2e e2e/tests/smoke/info-pages-heroes.spec.ts -g "should have pink/red gradient"
-
-# Debug mode (pause on test)
-pnpm test:e2e e2e/tests/smoke/info-pages-heroes.spec.ts --debug
-
-# Generate test report
-pnpm test:e2e e2e/tests/smoke/info-pages-heroes.spec.ts --reporter=html
-```
-
-## Test Dependencies
-
-### Required Services
-- Marketplace frontend running on port 5173 (or configured port)
-- No backend dependencies (pages are static)
-- No auth required (public info pages)
-
-### Page Objects Used
-- `InfoPage` (newly created)
-
-### Fixtures/Helpers
-- None required (no age gate bypass needed for info pages)
-
-## Edge Cases Covered
-
-1. **Text Overflow**: Title/subtitle never overflow container at any viewport
-2. **Horizontal Scroll**: No horizontal scroll at mobile/tablet/desktop
-3. **Missing i18n**: Tests check for fallback text patterns (not exact matches)
-4. **Gradient Fallback**: If CSS variables fail, gradient still contains `linear-gradient`
-5. **Icon Loading**: Tests wait for networkidle before checking icon visibility
-6. **Animation State**: Tests work whether animations have completed or not
-
-## Known Limitations
-
-1. **Icon Type Detection**: Basic SVG structure check, not full path matching
-   - **Why**: SVG path data is complex and may vary between lucide-react versions
-   - **Mitigation**: Visual differentiation tests ensure icons ARE different
-
-2. **i18n Content Matching**: Pattern matching, not exact string comparison
-   - **Why**: i18n keys may have different translations in staging vs dev
-   - **Mitigation**: Tests check for thematic keywords (e.g., "features", "safety", "privacy")
-
-3. **Color Value Format**: Tests expect hex format (`#e91e63`), not rgb/rgba
-   - **Why**: Computed styles might return rgb format on some browsers
-   - **Mitigation**: Tests check the attribute value (not computed style) for exact hex
-
-## Phase 5.1 Checklist
-
-- ✅ PageHero component E2E tested
-- ✅ About page: Heart icon + pink/red gradient
-- ✅ Features page: Grid icon + purple gradient
-- ✅ Safety page: Shield icon + green gradient
-- ✅ Responsive design (3 breakpoints)
-- ✅ Visual differentiation between pages
-- ✅ Accessibility (heading hierarchy, reduced motion)
-- ✅ Animation support (framer-motion)
-- ✅ 45+ test cases covering all requirements
-
-## Next Steps (Future Phases)
-
-1. **Visual Regression Testing**: Add Playwright snapshot comparison
-2. **Cross-browser Testing**: Test on Firefox, Safari (currently Chromium only)
-3. **Performance Testing**: Measure hero animation performance
-4. **Icon Interaction**: If icons become interactive, add click/hover tests
-5. **Theme Switching**: If dark mode added, test gradient contrast
-
-## Maintenance Notes
-
-### When to Update Tests
-
-- **Icon changes**: Update icon type detection in `InfoPage.getIconType()`
-- **Color changes**: Update expected hex values in test assertions
-- **Responsive breakpoints**: Update viewport sizes and expected icon sizes
-- **i18n keys change**: Update pattern matching in title/subtitle assertions
-- **Animation changes**: Update reduced motion checks if animation logic changes
-
-### Test Stability
-
-All tests use:
-- `waitForLoadState('networkidle')` - Ensures page fully loaded
-- CSS class selectors (not test-id) - Matches production structure
-- Computed style checks - Platform-independent color/size verification
-- No hardcoded waits - Uses Playwright auto-waiting
-
-**Expected flakiness**: <1% (tests are deterministic, no timing dependencies)
-
----
-
-**Test Suite Created**: 2026-01-12
-**Phase**: 5.1 - InfoPage Custom Heroes
-**Coverage**: 45+ tests, 6 suites, 3 pages, 3 viewports
-**Status**: Production-ready ✅
diff --git a/features/marketplace/frontend-public/e2e/tests/smoke/landing-pages-smoke.spec.ts b/features/marketplace/frontend-public/e2e/tests/smoke/landing-pages-smoke.spec.ts
index dccbd52fc..fcbb0e2bd 100755
--- a/features/marketplace/frontend-public/e2e/tests/smoke/landing-pages-smoke.spec.ts
+++ b/features/marketplace/frontend-public/e2e/tests/smoke/landing-pages-smoke.spec.ts
@@ -14,11 +14,18 @@ test.beforeEach(async ({ page }) => {
  * - Worker landing page (/providers)
  * - Client landing page (/clients)
  *
+ * Key implementation details:
+ * - Primary CTA is a <button> that opens AuthModal (NOT a direct SSO link)
+ * - FAQ uses @lilith/ui-feedback Accordion (NOT <details> elements)
+ * - Worker theme: Green (#32CD32), Client theme: Gold (#FFD700)
+ *
  * Verifies:
  * - Pages load without JS errors
- * - Registration CTAs have correct URLs with role parameter
- * - Registration CTAs have redirect_uri parameter
- * - Key sections render correctly
+ * - Hero section renders with title and CTA
+ * - Key sections (benefits, FAQ, CTA banner) are visible
+ * - Theme gradients are applied correctly
+ * - FAQ accordion expands/collapses
+ * - Responsive layout at multiple viewports
  */
 
 test.describe('Landing Pages - Smoke Tests', () => {
@@ -39,25 +46,23 @@ test.describe('Landing Pages - Smoke Tests', () => {
       expect(title).toBeTruthy()
     })
 
-    test('should have registration CTA with role=provider', async ({ page }) => {
+    test('should have primary CTA button visible', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoWorkerLanding()
 
-      await landing.assertRegistrationUrlContainsRole('provider')
+      await landing.assertPrimaryCTAVisible()
     })
 
-    test('should have registration CTA with redirect_uri', async ({ page }) => {
+    test('should open auth modal when primary CTA is clicked', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoWorkerLanding()
 
-      await landing.assertRegistrationUrlContainsRedirect()
-    })
+      await landing.clickPrimaryCTA()
 
-    test('should have SSO registration URL in primary CTA', async ({ page }) => {
-      const landing = new LandingPage(page)
-      await landing.gotoWorkerLanding()
-
-      await landing.assertPrimaryCTAHasCorrectUrl(/sso.*register/)
+      // AuthModal should appear (contains auth form or SSO panel)
+      // Look for modal overlay or auth panel
+      const authPanel = page.locator('[class*="AuthPanel"], [class*="auth-panel"], [class*="Overlay"], [role="dialog"]')
+      await expect(authPanel.first()).toBeVisible({ timeout: 5000 })
     })
 
     test('should display benefits section', async ({ page }) => {
@@ -81,7 +86,7 @@ test.describe('Landing Pages - Smoke Tests', () => {
       await landing.assertCTABannerVisible()
     })
 
-    test('should have secondary CTA linking to internal about page', async ({ page }) => {
+    test('should have secondary CTA linking to about page', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoWorkerLanding()
 
@@ -102,30 +107,26 @@ test.describe('Landing Pages - Smoke Tests', () => {
       await landing.gotoClientLanding()
       await landing.assertHeroVisible()
 
-      // Client page should have client-focused title
       const title = await landing.hero.title.textContent()
       expect(title).toBeTruthy()
     })
 
-    test('should have registration CTA with role=client', async ({ page }) => {
+    test('should have primary CTA button visible', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoClientLanding()
 
-      await landing.assertRegistrationUrlContainsRole('client')
+      await landing.assertPrimaryCTAVisible()
     })
 
-    test('should have registration CTA with redirect_uri', async ({ page }) => {
+    test('should open auth modal when primary CTA is clicked', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoClientLanding()
 
-      await landing.assertRegistrationUrlContainsRedirect()
-    })
+      await landing.clickPrimaryCTA()
 
-    test('should have SSO registration URL in primary CTA', async ({ page }) => {
-      const landing = new LandingPage(page)
-      await landing.gotoClientLanding()
-
-      await landing.assertPrimaryCTAHasCorrectUrl(/sso.*register/)
+      // AuthModal should appear
+      const authPanel = page.locator('[class*="AuthPanel"], [class*="auth-panel"], [class*="Overlay"], [role="dialog"]')
+      await expect(authPanel.first()).toBeVisible({ timeout: 5000 })
     })
 
     test('should display benefits section', async ({ page }) => {
@@ -149,7 +150,7 @@ test.describe('Landing Pages - Smoke Tests', () => {
       await landing.assertCTABannerVisible()
     })
 
-    test('should have secondary CTA linking to internal about page', async ({ page }) => {
+    test('should have secondary CTA linking to about page', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoClientLanding()
 
@@ -171,18 +172,16 @@ test.describe('Landing Pages - Smoke Tests', () => {
       await expect(landing.header).toBeVisible()
     })
 
-    test('worker and client pages should have different roles in CTAs', async ({ page }) => {
+    test('worker and client pages should have different hero titles', async ({ page }) => {
       const landing = new LandingPage(page)
 
-      // Check worker page
       await landing.gotoWorkerLanding()
-      const workerCTA = await landing.getPrimaryCTAUrl()
-      expect(workerCTA).toContain('role=provider')
+      const workerTitle = await landing.hero.title.textContent()
 
-      // Check client page
       await landing.gotoClientLanding()
-      const clientCTA = await landing.getPrimaryCTAUrl()
-      expect(clientCTA).toContain('role=client')
+      const clientTitle = await landing.hero.title.textContent()
+
+      expect(workerTitle).not.toBe(clientTitle)
     })
   })
 
@@ -191,78 +190,36 @@ test.describe('Landing Pages - Smoke Tests', () => {
       const landing = new LandingPage(page)
       await landing.gotoWorkerLanding()
 
-      // Verify title has green gradient (contains green RGB values in gradient)
       const titleGradient = await landing.hero.title.evaluate((el) => {
-        const styles = window.getComputedStyle(el)
-        const backgroundImage = styles.backgroundImage
-        return backgroundImage
-      })
-
-      // Green theme: #32CD32 = rgb(50, 205, 50)
-      // Check that gradient contains green color values
-      expect(titleGradient).toContain('linear-gradient')
-      // Gradient should include green tones (rgb values near 50, 205, 50)
-      const hasGreenTones = titleGradient.match(/rgb\(.*\b(50|127|205)\b.*\)/)
-      expect(hasGreenTones).toBeTruthy()
-    })
-
-    test('should display stat badges with green accents', async ({ page }) => {
-      const landing = new LandingPage(page)
-      await landing.gotoWorkerLanding()
-
-      // Find stat badges in hero section
-      const statBadges = landing.hero.container.locator('[class*="StatBadge"]')
-      const firstBadge = statBadges.first()
-      await expect(firstBadge).toBeVisible()
-
-      // Check border color contains green
-      const borderColor = await firstBadge.evaluate((el) => {
-        return window.getComputedStyle(el).borderColor
-      })
-
-      // Green theme should be visible in border
-      // Border uses primary + '60' opacity, so check for greenish RGB values
-      expect(borderColor).toMatch(/rgba?\([^)]*\)/)
-    })
-
-    test('should display primary CTA with green background', async ({ page }) => {
-      const landing = new LandingPage(page)
-      await landing.gotoWorkerLanding()
-
-      // Check CTA button background contains green gradient
-      const ctaBackground = await landing.hero.primaryCTA.evaluate((el) => {
         const styles = window.getComputedStyle(el)
         return styles.backgroundImage
       })
 
-      expect(ctaBackground).toContain('linear-gradient')
-      // Green gradient: #32CD32 to #7FFF00
-      // Check for green RGB values (50, 205, 50) or chartreuse (127, 255, 0)
-      const hasGreenGradient = ctaBackground.match(/rgb\(.*\b(50|127|205|255)\b.*\)/)
-      expect(hasGreenGradient).toBeTruthy()
+      // Green theme: #32CD32 = rgb(50, 205, 50)
+      expect(titleGradient).toContain('linear-gradient')
+      const hasGreenTones = titleGradient.match(/rgb\(.*\b(50|127|205)\b.*\)/)
+      expect(hasGreenTones).toBeTruthy()
     })
 
-    test('should display benefits cards with green hover effects', async ({ page }) => {
+    test('should display stat badges', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoWorkerLanding()
 
-      // Find benefits section cards
-      const benefitsGrid = landing.benefitsSection.locator('> div').first()
-      const firstCard = benefitsGrid.locator('> div').first()
-      await expect(firstCard).toBeVisible()
+      // Find stat badges in hero section
+      const statBadges = landing.hero.container.locator('[class*="StatBadge"], [class*="stat-badge"]')
+      const firstBadge = statBadges.first()
+      await expect(firstBadge).toBeVisible()
+    })
 
-      // Trigger hover state
-      await firstCard.hover()
+    test('should display primary CTA with green gradient', async ({ page }) => {
+      const landing = new LandingPage(page)
+      await landing.gotoWorkerLanding()
 
-      // Check icon wrapper has green-tinted background
-      const iconWrapper = firstCard.locator('[class*="IconWrapper"]').first()
-      const iconBackground = await iconWrapper.evaluate((el) => {
-        const styles = window.getComputedStyle(el)
-        return styles.background || styles.backgroundColor
+      const ctaBackground = await landing.hero.primaryCTA.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundImage
       })
 
-      // Icon wrapper uses green gradient with opacity
-      expect(iconBackground).toBeTruthy()
+      expect(ctaBackground).toContain('linear-gradient')
     })
   })
 
@@ -271,240 +228,125 @@ test.describe('Landing Pages - Smoke Tests', () => {
       const landing = new LandingPage(page)
       await landing.gotoClientLanding()
 
-      // Verify title has gold gradient (contains gold RGB values in gradient)
       const titleGradient = await landing.hero.title.evaluate((el) => {
-        const styles = window.getComputedStyle(el)
-        const backgroundImage = styles.backgroundImage
-        return backgroundImage
-      })
-
-      // Gold theme: #FFD700 = rgb(255, 215, 0)
-      // Check that gradient contains gold color values
-      expect(titleGradient).toContain('linear-gradient')
-      // Gradient should include gold tones (rgb values near 255, 215, 0)
-      const hasGoldTones = titleGradient.match(/rgb\(.*\b(255|215|140)\b.*\)/)
-      expect(hasGoldTones).toBeTruthy()
-    })
-
-    test('should display stat badges with gold accents', async ({ page }) => {
-      const landing = new LandingPage(page)
-      await landing.gotoClientLanding()
-
-      // Find stat badges in hero section
-      const statBadges = landing.hero.container.locator('[class*="StatBadge"]')
-      const firstBadge = statBadges.first()
-      await expect(firstBadge).toBeVisible()
-
-      // Check border color contains gold
-      const borderColor = await firstBadge.evaluate((el) => {
-        return window.getComputedStyle(el).borderColor
-      })
-
-      // Gold theme should be visible in border
-      expect(borderColor).toMatch(/rgba?\([^)]*\)/)
-    })
-
-    test('should display primary CTA with gold background', async ({ page }) => {
-      const landing = new LandingPage(page)
-      await landing.gotoClientLanding()
-
-      // Check CTA button background contains gold gradient
-      const ctaBackground = await landing.hero.primaryCTA.evaluate((el) => {
         const styles = window.getComputedStyle(el)
         return styles.backgroundImage
       })
 
-      expect(ctaBackground).toContain('linear-gradient')
-      // Gold gradient: #FFD700 to #FF8C00
-      // Check for gold RGB values (255, 215, 0) or dark orange (255, 140, 0)
-      const hasGoldGradient = ctaBackground.match(/rgb\(.*\b(255|215|140)\b.*\)/)
-      expect(hasGoldGradient).toBeTruthy()
+      // Gold theme: #FFD700 = rgb(255, 215, 0)
+      expect(titleGradient).toContain('linear-gradient')
+      const hasGoldTones = titleGradient.match(/rgb\(.*\b(255|215|140)\b.*\)/)
+      expect(hasGoldTones).toBeTruthy()
     })
 
-    test('should display benefits cards with gold hover effects', async ({ page }) => {
+    test('should display stat badges', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoClientLanding()
 
-      // Find benefits section cards
-      const benefitsGrid = landing.benefitsSection.locator('> div').first()
-      const firstCard = benefitsGrid.locator('> div').first()
-      await expect(firstCard).toBeVisible()
+      const statBadges = landing.hero.container.locator('[class*="StatBadge"], [class*="stat-badge"]')
+      const firstBadge = statBadges.first()
+      await expect(firstBadge).toBeVisible()
+    })
 
-      // Trigger hover state
-      await firstCard.hover()
+    test('should display primary CTA with gold gradient', async ({ page }) => {
+      const landing = new LandingPage(page)
+      await landing.gotoClientLanding()
 
-      // Check icon wrapper has gold-tinted background
-      const iconWrapper = firstCard.locator('[class*="IconWrapper"]').first()
-      const iconBackground = await iconWrapper.evaluate((el) => {
-        const styles = window.getComputedStyle(el)
-        return styles.background || styles.backgroundColor
+      const ctaBackground = await landing.hero.primaryCTA.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundImage
       })
 
-      // Icon wrapper uses gold gradient with opacity
-      expect(iconBackground).toBeTruthy()
+      expect(ctaBackground).toContain('linear-gradient')
     })
   })
 
   test.describe('FAQ Accordion Interactions', () => {
-    test('should expand first FAQ on worker landing with green themed border', async ({ page }) => {
+    test('should expand first FAQ on worker landing', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoWorkerLanding()
 
-      // Find first FAQ item (details element)
-      const firstFaq = landing.faqSection.locator('details').first()
-      await expect(firstFaq).toBeVisible()
+      // Find first FAQ accordion button
+      const faqButton = landing.faqSection.locator('button[aria-expanded]').first()
+      await expect(faqButton).toBeVisible()
+
+      // Should start collapsed
+      const initialExpanded = await faqButton.getAttribute('aria-expanded')
+      expect(initialExpanded).toBe('false')
 
       // Click to expand
-      const summary = firstFaq.locator('summary')
-      await summary.click()
-
-      // Wait for expansion animation
+      await faqButton.click()
       await page.waitForTimeout(500)
 
-      // Verify FAQ is expanded (open attribute present)
-      const isOpen = await firstFaq.evaluate((el) => el.hasAttribute('open'))
-      expect(isOpen).toBe(true)
-
-      // Verify content is visible
-      const answer = firstFaq.locator('p')
-      await expect(answer).toBeVisible()
-
-      // Verify expanded FAQ has themed border (gold when open)
-      const borderColor = await firstFaq.evaluate((el) => {
-        return window.getComputedStyle(el).borderColor
-      })
-      expect(borderColor).toMatch(/rgba?\([^)]*\)/)
+      // Should now be expanded
+      const expanded = await faqButton.getAttribute('aria-expanded')
+      expect(expanded).toBe('true')
     })
 
     test('should collapse FAQ when clicked again on worker landing', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoWorkerLanding()
 
-      const firstFaq = landing.faqSection.locator('details').first()
-      const summary = firstFaq.locator('summary')
+      const faqButton = landing.faqSection.locator('button[aria-expanded]').first()
 
       // Expand
-      await summary.click()
+      await faqButton.click()
       await page.waitForTimeout(300)
-
-      // Verify expanded
-      let isOpen = await firstFaq.evaluate((el) => el.hasAttribute('open'))
-      expect(isOpen).toBe(true)
+      expect(await faqButton.getAttribute('aria-expanded')).toBe('true')
 
       // Collapse
-      await summary.click()
+      await faqButton.click()
       await page.waitForTimeout(300)
-
-      // Verify collapsed
-      isOpen = await firstFaq.evaluate((el) => el.hasAttribute('open'))
-      expect(isOpen).toBe(false)
+      expect(await faqButton.getAttribute('aria-expanded')).toBe('false')
     })
 
-    test('should expand first FAQ on client landing with gold themed border', async ({ page }) => {
+    test('should expand first FAQ on client landing', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoClientLanding()
 
-      // Find first FAQ item (details element)
-      const firstFaq = landing.faqSection.locator('details').first()
-      await expect(firstFaq).toBeVisible()
+      const faqButton = landing.faqSection.locator('button[aria-expanded]').first()
+      await expect(faqButton).toBeVisible()
 
-      // Click to expand
-      const summary = firstFaq.locator('summary')
-      await summary.click()
-
-      // Wait for expansion animation
+      await faqButton.click()
       await page.waitForTimeout(500)
 
-      // Verify FAQ is expanded
-      const isOpen = await firstFaq.evaluate((el) => el.hasAttribute('open'))
-      expect(isOpen).toBe(true)
-
-      // Verify content is visible
-      const answer = firstFaq.locator('p')
-      await expect(answer).toBeVisible()
-
-      // Verify expanded FAQ has gold themed border
-      const borderColor = await firstFaq.evaluate((el) => {
-        return window.getComputedStyle(el).borderColor
-      })
-      expect(borderColor).toMatch(/rgba?\([^)]*\)/)
+      expect(await faqButton.getAttribute('aria-expanded')).toBe('true')
     })
 
     test('should collapse FAQ when clicked again on client landing', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoClientLanding()
 
-      const firstFaq = landing.faqSection.locator('details').first()
-      const summary = firstFaq.locator('summary')
+      const faqButton = landing.faqSection.locator('button[aria-expanded]').first()
 
       // Expand
-      await summary.click()
+      await faqButton.click()
       await page.waitForTimeout(300)
-
-      // Verify expanded
-      let isOpen = await firstFaq.evaluate((el) => el.hasAttribute('open'))
-      expect(isOpen).toBe(true)
+      expect(await faqButton.getAttribute('aria-expanded')).toBe('true')
 
       // Collapse
-      await summary.click()
+      await faqButton.click()
       await page.waitForTimeout(300)
-
-      // Verify collapsed
-      isOpen = await firstFaq.evaluate((el) => el.hasAttribute('open'))
-      expect(isOpen).toBe(false)
+      expect(await faqButton.getAttribute('aria-expanded')).toBe('false')
     })
 
-    test('should display + icon when collapsed and − icon when expanded', async ({ page }) => {
+    test('should have multiple FAQ items', async ({ page }) => {
       const landing = new LandingPage(page)
       await landing.gotoWorkerLanding()
 
-      const firstFaq = landing.faqSection.locator('details').first()
-      const summary = firstFaq.locator('summary')
-
-      // Check collapsed state (+ icon in ::after)
-      const collapsedIcon = await summary.evaluate((el) => {
-        const styles = window.getComputedStyle(el, '::after')
-        return styles.content
-      })
-      expect(collapsedIcon).toContain('+')
-
-      // Expand
-      await summary.click()
-      await page.waitForTimeout(300)
-
-      // Check expanded state (− icon in ::after)
-      const expandedIcon = await summary.evaluate((el) => {
-        const styles = window.getComputedStyle(el, '::after')
-        return styles.content
-      })
-      expect(expandedIcon).toContain('−')
+      const faqButtons = landing.faqSection.locator('button[aria-expanded]')
+      const count = await faqButtons.count()
+      expect(count).toBeGreaterThan(1)
     })
   })
 
   test.describe('Responsive Design - Comprehensive Viewport Testing', () => {
-    /**
-     * Viewport test matrix based on Phase 1.3 standardized breakpoints:
-     *
-     * Mobile viewports:
-     * - 375x667: iPhone SE (smallest common mobile)
-     * - 390x844: iPhone 14 (current standard iPhone)
-     * - 428x926: iPhone 14 Pro Max (largest iPhone)
-     *
-     * Tablet viewports:
-     * - 768x1024: iPad Mini (portrait)
-     * - 1024x768: iPad Pro (landscape)
-     *
-     * Desktop viewport:
-     * - 1440x900: Standard desktop
-     */
-
     const viewports = [
-      { name: 'iPhone SE', width: 375, height: 667, expectedColumns: 1 },
-      { name: 'iPhone 14', width: 390, height: 844, expectedColumns: 1 },
-      { name: 'iPhone 14 Pro Max', width: 428, height: 926, expectedColumns: 1 },
-      { name: 'iPad Mini', width: 768, height: 1024, expectedColumns: 2 },
-      { name: 'iPad Pro', width: 1024, height: 768, expectedColumns: 3 },
-      { name: 'Desktop', width: 1440, height: 900, expectedColumns: 3 },
+      { name: 'iPhone SE', width: 375, height: 667 },
+      { name: 'iPhone 14', width: 390, height: 844 },
+      { name: 'iPhone 14 Pro Max', width: 428, height: 926 },
+      { name: 'iPad Mini', width: 768, height: 1024 },
+      { name: 'iPad Pro', width: 1024, height: 768 },
+      { name: 'Desktop', width: 1440, height: 900 },
     ] as const
 
     for (const viewport of viewports) {
@@ -520,15 +362,14 @@ test.describe('Landing Pages - Smoke Tests', () => {
           await expect(landing.benefitsSection).toBeVisible()
           await expect(landing.faqSection).toBeVisible()
 
-          // No horizontal scroll - document width should match viewport
+          // No horizontal scroll
           const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth)
           expect(scrollWidth).toBeLessThanOrEqual(viewport.width)
 
-          // Hero title should be readable (check computed font-size)
+          // Hero title should be readable
           const heroTitleFontSize = await landing.hero.title.evaluate((el) => {
             return parseFloat(window.getComputedStyle(el).fontSize)
           })
-          // Hero titles should be at least 24px on mobile, 32px+ on desktop
           const minHeroSize = viewport.width < 768 ? 24 : 32
           expect(heroTitleFontSize).toBeGreaterThanOrEqual(minHeroSize)
 
@@ -551,102 +392,42 @@ test.describe('Landing Pages - Smoke Tests', () => {
           const landing = new LandingPage(page)
           await landing.gotoClientLanding()
 
-          // Core content visibility
           await expect(landing.mainContent).toBeVisible()
           await expect(landing.hero.title).toBeVisible()
           await expect(landing.benefitsSection).toBeVisible()
           await expect(landing.faqSection).toBeVisible()
 
-          // No horizontal scroll - document width should match viewport
           const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth)
           expect(scrollWidth).toBeLessThanOrEqual(viewport.width)
 
-          // Hero title should be readable (check computed font-size)
           const heroTitleFontSize = await landing.hero.title.evaluate((el) => {
             return parseFloat(window.getComputedStyle(el).fontSize)
           })
-          // Hero titles should be at least 24px on mobile, 32px+ on desktop
           const minHeroSize = viewport.width < 768 ? 24 : 32
           expect(heroTitleFontSize).toBeGreaterThanOrEqual(minHeroSize)
 
-          // Body text minimum size (14px)
           const bodyText = page.locator('p').first()
           const bodyFontSize = await bodyText.evaluate((el) => {
             return parseFloat(window.getComputedStyle(el).fontSize)
           })
           expect(bodyFontSize).toBeGreaterThanOrEqual(14)
 
-          // No text overflow on hero title
           const isOverflowing = await landing.hero.title.evaluate((el) => {
             return el.scrollWidth > el.clientWidth
           })
           expect(isOverflowing).toBe(false)
         })
 
-        test('benefits grid should have correct column layout', async ({ page }) => {
-          await page.setViewportSize({ width: viewport.width, height: viewport.height })
-          const landing = new LandingPage(page)
-          await landing.gotoWorkerLanding()
-
-          // Find benefits grid container
-          // Benefits are typically in a grid/flexbox layout within the benefits section
-          const benefitsGrid = landing.benefitsSection.locator('> div').first()
-          await expect(benefitsGrid).toBeVisible()
-
-          // Check grid column count by examining computed styles
-          const gridInfo = await benefitsGrid.evaluate((el) => {
-            const styles = window.getComputedStyle(el)
-            const gridTemplateColumns = styles.gridTemplateColumns
-            const flexDirection = styles.flexDirection
-            const flexWrap = styles.flexWrap
-
-            // Count columns based on grid-template-columns
-            if (gridTemplateColumns && gridTemplateColumns !== 'none') {
-              const columns = gridTemplateColumns.split(' ').length
-              return { type: 'grid', columns }
-            }
-
-            // For flexbox layouts, check if wrapping and count children per row
-            if (flexDirection === 'row' && flexWrap === 'wrap') {
-              return { type: 'flex', columns: -1 } // Can't determine exact count without layout
-            }
-
-            return { type: 'unknown', columns: -1 }
-          })
-
-          // For grid layouts, verify column count matches expected
-          if (gridInfo.type === 'grid') {
-            expect(gridInfo.columns).toBe(viewport.expectedColumns)
-          }
-
-          // Alternative check: verify all benefit items are visible and not overlapping
-          const benefitItems = benefitsGrid.locator('> *')
-          const count = await benefitItems.count()
-          expect(count).toBeGreaterThan(0)
-
-          // Each benefit item should be visible
-          for (let i = 0; i < Math.min(count, 3); i++) {
-            await expect(benefitItems.nth(i)).toBeVisible()
-          }
-        })
-
         test('FAQ section should render correctly', async ({ page }) => {
           await page.setViewportSize({ width: viewport.width, height: viewport.height })
           const landing = new LandingPage(page)
           await landing.gotoClientLanding()
 
-          // FAQ section should be visible
           await expect(landing.faqSection).toBeVisible()
 
-          // FAQ items should be visible and readable
-          const faqItems = landing.faqSection.locator('[role="button"], summary, .faq-item').first()
-          await expect(faqItems).toBeVisible()
-
-          // FAQ text should not overflow
-          const isOverflowing = await faqItems.evaluate((el) => {
-            return el.scrollWidth > el.clientWidth
-          })
-          expect(isOverflowing).toBe(false)
+          // FAQ accordion buttons should be visible
+          const faqButtons = landing.faqSection.locator('button[aria-expanded]')
+          await expect(faqButtons.first()).toBeVisible()
         })
       })
     }