From fee595981853d4d92396b4eb927c5aabd9ff969d Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 18:57:11 +0100
Subject: [PATCH] feat(join): redesign /join page with split hero and unified
 contribution list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 app/pages/join.vue    | 1382 +++++++++++++++++++++--------------------
 e2e/join-flow.spec.js |   82 +--
 2 files changed, 742 insertions(+), 722 deletions(-)

diff --git a/app/pages/join.vue b/app/pages/join.vue
index a84912b..2ba29de 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -1,14 +1,5 @@
 <template>
   <div>
-    <!-- HERO -->
-    <div class="hero">
-      <h1>Join Ghost Guild</h1>
-      <p>
-        Resources, events, and a community of people figuring it out. Everyone
-        gets everything. Pay what you can.
-      </p>
-    </div>
-
     <!-- Already a member -->
     <template v-if="isAuthenticated">
       <div class="full-section">
@@ -57,160 +48,169 @@
       </ParchmentInset>
     </template>
 
-    <!-- Not authenticated: show full join page -->
+    <!-- Not authenticated: new layout -->
     <template v-else>
-      <!-- CONTRIBUTION + SIGN UP (two columns) -->
-      <div class="join-two-col">
-        <!-- Left: Monthly Contribution -->
-        <div class="join-col">
-          <div class="section-label" style="margin-bottom: 12px">
-            {{
-              cadence === "annual"
-                ? "Annual Contribution"
-                : "Monthly Contribution"
-            }}
-          </div>
-          <h2>Pay what you can</h2>
-          <ul class="tier-list">
-            <li><span class="tier-amt">$0</span> I need support right now</li>
-            <li>
-              <span class="tier-amt">{{ formatContributionAmount(5) }}</span> I
-              can contribute
-            </li>
-            <li>
-              <span class="tier-amt">{{ formatContributionAmount(15) }}</span> I
-              can sustain the community (suggested)
-            </li>
-            <li>
-              <span class="tier-amt">{{ formatContributionAmount(30) }}</span> I
-              can support others too
-            </li>
-            <li>
-              <span class="tier-amt">{{ formatContributionAmount(50) }}</span> I
-              want to sponsor multiple members
-            </li>
-          </ul>
-          <p class="charity-note">
-            Baby Ghosts Studio Development Fund is a registered Canadian
-            charity. Members who file Canadian taxes can claim their
-            contributions. We'll help you set up tax receipts once you've
-            joined.
-          </p>
-          <p class="solidarity-note">
-            Pay what you can. If you can pay more, you're making room for
-            someone who can't.
-          </p>
-          <p class="circle-not-sure">
-            Not sure where you fit? Start with Community. You can always move
-            later.
+      <!-- HERO (split, matches about.vue) -->
+      <div class="join-hero">
+        <div class="join-hero-left">
+          <h1>Join Ghost Guild</h1>
+          <p>
+            Resources, events, and a community of people figuring it out.
+            Everyone gets everything. Pay what you can.
           </p>
         </div>
+        <div class="join-hero-right">
+          <div class="section-label">What you get</div>
+          <ul>
+            <li>Full access to the knowledge commons</li>
+            <li>Free entry to all events and workshops</li>
+            <li>Slack invite in the next monthly onboarding wave</li>
+            <li>Equal access regardless of contribution</li>
+            <li>Pick your circle anytime after signup</li>
+          </ul>
+        </div>
+      </div>
 
-        <!-- Right: Become a member -->
-        <div class="join-col">
-          <h2>Become a member</h2>
-          <p class="form-intro">
-            You'll get a magic link to confirm your email. No passwords.
-          </p>
+      <!-- FORM + ASIDE -->
+      <div class="join-grid">
+        <div class="join-main">
+          <div class="join-main-inner">
+            <div v-if="errorMessage" class="error-box">{{ errorMessage }}</div>
 
-          <!-- Error Message -->
-          <div v-if="errorMessage" class="error-box">
-            {{ errorMessage }}
-          </div>
-
-          <form @submit.prevent="handleSubmit">
-            <div class="form-stack">
-              <div class="form-group">
-                <label class="form-label" for="join-name">Name</label>
-                <input
-                  id="join-name"
-                  v-model="form.name"
-                  class="form-input"
-                  type="text"
-                  required
-                  @blur="validateName"
-                  @input="fieldErrors.name && (fieldErrors.name = '')"
-                >
-                <p v-if="fieldErrors.name" class="field-error">{{ fieldErrors.name }}</p>
-              </div>
-              <div class="form-group">
-                <label class="form-label" for="join-email">Email</label>
-                <input
-                  id="join-email"
-                  v-model="form.email"
-                  class="form-input"
-                  type="email"
-                  placeholder="you@example.com"
-                  required
-                  @blur="validateEmail"
-                  @input="fieldErrors.email && (fieldErrors.email = '')"
-                >
-                <p v-if="fieldErrors.email" class="field-error">{{ fieldErrors.email }}</p>
-              </div>
-              <div class="form-group">
-                <label class="form-label">Circle</label>
-                <p class="field-note">Where you are in your co-op journey. You can change this anytime.</p>
-                <div class="circle-radios">
-                  <div class="circle-radio community">
+            <form @submit.prevent="handleSubmit">
+              <!-- About you -->
+              <div class="form-block">
+                <h2>About you</h2>
+                <p class="form-block-intro">
+                  We'll send a magic link to confirm your email. No passwords.
+                </p>
+                <div class="identity-grid">
+                  <div class="field-row">
+                    <label for="join-name">Name</label>
                     <input
-                      id="circle-community"
-                      v-model="form.circle"
-                      type="radio"
-                      name="circle"
-                      value="community"
+                      id="join-name"
+                      v-model="form.name"
+                      class="form-input"
+                      type="text"
+                      required
+                      @blur="validateName"
+                      @input="fieldErrors.name && (fieldErrors.name = '')"
                     >
-                    <label for="circle-community">
-                      <span
-                        class="circle-label-name"
-                        style="color: var(--c-community)"
-                        >Community</span
-                      >
-                      <span class="circle-label-desc">Exploring</span>
-                    </label>
+                    <p v-if="fieldErrors.name" class="field-error">
+                      {{ fieldErrors.name }}
+                    </p>
                   </div>
-                  <div class="circle-radio founder">
+                  <div class="field-row">
+                    <label for="join-email">Email</label>
                     <input
-                      id="circle-founder"
-                      v-model="form.circle"
-                      type="radio"
-                      name="circle"
-                      value="founder"
+                      id="join-email"
+                      v-model="form.email"
+                      class="form-input"
+                      type="email"
+                      placeholder="you@example.com"
+                      required
+                      @blur="validateEmail"
+                      @input="fieldErrors.email && (fieldErrors.email = '')"
                     >
-                    <label for="circle-founder">
-                      <span
-                        class="circle-label-name"
-                        style="color: var(--c-founder)"
-                        >Founder</span
-                      >
-                      <span class="circle-label-desc">Building</span>
-                    </label>
-                  </div>
-                  <div class="circle-radio practitioner">
-                    <input
-                      id="circle-practitioner"
-                      v-model="form.circle"
-                      type="radio"
-                      name="circle"
-                      value="practitioner"
-                    >
-                    <label for="circle-practitioner">
-                      <span
-                        class="circle-label-name"
-                        style="color: var(--c-practitioner)"
-                        >Practitioner</span
-                      >
-                      <span class="circle-label-desc">Practicing</span>
-                    </label>
+                    <p v-if="fieldErrors.email" class="field-error">
+                      {{ fieldErrors.email }}
+                    </p>
                   </div>
                 </div>
               </div>
-              <ContributionAmountField
-                v-model="form.contributionAmount"
-                v-model:cadence="cadence"
-              />
-              <div class="form-group full-width">
-                <label class="checkbox-label">
-                  <input v-model="form.agreedToGuidelines" type="checkbox" >
+
+              <!-- Pay what you can -->
+              <div class="form-block">
+                <div class="pwyc-header">
+                  <h2>Pay what you can</h2>
+                  <div
+                    class="cadence-toggle"
+                    role="group"
+                    aria-label="Billing cadence"
+                  >
+                    <button
+                      type="button"
+                      data-testid="cadence-monthly"
+                      :class="{ active: cadence === 'monthly' }"
+                      @click="onCadenceChange('monthly')"
+                    >
+                      Monthly
+                    </button>
+                    <button
+                      type="button"
+                      data-testid="cadence-annual"
+                      :class="{ active: cadence === 'annual' }"
+                      @click="onCadenceChange('annual')"
+                    >
+                      Annual
+                    </button>
+                  </div>
+                </div>
+                <p class="form-block-intro">
+                  Equal access for everyone. Pick what fits &mdash; these aren't
+                  tiers.
+                </p>
+
+                <ul
+                  class="pwyc-list"
+                  role="radiogroup"
+                  aria-label="Contribution amount"
+                >
+                  <li
+                    v-for="preset in presetRows"
+                    :key="preset.baseAmount"
+                    :class="[
+                      'pwyc-row',
+                      { selected: isPresetSelected(preset) },
+                    ]"
+                  >
+                    <input
+                      :id="`pwyc-${preset.baseAmount}`"
+                      v-model.number="form.contributionAmount"
+                      class="pwyc-radio"
+                      type="radio"
+                      name="pwyc-amount"
+                      :value="preset.cadenceAmount"
+                      @change="customAmount = ''"
+                    >
+                    <label
+                      :for="`pwyc-${preset.baseAmount}`"
+                      class="pwyc-row-content"
+                    >
+                      <span class="pwyc-amt">${{ preset.cadenceAmount }}</span>
+                      <span class="pwyc-label">{{ preset.label }}</span>
+                      <span v-if="preset.suggested" class="pwyc-tag"
+                        >Suggested</span
+                      >
+                    </label>
+                  </li>
+                  <li :class="['pwyc-row', 'pwyc-custom', { selected: isCustomSelected }]">
+                    <div class="pwyc-custom-input-wrap">
+                      <span class="currency">$</span>
+                      <input
+                        v-model="customAmount"
+                        class="pwyc-custom-input"
+                        type="number"
+                        min="0"
+                        placeholder="100"
+                        aria-label="Custom contribution amount"
+                        @blur="commitCustomAmount"
+                      >
+                    </div>
+                    <span class="pwyc-label"
+                      >A different amount works for me</span
+                    >
+                  </li>
+                </ul>
+              </div>
+
+              <!-- Submit row -->
+              <div class="submit-row">
+                <label class="agreement-label">
+                  <input
+                    v-model="form.agreedToGuidelines"
+                    type="checkbox"
+                  >
                   <span>
                     I agree to the Ghost Guild
                     <NuxtLink to="/community-guidelines" target="_blank"
@@ -218,10 +218,8 @@
                     >.
                   </span>
                 </label>
-              </div>
-              <div class="form-group">
                 <button
-                  class="form-submit"
+                  class="submit-btn"
                   type="submit"
                   :disabled="!isFormValid || isSubmitting"
                 >
@@ -230,72 +228,35 @@
                   <span v-else>Become a Member</span>
                 </button>
               </div>
-            </div>
-            <p class="form-note">
-              You can change your circle or contribution at any time from your
-              dashboard. Payment is handled securely through
-              <a href="https://www.helcim.com" target="_blank" rel="noopener"
-                >Helcim</a
-              >.
-            </p>
-          </form>
+            </form>
+          </div>
         </div>
-      </div>
 
-      <!-- HOW MEMBERSHIP WORKS -->
-      <ParchmentInset>
-        <h2>How membership works</h2>
-        <ul>
-          <li>Full access to the knowledge commons, events and workshops, and community</li>
-          <li>Free access to all Ghost Guild events</li>
-          <li>Equal access for every member, regardless of contribution</li>
-          <li>Your circle reflects where you are, not rank</li>
-          <li>Pay what you can ($0&ndash;$50+/month, separate from circle)</li>
-          <li>Higher contributions create solidarity spots for others</li>
-        </ul>
-        <p>
-          Community connection happens in our Slack workspace, joined in monthly
-          onboarding waves &mdash; there may be a short wait after you join.
-        </p>
-      </ParchmentInset>
-
-      <!-- THREE CIRCLES -->
-      <div class="content-row">
-        <div class="content-block">
-          <div class="section-label" style="color: var(--c-community)">
-            Community
+        <aside class="join-aside">
+          <div class="join-aside-inner">
+            <div class="section-label">About the money</div>
+            <ul class="trust-list">
+              <li>
+                <strong>Pay what you can.</strong> Equal access for everyone, no
+                matter the amount. If you can pay more, you're making room for
+                someone who can't.
+              </li>
+              <li>
+                <strong>Canadian charity.</strong> Baby Ghosts Studio
+                Development Fund is a registered Canadian charity. We'll help
+                you set up tax receipts after you join.
+              </li>
+              <li>
+                <strong>Secure payment.</strong> Card entry handled by Helcim
+                &mdash; we never see your card details.
+              </li>
+              <li>
+                <strong>Change anytime.</strong> Adjust your contribution or
+                cancel from your dashboard.
+              </li>
+            </ul>
           </div>
-          <h2>Exploring</h2>
-          <p>
-            For game workers curious about cooperatives and people exploring
-            alternative work models. You might be a solo developer, a student, a
-            researcher, or just someone who heard about this and wants to know
-            more. Start here.
-          </p>
-        </div>
-        <div class="content-block">
-          <div class="section-label" style="color: var(--c-founder)">
-            Founder
-          </div>
-          <h2>Building</h2>
-          <p>
-            For people actively building cooperative studios. You have a team,
-            or you are forming one. You are working through governance, legal
-            structure, revenue sharing, and all the hard parts. You want
-            structured support and peers doing the same thing.
-          </p>
-        </div>
-        <div class="content-block">
-          <div class="section-label" style="color: var(--c-practitioner)">
-            Practitioner
-          </div>
-          <h2>Practicing</h2>
-          <p>
-            For those already running cooperative studios or with deep
-            experience in cooperative practice. You're here to support newcomers
-            and help shape the Cooperative Foundations program.
-          </p>
-        </div>
+        </aside>
       </div>
     </template>
 
@@ -313,8 +274,11 @@
 
 <script setup>
 import { reactive, ref, computed, onMounted, onUnmounted } from "vue";
-import { getCircleOptions } from "~/config/circles";
-import { requiresPayment, formatContribution } from "~/config/contributions";
+import {
+  requiresPayment,
+  formatContribution,
+  CONTRIBUTION_PRESETS,
+} from "~/config/contributions";
 
 useSiteMeta({
   title: "Join",
@@ -325,12 +289,12 @@ useSiteMeta({
 // Auth state
 const { isAuthenticated, memberData, checkMemberStatus } = useAuth();
 
-// Check authentication status on mount
 onMounted(async () => {
   await checkMemberStatus();
 });
 
-// Form state
+// Form state — circle stays "community" and is submitted to the API unchanged.
+// Picker is removed from the template; selection moves to a post-signup prompt.
 const form = reactive({
   email: "",
   name: "",
@@ -346,13 +310,12 @@ const form = reactive({
   },
 });
 
-// UI state
 const isSubmitting = ref(false);
 const errorMessage = ref("");
 const successMessage = ref("");
 const cadence = ref("monthly"); // 'monthly' | 'annual'
+const customAmount = ref(""); // string; the raw <input type=number> value
 
-// Inline blur validation (UI feedback only — does not block submission)
 const fieldErrors = reactive({ name: "", email: "" });
 
 const validateName = () => {
@@ -369,38 +332,67 @@ const validateEmail = () => {
   fieldErrors.email = ok ? "" : "Please enter a valid email address.";
 };
 
-// Flow overlay state — drives the post-submit full-viewport UI.
-// 'idle' = overlay hidden; user is editing the form.
-// 'creating-customer' | 'opening-payment' | 'processing-payment'
-//   | 'creating-subscription' = progress states, overlay shows a spinner + label.
-// 'success' = overlay shows confirmation, auto-redirect is queued.
-// 'error' = overlay shows error + Retry/Back buttons.
 const flowState = ref("idle");
 
-// Helcim state
 const customerId = ref(null);
 const customerCode = ref(null);
 const subscriptionData = ref(null);
 const paymentToken = ref(null);
 
-// Circle options from central config
-const circleOptions = getCircleOptions();
+// Preset rows with cadence-adjusted display amounts.
+const presetRows = computed(() =>
+  CONTRIBUTION_PRESETS.map((p) => ({
+    baseAmount: p.amount,
+    cadenceAmount: cadence.value === "annual" ? p.amount * 12 : p.amount,
+    label: p.label,
+    suggested: p.amount === 15,
+  })),
+);
 
-const formatContributionAmount = (amount) => {
-  if (!amount || amount === 0) return "$0";
-  const display = cadence.value === "annual" ? amount * 12 : amount;
-  const suffix = cadence.value === "annual" ? "/yr" : "/mo";
-  return `$${display}${suffix}`;
+const isCustomSelected = computed(() => customAmount.value !== "");
+
+const isPresetSelected = (preset) =>
+  !isCustomSelected.value && form.contributionAmount === preset.cadenceAmount;
+
+const onCadenceChange = (newCadence) => {
+  if (newCadence === cadence.value) return;
+  const next =
+    newCadence === "annual"
+      ? form.contributionAmount * 12
+      : Math.floor(form.contributionAmount / 12);
+  form.contributionAmount = next;
+  if (customAmount.value !== "") {
+    customAmount.value = String(next);
+  }
+  cadence.value = newCadence;
+};
+
+// On blur of the custom-amount input: commit to form.contributionAmount.
+// If the typed value matches a preset, snap the radio selection to that
+// preset row and clear the custom input.
+const commitCustomAmount = () => {
+  const raw = customAmount.value;
+  if (raw === "" || raw === null || raw === undefined) return;
+  const n = Math.max(0, Math.floor(Number(raw)));
+  if (!Number.isFinite(n)) {
+    customAmount.value = "";
+    return;
+  }
+  const matched = presetRows.value.find((p) => p.cadenceAmount === n);
+  if (matched) {
+    form.contributionAmount = matched.cadenceAmount;
+    customAmount.value = "";
+  } else {
+    form.contributionAmount = n;
+  }
 };
 
-// Initialize composables
 const {
   initializeHelcimPay,
   verifyPayment,
   cleanup: cleanupHelcimPay,
 } = useHelcimPay();
 
-// Form validation
 const isFormValid = computed(() => {
   return (
     form.name &&
@@ -412,19 +404,17 @@ const isFormValid = computed(() => {
   );
 });
 
-// Check if payment is required
 const needsPayment = computed(() => {
   return requiresPayment(form.contributionAmount);
 });
 
 const flowSummary = computed(() => {
   const amount = form.contributionAmount || 0;
-  const suffix = cadence.value === "annual" ? "/yr" : "/mo";
   return {
     name: form.name,
     email: form.email,
     circle: form.circle,
-    contribution: amount > 0 ? `$${amount}${suffix}` : "$0",
+    contribution: amount > 0 ? formatContribution(amount, cadence.value) : "$0",
   };
 });
 
@@ -436,7 +426,6 @@ const handleSubmit = async () => {
   flowState.value = "creating-customer";
 
   try {
-    // Create customer
     const response = await $fetch("/api/helcim/customer", {
       method: "POST",
       body: {
@@ -456,14 +445,12 @@ const handleSubmit = async () => {
     customerId.value = response.customerId;
     customerCode.value = response.customerCode;
 
-    // Free tier: no Helcim modal, go straight to subscription.
     if (!needsPayment.value) {
       flowState.value = "creating-subscription";
       await createSubscription();
       return;
     }
 
-    // Paid tier: initialize HelcimPay session, then auto-open modal.
     flowState.value = "opening-payment";
     await initializeHelcimPay(customerId.value, customerCode.value, 0);
 
@@ -488,8 +475,6 @@ const handleSubmit = async () => {
     );
 
     if (!subscriptionResult || subscriptionResult.success === false) {
-      // Payment succeeded but subscription couldn't be created.
-      // Keep overlay in success state; admin follow-up will reconcile.
       successMessage.value =
         "Payment successful. Subscription setup may need manual completion.";
       flowState.value = "success";
@@ -506,7 +491,6 @@ const handleSubmit = async () => {
   }
 };
 
-// Create subscription
 const createSubscription = async (cardToken = null) => {
   try {
     const response = await $fetch("/api/helcim/subscription", {
@@ -524,10 +508,6 @@ const createSubscription = async (cardToken = null) => {
       subscriptionData.value = response.subscription;
       flowState.value = "success";
       successMessage.value = "Your membership is active.";
-
-      // Sign-in cookie is now issued by the email-verify magic link
-      // (see /api/helcim/customer). Don't auto-navigate to a gated page —
-      // the success state instructs the user to check their inbox.
     } else {
       throw new Error("Subscription creation failed - response not successful");
     }
@@ -542,7 +522,6 @@ const createSubscription = async (cardToken = null) => {
     console.error(
       "Subscription creation completely failed, but payment was successful",
     );
-    // Don't throw error - let the calling function handle progression
     return {
       success: false,
       error:
@@ -556,35 +535,475 @@ const closeFlowOverlay = () => {
   errorMessage.value = "";
 };
 
-// Cleanup on unmount
 onUnmounted(() => {
   cleanupHelcimPay();
 });
 </script>
 
 <style scoped>
-/* ---- HERO ---- */
-.hero {
-  padding: 48px 32px;
+/* ---- HERO (split, matches about.vue) ---- */
+.join-hero {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  align-items: stretch;
   border-bottom: 1px dashed var(--border);
 }
-.hero h1 {
+.join-hero-left {
+  padding: 32px 32px 28px;
+  border-right: 1px dashed var(--border);
+  align-self: stretch;
+}
+.join-hero-left h1 {
   font-family: "Brygada 1918", serif;
-  font-size: 36px;
+  font-size: 28px;
   font-weight: 600;
   color: var(--text-bright);
   line-height: 1.15;
   letter-spacing: -0.01em;
-  margin-bottom: 16px;
-  max-width: 540px;
+  margin: 0 0 12px;
 }
-.hero p {
+.join-hero-left p {
   color: var(--text-dim);
-  max-width: 460px;
   line-height: 1.7;
+  font-size: 13px;
+  margin: 0;
+  max-width: 460px;
+}
+.join-hero-right {
+  padding: 32px;
+  align-self: stretch;
+}
+.join-hero-right .section-label {
+  margin-bottom: 10px;
+}
+.join-hero-right ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.join-hero-right li {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  padding: 2px 0 2px 14px;
+  position: relative;
+}
+.join-hero-right li::before {
+  content: "›";
+  position: absolute;
+  left: 0;
+  color: var(--candle-faint);
 }
 
-/* ---- PARCHMENT LIST STYLES ---- */
+/* ---- TWO-COL GRID ---- */
+.join-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: stretch;
+  border-bottom: 1px dashed var(--border);
+}
+.join-main {
+  border-right: 1px dashed var(--border);
+  padding: 32px;
+  min-width: 0;
+}
+.join-aside {
+  padding: 32px;
+  min-width: 0;
+  position: relative;
+}
+.join-main-inner {
+  max-width: 560px;
+}
+.join-aside-inner {
+  max-width: 460px;
+}
+
+/* ---- SECTION LABEL (hero + aside + auth'd branch DashedBox) ---- */
+.section-label {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  display: block;
+  margin-bottom: 8px;
+}
+
+/* ---- FORM BLOCKS ---- */
+.form-block {
+  margin-bottom: 32px;
+}
+.form-block:last-of-type {
+  margin-bottom: 0;
+}
+.form-block h2 {
+  font-family: "Brygada 1918", serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin: 0 0 4px;
+}
+.form-block-intro {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin: 0 0 14px;
+  line-height: 1.6;
+}
+
+/* ---- IDENTITY GRID ---- */
+.identity-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.field-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.field-row label {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+.form-input {
+  background: var(--input-bg);
+  border: 1px dashed var(--border);
+  color: var(--text-bright);
+  font-family: "Commit Mono", monospace;
+  font-size: 13px;
+  padding: 10px 14px;
+  width: 100%;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.form-input:focus {
+  border-color: var(--candle);
+  border-style: solid;
+}
+.form-input::placeholder {
+  color: var(--text-faint);
+}
+.field-error {
+  font-size: 11px;
+  color: var(--ember);
+  margin: 0;
+}
+
+/* ---- PWYC ---- */
+.pwyc-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  gap: 12px;
+}
+.cadence-toggle {
+  display: inline-flex;
+  border: 1px dashed var(--border);
+}
+.cadence-toggle button {
+  background: transparent;
+  border: none;
+  padding: 5px 12px;
+  font-family: "Commit Mono", monospace;
+  font-size: 10px;
+  color: var(--text-faint);
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.cadence-toggle button.active {
+  background: var(--parch);
+  color: var(--parch-text);
+}
+
+.pwyc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-top: 1px dashed var(--border);
+  border-bottom: 1px dashed var(--border);
+}
+.pwyc-row {
+  position: relative;
+  border-bottom: 1px dashed var(--border);
+  transition: background 0.12s;
+}
+.pwyc-row:last-of-type {
+  border-bottom: none;
+}
+.pwyc-row:hover {
+  background: var(--surface);
+}
+.pwyc-row.selected {
+  background: var(--input-bg);
+}
+.pwyc-row.selected::before {
+  content: "›";
+  position: absolute;
+  left: 12px;
+  color: var(--candle);
+  font-size: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  line-height: 1;
+}
+.pwyc-radio {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.pwyc-radio:focus-visible + .pwyc-row-content {
+  outline: 1px solid var(--candle);
+  outline-offset: -2px;
+}
+.pwyc-row-content {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 8px 14px 8px 28px;
+  cursor: pointer;
+}
+.pwyc-amt {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-bright);
+  min-width: 36px;
+  flex-shrink: 0;
+}
+.pwyc-row.selected .pwyc-amt {
+  color: var(--candle);
+}
+.pwyc-label {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  flex: 1;
+}
+.pwyc-row.selected .pwyc-label {
+  color: var(--text-bright);
+}
+.pwyc-tag {
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--candle);
+  border: 1px dashed var(--candle-faint);
+  padding: 1px 6px;
+  flex-shrink: 0;
+}
+
+/* Custom row */
+.pwyc-custom {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 6px 14px 6px 28px;
+  cursor: default;
+}
+.pwyc-custom:hover {
+  background: transparent;
+}
+.pwyc-custom.selected {
+  background: var(--input-bg);
+}
+.pwyc-custom-input-wrap {
+  display: flex;
+  align-items: center;
+  border: 1px dashed var(--border);
+  background: var(--input-bg);
+  height: 26px;
+  flex-shrink: 0;
+}
+.pwyc-custom-input-wrap .currency {
+  padding: 0 2px 0 6px;
+  color: var(--text-faint);
+  font-weight: 600;
+  font-size: 12px;
+}
+.pwyc-custom-input {
+  border: none;
+  background: transparent;
+  font-family: "Commit Mono", monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-bright);
+  padding: 0 6px 0 0;
+  width: 56px;
+  outline: none;
+  -moz-appearance: textfield;
+}
+.pwyc-custom-input::-webkit-outer-spin-button,
+.pwyc-custom-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* ---- SUBMIT ROW ---- */
+.submit-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 20px;
+  flex-wrap: wrap;
+}
+.agreement-label {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.55;
+  cursor: pointer;
+  flex: 1;
+  min-width: 240px;
+}
+.agreement-label input {
+  margin-top: 3px;
+  flex-shrink: 0;
+}
+.agreement-label :deep(a) {
+  color: var(--candle);
+  text-decoration: underline;
+}
+.submit-btn {
+  display: inline-block;
+  background: var(--parch);
+  color: var(--parch-accent);
+  font-family: "Commit Mono", monospace;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  border: 1px solid var(--parch);
+  padding: 12px 24px;
+  cursor: pointer;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.submit-btn:hover {
+  background: var(--parch-hover);
+  color: var(--parch-text);
+}
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- TRUST LIST (aside) ---- */
+.trust-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.trust-list li {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.65;
+  padding: 0 0 14px 14px;
+  position: relative;
+}
+.trust-list li:last-child {
+  padding-bottom: 0;
+}
+.trust-list li::before {
+  content: "›";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: var(--candle-faint);
+}
+.trust-list li :deep(strong) {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+/* ---- ERROR BOX ---- */
+.error-box {
+  border: 1px dashed var(--ember);
+  color: var(--ember);
+  padding: 12px 16px;
+  font-size: 12px;
+  margin-bottom: 20px;
+  max-width: 560px;
+}
+
+/* ---- AUTH'D MEMBER BRANCH ---- */
+.full-section {
+  padding: 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.full-section h2 {
+  font-family: "Brygada 1918", serif;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 16px;
+}
+.section-intro {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.65;
+  margin-bottom: 20px;
+}
+.member-info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  max-width: 500px;
+  margin-bottom: 8px;
+}
+.info-value {
+  font-family: "Brygada 1918", serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-top: 4px;
+}
+.button-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-top: 20px;
+}
+.form-submit {
+  display: inline-block;
+  background: var(--parch);
+  color: var(--parch-accent);
+  font-family: "Commit Mono", monospace;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  border: 1px solid var(--parch);
+  padding: 12px 28px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+  text-align: center;
+}
+.form-submit:hover {
+  background: var(--parch-hover);
+  border-color: var(--parch-hover);
+  color: var(--parch-text);
+  text-decoration: none;
+}
+.parchment-link {
+  color: var(--candle-faint);
+  font-size: 12px;
+}
+.parchment-link:hover {
+  color: var(--candle-dim);
+}
+.capitalize {
+  text-transform: capitalize;
+}
+
+/* ---- PARCHMENT LIST (only used in auth'd branch ParchmentInset) ---- */
 :deep(.parchment-inset ul) {
   list-style: none;
   max-width: 560px;
@@ -607,430 +1026,53 @@ onUnmounted(() => {
   line-height: 1.4;
 }
 
-.parchment-link {
-  color: var(--candle-faint);
-  font-size: 12px;
-}
-.parchment-link:hover {
-  color: var(--candle-dim);
-}
-
-/* ---- CONTENT ROW (three circles) ---- */
-.content-row {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  align-items: stretch;
-  border-bottom: 1px dashed var(--border);
-}
-.content-block {
-  padding: 24px 28px;
-  border-right: 1px dashed var(--border);
-  min-width: 0;
-  overflow-wrap: break-word;
-  align-self: stretch;
-}
-.content-block:last-child {
-  border-right: none;
-}
-.content-block h2 {
-  font-family: "Brygada 1918", serif;
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-bottom: 8px;
-}
-.content-block p {
-  color: var(--text-dim);
-  font-size: 12px;
-  line-height: 1.65;
-}
-.circle-not-sure {
-  font-size: 11px;
-  color: var(--text-faint);
-  margin-top: 10px;
-  line-height: 1.6;
-}
-.field-note {
-  font-size: 10px;
-  color: var(--text-faint);
-  margin-top: 4px;
-  margin-bottom: 8px;
-  line-height: 1.4;
-}
-
-/* ---- TWO-COLUMN JOIN LAYOUT ---- */
-.join-two-col {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  border-bottom: 1px dashed var(--border);
-}
-.join-col {
-  padding: 32px;
-}
-.join-col:first-child {
-  border-right: 1px dashed var(--border);
-}
-.join-col h2 {
-  font-family: "Brygada 1918", serif;
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-bottom: 16px;
-}
-
-/* ---- FULL-WIDTH SECTION ---- */
-.full-section {
-  padding: 32px;
-  border-bottom: 1px dashed var(--border);
-}
-.full-section h2 {
-  font-family: "Brygada 1918", serif;
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-bottom: 16px;
-}
-.section-intro {
-  font-size: 13px;
-  color: var(--text-dim);
-  line-height: 1.65;
-  margin-bottom: 20px;
-}
-
-/* ---- TIER LIST (matches about page) ---- */
-.tier-list {
-  list-style: none;
-  padding: 0;
-}
-.tier-list li {
-  padding: 4px 0;
-  font-size: 12px;
-  color: var(--text-dim);
-  border-bottom: 1px dashed var(--border);
-  display: flex;
-  gap: 12px;
-}
-.tier-list li:last-child {
-  border-bottom: none;
-}
-.tier-amt {
-  color: var(--text-bright);
-  font-weight: 600;
-  min-width: 36px;
-}
-.solidarity-note {
-  font-size: 12px;
-  color: var(--text-dim);
-  line-height: 1.65;
-  margin-top: 16px;
-}
-
-.charity-note {
-  font-size: 12px;
-  color: var(--text-dim);
-  line-height: 1.65;
-  margin-top: 16px;
-}
-
-/* ---- FORM SECTION ---- */
-.form-section {
-  padding: 32px;
-  border-bottom: 1px dashed var(--border);
-}
-.form-section h2 {
-  font-family: "Brygada 1918", serif;
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-bottom: 4px;
-}
-.form-intro {
-  font-size: 12px;
-  color: var(--text-dim);
-  margin-bottom: 24px;
-  line-height: 1.65;
-}
-.form-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  max-width: 600px;
-}
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.form-label {
-  font-size: 10px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-}
-.form-input {
-  background: var(--surface);
-  border: 1px dashed var(--border);
-  color: var(--text-bright);
-  font-family: "Commit Mono", monospace;
-  font-size: 13px;
-  padding: 10px 14px;
-  transition: border-color 0.2s;
-  outline: none;
-  width: 100%;
-}
-.form-input:focus {
-  border-color: var(--candle-dim);
-  border-style: solid;
-}
-.form-input::placeholder {
-  color: var(--text-faint);
-}
-.field-error {
-  font-size: 11px;
-  color: var(--ember);
-  margin-top: 4px;
-}
-
-/* ---- CIRCLE RADIOS ---- */
-.circle-radios {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-}
-.circle-radio {
-  position: relative;
-}
-.circle-radio input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.circle-radio label {
-  display: block;
-  border: 1px dashed var(--border);
-  padding: 14px 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-align: center;
-}
-.circle-radio label:hover {
-  border-color: var(--candle-faint);
-}
-.circle-radio input:checked + label {
-  border-style: solid;
-}
-.circle-radio input:checked + label .circle-label-name {
-  color: var(--text-bright);
-}
-.circle-radio.community input:checked + label {
-  border-color: var(--c-community);
-}
-.circle-radio.founder input:checked + label {
-  border-color: var(--c-founder);
-}
-.circle-radio.practitioner input:checked + label {
-  border-color: var(--c-practitioner);
-}
-.circle-label-name {
-  font-size: 12px;
-  color: var(--text-dim);
-  display: block;
-  margin-bottom: 2px;
-}
-.circle-label-desc {
-  font-size: 10px;
-  color: var(--text-faint);
-}
-
-/* ---- CONTRIBUTION SELECT ---- */
-.form-select {
-  background: var(--surface);
-  border: 1px dashed var(--border);
-  color: var(--text-bright);
-  font-family: "Commit Mono", monospace;
-  font-size: 13px;
-  padding: 10px 14px;
-  transition: border-color 0.2s;
-  outline: none;
-  width: 100%;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a7e6a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  cursor: pointer;
-}
-.form-select:focus {
-  border-color: var(--candle-dim);
-  border-style: solid;
-}
-.form-select option {
-  background: var(--surface);
-  color: var(--text-bright);
-}
-
-/* ---- SUBMIT BUTTON ---- */
-.form-submit {
-  display: inline-block;
-  background: var(--parch);
-  color: var(--parch-accent);
-  font-family: "Commit Mono", monospace;
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  border: 1px solid var(--parch);
-  padding: 12px 28px;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-decoration: none;
-  text-align: center;
-}
-.form-submit:hover {
-  background: var(--parch-hover);
-  border-color: var(--parch-hover);
-  color: var(--parch-text);
-  text-decoration: none;
-}
-.form-submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ---- FORM NOTE ---- */
-.form-note {
-  font-size: 11px;
-  color: var(--text-faint);
-  line-height: 1.6;
-  margin-top: 16px;
-  max-width: 460px;
-}
-.form-note a,
-.form-note :deep(a) {
-  color: var(--candle-dim);
-}
-
-/* ---- CHECKBOX ---- */
-.checkbox-label {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--text-dim);
-  line-height: 1.5;
-}
-.checkbox-label input {
-  margin-top: 3px;
-  flex-shrink: 0;
-}
-.checkbox-label a,
-.checkbox-label :deep(a) {
-  color: var(--candle);
-  text-decoration: underline;
-}
-
-/* ---- ERROR & SUCCESS BOXES ---- */
-.error-box {
-  border: 1px dashed var(--ember);
-  color: var(--ember);
-  padding: 12px 16px;
-  font-size: 12px;
-  margin-bottom: 20px;
-  max-width: 600px;
-}
-.success-box {
-  border: 1px dashed var(--green, var(--candle));
-  color: var(--green, var(--candle));
-  padding: 12px 16px;
-  font-size: 12px;
-  margin-bottom: 20px;
-  max-width: 600px;
-}
-
-/* ---- PAYMENT INSTRUCTION ---- */
-.payment-instruction {
-  font-size: 13px;
-  color: var(--text-dim);
-  line-height: 1.65;
-}
-
-/* ---- REDIRECT NOTE ---- */
-.redirect-note {
-  font-size: 12px;
-  color: var(--text-dim);
-  text-align: center;
-}
-
-/* ---- BUTTON ROW ---- */
-.button-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  margin-top: 20px;
-}
-
-/* ---- MEMBER INFO GRID ---- */
-.member-info-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  max-width: 500px;
-  margin-bottom: 8px;
-}
-.info-value {
-  font-family: "Brygada 1918", serif;
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-top: 4px;
-}
-
-/* ---- UTILITY ---- */
-.capitalize {
-  text-transform: capitalize;
-}
-
 /* ---- RESPONSIVE ---- */
+@media (max-width: 1024px) {
+  .join-grid {
+    grid-template-columns: 1fr;
+  }
+  .join-main {
+    border-right: none;
+    border-bottom: 1px dashed var(--border);
+  }
+}
 @media (max-width: 768px) {
-  .content-row {
+  .join-hero {
     grid-template-columns: 1fr;
   }
-  .content-block {
+  .join-hero-left {
     border-right: none;
     border-bottom: 1px dashed var(--border);
+    padding: 24px 20px 20px;
   }
-  .content-block:last-child {
-    border-bottom: none;
+  .join-hero-right {
+    padding: 24px 20px;
   }
-  .join-two-col {
+  .join-hero-left h1 {
+    font-size: 26px;
+  }
+  .identity-grid {
     grid-template-columns: 1fr;
   }
-  .join-col:first-child {
-    border-right: none;
-    border-bottom: 1px dashed var(--border);
+  .join-main,
+  .join-aside {
+    padding: 24px 20px;
   }
-  .circle-radios {
-    grid-template-columns: 1fr;
+  .full-section {
+    padding: 24px 20px;
   }
   .member-info-grid {
     grid-template-columns: 1fr;
   }
-  .hero {
-    padding: 32px 20px;
-  }
-  .hero h1 {
-    font-size: 28px;
-  }
-  .full-section,
-  .form-section {
-    padding: 24px 20px;
-  }
-  .content-block {
-    padding: 20px;
-  }
 }
-
 @media (max-width: 480px) {
+  .submit-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .submit-btn {
+    width: 100%;
+  }
   .button-row {
     flex-direction: column;
     align-items: stretch;
diff --git a/e2e/join-flow.spec.js b/e2e/join-flow.spec.js
index bb7de07..3af8ea1 100644
--- a/e2e/join-flow.spec.js
+++ b/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('#circle-founder')).toBeAttached()
-    await expect(page.locator('#circle-practitioner')).toBeAttached()
-    await expect(page.getByTestId('contribution-amount')).toBeVisible()
-    await expect(page.locator('.form-submit')).toBeVisible()
+    await expect(page.locator('#pwyc-0')).toBeAttached()
+    await expect(page.locator('#pwyc-15')).toBeAttached()
+    await expect(page.locator('#pwyc-50')).toBeAttached()
+    await expect(page.getByTestId('cadence-monthly')).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('.form-submit')).toBeDisabled()
+    await expect(page.locator('.submit-btn')).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 })
-    // Contribution is now a numeric input with preset chips, not a select
-    await page.getByTestId('contribution-amount').fill('0')
+    // Pick the $0 preset
+    await page.locator('#pwyc-0').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()
 
-    // 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')
-    await expect(summary).toBeVisible()
-    await expect(summary).toContainText('$120 today')
-    await expect(summary).toContainText('at each annual renewal')
-
+    // Switch back to Monthly: returns to "$15"
     await page.getByTestId('cadence-monthly').click()
-    await expect(summary).toContainText('$10 today')
-    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/)
+    await expect(suggestedRow).toHaveText('$15')
   })
 
   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 })
-    await page.getByTestId('contribution-amount').fill('15')
+    // $15 preset is selected by default — verify and submit
+    await page.locator('#pwyc-15').check({ force: true })
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
 
-    await expect(page.locator('.form-submit')).toBeEnabled()
-    await page.locator('.form-submit').click()
+    await expect(page.locator('.submit-btn')).toBeEnabled()
+    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.getByTestId('contribution-amount').fill('0')
+    await page.locator('#pwyc-0').check({ force: true })
     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')