Show seven cards on the four method decks and open each as a routing overlay of its parts, so groups write from empty fields with Generate draft, search the full deck, and see unselected scope chips with enough contrast.

app/(app)/create/screens/card/MembershipMethodsScreen.tsx

@@ -7,13 +7,9 @@
  * Page chrome is the shared question-and-options shell
  * (`CreateFlowTwoColumnSelectShell`); options are CardStack `singleStack`.
  *
- * Card click opens the Figma create modal (node `20858-13948`) with three
- * editable sections rendered by {@link MembershipMethodEditFields}. The same
- * field set is reused on `/create/final-review` — see `FinalReviewChipEditModal`.
- * Confirm persists both the chip selection and any user edits as a
- * `membershipMethodDetailsById[id]` override; section defaults come from
- * `messages/en/create/customRule/membership.json` and will be replaced with
- * DB-driven content.
+ * Card click opens Overlay / Modal / Card as a routing view of its parts
+ * ({@link MethodCardPolicyDialog}). Confirm persists the chip selection and
+ * any edits as a `membershipMethodDetailsById[id]` override.
  */
 
 import { useState, useCallback, useMemo, useRef } from "react";
@@ -25,9 +21,9 @@ import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
 import CardStack from "../../../../components/cards/CardStack";
-import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
-import { MembershipMethodEditFields } from "../../components/methodEditFields";
+import { MethodCardPolicyDialog } from "../../components/MethodCardPolicyDialog";
+import { useMembershipPolicySteps } from "../../components/methodCardPolicySteps";
 import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
 import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
 import { membershipPresetFor, emptyMembershipDetails } from "../../../../../lib/create/finalReviewChipPresets";
@@ -106,7 +102,8 @@ export function MembershipMethodsScreen() {
     [mem.methods, selectedIds, state.customMethodCardMetaById],
   );
 
-  const { sampleCards, compactCardIds, methodById, recommendationsReady } =
+  const rec = m.create.customRule.recommendations;
+  const { sampleCards, compactCardIds, methodById, recommendationsReady, showDeckLine, compactLimit } =
     useMethodCardDeckOrdering(
     "membership",
     mergedMethods,
@@ -189,10 +186,14 @@ export function MembershipMethodsScreen() {
     },
     [markCreateFlowInteraction],
   );
+  const membershipSteps = useMembershipPolicySteps(
+    pendingDraft ?? emptyMembershipDetails(),
+    handleDraftChange,
+    pendingCardId ? membershipPresetFor(pendingCardId) : undefined,
+  );
 
   const isSelectedCardModal =
     pendingCardId !== null && selectedIds.includes(pendingCardId);
-  const showMethodModalPrimary = true;
 
   const customFacetDetailsMatchPreset = useMemo(() => {
     if (!pendingCardId || !pendingDraft) return false;
@@ -709,57 +710,52 @@ export function MembershipMethodsScreen() {
             }}
             hasMore={true}
             toggleLabel={mem.page.seeAllLink}
-            compactRecommendedLimit={5}
+            compactRecommendedLimit={compactLimit}
             compactCardIds={compactCardIds}
             layout="singleStack"
+            deckLine={showDeckLine ? rec.deckLine : undefined}
+            searchPlaceholder={rec.searchPlaceholder}
+            alternativePrefix={rec.alternative}
+            onAlternativeSelect={handleCardClick}
             className="w-full lg:h-full lg:min-h-0 lg:flex-1"
           />
         )}
       </div>
     </CreateFlowTwoColumnSelectShell>
-      <Create
+      <MethodCardPolicyDialog
         isOpen={createModalOpen}
-        onClose={handleCreateModalClose}
-        onNext={handleCreateModalPrimary}
-        title={modalConfig.title}
+        cardLabel={modalConfig.title}
         description={modalConfig.description}
-        nextButtonText={modalConfig.nextButtonText}
-        showBackButton={false}
-        showNextButton={showMethodModalPrimary}
-        showRemoveButton={isSelectedCardModal}
-        onRemove={handleRemoveSelectedFromModal}
-        backdropVariant="blurredYellow"
+        editing={isSelectedCardModal}
+        steps={membershipSteps}
+        onClose={handleCreateModalClose}
+        onConfirm={handleCreateModalPrimary}
+        onDeselect={
+          isSelectedCardModal ? handleRemoveSelectedFromModal : undefined
+        }
         kebabTriggerAriaLabel={modalKebabMenu.triggerAriaLabel}
         kebabMenuAriaLabel={modalKebabMenu.menuAriaLabel}
         kebabMenuItems={kebabMenuItems}
       >
-        {pendingCardId && pendingDraft ? (
-          modalUsesWizardFieldBlocksBody ? (
-            <CustomMethodCardModalBody
-              cardId={pendingCardId}
-              blocksById={state.customMethodCardFieldBlocksById}
-              blocksOverride={
-                draftFieldBlocks !== null ? draftFieldBlocks : undefined
-              }
-              policyMeta={state.customMethodCardMetaById?.[pendingCardId]}
-              showPolicyContentLockupWhenNoBlocks={
-                draftFieldBlocks === null || draftFieldBlocks.length === 0
-              }
-              onFieldBlocksChange={
-                draftFieldBlocks === null
-                  ? undefined
-                  : (next) => setDraftFieldBlocks(next)
-              }
-            />
-          ) : (
-            <MembershipMethodEditFields
-              value={pendingDraft}
-              onChange={handleDraftChange}
-              generateDraft={membershipPresetFor(pendingCardId)}
-            />
-          )
+        {pendingCardId && modalUsesWizardFieldBlocksBody ? (
+          <CustomMethodCardModalBody
+            cardId={pendingCardId}
+            blocksById={state.customMethodCardFieldBlocksById}
+            blocksOverride={
+              draftFieldBlocks !== null ? draftFieldBlocks : undefined
+            }
+            policyMeta={state.customMethodCardMetaById?.[pendingCardId]}
+            showPolicyContentLockupWhenNoBlocks={
+              draftFieldBlocks === null || draftFieldBlocks.length === 0
+            }
+            onFieldBlocksChange={
+              draftFieldBlocks === null
+                ? undefined
+                : (next) => setDraftFieldBlocks(next)
+            }
+          />
         ) : null}
-      </Create>
+      </MethodCardPolicyDialog>
       <CustomMethodCardWizard
         isOpen={addCustomWizardOpen}
         onClose={handleCloseAddWizard}