feat(join): redesign /join page with split hero and unified contribution list

Restructures /join.vue per docs/specs/join-form-redesign.md:

- Split hero (1fr 1fr) matching about.vue rhythm: H1 + tagline on left,
  "What you get" benefits on right (including "Pick your circle anytime
  after signup")
- Form section (1fr 1fr): form on left, "About the money" trust copy on
  right
- Inline PWYC editorial list with visually-hidden radio inputs for
  keyboard accessibility; cadence-aware preset amounts ($0/$5/$15/$30/$50
  monthly, ×12 annual); $15 row tagged "Suggested"
- Custom-amount row commits on blur and snaps to matching preset
- Cadence toggle (Monthly · Annual) in the section header; switching
  multiplies/floor-divides both form.contributionAmount and the custom
  amount display
- Removed: circle radio picker (defers to post-signup), ParchmentInset
  "How membership works", bottom three-circle row
- Submit row: bare agreement checkbox + auto-width button, wraps at 480px
- form.circle stays initialized to "community" and submits unchanged

Tests updated for new markup (radio ids #pwyc-N, .submit-btn class).
Cadence/billing-summary and contribution-guidance tests retired with
the ContributionAmountField usage on this page.

e2e/join-flow.spec.js

@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test'
 
 // Mock Helcim API responses for join flow (avoids dependency on external API)
 function mockHelcimAPIs(page, { failCustomer = false } = {}) {
-  // Mock Helcim customer creation
   page.route('**/api/helcim/customer', async (route) => {
     if (failCustomer) {
       return route.fulfill({
@@ -26,7 +25,6 @@ function mockHelcimAPIs(page, { failCustomer = false } = {}) {
     })
   })
 
-  // Mock subscription creation
   page.route('**/api/helcim/subscription', async (route) => {
     return route.fulfill({
       status: 200,
@@ -46,35 +44,35 @@ test.describe('Join page — member signup flow', () => {
 
     await expect(page.locator('#join-name')).toBeVisible()
     await expect(page.locator('#join-email')).toBeVisible()
-    await expect(page.locator('#circle-community')).toBeAttached()
+    await expect(page.locator('#pwyc-0')).toBeAttached()
-    await expect(page.locator('#circle-founder')).toBeAttached()
+    await expect(page.locator('#pwyc-15')).toBeAttached()
-    await expect(page.locator('#circle-practitioner')).toBeAttached()
+    await expect(page.locator('#pwyc-50')).toBeAttached()
-    await expect(page.getByTestId('contribution-amount')).toBeVisible()
+    await expect(page.getByTestId('cadence-monthly')).toBeVisible()
-    await expect(page.locator('.form-submit')).toBeVisible()
+    await expect(page.getByTestId('cadence-annual')).toBeVisible()
+    await expect(page.locator('.submit-btn')).toBeVisible()
   })
 
   test('submit button disabled when form incomplete', async ({ page }) => {
     await page.goto('/join')
     await page.waitForLoadState('networkidle')
 
-    // Clear name and email — circle defaults to community, contribution defaults to $15
+    // Clear name and email — contribution defaults to $15
     await page.locator('#join-name').fill('')
     await page.locator('#join-email').fill('')
 
-    // Button should be disabled with empty required fields
+    await expect(page.locator('.submit-btn')).toBeDisabled()
-    await expect(page.locator('.form-submit')).toBeDisabled()
 
     // Fill only name — still incomplete
     await page.locator('#join-name').fill('Test User')
-    await expect(page.locator('.form-submit')).toBeDisabled()
+    await expect(page.locator('.submit-btn')).toBeDisabled()
 
     // Fill email — agreement still unchecked, so still disabled
     await page.locator('#join-email').fill('incomplete-test@example.com')
-    await expect(page.locator('.form-submit')).toBeDisabled()
+    await expect(page.locator('.submit-btn')).toBeDisabled()
 
     // Check the Community Guidelines agreement — now all required fields satisfied
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
-    await expect(page.locator('.form-submit')).toBeEnabled()
+    await expect(page.locator('.submit-btn')).toBeEnabled()
   })
 
   test('fill and submit free tier', async ({ page }) => {
@@ -83,20 +81,17 @@ test.describe('Join page — member signup flow', () => {
     await page.goto('/join')
     await page.waitForLoadState('networkidle')
 
-    // Fill in the form
     await page.locator('#join-name').fill('E2E Test User')
     await page.locator('#join-email').fill(uniqueEmail)
-    await page.locator('#circle-community').check({ force: true })
+    // Pick the $0 preset
-    // Contribution is now a numeric input with preset chips, not a select
+    await page.locator('#pwyc-0').check({ force: true })
-    await page.getByTestId('contribution-amount').fill('0')
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
 
-    await expect(page.locator('.form-submit')).toBeEnabled()
+    await expect(page.locator('.submit-btn')).toBeEnabled()
 
-    // Mock Helcim APIs before submitting
     await mockHelcimAPIs(page)
 
-    await page.locator('.form-submit').click()
+    await page.locator('.submit-btn').click()
 
     // Free tier flips the SignupFlowOverlay into its success state
     await expect(
@@ -104,41 +99,26 @@ test.describe('Join page — member signup flow', () => {
     ).toBeVisible({ timeout: 15000 })
   })
 
-  test('cadence toggle updates billing summary to annual ×12', async ({ page }) => {
+  test('cadence toggle multiplies preset row amounts by 12', async ({ page }) => {
     await page.goto('/join')
     await page.waitForLoadState('networkidle')
 
-    await page.getByTestId('contribution-amount').fill('10')
+    // Default is Monthly: the $15 row reads "$15"
+    const suggestedRow = page.locator('#pwyc-15 + .pwyc-row-content .pwyc-amt')
+    await expect(suggestedRow).toHaveText('$15')
+
+    // Switch to Annual: same row now reads "$180"
     await page.getByTestId('cadence-annual').click()
+    await expect(suggestedRow).toHaveText('$180')
 
-    const summary = page.locator('.billing-summary')
+    // Switch back to Monthly: returns to "$15"
-    await expect(summary).toBeVisible()
-    await expect(summary).toContainText('$120 today')
-    await expect(summary).toContainText('at each annual renewal')
-
     await page.getByTestId('cadence-monthly').click()
-    await expect(summary).toContainText('$10 today')
+    await expect(suggestedRow).toHaveText('$15')
-    await expect(summary).toContainText('each month')
-  })
-
-  test('contribution guidance label changes with amount tier', async ({ page }) => {
-    await page.goto('/join')
-    await page.waitForLoadState('networkidle')
-
-    const guidance = page.locator('.contribution-guidance')
-
-    await page.getByTestId('contribution-amount').fill('5')
-    await expect(guidance).toHaveText(/I can contribute/)
-
-    await page.getByTestId('contribution-amount').fill('30')
-    await expect(guidance).toHaveText(/I can support others too/)
   })
 
   test('paid tier flow reaches success state with HelcimPay stubbed', async ({ page }) => {
     const uniqueEmail = `test-e2e-paid-${Date.now()}@example.com`
 
-    // Stub HelcimPay window globals before the page loads so the composable's
-    // script-load path is bypassed and we resolve verifyPayment synchronously.
     await page.addInitScript(() => {
       window.appendHelcimPayIframe = (checkoutToken) => {
         const eventName = 'helcim-pay-js-' + checkoutToken
@@ -189,12 +169,12 @@ test.describe('Join page — member signup flow', () => {
 
     await page.locator('#join-name').fill('Paid E2E User')
     await page.locator('#join-email').fill(uniqueEmail)
-    await page.locator('#circle-community').check({ force: true })
+    // $15 preset is selected by default — verify and submit
-    await page.getByTestId('contribution-amount').fill('15')
+    await page.locator('#pwyc-15').check({ force: true })
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
 
-    await expect(page.locator('.form-submit')).toBeEnabled()
+    await expect(page.locator('.submit-btn')).toBeEnabled()
-    await page.locator('.form-submit').click()
+    await page.locator('.submit-btn').click()
 
     await expect(
       page.getByRole('heading', { name: 'Welcome to Ghost Guild!' })
@@ -207,15 +187,13 @@ test.describe('Join page — member signup flow', () => {
     await page.goto('/join')
     await page.waitForLoadState('networkidle')
 
-    // Mock customer endpoint to return 409 (email already exists)
     await mockHelcimAPIs(page, { failCustomer: true })
 
     await page.locator('#join-name').fill('Dup Test User')
     await page.locator('#join-email').fill(duplicateEmail)
-    await page.locator('#circle-community').check({ force: true })
+    await page.locator('#pwyc-0').check({ force: true })
-    await page.getByTestId('contribution-amount').fill('0')
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
-    await page.locator('.form-submit').click()
+    await page.locator('.submit-btn').click()
 
     // Helcim 409 puts SignupFlowOverlay into its error state
     const overlayError = page.locator('.signup-flow-overlay .error-box')