From 92149d9fb06829745d1ed46d5ac6d443017fe993 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 15 Apr 2026 21:15:02 -0600
Subject: [PATCH 01/15] Skip create save page when logged in

---
 app/create/CreateFlowLayoutClient.tsx       | 15 ++++++++++++++-
 app/create/hooks/useCreateFlowNavigation.ts |  9 ++++++---
 app/create/utils/flowSteps.ts               | 19 +++++++++++++++++--
 tests/unit/flowSteps.test.ts                | 13 +++++++++++++
 4 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/app/create/CreateFlowLayoutClient.tsx b/app/create/CreateFlowLayoutClient.tsx
index 2ee4581..fb83700 100644
--- a/app/create/CreateFlowLayoutClient.tsx
+++ b/app/create/CreateFlowLayoutClient.tsx
@@ -93,13 +93,16 @@ function CreateFlowLayoutContent({
   const router = useRouter();
   const pathname = usePathname();
   const { openLogin } = useAuthModal();
+  const skipCommunitySave = sessionResolved && Boolean(sessionUser);
   const {
     currentStep,
     nextStep,
     previousStep,
     goToNextStep,
     goToPreviousStep,
-  } = useCreateFlowNavigation();
+  } = useCreateFlowNavigation(
+    skipCommunitySave ? { skipCommunitySave: true } : undefined,
+  );
   const { state, clearState, updateState } = useCreateFlow();
   const { draftSaveBannerMessage, setDraftSaveBannerMessage } =
     useCreateFlowDraftSaveBanner();
@@ -240,6 +243,16 @@ function CreateFlowLayoutContent({
     await runAuthenticatedExit(opts);
   };
 
+  useEffect(() => {
+    if (
+      sessionResolved &&
+      sessionUser &&
+      currentStep === "community-save"
+    ) {
+      router.replace("/create/review");
+    }
+  }, [sessionResolved, sessionUser, currentStep, router]);
+
   useEffect(() => {
     if (currentStep !== "community-save") {
       setCommunitySaveMagicLinkError(null);
diff --git a/app/create/hooks/useCreateFlowNavigation.ts b/app/create/hooks/useCreateFlowNavigation.ts
index 74f5c4e..848e723 100644
--- a/app/create/hooks/useCreateFlowNavigation.ts
+++ b/app/create/hooks/useCreateFlowNavigation.ts
@@ -4,6 +4,7 @@ import { usePathname, useRouter } from "next/navigation";
 import { useCallback } from "react";
 import type { CreateFlowStep } from "../types";
 import {
+  type CreateFlowNavigationOptions,
   getNextStep,
   getPreviousStep,
   parseCreateFlowScreenFromPathname,
@@ -26,7 +27,9 @@ const blurActiveElement = (): void => {
  *
  * Resolves the active step from `/create/{screenId}` via {@link parseCreateFlowScreenFromPathname} (flowSteps).
  */
-export function useCreateFlowNavigation(): {
+export function useCreateFlowNavigation(
+  options?: CreateFlowNavigationOptions,
+): {
   currentStep: CreateFlowStep | null;
   goToNextStep: () => void;
   goToPreviousStep: () => void;
@@ -41,8 +44,8 @@ export function useCreateFlowNavigation(): {
 
   const validStep = parseCreateFlowScreenFromPathname(pathname ?? null);
 
-  const nextStep = getNextStep(validStep);
-  const previousStep = getPreviousStep(validStep);
+  const nextStep = getNextStep(validStep, options);
+  const previousStep = getPreviousStep(validStep, options);
 
   const goToNextStep = useCallback(() => {
     blurActiveElement();
diff --git a/app/create/utils/flowSteps.ts b/app/create/utils/flowSteps.ts
index b8138df..93f1331 100644
--- a/app/create/utils/flowSteps.ts
+++ b/app/create/utils/flowSteps.ts
@@ -37,16 +37,26 @@ export const VALID_STEPS: readonly CreateFlowStep[] = FLOW_STEP_ORDER;
  */
 export const FIRST_STEP: CreateFlowStep = FLOW_STEP_ORDER[0];
 
+/** Options for navigation when the email / magic-link save step is not shown (signed-in users). */
+export type CreateFlowNavigationOptions = {
+  skipCommunitySave?: boolean;
+};
+
 /**
  * Returns the next step in the flow, or null if current is last/invalid
  */
 export function getNextStep(
   currentStep: CreateFlowStep | null | undefined,
+  options?: CreateFlowNavigationOptions,
 ): CreateFlowStep | null {
   if (!currentStep) return null;
   const index = FLOW_STEP_ORDER.indexOf(currentStep);
   if (index === -1 || index === FLOW_STEP_ORDER.length - 1) return null;
-  return FLOW_STEP_ORDER[index + 1] as CreateFlowStep;
+  const next = FLOW_STEP_ORDER[index + 1] as CreateFlowStep;
+  if (options?.skipCommunitySave && next === "community-save") {
+    return getNextStep("community-save", options);
+  }
+  return next;
 }
 
 /**
@@ -54,11 +64,16 @@ export function getNextStep(
  */
 export function getPreviousStep(
   currentStep: CreateFlowStep | null | undefined,
+  options?: CreateFlowNavigationOptions,
 ): CreateFlowStep | null {
   if (!currentStep) return null;
   const index = FLOW_STEP_ORDER.indexOf(currentStep);
   if (index <= 0) return null;
-  return FLOW_STEP_ORDER[index - 1] as CreateFlowStep;
+  const prev = FLOW_STEP_ORDER[index - 1] as CreateFlowStep;
+  if (options?.skipCommunitySave && prev === "community-save") {
+    return getPreviousStep("community-save", options);
+  }
+  return prev;
 }
 
 /**
diff --git a/tests/unit/flowSteps.test.ts b/tests/unit/flowSteps.test.ts
index 1cf4b9f..04e451c 100644
--- a/tests/unit/flowSteps.test.ts
+++ b/tests/unit/flowSteps.test.ts
@@ -55,4 +55,17 @@ describe("flowSteps", () => {
     expect(getNextStep("community-structure")).toBe("community-context");
     expect(getNextStep("community-context")).toBe("community-size");
   });
+
+  it("skipCommunitySave bridges upload → review and review → upload", () => {
+    const opts = { skipCommunitySave: true } as const;
+    expect(getNextStep("community-upload", opts)).toBe("review");
+    expect(getPreviousStep("review", opts)).toBe("community-upload");
+  });
+
+  it("skipCommunitySave does not change steps outside the save segment", () => {
+    const opts = { skipCommunitySave: true } as const;
+    expect(getNextStep("community-size", opts)).toBe("community-upload");
+    expect(getNextStep("review", opts)).toBe("cards");
+    expect(getPreviousStep("cards", opts)).toBe("review");
+  });
 });

From b15f0d62262cf1be7c6b3c6a438bdcae4a24c0f7 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 15 Apr 2026 21:23:48 -0600
Subject: [PATCH 02/15] Align DB with create community stage

---
 .../controls/Upload/Upload.view.tsx           |   4 +-
 app/create/context/CreateFlowContext.tsx      |  14 ++-
 .../select/CommunityStructureSelectScreen.tsx | 118 +++++++++++++++---
 app/create/types.ts                           |  19 +++
 lib/server/validation/createFlowSchemas.ts    |  16 +++
 tests/unit/createFlowValidation.test.ts       |  23 ++++
 6 files changed, 170 insertions(+), 24 deletions(-)

diff --git a/app/components/controls/Upload/Upload.view.tsx b/app/components/controls/Upload/Upload.view.tsx
index 96748bc..8409881 100644
--- a/app/components/controls/Upload/Upload.view.tsx
+++ b/app/components/controls/Upload/Upload.view.tsx
@@ -49,8 +49,8 @@ function UploadView({
         />
       )}
 
-      {/* Upload container */}
-      <div className="bg-[var(--color-surface-default-secondary,#141414)] flex gap-[24px] items-center justify-center px-[var(--measures-spacing-600,24px)] py-[var(--measures-spacing-1200,48px)] rounded-[var(--measures-radius-200,8px)] shrink-0 w-full">
+      {/* Upload container — max width per create-flow spec */}
+      <div className="bg-[var(--color-surface-default-secondary,#141414)] mx-auto flex w-full max-w-[474px] shrink-0 items-center justify-center gap-[24px] rounded-[var(--measures-radius-200,8px)] px-[var(--measures-spacing-600,24px)] py-[var(--measures-spacing-1200,48px)]">
         {/* Upload button */}
         <button
           type="button"
diff --git a/app/create/context/CreateFlowContext.tsx b/app/create/context/CreateFlowContext.tsx
index a57d600..57239d7 100644
--- a/app/create/context/CreateFlowContext.tsx
+++ b/app/create/context/CreateFlowContext.tsx
@@ -77,10 +77,16 @@ export function CreateFlowProvider({
   }, []);
 
   const updateState = useCallback((updates: Partial<CreateFlowState>) => {
-    setState((prevState) => ({
-      ...prevState,
-      ...updates,
-    }));
+    setState((prevState) => {
+      const merged: CreateFlowState = { ...prevState, ...updates };
+      if (updates.communityStructureChipSnapshots !== undefined) {
+        merged.communityStructureChipSnapshots = {
+          ...(prevState.communityStructureChipSnapshots ?? {}),
+          ...updates.communityStructureChipSnapshots,
+        };
+      }
+      return merged;
+    });
   }, []);
 
   const replaceState = useCallback((next: CreateFlowState) => {
diff --git a/app/create/screens/select/CommunityStructureSelectScreen.tsx b/app/create/screens/select/CommunityStructureSelectScreen.tsx
index eb465b2..eaf30cf 100644
--- a/app/create/screens/select/CommunityStructureSelectScreen.tsx
+++ b/app/create/screens/select/CommunityStructureSelectScreen.tsx
@@ -11,6 +11,7 @@ import MultiSelect from "../../../components/controls/MultiSelect";
 import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
 import { useMessages } from "../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
+import type { CommunityStructureChipSnapshotRow } from "../../types";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
@@ -79,6 +80,30 @@ function selectedIdsFromOptions(options: ChipOption[]): string[] {
     .map((o) => o.id);
 }
 
+function chipOptionsToSnapshotRows(
+  options: ChipOption[],
+): CommunityStructureChipSnapshotRow[] {
+  return options.map((o) => ({
+    id: o.id,
+    label: o.label,
+    ...(o.state !== undefined ? { state: o.state } : {}),
+  }));
+}
+
+/** Returns chips when a draft snapshot exists; otherwise null (use preset rows + selected ids). */
+function snapshotRowsToChipOptions(
+  rows: CommunityStructureChipSnapshotRow[] | undefined,
+): ChipOption[] | null {
+  if (!Array.isArray(rows) || rows.length === 0) return null;
+  return rows.map((r) => ({
+    id: r.id,
+    label: r.label,
+    ...(r.state !== undefined
+      ? { state: r.state as ChipOption["state"] }
+      : {}),
+  }));
+}
+
 /** Create Community step 3 — Figma `20094:18244` (responsive grid + column caps via `createFlowLayoutTokens`). */
 export function CommunityStructureSelectScreen() {
   const m = useMessages();
@@ -87,42 +112,84 @@ export function CommunityStructureSelectScreen() {
 
   const [organizationTypeOptions, setOrganizationTypeOptions] = useState<
     ChipOption[]
-  >(() =>
-    applySavedSelection(
+  >(() => {
+    const fromSnap = snapshotRowsToChipOptions(
+      state.communityStructureChipSnapshots?.organizationTypes,
+    );
+    if (fromSnap) return fromSnap;
+    return applySavedSelection(
       chipRowsFromLabels(cs.organizationTypes),
       state.selectedOrganizationTypeIds,
-    ),
-  );
+    );
+  });
 
-  const [scaleOptions, setScaleOptions] = useState<ChipOption[]>(() =>
-    applySavedSelection(
+  const [scaleOptions, setScaleOptions] = useState<ChipOption[]>(() => {
+    const fromSnap = snapshotRowsToChipOptions(
+      state.communityStructureChipSnapshots?.scale,
+    );
+    if (fromSnap) return fromSnap;
+    return applySavedSelection(
       chipRowsFromLabels(cs.scaleOptions),
       state.selectedScaleIds,
-    ),
-  );
+    );
+  });
 
-  const [maturityOptions, setMaturityOptions] = useState<ChipOption[]>(() =>
-    applySavedSelection(
+  const [maturityOptions, setMaturityOptions] = useState<ChipOption[]>(() => {
+    const fromSnap = snapshotRowsToChipOptions(
+      state.communityStructureChipSnapshots?.maturity,
+    );
+    if (fromSnap) return fromSnap;
+    return applySavedSelection(
       chipRowsFromLabels(cs.maturityOptions),
       state.selectedMaturityIds,
-    ),
-  );
+    );
+  });
 
   useEffect(() => {
+    const fromSnap = snapshotRowsToChipOptions(
+      state.communityStructureChipSnapshots?.organizationTypes,
+    );
+    if (fromSnap) {
+      setOrganizationTypeOptions(fromSnap);
+      return;
+    }
     setOrganizationTypeOptions((prev) =>
       applySavedSelection(prev, state.selectedOrganizationTypeIds),
     );
-  }, [state.selectedOrganizationTypeIds]);
+  }, [
+    state.communityStructureChipSnapshots?.organizationTypes,
+    state.selectedOrganizationTypeIds,
+  ]);
 
   useEffect(() => {
+    const fromSnap = snapshotRowsToChipOptions(
+      state.communityStructureChipSnapshots?.scale,
+    );
+    if (fromSnap) {
+      setScaleOptions(fromSnap);
+      return;
+    }
     setScaleOptions((prev) => applySavedSelection(prev, state.selectedScaleIds));
-  }, [state.selectedScaleIds]);
+  }, [
+    state.communityStructureChipSnapshots?.scale,
+    state.selectedScaleIds,
+  ]);
 
   useEffect(() => {
+    const fromSnap = snapshotRowsToChipOptions(
+      state.communityStructureChipSnapshots?.maturity,
+    );
+    if (fromSnap) {
+      setMaturityOptions(fromSnap);
+      return;
+    }
     setMaturityOptions((prev) =>
       applySavedSelection(prev, state.selectedMaturityIds),
     );
-  }, [state.selectedMaturityIds]);
+  }, [
+    state.communityStructureChipSnapshots?.maturity,
+    state.selectedMaturityIds,
+  ]);
 
   const organizationCustomHandlers = useMemo(
     () =>
@@ -155,19 +222,34 @@ export function CommunityStructureSelectScreen() {
   const persistOrg = (next: ChipOption[]) => {
     markCreateFlowInteraction();
     setOrganizationTypeOptions(next);
-    updateState({ selectedOrganizationTypeIds: selectedIdsFromOptions(next) });
+    updateState({
+      selectedOrganizationTypeIds: selectedIdsFromOptions(next),
+      communityStructureChipSnapshots: {
+        organizationTypes: chipOptionsToSnapshotRows(next),
+      },
+    });
   };
 
   const persistScale = (next: ChipOption[]) => {
     markCreateFlowInteraction();
     setScaleOptions(next);
-    updateState({ selectedScaleIds: selectedIdsFromOptions(next) });
+    updateState({
+      selectedScaleIds: selectedIdsFromOptions(next),
+      communityStructureChipSnapshots: {
+        scale: chipOptionsToSnapshotRows(next),
+      },
+    });
   };
 
   const persistMaturity = (next: ChipOption[]) => {
     markCreateFlowInteraction();
     setMaturityOptions(next);
-    updateState({ selectedMaturityIds: selectedIdsFromOptions(next) });
+    updateState({
+      selectedMaturityIds: selectedIdsFromOptions(next),
+      communityStructureChipSnapshots: {
+        maturity: chipOptionsToSnapshotRows(next),
+      },
+    });
   };
 
   const handleOrganizationTypeClick = (chipId: string) => {
diff --git a/app/create/types.ts b/app/create/types.ts
index fa45dbc..9aae00a 100644
--- a/app/create/types.ts
+++ b/app/create/types.ts
@@ -31,6 +31,16 @@ export type CreateFlowTextStateField =
   | "communityContext"
   | "communitySaveEmail";
 
+/**
+ * Serialized chip row for `community-structure` (preset + custom labels).
+ * Stored in drafts so custom chips survive refresh and server sync.
+ */
+export type CommunityStructureChipSnapshotRow = {
+  id: string;
+  label: string;
+  state?: string;
+};
+
 /**
  * Flow state for inputs across create-flow steps.
  * Validated on `PUT /api/drafts/me` via `createFlowStateSchema` (Zod + JSON safety checks).
@@ -51,6 +61,15 @@ export interface CreateFlowState {
   selectedScaleIds?: string[];
   /** Selected chip ids from `community-structure` (maturity). */
   selectedMaturityIds?: string[];
+  /**
+   * Full chip lists for `community-structure` (needed so custom chips round-trip in drafts).
+   * IDs alone are insufficient because custom rows are not reconstructible from copy JSON.
+   */
+  communityStructureChipSnapshots?: {
+    organizationTypes?: CommunityStructureChipSnapshotRow[];
+    scale?: CommunityStructureChipSnapshotRow[];
+    maturity?: CommunityStructureChipSnapshotRow[];
+  };
   currentStep?: CreateFlowStep;
   /** Section drafts; structure will tighten as steps persist real shapes. */
   sections?: Record<string, unknown>[];
diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts
index fc14112..37d24eb 100644
--- a/lib/server/validation/createFlowSchemas.ts
+++ b/lib/server/validation/createFlowSchemas.ts
@@ -6,6 +6,20 @@ const flowStepTuple = FLOW_STEP_ORDER as unknown as [string, ...string[]];
 
 const createFlowStepSchema = z.enum(flowStepTuple);
 
+const communityStructureChipSnapshotRowSchema = z.object({
+  id: z.string().max(200),
+  label: z.string().max(2000),
+  state: z.string().max(32).optional(),
+});
+
+const communityStructureChipSnapshotsSchema = z
+  .object({
+    organizationTypes: z.array(communityStructureChipSnapshotRowSchema).optional(),
+    scale: z.array(communityStructureChipSnapshotRowSchema).optional(),
+    maturity: z.array(communityStructureChipSnapshotRowSchema).optional(),
+  })
+  .strict();
+
 /**
  * Published rule `document` column: arbitrary JSON object with safety bounds.
  */
@@ -35,6 +49,8 @@ export const createFlowStateSchema = z
     selectedOrganizationTypeIds: z.array(z.string()).optional(),
     selectedScaleIds: z.array(z.string()).optional(),
     selectedMaturityIds: z.array(z.string()).optional(),
+    communityStructureChipSnapshots:
+      communityStructureChipSnapshotsSchema.optional(),
     currentStep: createFlowStepSchema.optional(),
     sections: z.array(z.unknown()).optional(),
     stakeholders: z.array(z.unknown()).optional(),
diff --git a/tests/unit/createFlowValidation.test.ts b/tests/unit/createFlowValidation.test.ts
index b435cad..8efafad 100644
--- a/tests/unit/createFlowValidation.test.ts
+++ b/tests/unit/createFlowValidation.test.ts
@@ -78,6 +78,29 @@ describe("createFlowStateSchema", () => {
     });
     expect(r.success).toBe(false);
   });
+
+  it("accepts communityStructureChipSnapshots with custom chip rows", () => {
+    const r = createFlowStateSchema.safeParse({
+      communityStructureChipSnapshots: {
+        organizationTypes: [
+          { id: "1", label: "Co-op", state: "Selected" },
+          { id: "custom-uuid", label: "My type", state: "Selected" },
+        ],
+        scale: [{ id: "1", label: "Local" }],
+        maturity: [],
+      },
+    });
+    expect(r.success).toBe(true);
+  });
+
+  it("rejects invalid chip snapshot row types", () => {
+    const r = createFlowStateSchema.safeParse({
+      communityStructureChipSnapshots: {
+        organizationTypes: [{ id: "1", label: 123 }],
+      },
+    });
+    expect(r.success).toBe(false);
+  });
 });
 
 describe("putDraftBodySchema", () => {

From beae150f029597af7cd2b58255ff978880d5c93a Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 15 Apr 2026 22:14:46 -0600
Subject: [PATCH 03/15] Implement core-values screen

---
 app/create/CreateFlowLayoutClient.tsx         |  67 +++---
 .../CreateFlowTwoColumnSelectShell.tsx        |  75 ++++++
 app/create/screens/CreateFlowScreenView.tsx   |   3 +
 .../select/CommunitySizeSelectScreen.tsx      |  33 +--
 .../select/CommunityStructureSelectScreen.tsx |  33 +--
 .../screens/select/CoreValuesSelectScreen.tsx | 219 ++++++++++++++++++
 app/create/types.ts                           |   5 +
 .../utils/createFlowProportionProgress.ts     |   1 +
 app/create/utils/createFlowScreenRegistry.ts  |   6 +
 app/create/utils/flowSteps.ts                 |   1 +
 lib/server/validation/createFlowSchemas.ts    |   4 +
 messages/en/create/coreValues.json            |  75 ++++++
 messages/en/create/footer.json                |   3 +-
 messages/en/index.ts                          |   2 +
 .../unit/createFlowProportionProgress.test.ts |   5 +-
 tests/unit/flowSteps.test.ts                  |   5 +-
 16 files changed, 460 insertions(+), 77 deletions(-)
 create mode 100644 app/create/components/CreateFlowTwoColumnSelectShell.tsx
 create mode 100644 app/create/screens/select/CoreValuesSelectScreen.tsx
 create mode 100644 messages/en/create/coreValues.json

diff --git a/app/create/CreateFlowLayoutClient.tsx b/app/create/CreateFlowLayoutClient.tsx
index fb83700..230ac59 100644
--- a/app/create/CreateFlowLayoutClient.tsx
+++ b/app/create/CreateFlowLayoutClient.tsx
@@ -302,6 +302,11 @@ function CreateFlowLayoutContent({
   const isRightRailStep = currentStep === "right-rail";
   const isFinalReviewStep = currentStep === "final-review";
   const isCardsStep = currentStep === "cards";
+  /** Two-column select steps: at `lg+` only the right column scrolls; main must not scroll the full page. */
+  const isSelectSplitScrollStep =
+    currentStep === "community-size" ||
+    currentStep === "community-structure" ||
+    currentStep === "core-values";
   const stepIdx = currentStep != null ? getStepIndex(currentStep) : -1;
 
   /** At `md+`, main cross-axis: center by default; exceptions stay top-aligned (see product spec). */
@@ -309,9 +314,11 @@ function CreateFlowLayoutContent({
     ? "items-stretch overflow-y-auto md:overflow-hidden"
     : isRightRailStep
       ? "items-stretch overflow-hidden"
-      : isFinalReviewStep || isCardsStep || isTemplateReviewRoute
-        ? "items-start justify-center overflow-y-auto"
-        : "items-start justify-center overflow-y-auto md:items-center";
+      : isSelectSplitScrollStep
+        ? "items-start justify-start overflow-y-auto max-lg:overflow-y-auto lg:min-h-0 lg:items-stretch lg:overflow-hidden"
+        : isFinalReviewStep || isCardsStep || isTemplateReviewRoute
+          ? "items-start justify-center overflow-y-auto"
+          : "items-start justify-center overflow-y-auto md:items-center";
 
   const isTextStep = createFlowStepUsesCenteredTextLayout(currentStep);
   const mainMaxMdJustify =
@@ -479,32 +486,18 @@ function CreateFlowLayoutContent({
                 </Button>
               </div>
             ) : currentStep === "community-name" && nextStep ? (
-              <div className="flex flex-shrink-0 items-center gap-3 md:gap-4">
-                <Button
-                  buttonType="outline"
-                  palette="inverse"
-                  size="xsmall"
-                  disabled={isPublishing}
-                  className={footerPrimaryButtonClass}
-                  onClick={() => {
-                    goToNextStep();
-                  }}
-                >
-                  {footer.next}
-                </Button>
-                <Button
-                  buttonType="filled"
-                  palette="default"
-                  size="xsmall"
-                  disabled={isPublishing}
-                  className={footerPrimaryButtonClass}
-                  onClick={() => {
-                    goToNextStep();
-                  }}
-                >
-                  {footer.confirmName}
-                </Button>
-              </div>
+              <Button
+                buttonType="filled"
+                palette="default"
+                size="xsmall"
+                disabled={isPublishing}
+                className={footerPrimaryButtonClass}
+                onClick={() => {
+                  goToNextStep();
+                }}
+              >
+                {footer.confirmName}
+              </Button>
             ) : currentStep === "community-save" && nextStep ? (
               <div className="flex flex-shrink-0 items-center gap-3 md:gap-4">
                 <Button
@@ -566,6 +559,22 @@ function CreateFlowLayoutContent({
                   {footer.createFromTemplate}
                 </Button>
               </div>
+            ) : currentStep === "core-values" && nextStep ? (
+              <Button
+                buttonType="filled"
+                palette="default"
+                size="xsmall"
+                disabled={
+                  isPublishing ||
+                  (state.selectedCoreValueIds?.length ?? 0) === 0
+                }
+                className={footerPrimaryButtonClass}
+                onClick={() => {
+                  goToNextStep();
+                }}
+              >
+                {footer.confirmCoreValues}
+              </Button>
             ) : nextStep ? (
               <Button
                 buttonType="filled"
diff --git a/app/create/components/CreateFlowTwoColumnSelectShell.tsx b/app/create/components/CreateFlowTwoColumnSelectShell.tsx
new file mode 100644
index 0000000..ae7c2d7
--- /dev/null
+++ b/app/create/components/CreateFlowTwoColumnSelectShell.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { CreateFlowStepShell } from "./CreateFlowStepShell";
+import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "./createFlowLayoutTokens";
+
+export type CreateFlowSelectShellLgVerticalAlign = "center" | "start";
+
+interface CreateFlowTwoColumnSelectShellProps {
+  header: ReactNode;
+  children: ReactNode;
+  /**
+   * At `lg+`, layout variant: `"center"` = vertically centered pair (community size/structure).
+   * `"start"` = top-weighted layout with a scrollable right column (core values): uses `items-stretch`
+   * so the right column gets a bounded height; `items-start` would grow with content and break scroll.
+   */
+  lgVerticalAlign?: CreateFlowSelectShellLgVerticalAlign;
+}
+
+/**
+ * Two-column layout for create-flow select steps (community size/structure, core values).
+ * Below `lg`, layout and scrolling match the previous single-column behavior (full page scroll).
+ * At `lg+`, mirrors {@link CompletedScreen}: static header column + scrollable controls column
+ * (`min-h-0` + `overflow-y-auto` height chain; see completed page right rail).
+ */
+export function CreateFlowTwoColumnSelectShell({
+  header,
+  children,
+  lgVerticalAlign = "center",
+}: CreateFlowTwoColumnSelectShellProps) {
+  /** `stretch` is required for `min-h-0` + `overflow-y-auto` on the right column. */
+  const rowLgCrossAlignClass =
+    lgVerticalAlign === "start" ? "lg:items-stretch" : "lg:items-center";
+
+  const leftLgMainJustifyClass =
+    lgVerticalAlign === "start" ? "lg:justify-start" : "lg:justify-center";
+
+  return (
+    <CreateFlowStepShell
+      variant="centeredNarrow"
+      contentTopBelowMd="space-1400"
+      className={
+        /* Below `lg`: natural height — same as legacy select screens (main scrolls). */
+        /* At `lg+`: fill main + clip so only the right column scrolls (CompletedScreen pattern). */
+        "w-full min-w-0 max-lg:flex-none lg:min-h-0 lg:h-full lg:max-h-full lg:flex-1 lg:overflow-hidden lg:items-stretch lg:self-stretch"
+      }
+    >
+      <div
+        className={
+          "flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-400,16px)] md:max-w-[640px] " +
+          "max-lg:flex-none lg:max-h-full lg:max-w-[1328px] lg:min-h-0 lg:flex-1 lg:flex-row lg:flex-nowrap " +
+          `${rowLgCrossAlignClass} lg:justify-center lg:gap-[var(--measures-spacing-1200,48px)] lg:overflow-hidden`
+        }
+      >
+        <div
+          className={
+            `flex w-full min-w-0 shrink-0 flex-col items-start gap-[var(--measures-spacing-200,8px)] ` +
+            `lg:flex-1 ${leftLgMainJustifyClass} lg:py-[12px] lg:max-w-[640px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
+          }
+        >
+          {header}
+        </div>
+        <div
+          className={
+            `scrollbar-hide relative flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-800,32px)] ` +
+            `overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto lg:pb-[var(--measures-spacing-300,12px)] ` +
+            CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS
+          }
+        >
+          {children}
+        </div>
+      </div>
+    </CreateFlowStepShell>
+  );
+}
diff --git a/app/create/screens/CreateFlowScreenView.tsx b/app/create/screens/CreateFlowScreenView.tsx
index 734b004..a5ec717 100644
--- a/app/create/screens/CreateFlowScreenView.tsx
+++ b/app/create/screens/CreateFlowScreenView.tsx
@@ -6,6 +6,7 @@ import { InformationalScreen } from "./informational/InformationalScreen";
 import { CreateFlowTextFieldScreen } from "./text/CreateFlowTextFieldScreen";
 import { CommunitySizeSelectScreen } from "./select/CommunitySizeSelectScreen";
 import { CommunityStructureSelectScreen } from "./select/CommunityStructureSelectScreen";
+import { CoreValuesSelectScreen } from "./select/CoreValuesSelectScreen";
 import { ConfirmStakeholdersScreen } from "./select/ConfirmStakeholdersScreen";
 import { CommunityUploadScreen } from "./upload/CommunityUploadScreen";
 import { CommunityReviewScreen } from "./review/CommunityReviewScreen";
@@ -62,6 +63,8 @@ export function CreateFlowScreenView({
       );
     case "review":
       return <CommunityReviewScreen />;
+    case "core-values":
+      return <CoreValuesSelectScreen />;
     case "cards":
       return <CardsScreen />;
     case "right-rail":
diff --git a/app/create/screens/select/CommunitySizeSelectScreen.tsx b/app/create/screens/select/CommunitySizeSelectScreen.tsx
index 5c8dc01..a65f088 100644
--- a/app/create/screens/select/CommunitySizeSelectScreen.tsx
+++ b/app/create/screens/select/CommunitySizeSelectScreen.tsx
@@ -6,8 +6,7 @@ import type { ChipOption } from "../../../components/controls/MultiSelect/MultiS
 import { useMessages } from "../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
-import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
+import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
 
 function chipRowsFromLabels(
   rows: readonly { label: string }[],
@@ -92,26 +91,16 @@ export function CommunitySizeSelectScreen() {
   );
 
   return (
-    <CreateFlowStepShell
-      variant="centeredNarrow"
-      contentTopBelowMd="space-1400"
+    <CreateFlowTwoColumnSelectShell
+      header={
+        <CreateFlowHeaderLockup
+          title={cs.header.title}
+          description={cs.header.description}
+          justification="left"
+        />
+      }
     >
-      <div className="flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-400,16px)] md:max-w-[640px] lg:max-w-[1328px] lg:flex-row lg:flex-nowrap lg:items-center lg:justify-center lg:gap-[var(--measures-spacing-1200,48px)]">
-        <div
-          className={`flex flex-col items-start gap-[var(--measures-spacing-200,8px)] lg:flex-1 lg:justify-center lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
-        >
-          <CreateFlowHeaderLockup
-            title={cs.header.title}
-            description={cs.header.description}
-            justification="left"
-          />
-        </div>
-        <div
-          className={`flex flex-col items-start gap-[var(--measures-spacing-800,32px)] lg:flex-1 ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
-        >
-          {multiSelectBlock}
-        </div>
-      </div>
-    </CreateFlowStepShell>
+      {multiSelectBlock}
+    </CreateFlowTwoColumnSelectShell>
   );
 }
diff --git a/app/create/screens/select/CommunityStructureSelectScreen.tsx b/app/create/screens/select/CommunityStructureSelectScreen.tsx
index eaf30cf..1b27100 100644
--- a/app/create/screens/select/CommunityStructureSelectScreen.tsx
+++ b/app/create/screens/select/CommunityStructureSelectScreen.tsx
@@ -13,8 +13,7 @@ import { useMessages } from "../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import type { CommunityStructureChipSnapshotRow } from "../../types";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
-import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
+import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
 
 function createListCustomHandlers(
   setList: Dispatch<SetStateAction<ChipOption[]>>,
@@ -336,26 +335,16 @@ export function CommunityStructureSelectScreen() {
   );
 
   return (
-    <CreateFlowStepShell
-      variant="centeredNarrow"
-      contentTopBelowMd="space-1400"
+    <CreateFlowTwoColumnSelectShell
+      header={
+        <CreateFlowHeaderLockup
+          title={cs.header.title}
+          description={cs.header.description}
+          justification="left"
+        />
+      }
     >
-      <div className="flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-400,16px)] md:max-w-[640px] lg:max-w-[1328px] lg:flex-row lg:flex-nowrap lg:items-center lg:justify-center lg:gap-[var(--measures-spacing-1200,48px)]">
-        <div
-          className={`flex flex-col items-start gap-[var(--measures-spacing-200,8px)] lg:flex-1 lg:justify-center lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
-        >
-          <CreateFlowHeaderLockup
-            title={cs.header.title}
-            description={cs.header.description}
-            justification="left"
-          />
-        </div>
-        <div
-          className={`flex flex-col items-start gap-[var(--measures-spacing-800,32px)] lg:flex-1 ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
-        >
-          {multiSelectBlock}
-        </div>
-      </div>
-    </CreateFlowStepShell>
+      {multiSelectBlock}
+    </CreateFlowTwoColumnSelectShell>
   );
 }
diff --git a/app/create/screens/select/CoreValuesSelectScreen.tsx b/app/create/screens/select/CoreValuesSelectScreen.tsx
new file mode 100644
index 0000000..146d51b
--- /dev/null
+++ b/app/create/screens/select/CoreValuesSelectScreen.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import MultiSelect from "../../../components/controls/MultiSelect";
+import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
+import { useMessages } from "../../../contexts/MessagesContext";
+import { useCreateFlow } from "../../context/CreateFlowContext";
+import type { CommunityStructureChipSnapshotRow } from "../../types";
+import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
+
+const MAX_CORE_VALUES = 5;
+
+function chipRowsFromLabels(rows: readonly string[]): ChipOption[] {
+  return rows.map((label, i) => ({
+    id: String(i + 1),
+    label,
+    state: "Unselected" as const,
+  }));
+}
+
+function applySavedSelection(
+  options: ChipOption[],
+  saved: string[] | undefined,
+): ChipOption[] {
+  const selected = new Set(saved ?? []);
+  return options.map((opt) =>
+    opt.state === "Custom"
+      ? opt
+      : {
+          ...opt,
+          state: selected.has(opt.id)
+            ? ("Selected" as const)
+            : ("Unselected" as const),
+        },
+  );
+}
+
+function selectedIdsFromOptions(options: ChipOption[]): string[] {
+  return options
+    .filter((o) => o.state === "Selected")
+    .map((o) => o.id);
+}
+
+function chipOptionsToSnapshotRows(
+  options: ChipOption[],
+): CommunityStructureChipSnapshotRow[] {
+  return options.map((o) => ({
+    id: o.id,
+    label: o.label,
+    ...(o.state !== undefined ? { state: o.state } : {}),
+  }));
+}
+
+function snapshotRowsToChipOptions(
+  rows: CommunityStructureChipSnapshotRow[] | undefined,
+): ChipOption[] | null {
+  if (!Array.isArray(rows) || rows.length === 0) return null;
+  return rows.map((r) => ({
+    id: r.id,
+    label: r.label,
+    ...(r.state !== undefined
+      ? { state: r.state as ChipOption["state"] }
+      : {}),
+  }));
+}
+
+/** Create Custom — Core Values (Figma `20264:68378`). Up to five selections; preset list + custom chips. */
+export function CoreValuesSelectScreen() {
+  const m = useMessages();
+  const cv = m.create.coreValues;
+  const presetLabels = cv.values;
+  const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
+
+  const [coreValueOptions, setCoreValueOptions] = useState<ChipOption[]>(
+    () => {
+      const fromSnap = snapshotRowsToChipOptions(state.coreValuesChipsSnapshot);
+      if (fromSnap) return fromSnap;
+      return applySavedSelection(
+        chipRowsFromLabels(presetLabels),
+        state.selectedCoreValueIds,
+      );
+    },
+  );
+
+  useEffect(() => {
+    const fromSnap = snapshotRowsToChipOptions(state.coreValuesChipsSnapshot);
+    if (fromSnap) {
+      setCoreValueOptions(fromSnap);
+      return;
+    }
+    setCoreValueOptions((prev) =>
+      applySavedSelection(prev, state.selectedCoreValueIds),
+    );
+  }, [state.coreValuesChipsSnapshot, state.selectedCoreValueIds]);
+
+  const persistCoreValues = useCallback(
+    (next: ChipOption[]) => {
+      markCreateFlowInteraction();
+      setCoreValueOptions(next);
+      updateState({
+        selectedCoreValueIds: selectedIdsFromOptions(next),
+        coreValuesChipsSnapshot: chipOptionsToSnapshotRows(next),
+      });
+    },
+    [markCreateFlowInteraction, updateState],
+  );
+
+  const handleChipClick = (chipId: string) => {
+    const target = coreValueOptions.find((o) => o.id === chipId);
+    if (!target || target.state === "Custom") return;
+
+    const willSelect = target.state !== "Selected";
+    const selectedCount = coreValueOptions.filter(
+      (o) => o.state === "Selected",
+    ).length;
+    if (willSelect && selectedCount >= MAX_CORE_VALUES) return;
+
+    const next: ChipOption[] = coreValueOptions.map((opt) =>
+      opt.id === chipId
+        ? {
+            ...opt,
+            state:
+              opt.state === "Selected"
+                ? ("Unselected" as const)
+                : ("Selected" as const),
+          }
+        : opt,
+    );
+    persistCoreValues(next);
+  };
+
+  const addHandlers = {
+    onAddClick: () => {
+      markCreateFlowInteraction();
+      setCoreValueOptions((prev) => {
+        const next: ChipOption[] = [
+          ...prev,
+          { id: crypto.randomUUID(), label: "", state: "Custom" },
+        ];
+        updateState({
+          selectedCoreValueIds: selectedIdsFromOptions(next),
+          coreValuesChipsSnapshot: chipOptionsToSnapshotRows(next),
+        });
+        return next;
+      });
+    },
+    onCustomChipConfirm: (chipId: string, value: string) => {
+      markCreateFlowInteraction();
+      setCoreValueOptions((prev) => {
+        const next = prev.map((opt) =>
+          opt.id === chipId
+            ? { ...opt, label: value, state: "Unselected" as const }
+            : opt,
+        );
+        updateState({
+          selectedCoreValueIds: selectedIdsFromOptions(next),
+          coreValuesChipsSnapshot: chipOptionsToSnapshotRows(next),
+        });
+        return next;
+      });
+    },
+    onCustomChipClose: (chipId: string) => {
+      markCreateFlowInteraction();
+      setCoreValueOptions((prev) => {
+        const next = prev.filter((o) => o.id !== chipId);
+        updateState({
+          selectedCoreValueIds: selectedIdsFromOptions(next),
+          coreValuesChipsSnapshot: chipOptionsToSnapshotRows(next),
+        });
+        return next;
+      });
+    },
+  };
+
+  const description = (
+    <>
+      <span className="leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
+        {cv.header.descriptionLead}{" "}
+      </span>
+      <button
+        type="button"
+        onClick={addHandlers.onAddClick}
+        className="cursor-pointer font-inter font-normal leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90"
+      >
+        {cv.header.addLink}
+      </button>
+      <span className="leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
+        {" "}
+        {cv.header.descriptionTrail}
+      </span>
+    </>
+  );
+
+  return (
+    <CreateFlowTwoColumnSelectShell
+      lgVerticalAlign="start"
+      header={
+        <CreateFlowHeaderLockup
+          title={cv.header.title}
+          description={description}
+          justification="left"
+        />
+      }
+    >
+      <MultiSelect
+        formHeader={false}
+        size="M"
+        options={coreValueOptions}
+        onChipClick={handleChipClick}
+        onAddClick={addHandlers.onAddClick}
+        onCustomChipConfirm={addHandlers.onCustomChipConfirm}
+        onCustomChipClose={addHandlers.onCustomChipClose}
+        addButton
+        addButtonText={cv.multiSelect.addButtonText}
+      />
+    </CreateFlowTwoColumnSelectShell>
+  );
+}
diff --git a/app/create/types.ts b/app/create/types.ts
index 9aae00a..ef86b0c 100644
--- a/app/create/types.ts
+++ b/app/create/types.ts
@@ -18,6 +18,7 @@ export type CreateFlowStep =
   | "community-upload"
   | "community-save"
   | "review"
+  | "core-values"
   | "cards"
   | "right-rail"
   | "confirm-stakeholders"
@@ -70,6 +71,10 @@ export interface CreateFlowState {
     scale?: CommunityStructureChipSnapshotRow[];
     maturity?: CommunityStructureChipSnapshotRow[];
   };
+  /** Create Custom — core values step (max five `selectedCoreValueIds`). */
+  selectedCoreValueIds?: string[];
+  /** Full chip rows for core values (custom labels). */
+  coreValuesChipsSnapshot?: CommunityStructureChipSnapshotRow[];
   currentStep?: CreateFlowStep;
   /** Section drafts; structure will tighten as steps persist real shapes. */
   sections?: Record<string, unknown>[];
diff --git a/app/create/utils/createFlowProportionProgress.ts b/app/create/utils/createFlowProportionProgress.ts
index 9b649a1..2541e39 100644
--- a/app/create/utils/createFlowProportionProgress.ts
+++ b/app/create/utils/createFlowProportionProgress.ts
@@ -15,6 +15,7 @@ const PROPORTION_BY_STEP_INDEX: readonly ProportionBarState[] = [
   "1-5", // community-upload
   "2-0", // community-save
   "2-0", // review (Figma Flow — Review `19706:12135`: same segment fill as end of Create Community)
+  "2-0", // core-values (same segment as review / end of Create Community)
   "2-2", // cards
   "3-0", // right-rail
   "3-1", // confirm-stakeholders
diff --git a/app/create/utils/createFlowScreenRegistry.ts b/app/create/utils/createFlowScreenRegistry.ts
index 9959541..35719b2 100644
--- a/app/create/utils/createFlowScreenRegistry.ts
+++ b/app/create/utils/createFlowScreenRegistry.ts
@@ -84,6 +84,12 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record<
     messageNamespace: "create.review",
     centeredBodyBelowMd: false,
   },
+  "core-values": {
+    layoutKind: "select",
+    figmaNodeId: "20264-68378",
+    messageNamespace: "create.coreValues",
+    centeredBodyBelowMd: false,
+  },
   cards: {
     layoutKind: "card",
     figmaNodeId: "TBD-cards",
diff --git a/app/create/utils/flowSteps.ts b/app/create/utils/flowSteps.ts
index 93f1331..818a3fc 100644
--- a/app/create/utils/flowSteps.ts
+++ b/app/create/utils/flowSteps.ts
@@ -20,6 +20,7 @@ export const FLOW_STEP_ORDER: readonly CreateFlowStep[] = [
   "community-upload",
   "community-save",
   "review",
+  "core-values",
   "cards",
   "right-rail",
   "confirm-stakeholders",
diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts
index 37d24eb..0ecfdf7 100644
--- a/lib/server/validation/createFlowSchemas.ts
+++ b/lib/server/validation/createFlowSchemas.ts
@@ -51,6 +51,10 @@ export const createFlowStateSchema = z
     selectedMaturityIds: z.array(z.string()).optional(),
     communityStructureChipSnapshots:
       communityStructureChipSnapshotsSchema.optional(),
+    selectedCoreValueIds: z.array(z.string()).max(200).optional(),
+    coreValuesChipsSnapshot: z
+      .array(communityStructureChipSnapshotRowSchema)
+      .optional(),
     currentStep: createFlowStepSchema.optional(),
     sections: z.array(z.unknown()).optional(),
     stakeholders: z.array(z.unknown()).optional(),
diff --git a/messages/en/create/coreValues.json b/messages/en/create/coreValues.json
new file mode 100644
index 0000000..56e120d
--- /dev/null
+++ b/messages/en/create/coreValues.json
@@ -0,0 +1,75 @@
+{
+  "header": {
+    "title": "Choose up to five Core Values",
+    "descriptionLead": "What does the community hold most dear? You can also combine or",
+    "addLink": "add",
+    "descriptionTrail": "new values to the list."
+  },
+  "multiSelect": {
+    "addButtonText": "Add value"
+  },
+  "values": [
+    "Accessibility",
+    "Accountability",
+    "Adaptability",
+    "Agency",
+    "Altruism",
+    "Anti-oppression",
+    "Autonomy",
+    "Capacity Building",
+    "Collaboration",
+    "Common Ownership",
+    "Community Care",
+    "Conflict Resolution",
+    "Consent",
+    "Consensus",
+    "Constructive Feedback",
+    "Cooperation",
+    "Copyleft",
+    "Decentralization",
+    "Direct Action",
+    "Diversity",
+    "Documentation",
+    "Education",
+    "Empathy",
+    "Empowerment",
+    "Equity",
+    "Experimentation",
+    "Fairness",
+    "Fair Remuneration",
+    "Flexibility",
+    "Forkability",
+    "Freedom",
+    "Freedom of Information",
+    "Generosity",
+    "Harm Reduction",
+    "Holism",
+    "Holocracy",
+    "Honesty",
+    "Horizontalism",
+    "Humility",
+    "Inclusion",
+    "Inclusivity",
+    "Independence",
+    "Innovation",
+    "Integrity",
+    "Interdependence",
+    "Interoperability",
+    "Intersectionality",
+    "Justice",
+    "Knowledge Sharing",
+    "Labor Rights",
+    "Leadership",
+    "Learning",
+    "Liberty",
+    "Localism",
+    "Maintenance",
+    "Mentorship",
+    "Meritocracy",
+    "Mutual Aid",
+    "Non-violence",
+    "Open Source",
+    "Openness",
+    "Participation"
+  ]
+}
diff --git a/messages/en/create/footer.json b/messages/en/create/footer.json
index 3698c2a..1708b87 100644
--- a/messages/en/create/footer.json
+++ b/messages/en/create/footer.json
@@ -10,5 +10,6 @@
   "confirmDescription": "Confirm description",
   "confirmMembers": "Confirm members",
   "finalizeCommunityRule": "Finalize CommunityRule",
-  "confirmStakeholders": "Confirm Stakeholders"
+  "confirmStakeholders": "Confirm Stakeholders",
+  "confirmCoreValues": "Confirm values"
 }
diff --git a/messages/en/index.ts b/messages/en/index.ts
index e1044fd..57455fe 100644
--- a/messages/en/index.ts
+++ b/messages/en/index.ts
@@ -27,6 +27,7 @@ import createCommunityStructure from "./create/communityStructure.json";
 import createCommunityUpload from "./create/communityUpload.json";
 import createCommunitySave from "./create/communitySave.json";
 import createReview from "./create/review.json";
+import createCoreValues from "./create/coreValues.json";
 import createConfirmStakeholders from "./create/confirmStakeholders.json";
 import createFinalReview from "./create/finalReview.json";
 import createCompleted from "./create/completed.json";
@@ -68,6 +69,7 @@ export default {
     communityUpload: createCommunityUpload,
     communitySave: createCommunitySave,
     review: createReview,
+    coreValues: createCoreValues,
     confirmStakeholders: createConfirmStakeholders,
     finalReview: createFinalReview,
     completed: createCompleted,
diff --git a/tests/unit/createFlowProportionProgress.test.ts b/tests/unit/createFlowProportionProgress.test.ts
index 3b463b7..aa0534c 100644
--- a/tests/unit/createFlowProportionProgress.test.ts
+++ b/tests/unit/createFlowProportionProgress.test.ts
@@ -17,10 +17,13 @@ describe("getProportionBarProgressForCreateFlowStep", () => {
     );
   });
 
-  it("uses 2-0 on community-save and review (end of Create Community segment)", () => {
+  it("uses 2-0 on community-save, review, and core-values (Create Community segment / same fill)", () => {
     expect(getProportionBarProgressForCreateFlowStep("community-save")).toBe(
       "2-0",
     );
     expect(getProportionBarProgressForCreateFlowStep("review")).toBe("2-0");
+    expect(getProportionBarProgressForCreateFlowStep("core-values")).toBe(
+      "2-0",
+    );
   });
 });
diff --git a/tests/unit/flowSteps.test.ts b/tests/unit/flowSteps.test.ts
index 04e451c..cfc0cec 100644
--- a/tests/unit/flowSteps.test.ts
+++ b/tests/unit/flowSteps.test.ts
@@ -36,6 +36,7 @@ describe("flowSteps", () => {
   it("isValidStep reflects FLOW_STEP_ORDER membership", () => {
     expect(isValidStep("community-size")).toBe(true);
     expect(isValidStep("confirm-stakeholders")).toBe(true);
+    expect(isValidStep("core-values")).toBe(true);
     expect(isValidStep("nope")).toBe(false);
     expect(isValidStep(null)).toBe(false);
   });
@@ -65,7 +66,7 @@ describe("flowSteps", () => {
   it("skipCommunitySave does not change steps outside the save segment", () => {
     const opts = { skipCommunitySave: true } as const;
     expect(getNextStep("community-size", opts)).toBe("community-upload");
-    expect(getNextStep("review", opts)).toBe("cards");
-    expect(getPreviousStep("cards", opts)).toBe("review");
+    expect(getNextStep("review", opts)).toBe("core-values");
+    expect(getPreviousStep("cards", opts)).toBe("core-values");
   });
 });

From eedb70f9f3a1a387022a9a68e203b2dff96ac0c1 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 15 Apr 2026 23:13:28 -0600
Subject: [PATCH 04/15] Implement core value modals

---
 .../modals/Create/Create.container.tsx        |   2 +
 app/components/modals/Create/Create.types.ts  |   6 +
 app/components/modals/Create/Create.view.tsx  |  12 +-
 app/create/context/CreateFlowContext.tsx      |  34 +-
 .../screens/select/CoreValuesSelectScreen.tsx | 244 +++++++++--
 app/create/types.ts                           |   8 +
 .../utils/coreValueDetailsLocalStorage.ts     |  57 +++
 lib/create/buildPublishPayload.ts             |  37 +-
 lib/server/validation/createFlowSchemas.ts    |   8 +
 messages/en/create/coreValues.json            | 378 +++++++++++++++---
 stories/modals/Create.stories.js              |  23 ++
 .../CoreValuesSelectScreen.test.tsx           |  42 ++
 tests/components/Create.test.tsx              |  12 +
 tests/unit/buildPublishPayload.test.ts        |  25 +-
 tests/unit/createFlowValidation.test.ts       |  19 +
 15 files changed, 806 insertions(+), 101 deletions(-)
 create mode 100644 app/create/utils/coreValueDetailsLocalStorage.ts
 create mode 100644 tests/components/CoreValuesSelectScreen.test.tsx

diff --git a/app/components/modals/Create/Create.container.tsx b/app/components/modals/Create/Create.container.tsx
index 0390eb2..180f528 100644
--- a/app/components/modals/Create/Create.container.tsx
+++ b/app/components/modals/Create/Create.container.tsx
@@ -25,6 +25,7 @@ const CreateContainer = memo<CreateProps>(
     className = "",
     ariaLabel,
     ariaLabelledBy,
+    backdropVariant = "default",
   }) => {
     const createRef = useRef<HTMLDivElement>(null);
     const overlayRef = useRef<HTMLDivElement>(null);
@@ -132,6 +133,7 @@ const CreateContainer = memo<CreateProps>(
         ariaLabelledBy={ariaLabelledBy}
         createRef={createRef}
         overlayRef={overlayRef}
+        backdropVariant={backdropVariant}
       />
     );
   },
diff --git a/app/components/modals/Create/Create.types.ts b/app/components/modals/Create/Create.types.ts
index 4b6214a..7f0a7ee 100644
--- a/app/components/modals/Create/Create.types.ts
+++ b/app/components/modals/Create/Create.types.ts
@@ -27,6 +27,11 @@ export interface CreateProps {
   multiSelect?: boolean;
   upload?: boolean;
   proportion?: boolean;
+  /**
+   * Backdrop behind the dialog. `loginYellow` matches the Login modal’s blurred brand overlay.
+   * @default "default"
+   */
+  backdropVariant?: "default" | "loginYellow";
 }
 
 export interface CreateViewProps {
@@ -51,4 +56,5 @@ export interface CreateViewProps {
   ariaLabelledBy?: string;
   createRef: React.RefObject<HTMLDivElement>;
   overlayRef: React.RefObject<HTMLDivElement>;
+  backdropVariant: "default" | "loginYellow";
 }
diff --git a/app/components/modals/Create/Create.view.tsx b/app/components/modals/Create/Create.view.tsx
index 112d624..98933bb 100644
--- a/app/components/modals/Create/Create.view.tsx
+++ b/app/components/modals/Create/Create.view.tsx
@@ -6,6 +6,15 @@ import ModalFooter from "../../utility/ModalFooter";
 import ModalHeader from "../../utility/ModalHeader";
 import type { CreateViewProps } from "./Create.types";
 
+const backdropOverlayClasses: Record<
+  CreateViewProps["backdropVariant"],
+  string
+> = {
+  default: "fixed inset-0 bg-black/50 z-[9998]",
+  loginYellow:
+    "fixed inset-0 z-[9998] bg-[var(--color-surface-inverse-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-inverse-brand-primary)]/75",
+};
+
 export function CreateView({
   isOpen,
   onClose,
@@ -28,6 +37,7 @@ export function CreateView({
   ariaLabelledBy,
   createRef,
   overlayRef,
+  backdropVariant,
 }: CreateViewProps) {
   if (!isOpen) return null;
 
@@ -36,7 +46,7 @@ export function CreateView({
       {/* Overlay */}
       <div
         ref={overlayRef}
-        className="fixed inset-0 bg-black/50 z-[9998]"
+        className={backdropOverlayClasses[backdropVariant]}
         onClick={onClose}
         aria-hidden="true"
       />
diff --git a/app/create/context/CreateFlowContext.tsx b/app/create/context/CreateFlowContext.tsx
index 57239d7..ad927b3 100644
--- a/app/create/context/CreateFlowContext.tsx
+++ b/app/create/context/CreateFlowContext.tsx
@@ -20,6 +20,11 @@ import {
   readAnonymousCreateFlowState,
   writeAnonymousCreateFlowState,
 } from "../utils/anonymousDraftStorage";
+import {
+  clearCoreValueDetailsLocalStorage,
+  readCoreValueDetailsFromLocalStorage,
+  writeCoreValueDetailsToLocalStorage,
+} from "../utils/coreValueDetailsLocalStorage";
 
 const CreateFlowContext = createContext<CreateFlowContextValue | null>(null);
 
@@ -41,9 +46,20 @@ export function CreateFlowProvider({
   initialStep = null,
   enableAnonymousPersistence = false,
 }: CreateFlowProviderProps) {
-  const [state, setState] = useState<CreateFlowState>(() =>
-    enableAnonymousPersistence ? readAnonymousCreateFlowState() : {},
-  );
+  const [state, setState] = useState<CreateFlowState>(() => {
+    const base = enableAnonymousPersistence
+      ? readAnonymousCreateFlowState()
+      : {};
+    const storedDetails = readCoreValueDetailsFromLocalStorage();
+    if (Object.keys(storedDetails).length === 0) return base;
+    return {
+      ...base,
+      coreValueDetailsByChipId: {
+        ...storedDetails,
+        ...(base.coreValueDetailsByChipId ?? {}),
+      },
+    };
+  });
   const [interactionTouched, setInteractionTouched] = useState(false);
   const [currentStep] = useState<CreateFlowStep | null>(initialStep);
   const prevPersistRef = useRef(enableAnonymousPersistence);
@@ -72,6 +88,11 @@ export function CreateFlowProvider({
     writeAnonymousCreateFlowState(state);
   }, [state, enableAnonymousPersistence]);
 
+  /** Meaning/signals for core values: survives refresh for signed-in users; merged with anonymous draft when both exist. */
+  useEffect(() => {
+    writeCoreValueDetailsToLocalStorage(state.coreValueDetailsByChipId);
+  }, [state.coreValueDetailsByChipId]);
+
   const markCreateFlowInteraction = useCallback(() => {
     setInteractionTouched(true);
   }, []);
@@ -85,6 +106,12 @@ export function CreateFlowProvider({
           ...updates.communityStructureChipSnapshots,
         };
       }
+      if (updates.coreValueDetailsByChipId !== undefined) {
+        merged.coreValueDetailsByChipId = {
+          ...(prevState.coreValueDetailsByChipId ?? {}),
+          ...updates.coreValueDetailsByChipId,
+        };
+      }
       return merged;
     });
   }, []);
@@ -97,6 +124,7 @@ export function CreateFlowProvider({
     setState({});
     setInteractionTouched(false);
     clearAnonymousCreateFlowStorage();
+    clearCoreValueDetailsLocalStorage();
   }, []);
 
   const contextValue: CreateFlowContextValue = {
diff --git a/app/create/screens/select/CoreValuesSelectScreen.tsx b/app/create/screens/select/CoreValuesSelectScreen.tsx
index 146d51b..5cdd0bd 100644
--- a/app/create/screens/select/CoreValuesSelectScreen.tsx
+++ b/app/create/screens/select/CoreValuesSelectScreen.tsx
@@ -1,8 +1,11 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import MultiSelect from "../../../components/controls/MultiSelect";
 import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
+import TextArea from "../../../components/controls/TextArea";
+import Create from "../../../components/modals/Create";
+import ContentLockup from "../../../components/type/ContentLockup";
 import { useMessages } from "../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import type { CommunityStructureChipSnapshotRow } from "../../types";
@@ -11,10 +14,38 @@ import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoCo
 
 const MAX_CORE_VALUES = 5;
 
-function chipRowsFromLabels(rows: readonly string[]): ChipOption[] {
-  return rows.map((label, i) => ({
+type ModalSession = "pending" | "editing";
+
+/** Row in `coreValues.json` `values` — string (legacy) or `{ label, meaning, signals }`. */
+type CoreValuePresetJson =
+  | string
+  | { label: string; meaning?: string; signals?: string };
+
+type CoreValuePreset = {
+  label: string;
+  meaning: string;
+  signals: string;
+};
+
+function normalizeCoreValuePresets(
+  values: readonly CoreValuePresetJson[],
+): CoreValuePreset[] {
+  return values.map((v) => {
+    if (typeof v === "string") {
+      return { label: v, meaning: "", signals: "" };
+    }
+    return {
+      label: v.label,
+      meaning: typeof v.meaning === "string" ? v.meaning : "",
+      signals: typeof v.signals === "string" ? v.signals : "",
+    };
+  });
+}
+
+function chipRowsFromPresets(presets: readonly CoreValuePreset[]): ChipOption[] {
+  return presets.map((row, i) => ({
     id: String(i + 1),
-    label,
+    label: row.label,
     state: "Unselected" as const,
   }));
 }
@@ -69,7 +100,11 @@ function snapshotRowsToChipOptions(
 export function CoreValuesSelectScreen() {
   const m = useMessages();
   const cv = m.create.coreValues;
-  const presetLabels = cv.values;
+  const presets = useMemo(
+    () => normalizeCoreValuePresets(cv.values as CoreValuePresetJson[]),
+    [cv.values],
+  );
+
   const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
 
   const [coreValueOptions, setCoreValueOptions] = useState<ChipOption[]>(
@@ -77,12 +112,19 @@ export function CoreValuesSelectScreen() {
       const fromSnap = snapshotRowsToChipOptions(state.coreValuesChipsSnapshot);
       if (fromSnap) return fromSnap;
       return applySavedSelection(
-        chipRowsFromLabels(presetLabels),
+        chipRowsFromPresets(presets),
         state.selectedCoreValueIds,
       );
     },
   );
 
+  const [activeModalChipId, setActiveModalChipId] = useState<string | null>(
+    null,
+  );
+  const [modalSession, setModalSession] = useState<ModalSession | null>(null);
+  const [draftMeaning, setDraftMeaning] = useState("");
+  const [draftSignals, setDraftSignals] = useState("");
+
   useEffect(() => {
     const fromSnap = snapshotRowsToChipOptions(state.coreValuesChipsSnapshot);
     if (fromSnap) {
@@ -94,40 +136,121 @@ export function CoreValuesSelectScreen() {
     );
   }, [state.coreValuesChipsSnapshot, state.selectedCoreValueIds]);
 
-  const persistCoreValues = useCallback(
+  /** Sync chips to create-flow draft. Never call `updateState` from inside a `setCoreValueOptions` updater — defer with `queueMicrotask`. */
+  const syncCoreValuesToDraft = useCallback(
     (next: ChipOption[]) => {
-      markCreateFlowInteraction();
-      setCoreValueOptions(next);
       updateState({
         selectedCoreValueIds: selectedIdsFromOptions(next),
         coreValuesChipsSnapshot: chipOptionsToSnapshotRows(next),
       });
     },
-    [markCreateFlowInteraction, updateState],
+    [updateState],
   );
 
+  const persistCoreValues = useCallback(
+    (next: ChipOption[]) => {
+      markCreateFlowInteraction();
+      setCoreValueOptions(next);
+      syncCoreValuesToDraft(next);
+    },
+    [markCreateFlowInteraction, syncCoreValuesToDraft],
+  );
+
+  /** Default meaning/signals from `coreValues.json` `values` for each preset label. */
+  const getPresetTexts = useCallback(
+    (valueLabel: string): { meaning: string; signals: string } => {
+      const row = presets.find((p) => p.label === valueLabel);
+      if (!row) return { meaning: "", signals: "" };
+      return { meaning: row.meaning, signals: row.signals };
+    },
+    [presets],
+  );
+
+  const getInitialTexts = useCallback(
+    (chipId: string, valueLabel: string) => {
+      const saved = state.coreValueDetailsByChipId?.[chipId];
+      const preset = getPresetTexts(valueLabel);
+      return {
+        meaning: saved?.meaning ?? preset.meaning,
+        signals: saved?.signals ?? preset.signals,
+      };
+    },
+    [state.coreValueDetailsByChipId, getPresetTexts],
+  );
+
+  const openModal = useCallback(
+    (chipId: string, session: ModalSession, valueLabel: string) => {
+      const initial = getInitialTexts(chipId, valueLabel);
+      setDraftMeaning(initial.meaning);
+      setDraftSignals(initial.signals);
+      setActiveModalChipId(chipId);
+      setModalSession(session);
+      markCreateFlowInteraction();
+    },
+    [getInitialTexts, markCreateFlowInteraction],
+  );
+
+  const handleModalDismiss = useCallback(() => {
+    if (activeModalChipId && modalSession === "pending") {
+      const next = coreValueOptions.map((opt) =>
+        opt.id === activeModalChipId
+          ? { ...opt, state: "Unselected" as const }
+          : opt,
+      );
+      persistCoreValues(next);
+    }
+    setActiveModalChipId(null);
+    setModalSession(null);
+  }, [activeModalChipId, modalSession, coreValueOptions, persistCoreValues]);
+
+  const handleModalConfirm = useCallback(() => {
+    if (!activeModalChipId) return;
+    markCreateFlowInteraction();
+    updateState({
+      coreValueDetailsByChipId: {
+        [activeModalChipId]: {
+          meaning: draftMeaning,
+          signals: draftSignals,
+        },
+      },
+    });
+    setActiveModalChipId(null);
+    setModalSession(null);
+  }, [
+    activeModalChipId,
+    draftMeaning,
+    draftSignals,
+    markCreateFlowInteraction,
+    updateState,
+  ]);
+
   const handleChipClick = (chipId: string) => {
     const target = coreValueOptions.find((o) => o.id === chipId);
     if (!target || target.state === "Custom") return;
 
-    const willSelect = target.state !== "Selected";
     const selectedCount = coreValueOptions.filter(
       (o) => o.state === "Selected",
     ).length;
-    if (willSelect && selectedCount >= MAX_CORE_VALUES) return;
+
+    if (target.state === "Selected") {
+      const next: ChipOption[] = coreValueOptions.map((opt) =>
+        opt.id === chipId
+          ? { ...opt, state: "Unselected" as const }
+          : opt,
+      );
+      persistCoreValues(next);
+      return;
+    }
+
+    if (selectedCount >= MAX_CORE_VALUES) return;
 
     const next: ChipOption[] = coreValueOptions.map((opt) =>
       opt.id === chipId
-        ? {
-            ...opt,
-            state:
-              opt.state === "Selected"
-                ? ("Unselected" as const)
-                : ("Selected" as const),
-          }
+        ? { ...opt, state: "Selected" as const }
         : opt,
     );
     persistCoreValues(next);
+    openModal(chipId, "pending", target.label);
   };
 
   const addHandlers = {
@@ -138,24 +261,37 @@ export function CoreValuesSelectScreen() {
           ...prev,
           { id: crypto.randomUUID(), label: "", state: "Custom" },
         ];
-        updateState({
-          selectedCoreValueIds: selectedIdsFromOptions(next),
-          coreValuesChipsSnapshot: chipOptionsToSnapshotRows(next),
-        });
+        queueMicrotask(() => syncCoreValuesToDraft(next));
         return next;
       });
     },
     onCustomChipConfirm: (chipId: string, value: string) => {
       markCreateFlowInteraction();
       setCoreValueOptions((prev) => {
-        const next = prev.map((opt) =>
+        const withLabel = prev.map((opt) =>
           opt.id === chipId
             ? { ...opt, label: value, state: "Unselected" as const }
             : opt,
         );
-        updateState({
-          selectedCoreValueIds: selectedIdsFromOptions(next),
-          coreValuesChipsSnapshot: chipOptionsToSnapshotRows(next),
+        const selectedCount = withLabel.filter(
+          (o) => o.state === "Selected",
+        ).length;
+        const canSelect = selectedCount < MAX_CORE_VALUES;
+        const next = canSelect
+          ? withLabel.map((opt) =>
+              opt.id === chipId
+                ? { ...opt, state: "Selected" as const }
+                : opt,
+            )
+          : withLabel;
+
+        queueMicrotask(() => {
+          syncCoreValuesToDraft(next);
+          if (canSelect) {
+            openModal(chipId, "pending", value);
+          } else {
+            openModal(chipId, "editing", value);
+          }
         });
         return next;
       });
@@ -164,15 +300,15 @@ export function CoreValuesSelectScreen() {
       markCreateFlowInteraction();
       setCoreValueOptions((prev) => {
         const next = prev.filter((o) => o.id !== chipId);
-        updateState({
-          selectedCoreValueIds: selectedIdsFromOptions(next),
-          coreValuesChipsSnapshot: chipOptionsToSnapshotRows(next),
-        });
+        queueMicrotask(() => syncCoreValuesToDraft(next));
         return next;
       });
     },
   };
 
+  const modalChipLabel =
+    coreValueOptions.find((o) => o.id === activeModalChipId)?.label ?? "";
+
   const description = (
     <>
       <span className="leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
@@ -192,6 +328,8 @@ export function CoreValuesSelectScreen() {
     </>
   );
 
+  const detailModal = cv.detailModal;
+
   return (
     <CreateFlowTwoColumnSelectShell
       lgVerticalAlign="start"
@@ -214,6 +352,50 @@ export function CoreValuesSelectScreen() {
         addButton
         addButtonText={cv.multiSelect.addButtonText}
       />
+
+      {detailModal && (
+        <Create
+          isOpen={activeModalChipId !== null}
+          onClose={handleModalDismiss}
+          backdropVariant="loginYellow"
+          headerContent={
+            <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
+              <ContentLockup
+                title={modalChipLabel}
+                description={detailModal.subtitle}
+                variant="modal"
+                alignment="left"
+              />
+            </div>
+          }
+          showBackButton={false}
+          showNextButton
+          onNext={handleModalConfirm}
+          nextButtonText={detailModal.addValueButton}
+          ariaLabel={modalChipLabel || "Core value details"}
+        >
+          <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
+            <TextArea
+              label={detailModal.meaningLabel}
+              showHelpIcon
+              appearance="embedded"
+              size="medium"
+              value={draftMeaning}
+              onChange={(e) => setDraftMeaning(e.target.value)}
+              rows={4}
+            />
+            <TextArea
+              label={detailModal.signalsLabel}
+              showHelpIcon
+              appearance="embedded"
+              size="medium"
+              value={draftSignals}
+              onChange={(e) => setDraftSignals(e.target.value)}
+              rows={4}
+            />
+          </div>
+        </Create>
+      )}
     </CreateFlowTwoColumnSelectShell>
   );
 }
diff --git a/app/create/types.ts b/app/create/types.ts
index ef86b0c..1ec4ce4 100644
--- a/app/create/types.ts
+++ b/app/create/types.ts
@@ -42,6 +42,12 @@ export type CommunityStructureChipSnapshotRow = {
   state?: string;
 };
 
+/** Meaning + violation signals copy for a core value chip (draft + publish). */
+export type CoreValueDetailEntry = {
+  meaning: string;
+  signals: string;
+};
+
 /**
  * Flow state for inputs across create-flow steps.
  * Validated on `PUT /api/drafts/me` via `createFlowStateSchema` (Zod + JSON safety checks).
@@ -75,6 +81,8 @@ export interface CreateFlowState {
   selectedCoreValueIds?: string[];
   /** Full chip rows for core values (custom labels). */
   coreValuesChipsSnapshot?: CommunityStructureChipSnapshotRow[];
+  /** User-authored detail text keyed by chip id (preset ids or custom UUIDs). */
+  coreValueDetailsByChipId?: Record<string, CoreValueDetailEntry>;
   currentStep?: CreateFlowStep;
   /** Section drafts; structure will tighten as steps persist real shapes. */
   sections?: Record<string, unknown>[];
diff --git a/app/create/utils/coreValueDetailsLocalStorage.ts b/app/create/utils/coreValueDetailsLocalStorage.ts
new file mode 100644
index 0000000..a62e5c4
--- /dev/null
+++ b/app/create/utils/coreValueDetailsLocalStorage.ts
@@ -0,0 +1,57 @@
+import type { CoreValueDetailEntry } from "../types";
+
+/** Persists meaning/signals per chip id across refresh (esp. signed-in create flow, in-memory only). */
+export const CORE_VALUE_DETAILS_STORAGE_KEY =
+  "create-flow-core-value-details" as const;
+
+export function readCoreValueDetailsFromLocalStorage(): Record<
+  string,
+  CoreValueDetailEntry
+> {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(CORE_VALUE_DETAILS_STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== "object") return {};
+    const out: Record<string, CoreValueDetailEntry> = {};
+    for (const [k, v] of Object.entries(parsed)) {
+      if (!v || typeof v !== "object") continue;
+      const o = v as Record<string, unknown>;
+      if (typeof o.meaning !== "string" || typeof o.signals !== "string") {
+        continue;
+      }
+      out[k] = { meaning: o.meaning, signals: o.signals };
+    }
+    return out;
+  } catch {
+    return {};
+  }
+}
+
+export function writeCoreValueDetailsToLocalStorage(
+  value: Record<string, CoreValueDetailEntry> | undefined,
+): void {
+  if (typeof window === "undefined") return;
+  try {
+    if (!value || Object.keys(value).length === 0) {
+      window.localStorage.removeItem(CORE_VALUE_DETAILS_STORAGE_KEY);
+      return;
+    }
+    window.localStorage.setItem(
+      CORE_VALUE_DETAILS_STORAGE_KEY,
+      JSON.stringify(value),
+    );
+  } catch {
+    // quota / private mode
+  }
+}
+
+export function clearCoreValueDetailsLocalStorage(): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.removeItem(CORE_VALUE_DETAILS_STORAGE_KEY);
+  } catch {
+    // ignore
+  }
+}
diff --git a/lib/create/buildPublishPayload.ts b/lib/create/buildPublishPayload.ts
index dec080a..4bdbe71 100644
--- a/lib/create/buildPublishPayload.ts
+++ b/lib/create/buildPublishPayload.ts
@@ -1,4 +1,4 @@
-import type { CreateFlowState } from "../../app/create/types";
+import type { CoreValueDetailEntry, CreateFlowState } from "../../app/create/types";
 import type { CommunityRuleDocumentSection } from "../../app/components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
 
 function isDocumentEntry(x: unknown): x is { title: string; body: string } {
@@ -28,6 +28,30 @@ export function parseSectionsFromCreateFlowState(
   return out;
 }
 
+/** Core values selected in the flow with labels and detail text for the published document. */
+export function buildCoreValuesForDocument(state: CreateFlowState): Array<{
+  chipId: string;
+  label: string;
+  meaning: string;
+  signals: string;
+}> {
+  const snap = state.coreValuesChipsSnapshot;
+  const selected = new Set(state.selectedCoreValueIds ?? []);
+  const details = state.coreValueDetailsByChipId ?? {};
+  if (!snap?.length) return [];
+  return snap
+    .filter((r) => selected.has(r.id))
+    .map((r) => {
+      const d: CoreValueDetailEntry | undefined = details[r.id];
+      return {
+        chipId: r.id,
+        label: r.label,
+        meaning: d?.meaning ?? "",
+        signals: d?.signals ?? "",
+      };
+    });
+}
+
 export type BuildPublishPayloadResult =
   | {
       ok: true;
@@ -72,10 +96,17 @@ export function buildPublishPayload(
     ];
   }
 
+  const coreValues = buildCoreValuesForDocument(state);
+
   if (summary !== undefined) {
-    return { ok: true, title, summary, document: { sections } };
+    return {
+      ok: true,
+      title,
+      summary,
+      document: { sections, coreValues },
+    };
   }
-  return { ok: true, title, document: { sections } };
+  return { ok: true, title, document: { sections, coreValues } };
 }
 
 /** Read `document.sections` from a stored published payload for display. */
diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts
index 0ecfdf7..b59c3d7 100644
--- a/lib/server/validation/createFlowSchemas.ts
+++ b/lib/server/validation/createFlowSchemas.ts
@@ -20,6 +20,11 @@ const communityStructureChipSnapshotsSchema = z
   })
   .strict();
 
+const coreValueDetailEntrySchema = z.object({
+  meaning: z.string().max(8000),
+  signals: z.string().max(8000),
+});
+
 /**
  * Published rule `document` column: arbitrary JSON object with safety bounds.
  */
@@ -55,6 +60,9 @@ export const createFlowStateSchema = z
     coreValuesChipsSnapshot: z
       .array(communityStructureChipSnapshotRowSchema)
       .optional(),
+    coreValueDetailsByChipId: z
+      .record(coreValueDetailEntrySchema)
+      .optional(),
     currentStep: createFlowStepSchema.optional(),
     sections: z.array(z.unknown()).optional(),
     stakeholders: z.array(z.unknown()).optional(),
diff --git a/messages/en/create/coreValues.json b/messages/en/create/coreValues.json
index 56e120d..23b71f9 100644
--- a/messages/en/create/coreValues.json
+++ b/messages/en/create/coreValues.json
@@ -8,68 +8,322 @@
   "multiSelect": {
     "addButtonText": "Add value"
   },
+  "detailModal": {
+    "subtitle": "Edit or add to this description to describe what this value means to your community.",
+    "meaningLabel": "What does this value mean to your group?",
+    "signalsLabel": "Signals of Violation",
+    "addValueButton": "Add Value"
+  },
   "values": [
-    "Accessibility",
-    "Accountability",
-    "Adaptability",
-    "Agency",
-    "Altruism",
-    "Anti-oppression",
-    "Autonomy",
-    "Capacity Building",
-    "Collaboration",
-    "Common Ownership",
-    "Community Care",
-    "Conflict Resolution",
-    "Consent",
-    "Consensus",
-    "Constructive Feedback",
-    "Cooperation",
-    "Copyleft",
-    "Decentralization",
-    "Direct Action",
-    "Diversity",
-    "Documentation",
-    "Education",
-    "Empathy",
-    "Empowerment",
-    "Equity",
-    "Experimentation",
-    "Fairness",
-    "Fair Remuneration",
-    "Flexibility",
-    "Forkability",
-    "Freedom",
-    "Freedom of Information",
-    "Generosity",
-    "Harm Reduction",
-    "Holism",
-    "Holocracy",
-    "Honesty",
-    "Horizontalism",
-    "Humility",
-    "Inclusion",
-    "Inclusivity",
-    "Independence",
-    "Innovation",
-    "Integrity",
-    "Interdependence",
-    "Interoperability",
-    "Intersectionality",
-    "Justice",
-    "Knowledge Sharing",
-    "Labor Rights",
-    "Leadership",
-    "Learning",
-    "Liberty",
-    "Localism",
-    "Maintenance",
-    "Mentorship",
-    "Meritocracy",
-    "Mutual Aid",
-    "Non-violence",
-    "Open Source",
-    "Openness",
-    "Participation"
+    {
+      "label": "Accessibility",
+      "meaning": "We design spaces and tools that everyone can use regardless of ability or background. To us, this means we provide alt-text for images, wheelchair ramps for events, and use plain language in documents. We acknowledge a tension with Aesthetics/Security (Simple design vs flashy easy access vs strict gates).",
+      "signals": "Hosting events in venues that are physically inaccessible to wheelchair users or publishing video content without captions which excludes the deaf community."
+    },
+    {
+      "label": "Accountability",
+      "meaning": "Members accept responsibility for their actions and their impact on the community. To us, this means we publish error logs and hold retrospective meetings to own our mistakes without shifting blame. We acknowledge a tension with Psychological Safety (Blame-free culture vs owning mistakes).",
+      "signals": "Leaders refusing to accept responsibility for failures and instead blaming external factors or junior team members for the lack of success."
+    },
+    {
+      "label": "Adaptability",
+      "meaning": "The group remains flexible and willing to change strategies when circumstances shift. To us, this means we pivot strategies quarterly based on feedback rather than sticking to a rigid 5-year plan. We acknowledge a tension with Consistency (Changing course vs staying the path).",
+      "signals": "Persisting with a strategy that evidence shows is failing or penalizing members who suggest necessary changes based on new data."
+    },
+    {
+      "label": "Agency",
+      "meaning": "Every individual possesses the power and capacity to act on their own behalf. To us, this means Members choose their own tasks and define their own working hours. We acknowledge a tension with Alignment (Doing what you want vs pulling together).",
+      "signals": "Managers micromanaging details that should be up to the individual or requiring approval for minor decisions that slows down work unnecessarily."
+    },
+    {
+      "label": "Altruism",
+      "meaning": "We act out of a genuine concern for the well-being of others without expecting reward. To us, this means we offer services for free or pay-what-you-can, prioritizing need over ability to pay. We acknowledge a tension with Sustainability (Giving it all away vs keeping the lights on).",
+      "signals": "Only offering assistance when it provides a public relations benefit or expecting recipients of aid to perform public gratitude."
+    },
+    {
+      "label": "Anti-oppression",
+      "meaning": "We actively oppose all forms of systemic discrimination and hierarchy. To us, this means we have a dedicated diversity officer and mandatory bias training. We acknowledge a tension with Comfort (Challenging norms is uncomfortable).",
+      "signals": "Dismissing concerns about bias as irrelevant politics or refusing to examine how organizational structures replicate systemic inequalities."
+    },
+    {
+      "label": "Autonomy",
+      "meaning": "The group maintains independence from external control by governments or corporations. To us, this means we refuse funding that comes with strings attached or veto power. We acknowledge a tension with Coordination (Independence vs standardization).",
+      "signals": "Accepting funding that comes with strings attached such as donor veto power or allowing external partners to dictate internal strategy."
+    },
+    {
+      "label": "Capacity Building",
+      "meaning": "We focus on teaching skills so that members become stronger and more capable over time. To us, this means we dedicate 20% of the budget to training and mentorship programs. We acknowledge a tension with Efficiency (Training takes time away from doing).",
+      "signals": "Cutting the training budget immediately when funds are tight or expecting junior members to perform without providing any mentorship."
+    },
+    {
+      "label": "Collaboration",
+      "meaning": "We work together to solve problems rather than competing against one another. To us, this means we default to 'Multi-player mode' on documents and credit all contributors. We acknowledge a tension with Speed (Group work is slower than solo work).",
+      "signals": "Individuals hoarding information to make themselves indispensable or taking sole credit for work that was the result of a team effort."
+    },
+    {
+      "label": "Common Ownership",
+      "meaning": "Resources and assets are owned collectively by the members rather than by private investors. To us, this means Assets are held in a trust or cooperative structure where every member has a share. We acknowledge a tension with Investment Speed (Harder to raise VC capital).",
+      "signals": "Structuring the organization so that a small group of founders retains all voting power and profits despite claims of being a collective."
+    },
+    {
+      "label": "Community Care",
+      "meaning": "We prioritize the physical and mental health of our members above productivity. To us, this means we start meetings with check-ins and fund mental health stipends. We acknowledge a tension with Productivity (Rest takes time away from output).",
+      "signals": "Praising individuals for working while sick or scheduling mandatory meetings during times that are ostensibly reserved for rest and recovery."
+    },
+    {
+      "label": "Conflict Resolution",
+      "meaning": "We address disagreements openly and constructively to find a path forward. To us, this means we have a standing mediation committee and clear grievance forms. We acknowledge a tension with Harmony (Addressing conflict feels disruptive).",
+      "signals": "Ignoring interpersonal disputes in the hope they will disappear or labeling members who raise valid concerns as troublemakers to silence them."
+    },
+    {
+      "label": "Consent",
+      "meaning": "Participation and interactions are always voluntary and based on clear permission. To us, this means we use 'opt-in' by default for all communications and initiatives. We acknowledge a tension with Speed (Asking everyone takes time).",
+      "signals": "Automatically subscribing members to lists without asking or pressuring individuals to take on tasks they have already explicitly declined."
+    },
+    {
+      "label": "Consensus",
+      "meaning": "We strive to make decisions that everyone can agree to or at least live with. To us, this means we do not move forward with a proposal until all blocking concerns are resolved. We acknowledge a tension with Action/Speed (Everyone agreeing takes forever).",
+      "signals": "Pushing a decision forward despite unresolved blocking concerns or using social pressure to force dissenters to conform to the majority."
+    },
+    {
+      "label": "Constructive Feedback",
+      "meaning": "Criticism is offered kindly to help improve the work rather than to tear people down. To us, this means we use the 'Praise-Improve-Praise' sandwich and focus on the work, not the person. We acknowledge a tension with Politeness (Honesty can hurt feelings).",
+      "signals": "Delivering harsh criticism without offering actionable advice for improvement or attacking a person's character rather than their work."
+    },
+    {
+      "label": "Cooperation",
+      "meaning": "We believe working together produces better results than working in isolation. To us, this means we actively partner with similar organizations instead of competing for market share. We acknowledge a tension with Competition (Sharing the pie vs taking the pie).",
+      "signals": "Viewing similar organizations as threats to be destroyed rather than partners or refusing to share resources that could help the broader ecosystem."
+    },
+    {
+      "label": "Copyleft",
+      "meaning": "We use licensing that ensures derived works remain free and open for everyone. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Releasing modifications to open projects under restrictive licenses that prevent the community from benefiting from the improvements."
+    },
+    {
+      "label": "Decentralization",
+      "meaning": "Power is distributed across a network rather than concentrated in a central authority. To us, this means Decision-making authority is pushed to the edges no central HQ exists. We acknowledge a tension with Efficiency/Cohesion (Herding cats).",
+      "signals": "Concentrating all critical decision-making power in a single founder or small inner circle while claiming to be a flat organization."
+    },
+    {
+      "label": "Direct Action",
+      "meaning": "We take immediate steps to solve problems ourselves instead of asking authorities to do it. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Forming a committee to study a problem endlessly instead of taking immediate steps to address the urgent needs of the community."
+    },
+    {
+      "label": "Diversity",
+      "meaning": "We value a wide range of perspectives and backgrounds within our membership. To us, this means we strictly enforce quotas or targets for representation in leadership. We acknowledge a tension with Homophily/Ease (It's easier to work with people like you).",
+      "signals": "Hiring primarily for culture fit which results in a homogenous team or having a leadership team that lacks representation from marginalized groups."
+    },
+    {
+      "label": "Documentation",
+      "meaning": "We record our processes clearly so that others can learn from and duplicate our work. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Relying on oral tradition where only long-time members understand the systems or refusing to write down processes because it takes too much time."
+    },
+    {
+      "label": "Education",
+      "meaning": "We are committed to the continuous learning and growth of all members. To us, this means we publish open curriculums and host free workshops for the public. We acknowledge a tension with Action (Learning vs Doing).",
+      "signals": "Treating questions from newcomers as annoyances or creating an environment where members are afraid to admit they do not know something."
+    },
+    {
+      "label": "Empathy",
+      "meaning": "We strive to understand and share the feelings of others in our community. To us, this means we prioritize user research and listening tours before building solutions. We acknowledge a tension with Objectivity (Feeling with users vs analyzing data).",
+      "signals": "Dismissing user feedback that conflicts with internal assumptions or prioritizing data metrics over the actual lived experience of people."
+    },
+    {
+      "label": "Empowerment",
+      "meaning": "We give members the authority and resources to take charge of their own work. To us, this means we provide resources and authority to those closest to the problem. We acknowledge a tension with Control (Letting go means risking mistakes).",
+      "signals": "Delegating responsibility without giving the corresponding authority to make decisions or second-guessing every choice made by the team."
+    },
+    {
+      "label": "Equity",
+      "meaning": "We distribute resources based on need to ensure fair outcomes for everyone. To us, this means we use sliding scale pricing and offer scholarships to level the playing field. We acknowledge a tension with Equality (Different treatment vs same treatment).",
+      "signals": "Treating everyone exactly the same despite different starting points or refusing to accommodate specific needs under the guise of fairness."
+    },
+    {
+      "label": "Experimentation",
+      "meaning": "We encourage trying new things and learning from failure rather than sticking to the safe path. To us, this means we celebrate 'smart failures' as learning opportunities. We acknowledge a tension with Reliability (New things break).",
+      "signals": "Punishing members for experiments that do not succeed or requiring guaranteed success before approving any new initiative."
+    },
+    {
+      "label": "Fairness",
+      "meaning": "We apply rules and distribute resources in a just and impartial manner. To us, this means we use transparent salary bands and objective criteria for promotions. We acknowledge a tension with Favoritism (Treating everyone same vs helping friends).",
+      "signals": "Creating special rules for friends of the leadership or applying policies inconsistently depending on who is involved."
+    },
+    {
+      "label": "Fair Remuneration",
+      "meaning": "Workers are paid a fair wage that reflects the true value of their labor. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Expecting members to work for exposure or passion instead of paying a living wage for their labor."
+    },
+    {
+      "label": "Flexibility",
+      "meaning": "We accommodate the different needs and schedules of our members. To us, this means we allow remote work and asynchronous schedules. We acknowledge a tension with Predictability (Asynch work makes scheduling hard).",
+      "signals": "Penalizing members for using flexible work arrangements or judging commitment based on the number of hours physically present in the office."
+    },
+    {
+      "label": "Forkability",
+      "meaning": "Anyone has the right to take the work in a new direction if the current path fails. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Legally threatening or socially shunning a group that decides to take the project in a different direction due to disagreements."
+    },
+    {
+      "label": "Freedom",
+      "meaning": "We protect the liberty of individuals to express themselves and act as they choose. To us, this means we release our work under copyleft licenses. We acknowledge a tension with Security (Total freedom includes freedom to harm).",
+      "signals": "Censoring speech that is critical of the leadership or implementing surveillance tools to monitor member activity."
+    },
+    {
+      "label": "Freedom of Information",
+      "meaning": "Information is a public good that should not be hidden behind paywalls. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Locking important organizational knowledge behind paywalls or restricting access to documents based on arbitrary hierarchy."
+    },
+    {
+      "label": "Generosity",
+      "meaning": "We give freely of our time and resources to support the collective goal. To us, this means we share our surplus resources with aligned groups in need. We acknowledge a tension with Self-Preservation (Giving until it hurts).",
+      "signals": "Hoarding a surplus of resources while allied groups are struggling to survive or viewing every interaction as a transaction to be maximized."
+    },
+    {
+      "label": "Harm Reduction",
+      "meaning": "We focus on minimizing negative consequences associated with risky behaviors or systemic issues. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Insisting on abstinence-only approaches to risk or refusing to provide safety equipment because it might encourage risky behavior."
+    },
+    {
+      "label": "Holism",
+      "meaning": "We consider the whole person and the whole system rather than just isolated parts. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Ignoring the personal context of a member and treating them solely as a unit of production or optimizing one department at the expense of others."
+    },
+    {
+      "label": "Holocracy",
+      "meaning": "We organize around roles and circles rather than top-down managers. To us, this means we use circles and roles instead of managers and job titles. We acknowledge a tension with Clarity (Roles can be confusing compared to titles).",
+      "signals": "Reintroducing hidden hierarchies where influence is based on social capital rather than clear roles or ignoring governance processes."
+    },
+    {
+      "label": "Honesty",
+      "meaning": "We tell the truth even when it is difficult or uncomfortable. To us, this means we refuse to spin bad news and admit when we don't know the answer. We acknowledge a tension with Diplomacy (Blunt truth vs tact).",
+      "signals": "Hiding bad news from the membership to protect morale or giving vague non-answers when asked direct questions about challenges."
+    },
+    {
+      "label": "Horizontalism",
+      "meaning": "We organize as equals without bosses or top-down management structures. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Creating informal power structures where a shadow board makes the real decisions outside of the collective process."
+    },
+    {
+      "label": "Humility",
+      "meaning": "We recognize that we do not have all the answers and are open to learning from others. To us, this means Leaders eat last and credit the team for successes. We acknowledge a tension with Marketing (Selling yourself vs being modest).",
+      "signals": "Leaders taking credit for the team's success while blaming the team for failures or refusing to admit when they are wrong."
+    },
+    {
+      "label": "Inclusion",
+      "meaning": "We proactively welcome people who are often marginalized or excluded. To us, this means we proactively invite marginalized voices to the planning table. We acknowledge a tension with Exclusivity/Focus (Big tent vs niche group).",
+      "signals": "Holding meetings in spaces or at times that are inaccessible to working parents or people with different schedules."
+    },
+    {
+      "label": "Inclusivity",
+      "meaning": "We actively welcome people who have been historically marginalized or excluded. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Using jargon that alienates newcomers or failing to provide translation for members who speak different languages."
+    },
+    {
+      "label": "Independence",
+      "meaning": "We avoid reliance on any single funding source or authority figure. To us, this means we maintain a diversified funding base to avoid dependency on one donor. We acknowledge a tension with Resources (Going it alone means less help).",
+      "signals": "Relying on a single large donor who threatens to pull funding if the organization takes a political stance they dislike."
+    },
+    {
+      "label": "Innovation",
+      "meaning": "We value new ideas and creative solutions over tradition and established methods. To us, this means we reward novel approaches even if they disrupt current workflows. We acknowledge a tension with Tradition (New vs Old).",
+      "signals": "Shutting down new ideas with the excuse that things have always been done a certain way or refusing to allocate resources to test new concepts."
+    },
+    {
+      "label": "Integrity",
+      "meaning": "We align our actions with our stated values even when no one is watching. To us, this means we refuse contracts that violate our ethical standards, regardless of profit. We acknowledge a tension with Profit/Opportunity (Saying no to easy money).",
+      "signals": "Accepting a partnership that violates the group's core values because the financial offer is too good to refuse."
+    },
+    {
+      "label": "Interdependence",
+      "meaning": "We recognize that our survival and success are tied to the well-being of others. To us, this means we map our supply chain to ensure we support local ecosystems. We acknowledge a tension with Self-Sufficiency (Relying on others vs prepping).",
+      "signals": "Acting as if the organization exists in a vacuum and ignoring the impact of its actions on the surrounding community or ecosystem."
+    },
+    {
+      "label": "Interoperability",
+      "meaning": "Our tools and systems are designed to work seamlessly with other open systems. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Building walled gardens that trap users or deliberately breaking compatibility with other open tools to lock people in."
+    },
+    {
+      "label": "Intersectionality",
+      "meaning": "We consider how different forms of discrimination overlap to affect individuals. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Focusing on a single issue like class while ignoring how race and gender compound the experience of oppression for some members."
+    },
+    {
+      "label": "Justice",
+      "meaning": "We seek to repair past wrongs and create a fair system for the future. To us, this means we prioritize restorative processes over punitive ones. We acknowledge a tension with Mercy (Strict rules vs forgiveness).",
+      "signals": "Focusing on punishment and exclusion rather than healing and restoration or applying rules more strictly to marginalized members."
+    },
+    {
+      "label": "Knowledge Sharing",
+      "meaning": "We freely distribute information so that everyone can benefit from it. To us, this means we document everything in a public wiki. We acknowledge a tension with Intellectual Property (Open source vs patent).",
+      "signals": "Creating silos where information is hoarded to maintain power or refusing to document work so that others become dependent on a single expert."
+    },
+    {
+      "label": "Labor Rights",
+      "meaning": "We uphold the right of all workers to organize and advocate for their conditions. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Discouraging members from discussing their pay or working conditions or retaliating against those who try to organize."
+    },
+    {
+      "label": "Leadership",
+      "meaning": "We encourage everyone to step up and take initiative when needed. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Waiting for permission to solve an obvious problem or complaining about an issue without offering to help fix it."
+    },
+    {
+      "label": "Learning",
+      "meaning": "We embrace mistakes as opportunities to grow rather than failures to be punished. To us, this means we fund conference tickets and book clubs for members. We acknowledge a tension with Performance (Study time vs work time).",
+      "signals": "Viewing mistakes as a sign of incompetence rather than a learning opportunity or cutting the budget for personal development."
+    },
+    {
+      "label": "Liberty",
+      "meaning": "We oppose authoritarian control and support the freedom of the individual. To us, this means we defend the right of members to fork the project if they disagree. We acknowledge a tension with Order (Chaos vs rules).",
+      "signals": "Imposing strict rules on personal behavior that has no impact on the work or demanding ideological purity tests for membership."
+    },
+    {
+      "label": "Localism",
+      "meaning": "We prioritize local needs and resources over global or distant ones. To us, this means we source supplies from within a 50-mile radius. We acknowledge a tension with Globalism/Scale (Sourcing near vs sourcing cheap).",
+      "signals": "Importing goods that could be sourced locally to save a small amount of money or ignoring the needs of the immediate neighborhood."
+    },
+    {
+      "label": "Maintenance",
+      "meaning": "We value the unglamorous work of sustaining and fixing what we have already built. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Celebrating only new feature launches while neglecting the critical infrastructure that keeps the organization running."
+    },
+    {
+      "label": "Mentorship",
+      "meaning": "Experienced members actively guide and support newcomers. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Senior members refusing to spend time training juniors or creating a culture where asking for help is seen as weakness."
+    },
+    {
+      "label": "Meritocracy",
+      "meaning": "Influence is earned through active contribution and skill rather than status or wealth. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Rewarding people based on their confidence and social status rather than the actual quality and impact of their contributions."
+    },
+    {
+      "label": "Mutual Aid",
+      "meaning": "We engage in a reciprocal exchange of resources where everyone is both a giver and a receiver. To us, this means we practice 'solidarity, not charity' by exchanging resources directly. We acknowledge a tension with Charity (Solidarity vs Tax Write-offs).",
+      "signals": "Creating a transactional system where help is only given with the expectation of an immediate equivalent return."
+    },
+    {
+      "label": "Non-violence",
+      "meaning": "We reject physical and emotional violence as a means to achieve our goals. To us, this means we de-escalate conflicts and refuse to engage with law enforcement where possible. We acknowledge a tension with Self-Defense (Turning cheek vs fighting back).",
+      "signals": "Using aggressive language or intimidation tactics to silence opposition or justifying harm as necessary for the greater good."
+    },
+    {
+      "label": "Open Source",
+      "meaning": "We make our work freely available for others to use; study; and modify. To us, this means Observable actions that demonstrate this value. We recognize that Values often trade off with Efficiency or Speed.",
+      "signals": "Releasing code without documentation or using a license that claims to be open but actually restricts commercial use or modification."
+    },
+    {
+      "label": "Openness",
+      "meaning": "We operate transparently and invite participation from the outside world. To us, this means All meetings are open to the public unless safety is at risk. We acknowledge a tension with Privacy/Security (Open doors let bugs in).",
+      "signals": "Conducting all real business in private messages and only using public meetings to rubber-stamp decisions that have already been made."
+    },
+    {
+      "label": "Participation",
+      "meaning": "Democracy requires the active engagement of all members in the decision-making process. To us, this means we require active contribution to maintain voting rights. We acknowledge a tension with Efficiency (Too many cooks).",
+      "signals": "Creating barriers to entry that make it difficult for new members to have a voice or ignoring the input of the broader membership."
+    }
   ]
 }
diff --git a/stories/modals/Create.stories.js b/stories/modals/Create.stories.js
index 7d8ddc8..b24c68e 100644
--- a/stories/modals/Create.stories.js
+++ b/stories/modals/Create.stories.js
@@ -32,6 +32,10 @@ export default {
     nextButtonDisabled: {
       control: { type: "boolean" },
     },
+    backdropVariant: {
+      control: { type: "select" },
+      options: ["default", "loginYellow"],
+    },
     currentStep: {
       control: { type: "number", min: 1, max: 5 },
     },
@@ -165,6 +169,25 @@ WithoutFooter.args = {
   showNextButton: false,
 };
 
+export const LoginYellowBackdrop = Template.bind({});
+LoginYellowBackdrop.args = {
+  isOpen: true,
+  title: "Horizontalism",
+  description: "Edit or add to this description to describe what this value means to your community.",
+  backdropVariant: "loginYellow",
+  children: (
+    <div className="space-y-4">
+      <p className="text-[var(--color-content-default-primary)]">
+        Core value detail body (yellow blurred overlay like Login).
+      </p>
+    </div>
+  ),
+  showBackButton: false,
+  showNextButton: true,
+  nextButtonText: "Add Value",
+  nextButtonDisabled: false,
+};
+
 export const NextButtonDisabled = Template.bind({});
 NextButtonDisabled.args = {
   isOpen: true,
diff --git a/tests/components/CoreValuesSelectScreen.test.tsx b/tests/components/CoreValuesSelectScreen.test.tsx
new file mode 100644
index 0000000..c6ddaf7
--- /dev/null
+++ b/tests/components/CoreValuesSelectScreen.test.tsx
@@ -0,0 +1,42 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { screen, fireEvent, waitFor, within } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { renderWithProviders } from "../utils/test-utils";
+import { CoreValuesSelectScreen } from "../../app/create/screens/select/CoreValuesSelectScreen";
+
+describe("CoreValuesSelectScreen", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("opens core value detail modal when a preset chip is clicked", async () => {
+    renderWithProviders(<CoreValuesSelectScreen />);
+    fireEvent.click(screen.getByText("Accessibility"));
+    const dialog = await screen.findByRole("dialog");
+    expect(
+      within(dialog).getByRole("button", { name: "Add Value" }),
+    ).toBeInTheDocument();
+  });
+
+  it("closes modal and reverts pending selection when Escape is pressed", async () => {
+    renderWithProviders(<CoreValuesSelectScreen />);
+    fireEvent.click(screen.getByText("Accessibility"));
+    await screen.findByRole("dialog");
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("saves details when Add Value is clicked", async () => {
+    renderWithProviders(<CoreValuesSelectScreen />);
+    fireEvent.click(screen.getByText("Accessibility"));
+    const dialog = await screen.findByRole("dialog");
+    fireEvent.click(
+      within(dialog).getByRole("button", { name: "Add Value" }),
+    );
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/tests/components/Create.test.tsx b/tests/components/Create.test.tsx
index 3dcad37..10686bc 100644
--- a/tests/components/Create.test.tsx
+++ b/tests/components/Create.test.tsx
@@ -59,6 +59,18 @@ describe("Create", () => {
     }
   });
 
+  it("uses login yellow backdrop when backdropVariant is loginYellow", () => {
+    renderWithProviders(
+      <Create
+        {...defaultProps}
+        backdropVariant="loginYellow"
+        headerContent={<div>Header</div>}
+      />,
+    );
+    const overlay = document.querySelector(".backdrop-blur-md");
+    expect(overlay).toBeInTheDocument();
+  });
+
   it("renders footer buttons when provided", () => {
     const onBack = vi.fn();
     const onNext = vi.fn();
diff --git a/tests/unit/buildPublishPayload.test.ts b/tests/unit/buildPublishPayload.test.ts
index 34d349b..1032109 100644
--- a/tests/unit/buildPublishPayload.test.ts
+++ b/tests/unit/buildPublishPayload.test.ts
@@ -39,6 +39,7 @@ describe("buildPublishPayload", () => {
           ],
         },
       ],
+      coreValues: [],
     });
   });
 
@@ -58,6 +59,7 @@ describe("buildPublishPayload", () => {
           entries: [{ title: "Community", body: "We organize locally." }],
         },
       ],
+      coreValues: [],
     });
   });
 
@@ -71,7 +73,7 @@ describe("buildPublishPayload", () => {
     const r = buildPublishPayload({ title: "T", sections });
     expect(r.ok).toBe(true);
     if (!r.ok) return;
-    expect(r.document).toEqual({ sections });
+    expect(r.document).toEqual({ sections, coreValues: [] });
   });
 
   it("filters invalid section entries from state.sections", () => {
@@ -86,8 +88,29 @@ describe("buildPublishPayload", () => {
     if (!r.ok) return;
     expect(r.document).toEqual({
       sections: [{ categoryName: "Values", entries: [{ title: "A", body: "B" }] }],
+      coreValues: [],
     });
   });
+
+  it("includes coreValues from selected chips and detail text", () => {
+    const r = buildPublishPayload({
+      title: "T",
+      selectedCoreValueIds: ["1", "2"],
+      coreValuesChipsSnapshot: [
+        { id: "1", label: "Alpha", state: "Selected" },
+        { id: "2", label: "Beta", state: "Selected" },
+      ],
+      coreValueDetailsByChipId: {
+        "1": { meaning: "m1", signals: "s1" },
+      },
+    });
+    expect(r.ok).toBe(true);
+    if (!r.ok) return;
+    expect(r.document.coreValues).toEqual([
+      { chipId: "1", label: "Alpha", meaning: "m1", signals: "s1" },
+      { chipId: "2", label: "Beta", meaning: "", signals: "" },
+    ]);
+  });
 });
 
 describe("parseDocumentSectionsForDisplay", () => {
diff --git a/tests/unit/createFlowValidation.test.ts b/tests/unit/createFlowValidation.test.ts
index 8efafad..363ec0c 100644
--- a/tests/unit/createFlowValidation.test.ts
+++ b/tests/unit/createFlowValidation.test.ts
@@ -101,6 +101,25 @@ describe("createFlowStateSchema", () => {
     });
     expect(r.success).toBe(false);
   });
+
+  it("accepts coreValueDetailsByChipId", () => {
+    const r = createFlowStateSchema.safeParse({
+      coreValueDetailsByChipId: {
+        "1": { meaning: "We care about access.", signals: "Blocking access." },
+        "uuid-here": { meaning: "", signals: "" },
+      },
+    });
+    expect(r.success).toBe(true);
+  });
+
+  it("rejects core value detail strings that are too long", () => {
+    const r = createFlowStateSchema.safeParse({
+      coreValueDetailsByChipId: {
+        "1": { meaning: "x".repeat(8001), signals: "y" },
+      },
+    });
+    expect(r.success).toBe(false);
+  });
 });
 
 describe("putDraftBodySchema", () => {

From 36dcb7987005ef06152ec12f24a4aaae459688c4 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Fri, 17 Apr 2026 22:25:24 -0600
Subject: [PATCH 05/15] Create custom flow UI

---
 CONTRIBUTING.md                               |   2 +-
 .../ProportionBar/ProportionBar.types.ts      |   5 +-
 .../ProportionBar/ProportionBar.view.tsx      |  56 +++--
 .../utility/CardStack/CardStack.container.tsx |   6 +
 .../utility/CardStack/CardStack.types.ts      |  14 ++
 .../utility/CardStack/CardStack.view.tsx      | 224 +++++++++++++++++-
 app/create/CreateFlowLayoutClient.tsx         |  97 ++++++--
 app/create/[screenId]/page.tsx                |  30 +--
 .../CreateFlowTwoColumnSelectShell.tsx        |  19 +-
 .../components/createFlowLayoutTokens.ts      |   8 +
 app/create/screens/CreateFlowScreenView.tsx   |  20 +-
 ...een.tsx => CommunicationMethodsScreen.tsx} |  62 ++++-
 .../screens/card/ConflictManagementScreen.tsx | 179 ++++++++++++++
 .../screens/card/MembershipMethodsScreen.tsx  | 179 ++++++++++++++
 .../screens/right-rail/RightRailScreen.tsx    | 120 ++++++----
 app/create/types.ts                           |  14 +-
 .../utils/createFlowProportionProgress.ts     |   6 +-
 app/create/utils/createFlowScreenRegistry.ts  |  31 ++-
 app/create/utils/flowSteps.ts                 |   6 +-
 docs/create-flow.md                           |  13 +-
 lib/create/migrateLegacyCreateFlowState.ts    |  27 +--
 lib/server/validation/createFlowSchemas.ts    |   4 +
 messages/en/create/communication.json         |   4 +-
 messages/en/create/conflictManagement.json    |  76 ++++++
 messages/en/create/footer.json                |   6 +-
 messages/en/create/membership.json            |  76 ++++++
 messages/en/create/rightRail.json             |  63 +++--
 messages/en/index.ts                          |   4 +
 next.config.mjs                               |   9 +
 ...js => CommunicationMethodsPage.stories.js} |  10 +-
 stories/progress/ProportionBar.stories.js     |   2 +
 tests/components/ProportionBar.test.tsx       |   7 +-
 ...est.jsx => communication-methods.test.jsx} |  17 +-
 tests/pages/right-rail.test.jsx               |  18 +-
 .../unit/createFlowProportionProgress.test.ts |  24 ++
 tests/unit/createFlowValidation.test.ts       |   2 +-
 tests/unit/flowSteps.test.ts                  |   7 +-
 .../unit/migrateLegacyCreateFlowState.test.ts |  30 +--
 38 files changed, 1227 insertions(+), 250 deletions(-)
 rename app/create/screens/card/{CardsScreen.tsx => CommunicationMethodsScreen.tsx} (77%)
 create mode 100644 app/create/screens/card/ConflictManagementScreen.tsx
 create mode 100644 app/create/screens/card/MembershipMethodsScreen.tsx
 create mode 100644 messages/en/create/conflictManagement.json
 create mode 100644 messages/en/create/membership.json
 rename stories/pages/{CardsPage.stories.js => CommunicationMethodsPage.stories.js} (52%)
 rename tests/pages/{cards.test.jsx => communication-methods.test.jsx} (76%)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c69c82c..0ab1db8 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -44,7 +44,7 @@ Set `NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` in `.env` so **signed-in** users can
 
 ### Create flow URLs (custom wizard)
 
-The **custom** create-rule wizard lives under **`/create/…`**. The header links to **`/create`**, which redirects to the first step. **Semantic** URL segments (e.g. `community-name`, `community-size`) match Figma intent; order is **`FLOW_STEP_ORDER`** in `app/create/utils/flowSteps.ts`, with UI from **`app/create/[screenId]/page.tsx`** and **`CREATE_FLOW_SCREEN_REGISTRY`** for Figma traceability. **Figma** stages: **Create Community** (through `review`), **Create Custom CommunityRule** (`cards`–`right-rail`), **Review and complete** (`confirm-stakeholders`–`completed`). **`/create/review-template/[slug]`** is a template **preview** only. Full tables and persistence are in **[docs/create-flow.md](docs/create-flow.md)**; engineering tracking: Linear **CR-89** / Ticket 17 in [docs/backend-linear-tickets.md](docs/backend-linear-tickets.md).
+The **custom** create-rule wizard lives under **`/create/…`**. The header links to **`/create`**, which redirects to the first step. **Semantic** URL segments (e.g. `community-name`, `community-size`) match Figma intent; order is **`FLOW_STEP_ORDER`** in `app/create/utils/flowSteps.ts`, with UI from **`app/create/[screenId]/page.tsx`** and **`CREATE_FLOW_SCREEN_REGISTRY`** for Figma traceability. **Figma** stages: **Create Community** (through `review`), **Create Custom CommunityRule** (`communication-methods`–`right-rail`), **Review and complete** (`confirm-stakeholders`–`completed`). **`/create/review-template/[slug]`** is a template **preview** only. Full tables and persistence are in **[docs/create-flow.md](docs/create-flow.md)**; engineering tracking: Linear **CR-89** / Ticket 17 in [docs/backend-linear-tickets.md](docs/backend-linear-tickets.md).
 
 ## Frontend / tests
 
diff --git a/app/components/progress/ProportionBar/ProportionBar.types.ts b/app/components/progress/ProportionBar/ProportionBar.types.ts
index 2223bf8..970e708 100644
--- a/app/components/progress/ProportionBar/ProportionBar.types.ts
+++ b/app/components/progress/ProportionBar/ProportionBar.types.ts
@@ -10,6 +10,7 @@ export type ProportionBarState =
   | "2-0"
   | "2-1"
   | "2-2"
+  | "2-3"
   | "3-0"
   | "3-1"
   | "3-2";
@@ -20,7 +21,9 @@ export interface ProportionBarProps {
   progress?: ProportionBarState;
   className?: string;
   /**
-   * `segmented` (Figma: create-flow footer): pill-shaped partial fills inside each segment.
+   * Kept for backwards compatibility. Both `default` and `segmented` render the
+   * same fill geometry (square leading edges, matching Figma). Future variants
+   * can differentiate here without API changes.
    */
   variant?: ProportionBarVariant;
 }
diff --git a/app/components/progress/ProportionBar/ProportionBar.view.tsx b/app/components/progress/ProportionBar/ProportionBar.view.tsx
index 9ac4315..998af73 100644
--- a/app/components/progress/ProportionBar/ProportionBar.view.tsx
+++ b/app/components/progress/ProportionBar/ProportionBar.view.tsx
@@ -1,24 +1,41 @@
 import type { ProportionBarViewProps } from "./ProportionBar.types";
 
+/**
+ * Per-step fill ratio for the second (middle) segment at `2-X` progress states.
+ * Values are taken directly from Figma (`17861:33241`, `18861:15250`, `21434:17632`)
+ * and are intentionally non-uniform — they are NOT `X/3`.
+ */
+const SECOND_SEGMENT_FILL_RATIO: Record<number, number> = {
+  0: 0,
+  1: 1 / 4,
+  2: 1 / 2,
+  3: 3 / 4,
+};
+
+function getSecondSegmentFillRatio(partial: number): number {
+  return SECOND_SEGMENT_FILL_RATIO[partial] ?? 0;
+}
+
 export function ProportionBarView({
   progress,
   className,
   barClasses,
-  variant,
+  // `variant` is kept in the prop API for callers, but both `default` and
+  // `segmented` now render identical fill geometry (square leading edges).
+  variant: _variant,
 }: ProportionBarViewProps) {
   // Proportion bar type
   const [fullSegments, partialSegment] = progress.split("-").map(Number);
-  const segmented = variant === "segmented";
   // Calculate total progress:
   // - For 1-X: first section is (X+1)/6 filled
-  // - For 2-X: first section full, second section X/3 filled
+  // - For 2-X: first section full, second section filled per Figma ratios (see `SECOND_SEGMENT_FILL_RATIO`)
   // - For 3-X: first two sections full, third section X/3 filled
   // Max is 3 full segments = 9 units
   let totalProgress = 0;
   if (fullSegments === 1) {
     totalProgress = (partialSegment + 1) / 6; // 1/6 to 6/6 of first section
   } else if (fullSegments === 2) {
-    totalProgress = 1 + partialSegment / 3; // 1 full + 0/3 to 2/3 of second
+    totalProgress = 1 + getSecondSegmentFillRatio(partialSegment);
   } else if (fullSegments === 3) {
     totalProgress = 2 + partialSegment / 3; // 2 full + 0/3 to 2/3 of third
   }
@@ -55,33 +72,32 @@ export function ProportionBarView({
       </div>
 
       {/* Fill layer - always show 3 sections, fill amount varies */}
+      {/*
+        The leading (right) edge of every partial fill is a straight (square) edge —
+        only the outermost left/right edges of the whole bar can round to match the
+        background capsule.
+      */}
       <div className="absolute inset-0 flex gap-[var(--spacing-scale-008)] px-[4px] overflow-hidden">
         {/* First section - for 1-X: (X+1)/6 filled, for 2-X and 3-X: fully filled */}
         <div className="flex-1 h-full relative">
           {fullSegments === 1 ? (
             <div
-              className={`absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)] rounded-l-[var(--radius-full)] ${
-                segmented && partialSegment < 5
-                  ? "rounded-r-[var(--radius-full)]"
-                  : ""
-              }`.trim()}
+              className="absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)] rounded-l-[var(--radius-full)]"
               style={{ width: `${((partialSegment + 1) / 6) * 100}%` }}
             />
           ) : fullSegments >= 2 ? (
             <div className="absolute inset-0 bg-[var(--color-content-default-brand-primary)] rounded-l-[var(--radius-full)]" />
           ) : null}
         </div>
-        {/* Second section - for 2-X: X/3 filled, for 3-X: fully filled, otherwise empty */}
+        {/* Second section — for 2-X: Figma ratio fill (see `SECOND_SEGMENT_FILL_RATIO`); for 3-X: full; otherwise empty. */}
         <div className="flex-1 h-full relative">
           {fullSegments === 2 ? (
             partialSegment > 0 ? (
               <div
-                className={`absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)] ${
-                  segmented
-                    ? "rounded-l-[var(--radius-full)] rounded-r-[var(--radius-full)]"
-                    : ""
-                }`.trim()}
-                style={{ width: `${(partialSegment / 3) * 100}%` }}
+                className="absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)]"
+                style={{
+                  width: `${getSecondSegmentFillRatio(partialSegment) * 100}%`,
+                }}
               />
             ) : null
           ) : fullSegments >= 3 ? (
@@ -89,16 +105,12 @@ export function ProportionBarView({
           ) : null}
         </div>
         {/* Third section - for 3-X: X/3 filled, otherwise empty */}
-        {/* Round right corner when at 100% (third section fully filled, partialSegment === 3) */}
+        {/* Round right corner only when the fill reaches the absolute right edge of the bar (partialSegment >= 3) */}
         <div className="flex-1 h-full relative">
           {fullSegments === 3 && partialSegment > 0 ? (
             <div
               className={`absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)] ${
-                segmented
-                  ? "rounded-l-[var(--radius-full)] rounded-r-[var(--radius-full)]"
-                  : partialSegment >= 3
-                    ? "rounded-r-[var(--radius-full)]"
-                    : ""
+                partialSegment >= 3 ? "rounded-r-[var(--radius-full)]" : ""
               }`.trim()}
               style={{ width: `${Math.min((partialSegment / 3) * 100, 100)}%` }}
             />
diff --git a/app/components/utility/CardStack/CardStack.container.tsx b/app/components/utility/CardStack/CardStack.container.tsx
index d684867..7c07fee 100644
--- a/app/components/utility/CardStack/CardStack.container.tsx
+++ b/app/components/utility/CardStack/CardStack.container.tsx
@@ -21,7 +21,10 @@ const CardStackContainer = memo<CardStackProps>(
     title = "",
     description = "",
     layout = "default",
+    compactRecommendedLimit = 5,
+    compactDesktopLayout: compactDesktopLayoutProp = "grid",
     headerLockupSize,
+    toggleAlignment = "center",
     className = "",
   }) => {
     const [internalExpanded, setInternalExpanded] = useState(false);
@@ -75,7 +78,10 @@ const CardStackContainer = memo<CardStackProps>(
         title={title}
         description={description}
         layout={layout}
+        compactRecommendedLimit={compactRecommendedLimit}
+        compactDesktopLayout={compactDesktopLayoutProp}
         headerLockupSize={headerLockupSize}
+        toggleAlignment={toggleAlignment}
         className={className}
       />
     );
diff --git a/app/components/utility/CardStack/CardStack.types.ts b/app/components/utility/CardStack/CardStack.types.ts
index 6109af5..6c81314 100644
--- a/app/components/utility/CardStack/CardStack.types.ts
+++ b/app/components/utility/CardStack/CardStack.types.ts
@@ -21,8 +21,19 @@ export interface CardStackProps {
   description?: string;
   /** "default" = compact grid/column + expanded grid; "singleStack" = always one column, expand shows more in same stack */
   layout?: "default" | "singleStack";
+  /**
+   * Max recommended cards in compact (non-expanded) mode. Default 5; Figma compact stack uses 3.
+   */
+  compactRecommendedLimit?: number;
+  /**
+   * At `md+`, how compact recommended cards are laid out. `flexWrap` matches Figma Flow — Compact Card Stack (three cards in a row).
+   * `pyramidFive` = two rows (3 + 2) centered for five recommended cards (membership step).
+   */
+  compactDesktopLayout?: "grid" | "flexWrap" | "pyramidFive";
   /** Optional title/description lockup size (create-flow passes `md`-matched `L`/`M`). Defaults to `L`. */
   headerLockupSize?: HeaderLockupSizeValue;
+  /** Alignment of the expand/collapse control in `singleStack` layout (Figma right-rail: end). */
+  toggleAlignment?: "center" | "end";
   className?: string;
 }
 
@@ -38,6 +49,9 @@ export interface CardStackViewProps {
   title: string;
   description: string;
   layout: "default" | "singleStack";
+  compactRecommendedLimit: number;
+  compactDesktopLayout: "grid" | "flexWrap" | "pyramidFive";
   headerLockupSize: HeaderLockupSizeValue | undefined;
+  toggleAlignment: "center" | "end";
   className: string;
 }
diff --git a/app/components/utility/CardStack/CardStack.view.tsx b/app/components/utility/CardStack/CardStack.view.tsx
index ad74746..27b28ad 100644
--- a/app/components/utility/CardStack/CardStack.view.tsx
+++ b/app/components/utility/CardStack/CardStack.view.tsx
@@ -16,13 +16,18 @@ export function CardStackView({
   title,
   description,
   layout,
+  compactRecommendedLimit,
+  compactDesktopLayout,
   headerLockupSize,
+  toggleAlignment,
   className,
 }: CardStackViewProps) {
   const lockupSize = headerLockupSize ?? "L";
   const isSelected = (id: string) => selectedIds.includes(id);
-  // Compact: recommended only (up to 5). Expanded: all cards.
-  const compactCards = cards.filter((c) => c.recommended ?? false).slice(0, 5);
+  // Compact: recommended only (default up to 5). Expanded: all cards.
+  const compactCards = cards
+    .filter((c) => c.recommended ?? false)
+    .slice(0, compactRecommendedLimit);
 
   // Single stack: always one column; expand reveals more in same stack (scrollable)
   if (layout === "singleStack") {
@@ -39,7 +44,7 @@ export function CardStackView({
             />
           </div>
         ) : null}
-        <div className="flex flex-col gap-[8px] w-full min-w-0">
+        <div className="flex w-full min-w-0 flex-col gap-2">
           {displayedCards.map((item) => (
             <Card
               key={item.id}
@@ -58,7 +63,9 @@ export function CardStackView({
           <button
             type="button"
             onClick={onToggleExpand}
-            className="font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer"
+            className={`font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${
+              toggleAlignment === "end" ? "self-end" : "self-center"
+            }`}
           >
             {expanded ? showLessLabel : toggleLabel}
           </button>
@@ -81,7 +88,7 @@ export function CardStackView({
       ) : null}
 
       {expanded ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-6 w-full">
+        <div className="mx-auto grid w-full max-w-[min(100%,860px)] grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-2">
           {cards.map((item) => (
             <Card
               key={item.id}
@@ -96,10 +103,215 @@ export function CardStackView({
             />
           ))}
         </div>
+      ) : compactDesktopLayout === "pyramidFive" ? (
+        <>
+          <div className="flex w-full flex-col gap-2 md:hidden">
+            {compactCards.map((item) => (
+              <Card
+                key={item.id}
+                id={item.id}
+                label={item.label}
+                supportText={item.supportText}
+                recommended={item.recommended ?? false}
+                selected={isSelected(item.id)}
+                orientation="horizontal"
+                showInfoIcon={false}
+                className="min-h-[142px]"
+                onClick={() => onCardSelect(item.id)}
+              />
+            ))}
+          </div>
+          <div className="mx-auto hidden w-full max-w-[min(100%,860px)] md:block">
+            {/*
+              lg+: fixed 3 + 2 rows (no flex-wrap on the top row — avoids 2+1+2 when the first row wraps).
+              md–lg: same shell as the 3-card step — each row is `flex justify-center gap-2` so cards
+              stay a tight cluster with gap-2 until lg expands to the 3+2 pyramid.
+            */}
+            <div className="hidden flex-col gap-2 lg:flex">
+              <div className="flex justify-center gap-2">
+                {compactCards.slice(0, 3).map((item) => (
+                  <Card
+                    key={item.id}
+                    id={item.id}
+                    label={item.label}
+                    supportText={item.supportText}
+                    recommended={item.recommended ?? false}
+                    selected={isSelected(item.id)}
+                    orientation="horizontal"
+                    showInfoIcon={false}
+                    className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
+                    onClick={() => onCardSelect(item.id)}
+                  />
+                ))}
+              </div>
+              {compactCards.length > 3 ? (
+                <div className="flex justify-center gap-2">
+                  {compactCards
+                    .slice(3, compactRecommendedLimit)
+                    .map((item) => (
+                      <Card
+                        key={item.id}
+                        id={item.id}
+                        label={item.label}
+                        supportText={item.supportText}
+                        recommended={item.recommended ?? false}
+                        selected={isSelected(item.id)}
+                        orientation="horizontal"
+                        showInfoIcon={false}
+                        className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
+                        onClick={() => onCardSelect(item.id)}
+                      />
+                    ))}
+                </div>
+              ) : null}
+            </div>
+            <div className="hidden flex-col gap-2 md:flex lg:hidden">
+              <div className="flex justify-center gap-2">
+                {compactCards.slice(0, 2).map((item) => (
+                  <Card
+                    key={item.id}
+                    id={item.id}
+                    label={item.label}
+                    supportText={item.supportText}
+                    recommended={item.recommended ?? false}
+                    selected={isSelected(item.id)}
+                    orientation="horizontal"
+                    showInfoIcon={false}
+                    className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
+                    onClick={() => onCardSelect(item.id)}
+                  />
+                ))}
+              </div>
+              <div className="flex justify-center gap-2">
+                {compactCards.slice(2, 4).map((item) => (
+                  <Card
+                    key={item.id}
+                    id={item.id}
+                    label={item.label}
+                    supportText={item.supportText}
+                    recommended={item.recommended ?? false}
+                    selected={isSelected(item.id)}
+                    orientation="horizontal"
+                    showInfoIcon={false}
+                    className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
+                    onClick={() => onCardSelect(item.id)}
+                  />
+                ))}
+              </div>
+              {compactCards[4] ? (
+                <div className="flex justify-center gap-2">
+                  <Card
+                    id={compactCards[4].id}
+                    label={compactCards[4].label}
+                    supportText={compactCards[4].supportText}
+                    recommended={compactCards[4].recommended ?? false}
+                    selected={isSelected(compactCards[4].id)}
+                    orientation="horizontal"
+                    showInfoIcon={false}
+                    className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
+                    onClick={() => onCardSelect(compactCards[4].id)}
+                  />
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </>
+      ) : compactDesktopLayout === "flexWrap" ? (
+        <>
+          <div className="flex w-full flex-col gap-2 md:hidden">
+            {compactCards.map((item) => (
+              <Card
+                key={item.id}
+                id={item.id}
+                label={item.label}
+                supportText={item.supportText}
+                recommended={item.recommended ?? false}
+                selected={isSelected(item.id)}
+                orientation="horizontal"
+                showInfoIcon={false}
+                className="min-h-[142px]"
+                onClick={() => onCardSelect(item.id)}
+              />
+            ))}
+          </div>
+          {/* md–lg: pyramid (2 + 1), each row centered; lg+: one centered row (not edge-to-edge in a 2-col grid) */}
+          {compactCards.length === 3 ? (
+            <>
+              <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-col gap-2 md:flex lg:hidden">
+                <div className="flex justify-center gap-2">
+                  {compactCards.slice(0, 2).map((item) => (
+                    <Card
+                      key={item.id}
+                      id={item.id}
+                      label={item.label}
+                      supportText={item.supportText}
+                      recommended={item.recommended ?? false}
+                      selected={isSelected(item.id)}
+                      orientation="horizontal"
+                      showInfoIcon={false}
+                      className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
+                      onClick={() => onCardSelect(item.id)}
+                    />
+                  ))}
+                </div>
+                <div className="flex justify-center">
+                  <Card
+                    id={compactCards[2].id}
+                    label={compactCards[2].label}
+                    supportText={compactCards[2].supportText}
+                    recommended={compactCards[2].recommended ?? false}
+                    selected={isSelected(compactCards[2].id)}
+                    orientation="horizontal"
+                    showInfoIcon={false}
+                    className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
+                    onClick={() => onCardSelect(compactCards[2].id)}
+                  />
+                </div>
+              </div>
+              <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-wrap justify-center gap-2 lg:flex">
+                {compactCards.map((item) => (
+                  <Card
+                    key={item.id}
+                    id={item.id}
+                    label={item.label}
+                    supportText={item.supportText}
+                    recommended={item.recommended ?? false}
+                    selected={isSelected(item.id)}
+                    orientation="horizontal"
+                    showInfoIcon={false}
+                    className="h-[142px] min-h-[142px] max-h-[142px] w-[281px] max-w-[281px] shrink-0"
+                    onClick={() => onCardSelect(item.id)}
+                  />
+                ))}
+              </div>
+            </>
+          ) : (
+            <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-wrap justify-center gap-2 md:flex">
+              {compactCards.map((item) => (
+                <div
+                  key={item.id}
+                  className="flex w-full min-w-0 shrink-0 justify-center md:w-[281px] md:max-w-[281px]"
+                >
+                  <Card
+                    id={item.id}
+                    label={item.label}
+                    supportText={item.supportText}
+                    recommended={item.recommended ?? false}
+                    selected={isSelected(item.id)}
+                    orientation="horizontal"
+                    showInfoIcon={false}
+                    className="h-[142px] min-h-[142px] max-h-[142px] w-full max-w-[281px]"
+                    onClick={() => onCardSelect(item.id)}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </>
       ) : (
         <>
           {/* Compact under 640: single column, up to 5 recommended cards */}
-          <div className="flex flex-col gap-6 w-full md:hidden">
+          <div className="flex w-full flex-col gap-2 md:hidden">
             {compactCards.map((item) => (
               <Card
                 key={item.id}
diff --git a/app/create/CreateFlowLayoutClient.tsx b/app/create/CreateFlowLayoutClient.tsx
index 230ac59..3f757c3 100644
--- a/app/create/CreateFlowLayoutClient.tsx
+++ b/app/create/CreateFlowLayoutClient.tsx
@@ -14,7 +14,10 @@ import { useCreateFlowExit } from "./hooks/useCreateFlowExit";
 import CreateFlowTopNav from "../components/utility/CreateFlowTopNav";
 import { getNextStep, getStepIndex } from "./utils/flowSteps";
 import { getProportionBarProgressForCreateFlowStep } from "./utils/createFlowProportionProgress";
-import { createFlowStepUsesCenteredTextLayout } from "./utils/createFlowScreenRegistry";
+import {
+  createFlowStepUsesCenteredTextLayout,
+  createFlowStepUsesCardLayout,
+} from "./utils/createFlowScreenRegistry";
 import CreateFlowFooter from "../components/utility/CreateFlowFooter";
 import Button from "../components/buttons/Button";
 import { buildPublishPayload } from "../../lib/create/buildPublishPayload";
@@ -299,36 +302,34 @@ function CreateFlowLayoutContent({
   }, [state.communitySaveEmail, tLogin, updateState]);
 
   const isCompletedStep = currentStep === "completed";
-  const isRightRailStep = currentStep === "right-rail";
+  const isRightRailStep = currentStep === "decision-approaches";
   const isFinalReviewStep = currentStep === "final-review";
-  const isCardsStep = currentStep === "cards";
-  /** Two-column select steps: at `lg+` only the right column scrolls; main must not scroll the full page. */
+  const isCardLayoutStep = createFlowStepUsesCardLayout(currentStep);
+  /** Two-column select / right-rail: below `lg` main scrolls; at `lg+` only the right column scrolls. */
   const isSelectSplitScrollStep =
     currentStep === "community-size" ||
     currentStep === "community-structure" ||
-    currentStep === "core-values";
+    currentStep === "core-values" ||
+    currentStep === "decision-approaches";
   const stepIdx = currentStep != null ? getStepIndex(currentStep) : -1;
 
   /** At `md+`, main cross-axis: center by default; exceptions stay top-aligned (see product spec). */
   const mainContentClass = isCompletedStep
     ? "items-stretch overflow-y-auto md:overflow-hidden"
-    : isRightRailStep
-      ? "items-stretch overflow-hidden"
-      : isSelectSplitScrollStep
-        ? "items-start justify-start overflow-y-auto max-lg:overflow-y-auto lg:min-h-0 lg:items-stretch lg:overflow-hidden"
-        : isFinalReviewStep || isCardsStep || isTemplateReviewRoute
-          ? "items-start justify-center overflow-y-auto"
-          : "items-start justify-center overflow-y-auto md:items-center";
+    : isSelectSplitScrollStep
+      ? "items-start justify-start overflow-y-auto max-lg:overflow-y-auto lg:min-h-0 lg:items-stretch lg:overflow-hidden"
+      : isFinalReviewStep || isCardLayoutStep || isTemplateReviewRoute
+        ? "items-start justify-center overflow-y-auto"
+        : "items-start justify-center overflow-y-auto md:items-center";
 
   const isTextStep = createFlowStepUsesCenteredTextLayout(currentStep);
   const mainMaxMdJustify =
     isTextStep && !isCompletedStep && !isRightRailStep
       ? "max-md:justify-center"
       : "max-md:justify-start";
-  const mainMaxMdCross =
-    isCompletedStep || isRightRailStep
-      ? "max-md:flex-col max-md:items-stretch"
-      : "max-md:flex-col max-md:items-center";
+  const mainMaxMdCross = isCompletedStep
+    ? "max-md:flex-col max-md:items-stretch"
+    : "max-md:flex-col max-md:items-center";
   const mainResponsiveLayout = `${mainMaxMdCross} ${mainMaxMdJustify} md:flex-row md:justify-center`;
   const saveDraftOnExit =
     Boolean(sessionUser) && stepIdx >= SAVE_EXIT_FROM_STEP_INDEX;
@@ -575,6 +576,70 @@ function CreateFlowLayoutContent({
               >
                 {footer.confirmCoreValues}
               </Button>
+            ) : currentStep === "communication-methods" && nextStep ? (
+              <Button
+                buttonType="filled"
+                palette="default"
+                size="xsmall"
+                disabled={
+                  isPublishing ||
+                  (state.selectedCommunicationMethodIds?.length ?? 0) === 0
+                }
+                className={footerPrimaryButtonClass}
+                onClick={() => {
+                  goToNextStep();
+                }}
+              >
+                {footer.confirmCommunication}
+              </Button>
+            ) : currentStep === "membership-methods" && nextStep ? (
+              <Button
+                buttonType="filled"
+                palette="default"
+                size="xsmall"
+                disabled={
+                  isPublishing ||
+                  (state.selectedMembershipMethodIds?.length ?? 0) === 0
+                }
+                className={footerPrimaryButtonClass}
+                onClick={() => {
+                  goToNextStep();
+                }}
+              >
+                {footer.confirmMembership}
+              </Button>
+            ) : currentStep === "decision-approaches" && nextStep ? (
+              <Button
+                buttonType="filled"
+                palette="default"
+                size="xsmall"
+                disabled={
+                  isPublishing ||
+                  (state.selectedDecisionApproachIds?.length ?? 0) === 0
+                }
+                className={footerPrimaryButtonClass}
+                onClick={() => {
+                  goToNextStep();
+                }}
+              >
+                {footer.confirmRightRail}
+              </Button>
+            ) : currentStep === "conflict-management" && nextStep ? (
+              <Button
+                buttonType="filled"
+                palette="default"
+                size="xsmall"
+                disabled={
+                  isPublishing ||
+                  (state.selectedConflictManagementIds?.length ?? 0) === 0
+                }
+                className={footerPrimaryButtonClass}
+                onClick={() => {
+                  goToNextStep();
+                }}
+              >
+                {footer.confirmConflictManagement}
+              </Button>
             ) : nextStep ? (
               <Button
                 buttonType="filled"
diff --git a/app/create/[screenId]/page.tsx b/app/create/[screenId]/page.tsx
index 2992f30..f1262c3 100644
--- a/app/create/[screenId]/page.tsx
+++ b/app/create/[screenId]/page.tsx
@@ -1,33 +1,25 @@
-"use client";
-
-import { notFound, useRouter } from "next/navigation";
-import { use, useEffect } from "react";
+import { notFound } from "next/navigation";
 import { CreateFlowScreenView } from "../screens/CreateFlowScreenView";
 import { isValidStep } from "../utils/flowSteps";
 import type { CreateFlowStep } from "../types";
 
+/**
+ * Single dynamic route for the whole create wizard (every step in `FLOW_STEP_ORDER`).
+ *
+ * Only **canonical** `screenId` values from `CreateFlowStep` are valid. Old placeholder
+ * segments from pre-product shells are not redirected — unknown slugs `notFound()`.
+ */
+
 interface PageProps {
   params: Promise<{ screenId: string }>;
 }
 
-export default function CreateFlowScreenPage({ params }: PageProps) {
-  const { screenId: raw } = use(params);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (raw === "community-reflection") {
-      router.replace("/create/community-save");
-    }
-  }, [raw, router]);
-
-  if (raw === "community-reflection") {
-    return null;
-  }
+export default async function CreateFlowScreenPage({ params }: PageProps) {
+  const { screenId: raw } = await params;
 
   if (!isValidStep(raw)) {
     notFound();
   }
 
-  const screenId = raw as CreateFlowStep;
-  return <CreateFlowScreenView screenId={screenId} />;
+  return <CreateFlowScreenView screenId={raw as CreateFlowStep} />;
 }
diff --git a/app/create/components/CreateFlowTwoColumnSelectShell.tsx b/app/create/components/CreateFlowTwoColumnSelectShell.tsx
index ae7c2d7..b792fde 100644
--- a/app/create/components/CreateFlowTwoColumnSelectShell.tsx
+++ b/app/create/components/CreateFlowTwoColumnSelectShell.tsx
@@ -1,7 +1,10 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { CreateFlowStepShell } from "./CreateFlowStepShell";
+import {
+  CreateFlowStepShell,
+  type CreateFlowContentTopBelowMd,
+} from "./CreateFlowStepShell";
 import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "./createFlowLayoutTokens";
 
 export type CreateFlowSelectShellLgVerticalAlign = "center" | "start";
@@ -9,23 +12,29 @@ export type CreateFlowSelectShellLgVerticalAlign = "center" | "start";
 interface CreateFlowTwoColumnSelectShellProps {
   header: ReactNode;
   children: ReactNode;
+  /**
+   * Top padding below create-flow chrome. Select steps use `space-1400`; right-rail uses `space-800`
+   * (Figma Flow — Right Rail).
+   */
+  contentTopBelowMd?: CreateFlowContentTopBelowMd;
   /**
    * At `lg+`, layout variant: `"center"` = vertically centered pair (community size/structure).
-   * `"start"` = top-weighted layout with a scrollable right column (core values): uses `items-stretch`
+   * `"start"` = top-weighted layout with a scrollable right column (core values, right-rail): uses `items-stretch`
    * so the right column gets a bounded height; `items-start` would grow with content and break scroll.
    */
   lgVerticalAlign?: CreateFlowSelectShellLgVerticalAlign;
 }
 
 /**
- * Two-column layout for create-flow select steps (community size/structure, core values).
- * Below `lg`, layout and scrolling match the previous single-column behavior (full page scroll).
+ * Two-column layout for create-flow select steps (community size/structure, core values) and
+ * {@link RightRailScreen} (decision approaches). Below `lg` (1024px), one column + main scrolls.
  * At `lg+`, mirrors {@link CompletedScreen}: static header column + scrollable controls column
  * (`min-h-0` + `overflow-y-auto` height chain; see completed page right rail).
  */
 export function CreateFlowTwoColumnSelectShell({
   header,
   children,
+  contentTopBelowMd = "space-1400",
   lgVerticalAlign = "center",
 }: CreateFlowTwoColumnSelectShellProps) {
   /** `stretch` is required for `min-h-0` + `overflow-y-auto` on the right column. */
@@ -38,7 +47,7 @@ export function CreateFlowTwoColumnSelectShell({
   return (
     <CreateFlowStepShell
       variant="centeredNarrow"
-      contentTopBelowMd="space-1400"
+      contentTopBelowMd={contentTopBelowMd}
       className={
         /* Below `lg`: natural height — same as legacy select screens (main scrolls). */
         /* At `lg+`: fill main + clip so only the right column scrolls (CompletedScreen pattern). */
diff --git a/app/create/components/createFlowLayoutTokens.ts b/app/create/components/createFlowLayoutTokens.ts
index 4f1924c..30f147a 100644
--- a/app/create/components/createFlowLayoutTokens.ts
+++ b/app/create/components/createFlowLayoutTokens.ts
@@ -8,3 +8,11 @@ export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS =
 
 /** Two 640px columns + `--measures-spacing-1200` (48px) gutter. */
 export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS = "md:max-w-[1328px]";
+
+/**
+ * Card-stack steps only (Figma compact card stack): wider than header lockup so the card grid /
+ * pyramid fits (max 860px). Header lockup stays {@link CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}.
+ * Card–card gap uses `gap-2` in `CardStack` (same on mobile and md+).
+ */
+export const CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS =
+  "w-full min-w-0 md:max-w-[min(100%,860px)]";
diff --git a/app/create/screens/CreateFlowScreenView.tsx b/app/create/screens/CreateFlowScreenView.tsx
index a5ec717..dabd61f 100644
--- a/app/create/screens/CreateFlowScreenView.tsx
+++ b/app/create/screens/CreateFlowScreenView.tsx
@@ -11,12 +11,18 @@ import { ConfirmStakeholdersScreen } from "./select/ConfirmStakeholdersScreen";
 import { CommunityUploadScreen } from "./upload/CommunityUploadScreen";
 import { CommunityReviewScreen } from "./review/CommunityReviewScreen";
 import { FinalReviewScreen } from "./review/FinalReviewScreen";
-import { CardsScreen } from "./card/CardsScreen";
+import { CommunicationMethodsScreen } from "./card/CommunicationMethodsScreen";
+import { MembershipMethodsScreen } from "./card/MembershipMethodsScreen";
+import { ConflictManagementScreen } from "./card/ConflictManagementScreen";
 import { RightRailScreen } from "./right-rail/RightRailScreen";
 import { CompletedScreen } from "./completed/CompletedScreen";
 
 /**
- * Renders the create-flow screen for a validated `screenId` (URL segment under /create/).
+ * Maps each wizard `screenId` to its screen component.
+ *
+ * **Folder rule (Figma):** subfolders match `CREATE_FLOW_SCREEN_REGISTRY[].layoutKind`
+ * — `select/` (two-column chip flows), `card/` (compact card-stack steps), `text/`, etc.
+ * The URL segment (`communication-methods`) is not the folder name; see `createFlowScreenRegistry.ts`.
  */
 export function CreateFlowScreenView({
   screenId,
@@ -65,10 +71,14 @@ export function CreateFlowScreenView({
       return <CommunityReviewScreen />;
     case "core-values":
       return <CoreValuesSelectScreen />;
-    case "cards":
-      return <CardsScreen />;
-    case "right-rail":
+    case "communication-methods":
+      return <CommunicationMethodsScreen />;
+    case "membership-methods":
+      return <MembershipMethodsScreen />;
+    case "decision-approaches":
       return <RightRailScreen />;
+    case "conflict-management":
+      return <ConflictManagementScreen />;
     case "confirm-stakeholders":
       return <ConfirmStakeholdersScreen />;
     case "final-review":
diff --git a/app/create/screens/card/CardsScreen.tsx b/app/create/screens/card/CommunicationMethodsScreen.tsx
similarity index 77%
rename from app/create/screens/card/CardsScreen.tsx
rename to app/create/screens/card/CommunicationMethodsScreen.tsx
index 4c9ce83..30ee75d 100644
--- a/app/create/screens/card/CardsScreen.tsx
+++ b/app/create/screens/card/CommunicationMethodsScreen.tsx
@@ -1,5 +1,14 @@
 "use client";
 
+/**
+ * `communication-methods` step — Figma “Flow — Compact Card Stack” (node `20246-15828`).
+ * Registry: `layoutKind: "card"` (`CREATE_FLOW_SCREEN_REGISTRY["communication-methods"]`).
+ *
+ * Lives under `screens/card/` (not `select/`): Figma **card stack** layout is a distinct shell from
+ * two-column chip **select** frames. Future card-stack steps get their own `*Screen.tsx` here and
+ * reuse `CardStack` / `CreateFlowStepShell` as needed.
+ */
+
 import { useState, useCallback, useMemo } from "react";
 import { useMessages } from "../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
@@ -9,7 +18,10 @@ import CardStack from "../../../components/utility/CardStack";
 import Create from "../../../components/modals/Create";
 import TextArea from "../../../components/controls/TextArea";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
-import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
+import {
+  CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
+  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
+} from "../../components/createFlowLayoutTokens";
 
 const IN_PERSON_CARD_ID = "in-person-meetings";
 const SIGNAL_CARD_ID = "signal";
@@ -129,16 +141,24 @@ function isAddPlatformCard(cardId: string | null): boolean {
   );
 }
 
-export function CardsScreen() {
+export function CommunicationMethodsScreen() {
   const m = useMessages();
   const comm = m.create.communication;
   const mdUp = useCreateFlowMdUp();
-  const { markCreateFlowInteraction } = useCreateFlow();
+  const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
   const [expanded, setExpanded] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [pendingCardId, setPendingCardId] = useState<string | null>(null);
 
+  const selectedIds = state.selectedCommunicationMethodIds ?? [];
+
+  const setSelectedIds = useCallback(
+    (next: string[]) => {
+      updateState({ selectedCommunicationMethodIds: next });
+    },
+    [updateState],
+  );
+
   const sampleCards = useMemo(
     () =>
       COMMUNICATION_CARD_ORDER.map((id) => {
@@ -154,9 +174,25 @@ export function CardsScreen() {
   );
 
   const title = expanded ? comm.page.expandedTitle : comm.page.compactTitle;
-  const description = expanded
-    ? comm.page.expandedDescription
-    : comm.page.compactDescription;
+
+  const description = expanded ? (
+    comm.page.expandedDescription
+  ) : (
+    <>
+      {comm.page.compactDescriptionBefore}
+      <button
+        type="button"
+        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+        onClick={() => {
+          markCreateFlowInteraction();
+          setExpanded(true);
+        }}
+      >
+        {comm.page.compactDescriptionLinkLabel}
+      </button>
+      {comm.page.compactDescriptionAfter}
+    </>
+  );
 
   const modalConfig =
     pendingCardId && pendingCardId in comm.modals
@@ -198,13 +234,15 @@ export function CardsScreen() {
   const handleCreateModalConfirm = useCallback(() => {
     markCreateFlowInteraction();
     if (pendingCardId) {
-      setSelectedIds((prev) =>
-        prev.includes(pendingCardId) ? prev : [...prev, pendingCardId],
+      setSelectedIds(
+        selectedIds.includes(pendingCardId)
+          ? selectedIds
+          : [...selectedIds, pendingCardId],
       );
     }
     setCreateModalOpen(false);
     setPendingCardId(null);
-  }, [markCreateFlowInteraction, pendingCardId]);
+  }, [markCreateFlowInteraction, pendingCardId, selectedIds, setSelectedIds]);
 
   return (
     <CreateFlowStepShell
@@ -219,7 +257,7 @@ export function CardsScreen() {
             justification="center"
           />
         </div>
-        <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>
+        <div className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}>
           <CardStack
             cards={sampleCards}
             selectedIds={selectedIds}
@@ -231,6 +269,8 @@ export function CardsScreen() {
             }}
             hasMore={true}
             toggleLabel={comm.page.seeAllLink}
+            compactRecommendedLimit={3}
+            compactDesktopLayout="flexWrap"
             headerLockupSize={mdUp ? "L" : "M"}
           />
         </div>
diff --git a/app/create/screens/card/ConflictManagementScreen.tsx b/app/create/screens/card/ConflictManagementScreen.tsx
new file mode 100644
index 0000000..026bb70
--- /dev/null
+++ b/app/create/screens/card/ConflictManagementScreen.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+/**
+ * `conflict-management` step — Figma compact card stack (node `20879-15979`).
+ * Registry: `CREATE_FLOW_SCREEN_REGISTRY["conflict-management"]`.
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import { useMessages } from "../../../contexts/MessagesContext";
+import { useCreateFlow } from "../../context/CreateFlowContext";
+import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import CardStack from "../../../components/utility/CardStack";
+import Create from "../../../components/modals/Create";
+import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
+import {
+  CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
+  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
+} from "../../components/createFlowLayoutTokens";
+
+const CONFLICT_CARD_ORDER = [
+  "peer-mediation",
+  "conflict-resolution-council",
+  "facilitated-negotiation",
+  "ad-hoc-arbitration",
+  "conflict-workshops",
+  "6",
+  "7",
+  "8",
+] as const;
+
+export function ConflictManagementScreen() {
+  const m = useMessages();
+  const cm = m.create.conflictManagement;
+  const mdUp = useCreateFlowMdUp();
+  const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
+  const [expanded, setExpanded] = useState(false);
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [pendingCardId, setPendingCardId] = useState<string | null>(null);
+
+  const selectedIds = state.selectedConflictManagementIds ?? [];
+
+  const setSelectedIds = useCallback(
+    (next: string[]) => {
+      updateState({ selectedConflictManagementIds: next });
+    },
+    [updateState],
+  );
+
+  const sampleCards = useMemo(
+    () =>
+      CONFLICT_CARD_ORDER.map((id) => {
+        const row = cm.cards[id as keyof typeof cm.cards];
+        return {
+          id,
+          label: row.label,
+          supportText: row.supportText,
+          recommended: true,
+        };
+      }),
+    [cm],
+  );
+
+  const title = expanded ? cm.page.expandedTitle : cm.page.compactTitle;
+
+  const description = expanded ? (
+    cm.page.expandedDescription
+  ) : (
+    <>
+      {cm.page.compactDescriptionBefore}
+      <button
+        type="button"
+        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+        onClick={() => {
+          markCreateFlowInteraction();
+          setExpanded(true);
+        }}
+      >
+        {cm.page.compactDescriptionLinkLabel}
+      </button>
+      {cm.page.compactDescriptionAfter}
+    </>
+  );
+
+  const modalConfig =
+    pendingCardId && pendingCardId in cm.modals
+      ? (() => {
+          const modal = cm.modals[pendingCardId as keyof typeof cm.modals];
+          return {
+            title: modal.title,
+            description: modal.description,
+            nextButtonText: cm.confirmModal.nextButtonText,
+            showBackButton: false as const,
+            currentStep: undefined,
+            totalSteps: undefined,
+          };
+        })()
+      : {
+          title: cm.confirmModal.title,
+          description: cm.confirmModal.description,
+          nextButtonText: cm.confirmModal.nextButtonText,
+          showBackButton: false as const,
+          currentStep: undefined,
+          totalSteps: undefined,
+        };
+
+  const handleCardClick = useCallback(
+    (id: string) => {
+      markCreateFlowInteraction();
+      setPendingCardId(id);
+      setCreateModalOpen(true);
+    },
+    [markCreateFlowInteraction],
+  );
+
+  const handleCreateModalClose = useCallback(() => {
+    setCreateModalOpen(false);
+    setPendingCardId(null);
+  }, []);
+
+  const handleCreateModalConfirm = useCallback(() => {
+    markCreateFlowInteraction();
+    if (pendingCardId) {
+      setSelectedIds(
+        selectedIds.includes(pendingCardId)
+          ? selectedIds
+          : [...selectedIds, pendingCardId],
+      );
+    }
+    setCreateModalOpen(false);
+    setPendingCardId(null);
+  }, [markCreateFlowInteraction, pendingCardId, selectedIds, setSelectedIds]);
+
+  return (
+    <CreateFlowStepShell
+      variant="wideGridLoosePadding"
+      contentTopBelowMd="space-800"
+    >
+      <div className="flex w-full min-w-0 flex-col items-center gap-6">
+        <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>
+          <CreateFlowHeaderLockup
+            title={title}
+            description={description}
+            justification="center"
+          />
+        </div>
+        <div className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}>
+          <CardStack
+            cards={sampleCards}
+            selectedIds={selectedIds}
+            onCardSelect={handleCardClick}
+            expanded={expanded}
+            onToggleExpand={() => {
+              markCreateFlowInteraction();
+              setExpanded((prev) => !prev);
+            }}
+            hasMore={true}
+            toggleLabel={cm.page.seeAllLink}
+            compactRecommendedLimit={5}
+            compactDesktopLayout="pyramidFive"
+            headerLockupSize={mdUp ? "L" : "M"}
+          />
+        </div>
+      </div>
+
+      <Create
+        isOpen={createModalOpen}
+        onClose={handleCreateModalClose}
+        onNext={handleCreateModalConfirm}
+        title={modalConfig.title}
+        description={modalConfig.description}
+        nextButtonText={modalConfig.nextButtonText}
+        showBackButton={modalConfig.showBackButton}
+        currentStep={modalConfig.currentStep}
+        totalSteps={modalConfig.totalSteps}
+      />
+    </CreateFlowStepShell>
+  );
+}
diff --git a/app/create/screens/card/MembershipMethodsScreen.tsx b/app/create/screens/card/MembershipMethodsScreen.tsx
new file mode 100644
index 0000000..e67f464
--- /dev/null
+++ b/app/create/screens/card/MembershipMethodsScreen.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+/**
+ * `membership-methods` step — Figma compact card stack (node `20858-13947`).
+ * Registry: `CREATE_FLOW_SCREEN_REGISTRY["membership-methods"]`.
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import { useMessages } from "../../../contexts/MessagesContext";
+import { useCreateFlow } from "../../context/CreateFlowContext";
+import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import CardStack from "../../../components/utility/CardStack";
+import Create from "../../../components/modals/Create";
+import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
+import {
+  CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
+  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
+} from "../../components/createFlowLayoutTokens";
+
+const MEMBERSHIP_CARD_ORDER = [
+  "open-access",
+  "orientation-required",
+  "invitation-only",
+  "contribution-based",
+  "mentorship",
+  "6",
+  "7",
+  "8",
+] as const;
+
+export function MembershipMethodsScreen() {
+  const m = useMessages();
+  const mem = m.create.membership;
+  const mdUp = useCreateFlowMdUp();
+  const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
+  const [expanded, setExpanded] = useState(false);
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [pendingCardId, setPendingCardId] = useState<string | null>(null);
+
+  const selectedIds = state.selectedMembershipMethodIds ?? [];
+
+  const setSelectedIds = useCallback(
+    (next: string[]) => {
+      updateState({ selectedMembershipMethodIds: next });
+    },
+    [updateState],
+  );
+
+  const sampleCards = useMemo(
+    () =>
+      MEMBERSHIP_CARD_ORDER.map((id) => {
+        const row = mem.cards[id as keyof typeof mem.cards];
+        return {
+          id,
+          label: row.label,
+          supportText: row.supportText,
+          recommended: true,
+        };
+      }),
+    [mem],
+  );
+
+  const title = expanded ? mem.page.expandedTitle : mem.page.compactTitle;
+
+  const description = expanded ? (
+    mem.page.expandedDescription
+  ) : (
+    <>
+      {mem.page.compactDescriptionBefore}
+      <button
+        type="button"
+        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+        onClick={() => {
+          markCreateFlowInteraction();
+          setExpanded(true);
+        }}
+      >
+        {mem.page.compactDescriptionLinkLabel}
+      </button>
+      {mem.page.compactDescriptionAfter}
+    </>
+  );
+
+  const modalConfig =
+    pendingCardId && pendingCardId in mem.modals
+      ? (() => {
+          const modal = mem.modals[pendingCardId as keyof typeof mem.modals];
+          return {
+            title: modal.title,
+            description: modal.description,
+            nextButtonText: mem.confirmModal.nextButtonText,
+            showBackButton: false as const,
+            currentStep: undefined,
+            totalSteps: undefined,
+          };
+        })()
+      : {
+          title: mem.confirmModal.title,
+          description: mem.confirmModal.description,
+          nextButtonText: mem.confirmModal.nextButtonText,
+          showBackButton: false as const,
+          currentStep: undefined,
+          totalSteps: undefined,
+        };
+
+  const handleCardClick = useCallback(
+    (id: string) => {
+      markCreateFlowInteraction();
+      setPendingCardId(id);
+      setCreateModalOpen(true);
+    },
+    [markCreateFlowInteraction],
+  );
+
+  const handleCreateModalClose = useCallback(() => {
+    setCreateModalOpen(false);
+    setPendingCardId(null);
+  }, []);
+
+  const handleCreateModalConfirm = useCallback(() => {
+    markCreateFlowInteraction();
+    if (pendingCardId) {
+      setSelectedIds(
+        selectedIds.includes(pendingCardId)
+          ? selectedIds
+          : [...selectedIds, pendingCardId],
+      );
+    }
+    setCreateModalOpen(false);
+    setPendingCardId(null);
+  }, [markCreateFlowInteraction, pendingCardId, selectedIds, setSelectedIds]);
+
+  return (
+    <CreateFlowStepShell
+      variant="wideGridLoosePadding"
+      contentTopBelowMd="space-800"
+    >
+      <div className="flex w-full min-w-0 flex-col items-center gap-6">
+        <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>
+          <CreateFlowHeaderLockup
+            title={title}
+            description={description}
+            justification="center"
+          />
+        </div>
+        <div className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}>
+          <CardStack
+            cards={sampleCards}
+            selectedIds={selectedIds}
+            onCardSelect={handleCardClick}
+            expanded={expanded}
+            onToggleExpand={() => {
+              markCreateFlowInteraction();
+              setExpanded((prev) => !prev);
+            }}
+            hasMore={true}
+            toggleLabel={mem.page.seeAllLink}
+            compactRecommendedLimit={5}
+            compactDesktopLayout="pyramidFive"
+            headerLockupSize={mdUp ? "L" : "M"}
+          />
+        </div>
+      </div>
+
+      <Create
+        isOpen={createModalOpen}
+        onClose={handleCreateModalClose}
+        onNext={handleCreateModalConfirm}
+        title={modalConfig.title}
+        description={modalConfig.description}
+        nextButtonText={modalConfig.nextButtonText}
+        showBackButton={modalConfig.showBackButton}
+        currentStep={modalConfig.currentStep}
+        totalSteps={modalConfig.totalSteps}
+      />
+    </CreateFlowStepShell>
+  );
+}
diff --git a/app/create/screens/right-rail/RightRailScreen.tsx b/app/create/screens/right-rail/RightRailScreen.tsx
index a76dc22..b43cb6f 100644
--- a/app/create/screens/right-rail/RightRailScreen.tsx
+++ b/app/create/screens/right-rail/RightRailScreen.tsx
@@ -1,5 +1,13 @@
 "use client";
 
+/**
+ * `decision-approaches` step — Figma “Flow — Right Rail” (node `20523-23509`).
+ * Registry: `CREATE_FLOW_SCREEN_REGISTRY["decision-approaches"]` (`layoutKind: "right-rail"`).
+ *
+ * Layout matches {@link CreateFlowTwoColumnSelectShell}: one column below `lg` (1024px), two columns
+ * at `lg+` with a scrollable rail — same breakpoint and height chain as select steps, distinct content.
+ */
+
 import { useState, useCallback, useMemo } from "react";
 import DecisionMakingSidebar from "../../../components/utility/DecisionMakingSidebar";
 import CardStack from "../../../components/utility/CardStack";
@@ -8,22 +16,27 @@ import type { CardStackItem } from "../../../components/utility/CardStack/CardSt
 import { useMessages } from "../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
-import {
-  CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
-  CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
-} from "../../components/createFlowLayoutTokens";
+import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
 
 export function RightRailScreen() {
   const m = useMessages();
   const rr = m.create.rightRail;
   const mdUp = useCreateFlowMdUp();
-  const { markCreateFlowInteraction } = useCreateFlow();
+  const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
   const [messageBoxCheckedIds, setMessageBoxCheckedIds] = useState<string[]>(
     [],
   );
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [expanded, setExpanded] = useState(false);
 
+  const selectedIds = state.selectedDecisionApproachIds ?? [];
+
+  const setSelectedIds = useCallback(
+    (next: string[]) => {
+      updateState({ selectedDecisionApproachIds: next });
+    },
+    [updateState],
+  );
+
   const messageBoxItems: InfoMessageBoxItem[] = useMemo(
     () =>
       rr.messageBox.items.map((item) => ({
@@ -47,7 +60,16 @@ export function RightRailScreen() {
   const sidebarDescription = (
     <>
       {rr.sidebar.descriptionBefore}
-      <span className="underline">{rr.sidebar.descriptionLink}</span>
+      <button
+        type="button"
+        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+        onClick={() => {
+          markCreateFlowInteraction();
+          setExpanded(true);
+        }}
+      >
+        {rr.sidebar.descriptionLinkLabel}
+      </button>
       {rr.sidebar.descriptionAfter}
     </>
   );
@@ -65,11 +87,13 @@ export function RightRailScreen() {
   const handleCardSelect = useCallback(
     (id: string) => {
       markCreateFlowInteraction();
-      setSelectedIds((prev) =>
-        prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+      setSelectedIds(
+        selectedIds.includes(id)
+          ? selectedIds.filter((x) => x !== id)
+          : [...selectedIds, id],
       );
     },
-    [markCreateFlowInteraction],
+    [markCreateFlowInteraction, selectedIds, setSelectedIds],
   );
 
   const handleToggleExpand = useCallback(() => {
@@ -78,48 +102,40 @@ export function RightRailScreen() {
   }, [markCreateFlowInteraction]);
 
   return (
-    <div className="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden md:h-full">
-      <div className="flex min-h-0 flex-1 overflow-hidden px-5 max-md:overflow-y-auto md:px-12">
-        <div
-          className={`mx-auto grid h-auto min-h-0 w-full shrink-0 grid-cols-1 gap-6 min-w-0 max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:justify-items-center md:gap-12 md:pb-8 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
-        >
-          <div
-            className={`flex flex-col items-stretch justify-start overflow-hidden md:justify-center ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
-          >
-            <DecisionMakingSidebar
-              title={rr.sidebar.title}
-              description={sidebarDescription}
-              messageBoxTitle={rr.messageBox.title}
-              messageBoxItems={messageBoxItems}
-              messageBoxCheckedIds={messageBoxCheckedIds}
-              onMessageBoxCheckboxChange={handleMessageBoxCheckboxChange}
-              size={mdUp ? "L" : "M"}
-              justification={mdUp ? "left" : "center"}
-            />
-          </div>
-          <div
-            className={`scrollbar-hide relative flex min-h-0 flex-col overflow-x-hidden max-md:overflow-visible md:overflow-y-auto ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
-          >
-            <div className="flex w-full min-w-0 flex-col items-center gap-6 py-0 md:pb-8">
-              <CardStack
-                cards={sampleCards}
-                selectedIds={selectedIds}
-                onCardSelect={handleCardSelect}
-                expanded={expanded}
-                onToggleExpand={handleToggleExpand}
-                hasMore={true}
-                toggleLabel={rr.cardStack.toggleSeeAll}
-                showLessLabel={rr.cardStack.toggleShowLess}
-                title={rr.cardStack.emptyTitle}
-                description={rr.cardStack.emptyDescription}
-                layout="singleStack"
-                className="w-full"
-                headerLockupSize={mdUp ? "L" : "M"}
-              />
-            </div>
-          </div>
-        </div>
+    <CreateFlowTwoColumnSelectShell
+      contentTopBelowMd="space-800"
+      lgVerticalAlign="start"
+      header={
+        <DecisionMakingSidebar
+          title={rr.sidebar.title}
+          description={sidebarDescription}
+          messageBoxTitle={rr.messageBox.title}
+          messageBoxItems={messageBoxItems}
+          messageBoxCheckedIds={messageBoxCheckedIds}
+          onMessageBoxCheckboxChange={handleMessageBoxCheckboxChange}
+          size={mdUp ? "L" : "M"}
+          justification={mdUp ? "left" : "center"}
+        />
+      }
+    >
+      <div className="flex w-full min-w-0 flex-col items-stretch gap-6 py-0">
+        <CardStack
+          cards={sampleCards}
+          selectedIds={selectedIds}
+          onCardSelect={handleCardSelect}
+          expanded={expanded}
+          onToggleExpand={handleToggleExpand}
+          hasMore={true}
+          toggleLabel={rr.cardStack.toggleSeeAll}
+          showLessLabel={rr.cardStack.toggleShowLess}
+          title=""
+          description=""
+          layout="singleStack"
+          compactRecommendedLimit={5}
+          className="w-full"
+          headerLockupSize={mdUp ? "L" : "M"}
+        />
       </div>
-    </div>
+    </CreateFlowTwoColumnSelectShell>
   );
 }
diff --git a/app/create/types.ts b/app/create/types.ts
index 1ec4ce4..68393b5 100644
--- a/app/create/types.ts
+++ b/app/create/types.ts
@@ -19,8 +19,10 @@ export type CreateFlowStep =
   | "community-save"
   | "review"
   | "core-values"
-  | "cards"
-  | "right-rail"
+  | "communication-methods"
+  | "membership-methods"
+  | "decision-approaches"
+  | "conflict-management"
   | "confirm-stakeholders"
   | "final-review"
   | "completed";
@@ -83,6 +85,14 @@ export interface CreateFlowState {
   coreValuesChipsSnapshot?: CommunityStructureChipSnapshotRow[];
   /** User-authored detail text keyed by chip id (preset ids or custom UUIDs). */
   coreValueDetailsByChipId?: Record<string, CoreValueDetailEntry>;
+  /** Create Custom — communication methods step (`/create/communication-methods`); card ids from `create.communication` presets. */
+  selectedCommunicationMethodIds?: string[];
+  /** Create Custom — membership / join patterns (`/create/membership-methods`); card ids from `create.membership` presets. */
+  selectedMembershipMethodIds?: string[];
+  /** Create Custom — decision approaches (`/create/decision-approaches`); card ids from `create.rightRail` presets. */
+  selectedDecisionApproachIds?: string[];
+  /** Create Custom — conflict management (`/create/conflict-management`); card ids from `create.conflictManagement` presets. */
+  selectedConflictManagementIds?: string[];
   currentStep?: CreateFlowStep;
   /** Section drafts; structure will tighten as steps persist real shapes. */
   sections?: Record<string, unknown>[];
diff --git a/app/create/utils/createFlowProportionProgress.ts b/app/create/utils/createFlowProportionProgress.ts
index 2541e39..017986b 100644
--- a/app/create/utils/createFlowProportionProgress.ts
+++ b/app/create/utils/createFlowProportionProgress.ts
@@ -16,8 +16,10 @@ const PROPORTION_BY_STEP_INDEX: readonly ProportionBarState[] = [
   "2-0", // community-save
   "2-0", // review (Figma Flow — Review `19706:12135`: same segment fill as end of Create Community)
   "2-0", // core-values (same segment as review / end of Create Community)
-  "2-2", // cards
-  "3-0", // right-rail
+  "2-1", // communication-methods (Figma — Compact Card Stack)
+  "2-2", // membership-methods (Figma — Compact Card Stack `20858:13947`)
+  "2-3", // decision-approaches (Figma Flow — Right Rail `20523:23509`)
+  "3-0", // conflict-management (Figma Flow — Compact Card Stack `20879:15979`; start of Review segment)
   "3-1", // confirm-stakeholders
   "3-2", // final-review
   "3-2", // completed
diff --git a/app/create/utils/createFlowScreenRegistry.ts b/app/create/utils/createFlowScreenRegistry.ts
index 35719b2..7af764e 100644
--- a/app/create/utils/createFlowScreenRegistry.ts
+++ b/app/create/utils/createFlowScreenRegistry.ts
@@ -2,7 +2,8 @@ import type { CreateFlowStep } from "../types";
 
 /**
  * Figma layout families for the create flow (not encoded in the URL).
- * Registry and `app/create/screens/` are organized by these kinds.
+ * `app/create/screens/<kind>/` mirrors these names: e.g. `layoutKind: "select"` → `screens/select/`,
+ * `"card"` → `screens/card/` (compact card-stack frames, distinct from two-column chip selects).
  */
 export type CreateFlowLayoutKind =
   | "informational"
@@ -90,18 +91,30 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record<
     messageNamespace: "create.coreValues",
     centeredBodyBelowMd: false,
   },
-  cards: {
+  "communication-methods": {
     layoutKind: "card",
-    figmaNodeId: "TBD-cards",
+    figmaNodeId: "20246-15828",
     messageNamespace: "create.communication",
     centeredBodyBelowMd: false,
   },
-  "right-rail": {
+  "membership-methods": {
+    layoutKind: "card",
+    figmaNodeId: "20858-13947",
+    messageNamespace: "create.membership",
+    centeredBodyBelowMd: false,
+  },
+  "decision-approaches": {
     layoutKind: "right-rail",
-    figmaNodeId: "TBD-right-rail",
+    figmaNodeId: "20523-23509",
     messageNamespace: "create.rightRail",
     centeredBodyBelowMd: false,
   },
+  "conflict-management": {
+    layoutKind: "card",
+    figmaNodeId: "20879-15979",
+    messageNamespace: "create.conflictManagement",
+    centeredBodyBelowMd: false,
+  },
   "confirm-stakeholders": {
     layoutKind: "select",
     figmaNodeId: "21104-46594",
@@ -128,3 +141,11 @@ export function createFlowStepUsesCenteredTextLayout(
   if (!step) return false;
   return CREATE_FLOW_SCREEN_REGISTRY[step].centeredBodyBelowMd;
 }
+
+/** Steps whose main area uses the CardStack-style layout (`layoutKind: "card"`). */
+export function createFlowStepUsesCardLayout(
+  step: CreateFlowStep | null,
+): boolean {
+  if (!step) return false;
+  return CREATE_FLOW_SCREEN_REGISTRY[step].layoutKind === "card";
+}
diff --git a/app/create/utils/flowSteps.ts b/app/create/utils/flowSteps.ts
index 818a3fc..fad4baa 100644
--- a/app/create/utils/flowSteps.ts
+++ b/app/create/utils/flowSteps.ts
@@ -21,8 +21,10 @@ export const FLOW_STEP_ORDER: readonly CreateFlowStep[] = [
   "community-save",
   "review",
   "core-values",
-  "cards",
-  "right-rail",
+  "communication-methods",
+  "membership-methods",
+  "decision-approaches",
+  "conflict-management",
   "confirm-stakeholders",
   "final-review",
   "completed",
diff --git a/docs/create-flow.md b/docs/create-flow.md
index 031ad0f..94e3d2b 100644
--- a/docs/create-flow.md
+++ b/docs/create-flow.md
@@ -11,7 +11,7 @@ The Figma **Create Community** sequence is the **source of truth** for the first
 | Stage (Figma) | Purpose (summary) | `CreateFlowStep` values (in order) |
 | --- | --- | --- |
 | **Create Community** | Intro, naming, structure, context, size, upload, save progress (email), then community review. | `informational` → `community-name` → `community-structure` → `community-context` → `community-size` → `community-upload` → `community-save` → `review` |
-| **Create Custom CommunityRule** | Author the CommunityRule content and structure. | `cards` → `right-rail` |
+| **Create Custom CommunityRule** | Author the CommunityRule content and structure. | `core-values` → `communication-methods` → `right-rail` (further card-stack steps get their own `screenId` and `screens/card/*Screen.tsx`; `right-rail` uses `layoutKind: "right-rail"`) |
 | **Review and complete** | Stakeholders, final card, publish, success. | `confirm-stakeholders` → `final-review` → `completed` |
 
 Treat these stages as the **canonical product sections** when adding chrome (e.g. stage headers, progress copy), breaking work across teams, or reusing flows in other surfaces. **Layout kind** is **not** encoded in the URL; it lives in [`CREATE_FLOW_SCREEN_REGISTRY`](../app/create/utils/createFlowScreenRegistry.ts) (Figma node id + `layoutKind` per step). Figma defines eight layout kinds: **informational**, **text**, **select**, **upload**, **review**, **card**, **right-rail**, **completed** — `CreateFlowLayoutKind` and [`app/create/screens/`](../app/create/screens/) mirror that list (one folder per kind; multiple steps may share a kind, e.g. several **select** screens).
@@ -34,11 +34,12 @@ Order is defined in code by [`FLOW_STEP_ORDER`](../app/create/utils/flowSteps.ts
 | 6 | Create Community | `community-upload` | `/create/community-upload` |
 | 7 | Create Community | `community-save` | `/create/community-save` |
 | 8 | Create Community (review frame) | `review` | `/create/review` |
-| 9 | Create Custom CommunityRule | `cards` | `/create/cards` |
-| 10 | Create Custom CommunityRule | `right-rail` | `/create/right-rail` |
-| 11 | Review and complete | `confirm-stakeholders` | `/create/confirm-stakeholders` |
-| 12 | Review and complete | `final-review` | `/create/final-review` |
-| 13 | Review and complete | `completed` | `/create/completed` |
+| 9 | Create Custom CommunityRule | `core-values` | `/create/core-values` |
+| 10 | Create Custom CommunityRule | `communication-methods` | `/create/communication-methods` |
+| 11 | Create Custom CommunityRule | `right-rail` | `/create/right-rail` |
+| 12 | Review and complete | `confirm-stakeholders` | `/create/confirm-stakeholders` |
+| 13 | Review and complete | `final-review` | `/create/final-review` |
+| 14 | Review and complete | `completed` | `/create/completed` |
 
 **Primary entry:** marketing header “Create rule” navigates to **`/create`**, which redirects to **`/create/informational`** (see [`TopNav.container.tsx`](../app/components/navigation/TopNav/TopNav.container.tsx)).
 
diff --git a/lib/create/migrateLegacyCreateFlowState.ts b/lib/create/migrateLegacyCreateFlowState.ts
index 7c87e49..bf6d08a 100644
--- a/lib/create/migrateLegacyCreateFlowState.ts
+++ b/lib/create/migrateLegacyCreateFlowState.ts
@@ -1,25 +1,24 @@
 import type { CreateFlowState } from "../../app/create/types";
 
+/** Legacy `currentStep` values mapped to the current `CreateFlowStep` id. */
+const LEGACY_CREATE_FLOW_STEP_RENAMES: Readonly<Record<string, string>> = {
+  "right-rail": "decision-approaches",
+};
+
 /**
- * Maps pre-rename draft keys and step ids (`community-reflection` → `community-save`).
- * Safe to run on any parsed draft payload before merging into context.
+ * Normalizes parsed draft JSON before merging into create-flow context.
+ * Renames deprecated step ids so old drafts and bookmarks stay valid.
  */
 export function migrateLegacyCreateFlowState(
   raw: Record<string, unknown> | null | undefined,
 ): CreateFlowState {
   if (!raw || typeof raw !== "object") return {};
-  const next: Record<string, unknown> = { ...raw };
-  if (typeof next.communityReflection === "string") {
-    if (
-      next.communitySaveEmail === undefined ||
-      next.communitySaveEmail === ""
-    ) {
-      next.communitySaveEmail = next.communityReflection;
+  const step = raw.currentStep;
+  if (typeof step === "string") {
+    const next = LEGACY_CREATE_FLOW_STEP_RENAMES[step];
+    if (next !== undefined) {
+      return { ...raw, currentStep: next } as CreateFlowState;
     }
   }
-  delete next.communityReflection;
-  if (next.currentStep === "community-reflection") {
-    next.currentStep = "community-save";
-  }
-  return next as CreateFlowState;
+  return raw as CreateFlowState;
 }
diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts
index b59c3d7..2a7d013 100644
--- a/lib/server/validation/createFlowSchemas.ts
+++ b/lib/server/validation/createFlowSchemas.ts
@@ -63,6 +63,10 @@ export const createFlowStateSchema = z
     coreValueDetailsByChipId: z
       .record(coreValueDetailEntrySchema)
       .optional(),
+    selectedCommunicationMethodIds: z.array(z.string()).max(200).optional(),
+    selectedMembershipMethodIds: z.array(z.string()).max(200).optional(),
+    selectedDecisionApproachIds: z.array(z.string()).max(200).optional(),
+    selectedConflictManagementIds: z.array(z.string()).max(200).optional(),
     currentStep: createFlowStepSchema.optional(),
     sections: z.array(z.unknown()).optional(),
     stakeholders: z.array(z.unknown()).optional(),
diff --git a/messages/en/create/communication.json b/messages/en/create/communication.json
index 99a2976..8225070 100644
--- a/messages/en/create/communication.json
+++ b/messages/en/create/communication.json
@@ -2,7 +2,9 @@
   "_comment": "Create flow – communication step: page, cards, and add-platform modals",
   "page": {
     "compactTitle": "How should this community communicate with each-other?",
-    "compactDescription": "You can select multiple methods for different needs or add your own",
+    "compactDescriptionBefore": "You can select multiple methods for different needs or ",
+    "compactDescriptionLinkLabel": "add",
+    "compactDescriptionAfter": " your own",
     "expandedTitle": "What method should this community use to communicate with eachother?",
     "expandedDescription": "You can select multiple methods for different needs or add your own",
     "seeAllLink": "See all communication approaches"
diff --git a/messages/en/create/conflictManagement.json b/messages/en/create/conflictManagement.json
new file mode 100644
index 0000000..2a8b625
--- /dev/null
+++ b/messages/en/create/conflictManagement.json
@@ -0,0 +1,76 @@
+{
+  "_comment": "Create flow — conflict management (Figma Flow — Compact Card Stack `20879:15979`)",
+  "page": {
+    "compactTitle": "How should conflicts be managed\nin your group?",
+    "compactDescriptionBefore": "You can also combine or ",
+    "compactDescriptionLinkLabel": "add",
+    "compactDescriptionAfter": " new approaches to the list",
+    "expandedTitle": "How should conflicts be managed in your group?",
+    "expandedDescription": "You can also combine or add new approaches to the list",
+    "seeAllLink": "See all conflict management approaches"
+  },
+  "confirmModal": {
+    "title": "Confirm selection",
+    "description": "Confirm to select this option.",
+    "nextButtonText": "Confirm"
+  },
+  "cards": {
+    "peer-mediation": {
+      "label": "Peer Mediation",
+      "supportText": "Trained members within the organization mediate disputes among peers."
+    },
+    "conflict-resolution-council": {
+      "label": "Conflict Resolution Council",
+      "supportText": "Senior members with institutional knowledge provide guidance or decisions."
+    },
+    "facilitated-negotiation": {
+      "label": "Facilitated Negotiation",
+      "supportText": "A neutral facilitator helps guide the negotiation process."
+    },
+    "ad-hoc-arbitration": {
+      "label": "Ad Hoc Arbitration",
+      "supportText": "Arbitrators are chosen specifically for a particular case."
+    },
+    "conflict-workshops": {
+      "label": "Conflict Workshops",
+      "supportText": "Structured sessions where parties collaboratively resolve disputes and improve future interactions."
+    },
+    "6": {
+      "label": "Label",
+      "supportText": "Additional conflict management approach."
+    },
+    "7": {
+      "label": "Label",
+      "supportText": "Additional conflict management approach."
+    },
+    "8": {
+      "label": "Label",
+      "supportText": "Additional conflict management approach."
+    }
+  },
+  "modals": {
+    "peer-mediation": {
+      "title": "Peer Mediation",
+      "description": "Trained members within the organization mediate disputes among peers."
+    },
+    "conflict-resolution-council": {
+      "title": "Conflict Resolution Council",
+      "description": "Senior members with institutional knowledge provide guidance or decisions."
+    },
+    "facilitated-negotiation": {
+      "title": "Facilitated Negotiation",
+      "description": "A neutral facilitator helps guide the negotiation process."
+    },
+    "ad-hoc-arbitration": {
+      "title": "Ad Hoc Arbitration",
+      "description": "Arbitrators are chosen specifically for a particular case."
+    },
+    "conflict-workshops": {
+      "title": "Conflict Workshops",
+      "description": "Structured sessions where parties collaboratively resolve disputes and improve future interactions."
+    },
+    "6": { "title": "Label", "description": "Additional conflict management approach." },
+    "7": { "title": "Label", "description": "Additional conflict management approach." },
+    "8": { "title": "Label", "description": "Additional conflict management approach." }
+  }
+}
diff --git a/messages/en/create/footer.json b/messages/en/create/footer.json
index 1708b87..24d4b23 100644
--- a/messages/en/create/footer.json
+++ b/messages/en/create/footer.json
@@ -11,5 +11,9 @@
   "confirmMembers": "Confirm members",
   "finalizeCommunityRule": "Finalize CommunityRule",
   "confirmStakeholders": "Confirm Stakeholders",
-  "confirmCoreValues": "Confirm values"
+  "confirmCoreValues": "Confirm values",
+  "confirmCommunication": "Confirm",
+  "confirmMembership": "Confirm",
+  "confirmRightRail": "Confirm",
+  "confirmConflictManagement": "Confirm"
 }
diff --git a/messages/en/create/membership.json b/messages/en/create/membership.json
new file mode 100644
index 0000000..66b3959
--- /dev/null
+++ b/messages/en/create/membership.json
@@ -0,0 +1,76 @@
+{
+  "_comment": "Create flow — membership / how members join (compact card stack)",
+  "page": {
+    "compactTitle": "How do new members join\nand get connected?",
+    "compactDescriptionBefore": "You can select multiple methods for different needs or ",
+    "compactDescriptionLinkLabel": "add",
+    "compactDescriptionAfter": " your own",
+    "expandedTitle": "How should new members join and get connected?",
+    "expandedDescription": "You can select multiple methods for different needs or add your own",
+    "seeAllLink": "See all membership approaches"
+  },
+  "confirmModal": {
+    "title": "Confirm selection",
+    "description": "Confirm to select this option.",
+    "nextButtonText": "Confirm"
+  },
+  "cards": {
+    "open-access": {
+      "label": "Open Access",
+      "supportText": "Maximum inclusion. Anyone can join immediately by simply showing up."
+    },
+    "orientation-required": {
+      "label": "Orientation Required",
+      "supportText": "Newcomers must attend a training or orientation session."
+    },
+    "invitation-only": {
+      "label": "Invitation Only",
+      "supportText": "New members can only join if they are 'vouched for' by existing members."
+    },
+    "contribution-based": {
+      "label": "Contribution Based",
+      "supportText": "Membership is reserved for people contributing their labor."
+    },
+    "mentorship": {
+      "label": "Mentorship",
+      "supportText": "New members are paired with 'Mentors' to guide them through a probationary period."
+    },
+    "6": {
+      "label": "Label",
+      "supportText": "Additional membership approach."
+    },
+    "7": {
+      "label": "Label",
+      "supportText": "Additional membership approach."
+    },
+    "8": {
+      "label": "Label",
+      "supportText": "Additional membership approach."
+    }
+  },
+  "modals": {
+    "open-access": {
+      "title": "Open Access",
+      "description": "Maximum inclusion. Anyone can join immediately by simply showing up."
+    },
+    "orientation-required": {
+      "title": "Orientation Required",
+      "description": "Newcomers must attend a training or orientation session."
+    },
+    "invitation-only": {
+      "title": "Invitation Only",
+      "description": "New members can only join if they are 'vouched for' by existing members."
+    },
+    "contribution-based": {
+      "title": "Contribution Based",
+      "description": "Membership is reserved for people contributing their labor."
+    },
+    "mentorship": {
+      "title": "Mentorship",
+      "description": "New members are paired with 'Mentors' to guide them through a probationary period."
+    },
+    "6": { "title": "Label", "description": "Additional membership approach." },
+    "7": { "title": "Label", "description": "Additional membership approach." },
+    "8": { "title": "Label", "description": "Additional membership approach." }
+  }
+}
diff --git a/messages/en/create/rightRail.json b/messages/en/create/rightRail.json
index a9a1753..4855828 100644
--- a/messages/en/create/rightRail.json
+++ b/messages/en/create/rightRail.json
@@ -1,9 +1,10 @@
 {
+  "_comment": "Create flow — right rail / decision approaches (Figma Flow — Right Rail `20523:23509`)",
   "sidebar": {
-    "title": "How should conflicts be resolved?",
-    "descriptionBefore": "You can also combine or ",
-    "descriptionLink": "add",
-    "descriptionAfter": " new approaches to the list"
+    "title": "How should this community make difficult decisions?",
+    "descriptionBefore": "Select as many as you need to describe how your group makes decisions. You can also ",
+    "descriptionLinkLabel": "add",
+    "descriptionAfter": " new decision making approaches or interact with the categories below to filter."
   },
   "messageBox": {
     "title": "Consider defining approaches to steward key resources:",
@@ -16,99 +17,97 @@
   },
   "cardStack": {
     "toggleSeeAll": "See all decision approaches",
-    "toggleShowLess": "Show less",
-    "emptyTitle": "",
-    "emptyDescription": ""
+    "toggleShowLess": "Show less"
   },
   "cards": [
     {
-      "id": "mediation",
-      "label": "Mediation",
-      "supportText": "Collaborative work to reach a resolution that all parties can agree upon.",
+      "id": "lazy-consensus",
+      "label": "Lazy Consensus",
+      "supportText": "A decision is assumed approved unless objections are raised within a specified timeframe.",
       "recommended": true
     },
     {
-      "id": "facilitation",
-      "label": "Facilitated dialogue",
-      "supportText": "Structured sessions where parties collaboratively resolve disputes.",
+      "id": "do-ocracy",
+      "label": "Do-ocracy",
+      "supportText": "Decisions are made by those who take initiative and carry out the work.",
       "recommended": true
     },
     {
-      "id": "invite-only",
-      "label": "Invite-only",
-      "supportText": "Private discussions with selected participants.",
+      "id": "consensus-decision-making",
+      "label": "Consensus Decision-Making",
+      "supportText": "All members must agree. Best for important decisions in small groups. Does not work well for low stakes decisions.",
       "recommended": true
     },
     {
-      "id": "arbitration",
-      "label": "Arbitration",
-      "supportText": "Arbitrators are chosen specifically for a particular case.",
+      "id": "rotational-leadership",
+      "label": "Rotational Leadership",
+      "supportText": "Decision-making responsibilities rotate among members.",
       "recommended": true
     },
     {
-      "id": "direct-dialogue",
-      "label": "Direct dialogue",
-      "supportText": "Encouraging direct, respectful dialogue between those involved.",
+      "id": "modified-consensus",
+      "label": "Modified Consensus",
+      "supportText": "Attempts to reach full agreement first, but falls back to voting if consensus isn’t possible.",
       "recommended": true
     },
     {
       "id": "label-1",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     },
     {
       "id": "label-2",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     },
     {
       "id": "label-3",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     },
     {
       "id": "label-4",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     },
     {
       "id": "label-5",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     },
     {
       "id": "label-6",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     },
     {
       "id": "label-7",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     },
     {
       "id": "label-8",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     },
     {
       "id": "label-9",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     },
     {
       "id": "label-10",
       "label": "Label",
-      "supportText": "",
+      "supportText": "Additional decision approach.",
       "recommended": false
     }
   ]
diff --git a/messages/en/index.ts b/messages/en/index.ts
index 57455fe..32d362d 100644
--- a/messages/en/index.ts
+++ b/messages/en/index.ts
@@ -19,6 +19,8 @@ import profile from "./pages/profile.json";
 import navigation from "./navigation.json";
 import metadata from "./metadata.json";
 import communication from "./create/communication.json";
+import createMembership from "./create/membership.json";
+import createConflictManagement from "./create/conflictManagement.json";
 import createInformational from "./create/informational.json";
 import createCommunityName from "./create/communityName.json";
 import createCommunitySize from "./create/communitySize.json";
@@ -61,6 +63,8 @@ export default {
   },
   create: {
     communication,
+    membership: createMembership,
+    conflictManagement: createConflictManagement,
     informational: createInformational,
     communityName: createCommunityName,
     communitySize: createCommunitySize,
diff --git a/next.config.mjs b/next.config.mjs
index 8129e98..afa0af8 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -97,6 +97,15 @@ const nextConfig = {
 
     return config;
   },
+  async redirects() {
+    return [
+      {
+        source: "/create/right-rail",
+        destination: "/create/decision-approaches",
+        permanent: true,
+      },
+    ];
+  },
 };
 
 const withMDX = createMDX({
diff --git a/stories/pages/CardsPage.stories.js b/stories/pages/CommunicationMethodsPage.stories.js
similarity index 52%
rename from stories/pages/CardsPage.stories.js
rename to stories/pages/CommunicationMethodsPage.stories.js
index b9260a4..b85396c 100644
--- a/stories/pages/CardsPage.stories.js
+++ b/stories/pages/CommunicationMethodsPage.stories.js
@@ -1,20 +1,20 @@
-import { CardsScreen } from "../../app/create/screens/card/CardsScreen";
+import { CommunicationMethodsScreen } from "../../app/create/screens/card/CommunicationMethodsScreen";
 
 export default {
-  title: "Pages/Create Flow/Cards",
-  component: CardsScreen,
+  title: "Pages/Create Flow/Communication methods",
+  component: CommunicationMethodsScreen,
   parameters: {
     layout: "fullscreen",
     docs: {
       description: {
         component:
-          "Communication / card selection step with modals and responsive layout.",
+          "Communication methods step (`/create/communication-methods`): card stack, modals, responsive layout.",
       },
     },
   },
   decorators: [
     (Story) => (
-      <div className="min-h-screen bg-black flex items-center justify-center">
+      <div className="flex min-h-screen items-center justify-center bg-black">
         <Story />
       </div>
     ),
diff --git a/stories/progress/ProportionBar.stories.js b/stories/progress/ProportionBar.stories.js
index 7b243af..9907056 100644
--- a/stories/progress/ProportionBar.stories.js
+++ b/stories/progress/ProportionBar.stories.js
@@ -31,6 +31,7 @@ export default {
         "2-0",
         "2-1",
         "2-2",
+        "2-3",
         "3-0",
         "3-1",
         "3-2",
@@ -86,6 +87,7 @@ export const AllStates = {
       <ProportionBar {..._args} progress="2-0" />
       <ProportionBar {..._args} progress="2-1" />
       <ProportionBar {..._args} progress="2-2" />
+      <ProportionBar {..._args} progress="2-3" />
       <ProportionBar {..._args} progress="3-0" />
       <ProportionBar {..._args} progress="3-1" />
       <ProportionBar {..._args} progress="3-2" />
diff --git a/tests/components/ProportionBar.test.tsx b/tests/components/ProportionBar.test.tsx
index 182699b..abd28bb 100644
--- a/tests/components/ProportionBar.test.tsx
+++ b/tests/components/ProportionBar.test.tsx
@@ -40,8 +40,8 @@ describe("ProportionBar (behavioral tests)", () => {
   it("renders proportion bar with correct progress value", () => {
     render(<ProportionBar progress="2-1" />);
     const progressbar = screen.getByRole("progressbar");
-    // 2-1: First section full (1) + second section 1/3 filled = 1 + 1/3 ≈ 1.333
-    expect(progressbar).toHaveAttribute("aria-valuenow", "1.3333333333333333");
+    // 2-1 (Figma `17861:33241`): first section full + second section 1/4 filled = 1.25.
+    expect(progressbar).toHaveAttribute("aria-valuenow", "1.25");
     expect(progressbar).toHaveAttribute("aria-valuemin", "0");
     expect(progressbar).toHaveAttribute("aria-valuemax", "3");
   });
@@ -63,7 +63,8 @@ describe("ProportionBar (behavioral tests)", () => {
       { progress: "1-0" as const, expected: 1 / 6 }, // First section 1/6 filled
       { progress: "1-5" as const, expected: 1 }, // First section 6/6 filled (fully filled)
       { progress: "2-0" as const, expected: 1 }, // First section full, second empty
-      { progress: "2-2" as const, expected: 1 + 2 / 3 }, // First section full, second section 2/3 filled
+      { progress: "2-2" as const, expected: 1 + 1 / 2 }, // 1 + 1/2 per Figma `18861:15250`
+      { progress: "2-3" as const, expected: 1 + 3 / 4 }, // 1 + 3/4 per Figma `21434:17632`
       { progress: "3-0" as const, expected: 2 }, // First two sections full, third empty
       { progress: "3-2" as const, expected: 2 + 2 / 3 }, // First two sections full, third section 2/3 filled
     ];
diff --git a/tests/pages/cards.test.jsx b/tests/pages/communication-methods.test.jsx
similarity index 76%
rename from tests/pages/cards.test.jsx
rename to tests/pages/communication-methods.test.jsx
index ef0efc9..7c8441e 100644
--- a/tests/pages/cards.test.jsx
+++ b/tests/pages/communication-methods.test.jsx
@@ -6,16 +6,16 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
-import { CardsScreen } from "../../app/create/screens/card/CardsScreen";
+import { CommunicationMethodsScreen } from "../../app/create/screens/card/CommunicationMethodsScreen";
 
 afterEach(() => {
   cleanup();
 });
 
-describe("Create flow cards page", () => {
+describe("Create flow communication-methods page", () => {
   test("clicking a card opens the Create modal", async () => {
     const user = userEvent.setup();
-    render(<CardsScreen />);
+    render(<CommunicationMethodsScreen />);
 
     const signalCards = screen.getAllByRole("button", {
       name: /Signal: Encrypted messaging/,
@@ -29,7 +29,7 @@ describe("Create flow cards page", () => {
   });
 
   test("renders without error", () => {
-    render(<CardsScreen />);
+    render(<CommunicationMethodsScreen />);
 
     expect(
       screen.getByText(
@@ -39,13 +39,12 @@ describe("Create flow cards page", () => {
   });
 
   test("renders HeaderLockup and CardStack content", () => {
-    render(<CardsScreen />);
+    render(<CommunicationMethodsScreen />);
 
     expect(
-      screen.getByText(
-        "You can select multiple methods for different needs or add your own",
-      ),
+      screen.getByText(/You can select multiple methods for different needs or/),
     ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "add" })).toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "See all communication approaches" }),
     ).toBeInTheDocument();
@@ -53,7 +52,7 @@ describe("Create flow cards page", () => {
 
   test("toggle expands and shows Show less", async () => {
     const user = userEvent.setup();
-    render(<CardsScreen />);
+    render(<CommunicationMethodsScreen />);
 
     const toggle = screen.getByRole("button", {
       name: "See all communication approaches",
diff --git a/tests/pages/right-rail.test.jsx b/tests/pages/right-rail.test.jsx
index 2b1386f..472df10 100644
--- a/tests/pages/right-rail.test.jsx
+++ b/tests/pages/right-rail.test.jsx
@@ -18,7 +18,7 @@ describe("Create flow right-rail page", () => {
 
     expect(
       screen.getByRole("heading", {
-        name: "How should conflicts be resolved?",
+        name: "How should this community make difficult decisions?",
       }),
     ).toBeInTheDocument();
   });
@@ -30,9 +30,9 @@ describe("Create flow right-rail page", () => {
       if (element?.tagName !== "P") return false;
       const text = element.textContent ?? "";
       return (
-        text.includes("You can also combine or") &&
+        text.includes("Select as many as you need") &&
         text.includes("add") &&
-        text.includes("new approaches to the list")
+        text.includes("new decision making approaches")
       );
     });
     expect(description).toBeInTheDocument();
@@ -77,17 +77,17 @@ describe("Create flow right-rail page", () => {
 
     expect(
       screen.getByRole("button", {
-        name: /Mediation: Collaborative work to reach a resolution/,
+        name: /Lazy Consensus: A decision is assumed approved/,
       }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole("button", {
-        name: /Facilitated dialogue: Structured sessions/,
+        name: /Do-ocracy: Decisions are made by those who take initiative/,
       }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole("button", {
-        name: /Invite-only: Private discussions with selected participants/,
+        name: /Consensus Decision-Making: All members must agree/,
       }),
     ).toBeInTheDocument();
   });
@@ -123,10 +123,10 @@ describe("Create flow right-rail page", () => {
     const user = userEvent.setup();
     render(<RightRailScreen />);
 
-    const mediationCard = screen.getByRole("button", {
-      name: /Mediation: Collaborative work to reach a resolution/,
+    const card = screen.getByRole("button", {
+      name: /Lazy Consensus: A decision is assumed approved/,
     });
-    await user.click(mediationCard);
+    await user.click(card);
 
     expect(screen.getByText("SELECTED")).toBeInTheDocument();
   });
diff --git a/tests/unit/createFlowProportionProgress.test.ts b/tests/unit/createFlowProportionProgress.test.ts
index aa0534c..2733a50 100644
--- a/tests/unit/createFlowProportionProgress.test.ts
+++ b/tests/unit/createFlowProportionProgress.test.ts
@@ -26,4 +26,28 @@ describe("getProportionBarProgressForCreateFlowStep", () => {
       "2-0",
     );
   });
+
+  it("uses 2-1 on communication-methods", () => {
+    expect(
+      getProportionBarProgressForCreateFlowStep("communication-methods"),
+    ).toBe("2-1");
+  });
+
+  it("uses 2-2 on membership-methods", () => {
+    expect(
+      getProportionBarProgressForCreateFlowStep("membership-methods"),
+    ).toBe("2-2");
+  });
+
+  it("uses 2-3 on decision-approaches (Figma Flow — Right Rail)", () => {
+    expect(
+      getProportionBarProgressForCreateFlowStep("decision-approaches"),
+    ).toBe("2-3");
+  });
+
+  it("uses 3-0 on conflict-management (start of Review segment)", () => {
+    expect(
+      getProportionBarProgressForCreateFlowStep("conflict-management"),
+    ).toBe("3-0");
+  });
 });
diff --git a/tests/unit/createFlowValidation.test.ts b/tests/unit/createFlowValidation.test.ts
index 363ec0c..45fe037 100644
--- a/tests/unit/createFlowValidation.test.ts
+++ b/tests/unit/createFlowValidation.test.ts
@@ -56,7 +56,7 @@ describe("createFlowStateSchema", () => {
   it("accepts known fields and passthrough keys", () => {
     const r = createFlowStateSchema.safeParse({
       title: "My rule",
-      currentStep: "cards",
+      currentStep: "communication-methods",
       customField: { nested: [1, 2] },
     });
     expect(r.success).toBe(true);
diff --git a/tests/unit/flowSteps.test.ts b/tests/unit/flowSteps.test.ts
index cfc0cec..f4d3b49 100644
--- a/tests/unit/flowSteps.test.ts
+++ b/tests/unit/flowSteps.test.ts
@@ -16,7 +16,10 @@ describe("flowSteps", () => {
   });
 
   it("getNextStep returns next step in order", () => {
-    expect(getNextStep("right-rail")).toBe("confirm-stakeholders");
+    expect(getNextStep("communication-methods")).toBe("membership-methods");
+    expect(getNextStep("membership-methods")).toBe("decision-approaches");
+    expect(getNextStep("decision-approaches")).toBe("conflict-management");
+    expect(getNextStep("conflict-management")).toBe("confirm-stakeholders");
     expect(getNextStep("confirm-stakeholders")).toBe("final-review");
   });
 
@@ -67,6 +70,6 @@ describe("flowSteps", () => {
     const opts = { skipCommunitySave: true } as const;
     expect(getNextStep("community-size", opts)).toBe("community-upload");
     expect(getNextStep("review", opts)).toBe("core-values");
-    expect(getPreviousStep("cards", opts)).toBe("core-values");
+    expect(getPreviousStep("communication-methods", opts)).toBe("core-values");
   });
 });
diff --git a/tests/unit/migrateLegacyCreateFlowState.test.ts b/tests/unit/migrateLegacyCreateFlowState.test.ts
index acd2fae..a06b829 100644
--- a/tests/unit/migrateLegacyCreateFlowState.test.ts
+++ b/tests/unit/migrateLegacyCreateFlowState.test.ts
@@ -2,27 +2,12 @@ import { describe, it, expect } from "vitest";
 import { migrateLegacyCreateFlowState } from "../../lib/create/migrateLegacyCreateFlowState";
 
 describe("migrateLegacyCreateFlowState", () => {
-  it("maps communityReflection to communitySaveEmail when save email empty", () => {
+  it("passes through object payloads", () => {
     const out = migrateLegacyCreateFlowState({
       title: "T",
-      communityReflection: "old@example.com",
-    });
-    expect(out.communitySaveEmail).toBe("old@example.com");
-    expect("communityReflection" in out).toBe(false);
-  });
-
-  it("does not overwrite existing communitySaveEmail", () => {
-    const out = migrateLegacyCreateFlowState({
-      communityReflection: "old@example.com",
-      communitySaveEmail: "kept@example.com",
-    });
-    expect(out.communitySaveEmail).toBe("kept@example.com");
-  });
-
-  it("rewrites currentStep slug", () => {
-    const out = migrateLegacyCreateFlowState({
-      currentStep: "community-reflection",
+      currentStep: "community-save",
     });
+    expect(out.title).toBe("T");
     expect(out.currentStep).toBe("community-save");
   });
 
@@ -30,4 +15,13 @@ describe("migrateLegacyCreateFlowState", () => {
     expect(migrateLegacyCreateFlowState(null)).toEqual({});
     expect(migrateLegacyCreateFlowState(undefined)).toEqual({});
   });
+
+  it("renames legacy right-rail step to decision-approaches", () => {
+    const out = migrateLegacyCreateFlowState({
+      currentStep: "right-rail",
+      title: "T",
+    });
+    expect(out.currentStep).toBe("decision-approaches");
+    expect(out.title).toBe("T");
+  });
 });

From 4854c49c4a81b705deaf2dce9134724def559824 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Fri, 17 Apr 2026 23:45:29 -0600
Subject: [PATCH 06/15] Implement modals across create flow

---
 app/components/buttons/InlineTextButton.tsx   |  59 ++
 app/components/controls/Chip/Chip.types.ts    |   7 +
 app/components/controls/Chip/Chip.view.tsx    |  13 +-
 .../controls/Incrementer/Incrementer.tsx      | 143 ++++
 .../controls/Incrementer/IncrementerBlock.tsx |  72 ++
 app/components/controls/Incrementer/index.tsx |   5 +
 .../components/ApplicableScopeField.tsx       | 142 ++++
 app/create/components/ModalTextAreaField.tsx  |  60 ++
 app/create/screens/CreateFlowScreenView.tsx   |   4 +-
 .../card/CommunicationMethodsScreen.tsx       | 143 ++--
 .../screens/card/ConflictManagementScreen.tsx | 169 +++-
 .../screens/card/MembershipMethodsScreen.tsx  | 138 +++-
 .../right-rail/DecisionApproachesScreen.tsx   | 320 ++++++++
 .../screens/right-rail/RightRailScreen.tsx    | 141 ----
 docs/template-recommendation-matrix.md        | 728 ++++++++++++++++++
 messages/en/create/communication.json         |  36 +
 messages/en/create/conflictManagement.json    |  83 +-
 messages/en/create/membership.json            |  73 +-
 messages/en/create/rightRail.json             |  33 +
 ...s.js => DecisionApproachesPage.stories.js} |   6 +-
 ....test.jsx => decision-approaches.test.jsx} |  32 +-
 21 files changed, 2089 insertions(+), 318 deletions(-)
 create mode 100644 app/components/buttons/InlineTextButton.tsx
 create mode 100644 app/components/controls/Incrementer/Incrementer.tsx
 create mode 100644 app/components/controls/Incrementer/IncrementerBlock.tsx
 create mode 100644 app/components/controls/Incrementer/index.tsx
 create mode 100644 app/create/components/ApplicableScopeField.tsx
 create mode 100644 app/create/components/ModalTextAreaField.tsx
 create mode 100644 app/create/screens/right-rail/DecisionApproachesScreen.tsx
 delete mode 100644 app/create/screens/right-rail/RightRailScreen.tsx
 create mode 100644 docs/template-recommendation-matrix.md
 rename stories/pages/{RightRailPage.stories.js => DecisionApproachesPage.stories.js} (75%)
 rename tests/pages/{right-rail.test.jsx => decision-approaches.test.jsx} (80%)

diff --git a/app/components/buttons/InlineTextButton.tsx b/app/components/buttons/InlineTextButton.tsx
new file mode 100644
index 0000000..c9a1364
--- /dev/null
+++ b/app/components/buttons/InlineTextButton.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { memo } from "react";
+
+export interface InlineTextButtonProps {
+  /**
+   * Button label content.
+   */
+  children: React.ReactNode;
+  /**
+   * Click handler.
+   */
+  onClick?: (_event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Extra class names. Use `className` to override typography/color when the
+   * button must inherit parent font-size/leading (e.g. mid-paragraph usage).
+   */
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+/**
+ * Small text-styled button for in-paragraph "link"-like controls (expand,
+ * add, etc.). The Figma "link" treatment is a tertiary-colored underline with
+ * a 3px underline-offset and inherited typography, which sits between a real
+ * anchor and a styled `Button`.
+ *
+ * Use this anywhere a `<button>` is needed inline with body copy — do not use
+ * for primary/secondary actions (reach for `Button` instead).
+ */
+function InlineTextButtonComponent({
+  children,
+  onClick,
+  className = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: InlineTextButtonProps) {
+  const baseClasses =
+    "cursor-pointer border-none bg-transparent p-0 font-inter font-normal text-[length:inherit] leading-[inherit] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60";
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      className={`${baseClasses} ${className}`.trim()}
+    >
+      {children}
+    </button>
+  );
+}
+
+InlineTextButtonComponent.displayName = "InlineTextButton";
+
+export default memo(InlineTextButtonComponent);
diff --git a/app/components/controls/Chip/Chip.types.ts b/app/components/controls/Chip/Chip.types.ts
index dab6332..7b91bf9 100644
--- a/app/components/controls/Chip/Chip.types.ts
+++ b/app/components/controls/Chip/Chip.types.ts
@@ -33,6 +33,13 @@ export interface ChipProps {
    */
   size?: ChipSizeValue;
   className?: string;
+  /**
+   * Whether the chip should be non-interactive. Defaults to `true` when
+   * `state === "disabled"` to preserve historical behavior. Pass
+   * `disabled={false}` alongside `state="Disabled"` to render the dimmed
+   * "disabled" visual while keeping the chip clickable — useful for toggle
+   * groups where the unselected state is the disabled Figma visual.
+   */
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**
diff --git a/app/components/controls/Chip/Chip.view.tsx b/app/components/controls/Chip/Chip.view.tsx
index a393411..6b11c84 100644
--- a/app/components/controls/Chip/Chip.view.tsx
+++ b/app/components/controls/Chip/Chip.view.tsx
@@ -20,7 +20,10 @@ function ChipView({
   inputRef,
   ariaLabel,
 }: ChipViewProps) {
-  const isDisabled = disabled || state === "disabled";
+  // The container is the source of truth for `disabled`. This allows
+  // `state="disabled"` to be used purely as a visual (for toggle-group chips
+  // that look dimmed while remaining clickable) by passing `disabled={false}`.
+  const isDisabled = disabled ?? false;
   const isSelected = state === "selected";
   const isCustom = state === "custom";
 
@@ -57,11 +60,13 @@ function ChipView({
     } else if (state === "disabled") {
       background = "bg-[var(--color-surface-default-secondary,#141414)]"; // dark background
       border = "border-none";
-      textColor = "text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
+      // Per Figma (node 19839:13842) disabled uses invert-tertiary for the
+      // strongly dimmed look, not default-tertiary.
+      textColor = "text-[color:var(--color-content-invert-tertiary,#2d2d2d)]";
     } else if (isSelected) {
-      background = "bg-[var(--color-surface-inverse-brandaccent,#fdfaa8)]"; // yellow selected
+      background = "bg-[var(--color-surface-invert-brand-primary,#fefcc9)]"; // yellow selected
       border = `${borderWidth} border-[var(--color-border-default-brand-primary,#fdfaa8)]`;
-      textColor = "text-[color:var(--color-content-inverse-primary,black)]";
+      textColor = "text-[color:var(--color-content-invert-primary,black)]";
     } else {
       // Unselected default
       background =
diff --git a/app/components/controls/Incrementer/Incrementer.tsx b/app/components/controls/Incrementer/Incrementer.tsx
new file mode 100644
index 0000000..8549036
--- /dev/null
+++ b/app/components/controls/Incrementer/Incrementer.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { memo } from "react";
+
+export interface IncrementerProps {
+  value: number;
+  /** Minimum value (default `-Infinity`). */
+  min?: number;
+  /** Maximum value (default `Infinity`). */
+  max?: number;
+  /** Step size applied to +/- actions (default `1`). */
+  step?: number;
+  onChange: (_next: number) => void;
+  /**
+   * Optional formatter for the displayed value. Receives the raw number and
+   * should return the rendered content. Default: `String(value)`.
+   */
+  formatValue?: (_value: number) => React.ReactNode;
+  /**
+   * When true, the whole incrementer is non-interactive and the value renders
+   * in the "inactive" (tertiary) color per Figma.
+   */
+  disabled?: boolean;
+  /** Accessible label for the decrement button (default "Decrease"). */
+  decrementAriaLabel?: string;
+  /** Accessible label for the increment button (default "Increase"). */
+  incrementAriaLabel?: string;
+  className?: string;
+}
+
+const STEP_BUTTON_CLASSES =
+  "bg-[var(--color-surface-default-secondary,#141414)] text-[var(--color-content-default-primary,#fff)] inline-flex shrink-0 items-center justify-center overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-200,8px)] py-[var(--measures-spacing-150,6px)] transition-[background,color,transform] duration-200 ease-in-out hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary,#fff)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary,#000)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100";
+
+function MinusIcon() {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 24 24"
+      className="block size-[12px]"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 12h14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function PlusIcon() {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 24 24"
+      className="block size-[12px]"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 5v14M5 12h14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Figma: "Control / Incrementer" (`17857:30943`). A compact `[ - value + ]`
+ * row used for numeric step inputs (e.g. a percentage setting).
+ *
+ * For a labelled variant that matches "Control / Incrementer Block"
+ * (`19883:13283`), compose with {@link IncrementerBlock} instead.
+ */
+function IncrementerComponent({
+  value,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  onChange,
+  formatValue,
+  disabled = false,
+  decrementAriaLabel = "Decrease",
+  incrementAriaLabel = "Increase",
+  className = "",
+}: IncrementerProps) {
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const atMin = clampedValue <= min;
+  const atMax = clampedValue >= max;
+
+  const decrement = () => {
+    if (disabled || atMin) return;
+    onChange(Math.max(min, clampedValue - step));
+  };
+  const increment = () => {
+    if (disabled || atMax) return;
+    onChange(Math.min(max, clampedValue + step));
+  };
+
+  const valueColor = disabled
+    ? "text-[color:var(--color-content-default-tertiary,#b4b4b4)]"
+    : "text-[color:var(--color-content-default-primary,#fff)]";
+
+  return (
+    <div
+      className={`inline-flex items-center gap-[16px] ${className}`.trim()}
+      data-figma-node="17857:30943"
+    >
+      <button
+        type="button"
+        onClick={decrement}
+        disabled={disabled || atMin}
+        aria-label={decrementAriaLabel}
+        className={STEP_BUTTON_CLASSES}
+      >
+        <MinusIcon />
+      </button>
+      <span
+        aria-live="polite"
+        className={`shrink-0 whitespace-nowrap font-inter text-[length:var(--sizing-350,14px)] font-medium leading-[18px] ${valueColor}`}
+      >
+        {formatValue ? formatValue(clampedValue) : clampedValue}
+      </span>
+      <button
+        type="button"
+        onClick={increment}
+        disabled={disabled || atMax}
+        aria-label={incrementAriaLabel}
+        className={STEP_BUTTON_CLASSES}
+      >
+        <PlusIcon />
+      </button>
+    </div>
+  );
+}
+
+IncrementerComponent.displayName = "Incrementer";
+
+export default memo(IncrementerComponent);
diff --git a/app/components/controls/Incrementer/IncrementerBlock.tsx b/app/components/controls/Incrementer/IncrementerBlock.tsx
new file mode 100644
index 0000000..5cd261b
--- /dev/null
+++ b/app/components/controls/Incrementer/IncrementerBlock.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { memo } from "react";
+import Incrementer, { type IncrementerProps } from "./Incrementer";
+import InputLabel from "../../utility/InputLabel";
+import type {
+  InputLabelPaletteValue,
+  InputLabelSizeValue,
+} from "../../utility/InputLabel/InputLabel.types";
+
+export interface IncrementerBlockProps extends IncrementerProps {
+  /** Label text displayed above the incrementer. */
+  label: string;
+  /** Show the help "?" icon next to the label. Defaults to `true`. */
+  helpIcon?: boolean;
+  /**
+   * Helper text shown to the right of the label. Pass a string or `true` to
+   * render the default "Optional text".
+   */
+  helperText?: boolean | string;
+  /** Show an asterisk indicating a required field. */
+  asterisk?: boolean;
+  /**
+   * Size of the label (`"s"` or `"m"`). Defaults to `"s"` to match the Figma
+   * "Incrementer Block" spec.
+   */
+  labelSize?: InputLabelSizeValue;
+  /** Palette. Defaults to `"default"`. */
+  palette?: InputLabelPaletteValue;
+  /**
+   * Class applied to the root `<div>` wrapping the label + incrementer. Use
+   * this to control the block's layout width (e.g. `w-full`).
+   */
+  blockClassName?: string;
+}
+
+/**
+ * Figma: "Control / Incrementer Block" (`19883:13283`). An `InputLabel` plus
+ * an {@link Incrementer} row, stacked with a 12px gap.
+ */
+function IncrementerBlockComponent({
+  label,
+  helpIcon = true,
+  helperText,
+  asterisk,
+  labelSize = "s",
+  palette = "default",
+  blockClassName = "",
+  className,
+  ...incrementerProps
+}: IncrementerBlockProps) {
+  return (
+    <div
+      className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] py-[8px] ${blockClassName}`.trim()}
+      data-figma-node="19883:13283"
+    >
+      <InputLabel
+        label={label}
+        helpIcon={helpIcon}
+        helperText={helperText}
+        asterisk={asterisk}
+        size={labelSize}
+        palette={palette}
+      />
+      <Incrementer {...incrementerProps} className={className} />
+    </div>
+  );
+}
+
+IncrementerBlockComponent.displayName = "IncrementerBlock";
+
+export default memo(IncrementerBlockComponent);
diff --git a/app/components/controls/Incrementer/index.tsx b/app/components/controls/Incrementer/index.tsx
new file mode 100644
index 0000000..c454d77
--- /dev/null
+++ b/app/components/controls/Incrementer/index.tsx
@@ -0,0 +1,5 @@
+export { default } from "./Incrementer";
+export { default as Incrementer } from "./Incrementer";
+export { default as IncrementerBlock } from "./IncrementerBlock";
+export type { IncrementerProps } from "./Incrementer";
+export type { IncrementerBlockProps } from "./IncrementerBlock";
diff --git a/app/create/components/ApplicableScopeField.tsx b/app/create/components/ApplicableScopeField.tsx
new file mode 100644
index 0000000..730bd93
--- /dev/null
+++ b/app/create/components/ApplicableScopeField.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+/**
+ * Shared "Applicable Scope" field used by the `decision-approaches` and
+ * `conflict-management` create flow modals. Pairs an `InputLabel` with a
+ * horizontally-wrapping list of toggle-chips plus an inline "+ Add" affordance
+ * that reveals a pill text input for creating new scope values.
+ */
+
+import { memo, useState } from "react";
+import Chip from "../../components/controls/Chip";
+import InputLabel from "../../components/utility/InputLabel";
+
+export interface ApplicableScopeFieldProps {
+  /** Label rendered above the capsule row. */
+  label: string;
+  /** Text for the "+ Add …" affordance (e.g. "Add Applicable Scope"). */
+  addLabel: string;
+  /**
+   * The full list of chip values shown to the user. Each value is a unique
+   * string (chip label).
+   */
+  scopes: string[];
+  /** Values currently toggled on (rendered in the Chip "Selected" state). */
+  selectedScopes: string[];
+  /** Fired when a chip is clicked; caller toggles inclusion in `selectedScopes`. */
+  onToggleScope: (_scope: string) => void;
+  /**
+   * Fired when the user submits a new scope via the inline input. Duplicate
+   * values (already in `scopes`) are filtered out before the callback fires.
+   */
+  onAddScope: (_scope: string) => void;
+  /**
+   * Optional placeholder for the inline input. Defaults to `addLabel`.
+   */
+  inputPlaceholder?: string;
+  className?: string;
+}
+
+function ApplicableScopeFieldComponent({
+  label,
+  addLabel,
+  scopes,
+  selectedScopes,
+  onToggleScope,
+  onAddScope,
+  inputPlaceholder,
+  className = "",
+}: ApplicableScopeFieldProps) {
+  const [draft, setDraft] = useState("");
+  const [isAdding, setIsAdding] = useState(false);
+
+  const submitDraft = () => {
+    const trimmed = draft.trim();
+    if (!trimmed) {
+      setIsAdding(false);
+      setDraft("");
+      return;
+    }
+    if (!scopes.includes(trimmed)) {
+      onAddScope(trimmed);
+    }
+    setDraft("");
+    setIsAdding(false);
+  };
+
+  return (
+    <div className={`flex flex-col gap-2 ${className}`.trim()}>
+      <InputLabel label={label} helpIcon size="s" palette="default" />
+      <div className="flex flex-wrap items-center gap-2">
+        {scopes.map((scope) => {
+          const isSelected = selectedScopes.includes(scope);
+          return (
+            <Chip
+              key={scope}
+              label={scope}
+              state={isSelected ? "Selected" : "Disabled"}
+              palette="Default"
+              size="S"
+              disabled={false}
+              onClick={() => onToggleScope(scope)}
+              ariaLabel={`${isSelected ? "Deselect" : "Select"} ${scope}`}
+            />
+          );
+        })}
+        {isAdding ? (
+          <input
+            type="text"
+            autoFocus
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onBlur={submitDraft}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                submitDraft();
+              } else if (e.key === "Escape") {
+                setDraft("");
+                setIsAdding(false);
+              }
+            }}
+            placeholder={inputPlaceholder ?? addLabel}
+            aria-label={inputPlaceholder ?? addLabel}
+            className="h-[30px] rounded-[9999px] border border-[var(--color-border-default-tertiary)] bg-transparent px-3 font-inter text-[length:var(--sizing-300,12px)] font-medium leading-[14px] text-[color:var(--color-content-default-primary)] outline-none placeholder:text-[color:var(--color-content-default-tertiary)] focus-visible:border-[var(--color-border-default-brand-primary)]"
+          />
+        ) : (
+          <button
+            type="button"
+            onClick={() => setIsAdding(true)}
+            className="inline-flex items-center gap-[var(--measures-spacing-050,2px)] rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] font-inter text-[length:var(--sizing-300,12px)] font-medium leading-[14px] text-[color:var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+          >
+            <AddGlyph />
+            {addLabel}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function AddGlyph() {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 24 24"
+      className="block size-[14px]"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 5v14M5 12h14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+ApplicableScopeFieldComponent.displayName = "ApplicableScopeField";
+
+export default memo(ApplicableScopeFieldComponent);
diff --git a/app/create/components/ModalTextAreaField.tsx b/app/create/components/ModalTextAreaField.tsx
new file mode 100644
index 0000000..0b13c24
--- /dev/null
+++ b/app/create/components/ModalTextAreaField.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+/**
+ * Shared "labelled text area" field used by every create flow modal section.
+ * Pairs an `InputLabel` (with help icon) with a `TextArea` set to the embedded
+ * appearance — matching the Figma "Control / Text Area" pattern.
+ */
+
+import { memo } from "react";
+import TextArea from "../../components/controls/TextArea";
+import InputLabel from "../../components/utility/InputLabel";
+
+export interface ModalTextAreaFieldProps {
+  /** Label rendered above the text area. */
+  label: string;
+  /** Show the help "?" icon next to the label (default `true`). */
+  helpIcon?: boolean;
+  /** Current text value. */
+  value: string;
+  /** Fired on every change with the new value (no event). */
+  onChange: (_value: string) => void;
+  /** Optional rows for the underlying `<textarea>` (default 4). */
+  rows?: number;
+  /** Optional placeholder. */
+  placeholder?: string;
+  /** Disable the field. */
+  disabled?: boolean;
+  className?: string;
+}
+
+function ModalTextAreaFieldComponent({
+  label,
+  helpIcon = true,
+  value,
+  onChange,
+  rows = 4,
+  placeholder,
+  disabled = false,
+  className = "",
+}: ModalTextAreaFieldProps) {
+  return (
+    <div className={`flex flex-col gap-2 ${className}`.trim()}>
+      <InputLabel label={label} helpIcon={helpIcon} size="s" palette="default" />
+      <TextArea
+        formHeader={false}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        size="large"
+        rows={rows}
+        appearance="embedded"
+        placeholder={placeholder}
+        disabled={disabled}
+      />
+    </div>
+  );
+}
+
+ModalTextAreaFieldComponent.displayName = "ModalTextAreaField";
+
+export default memo(ModalTextAreaFieldComponent);
diff --git a/app/create/screens/CreateFlowScreenView.tsx b/app/create/screens/CreateFlowScreenView.tsx
index dabd61f..502af91 100644
--- a/app/create/screens/CreateFlowScreenView.tsx
+++ b/app/create/screens/CreateFlowScreenView.tsx
@@ -14,7 +14,7 @@ import { FinalReviewScreen } from "./review/FinalReviewScreen";
 import { CommunicationMethodsScreen } from "./card/CommunicationMethodsScreen";
 import { MembershipMethodsScreen } from "./card/MembershipMethodsScreen";
 import { ConflictManagementScreen } from "./card/ConflictManagementScreen";
-import { RightRailScreen } from "./right-rail/RightRailScreen";
+import { DecisionApproachesScreen } from "./right-rail/DecisionApproachesScreen";
 import { CompletedScreen } from "./completed/CompletedScreen";
 
 /**
@@ -76,7 +76,7 @@ export function CreateFlowScreenView({
     case "membership-methods":
       return <MembershipMethodsScreen />;
     case "decision-approaches":
-      return <RightRailScreen />;
+      return <DecisionApproachesScreen />;
     case "conflict-management":
       return <ConflictManagementScreen />;
     case "confirm-stakeholders":
diff --git a/app/create/screens/card/CommunicationMethodsScreen.tsx b/app/create/screens/card/CommunicationMethodsScreen.tsx
index 30ee75d..e8bb90f 100644
--- a/app/create/screens/card/CommunicationMethodsScreen.tsx
+++ b/app/create/screens/card/CommunicationMethodsScreen.tsx
@@ -16,23 +16,18 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../components/utility/CardStack";
 import Create from "../../../components/modals/Create";
-import TextArea from "../../../components/controls/TextArea";
+import InlineTextButton from "../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import ModalTextAreaField from "../../components/ModalTextAreaField";
 
 const IN_PERSON_CARD_ID = "in-person-meetings";
 const SIGNAL_CARD_ID = "signal";
 const VIDEO_MEETINGS_CARD_ID = "video-meetings";
 
-const ADD_PLATFORM_CARD_IDS = [
-  IN_PERSON_CARD_ID,
-  SIGNAL_CARD_ID,
-  VIDEO_MEETINGS_CARD_ID,
-] as const;
-
 const SECTION_FIELDS = [
   "corePrinciple",
   "logisticsAdmin",
@@ -50,40 +45,6 @@ const COMMUNICATION_CARD_ORDER = [
   "7",
 ] as const;
 
-function CreateModalSection({
-  title,
-  value: _value,
-  onChange,
-}: {
-  title: string;
-  value: string;
-  onChange: (_value: string) => void;
-}) {
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center gap-2">
-        <h3 className="text-sm font-semibold leading-tight text-[var(--color-content-default-primary)]">
-          {title}
-        </h3>
-        <span
-          className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
-          aria-hidden
-        >
-          ?
-        </span>
-      </div>
-      <TextArea
-        formHeader={false}
-        value={_value}
-        onChange={(e) => onChange(e.target.value)}
-        size="large"
-        rows={6}
-        appearance="embedded"
-      />
-    </div>
-  );
-}
-
 function AddPlatformModalContent({
   platformCardId,
 }: {
@@ -92,15 +53,15 @@ function AddPlatformModalContent({
   const { markCreateFlowInteraction } = useCreateFlow();
   const m = useMessages();
   const comm = m.create.communication;
-  const modal = comm.modals[platformCardId as keyof typeof comm.modals];
-  const defaults =
-    modal && "sections" in modal
-      ? modal.sections
-      : {
-          corePrinciple: "",
-          logisticsAdmin: "",
-          codeOfConduct: "",
-        };
+  const modal =
+    platformCardId in comm.modals
+      ? comm.modals[platformCardId as keyof typeof comm.modals]
+      : null;
+  const defaults = modal?.sections ?? {
+    corePrinciple: "",
+    logisticsAdmin: "",
+    codeOfConduct: "",
+  };
 
   const [sectionValues, setSectionValues] = useState<
     Record<SectionField, string>
@@ -118,14 +79,13 @@ function AddPlatformModalContent({
     [markCreateFlowInteraction],
   );
 
-  if (!modal || !("sections" in modal)) return null;
-
   return (
     <div className="flex flex-col gap-6">
       {SECTION_FIELDS.map((field) => (
-        <CreateModalSection
+        <ModalTextAreaField
           key={field}
-          title={comm.sectionHeadings[field]}
+          label={comm.sectionHeadings[field]}
+          rows={6}
           value={sectionValues[field]}
           onChange={(v) => updateSection(field, v)}
         />
@@ -134,13 +94,6 @@ function AddPlatformModalContent({
   );
 }
 
-function isAddPlatformCard(cardId: string | null): boolean {
-  return (
-    cardId !== null &&
-    (ADD_PLATFORM_CARD_IDS as readonly string[]).includes(cardId)
-  );
-}
-
 export function CommunicationMethodsScreen() {
   const m = useMessages();
   const comm = m.create.communication;
@@ -180,42 +133,55 @@ export function CommunicationMethodsScreen() {
   ) : (
     <>
       {comm.page.compactDescriptionBefore}
-      <button
-        type="button"
-        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+      <InlineTextButton
         onClick={() => {
           markCreateFlowInteraction();
           setExpanded(true);
         }}
       >
         {comm.page.compactDescriptionLinkLabel}
-      </button>
+      </InlineTextButton>
       {comm.page.compactDescriptionAfter}
     </>
   );
 
-  const modalConfig =
-    pendingCardId && pendingCardId in comm.modals
-      ? (() => {
-          const modal =
-            comm.modals[pendingCardId as keyof typeof comm.modals];
-          return {
-            title: modal.title,
-            description: modal.description,
-            nextButtonText: comm.addPlatform.nextButtonText,
-            showBackButton: false as const,
-            currentStep: undefined,
-            totalSteps: undefined,
-          };
-        })()
-      : {
-          title: comm.confirmModal.title,
-          description: comm.confirmModal.description,
-          nextButtonText: comm.confirmModal.nextButtonText,
-          showBackButton: false as const,
-          currentStep: undefined,
-          totalSteps: undefined,
-        };
+  const modalConfig = (() => {
+    if (!pendingCardId) {
+      return {
+        title: comm.confirmModal.title,
+        description: comm.confirmModal.description,
+        nextButtonText: comm.confirmModal.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    if (pendingCardId in comm.modals) {
+      const modal = comm.modals[pendingCardId as keyof typeof comm.modals];
+      return {
+        title: modal.title,
+        description: modal.description,
+        nextButtonText: comm.addPlatform.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    const cardRow =
+      pendingCardId in comm.cards
+        ? comm.cards[pendingCardId as keyof typeof comm.cards]
+        : null;
+    return {
+      title: cardRow?.label ?? comm.confirmModal.title,
+      description: cardRow?.supportText ?? comm.confirmModal.description,
+      nextButtonText: comm.addPlatform.nextButtonText,
+      showBackButton: false as const,
+      currentStep: undefined,
+      totalSteps: undefined,
+    };
+  })();
 
   const handleCardClick = useCallback(
     (id: string) => {
@@ -286,8 +252,9 @@ export function CommunicationMethodsScreen() {
         showBackButton={modalConfig.showBackButton}
         currentStep={modalConfig.currentStep}
         totalSteps={modalConfig.totalSteps}
+        backdropVariant="loginYellow"
       >
-        {isAddPlatformCard(pendingCardId) && pendingCardId ? (
+        {pendingCardId ? (
           <AddPlatformModalContent
             key={pendingCardId}
             platformCardId={pendingCardId}
diff --git a/app/create/screens/card/ConflictManagementScreen.tsx b/app/create/screens/card/ConflictManagementScreen.tsx
index 026bb70..26ba4e1 100644
--- a/app/create/screens/card/ConflictManagementScreen.tsx
+++ b/app/create/screens/card/ConflictManagementScreen.tsx
@@ -3,6 +3,12 @@
 /**
  * `conflict-management` step — Figma compact card stack (node `20879-15979`).
  * Registry: `CREATE_FLOW_SCREEN_REGISTRY["conflict-management"]`.
+ *
+ * Card click opens the Figma "Add Approach" create modal (node `20874-172292`) with four
+ * controls: Core Principle, Applicable Scope (capsules), Process Protocol, and Restoration
+ * & Fallbacks. Section defaults are sourced from
+ * `messages/en/create/conflictManagement.json` and will be replaced with DB-driven
+ * content; labels are hard-coded per the Figma design.
  */
 
 import { useState, useCallback, useMemo } from "react";
@@ -12,11 +18,14 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../components/utility/CardStack";
 import Create from "../../../components/modals/Create";
+import InlineTextButton from "../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import ModalTextAreaField from "../../components/ModalTextAreaField";
+import ApplicableScopeField from "../../components/ApplicableScopeField";
 
 const CONFLICT_CARD_ORDER = [
   "peer-mediation",
@@ -29,6 +38,92 @@ const CONFLICT_CARD_ORDER = [
   "8",
 ] as const;
 
+type ConflictModalSections = {
+  corePrinciple: string;
+  applicableScope: string[];
+  selectedApplicableScope: string[];
+  processProtocol: string;
+  restorationFallbacks: string;
+};
+
+function AddConflictApproachModalContent({
+  approachCardId,
+}: {
+  approachCardId: string;
+}) {
+  const { markCreateFlowInteraction } = useCreateFlow();
+  const m = useMessages();
+  const cm = m.create.conflictManagement;
+  const modal =
+    approachCardId in cm.modals
+      ? cm.modals[approachCardId as keyof typeof cm.modals]
+      : null;
+  const modalSections = modal?.sections;
+  const defaults: ConflictModalSections = {
+    corePrinciple: modalSections?.corePrinciple ?? "",
+    applicableScope: modalSections?.applicableScope ?? [],
+    selectedApplicableScope: [],
+    processProtocol: modalSections?.processProtocol ?? "",
+    restorationFallbacks: modalSections?.restorationFallbacks ?? "",
+  };
+
+  const [sections, setSections] = useState<ConflictModalSections>(() => ({
+    corePrinciple: defaults.corePrinciple,
+    applicableScope: [...defaults.applicableScope],
+    selectedApplicableScope: [...defaults.selectedApplicableScope],
+    processProtocol: defaults.processProtocol,
+    restorationFallbacks: defaults.restorationFallbacks,
+  }));
+
+  const patch = useCallback(
+    <K extends keyof ConflictModalSections>(
+      key: K,
+      value: ConflictModalSections[K],
+    ) => {
+      markCreateFlowInteraction();
+      setSections((prev) => ({ ...prev, [key]: value }));
+    },
+    [markCreateFlowInteraction],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ModalTextAreaField
+        label={cm.sectionHeadings.corePrinciple}
+        value={sections.corePrinciple}
+        onChange={(v) => patch("corePrinciple", v)}
+      />
+      <ApplicableScopeField
+        label={cm.sectionHeadings.applicableScope}
+        addLabel={cm.scopeAddButtonLabel}
+        scopes={sections.applicableScope}
+        selectedScopes={sections.selectedApplicableScope}
+        onToggleScope={(scope) =>
+          patch(
+            "selectedApplicableScope",
+            sections.selectedApplicableScope.includes(scope)
+              ? sections.selectedApplicableScope.filter((s) => s !== scope)
+              : [...sections.selectedApplicableScope, scope],
+          )
+        }
+        onAddScope={(scope) =>
+          patch("applicableScope", [...sections.applicableScope, scope])
+        }
+      />
+      <ModalTextAreaField
+        label={cm.sectionHeadings.processProtocol}
+        value={sections.processProtocol}
+        onChange={(v) => patch("processProtocol", v)}
+      />
+      <ModalTextAreaField
+        label={cm.sectionHeadings.restorationFallbacks}
+        value={sections.restorationFallbacks}
+        onChange={(v) => patch("restorationFallbacks", v)}
+      />
+    </div>
+  );
+}
+
 export function ConflictManagementScreen() {
   const m = useMessages();
   const cm = m.create.conflictManagement;
@@ -68,41 +163,55 @@ export function ConflictManagementScreen() {
   ) : (
     <>
       {cm.page.compactDescriptionBefore}
-      <button
-        type="button"
-        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+      <InlineTextButton
         onClick={() => {
           markCreateFlowInteraction();
           setExpanded(true);
         }}
       >
         {cm.page.compactDescriptionLinkLabel}
-      </button>
+      </InlineTextButton>
       {cm.page.compactDescriptionAfter}
     </>
   );
 
-  const modalConfig =
-    pendingCardId && pendingCardId in cm.modals
-      ? (() => {
-          const modal = cm.modals[pendingCardId as keyof typeof cm.modals];
-          return {
-            title: modal.title,
-            description: modal.description,
-            nextButtonText: cm.confirmModal.nextButtonText,
-            showBackButton: false as const,
-            currentStep: undefined,
-            totalSteps: undefined,
-          };
-        })()
-      : {
-          title: cm.confirmModal.title,
-          description: cm.confirmModal.description,
-          nextButtonText: cm.confirmModal.nextButtonText,
-          showBackButton: false as const,
-          currentStep: undefined,
-          totalSteps: undefined,
-        };
+  const modalConfig = (() => {
+    if (!pendingCardId) {
+      return {
+        title: cm.confirmModal.title,
+        description: cm.confirmModal.description,
+        nextButtonText: cm.confirmModal.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    if (pendingCardId in cm.modals) {
+      const modal = cm.modals[pendingCardId as keyof typeof cm.modals];
+      return {
+        title: modal.title,
+        description: modal.description,
+        nextButtonText: cm.addApproach.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    const cardRow =
+      pendingCardId in cm.cards
+        ? cm.cards[pendingCardId as keyof typeof cm.cards]
+        : null;
+    return {
+      title: cardRow?.label ?? cm.confirmModal.title,
+      description: cardRow?.supportText ?? cm.confirmModal.description,
+      nextButtonText: cm.addApproach.nextButtonText,
+      showBackButton: false as const,
+      currentStep: undefined,
+      totalSteps: undefined,
+    };
+  })();
 
   const handleCardClick = useCallback(
     (id: string) => {
@@ -173,7 +282,15 @@ export function ConflictManagementScreen() {
         showBackButton={modalConfig.showBackButton}
         currentStep={modalConfig.currentStep}
         totalSteps={modalConfig.totalSteps}
-      />
+        backdropVariant="loginYellow"
+      >
+        {pendingCardId ? (
+          <AddConflictApproachModalContent
+            key={pendingCardId}
+            approachCardId={pendingCardId}
+          />
+        ) : null}
+      </Create>
     </CreateFlowStepShell>
   );
 }
diff --git a/app/create/screens/card/MembershipMethodsScreen.tsx b/app/create/screens/card/MembershipMethodsScreen.tsx
index e67f464..99ba344 100644
--- a/app/create/screens/card/MembershipMethodsScreen.tsx
+++ b/app/create/screens/card/MembershipMethodsScreen.tsx
@@ -3,6 +3,12 @@
 /**
  * `membership-methods` step — Figma compact card stack (node `20858-13947`).
  * Registry: `CREATE_FLOW_SCREEN_REGISTRY["membership-methods"]`.
+ *
+ * Card click opens the Figma create modal (node `20858-13948`) with three
+ * editable sections — Eligibility & Philosophy, Joining Process, and
+ * Expectations & Removal. Section defaults come from
+ * `messages/en/create/membership.json` and will be replaced with DB-driven
+ * content.
  */
 
 import { useState, useCallback, useMemo } from "react";
@@ -12,11 +18,20 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../components/utility/CardStack";
 import Create from "../../../components/modals/Create";
+import InlineTextButton from "../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import ModalTextAreaField from "../../components/ModalTextAreaField";
+
+const SECTION_FIELDS = [
+  "eligibility",
+  "joiningProcess",
+  "expectations",
+] as const;
+type SectionField = (typeof SECTION_FIELDS)[number];
 
 const MEMBERSHIP_CARD_ORDER = [
   "open-access",
@@ -29,6 +44,55 @@ const MEMBERSHIP_CARD_ORDER = [
   "8",
 ] as const;
 
+function AddMembershipModalContent({
+  membershipCardId,
+}: {
+  membershipCardId: string;
+}) {
+  const { markCreateFlowInteraction } = useCreateFlow();
+  const m = useMessages();
+  const mem = m.create.membership;
+  const modal =
+    membershipCardId in mem.modals
+      ? mem.modals[membershipCardId as keyof typeof mem.modals]
+      : null;
+  const defaults = modal?.sections ?? {
+    eligibility: "",
+    joiningProcess: "",
+    expectations: "",
+  };
+
+  const [sectionValues, setSectionValues] = useState<
+    Record<SectionField, string>
+  >(() => ({
+    eligibility: defaults.eligibility,
+    joiningProcess: defaults.joiningProcess,
+    expectations: defaults.expectations,
+  }));
+
+  const updateSection = useCallback(
+    (key: SectionField, value: string) => {
+      markCreateFlowInteraction();
+      setSectionValues((prev) => ({ ...prev, [key]: value }));
+    },
+    [markCreateFlowInteraction],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      {SECTION_FIELDS.map((field) => (
+        <ModalTextAreaField
+          key={field}
+          label={mem.sectionHeadings[field]}
+          rows={6}
+          value={sectionValues[field]}
+          onChange={(v) => updateSection(field, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
 export function MembershipMethodsScreen() {
   const m = useMessages();
   const mem = m.create.membership;
@@ -68,41 +132,55 @@ export function MembershipMethodsScreen() {
   ) : (
     <>
       {mem.page.compactDescriptionBefore}
-      <button
-        type="button"
-        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+      <InlineTextButton
         onClick={() => {
           markCreateFlowInteraction();
           setExpanded(true);
         }}
       >
         {mem.page.compactDescriptionLinkLabel}
-      </button>
+      </InlineTextButton>
       {mem.page.compactDescriptionAfter}
     </>
   );
 
-  const modalConfig =
-    pendingCardId && pendingCardId in mem.modals
-      ? (() => {
-          const modal = mem.modals[pendingCardId as keyof typeof mem.modals];
-          return {
-            title: modal.title,
-            description: modal.description,
-            nextButtonText: mem.confirmModal.nextButtonText,
-            showBackButton: false as const,
-            currentStep: undefined,
-            totalSteps: undefined,
-          };
-        })()
-      : {
-          title: mem.confirmModal.title,
-          description: mem.confirmModal.description,
-          nextButtonText: mem.confirmModal.nextButtonText,
-          showBackButton: false as const,
-          currentStep: undefined,
-          totalSteps: undefined,
-        };
+  const modalConfig = (() => {
+    if (!pendingCardId) {
+      return {
+        title: mem.confirmModal.title,
+        description: mem.confirmModal.description,
+        nextButtonText: mem.confirmModal.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    if (pendingCardId in mem.modals) {
+      const modal = mem.modals[pendingCardId as keyof typeof mem.modals];
+      return {
+        title: modal.title,
+        description: modal.description,
+        nextButtonText: mem.addPlatform.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    const cardRow =
+      pendingCardId in mem.cards
+        ? mem.cards[pendingCardId as keyof typeof mem.cards]
+        : null;
+    return {
+      title: cardRow?.label ?? mem.confirmModal.title,
+      description: cardRow?.supportText ?? mem.confirmModal.description,
+      nextButtonText: mem.addPlatform.nextButtonText,
+      showBackButton: false as const,
+      currentStep: undefined,
+      totalSteps: undefined,
+    };
+  })();
 
   const handleCardClick = useCallback(
     (id: string) => {
@@ -173,7 +251,15 @@ export function MembershipMethodsScreen() {
         showBackButton={modalConfig.showBackButton}
         currentStep={modalConfig.currentStep}
         totalSteps={modalConfig.totalSteps}
-      />
+        backdropVariant="loginYellow"
+      >
+        {pendingCardId ? (
+          <AddMembershipModalContent
+            key={pendingCardId}
+            membershipCardId={pendingCardId}
+          />
+        ) : null}
+      </Create>
     </CreateFlowStepShell>
   );
 }
diff --git a/app/create/screens/right-rail/DecisionApproachesScreen.tsx b/app/create/screens/right-rail/DecisionApproachesScreen.tsx
new file mode 100644
index 0000000..33612b0
--- /dev/null
+++ b/app/create/screens/right-rail/DecisionApproachesScreen.tsx
@@ -0,0 +1,320 @@
+"use client";
+
+/**
+ * `decision-approaches` step — Figma “Flow — Right Rail” (node `20523-23509`).
+ * Registry: `CREATE_FLOW_SCREEN_REGISTRY["decision-approaches"]` (`layoutKind: "right-rail"`).
+ *
+ * Layout matches {@link CreateFlowTwoColumnSelectShell}: one column below `lg` (1024px), two columns
+ * at `lg+` with a scrollable rail — same breakpoint and height chain as select steps, distinct content.
+ *
+ * Card click opens the Figma "Add Approach" create modal (node `20870-72155`) with five controls:
+ * Core Principle, Applicable Scope, Step-by-Step Instructions, Consensus Level, and Objections &
+ * Deadlocks. Section defaults are sourced from `messages/en/create/rightRail.json` and will be
+ * replaced with DB-driven content; labels are hard-coded per the Figma design.
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import DecisionMakingSidebar from "../../../components/utility/DecisionMakingSidebar";
+import CardStack from "../../../components/utility/CardStack";
+import Create from "../../../components/modals/Create";
+import { IncrementerBlock } from "../../../components/controls/Incrementer";
+import InlineTextButton from "../../../components/buttons/InlineTextButton";
+import type { InfoMessageBoxItem } from "../../../components/utility/InfoMessageBox/InfoMessageBox.types";
+import type { CardStackItem } from "../../../components/utility/CardStack/CardStack.types";
+import { useMessages } from "../../../contexts/MessagesContext";
+import { useCreateFlow } from "../../context/CreateFlowContext";
+import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
+import ModalTextAreaField from "../../components/ModalTextAreaField";
+import ApplicableScopeField from "../../components/ApplicableScopeField";
+
+const CONSENSUS_LEVEL_MIN = 0;
+const CONSENSUS_LEVEL_MAX = 100;
+const CONSENSUS_LEVEL_STEP = 5;
+const CONSENSUS_LEVEL_DEFAULT = 75;
+
+type RightRailModalSections = {
+  corePrinciple: string;
+  applicableScope: string[];
+  selectedApplicableScope: string[];
+  stepByStepInstructions: string;
+  consensusLevel: number;
+  objectionsDeadlocks: string;
+};
+
+function AddDecisionApproachModalContent({
+  approachCardId,
+}: {
+  approachCardId: string;
+}) {
+  const { markCreateFlowInteraction } = useCreateFlow();
+  const m = useMessages();
+  const rr = m.create.rightRail;
+  const modal =
+    approachCardId in rr.modals
+      ? rr.modals[approachCardId as keyof typeof rr.modals]
+      : null;
+  const modalSections = modal?.sections;
+  const defaults: RightRailModalSections = {
+    corePrinciple: modalSections?.corePrinciple ?? "",
+    applicableScope: modalSections?.applicableScope ?? [],
+    selectedApplicableScope: [],
+    stepByStepInstructions: modalSections?.stepByStepInstructions ?? "",
+    consensusLevel: modalSections?.consensusLevel ?? CONSENSUS_LEVEL_DEFAULT,
+    objectionsDeadlocks: modalSections?.objectionsDeadlocks ?? "",
+  };
+
+  const [sections, setSections] = useState<RightRailModalSections>(() => ({
+    corePrinciple: defaults.corePrinciple,
+    applicableScope: [...defaults.applicableScope],
+    selectedApplicableScope: [...defaults.selectedApplicableScope],
+    stepByStepInstructions: defaults.stepByStepInstructions,
+    consensusLevel: defaults.consensusLevel,
+    objectionsDeadlocks: defaults.objectionsDeadlocks,
+  }));
+
+  const patch = useCallback(
+    <K extends keyof RightRailModalSections>(
+      key: K,
+      value: RightRailModalSections[K],
+    ) => {
+      markCreateFlowInteraction();
+      setSections((prev) => ({ ...prev, [key]: value }));
+    },
+    [markCreateFlowInteraction],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ModalTextAreaField
+        label={rr.sectionHeadings.corePrinciple}
+        value={sections.corePrinciple}
+        onChange={(v) => patch("corePrinciple", v)}
+      />
+      <ApplicableScopeField
+        label={rr.sectionHeadings.applicableScope}
+        addLabel={rr.scopeAddButtonLabel}
+        scopes={sections.applicableScope}
+        selectedScopes={sections.selectedApplicableScope}
+        onToggleScope={(scope) =>
+          patch(
+            "selectedApplicableScope",
+            sections.selectedApplicableScope.includes(scope)
+              ? sections.selectedApplicableScope.filter((s) => s !== scope)
+              : [...sections.selectedApplicableScope, scope],
+          )
+        }
+        onAddScope={(scope) =>
+          patch("applicableScope", [...sections.applicableScope, scope])
+        }
+      />
+      <ModalTextAreaField
+        label={rr.sectionHeadings.stepByStepInstructions}
+        value={sections.stepByStepInstructions}
+        onChange={(v) => patch("stepByStepInstructions", v)}
+      />
+      <IncrementerBlock
+        label={rr.sectionHeadings.consensusLevel}
+        value={sections.consensusLevel}
+        min={CONSENSUS_LEVEL_MIN}
+        max={CONSENSUS_LEVEL_MAX}
+        step={CONSENSUS_LEVEL_STEP}
+        onChange={(next) => patch("consensusLevel", next)}
+        formatValue={(v) => `${v}%`}
+        decrementAriaLabel="Decrease consensus level"
+        incrementAriaLabel="Increase consensus level"
+      />
+      <ModalTextAreaField
+        label={rr.sectionHeadings.objectionsDeadlocks}
+        value={sections.objectionsDeadlocks}
+        onChange={(v) => patch("objectionsDeadlocks", v)}
+      />
+    </div>
+  );
+}
+
+export function DecisionApproachesScreen() {
+  const m = useMessages();
+  const rr = m.create.rightRail;
+  const mdUp = useCreateFlowMdUp();
+  const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
+  const [messageBoxCheckedIds, setMessageBoxCheckedIds] = useState<string[]>(
+    [],
+  );
+  const [expanded, setExpanded] = useState(false);
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [pendingCardId, setPendingCardId] = useState<string | null>(null);
+
+  const selectedIds = state.selectedDecisionApproachIds ?? [];
+
+  const setSelectedIds = useCallback(
+    (next: string[]) => {
+      updateState({ selectedDecisionApproachIds: next });
+    },
+    [updateState],
+  );
+
+  const messageBoxItems: InfoMessageBoxItem[] = useMemo(
+    () =>
+      rr.messageBox.items.map((item) => ({
+        id: item.id,
+        label: item.label,
+      })),
+    [rr.messageBox.items],
+  );
+
+  const sampleCards: CardStackItem[] = useMemo(
+    () =>
+      rr.cards.map((c) => ({
+        id: c.id,
+        label: c.label,
+        supportText: c.supportText,
+        recommended: c.recommended,
+      })),
+    [rr.cards],
+  );
+
+  const cardById = useMemo(
+    () => new Map(rr.cards.map((c) => [c.id, c])),
+    [rr.cards],
+  );
+
+  const sidebarDescription = (
+    <>
+      {rr.sidebar.descriptionBefore}
+      <InlineTextButton
+        onClick={() => {
+          markCreateFlowInteraction();
+          setExpanded(true);
+        }}
+      >
+        {rr.sidebar.descriptionLinkLabel}
+      </InlineTextButton>
+      {rr.sidebar.descriptionAfter}
+    </>
+  );
+
+  const handleMessageBoxCheckboxChange = useCallback(
+    (id: string, checked: boolean) => {
+      markCreateFlowInteraction();
+      setMessageBoxCheckedIds((prev) =>
+        checked ? [...prev, id] : prev.filter((x) => x !== id),
+      );
+    },
+    [markCreateFlowInteraction],
+  );
+
+  const handleCardSelect = useCallback(
+    (id: string) => {
+      markCreateFlowInteraction();
+      setPendingCardId(id);
+      setCreateModalOpen(true);
+    },
+    [markCreateFlowInteraction],
+  );
+
+  const handleToggleExpand = useCallback(() => {
+    markCreateFlowInteraction();
+    setExpanded((prev) => !prev);
+  }, [markCreateFlowInteraction]);
+
+  const handleCreateModalClose = useCallback(() => {
+    setCreateModalOpen(false);
+    setPendingCardId(null);
+  }, []);
+
+  const handleCreateModalConfirm = useCallback(() => {
+    markCreateFlowInteraction();
+    if (pendingCardId) {
+      setSelectedIds(
+        selectedIds.includes(pendingCardId)
+          ? selectedIds
+          : [...selectedIds, pendingCardId],
+      );
+    }
+    setCreateModalOpen(false);
+    setPendingCardId(null);
+  }, [markCreateFlowInteraction, pendingCardId, selectedIds, setSelectedIds]);
+
+  const modalConfig = (() => {
+    if (!pendingCardId) {
+      return {
+        title: rr.confirmModal.title,
+        description: rr.confirmModal.description,
+        nextButtonText: rr.confirmModal.nextButtonText,
+      };
+    }
+
+    if (pendingCardId in rr.modals) {
+      const modal = rr.modals[pendingCardId as keyof typeof rr.modals];
+      return {
+        title: modal.title,
+        description: modal.description,
+        nextButtonText: rr.addApproach.nextButtonText,
+      };
+    }
+
+    const card = cardById.get(pendingCardId);
+    return {
+      title: card?.label ?? rr.confirmModal.title,
+      description: card?.supportText ?? rr.confirmModal.description,
+      nextButtonText: rr.addApproach.nextButtonText,
+    };
+  })();
+
+  return (
+    <CreateFlowTwoColumnSelectShell
+      contentTopBelowMd="space-800"
+      lgVerticalAlign="start"
+      header={
+        <DecisionMakingSidebar
+          title={rr.sidebar.title}
+          description={sidebarDescription}
+          messageBoxTitle={rr.messageBox.title}
+          messageBoxItems={messageBoxItems}
+          messageBoxCheckedIds={messageBoxCheckedIds}
+          onMessageBoxCheckboxChange={handleMessageBoxCheckboxChange}
+          size={mdUp ? "L" : "M"}
+          justification={mdUp ? "left" : "center"}
+        />
+      }
+    >
+      <div className="flex w-full min-w-0 flex-col items-stretch gap-6 py-0">
+        <CardStack
+          cards={sampleCards}
+          selectedIds={selectedIds}
+          onCardSelect={handleCardSelect}
+          expanded={expanded}
+          onToggleExpand={handleToggleExpand}
+          hasMore={true}
+          toggleLabel={rr.cardStack.toggleSeeAll}
+          showLessLabel={rr.cardStack.toggleShowLess}
+          title=""
+          description=""
+          layout="singleStack"
+          compactRecommendedLimit={5}
+          className="w-full"
+          headerLockupSize={mdUp ? "L" : "M"}
+        />
+      </div>
+
+      <Create
+        isOpen={createModalOpen}
+        onClose={handleCreateModalClose}
+        onNext={handleCreateModalConfirm}
+        title={modalConfig.title}
+        description={modalConfig.description}
+        nextButtonText={modalConfig.nextButtonText}
+        showBackButton={false}
+        backdropVariant="loginYellow"
+      >
+        {pendingCardId ? (
+          <AddDecisionApproachModalContent
+            key={pendingCardId}
+            approachCardId={pendingCardId}
+          />
+        ) : null}
+      </Create>
+    </CreateFlowTwoColumnSelectShell>
+  );
+}
diff --git a/app/create/screens/right-rail/RightRailScreen.tsx b/app/create/screens/right-rail/RightRailScreen.tsx
deleted file mode 100644
index b43cb6f..0000000
--- a/app/create/screens/right-rail/RightRailScreen.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client";
-
-/**
- * `decision-approaches` step — Figma “Flow — Right Rail” (node `20523-23509`).
- * Registry: `CREATE_FLOW_SCREEN_REGISTRY["decision-approaches"]` (`layoutKind: "right-rail"`).
- *
- * Layout matches {@link CreateFlowTwoColumnSelectShell}: one column below `lg` (1024px), two columns
- * at `lg+` with a scrollable rail — same breakpoint and height chain as select steps, distinct content.
- */
-
-import { useState, useCallback, useMemo } from "react";
-import DecisionMakingSidebar from "../../../components/utility/DecisionMakingSidebar";
-import CardStack from "../../../components/utility/CardStack";
-import type { InfoMessageBoxItem } from "../../../components/utility/InfoMessageBox/InfoMessageBox.types";
-import type { CardStackItem } from "../../../components/utility/CardStack/CardStack.types";
-import { useMessages } from "../../../contexts/MessagesContext";
-import { useCreateFlow } from "../../context/CreateFlowContext";
-import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
-import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
-
-export function RightRailScreen() {
-  const m = useMessages();
-  const rr = m.create.rightRail;
-  const mdUp = useCreateFlowMdUp();
-  const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
-  const [messageBoxCheckedIds, setMessageBoxCheckedIds] = useState<string[]>(
-    [],
-  );
-  const [expanded, setExpanded] = useState(false);
-
-  const selectedIds = state.selectedDecisionApproachIds ?? [];
-
-  const setSelectedIds = useCallback(
-    (next: string[]) => {
-      updateState({ selectedDecisionApproachIds: next });
-    },
-    [updateState],
-  );
-
-  const messageBoxItems: InfoMessageBoxItem[] = useMemo(
-    () =>
-      rr.messageBox.items.map((item) => ({
-        id: item.id,
-        label: item.label,
-      })),
-    [rr.messageBox.items],
-  );
-
-  const sampleCards: CardStackItem[] = useMemo(
-    () =>
-      rr.cards.map((c) => ({
-        id: c.id,
-        label: c.label,
-        supportText: c.supportText,
-        recommended: c.recommended,
-      })),
-    [rr.cards],
-  );
-
-  const sidebarDescription = (
-    <>
-      {rr.sidebar.descriptionBefore}
-      <button
-        type="button"
-        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
-        onClick={() => {
-          markCreateFlowInteraction();
-          setExpanded(true);
-        }}
-      >
-        {rr.sidebar.descriptionLinkLabel}
-      </button>
-      {rr.sidebar.descriptionAfter}
-    </>
-  );
-
-  const handleMessageBoxCheckboxChange = useCallback(
-    (id: string, checked: boolean) => {
-      markCreateFlowInteraction();
-      setMessageBoxCheckedIds((prev) =>
-        checked ? [...prev, id] : prev.filter((x) => x !== id),
-      );
-    },
-    [markCreateFlowInteraction],
-  );
-
-  const handleCardSelect = useCallback(
-    (id: string) => {
-      markCreateFlowInteraction();
-      setSelectedIds(
-        selectedIds.includes(id)
-          ? selectedIds.filter((x) => x !== id)
-          : [...selectedIds, id],
-      );
-    },
-    [markCreateFlowInteraction, selectedIds, setSelectedIds],
-  );
-
-  const handleToggleExpand = useCallback(() => {
-    markCreateFlowInteraction();
-    setExpanded((prev) => !prev);
-  }, [markCreateFlowInteraction]);
-
-  return (
-    <CreateFlowTwoColumnSelectShell
-      contentTopBelowMd="space-800"
-      lgVerticalAlign="start"
-      header={
-        <DecisionMakingSidebar
-          title={rr.sidebar.title}
-          description={sidebarDescription}
-          messageBoxTitle={rr.messageBox.title}
-          messageBoxItems={messageBoxItems}
-          messageBoxCheckedIds={messageBoxCheckedIds}
-          onMessageBoxCheckboxChange={handleMessageBoxCheckboxChange}
-          size={mdUp ? "L" : "M"}
-          justification={mdUp ? "left" : "center"}
-        />
-      }
-    >
-      <div className="flex w-full min-w-0 flex-col items-stretch gap-6 py-0">
-        <CardStack
-          cards={sampleCards}
-          selectedIds={selectedIds}
-          onCardSelect={handleCardSelect}
-          expanded={expanded}
-          onToggleExpand={handleToggleExpand}
-          hasMore={true}
-          toggleLabel={rr.cardStack.toggleSeeAll}
-          showLessLabel={rr.cardStack.toggleShowLess}
-          title=""
-          description=""
-          layout="singleStack"
-          compactRecommendedLimit={5}
-          className="w-full"
-          headerLockupSize={mdUp ? "L" : "M"}
-        />
-      </div>
-    </CreateFlowTwoColumnSelectShell>
-  );
-}
diff --git a/docs/template-recommendation-matrix.md b/docs/template-recommendation-matrix.md
new file mode 100644
index 0000000..9b702a5
--- /dev/null
+++ b/docs/template-recommendation-matrix.md
@@ -0,0 +1,728 @@
+# Template Recommendation Matrix — Implementation Context (CR-88)
+
+**Status:** Draft / context doc. Reference only — not yet implemented.
+**Linear:** [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-xlsx-sheets-ingestion)
+**Roadmap:** [`docs/backend-roadmap.md`](backend-roadmap.md) §4 (`RuleTemplate`) and §13.
+**Spec ticket:** [`docs/backend-linear-tickets.md`](backend-linear-tickets.md) Ticket 16.
+
+This doc consolidates the **four product-authored matrix spreadsheets** with the
+**existing data model, create-flow facets, and section structure** so we have a
+single reference while implementing the importer + recommendation API.
+
+> **Scope note:** No data, API, or UI surface for this feature is in production
+> yet. **Backwards compatibility is not a constraint** — we will replace the
+> hand-typed `prisma/seed.ts` `COMPOSITION_BY_SLUG` map, the existing
+> `GET /api/templates` response shape, and the static `messages/en/create/*.json`
+> card decks where it makes the design cleaner.
+
+---
+
+## 1. Goal (one paragraph)
+
+Replace the hand-curated `prisma/seed.ts` `COMPOSITION_BY_SLUG` map with a
+**spreadsheet-authored matrix** for each rule section
+(Communication, Membership, Decision-making, Conflict management — and later
+Values), where each row is a **method/pattern card** and each column is either
+**long-form copy that populates the card UI** or a **facet flag** (✓/x or score)
+that the recommendation engine uses to filter and rank cards based on the
+user's create-flow answers (community size, organization type, location/scale,
+maturity).
+
+The same authoring contract should make it trivial for product to ship updated
+spreadsheets and have the create-flow card decks (and the home/templates page
+recommendations) update without any code changes.
+
+---
+
+## 2. The four spreadsheets
+
+All four xlsx files share **the same column shape**: leading **content
+columns** + trailing **facet columns** (✓ / x cells). Sheet name is `Current`
+in every workbook.
+
+### 2.1 Shared facet columns (last 19, identical across the four sheets)
+
+Order is preserved here because the columns are positional in the sheets:
+
+| # | Column header (xlsx) | Maps to wizard step / state field | Wizard chip label (`messages/en/create/...`) |
+|---|---|---|---|
+| 1 | `1 member` | `community-size` → `selectedCommunitySizeIds` (id `"1"`) | `1 member` |
+| 2 | `2-5 members` | id `"2"` | `2-5 members` |
+| 3 | `6-12 members` | id `"3"` | `6-12 members` |
+| 4 | `13-100 members` | id `"4"` | `13-100 members` |
+| 5 | `100-100,000 members` | id `"5"` | `100-100,000 members` |
+| 6 | `Organization Type:DAO` (or `DAO` in conflict/comms/membership) | `community-structure` → `selectedOrganizationTypeIds` (id `"6"` in `organizationTypes`) | `DAO` |
+| 7 | `Organization Type:For profit business` (or `For profit business`) | id `"5"` in `organizationTypes` | `For profit business` |
+| 8 | `Organization Type:Nonprofit` (or `Nonprofit`) | id `"4"` in `organizationTypes` | `Nonprofit` |
+| 9 | `Organization Type:Open source project` (or `Open source project`) | id `"3"` | `Open source project` |
+| 10 | `Organization Type:Mutual aid` (or `Mutual aid`) | id `"2"` | `Mutual aid` |
+| 11 | `Organization Type: Worker’s coop` (or `Worker’s coop`) | id `"1"` | `Worker’s coop` |
+| 12 | `Location: Global` (or `Global`) | `community-structure` → `selectedScaleIds` (id `"4"` in `scaleOptions`) | `Global` |
+| 13 | `Location: National` (or `National`) | id `"3"` | `National` |
+| 14 | `Location: Regional` (or `Regional`) | id `"2"` | `Regional` |
+| 15 | `Location: Local` (or `Local`) | id `"1"` | `Local` |
+| 16 | `Organizational Maturity: Early stage` (or `Early stage`) | `community-structure` → `selectedMaturityIds` (id `"1"` in `maturityOptions`) | `Early stage` |
+| 17 | `Organizational Maturity: Growth stage` (or `Growth stage`) | id `"2"` | `Growth stage` |
+| 18 | `Organizational Maturity: Established` (or `Established`) | id `"3"` | `Established` |
+| 19 | `Organizational Maturity: Enterprise` (or `Enterprise`) | id `"4"` | `Enterprise` |
+
+**Important normalization rules (importer must enforce):**
+
+- Decision-making prefixes columns with `Organization Type:`, `Location:`,
+  `Organizational Maturity:`. The other three sheets drop the prefix. Importer
+  should normalize to a single canonical key (e.g.
+  `orgType.workersCoop`, `scale.local`, `maturity.earlyStage`, `size.6_12`).
+- Cell value semantics: `✓` → match, `x` (lowercase) → no match, blank → no
+  match, numbers → optional weighted score (only `Decision-making.xlsx` row 32
+  contains a non-symbol cell — `"Military, Corporations"` in the size column —
+  see §2.4 data-quality issues).
+- Wizard chip ids are **positional 1..N** within each `messages/en/create/*`
+  array (see `chipRowsFromLabels` in
+  `app/create/screens/select/CommunityStructureSelectScreen.tsx` lines 49–57).
+  The importer should emit a stable lookup table mapping
+  `(facetGroup, label) → wizardChipId` so the recommendation engine can match
+  a user's `selectedXxxIds` against the matrix without depending on label
+  spelling.
+- Curly apostrophes appear in `Worker’s coop`. Compare on a normalized key,
+  not on raw label.
+
+### 2.2 Communication Methods (`Communication Methods.xlsx`, sheet `Current`)
+
+Maps 1:1 to `messages/en/create/communication.json` and the
+`communication-methods` step
+(`app/create/screens/card/CommunicationMethodsScreen.tsx`).
+
+**Content columns (positions 1–5):**
+
+| Sheet column | Card field |
+|---|---|
+| `Label` | `cards[<id>].label` and `modals[<id>].title` |
+| `Description` | `cards[<id>].supportText` and `modals[<id>].description` |
+| `Core Principle & Scope` | `modals[<id>].sections.corePrinciple` |
+| `Logistics, Admin & Norms` | `modals[<id>].sections.logisticsAdmin` |
+| `Code of Conduct` | `modals[<id>].sections.codeOfConduct` |
+
+`SECTION_FIELDS = ["corePrinciple", "logisticsAdmin", "codeOfConduct"]` is
+the source of truth (`CommunicationMethodsScreen.tsx`).
+
+**Card rows (11):** In-Person Meetings · Signal · Video Meetings · Loomio ·
+Matrix / Element · GitHub / GitLab · Discord · Email Distribution List · Slack
+· WhatsApp · Discourse (Forum).
+
+### 2.3 Membership / Group-Membership (`Group_Membership_Methods.xlsx`, sheet `Current`)
+
+Maps to the `membership-methods` step
+(`app/create/screens/card/MembershipMethodsScreen.tsx`) and
+`messages/en/create/membership.json`.
+
+**Content columns (positions 1–5):**
+
+| Sheet column | Card field (proposed naming) |
+|---|---|
+| `Label` | `cards[<id>].label` / modal title |
+| `Description` | `cards[<id>].supportText` / modal description |
+| `Eligibility & Philosophy` | modal section A (`eligibilityPhilosophy`) |
+| `Joining Process` | modal section B (`joiningProcess`) |
+| `Expectations & Removal` | modal section C (`expectationsRemoval`) |
+
+**Card rows (19):** Open Access · Orientation Required · Invitation Only ·
+Contribution Based · Mentorship · Peer Sponsorship · Consensus or Vote-Based
+Approval · Trial Period / Provisional Membership · Referral System with
+Screening · Membership Agreement or Pledge · Weighted or Tiered Membership ·
+Hybrid Approval Process · Skill-Based Contribution · Pay-to-Join · Application
+& Review · Identity Verification · Collective Interviews · Skill-Based
+Evaluation · Lottery / Sortition.
+
+> The wizard's existing `membership.json` modal section keys do not yet match
+> these. Since backwards compatibility is not a constraint, **rename the
+> wizard's section keys to match the matrix** (`eligibilityPhilosophy` /
+> `joiningProcess` / `expectationsRemoval`) when wiring this up — the existing
+> copy is placeholder.
+
+### 2.4 Decision-making (`Decision-making.xlsx`, sheet `Current`)
+
+Maps to the `decision-approaches` step
+(`app/create/screens/right-rail/DecisionApproachesScreen.tsx`) and
+`messages/en/create/rightRail.json`.
+
+**Content columns (positions 1–7):**
+
+| Sheet column | Card field (proposed naming) |
+|---|---|
+| `Label` | card title |
+| `Description` | card support text |
+| `Core Principle` | modal section A (`corePrinciple`) |
+| `Applicable Scope` | modal section B (`applicableScope`) — free-text examples, e.g. `"Daily Operations, Minor Expenditures"` |
+| `Consensus Level` | numeric 0.0–1.0 stored under `scalars.consensusLevel` (e.g. `0.51`, `0.67`, `1.0`) — drives the **Consensus axis** in any future visual sort/filter |
+| `Step-by-Step Instructions` | modal section C (`stepByStep`) |
+| `Objections & Deadlocks` | modal section D (`objectionsDeadlocks`) |
+
+**Card rows (32):** Lazy Consensus · Do-ocracy · Consensus Decision-Making ·
+Rotational Leadership · Modified Consensus · Consensus Seeking with Delegates
+· Sociocracy · Supermajority Rule · Ranked Choice Voting · Range Voting ·
+Majority Rule · Approval Voting · Weighted Voting · Cumulative Voting ·
+Quadratic Voting · Continuous Voting · Holacracy · Collaborative Platforms ·
+Deliberative Polling · Investor-Filled Board Seats · Elected Board of
+Directors · Advisory Committees · Delegated Decision-Making · Executive
+Committees · First Past the Post · Lottery/Sortition · Proof of Work · Random
+Choice · Algorithm-Driven Decisions · Autocratic Decision-Making ·
+Hierarchical Decision-Making · Negotiated Decisions.
+
+**Data-quality issues to handle in the importer (do not silently drop):**
+
+- Row 32 (`Hierarchical Decision-Making`): the `Consensus Level` cell contains
+  `"Military, Corporations"` (the value clearly belongs to `Applicable Scope`,
+  which itself already contains `"Military, Corporations"`). Importer should
+  flag this as a validation error and require a fix in the source workbook
+  rather than try to repair it.
+- Row 11 (`Range Voting`): the **last facet column** (`Maturity: Enterprise`)
+  is empty in the source — treat empty as `x` (no match) **only after** the
+  importer logs a warning so the author knows it wasn't intentional ✓.
+
+### 2.5 Conflict Management (`Conflict Management Methods.xlsx`, sheet `Current`)
+
+Maps to the `conflict-management` step
+(`app/create/screens/card/ConflictManagementScreen.tsx`) and
+`messages/en/create/conflictManagement.json`.
+
+**Content columns (positions 1–6):**
+
+| Sheet column | Card field (proposed naming) |
+|---|---|
+| `Title` | card title (note: not `Label` like the other three) |
+| `Description` | card support text |
+| `Core Principle` | modal section A (`corePrinciple`) |
+| `Applicable Scope` | modal section B (`applicableScope`) |
+| `Process Protocol` | modal section C (`processProtocol`) |
+| `Restoration & Fallbacks` | modal section D (`restorationFallbacks`) |
+
+**Card rows (19):** Peer Mediation · Conflict Resolution Council · Facilitated
+Negotiation · Ad Hoc Arbitration · Conflict Workshops · Supermajority Vote ·
+Interest-Based Bargaining · Restorative Practices · Mediation · Circle
+Processes · Judicial Committees · Managerial Decision · Internal Tribunal ·
+Consensus Building · Binding Arbitration · Non-Binding Arbitration · Binding
+Contracts · Lottery/Sortition · Rotational Judging.
+
+> Conflict Management sheet uses `Title` instead of `Label` and omits the
+> `Organization Type:` / `Location:` / `Organizational Maturity:` prefixes —
+> normalize both at import time.
+
+---
+
+## 3. Existing data model & wizard surface area
+
+### 3.1 `RuleTemplate` (today)
+
+```64:73:prisma/schema.prisma
+model RuleTemplate {
+  id          String   @id @default(cuid())
+  slug        String   @unique
+  title       String
+  category    String?
+  description String?
+  body        Json
+  sortOrder   Int      @default(0)
+  featured    Boolean  @default(false)
+}
+```
+
+`body` JSON is the rendered rule document
+(`{ sections: [{ categoryName, entries: [{ title, body }] }, ...] }`),
+authored today by the `bodyFromXlsxComposition()` helper in
+`prisma/seed.ts` from a hand-typed `COMPOSITION_BY_SLUG` map.
+
+**Section ordering (canonical):** Values → Communication → Membership →
+Decision-making → Conflict management. Final-review and `governancePatternBody`
+both rely on this exact order and casing.
+
+```16:60:prisma/seed.ts
+function governancePatternBody(coreValues: string): Prisma.InputJsonValue {
+  return {
+    sections: [
+      { categoryName: "Values", entries: [{ title: "Core stance", body: coreValues }] },
+      { categoryName: "Communication", entries: [...] },
+      { categoryName: "Membership", entries: [...] },
+      { categoryName: "Decision-making", entries: [...] },
+      { categoryName: "Conflict management", entries: [...] },
+    ],
+  };
+}
+```
+
+### 3.2 Wizard facets captured today (`CreateFlowState`)
+
+```83:95:app/create/types.ts
+selectedCommunitySizeIds?: string[];
+selectedOrganizationTypeIds?: string[];
+selectedScaleIds?: string[];
+selectedMaturityIds?: string[];
+selectedCoreValueIds?: string[];
+selectedCommunicationMethodIds?: string[];
+selectedMembershipMethodIds?: string[];
+selectedDecisionApproachIds?: string[];
+selectedConflictManagementIds?: string[];
+```
+
+The first four are exactly the four **facet groups** in the matrix sheets. The
+last four are the user's chosen **cards per section**, which the recommendation
+flow can either pre-select (when picked from a template) or feed back into
+ranking.
+
+These same fields are validated server-side by `createFlowStateSchema` in
+`lib/server/validation/createFlowSchemas.ts` (lines 47–106) — the recommend
+endpoint should reuse that schema (or a strict subset) instead of redefining
+the facet shape.
+
+### 3.3 Wizard step order
+
+Source of truth is `app/create/utils/flowSteps.ts` (`FLOW_STEP_ORDER`). The
+relevant slice is:
+
+```
+review → core-values → communication-methods → membership-methods →
+decision-approaches → conflict-management → confirm-stakeholders → final-review
+```
+
+`docs/create-flow.md`'s step table is **stale**; trust `flowSteps.ts`.
+
+### 3.4 Where templates already surface in the UI
+
+| Surface | File |
+|---|---|
+| Marketing home "Popular templates" | `app/(marketing)/MarketingRuleStackSection.tsx` |
+| Templates index | `app/(marketing)/templates/page.tsx` |
+| Template preview (by slug) | `app/create/review-template/[slug]/page.tsx` |
+| "Use without changes" → publish | `app/create/CreateFlowLayoutClient.tsx` `handleUseTemplateWithoutChanges` |
+| API list | `app/api/templates/route.ts` (GET only, no params) |
+
+There is currently **no** recommendation logic, no facet filtering, and the
+`/create/informational?template=<slug>` query param is a known no-op (see
+`CreateFlowLayoutClient.tsx` lines 479–482).
+
+---
+
+## 4. Repo conventions to follow (don't reinvent)
+
+These are the patterns the implementation must match. References point at the
+canonical example for each.
+
+### 4.1 API routes (`app/api/**/route.ts`)
+
+`app/api/drafts/me/route.ts` is the reference — every new route in this
+feature must match this exact shape:
+
+1. `if (!isDatabaseConfigured()) return dbUnavailable();` — always first.
+   (`lib/server/env.ts`, `lib/server/responses.ts`).
+2. For auth'd routes: `const user = await getSessionUser();` then
+   `return NextResponse.json({ error: "Unauthorized" }, { status: 401 });` if
+   missing. (Recommendation read endpoints can stay unauthenticated.)
+3. For request bodies: `readLimitedJson(request)` →
+   `<schema>.safeParse(parsed.value)` → `jsonFromZodError(validated.error)` on
+   failure. (`lib/server/validation/requestBody.ts`,
+   `lib/server/validation/zodHttp.ts`).
+4. Success: `NextResponse.json({ <key>: data })` — flat object with one or two
+   named keys, no `success: true` envelope.
+5. Errors: structured `{ error: { code, message } }` (Zod path) or simple
+   `{ error: "..." }` (auth path). Match what's already in the repo.
+6. Server-side query helpers swallow Prisma failures and return `[]`/`null`
+   (see `listRuleTemplatesFromDb` in `lib/server/ruleTemplates.ts` lines 9–30).
+   Routes do **not** wrap helper calls in `try/catch`.
+
+### 4.2 Zod schemas live in `lib/server/validation/`
+
+- One file per feature area (e.g. `createFlowSchemas.ts`, future
+  `templateRecommendationSchemas.ts`).
+- Export the schema **and** the inferred type
+  (`export type X = z.infer<typeof xSchema>`).
+- Wrap any free-form JSON blobs with `assertPlainJsonValue` /
+  `DEFAULT_PLAIN_JSON_LIMITS` (`lib/server/validation/plainJson.ts`) so the
+  size/depth bounds match the rest of the API.
+- Reuse `FLOW_STEP_ORDER` and existing array bounds where they overlap (see
+  the `selectedXxxMethodIds` arrays in `createFlowStateSchema`).
+
+### 4.3 Prisma access
+
+- Singleton: `import { prisma } from "lib/server/db";` — never
+  `new PrismaClient()` from app code. (Standalone scripts under `scripts/` /
+  `prisma/` may instantiate their own, matching `prisma/seed.ts` lines
+  363–403.)
+- Server-only "fetch/list" helpers live under `lib/server/<feature>.ts`,
+  return DTOs (not raw Prisma rows), and degrade gracefully
+  (`isDatabaseConfigured()` short-circuit, `try/catch` → empty result).
+- No `$transaction` patterns exist yet; **introduce one** for the importer
+  (write `TemplateMethod` + `TemplateMethodFacet` rows atomically).
+
+### 4.4 DTO style
+
+- Hand-written `type` aliases that mirror a Prisma `select` clause, co-located
+  with the consumer (see `RuleTemplateDto` in
+  `lib/create/fetchTemplates.ts` lines 5–14).
+- For a feature with both client and server consumers, put the type in
+  `lib/<feature>/types.ts` and import from both sides.
+
+### 4.5 Standalone scripts
+
+- Use `tsx` (already a dev dep; entry point `package.json` `prisma.seed`
+  field).
+- Layout matches `prisma/seed.ts`: `async function main()`, log a one-line
+  success summary, `console.error(e); process.exit(1)` on failure,
+  `await prisma.$disconnect()` in `finally`.
+- Add an entry to `package.json` `scripts` (e.g.
+  `"templates:import": "tsx scripts/import-templates-xlsx.ts"`).
+- No shared dotenv loader — rely on env from the shell / Next runtime.
+- Support a `--dry-run` flag that validates + diffs without writing.
+
+### 4.6 Tests
+
+- Vitest under `tests/unit/*.test.ts` for parsers / validators / pure
+  functions (see `tests/unit/createFlowValidation.test.ts`).
+- API routes are not unit-tested today; cover route behavior indirectly with a
+  `tests/unit/templateRecommendationSchemas.test.ts` (Zod) plus a fixture
+  workbook + importer test under `tests/unit/importTemplatesXlsx.test.ts`.
+- E2E for the wizard (if needed) goes under `tests/e2e/*.spec.ts` — not
+  required for CR-88 acceptance.
+- Test utilities: `tests/utils/test-utils.tsx` (`renderWithProviders`); MSW
+  server in `tests/msw/server.ts`. No Prisma mock helper exists; importer test
+  should use a fixture workbook and stub the `prisma` client at the import
+  site.
+
+### 4.7 Logging
+
+- Use `logger` from `lib/logger.ts` for any server-side info/warn/error in
+  scripts and route helpers (matches `app/api/auth/magic-link/request/route.ts`
+  lines 14–15, 35–45). No `apiError` helper exists; do not introduce one.
+
+### 4.8 New deps
+
+- `xlsx` (SheetJS) is **not** currently in `package.json`. Add it as a
+  **prod** dep only if the importer is invoked from app code; if the importer
+  is script-only, `devDependency` is fine. CR-88's plan calls for a
+  build/CLI-time importer, so `devDependencies` is the right home.
+
+### 4.9 i18n / `messages/` constraint
+
+- Card decks and modal copy are currently keyed in
+  `messages/en/<feature>.json` and read via
+  `useMessages().create.<feature>` (`app/contexts/MessagesContext.tsx`,
+  `messages/en/index.ts`).
+- Only `en` is wired today, so we **don't** have a translation backlog
+  blocking us. The wiring step (§7) replaces `messages/en/create/{communication,
+  membership,rightRail,conflictManagement}.json` card/modal payloads with
+  values served by `GET /api/template-methods` (still keyed by the same
+  message namespace shape so future i18n can layer on if needed). Header
+  strings, button labels, and other purely-static UI copy stay in
+  `messages/en/*`.
+
+### 4.10 `.cursorrules` scope
+
+- The repo's `.cursorrules` PascalCase / lowercase normalization rule applies
+  to **React component props only**. It does **not** apply to API query
+  params, request bodies, or DB columns. The recommendation API uses lowercase
+  facet keys throughout (`orgType`, `scale`, `maturity`, `size`).
+
+---
+
+## 5. Authoring contract (informs §6 storage + §7 importer)
+
+The four spreadsheets together imply this row schema (per matrix workbook):
+
+```ts
+type MatrixRow = {
+  /** Stable slug derived from `Label`/`Title` (kebab-case, lowercase, ascii).
+   *  Used as the card id everywhere downstream. */
+  id: string;
+
+  /** Section this row belongs to. One of: communication, membership,
+   *  decisionMaking, conflictManagement. (values is not yet sheet-driven.) */
+  section: "communication" | "membership" | "decisionMaking" | "conflictManagement";
+
+  /** Card-facing copy. Keys differ per section; importer normalizes. */
+  card: {
+    label: string;
+    description: string;
+    /** Section-specific long-form fields (3–4 per section). */
+    modalSections: Record<string, string>;
+  };
+
+  /** Optional numeric scalar fields (e.g. decisionMaking `Consensus Level`). */
+  scalars?: Record<string, number>;
+
+  /** Facet matches (✓ → true, x/blank → false). Keys are canonical facet ids. */
+  facets: {
+    size: Record<"1" | "2_5" | "6_12" | "13_100" | "100_100k", boolean>;
+    orgType: Record<"dao" | "forProfit" | "nonprofit" | "openSource" | "mutualAid" | "workersCoop", boolean>;
+    scale: Record<"global" | "national" | "regional" | "local", boolean>;
+    maturity: Record<"earlyStage" | "growthStage" | "established" | "enterprise", boolean>;
+  };
+};
+```
+
+A sibling **manifest** documents the per-section section-key mapping and
+column header → canonical facet/scalar key mapping, so the importer can be
+stable across header rewording.
+
+---
+
+## 6. Storage (decided: normalized tables)
+
+We are introducing two new Prisma models. Hand-typed `COMPOSITION_BY_SLUG` in
+`prisma/seed.ts` is replaced by template rows that **reference** method slugs.
+
+```prisma
+model TemplateMethod {
+  id            String   @id @default(cuid())
+  section       String   // communication | membership | decisionMaking | conflictManagement
+  slug          String
+  label         String
+  description   String
+  modalSections Json     // { corePrinciple: "...", logisticsAdmin: "...", ... }
+  scalars       Json?    // { consensusLevel: 0.51 }
+  sortOrder     Int      @default(0)
+  facets        TemplateMethodFacet[]
+  @@unique([section, slug])
+  @@index([section])
+}
+
+model TemplateMethodFacet {
+  id        String  @id @default(cuid())
+  methodId  String
+  group     String  // size | orgType | scale | maturity
+  value     String  // e.g. "workersCoop"
+  matches   Boolean // ✓ → true, x/blank → false
+  weight    Float?  // optional numeric override for future scoring
+  method    TemplateMethod @relation(fields: [methodId], references: [id], onDelete: Cascade)
+  @@unique([methodId, group, value])
+  @@index([group, value, matches])
+}
+```
+
+`RuleTemplate.body` continues to express a **chosen composition** of methods
+(one or more per section). Curated templates in `prisma/seed.ts` become
+references to `TemplateMethod.slug` instead of literal copy strings — when
+copy changes in the spreadsheet, every template that references that slug
+inherits the new copy.
+
+A follow-up (out of scope for CR-88) may add a `RuleTemplateMethodLink` join
+table if templates need ordering or per-template overrides; the current `body`
+JSON shape is sufficient for the first ship.
+
+---
+
+## 7. Importer (`scripts/import-templates-xlsx.ts`)
+
+Phased plan that the implementation agent can follow top-to-bottom. Mirrors
+the structure of `prisma/seed.ts` (singleton client, `main()` +
+`finally { $disconnect }`, `process.exit(1)` on failure).
+
+1. **Read `.xlsx`** with [`xlsx`](https://www.npmjs.com/package/xlsx) (SheetJS,
+   add as devDependency) from a configurable input dir (default
+   `data/template-matrix/`). The four workbooks live there as committed
+   artifacts, not in `Downloads/`.
+2. **Schema-validate per section** with Zod schemas that live in
+   `lib/server/validation/templateRecommendationSchemas.ts` so the API and
+   importer share the row shape: required column headers, allowed cell
+   symbols (`✓`, `x`, blank, decimal for `Consensus Level`).
+3. **Normalize**: kebab-case slug from label, strip
+   `Organization Type:` / `Location:` / `Organizational Maturity:` prefixes,
+   collapse whitespace, normalize curly quotes.
+4. **Cross-sheet validation**: facet columns must match the canonical 19-column
+   set; unknown columns fail loudly via the importer (use `logger.error`).
+5. **Diff & upsert** inside `prisma.$transaction([...])`: upsert
+   `TemplateMethod` rows by `(section, slug)`; delete + recreate
+   `TemplateMethodFacet` rows for each method.
+6. **Emit a JSON snapshot** to `prisma/data/template-matrix.json` so
+   `prisma/seed.ts` can replay imports when the source workbooks aren't
+   available (e.g. CI seed without the spreadsheet checked in).
+7. **Flags**: `--dry-run` (validate + diff, no writes), `--allow-warnings`
+   (don't fail on the row-32 / row-11 issues in §2.4 while authors are
+   iterating).
+8. **Tests** in `tests/unit/importTemplatesXlsx.test.ts`: a fixture workbook
+   with two rows per section asserts both validation errors (unknown column,
+   bad symbol, miscategorized cell) and successful normalization. Reuse
+   Vitest patterns from `tests/unit/createFlowValidation.test.ts`.
+
+Per Ticket 16 and the roadmap, **prefer batch `.xlsx` import** over a live
+Google Sheets API in production. Authors export to `.xlsx` and a maintainer
+runs `npm run templates:import` (or CI does on a `data/template-matrix/` change).
+
+---
+
+## 8. APIs
+
+Two read endpoints. Both follow §4.1 conventions exactly: `dbUnavailable()`
+guard → server helper from `lib/server/templateMethods.ts` →
+`NextResponse.json({ ... })`.
+
+### 8.1 `GET /api/templates` (rewrite)
+
+Query params (all optional):
+
+- `facet.size=<chipId>` (repeatable)
+- `facet.orgType=<chipId>` (repeatable)
+- `facet.scale=<chipId>` (repeatable)
+- `facet.maturity=<chipId>` (repeatable)
+
+Behavior:
+
+- No params → existing curated ordering (`featured`, `sortOrder`, `title`),
+  no scoring.
+- With facets → score each template by counting matching facets across the
+  methods referenced in its `body`; return ranked `templates` plus an
+  optional `scores` map.
+
+Response:
+
+```ts
+{
+  templates: RuleTemplateDto[],
+  scores?: Record<string, { score: number; matchedFacets: string[] }>
+}
+```
+
+Param parsing helper lives next to `listRuleTemplatesFromDb` in
+`lib/server/ruleTemplates.ts` (e.g. `parseTemplateFacetsFromSearchParams`).
+
+### 8.2 `GET /api/template-methods?section=<section>[&facet.*=...]`
+
+Powers the four card-deck wizard steps and the section-level recommendation
+view. Response:
+
+```ts
+{
+  section: "communication" | "membership" | "decisionMaking" | "conflictManagement",
+  methods: Array<{
+    slug: string;
+    label: string;
+    description: string;
+    modalSections: Record<string, string>;
+    scalars?: Record<string, number>;
+    /** Per-method facet match against the requested facets (omitted when no facets passed). */
+    matches?: { score: number; matchedFacets: string[] };
+  }>
+}
+```
+
+Server helper: `listTemplateMethodsFromDb({ section, facets })` in
+`lib/server/templateMethods.ts`. Same swallow-and-return-`[]` failure mode as
+`listRuleTemplatesFromDb`.
+
+### 8.3 `POST /api/templates/recommend` (follow-up, optional)
+
+If product wants to send the full `CreateFlowState` (not just facet ids), the
+body schema **reuses** `createFlowStateSchema` from
+`lib/server/validation/createFlowSchemas.ts`. Same scoring engine, just a
+richer input. Skip until §8.1 + §8.2 ship.
+
+**Empty / partial facets:** never error. Fall back to today's ordering and
+return all rows.
+
+---
+
+## 9. Wizard wiring (UI follow-on, not strictly part of CR-88)
+
+Once the API exists:
+
+- `communication-methods` / `membership-methods` / `decision-approaches` /
+  `conflict-management` screens each call
+  `GET /api/template-methods?section=...&facet.*=...`. The card label and
+  modal copy come from the API response, not from
+  `messages/en/create/<section>.json`. Static JSON in those four files is
+  pruned to the page-level strings (header titles, button labels, modal
+  chrome) only.
+- Selecting a template on the marketing home or `templates/` page can prefill
+  the create flow's `selected*MethodIds` from the template's composition (this
+  closes the `?template=` no-op gap noted in
+  `CreateFlowLayoutClient.tsx`).
+- Recommendations should never **hide** options from the user — ranking only.
+  Authors expect to see "all 32 decision-making patterns" with the ✓-matching
+  ones surfaced first.
+
+---
+
+## 10. Open questions for product before coding
+
+1. **Should `Values` also be sheet-driven?** Today it's free-text only and
+   not in any of the four matrices. Roadmap implies eventual parity.
+2. **Scoring vs filtering**: do we want to **hide** non-✓ rows when a facet
+   is set, or only **rank** them? Recommend ranking with a soft cutoff.
+3. **Per-template featured composition vs library-wide**: should
+   `RuleTemplate` rows continue to exist as named compositions
+   ("Consensus", "Elected Board", etc.), or become derived from a
+   "this is the best mix for nonprofit + 13–100 + early stage" scoring? Doc
+   today assumes the former — templates remain curated.
+4. **Authoring source of truth**: are the `Downloads/*.xlsx` files committed
+   to `data/template-matrix/` going forward, or do they live in a Drive folder
+   pulled by the importer at build time? Recommend committing.
+5. **Data validation strictness**: the current Decision-making sheet has a
+   miscategorized cell (row 32, see §2.4). Importer should fail by default,
+   with a `--allow-warnings` flag for in-progress edits.
+
+---
+
+## 11. Test plan (acceptance for CR-88)
+
+- [ ] `scripts/import-templates-xlsx.ts` runs end-to-end on the four committed
+      workbooks with no errors and produces the expected DB diff (or JSON
+      snapshot).
+- [ ] Editing a row in the source workbook and re-running the importer changes
+      the rank order returned by `GET /api/templates?facet.orgType=4`
+      (the `Nonprofit` chip id) without any manual Studio edit.
+- [ ] `tests/unit/importTemplatesXlsx.test.ts` rejects each documented
+      validation failure (unknown column, bad symbol, miscategorized row).
+- [ ] `tests/unit/templateRecommendationSchemas.test.ts` exercises the Zod
+      schemas the importer and API share.
+- [ ] Manual smoke on the four wizard card-deck steps: facet-narrowed
+      ordering surfaces matching cards first; facetless GET returns the
+      full curated list.
+- [ ] No regression in existing template surfaces (marketing home, templates
+      index, review-template preview).
+
+---
+
+## 12. Source files referenced
+
+- `prisma/schema.prisma` — `RuleTemplate` model (lines 64–73).
+- `prisma/seed.ts` — current curated composition + xlsx-shaped helpers
+  (lines 1–404).
+- `app/api/templates/route.ts` — existing GET endpoint (to be rewritten).
+- `app/api/drafts/me/route.ts` — reference route shape (`dbUnavailable` →
+  `getSessionUser` → `readLimitedJson` → `safeParse` → `jsonFromZodError`).
+- `lib/server/db.ts` — Prisma singleton (lines 1–18).
+- `lib/server/responses.ts` — `dbUnavailable()` (lines 1–8).
+- `lib/server/ruleTemplates.ts` — `listRuleTemplatesFromDb` (lines 9–30).
+- `lib/server/validation/createFlowSchemas.ts` — schema to reuse for
+  `POST /api/templates/recommend` (lines 47–106).
+- `lib/server/validation/requestBody.ts` — `readLimitedJson` (lines 13–48).
+- `lib/server/validation/zodHttp.ts` — `jsonFromZodError` (lines 4–17).
+- `lib/server/validation/plainJson.ts` — `assertPlainJsonValue` /
+  `DEFAULT_PLAIN_JSON_LIMITS`.
+- `lib/logger.ts` — server-side `logger`.
+- `app/create/types.ts` — `CreateFlowState` and facet fields.
+- `app/create/utils/flowSteps.ts` — canonical step order.
+- `app/create/utils/createFlowScreenRegistry.ts` — screen layout per step.
+- `app/create/screens/select/CommunityStructureSelectScreen.tsx` — chip-id
+  derivation pattern (positional `String(i+1)`).
+- `app/create/screens/card/CommunicationMethodsScreen.tsx` — section-field
+  contract (`SECTION_FIELDS`).
+- `messages/en/create/{communitySize,communityStructure,communication,membership,rightRail,conflictManagement}.json` —
+  current static card / chip copy that the matrix supersedes.
+- `lib/templates/governanceTemplateCatalog.ts`,
+  `lib/templates/templateGridPresentation.ts`,
+  `lib/create/fetchTemplates.ts` — current presentation/DTO layer.
+- `tests/unit/createFlowValidation.test.ts` — Vitest pattern for new
+  schema/importer tests.
+- Roadmap: `docs/backend-roadmap.md` §4 (lines 83–85), §13.
+- Spec: `docs/backend-linear-tickets.md` Ticket 16 (lines 280–304).
+
+## 13. Source workbooks
+
+| File | Sheet | Rows | Cols | Section |
+|---|---|---|---|---|
+| `Communication Methods.xlsx` | `Current` | 11 cards | 24 | `communication` |
+| `Group_Membership_Methods.xlsx` | `Current` | 19 cards | 24 | `membership` |
+| `Decision-making.xlsx` | `Current` | 32 cards | 26 | `decisionMaking` |
+| `Conflict Management Methods.xlsx` | `Current` | 19 cards | 25 | `conflictManagement` |
+
+Counts include the header row. Decision-making has 26 columns because of two
+extra content fields (`Consensus Level`, `Step-by-Step Instructions` vs the
+4-section pattern of the others).
diff --git a/messages/en/create/communication.json b/messages/en/create/communication.json
index 8225070..cc915ba 100644
--- a/messages/en/create/communication.json
+++ b/messages/en/create/communication.json
@@ -79,6 +79,42 @@
         "logisticsAdmin": "The host manages technical security via waiting rooms to prevent intrusion. Culturally, the focus is on maximizing the value of synchronous time. Norms include muting when not speaking, using the \"Raise Hand\" feature to queue, and utilizing the chat box for non-interruptive side comments. Distractions should be minimized.",
         "codeOfConduct": "We have a zero-tolerance policy for racism, sexism, and bigotry, whether spoken or shared in the chat. We aspire to do no harm. \"Zoom-bombing\" or broadcasting graphic content is prohibited. Willfully spreading obviously false information will not be tolerated. Do not discuss sensitive data that could attract legal or security risk."
       }
+    },
+    "4": {
+      "title": "Label",
+      "description": "Collaborative work to reach a resolution that all parties can agree upon.",
+      "sections": {
+        "corePrinciple": "",
+        "logisticsAdmin": "",
+        "codeOfConduct": ""
+      }
+    },
+    "5": {
+      "title": "Label",
+      "description": "Structured sessions where parties collaboratively resolve disputes.",
+      "sections": {
+        "corePrinciple": "",
+        "logisticsAdmin": "",
+        "codeOfConduct": ""
+      }
+    },
+    "6": {
+      "title": "Label",
+      "description": "Members vote to resolve a dispute democratically.",
+      "sections": {
+        "corePrinciple": "",
+        "logisticsAdmin": "",
+        "codeOfConduct": ""
+      }
+    },
+    "7": {
+      "title": "Label",
+      "description": "Invite-only",
+      "sections": {
+        "corePrinciple": "",
+        "logisticsAdmin": "",
+        "codeOfConduct": ""
+      }
     }
   }
 }
diff --git a/messages/en/create/conflictManagement.json b/messages/en/create/conflictManagement.json
index 2a8b625..b8b7e86 100644
--- a/messages/en/create/conflictManagement.json
+++ b/messages/en/create/conflictManagement.json
@@ -14,6 +14,16 @@
     "description": "Confirm to select this option.",
     "nextButtonText": "Confirm"
   },
+  "addApproach": {
+    "nextButtonText": "Add Approach"
+  },
+  "sectionHeadings": {
+    "corePrinciple": "Core Principle",
+    "applicableScope": "Applicable Scope",
+    "processProtocol": "Process Protocol",
+    "restorationFallbacks": "Restoration & Fallbacks"
+  },
+  "scopeAddButtonLabel": "Add Applicable Scope",
   "cards": {
     "peer-mediation": {
       "label": "Peer Mediation",
@@ -51,26 +61,83 @@
   "modals": {
     "peer-mediation": {
       "title": "Peer Mediation",
-      "description": "Trained members within the organization mediate disputes among peers."
+      "description": "Trained members within the organization mediate disputes among peers.",
+      "sections": {
+        "corePrinciple": "We democratize conflict skills. Instead of relying on professional outsiders, trained peers help their colleagues resolve disputes, reinforcing the idea that we take care of each other.",
+        "applicableScope": ["Low-level friction", "Misunderstandings"],
+        "processProtocol": "A volunteer peer (who is not a manager) invites the disputants to a private chat. Using a simple script, they ask questions like 'Tell us your side,' 'Tell us what you need,' and 'What can you agree to?'. The peer keeps the conversation focused on future interactions rather than past grievances. The disputants retain full control over the resolution.",
+        "restorationFallbacks": "The goal is a verbal agreement to try a new way of interacting. If the peer mediator determines the issue is too complex or involves serious harassment, they are required to refer the case to professional Mediation or a Judicial Committee."
+      }
     },
     "conflict-resolution-council": {
       "title": "Conflict Resolution Council",
-      "description": "Senior members with institutional knowledge provide guidance or decisions."
+      "description": "Senior members with institutional knowledge provide guidance or decisions.",
+      "sections": {
+        "corePrinciple": "",
+        "applicableScope": [],
+        "processProtocol": "",
+        "restorationFallbacks": ""
+      }
     },
     "facilitated-negotiation": {
       "title": "Facilitated Negotiation",
-      "description": "A neutral facilitator helps guide the negotiation process."
+      "description": "A neutral facilitator helps guide the negotiation process.",
+      "sections": {
+        "corePrinciple": "",
+        "applicableScope": [],
+        "processProtocol": "",
+        "restorationFallbacks": ""
+      }
     },
     "ad-hoc-arbitration": {
       "title": "Ad Hoc Arbitration",
-      "description": "Arbitrators are chosen specifically for a particular case."
+      "description": "Arbitrators are chosen specifically for a particular case.",
+      "sections": {
+        "corePrinciple": "",
+        "applicableScope": [],
+        "processProtocol": "",
+        "restorationFallbacks": ""
+      }
     },
     "conflict-workshops": {
       "title": "Conflict Workshops",
-      "description": "Structured sessions where parties collaboratively resolve disputes and improve future interactions."
+      "description": "Structured sessions where parties collaboratively resolve disputes and improve future interactions.",
+      "sections": {
+        "corePrinciple": "",
+        "applicableScope": [],
+        "processProtocol": "",
+        "restorationFallbacks": ""
+      }
     },
-    "6": { "title": "Label", "description": "Additional conflict management approach." },
-    "7": { "title": "Label", "description": "Additional conflict management approach." },
-    "8": { "title": "Label", "description": "Additional conflict management approach." }
+    "6": {
+      "title": "Label",
+      "description": "Additional conflict management approach.",
+      "sections": {
+        "corePrinciple": "",
+        "applicableScope": [],
+        "processProtocol": "",
+        "restorationFallbacks": ""
+      }
+    },
+    "7": {
+      "title": "Label",
+      "description": "Additional conflict management approach.",
+      "sections": {
+        "corePrinciple": "",
+        "applicableScope": [],
+        "processProtocol": "",
+        "restorationFallbacks": ""
+      }
+    },
+    "8": {
+      "title": "Label",
+      "description": "Additional conflict management approach.",
+      "sections": {
+        "corePrinciple": "",
+        "applicableScope": [],
+        "processProtocol": "",
+        "restorationFallbacks": ""
+      }
+    }
   }
 }
diff --git a/messages/en/create/membership.json b/messages/en/create/membership.json
index 66b3959..a7337c4 100644
--- a/messages/en/create/membership.json
+++ b/messages/en/create/membership.json
@@ -14,6 +14,14 @@
     "description": "Confirm to select this option.",
     "nextButtonText": "Confirm"
   },
+  "addPlatform": {
+    "nextButtonText": "Add Platform"
+  },
+  "sectionHeadings": {
+    "eligibility": "Eligibility & Philosophy",
+    "joiningProcess": "Joining Process",
+    "expectations": "Expectations & Removal"
+  },
   "cards": {
     "open-access": {
       "label": "Open Access",
@@ -51,26 +59,75 @@
   "modals": {
     "open-access": {
       "title": "Open Access",
-      "description": "Maximum inclusion. Anyone can join immediately by simply showing up."
+      "description": "Maximum inclusion. Anyone can join immediately by simply showing up.",
+      "sections": {
+        "eligibility": "Membership is open to any individual who lives in [Region/Context] and supports our mission. We believe that gatekeeping creates unnecessary hierarchy, so we prioritize radical inclusivity and low barriers to entry. Our only requirement is a commitment to mutual respect and adherence to the Community Code of Conduct.",
+        "joiningProcess": "There is no formal application or waiting period. A person becomes a member instantly by joining our [Digital Platform/Meeting], introducing themselves to the group, and explicitly agreeing to the community standards. Access to all channels and working groups is granted immediately upon sign-up.",
+        "expectations": "Members are expected to participate constructively. We view removal as a last resort. Barring immediate safety threats, no member will be banned without first going through the steps outlined in our Conflict Management Policy. We prioritize the restorative measures defined in that section over punitive expulsion. However, refusal to engage in that process may result in removal."
+      }
     },
     "orientation-required": {
       "title": "Orientation Required",
-      "description": "Newcomers must attend a training or orientation session."
+      "description": "Newcomers must attend a training or orientation session.",
+      "sections": {
+        "eligibility": "",
+        "joiningProcess": "",
+        "expectations": ""
+      }
     },
     "invitation-only": {
       "title": "Invitation Only",
-      "description": "New members can only join if they are 'vouched for' by existing members."
+      "description": "New members can only join if they are 'vouched for' by existing members.",
+      "sections": {
+        "eligibility": "",
+        "joiningProcess": "",
+        "expectations": ""
+      }
     },
     "contribution-based": {
       "title": "Contribution Based",
-      "description": "Membership is reserved for people contributing their labor."
+      "description": "Membership is reserved for people contributing their labor.",
+      "sections": {
+        "eligibility": "",
+        "joiningProcess": "",
+        "expectations": ""
+      }
     },
     "mentorship": {
       "title": "Mentorship",
-      "description": "New members are paired with 'Mentors' to guide them through a probationary period."
+      "description": "New members are paired with 'Mentors' to guide them through a probationary period.",
+      "sections": {
+        "eligibility": "",
+        "joiningProcess": "",
+        "expectations": ""
+      }
     },
-    "6": { "title": "Label", "description": "Additional membership approach." },
-    "7": { "title": "Label", "description": "Additional membership approach." },
-    "8": { "title": "Label", "description": "Additional membership approach." }
+    "6": {
+      "title": "Label",
+      "description": "Additional membership approach.",
+      "sections": {
+        "eligibility": "",
+        "joiningProcess": "",
+        "expectations": ""
+      }
+    },
+    "7": {
+      "title": "Label",
+      "description": "Additional membership approach.",
+      "sections": {
+        "eligibility": "",
+        "joiningProcess": "",
+        "expectations": ""
+      }
+    },
+    "8": {
+      "title": "Label",
+      "description": "Additional membership approach.",
+      "sections": {
+        "eligibility": "",
+        "joiningProcess": "",
+        "expectations": ""
+      }
+    }
   }
 }
diff --git a/messages/en/create/rightRail.json b/messages/en/create/rightRail.json
index 4855828..4f53ce5 100644
--- a/messages/en/create/rightRail.json
+++ b/messages/en/create/rightRail.json
@@ -19,6 +19,39 @@
     "toggleSeeAll": "See all decision approaches",
     "toggleShowLess": "Show less"
   },
+  "confirmModal": {
+    "title": "Confirm selection",
+    "description": "Confirm to select this option.",
+    "nextButtonText": "Confirm"
+  },
+  "addApproach": {
+    "nextButtonText": "Add Approach"
+  },
+  "sectionHeadings": {
+    "corePrinciple": "Core Principle",
+    "applicableScope": "Applicable Scope",
+    "stepByStepInstructions": "Step-by-Step Instructions",
+    "consensusLevel": "Consensus Level",
+    "objectionsDeadlocks": "Objections & Deadlocks"
+  },
+  "scopeAddButtonLabel": "Add Applicable Scope",
+  "modals": {
+    "lazy-consensus": {
+      "title": "Lazy Consensus",
+      "description": "A decision is assumed approved unless objections are raised within a specified timeframe.",
+      "sections": {
+        "corePrinciple": "We prioritize momentum and trust over bureaucracy. By assuming good faith, we avoid bottlenecks; silence is interpreted as consent to keep the work moving.",
+        "applicableScope": [
+          "Daily Operations",
+          "Minor Expenditures",
+          "Working Group Decisions"
+        ],
+        "stepByStepInstructions": "Post your proposal to the relevant channel with a specific deadline, such as 'Merging in 72 hours.' If the deadline passes without any objections, you are authorized to proceed. Explicit support is welcome but not required.",
+        "consensusLevel": 90,
+        "objectionsDeadlocks": "Any member can pause the process by raising a 'Block' or 'Concern' before the deadline. The proposer is then required to pause execution and engage in a dialogue to resolve the concern. If the disagreement cannot be resolved asynchronously, the proposal is escalated to a synchronous meeting or a higher governance tier for a final decision."
+      }
+    }
+  },
   "cards": [
     {
       "id": "lazy-consensus",
diff --git a/stories/pages/RightRailPage.stories.js b/stories/pages/DecisionApproachesPage.stories.js
similarity index 75%
rename from stories/pages/RightRailPage.stories.js
rename to stories/pages/DecisionApproachesPage.stories.js
index 888e126..1ab27b8 100644
--- a/stories/pages/RightRailPage.stories.js
+++ b/stories/pages/DecisionApproachesPage.stories.js
@@ -1,8 +1,8 @@
-import { RightRailScreen } from "../../app/create/screens/right-rail/RightRailScreen";
+import { DecisionApproachesScreen } from "../../app/create/screens/right-rail/DecisionApproachesScreen";
 
 export default {
-  title: "Pages/Create Flow/Right rail",
-  component: RightRailScreen,
+  title: "Pages/Create Flow/Decision approaches",
+  component: DecisionApproachesScreen,
   parameters: {
     layout: "fullscreen",
     docs: {
diff --git a/tests/pages/right-rail.test.jsx b/tests/pages/decision-approaches.test.jsx
similarity index 80%
rename from tests/pages/right-rail.test.jsx
rename to tests/pages/decision-approaches.test.jsx
index 472df10..3a9c912 100644
--- a/tests/pages/right-rail.test.jsx
+++ b/tests/pages/decision-approaches.test.jsx
@@ -6,15 +6,15 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
-import { RightRailScreen } from "../../app/create/screens/right-rail/RightRailScreen";
+import { DecisionApproachesScreen } from "../../app/create/screens/right-rail/DecisionApproachesScreen";
 
 afterEach(() => {
   cleanup();
 });
 
-describe("Create flow right-rail page", () => {
+describe("Create flow decision-approaches page", () => {
   test("renders without error", () => {
-    render(<RightRailScreen />);
+    render(<DecisionApproachesScreen />);
 
     expect(
       screen.getByRole("heading", {
@@ -24,7 +24,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders sidebar description with add link", () => {
-    render(<RightRailScreen />);
+    render(<DecisionApproachesScreen />);
 
     const description = screen.getByText((content, element) => {
       if (element?.tagName !== "P") return false;
@@ -39,7 +39,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders message box with title and checkboxes", () => {
-    render(<RightRailScreen />);
+    render(<DecisionApproachesScreen />);
 
     const region = screen.getByRole("region", {
       name: "Consider defining approaches to steward key resources:",
@@ -65,7 +65,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders card stack with See all decision approaches toggle", () => {
-    render(<RightRailScreen />);
+    render(<DecisionApproachesScreen />);
 
     expect(
       screen.getByRole("button", { name: "See all decision approaches" }),
@@ -73,7 +73,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders recommended approach cards", () => {
-    render(<RightRailScreen />);
+    render(<DecisionApproachesScreen />);
 
     expect(
       screen.getByRole("button", {
@@ -94,7 +94,7 @@ describe("Create flow right-rail page", () => {
 
   test("toggle expands and shows Show less", async () => {
     const user = userEvent.setup();
-    render(<RightRailScreen />);
+    render(<DecisionApproachesScreen />);
 
     const toggle = screen.getByRole("button", {
       name: "See all decision approaches",
@@ -108,7 +108,7 @@ describe("Create flow right-rail page", () => {
 
   test("expanded view shows Label cards", async () => {
     const user = userEvent.setup();
-    render(<RightRailScreen />);
+    render(<DecisionApproachesScreen />);
 
     const toggle = screen.getByRole("button", {
       name: "See all decision approaches",
@@ -119,21 +119,29 @@ describe("Create flow right-rail page", () => {
     expect(labelButtons.length).toBeGreaterThanOrEqual(1);
   });
 
-  test("clicking a card toggles selection", async () => {
+  test("clicking a card opens the create modal and confirming selects it", async () => {
     const user = userEvent.setup();
-    render(<RightRailScreen />);
+    render(<DecisionApproachesScreen />);
 
     const card = screen.getByRole("button", {
       name: /Lazy Consensus: A decision is assumed approved/,
     });
     await user.click(card);
 
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toBeInTheDocument();
+
+    const confirmButton = within(dialog).getByRole("button", {
+      name: "Add Approach",
+    });
+    await user.click(confirmButton);
+
     expect(screen.getByText("SELECTED")).toBeInTheDocument();
   });
 
   test("message box checkboxes are interactive", async () => {
     const user = userEvent.setup();
-    render(<RightRailScreen />);
+    render(<DecisionApproachesScreen />);
 
     const amendCheckbox = screen.getByRole("checkbox", {
       name: "Amend your CommunityRule",

From f866d11ff81087218e9c6e895baa7b4c9487fdbf Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sat, 18 Apr 2026 09:33:24 -0600
Subject: [PATCH 07/15] Establish cursor rules

---
 .cursor/rules/api-routes.mdc                  |  76 +++++++++++
 .cursor/rules/component-props.mdc             |  59 +++++++++
 .cursor/rules/component-structure.mdc         |  64 +++++++++
 .cursor/rules/create-flow.mdc                 |  52 ++++++++
 .cursor/rules/localization.mdc                |  59 +++++++++
 .cursor/rules/storybook.mdc                   | 105 +++++++++++++++
 .cursor/rules/tailwind-styling.mdc            |  37 ++++++
 .cursor/rules/testing.mdc                     |  72 ++++++++++
 .../Incrementer/Incrementer.container.tsx     |  57 ++++++++
 .../controls/Incrementer/Incrementer.types.ts |  37 ++++++
 .../{Incrementer.tsx => Incrementer.view.tsx} |  80 +++--------
 .../controls/Incrementer/IncrementerBlock.tsx |  72 ----------
 app/components/controls/Incrementer/index.tsx |  10 +-
 .../IncrementerBlock.container.tsx            |  38 ++++++
 .../IncrementerBlock.types.ts                 |  41 ++++++
 .../IncrementerBlock.view.tsx                 |  39 ++++++
 .../controls/IncrementerBlock/index.tsx       |   2 +
 .../CreateFlowTwoColumnSelectShell.tsx        |   2 +-
 app/create/components/ModalTextAreaField.tsx  |  14 +-
 .../right-rail/DecisionApproachesScreen.tsx   |   2 +-
 stories/buttons/InlineTextButton.stories.js   |  57 ++++++++
 stories/controls/Incrementer.stories.js       | 101 ++++++++++++++
 stories/controls/IncrementerBlock.stories.js  | 113 ++++++++++++++++
 .../ApplicableScopeField.stories.js           |  89 +++++++++++++
 .../create-flow/ModalTextAreaField.stories.js |  72 ++++++++++
 .../components/ApplicableScopeField.test.tsx  | 122 +++++++++++++++++
 tests/components/Incrementer.test.tsx         | 125 ++++++++++++++++++
 tests/components/IncrementerBlock.test.tsx    |  93 +++++++++++++
 tests/components/InlineTextButton.test.tsx    |  77 +++++++++++
 tests/components/ModalTextAreaField.test.tsx  |  88 ++++++++++++
 30 files changed, 1711 insertions(+), 144 deletions(-)
 create mode 100644 .cursor/rules/api-routes.mdc
 create mode 100644 .cursor/rules/component-props.mdc
 create mode 100644 .cursor/rules/component-structure.mdc
 create mode 100644 .cursor/rules/create-flow.mdc
 create mode 100644 .cursor/rules/localization.mdc
 create mode 100644 .cursor/rules/storybook.mdc
 create mode 100644 .cursor/rules/tailwind-styling.mdc
 create mode 100644 .cursor/rules/testing.mdc
 create mode 100644 app/components/controls/Incrementer/Incrementer.container.tsx
 create mode 100644 app/components/controls/Incrementer/Incrementer.types.ts
 rename app/components/controls/Incrementer/{Incrementer.tsx => Incrementer.view.tsx} (52%)
 delete mode 100644 app/components/controls/Incrementer/IncrementerBlock.tsx
 create mode 100644 app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx
 create mode 100644 app/components/controls/IncrementerBlock/IncrementerBlock.types.ts
 create mode 100644 app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx
 create mode 100644 app/components/controls/IncrementerBlock/index.tsx
 create mode 100644 stories/buttons/InlineTextButton.stories.js
 create mode 100644 stories/controls/Incrementer.stories.js
 create mode 100644 stories/controls/IncrementerBlock.stories.js
 create mode 100644 stories/create-flow/ApplicableScopeField.stories.js
 create mode 100644 stories/create-flow/ModalTextAreaField.stories.js
 create mode 100644 tests/components/ApplicableScopeField.test.tsx
 create mode 100644 tests/components/Incrementer.test.tsx
 create mode 100644 tests/components/IncrementerBlock.test.tsx
 create mode 100644 tests/components/InlineTextButton.test.tsx
 create mode 100644 tests/components/ModalTextAreaField.test.tsx

diff --git a/.cursor/rules/api-routes.mdc b/.cursor/rules/api-routes.mdc
new file mode 100644
index 0000000..79d428c
--- /dev/null
+++ b/.cursor/rules/api-routes.mdc
@@ -0,0 +1,76 @@
+---
+description: App Router API handler conventions (Next.js + Prisma + Zod)
+globs: app/api/**/*.ts,lib/server/**/*.ts
+alwaysApply: false
+---
+
+# API route anatomy
+
+Every DB-touching handler in `app/api/**/route.ts` follows the same skeleton.
+Keep new routes within this shape so auth, config, and validation stay uniform.
+
+1. **Config guard (first line of the handler).**
+
+   ```typescript
+   if (!isDatabaseConfigured()) return dbUnavailable();
+   ```
+
+   From `lib/server/env` + `lib/server/responses`. Returns a consistent 503
+   when `DATABASE_URL` is missing (local dev, preview builds).
+
+2. **Auth (when the route requires a user).**
+
+   ```typescript
+   const user = await getSessionUser();
+   if (!user) {
+     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+   }
+   ```
+
+   From `lib/server/session`. Never read session cookies or tokens directly.
+
+3. **Body parsing + validation (POST/PUT/PATCH).**
+
+   ```typescript
+   const parsed = await readLimitedJson(request);
+   const result = mySchema.safeParse(parsed);
+   if (!result.success) return jsonFromZodError(result.error);
+   ```
+
+   Helpers live in `lib/server/validation/{requestBody,zodHttp}.ts`. All
+   payload schemas belong in `lib/server/validation/*.ts` (today:
+   `createFlowSchemas.ts`) — colocate new schemas there rather than inline in
+   the route.
+
+4. **Prisma access** via `import { prisma } from "lib/server/db"`. Do not
+   instantiate `PrismaClient` directly.
+
+5. **Responses** via `NextResponse.json(...)`. Shared shapes (`dbUnavailable`)
+   live in `lib/server/responses.ts`; add new shared responses there when a
+   pattern repeats in two routes.
+
+# Server-only isolation
+
+`lib/server/*` is the server boundary. Anything that:
+
+- imports `@prisma/client`,
+- reads secrets from `env`,
+- sends email, hashes tokens, or touches sessions
+
+…lives under `lib/server/`. Never import `lib/server/*` from client
+components, `app/components/**`, or any file marked `"use client"`. Shared
+logic safe for both sides goes in `lib/*`.
+
+# Deferred — follow existing code, don't invent
+
+These areas are still settling. Match whatever the nearest route already does
+instead of introducing new patterns:
+
+- **Rate limiting.** `lib/server/rateLimit.ts` is an in-memory stopgap marked
+  for replacement. Reuse `rateLimitKey()` where limiting is needed; don't
+  design a new limiter.
+- **Error response shape.** Currently `{ error: string }` + HTTP status. No
+  error codes yet — don't add a taxonomy until one is designed.
+- **Pagination / filtering.** Only `rules/route.ts` paginates (`take` capped
+  at 100). Mirror it if you add list endpoints; don't invent cursors or
+  offset contracts unilaterally.
diff --git a/.cursor/rules/component-props.mdc b/.cursor/rules/component-props.mdc
new file mode 100644
index 0000000..d906ffc
--- /dev/null
+++ b/.cursor/rules/component-props.mdc
@@ -0,0 +1,59 @@
+---
+description: Figma ↔ codebase prop alignment & normalization for design-system components
+globs: app/components/**/*.{ts,tsx}
+alwaysApply: false
+---
+
+# Component prop alignment
+
+Figma emits PascalCase enum values (`"Standard"`, `"Inverse"`); the codebase
+stores lowercase (`"standard"`, `"inverse"`). Components must accept **both**,
+normalize to lowercase internally, and never break existing consumer call
+sites.
+
+## Scope
+
+Applies to enum-like string props: `variant`, `size`, `state`, `mode`, `type`,
+`position`, `alignment`, `status`, `color`, `palette`. **Skip** for free-form
+strings (URLs, classNames), booleans, numbers, or internal-only props.
+
+## Pattern
+
+```typescript
+// Type accepts both formats
+export type ComponentSizeValue = "small" | "medium" | "Small" | "Medium";
+
+// Container normalizes via helpers from lib/propNormalization.ts
+import { normalizeSize } from "../../../lib/propNormalization";
+
+const ComponentContainer = ({ size: sizeProp = "small" }: Props) => {
+  const size = normalizeSize(sizeProp, SIZE_OPTIONS, "small");
+  return <ComponentView size={size} />;
+};
+```
+
+## Normalizers
+
+Use an existing helper from `lib/propNormalization.ts` before writing a new
+one. Generic: `normalizeMode`, `normalizeState`, `normalizeInputState`,
+`normalizeSize`, `normalizeAlignment`, `normalizeSmallMediumLargeSize`,
+`normalizeLabelVariant`. Component-specific variants are named
+`normalize<Component><Prop>` (e.g. `normalizeChipPalette`,
+`normalizeButtonState`) — add one there rather than inlining a switch in your
+container.
+
+## Figma traceability
+
+Every DS component's container docstring cites its Figma origin so designers
+and engineers can jump between the two. Format: `Figma: "<Component Path>"
+(<node-id>)`.
+
+```typescript
+/**
+ * Figma: "Control / Incrementer" (`17857:30943`). A compact [ - value + ]
+ * row used for numeric step inputs…
+ */
+```
+
+When the view renders a distinct Figma node, add `data-figma-node="<id>"` on
+the root element for quick DOM-to-design lookup.
diff --git a/.cursor/rules/component-structure.mdc b/.cursor/rules/component-structure.mdc
new file mode 100644
index 0000000..6bd9f32
--- /dev/null
+++ b/.cursor/rules/component-structure.mdc
@@ -0,0 +1,64 @@
+---
+description: File-structure conventions for design-system components
+globs: app/components/**/*.{ts,tsx}
+alwaysApply: false
+---
+
+# Component file structure
+
+## Split-file pattern (default)
+
+Anything in `app/components/controls/**` and `app/components/utility/**` uses
+a **4-file split**, one folder per component:
+
+```
+app/components/controls/<Name>/
+  <Name>.types.ts        // Public Props + internal ViewProps
+  <Name>.view.tsx        // "use client"; pure render; exports memo(view)
+  <Name>.container.tsx   // "use client"; memo; prop normalization & logic
+  index.tsx              // re-exports default + public types
+```
+
+**Container** (`<Name>.container.tsx`):
+
+- Marked `"use client"`.
+- Receives `<Name>Props`; normalizes PascalCase enums via
+  `lib/propNormalization.ts`; computes derived state (clamps, ids, bounds).
+- Renders `<<Name>View />` with already-normalized `<Name>ViewProps`.
+- Default export: `memo(<Name>Container)` with `.displayName = "<Name>"`.
+
+**View** (`<Name>.view.tsx`):
+
+- Marked `"use client"`.
+- Pure render of `<Name>ViewProps`. No prop normalization, no data fetching,
+  no derived business logic.
+- Default export: `memo(<Name>View)` with
+  `.displayName = "<Name>View"`.
+
+**Types** (`<Name>.types.ts`):
+
+- Export `<Name>Props` (consumer-facing, accepts PascalCase + lowercase).
+- Export `<Name>ViewProps` (already-normalized shape the view consumes).
+- Export any locally-defined value types (`<Name>SizeValue`, etc.).
+
+**Index** (`index.tsx`):
+
+```typescript
+export { default } from "./<Name>.container";
+export type { <Name>Props } from "./<Name>.types";
+```
+
+## Single-file pattern (exception)
+
+`app/components/buttons/*.tsx` and other trivially-presentational components
+can stay as a single file when they have **no enum prop normalization and no
+derived state** (e.g. `Button.tsx`, `InlineTextButton.tsx`). If you find
+yourself adding state, enum normalization, or more than a handful of props,
+promote it to the split pattern.
+
+## Wrapper / group components
+
+Related composites live in a **sibling folder**, not inside the base
+component's folder — mirror `CheckboxGroup/` ↔ `Checkbox/`,
+`IncrementerBlock/` ↔ `Incrementer/`, etc. Each gets its own 4-file split.
+Consumers import from the folder's `index.tsx`.
diff --git a/.cursor/rules/create-flow.mdc b/.cursor/rules/create-flow.mdc
new file mode 100644
index 0000000..e64c450
--- /dev/null
+++ b/.cursor/rules/create-flow.mdc
@@ -0,0 +1,52 @@
+---
+description: Create-flow structure & design-system reuse guardrails
+globs: app/create/**/*.{ts,tsx},messages/en/create/**/*.json
+alwaysApply: false
+---
+
+# Create-flow guardrails
+
+## Folder & file layout
+
+- Screens live in `app/create/screens/<layoutKind>/<StepIdPascal>Screen.tsx`
+  where `<layoutKind>` mirrors `CreateFlowLayoutKind` (`card`, `select`,
+  `right-rail`, `completed`, …). File + export name is the **step id**, never
+  the layout kind (e.g. `DecisionApproachesScreen`, not `RightRailScreen`).
+- Step id ↔ layout kind mapping is declared in
+  `app/create/utils/createFlowScreenRegistry.ts`. Never branch on layout kind
+  inside a screen — pick the matching shell (`CreateFlowStepShell` /
+  `CreateFlowTwoColumnSelectShell`).
+- Shared create-flow pieces go in `app/create/components/` (layout shells,
+  field composites). Generic primitives go in `app/components/`.
+
+## Use the design system — don't hand-roll
+
+Reach for these before writing new markup:
+
+| Need | Component |
+| --- | --- |
+| Labelled text-area section in a modal | `app/create/components/ModalTextAreaField` |
+| Toggle-chip row + inline "+ Add" input | `app/create/components/ApplicableScopeField` |
+| `[– value +]` numeric stepper (± label) | `app/components/controls/Incrementer` / `IncrementerBlock` |
+| Mid-paragraph "expand / see all" link button | `app/components/buttons/InlineTextButton` |
+| Help-icon + label above a control | `app/components/utility/InputLabel` (`helpIcon` prop) |
+| Toggle chip (dim-but-clickable) | `Chip` with `state="Disabled" disabled={false}` |
+| Card-click → structured creation modal | `Create` with `backdropVariant="loginYellow"` |
+
+If a screen grows a 2nd inline copy of any pattern above, **extract a shared
+component** rather than duplicate. Local section components inside a screen
+file are a smell once they're used more than once.
+
+## Copy & data
+
+- Step copy lives in `messages/en/create/<step>.json`, wired into
+  `messages/en/index.ts` under the `create:` namespace (see
+  `localization.mdc` for the standard pattern).
+- Modal `sections` defaults are DB-shaped seed placeholders, not UI
+  constants — expect replacement with live data.
+
+## Interaction tracking
+
+Every user interaction inside a create-flow screen must call
+`markCreateFlowInteraction()` from `useCreateFlow()` before mutating state —
+progress / footer logic depends on it.
diff --git a/.cursor/rules/localization.mdc b/.cursor/rules/localization.mdc
new file mode 100644
index 0000000..467d5bd
--- /dev/null
+++ b/.cursor/rules/localization.mdc
@@ -0,0 +1,59 @@
+---
+description: Text localization via messages/ bundles and useMessages()
+globs: messages/**/*.{ts,json}
+alwaysApply: false
+---
+
+# Text localization
+
+All user-visible copy lives in the typed messages bundle under `messages/en/`
+and is read via `useMessages()` (fully typed) or `useTranslation()` (dot
+notation). Never hard-code user-facing strings in components.
+
+## File layout
+
+- `messages/en/<area>.json` for single-file areas (`common.json`,
+  `navigation.json`, `metadata.json`).
+- `messages/en/<folder>/<entry>.json` for areas with multiple buckets:
+  `components/*.json`, `pages/*.json`, `create/*.json`. One JSON per
+  component / page / create-flow step — don't shoehorn unrelated copy into
+  a shared file.
+- Optional `"_comment"` at the top of a JSON documents the bundle's purpose.
+
+## Registration — required
+
+Every new JSON must be wired into `messages/en/index.ts`:
+
+```typescript
+import createConflictManagement from "./create/conflictManagement.json";
+
+export default {
+  // …
+  create: {
+    conflictManagement: createConflictManagement,
+  },
+};
+```
+
+The default export **is** the type source for `useMessages()`; skipping this
+step means consumers can't read your strings and TypeScript won't flag the gap.
+
+## Access pattern
+
+```typescript
+import { useMessages } from "../contexts/MessagesContext";
+
+const m = useMessages();
+const title = m.create.conflictManagement.page.compactTitle; // fully typed
+```
+
+Use `useTranslation(namespace)` only when you need dot-path lookup by dynamic
+key; prefer direct property access for the type safety.
+
+## Key conventions
+
+- **Structural keys**: camelCase (`compactTitle`,
+  `sectionHeadings.corePrinciple`).
+- **Content ids**: match the id consumers already use (card id, step id, URL
+  segment) — typically kebab-case (`"in-person-meetings"`,
+  `"peer-mediation"`).
diff --git a/.cursor/rules/storybook.mdc b/.cursor/rules/storybook.mdc
new file mode 100644
index 0000000..a73b31c
--- /dev/null
+++ b/.cursor/rules/storybook.mdc
@@ -0,0 +1,105 @@
+---
+description: Storybook story conventions — location, naming, titles, decorators
+globs: stories/**/*.{js,jsx,ts,tsx,mdx},.storybook/**/*.{js,ts}
+alwaysApply: false
+---
+
+# Where stories live
+
+All stories live in the top-level `stories/` folder, mirroring the
+`app/components/` directory tree:
+
+| Source                            | Story location                         |
+| --------------------------------- | -------------------------------------- |
+| `app/components/controls/Chip`    | `stories/controls/Chip.stories.js`     |
+| `app/components/buttons/Button`   | `stories/buttons/Button.stories.js`    |
+| `app/create/screens/.../FooScreen`| `stories/pages/FooPage.stories.js`     |
+
+Do **not** colocate `*.stories.*` next to components. The Storybook config
+(`.storybook/main.js`) only globs `stories/**`.
+
+# File naming
+
+- `<ComponentName>.stories.js` — matches 69/70 existing files.
+- Use `.tsx` only when the story genuinely needs types (rare; prefer JS to
+  match the codebase convention).
+- Variants get a suffix: `Button.visual.stories.js`,
+  `Footer.responsive.stories.js`.
+
+# Default export shape (CSF2)
+
+```javascript
+import MyComponent from "../../app/components/<area>/MyComponent";
+
+export default {
+  title: "Components/<SubFolder>/MyComponent",
+  component: MyComponent,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "Short description of what the component is for.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["filled", "outline"],
+      description: "The variant (Figma prop)",
+    },
+    onClick: { action: "clicked" },
+  },
+};
+
+export const Default = { args: { variant: "filled" } };
+```
+
+## Title hierarchy
+
+- Design-system components → `Components/<SubFolder>/<Name>` (e.g.
+  `Components/Controls/Checkbox`).
+- Pages → `Pages/<PageName>` (folder: `stories/pages/`).
+- Create flow shared pieces → `Create Flow/<Name>`.
+
+## `argTypes`
+
+For every Figma enum prop (`variant`, `size`, `state`, `mode`, `palette`,
+…) expose a `select` control listing the **lowercase** option set — even
+though the prop accepts PascalCase too. See `.cursor/rules/component-props.mdc`.
+
+# Rely on the global preview — don't re-wrap
+
+`.storybook/preview.js` already provides:
+
+- `MessagesProvider` with `messages/en` → access copy via `useMessages()`
+  inside stories exactly like app code. Never hard-code user-facing strings.
+- `app/globals.css` + `.font-inter` wrapper → design tokens and fonts are
+  already present.
+
+Do **not** add your own `MessagesProvider`, font wrapper, or token setup in a
+story. If you need a new global, update `preview.js`.
+
+# Interaction tests (`play`)
+
+Use `@storybook/test` for interaction assertions — not `@testing-library/*`
+directly. This matches `Checkbox.stories.js` and stays compatible with the
+Vitest portable-stories runner in `.storybook/vitest.setup.js`.
+
+```javascript
+import { within, userEvent, expect } from "@storybook/test";
+
+export const Interactive = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("checkbox"));
+    expect(canvas.getByRole("checkbox")).toHaveAttribute("aria-checked", "true");
+  },
+};
+```
+
+# Coverage expectation
+
+Every new component in `app/components/**` ships with a story. Screens in
+`app/create/screens/**` ship with a `stories/pages/<Name>Page.stories.js`
+entry. A new component without a story is considered incomplete.
diff --git a/.cursor/rules/tailwind-styling.mdc b/.cursor/rules/tailwind-styling.mdc
new file mode 100644
index 0000000..f3ff7c8
--- /dev/null
+++ b/.cursor/rules/tailwind-styling.mdc
@@ -0,0 +1,37 @@
+---
+description: Tailwind-first styling for all React components
+globs: app/**/*.{ts,tsx},stories/**/*.{ts,tsx}
+alwaysApply: false
+---
+
+# Tailwind-first styling
+
+Tailwind v4 is the default styling layer. Reach for utility classes + design
+tokens **before** anything else.
+
+## Priority
+
+1. **Tailwind utilities** — `className="flex items-center gap-4 p-6 rounded-lg"`.
+   Use arbitrary values (`w-[200px]`) and responsive variants (`sm:`, `lg:`)
+   as needed. Design-token CSS variables go in arbitrary values:
+   `bg-[var(--color-surface-default-primary)]`.
+2. **`style` prop** — only for values that truly change at runtime
+   (`style={{ width: `${dynamicPx}px` }}`).
+3. **Custom / global CSS** — last resort. Justified for keyframes, third-party
+   overrides, dynamic-count CSS Grid, and similar cases Tailwind can't express.
+4. **CSS-in-JS / CSS Modules** — don't introduce.
+
+## Anti-patterns
+
+```tsx
+// ❌ Opaque class names bypass the design system
+<div className="custom-container">
+  <span className="custom-text">Hello</span>
+</div>
+
+// ❌ Inline style for a static value
+<div style={{ padding: 16, borderRadius: 8 }}>…</div>
+
+// ✅ Tailwind + token
+<div className="p-4 rounded-lg bg-[var(--color-surface-default-primary)]">…</div>
+```
diff --git a/.cursor/rules/testing.mdc b/.cursor/rules/testing.mdc
new file mode 100644
index 0000000..b956e09
--- /dev/null
+++ b/.cursor/rules/testing.mdc
@@ -0,0 +1,72 @@
+---
+description: Test file layout & shared harnesses (vitest + Playwright)
+globs: tests/**/*.{ts,tsx,js,jsx}
+alwaysApply: false
+---
+
+# Testing conventions
+
+## Runner split
+
+- **Vitest** for unit, component, and page-level tests (`tests/components`,
+  `tests/pages`, `tests/unit`, `tests/contexts`, `tests/accessibility`).
+  Run via `npm test` or `npx vitest run`.
+- **Playwright** for browser e2e and visual regression (`tests/e2e`).
+  Run via `npm run e2e`. Never put Playwright specs outside `tests/e2e/`.
+
+## File layout
+
+| Path | Use |
+| --- | --- |
+| `tests/components/<Name>.test.tsx` | Design-system component tests. |
+| `tests/pages/<step>.test.jsx` | Page / screen integration tests. |
+| `tests/unit/<fn>.test.{ts,js}` | Pure logic — utilities, reducers, hooks without DOM. |
+| `tests/contexts/<Ctx>.test.tsx` | Context provider tests. |
+| `tests/accessibility/` | `jest-axe` suites (unit) and `wcag-compliance.spec.ts` (e2e). |
+| `tests/e2e/` | Playwright specs (user journeys, visual, performance). |
+
+## Providers — always use `renderWithProviders`
+
+`render` from `@testing-library/react` **skips** Messages/AuthModal/CreateFlow
+providers. Import the wrapped version instead:
+
+```typescript
+import {
+  renderWithProviders as render,
+  screen,
+} from "../utils/test-utils";
+```
+
+Raw `render` is only acceptable for pure-presentational components that read
+none of those contexts.
+
+## DS component suites
+
+Reuse `componentTestSuite` for standard DS coverage (renders,
+`jest-axe` a11y, keyboard navigation, disabled/error states) instead of
+rewriting each check per component:
+
+```typescript
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: MyComponent,
+  name: "MyComponent",
+  props: baseProps,
+  primaryRole: "button",
+  testCases: { renders: true, accessibility: true, keyboardNavigation: true },
+};
+componentTestSuite(config);
+```
+
+Custom interaction tests live alongside the suite in the same file.
+
+## Required imports
+
+- `import "@testing-library/jest-dom/vitest";` — required for matcher types
+  (`toBeInTheDocument`, `toHaveAttribute`, etc.).
+- `afterEach(() => cleanup())` in page-level test files where multiple
+  `render` calls run sequentially.
diff --git a/app/components/controls/Incrementer/Incrementer.container.tsx b/app/components/controls/Incrementer/Incrementer.container.tsx
new file mode 100644
index 0000000..56e9624
--- /dev/null
+++ b/app/components/controls/Incrementer/Incrementer.container.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { memo, useCallback } from "react";
+import IncrementerView from "./Incrementer.view";
+import type { IncrementerProps } from "./Incrementer.types";
+
+/**
+ * Figma: "Control / Incrementer" (`17857:30943`). A compact `[ - value + ]`
+ * row used for numeric step inputs (e.g. a percentage setting).
+ *
+ * For a labelled variant that matches "Control / Incrementer Block"
+ * (`19883:13283`), compose with `IncrementerBlock` instead.
+ */
+const IncrementerContainer = ({
+  value,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  onChange,
+  formatValue,
+  disabled = false,
+  decrementAriaLabel = "Decrease",
+  incrementAriaLabel = "Increase",
+  className = "",
+}: IncrementerProps) => {
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const atMin = clampedValue <= min;
+  const atMax = clampedValue >= max;
+
+  const handleDecrement = useCallback(() => {
+    if (disabled || atMin) return;
+    onChange(Math.max(min, clampedValue - step));
+  }, [disabled, atMin, onChange, min, clampedValue, step]);
+
+  const handleIncrement = useCallback(() => {
+    if (disabled || atMax) return;
+    onChange(Math.min(max, clampedValue + step));
+  }, [disabled, atMax, onChange, max, clampedValue, step]);
+
+  return (
+    <IncrementerView
+      displayValue={formatValue ? formatValue(clampedValue) : clampedValue}
+      disabled={disabled}
+      atMin={atMin}
+      atMax={atMax}
+      onDecrement={handleDecrement}
+      onIncrement={handleIncrement}
+      decrementAriaLabel={decrementAriaLabel}
+      incrementAriaLabel={incrementAriaLabel}
+      className={className}
+    />
+  );
+};
+
+IncrementerContainer.displayName = "Incrementer";
+
+export default memo(IncrementerContainer);
diff --git a/app/components/controls/Incrementer/Incrementer.types.ts b/app/components/controls/Incrementer/Incrementer.types.ts
new file mode 100644
index 0000000..3f1d2a0
--- /dev/null
+++ b/app/components/controls/Incrementer/Incrementer.types.ts
@@ -0,0 +1,37 @@
+export interface IncrementerProps {
+  value: number;
+  /** Minimum value (default `-Infinity`). */
+  min?: number;
+  /** Maximum value (default `Infinity`). */
+  max?: number;
+  /** Step size applied to +/- actions (default `1`). */
+  step?: number;
+  onChange: (_next: number) => void;
+  /**
+   * Optional formatter for the displayed value. Receives the raw number and
+   * should return the rendered content. Default: `String(value)`.
+   */
+  formatValue?: (_value: number) => React.ReactNode;
+  /**
+   * When true, the whole incrementer is non-interactive and the value renders
+   * in the "inactive" (tertiary) color per Figma.
+   */
+  disabled?: boolean;
+  /** Accessible label for the decrement button (default "Decrease"). */
+  decrementAriaLabel?: string;
+  /** Accessible label for the increment button (default "Increase"). */
+  incrementAriaLabel?: string;
+  className?: string;
+}
+
+export interface IncrementerViewProps {
+  displayValue: React.ReactNode;
+  disabled: boolean;
+  atMin: boolean;
+  atMax: boolean;
+  onDecrement: () => void;
+  onIncrement: () => void;
+  decrementAriaLabel: string;
+  incrementAriaLabel: string;
+  className: string;
+}
diff --git a/app/components/controls/Incrementer/Incrementer.tsx b/app/components/controls/Incrementer/Incrementer.view.tsx
similarity index 52%
rename from app/components/controls/Incrementer/Incrementer.tsx
rename to app/components/controls/Incrementer/Incrementer.view.tsx
index 8549036..6a57b62 100644
--- a/app/components/controls/Incrementer/Incrementer.tsx
+++ b/app/components/controls/Incrementer/Incrementer.view.tsx
@@ -1,32 +1,7 @@
 "use client";
 
 import { memo } from "react";
-
-export interface IncrementerProps {
-  value: number;
-  /** Minimum value (default `-Infinity`). */
-  min?: number;
-  /** Maximum value (default `Infinity`). */
-  max?: number;
-  /** Step size applied to +/- actions (default `1`). */
-  step?: number;
-  onChange: (_next: number) => void;
-  /**
-   * Optional formatter for the displayed value. Receives the raw number and
-   * should return the rendered content. Default: `String(value)`.
-   */
-  formatValue?: (_value: number) => React.ReactNode;
-  /**
-   * When true, the whole incrementer is non-interactive and the value renders
-   * in the "inactive" (tertiary) color per Figma.
-   */
-  disabled?: boolean;
-  /** Accessible label for the decrement button (default "Decrease"). */
-  decrementAriaLabel?: string;
-  /** Accessible label for the increment button (default "Increase"). */
-  incrementAriaLabel?: string;
-  className?: string;
-}
+import type { IncrementerViewProps } from "./Incrementer.types";
 
 const STEP_BUTTON_CLASSES =
   "bg-[var(--color-surface-default-secondary,#141414)] text-[var(--color-content-default-primary,#fff)] inline-flex shrink-0 items-center justify-center overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-200,8px)] py-[var(--measures-spacing-150,6px)] transition-[background,color,transform] duration-200 ease-in-out hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary,#fff)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary,#000)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100";
@@ -69,38 +44,17 @@ function PlusIcon() {
   );
 }
 
-/**
- * Figma: "Control / Incrementer" (`17857:30943`). A compact `[ - value + ]`
- * row used for numeric step inputs (e.g. a percentage setting).
- *
- * For a labelled variant that matches "Control / Incrementer Block"
- * (`19883:13283`), compose with {@link IncrementerBlock} instead.
- */
-function IncrementerComponent({
-  value,
-  min = Number.NEGATIVE_INFINITY,
-  max = Number.POSITIVE_INFINITY,
-  step = 1,
-  onChange,
-  formatValue,
-  disabled = false,
-  decrementAriaLabel = "Decrease",
-  incrementAriaLabel = "Increase",
-  className = "",
-}: IncrementerProps) {
-  const clampedValue = Math.min(Math.max(value, min), max);
-  const atMin = clampedValue <= min;
-  const atMax = clampedValue >= max;
-
-  const decrement = () => {
-    if (disabled || atMin) return;
-    onChange(Math.max(min, clampedValue - step));
-  };
-  const increment = () => {
-    if (disabled || atMax) return;
-    onChange(Math.min(max, clampedValue + step));
-  };
-
+function IncrementerView({
+  displayValue,
+  disabled,
+  atMin,
+  atMax,
+  onDecrement,
+  onIncrement,
+  decrementAriaLabel,
+  incrementAriaLabel,
+  className,
+}: IncrementerViewProps) {
   const valueColor = disabled
     ? "text-[color:var(--color-content-default-tertiary,#b4b4b4)]"
     : "text-[color:var(--color-content-default-primary,#fff)]";
@@ -112,7 +66,7 @@ function IncrementerComponent({
     >
       <button
         type="button"
-        onClick={decrement}
+        onClick={onDecrement}
         disabled={disabled || atMin}
         aria-label={decrementAriaLabel}
         className={STEP_BUTTON_CLASSES}
@@ -123,11 +77,11 @@ function IncrementerComponent({
         aria-live="polite"
         className={`shrink-0 whitespace-nowrap font-inter text-[length:var(--sizing-350,14px)] font-medium leading-[18px] ${valueColor}`}
       >
-        {formatValue ? formatValue(clampedValue) : clampedValue}
+        {displayValue}
       </span>
       <button
         type="button"
-        onClick={increment}
+        onClick={onIncrement}
         disabled={disabled || atMax}
         aria-label={incrementAriaLabel}
         className={STEP_BUTTON_CLASSES}
@@ -138,6 +92,6 @@ function IncrementerComponent({
   );
 }
 
-IncrementerComponent.displayName = "Incrementer";
+IncrementerView.displayName = "IncrementerView";
 
-export default memo(IncrementerComponent);
+export default memo(IncrementerView);
diff --git a/app/components/controls/Incrementer/IncrementerBlock.tsx b/app/components/controls/Incrementer/IncrementerBlock.tsx
deleted file mode 100644
index 5cd261b..0000000
--- a/app/components/controls/Incrementer/IncrementerBlock.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import Incrementer, { type IncrementerProps } from "./Incrementer";
-import InputLabel from "../../utility/InputLabel";
-import type {
-  InputLabelPaletteValue,
-  InputLabelSizeValue,
-} from "../../utility/InputLabel/InputLabel.types";
-
-export interface IncrementerBlockProps extends IncrementerProps {
-  /** Label text displayed above the incrementer. */
-  label: string;
-  /** Show the help "?" icon next to the label. Defaults to `true`. */
-  helpIcon?: boolean;
-  /**
-   * Helper text shown to the right of the label. Pass a string or `true` to
-   * render the default "Optional text".
-   */
-  helperText?: boolean | string;
-  /** Show an asterisk indicating a required field. */
-  asterisk?: boolean;
-  /**
-   * Size of the label (`"s"` or `"m"`). Defaults to `"s"` to match the Figma
-   * "Incrementer Block" spec.
-   */
-  labelSize?: InputLabelSizeValue;
-  /** Palette. Defaults to `"default"`. */
-  palette?: InputLabelPaletteValue;
-  /**
-   * Class applied to the root `<div>` wrapping the label + incrementer. Use
-   * this to control the block's layout width (e.g. `w-full`).
-   */
-  blockClassName?: string;
-}
-
-/**
- * Figma: "Control / Incrementer Block" (`19883:13283`). An `InputLabel` plus
- * an {@link Incrementer} row, stacked with a 12px gap.
- */
-function IncrementerBlockComponent({
-  label,
-  helpIcon = true,
-  helperText,
-  asterisk,
-  labelSize = "s",
-  palette = "default",
-  blockClassName = "",
-  className,
-  ...incrementerProps
-}: IncrementerBlockProps) {
-  return (
-    <div
-      className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] py-[8px] ${blockClassName}`.trim()}
-      data-figma-node="19883:13283"
-    >
-      <InputLabel
-        label={label}
-        helpIcon={helpIcon}
-        helperText={helperText}
-        asterisk={asterisk}
-        size={labelSize}
-        palette={palette}
-      />
-      <Incrementer {...incrementerProps} className={className} />
-    </div>
-  );
-}
-
-IncrementerBlockComponent.displayName = "IncrementerBlock";
-
-export default memo(IncrementerBlockComponent);
diff --git a/app/components/controls/Incrementer/index.tsx b/app/components/controls/Incrementer/index.tsx
index c454d77..a9d4bf8 100644
--- a/app/components/controls/Incrementer/index.tsx
+++ b/app/components/controls/Incrementer/index.tsx
@@ -1,5 +1,5 @@
-export { default } from "./Incrementer";
-export { default as Incrementer } from "./Incrementer";
-export { default as IncrementerBlock } from "./IncrementerBlock";
-export type { IncrementerProps } from "./Incrementer";
-export type { IncrementerBlockProps } from "./IncrementerBlock";
+export { default } from "./Incrementer.container";
+export type {
+  IncrementerProps,
+  IncrementerViewProps,
+} from "./Incrementer.types";
diff --git a/app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx b/app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx
new file mode 100644
index 0000000..35c0201
--- /dev/null
+++ b/app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { memo } from "react";
+import IncrementerBlockView from "./IncrementerBlock.view";
+import type { IncrementerBlockProps } from "./IncrementerBlock.types";
+
+/**
+ * Figma: "Control / Incrementer Block" (`19883:13283`). An `InputLabel` plus
+ * an `Incrementer` row, stacked with a 12px gap. Consumers can pass any
+ * `IncrementerProps` alongside the label-specific props.
+ */
+const IncrementerBlockContainer = ({
+  label,
+  helpIcon = true,
+  helperText,
+  asterisk,
+  labelSize = "s",
+  palette = "default",
+  blockClassName = "",
+  ...incrementerProps
+}: IncrementerBlockProps) => {
+  return (
+    <IncrementerBlockView
+      label={label}
+      helpIcon={helpIcon}
+      helperText={helperText}
+      asterisk={asterisk}
+      labelSize={labelSize}
+      palette={palette}
+      blockClassName={blockClassName}
+      {...incrementerProps}
+    />
+  );
+};
+
+IncrementerBlockContainer.displayName = "IncrementerBlock";
+
+export default memo(IncrementerBlockContainer);
diff --git a/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts b/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts
new file mode 100644
index 0000000..cf61523
--- /dev/null
+++ b/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts
@@ -0,0 +1,41 @@
+import type { IncrementerProps } from "../Incrementer/Incrementer.types";
+import type {
+  InputLabelPaletteValue,
+  InputLabelSizeValue,
+} from "../../utility/InputLabel/InputLabel.types";
+
+export interface IncrementerBlockProps extends IncrementerProps {
+  /** Label text displayed above the incrementer. */
+  label: string;
+  /** Show the help "?" icon next to the label. Defaults to `true`. */
+  helpIcon?: boolean;
+  /**
+   * Helper text shown to the right of the label. Pass a string or `true` to
+   * render the default "Optional text".
+   */
+  helperText?: boolean | string;
+  /** Show an asterisk indicating a required field. */
+  asterisk?: boolean;
+  /**
+   * Size of the label (`"s"` or `"m"`). Defaults to `"s"` to match the Figma
+   * "Incrementer Block" spec.
+   */
+  labelSize?: InputLabelSizeValue;
+  /** Palette. Defaults to `"default"`. */
+  palette?: InputLabelPaletteValue;
+  /**
+   * Class applied to the root `<div>` wrapping the label + incrementer. Use
+   * this to control the block's layout width (e.g. `w-full`).
+   */
+  blockClassName?: string;
+}
+
+export interface IncrementerBlockViewProps extends IncrementerProps {
+  label: string;
+  helpIcon: boolean;
+  helperText: boolean | string | undefined;
+  asterisk: boolean | undefined;
+  labelSize: InputLabelSizeValue;
+  palette: InputLabelPaletteValue;
+  blockClassName: string;
+}
diff --git a/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx b/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx
new file mode 100644
index 0000000..bc478fc
--- /dev/null
+++ b/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { memo } from "react";
+import Incrementer from "../Incrementer";
+import InputLabel from "../../utility/InputLabel";
+import type { IncrementerBlockViewProps } from "./IncrementerBlock.types";
+
+function IncrementerBlockView({
+  label,
+  helpIcon,
+  helperText,
+  asterisk,
+  labelSize,
+  palette,
+  blockClassName,
+  className,
+  ...incrementerProps
+}: IncrementerBlockViewProps) {
+  return (
+    <div
+      className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] py-[8px] ${blockClassName}`.trim()}
+      data-figma-node="19883:13283"
+    >
+      <InputLabel
+        label={label}
+        helpIcon={helpIcon}
+        helperText={helperText}
+        asterisk={asterisk}
+        size={labelSize}
+        palette={palette}
+      />
+      <Incrementer {...incrementerProps} className={className} />
+    </div>
+  );
+}
+
+IncrementerBlockView.displayName = "IncrementerBlockView";
+
+export default memo(IncrementerBlockView);
diff --git a/app/components/controls/IncrementerBlock/index.tsx b/app/components/controls/IncrementerBlock/index.tsx
new file mode 100644
index 0000000..4616cf1
--- /dev/null
+++ b/app/components/controls/IncrementerBlock/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./IncrementerBlock.container";
+export type { IncrementerBlockProps } from "./IncrementerBlock.types";
diff --git a/app/create/components/CreateFlowTwoColumnSelectShell.tsx b/app/create/components/CreateFlowTwoColumnSelectShell.tsx
index b792fde..c3f8363 100644
--- a/app/create/components/CreateFlowTwoColumnSelectShell.tsx
+++ b/app/create/components/CreateFlowTwoColumnSelectShell.tsx
@@ -27,7 +27,7 @@ interface CreateFlowTwoColumnSelectShellProps {
 
 /**
  * Two-column layout for create-flow select steps (community size/structure, core values) and
- * {@link RightRailScreen} (decision approaches). Below `lg` (1024px), one column + main scrolls.
+ * {@link DecisionApproachesScreen} (decision approaches). Below `lg` (1024px), one column + main scrolls.
  * At `lg+`, mirrors {@link CompletedScreen}: static header column + scrollable controls column
  * (`min-h-0` + `overflow-y-auto` height chain; see completed page right rail).
  */
diff --git a/app/create/components/ModalTextAreaField.tsx b/app/create/components/ModalTextAreaField.tsx
index 0b13c24..1cd3676 100644
--- a/app/create/components/ModalTextAreaField.tsx
+++ b/app/create/components/ModalTextAreaField.tsx
@@ -6,7 +6,7 @@
  * appearance — matching the Figma "Control / Text Area" pattern.
  */
 
-import { memo } from "react";
+import { memo, useId } from "react";
 import TextArea from "../../components/controls/TextArea";
 import InputLabel from "../../components/utility/InputLabel";
 
@@ -38,9 +38,18 @@ function ModalTextAreaFieldComponent({
   disabled = false,
   className = "",
 }: ModalTextAreaFieldProps) {
+  const labelId = useId();
+
   return (
     <div className={`flex flex-col gap-2 ${className}`.trim()}>
-      <InputLabel label={label} helpIcon={helpIcon} size="s" palette="default" />
+      <div id={labelId}>
+        <InputLabel
+          label={label}
+          helpIcon={helpIcon}
+          size="s"
+          palette="default"
+        />
+      </div>
       <TextArea
         formHeader={false}
         value={value}
@@ -50,6 +59,7 @@ function ModalTextAreaFieldComponent({
         appearance="embedded"
         placeholder={placeholder}
         disabled={disabled}
+        aria-labelledby={labelId}
       />
     </div>
   );
diff --git a/app/create/screens/right-rail/DecisionApproachesScreen.tsx b/app/create/screens/right-rail/DecisionApproachesScreen.tsx
index 33612b0..052a2d3 100644
--- a/app/create/screens/right-rail/DecisionApproachesScreen.tsx
+++ b/app/create/screens/right-rail/DecisionApproachesScreen.tsx
@@ -17,7 +17,7 @@ import { useState, useCallback, useMemo } from "react";
 import DecisionMakingSidebar from "../../../components/utility/DecisionMakingSidebar";
 import CardStack from "../../../components/utility/CardStack";
 import Create from "../../../components/modals/Create";
-import { IncrementerBlock } from "../../../components/controls/Incrementer";
+import IncrementerBlock from "../../../components/controls/IncrementerBlock";
 import InlineTextButton from "../../../components/buttons/InlineTextButton";
 import type { InfoMessageBoxItem } from "../../../components/utility/InfoMessageBox/InfoMessageBox.types";
 import type { CardStackItem } from "../../../components/utility/CardStack/CardStack.types";
diff --git a/stories/buttons/InlineTextButton.stories.js b/stories/buttons/InlineTextButton.stories.js
new file mode 100644
index 0000000..ce7294c
--- /dev/null
+++ b/stories/buttons/InlineTextButton.stories.js
@@ -0,0 +1,57 @@
+import React from "react";
+import InlineTextButton from "../../app/components/buttons/InlineTextButton";
+
+export default {
+  title: "Components/Buttons/InlineTextButton",
+  component: InlineTextButton,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Small text-styled button for mid-paragraph 'link'-like controls (expand, add, …). Inherits parent typography and renders with a tertiary-colored underline. Use `Button` for primary/secondary actions.",
+      },
+    },
+  },
+  argTypes: {
+    children: {
+      control: { type: "text" },
+      description: "Button label content.",
+    },
+    disabled: { control: { type: "boolean" } },
+    ariaLabel: { control: { type: "text" } },
+    onClick: { action: "clicked" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    children: "Expand",
+  },
+};
+
+export const InParagraph = {
+  render: () => (
+    <p className="max-w-md font-inter text-[14px] leading-[20px] text-[color:var(--color-content-default-primary,#fff)]">
+      Share a bit more detail so the group can weigh in. You can always{" "}
+      <InlineTextButton onClick={() => {}}>expand this later</InlineTextButton>{" "}
+      if you need more room.
+    </p>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Typography is inherited from the parent, so the button sits naturally inside body copy.",
+      },
+    },
+  },
+};
+
+export const Disabled = {
+  args: {
+    children: "Expand",
+    disabled: true,
+  },
+};
diff --git a/stories/controls/Incrementer.stories.js b/stories/controls/Incrementer.stories.js
new file mode 100644
index 0000000..3e438e6
--- /dev/null
+++ b/stories/controls/Incrementer.stories.js
@@ -0,0 +1,101 @@
+import React from "react";
+import Incrementer from "../../app/components/controls/Incrementer";
+
+export default {
+  title: "Components/Controls/Incrementer",
+  component: Incrementer,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Compact `[ - value + ]` row for numeric step input. Figma: `Control / Incrementer` (17857:30943). Pair with `IncrementerBlock` when you need a label above.",
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: "number" },
+      description: "Current numeric value.",
+    },
+    min: {
+      control: { type: "number" },
+      description: "Minimum value (default -Infinity).",
+    },
+    max: {
+      control: { type: "number" },
+      description: "Maximum value (default Infinity).",
+    },
+    step: {
+      control: { type: "number" },
+      description: "Amount added/subtracted per click.",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable both step buttons.",
+    },
+    onChange: { action: "change" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  render: (args) => {
+    const [value, setValue] = React.useState(args.value ?? 50);
+    return <Incrementer {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    value: 50,
+  },
+};
+
+export const WithBounds = {
+  render: (args) => {
+    const [value, setValue] = React.useState(50);
+    return <Incrementer {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    min: 0,
+    max: 100,
+    step: 10,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Clamped to `min`/`max`; the corresponding step button auto-disables at the bounds.",
+      },
+    },
+  },
+};
+
+export const PercentageFormatter = {
+  render: (args) => {
+    const [value, setValue] = React.useState(75);
+    return (
+      <Incrementer
+        {...args}
+        value={value}
+        onChange={setValue}
+        formatValue={(n) => `${n}%`}
+      />
+    );
+  },
+  args: {
+    min: 0,
+    max: 100,
+    step: 5,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use `formatValue` to render units alongside the number (e.g. `%`, `px`).",
+      },
+    },
+  },
+};
+
+export const Disabled = {
+  render: () => <Incrementer value={50} onChange={() => {}} disabled />,
+};
diff --git a/stories/controls/IncrementerBlock.stories.js b/stories/controls/IncrementerBlock.stories.js
new file mode 100644
index 0000000..a39bdbc
--- /dev/null
+++ b/stories/controls/IncrementerBlock.stories.js
@@ -0,0 +1,113 @@
+import React from "react";
+import IncrementerBlock from "../../app/components/controls/IncrementerBlock";
+
+export default {
+  title: "Components/Controls/IncrementerBlock",
+  component: IncrementerBlock,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Labelled incrementer: pairs `InputLabel` with `Incrementer`. Figma: `Control / Incrementer Block` (19883:13283). Matches the grouped-field pattern used by `CheckboxGroup` / `RadioGroup`.",
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Label rendered above the incrementer.",
+    },
+    helpIcon: {
+      control: { type: "boolean" },
+      description: "Show the help (?) icon next to the label.",
+    },
+    asterisk: {
+      control: { type: "boolean" },
+      description: "Show an asterisk indicating a required field.",
+    },
+    helperText: {
+      control: { type: "text" },
+      description:
+        "Helper text shown to the right of the label. Pass `true` to render the default 'Optional text'.",
+    },
+    labelSize: {
+      control: { type: "select" },
+      options: ["s", "m"],
+      description: "Size of the label (Figma prop).",
+    },
+    palette: {
+      control: { type: "select" },
+      options: ["default", "inverse"],
+      description: "Label palette.",
+    },
+    min: { control: { type: "number" } },
+    max: { control: { type: "number" } },
+    step: { control: { type: "number" } },
+    disabled: { control: { type: "boolean" } },
+    onChange: { action: "change" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  render: (args) => {
+    const [value, setValue] = React.useState(args.value ?? 75);
+    return <IncrementerBlock {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    label: "Consensus level",
+    helpIcon: true,
+    value: 75,
+    min: 0,
+    max: 100,
+    step: 5,
+  },
+};
+
+export const Required = {
+  render: () => {
+    const [value, setValue] = React.useState(50);
+    return (
+      <IncrementerBlock
+        label="Quorum percentage"
+        asterisk
+        helperText="Required"
+        value={value}
+        onChange={setValue}
+        min={0}
+        max={100}
+        step={5}
+      />
+    );
+  },
+};
+
+export const WithFormattedValue = {
+  render: () => {
+    const [value, setValue] = React.useState(75);
+    return (
+      <IncrementerBlock
+        label="Consensus level"
+        helperText="Optional"
+        value={value}
+        onChange={setValue}
+        min={0}
+        max={100}
+        step={5}
+        formatValue={(n) => `${n}%`}
+      />
+    );
+  },
+};
+
+export const Disabled = {
+  render: () => (
+    <IncrementerBlock
+      label="Consensus level"
+      value={75}
+      onChange={() => {}}
+      disabled
+    />
+  ),
+};
diff --git a/stories/create-flow/ApplicableScopeField.stories.js b/stories/create-flow/ApplicableScopeField.stories.js
new file mode 100644
index 0000000..13c7377
--- /dev/null
+++ b/stories/create-flow/ApplicableScopeField.stories.js
@@ -0,0 +1,89 @@
+import React from "react";
+import ApplicableScopeField from "../../app/create/components/ApplicableScopeField";
+
+export default {
+  title: "Create Flow/ApplicableScopeField",
+  component: ApplicableScopeField,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Shared 'Applicable Scope' field used by the `decision-approaches` and `conflict-management` create-flow modals. Pairs an `InputLabel` with a row of toggle-chips plus an inline pill input for adding new scope values.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: { type: "text" } },
+    addLabel: { control: { type: "text" } },
+    inputPlaceholder: { control: { type: "text" } },
+    onToggleScope: { action: "toggle" },
+    onAddScope: { action: "add" },
+  },
+  tags: ["autodocs"],
+};
+
+const INITIAL_SCOPES = ["Finance", "Operations", "Product", "People"];
+
+export const Default = {
+  render: (args) => {
+    const [scopes, setScopes] = React.useState(INITIAL_SCOPES);
+    const [selected, setSelected] = React.useState(["Finance"]);
+
+    return (
+      <div className="w-[520px]">
+        <ApplicableScopeField
+          {...args}
+          scopes={scopes}
+          selectedScopes={selected}
+          onToggleScope={(scope) => {
+            setSelected((prev) =>
+              prev.includes(scope)
+                ? prev.filter((s) => s !== scope)
+                : [...prev, scope],
+            );
+          }}
+          onAddScope={(scope) => setScopes((prev) => [...prev, scope])}
+        />
+      </div>
+    );
+  },
+  args: {
+    label: "Applicable Scope",
+    addLabel: "Add Applicable Scope",
+  },
+};
+
+export const Empty = {
+  render: () => {
+    const [scopes, setScopes] = React.useState([]);
+    const [selected, setSelected] = React.useState([]);
+
+    return (
+      <div className="w-[520px]">
+        <ApplicableScopeField
+          label="Applicable Scope"
+          addLabel="Add Applicable Scope"
+          scopes={scopes}
+          selectedScopes={selected}
+          onToggleScope={(scope) =>
+            setSelected((prev) =>
+              prev.includes(scope)
+                ? prev.filter((s) => s !== scope)
+                : [...prev, scope],
+            )
+          }
+          onAddScope={(scope) => setScopes((prev) => [...prev, scope])}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "With no scopes yet — only the '+ Add' affordance is visible. Click it to reveal the pill text input.",
+      },
+    },
+  },
+};
diff --git a/stories/create-flow/ModalTextAreaField.stories.js b/stories/create-flow/ModalTextAreaField.stories.js
new file mode 100644
index 0000000..d557fbe
--- /dev/null
+++ b/stories/create-flow/ModalTextAreaField.stories.js
@@ -0,0 +1,72 @@
+import React from "react";
+import ModalTextAreaField from "../../app/create/components/ModalTextAreaField";
+
+export default {
+  title: "Create Flow/ModalTextAreaField",
+  component: ModalTextAreaField,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Shared 'labelled text area' field used by every create-flow modal section. Pairs `InputLabel` (with help icon) with a `TextArea` set to the `embedded` appearance.",
+      },
+    },
+  },
+  argTypes: {
+    label: { control: { type: "text" } },
+    placeholder: { control: { type: "text" } },
+    rows: { control: { type: "number" } },
+    helpIcon: { control: { type: "boolean" } },
+    disabled: { control: { type: "boolean" } },
+    onChange: { action: "change" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  render: (args) => {
+    const [value, setValue] = React.useState("");
+    return (
+      <div className="w-[520px]">
+        <ModalTextAreaField {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    label: "Description",
+    helpIcon: true,
+    placeholder: "What does this rule cover?",
+    rows: 4,
+  },
+};
+
+export const WithValue = {
+  render: () => {
+    const [value, setValue] = React.useState(
+      "We decide together whenever a change would affect more than two teams.",
+    );
+    return (
+      <div className="w-[520px]">
+        <ModalTextAreaField
+          label="Core principle"
+          value={value}
+          onChange={setValue}
+        />
+      </div>
+    );
+  },
+};
+
+export const Disabled = {
+  render: () => (
+    <div className="w-[520px]">
+      <ModalTextAreaField
+        label="Description"
+        value="Read-only content"
+        onChange={() => {}}
+        disabled
+      />
+    </div>
+  ),
+};
diff --git a/tests/components/ApplicableScopeField.test.tsx b/tests/components/ApplicableScopeField.test.tsx
new file mode 100644
index 0000000..0dee4b0
--- /dev/null
+++ b/tests/components/ApplicableScopeField.test.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import ApplicableScopeField from "../../app/create/components/ApplicableScopeField";
+import { componentTestSuite } from "../utils/componentTestSuite";
+import { renderWithProviders } from "../utils/test-utils";
+
+type ApplicableScopeFieldProps = React.ComponentProps<
+  typeof ApplicableScopeField
+>;
+
+componentTestSuite<ApplicableScopeFieldProps>({
+  component: ApplicableScopeField,
+  name: "ApplicableScopeField",
+  props: {
+    label: "Applicable Scope",
+    addLabel: "Add Applicable Scope",
+    scopes: ["Finance", "Operations"],
+    selectedScopes: ["Finance"],
+    onToggleScope: () => {},
+    onAddScope: () => {},
+  } as ApplicableScopeFieldProps,
+  requiredProps: ["label", "addLabel"],
+  optionalProps: {
+    inputPlaceholder: "Enter scope",
+  },
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+});
+
+describe("ApplicableScopeField behavior", () => {
+  const baseProps: ApplicableScopeFieldProps = {
+    label: "Applicable Scope",
+    addLabel: "Add Applicable Scope",
+    scopes: ["Finance", "Operations", "Product"],
+    selectedScopes: ["Finance"],
+    onToggleScope: () => {},
+    onAddScope: () => {},
+  };
+
+  it("renders each scope as a chip", () => {
+    renderWithProviders(<ApplicableScopeField {...baseProps} />);
+
+    expect(screen.getByRole("button", { name: /Deselect Finance/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Select Operations/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Select Product/i })).toBeInTheDocument();
+  });
+
+  it("calls onToggleScope when a chip is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleScope = vi.fn();
+    renderWithProviders(
+      <ApplicableScopeField {...baseProps} onToggleScope={onToggleScope} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Select Operations/i }));
+    expect(onToggleScope).toHaveBeenCalledWith("Operations");
+  });
+
+  it("reveals the inline input when '+ Add' is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<ApplicableScopeField {...baseProps} />);
+
+    await user.click(screen.getByRole("button", { name: /Add Applicable Scope/i }));
+    expect(
+      screen.getByRole("textbox", { name: /Add Applicable Scope/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("calls onAddScope with trimmed value on Enter", async () => {
+    const user = userEvent.setup();
+    const onAddScope = vi.fn();
+    renderWithProviders(
+      <ApplicableScopeField {...baseProps} onAddScope={onAddScope} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Add Applicable Scope/i }));
+    const input = screen.getByRole("textbox", { name: /Add Applicable Scope/i });
+    await user.type(input, "  People  {Enter}");
+
+    expect(onAddScope).toHaveBeenCalledWith("People");
+  });
+
+  it("does not call onAddScope for duplicates already in scopes", async () => {
+    const user = userEvent.setup();
+    const onAddScope = vi.fn();
+    renderWithProviders(
+      <ApplicableScopeField {...baseProps} onAddScope={onAddScope} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Add Applicable Scope/i }));
+    const input = screen.getByRole("textbox", { name: /Add Applicable Scope/i });
+    await user.type(input, "Finance{Enter}");
+
+    expect(onAddScope).not.toHaveBeenCalled();
+  });
+
+  it("dismisses the inline input on Escape without calling onAddScope", async () => {
+    const user = userEvent.setup();
+    const onAddScope = vi.fn();
+    renderWithProviders(
+      <ApplicableScopeField {...baseProps} onAddScope={onAddScope} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Add Applicable Scope/i }));
+    const input = screen.getByRole("textbox", { name: /Add Applicable Scope/i });
+    await user.type(input, "People{Escape}");
+
+    expect(onAddScope).not.toHaveBeenCalled();
+    expect(
+      screen.queryByRole("textbox", { name: /Add Applicable Scope/i }),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/tests/components/Incrementer.test.tsx b/tests/components/Incrementer.test.tsx
new file mode 100644
index 0000000..5bbeefa
--- /dev/null
+++ b/tests/components/Incrementer.test.tsx
@@ -0,0 +1,125 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import Incrementer from "../../app/components/controls/Incrementer";
+import { componentTestSuite } from "../utils/componentTestSuite";
+import { renderWithProviders } from "../utils/test-utils";
+
+type IncrementerProps = React.ComponentProps<typeof Incrementer>;
+
+componentTestSuite<IncrementerProps>({
+  component: Incrementer,
+  name: "Incrementer",
+  props: {
+    value: 5,
+    onChange: () => {},
+  } as IncrementerProps,
+  requiredProps: ["value", "onChange"],
+  optionalProps: {
+    step: 1,
+  },
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+});
+
+describe("Incrementer behavior", () => {
+  it("calls onChange with value + step when increment is clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Incrementer value={5} step={2} onChange={onChange} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /increase/i }));
+    expect(onChange).toHaveBeenCalledWith(7);
+  });
+
+  it("calls onChange with value - step when decrement is clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Incrementer value={5} step={2} onChange={onChange} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /decrease/i }));
+    expect(onChange).toHaveBeenCalledWith(3);
+  });
+
+  it("disables the decrement button when value is at min", () => {
+    renderWithProviders(
+      <Incrementer value={0} min={0} max={10} onChange={() => {}} />,
+    );
+
+    expect(screen.getByRole("button", { name: /decrease/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /increase/i })).not.toBeDisabled();
+  });
+
+  it("disables the increment button when value is at max", () => {
+    renderWithProviders(
+      <Incrementer value={10} min={0} max={10} onChange={() => {}} />,
+    );
+
+    expect(screen.getByRole("button", { name: /increase/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /decrease/i })).not.toBeDisabled();
+  });
+
+  it("clamps the next value to min/max bounds", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Incrementer
+        value={9}
+        step={5}
+        min={0}
+        max={10}
+        onChange={onChange}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /increase/i }));
+    expect(onChange).toHaveBeenCalledWith(10);
+  });
+
+  it("renders the formatted value when formatValue is provided", () => {
+    renderWithProviders(
+      <Incrementer
+        value={75}
+        onChange={() => {}}
+        formatValue={(n) => `${n}%`}
+      />,
+    );
+
+    expect(screen.getByText("75%")).toBeInTheDocument();
+  });
+
+  it("disables both step buttons when disabled is true", () => {
+    renderWithProviders(
+      <Incrementer value={5} onChange={() => {}} disabled />,
+    );
+
+    expect(screen.getByRole("button", { name: /decrease/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /increase/i })).toBeDisabled();
+  });
+
+  it("respects custom aria-labels", () => {
+    renderWithProviders(
+      <Incrementer
+        value={5}
+        onChange={() => {}}
+        decrementAriaLabel="Remove one"
+        incrementAriaLabel="Add one"
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Remove one" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add one" })).toBeInTheDocument();
+  });
+});
diff --git a/tests/components/IncrementerBlock.test.tsx b/tests/components/IncrementerBlock.test.tsx
new file mode 100644
index 0000000..f9225bc
--- /dev/null
+++ b/tests/components/IncrementerBlock.test.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import IncrementerBlock from "../../app/components/controls/IncrementerBlock";
+import { componentTestSuite } from "../utils/componentTestSuite";
+import { renderWithProviders } from "../utils/test-utils";
+
+type IncrementerBlockProps = React.ComponentProps<typeof IncrementerBlock>;
+
+componentTestSuite<IncrementerBlockProps>({
+  component: IncrementerBlock,
+  name: "IncrementerBlock",
+  props: {
+    label: "Consensus level",
+    value: 50,
+    onChange: () => {},
+  } as IncrementerBlockProps,
+  requiredProps: ["label", "value", "onChange"],
+  optionalProps: {
+    helperText: "Optional",
+  },
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+});
+
+describe("IncrementerBlock composition", () => {
+  it("renders the label above the incrementer", () => {
+    renderWithProviders(
+      <IncrementerBlock
+        label="Consensus level"
+        value={75}
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Consensus level")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /increase/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /decrease/i })).toBeInTheDocument();
+  });
+
+  it("forwards incrementer props (step, min, max) to the inner control", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <IncrementerBlock
+        label="Quorum"
+        value={50}
+        step={10}
+        min={0}
+        max={100}
+        onChange={onChange}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /increase/i }));
+    expect(onChange).toHaveBeenCalledWith(60);
+  });
+
+  it("disables both step buttons when disabled is true", () => {
+    renderWithProviders(
+      <IncrementerBlock
+        label="Consensus level"
+        value={50}
+        onChange={() => {}}
+        disabled
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: /decrease/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /increase/i })).toBeDisabled();
+  });
+
+  it("renders helper text when provided", () => {
+    renderWithProviders(
+      <IncrementerBlock
+        label="Quorum"
+        helperText="Required for proposal"
+        value={50}
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Required for proposal")).toBeInTheDocument();
+  });
+});
diff --git a/tests/components/InlineTextButton.test.tsx b/tests/components/InlineTextButton.test.tsx
new file mode 100644
index 0000000..452bdaa
--- /dev/null
+++ b/tests/components/InlineTextButton.test.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import InlineTextButton from "../../app/components/buttons/InlineTextButton";
+import { componentTestSuite } from "../utils/componentTestSuite";
+import { renderWithProviders } from "../utils/test-utils";
+
+type InlineTextButtonProps = React.ComponentProps<typeof InlineTextButton>;
+
+componentTestSuite<InlineTextButtonProps>({
+  component: InlineTextButton,
+  name: "InlineTextButton",
+  props: {
+    children: "Expand",
+  } as InlineTextButtonProps,
+  requiredProps: ["children"],
+  optionalProps: {
+    ariaLabel: "Expand description",
+  },
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: true,
+    disabledState: true,
+    errorState: false,
+  },
+  states: {
+    disabledProps: { disabled: true },
+  },
+});
+
+describe("InlineTextButton behavior", () => {
+  it("fires onClick when clicked", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    renderWithProviders(
+      <InlineTextButton onClick={onClick}>Expand</InlineTextButton>,
+    );
+
+    await user.click(screen.getByRole("button", { name: /expand/i }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fire onClick when disabled", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    renderWithProviders(
+      <InlineTextButton onClick={onClick} disabled>
+        Expand
+      </InlineTextButton>,
+    );
+
+    await user.click(screen.getByRole("button", { name: /expand/i }));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("uses ariaLabel when provided", () => {
+    renderWithProviders(
+      <InlineTextButton ariaLabel="Expand description">Expand</InlineTextButton>,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Expand description" }),
+    ).toBeInTheDocument();
+  });
+
+  it("defaults to type='button' to avoid accidental form submits", () => {
+    renderWithProviders(<InlineTextButton>Expand</InlineTextButton>);
+    expect(screen.getByRole("button", { name: /expand/i })).toHaveAttribute(
+      "type",
+      "button",
+    );
+  });
+});
diff --git a/tests/components/ModalTextAreaField.test.tsx b/tests/components/ModalTextAreaField.test.tsx
new file mode 100644
index 0000000..98a5bd9
--- /dev/null
+++ b/tests/components/ModalTextAreaField.test.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import ModalTextAreaField from "../../app/create/components/ModalTextAreaField";
+import { componentTestSuite } from "../utils/componentTestSuite";
+import { renderWithProviders } from "../utils/test-utils";
+
+type ModalTextAreaFieldProps = React.ComponentProps<typeof ModalTextAreaField>;
+
+componentTestSuite<ModalTextAreaFieldProps>({
+  component: ModalTextAreaField,
+  name: "ModalTextAreaField",
+  props: {
+    label: "Description",
+    value: "",
+    onChange: () => {},
+  } as ModalTextAreaFieldProps,
+  requiredProps: ["label"],
+  optionalProps: {
+    placeholder: "What does this cover?",
+  },
+  primaryRole: "textbox",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: true,
+    errorState: false,
+  },
+  states: {
+    disabledProps: { disabled: true },
+  },
+});
+
+describe("ModalTextAreaField behavior", () => {
+  it("renders the label and a textbox wired together", () => {
+    renderWithProviders(
+      <ModalTextAreaField
+        label="Core principle"
+        value=""
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Core principle")).toBeInTheDocument();
+    expect(
+      screen.getByRole("textbox", { name: /Core principle/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("calls onChange with the new value string (not the event)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <ModalTextAreaField label="Notes" value="" onChange={onChange} />,
+    );
+
+    const textbox = screen.getByRole("textbox", { name: /Notes/i });
+    await user.type(textbox, "A");
+
+    expect(onChange).toHaveBeenCalledWith("A");
+  });
+
+  it("forwards placeholder and current value", () => {
+    renderWithProviders(
+      <ModalTextAreaField
+        label="Notes"
+        value="hello"
+        onChange={() => {}}
+        placeholder="Type here"
+      />,
+    );
+
+    const textbox = screen.getByRole("textbox", { name: /Notes/i });
+    expect(textbox).toHaveValue("hello");
+    expect(textbox).toHaveAttribute("placeholder", "Type here");
+  });
+
+  it("disables the textarea when disabled is true", () => {
+    renderWithProviders(
+      <ModalTextAreaField label="Notes" value="" onChange={() => {}} disabled />,
+    );
+
+    expect(screen.getByRole("textbox", { name: /Notes/i })).toBeDisabled();
+  });
+});

From e9dab04b343dfa28e9b3f5fa8ce543cd586c1682 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sat, 18 Apr 2026 14:12:49 -0600
Subject: [PATCH 08/15] App reorganization

---
 .cursor/rules/component-props.mdc             |   68 +-
 .cursor/rules/component-structure.mdc         |   31 +-
 .cursor/rules/create-flow.mdc                 |   12 +-
 .cursor/rules/hooks.mdc                       |   59 +
 .cursor/rules/routes.mdc                      |   88 ++
 .cursor/rules/storybook.mdc                   |   29 +-
 AGENTS.md                                     |   82 ++
 CONTRIBUTING.md                               |   91 +-
 README.md                                     |  272 +----
 app/(admin)/layout.tsx                        |    7 +
 app/(admin)/monitor/page.tsx                  |    2 +-
 .../create/CreateFlowLayoutClient.tsx         |   26 +-
 .../create/CreateFlowLayoutGate.tsx           |    0
 .../create/PostLoginDraftTransfer.tsx         |    4 +-
 .../create/SignedInDraftHydration.tsx         |    6 +-
 app/{ => (app)}/create/[screenId]/page.tsx    |    0
 .../components/ApplicableScopeField.tsx       |   10 +-
 .../components/CreateFlowHeaderLockup.tsx     |    4 +-
 .../CreateFlowLockupCardStepShell.tsx         |    0
 .../create/components/CreateFlowStepShell.tsx |    0
 .../CreateFlowTwoColumnSelectShell.tsx        |    0
 .../create/components/ModalTextAreaField.tsx  |    4 +-
 .../components/createFlowLayoutTokens.ts      |    0
 .../create/context/CreateFlowContext.tsx      |    0
 .../CreateFlowDraftSaveBannerContext.tsx      |    0
 .../create/hooks/useCreateFlowExit.ts         |    4 +-
 .../create/hooks/useCreateFlowLgUp.ts         |    2 +-
 .../create/hooks/useCreateFlowMdUp.ts         |    2 +-
 .../create/hooks/useCreateFlowNavigation.ts   |    0
 app/{ => (app)}/create/layout.tsx             |    0
 app/{ => (app)}/create/page.tsx               |    0
 .../create/review-template/[slug]/page.tsx    |   10 +-
 .../create/screens/CreateFlowScreenView.tsx   |    0
 .../card/CommunicationMethodsScreen.tsx       |    8 +-
 .../screens/card/ConflictManagementScreen.tsx |    8 +-
 .../screens/card/MembershipMethodsScreen.tsx  |    8 +-
 .../screens/completed/CompletedScreen.tsx     |   12 +-
 .../informational/InformationalScreen.tsx     |    4 +-
 .../screens/review/CommunityReviewScreen.tsx  |    4 +-
 .../screens/review/FinalReviewScreen.tsx      |    6 +-
 .../right-rail/DecisionApproachesScreen.tsx   |   16 +-
 .../select/CommunitySizeSelectScreen.tsx      |   26 +-
 .../select/CommunityStructureSelectScreen.tsx |   50 +-
 .../select/ConfirmStakeholdersScreen.tsx      |   14 +-
 .../screens/select/CoreValuesSelectScreen.tsx |   44 +-
 .../text/CreateFlowTextFieldScreen.tsx        |    6 +-
 .../screens/upload/CommunityUploadScreen.tsx  |    4 +-
 app/{ => (app)}/create/types.ts               |    0
 .../create/utils/anonymousDraftStorage.ts     |   11 +-
 .../utils/coreValueDetailsLocalStorage.ts     |    0
 .../utils/createFlowProportionProgress.ts     |    2 +-
 .../create/utils/createFlowScreenRegistry.ts  |    6 +-
 app/{ => (app)}/create/utils/flowSteps.ts     |    0
 .../create/utils/hasCreateFlowUserInput.ts    |    0
 app/(app)/layout.tsx                          |    8 +
 app/{ => (app)}/login/layout.tsx              |    0
 app/{ => (app)}/login/page.tsx                |    9 +-
 app/{ => (app)}/profile/ProfilePageClient.tsx |    6 +-
 app/{ => (app)}/profile/page.tsx              |    0
 app/(dev)/components-preview/page.tsx         |  207 ++--
 app/(dev)/layout.tsx                          |    7 +
 .../MarketingRuleStackSection.tsx             |    8 +-
 app/(marketing)/layout.tsx                    |   21 +
 app/(marketing)/page.tsx                      |    2 +-
 app/components/asset/{index.ts => index.tsx}  |    0
 .../asset/logo/{index.ts => index.tsx}        |    0
 app/components/buttons/Button.tsx             |   25 +-
 app/components/cards/NumberCard.tsx           |   61 +-
 .../cards/RuleCard/RuleCard.container.tsx     |    4 +-
 .../cards/RuleCard/RuleCard.types.ts          |    2 +-
 .../cards/RuleCard/RuleCard.view.tsx          |    4 +-
 .../{index.ts => index.tsx}                   |    0
 .../ContentContainer.container.tsx            |    4 +-
 .../ContentContainer.types.ts                 |    9 +-
 .../ContentThumbnailTemplate.container.tsx    |    4 +-
 .../ContentThumbnailTemplate.types.ts         |    9 +-
 .../controls/Checkbox/Checkbox.container.tsx  |   13 +-
 .../controls/Checkbox/Checkbox.types.ts       |   10 +-
 .../CheckboxGroup/CheckboxGroup.container.tsx |    8 +-
 .../CheckboxGroup/CheckboxGroup.types.ts      |    3 +-
 .../controls/Chip/Chip.container.tsx          |   21 +-
 app/components/controls/Chip/Chip.types.ts    |   32 +-
 .../InputWithCounter.container.tsx            |   18 +
 .../controls/InputWithCounter/index.tsx       |    2 +-
 .../MultiSelect/MultiSelect.container.tsx     |   16 +-
 .../controls/MultiSelect/MultiSelect.types.ts |    8 +-
 .../controls/MultiSelect/MultiSelect.view.tsx |   15 +-
 .../RadioButton/RadioButton.container.tsx     |    9 +-
 .../controls/RadioButton/RadioButton.types.ts |    6 +-
 .../RadioGroup/RadioGroup.container.tsx       |   21 +-
 .../controls/RadioGroup/RadioGroup.types.ts   |    6 +-
 .../SelectInput/SelectInput.container.tsx     |   25 +-
 .../controls/SelectInput/SelectInput.types.ts |   23 +-
 .../controls/SelectInput/SelectInput.view.tsx |    2 +-
 .../SelectOption/SelectOption.container.tsx   |    8 +-
 .../SelectOption/SelectOption.types.ts        |   11 +-
 .../SelectOption/SelectOption.view.tsx        |    0
 .../{SelectInput => }/SelectOption/index.tsx  |    0
 .../controls/Switch/Switch.container.tsx      |    8 +-
 .../controls/Switch/Switch.types.ts           |    3 +-
 .../controls/TextArea/TextArea.container.tsx  |   19 +-
 .../controls/TextArea/TextArea.types.ts       |   29 +-
 .../TextInput/TextInput.container.tsx         |   13 +-
 .../controls/TextInput/TextInput.types.ts     |    8 +-
 .../controls/Toggle/Toggle.container.tsx      |    8 +-
 .../controls/Toggle/Toggle.types.ts           |    3 +-
 .../ToggleGroup/ToggleGroup.container.tsx     |   13 +-
 .../controls/ToggleGroup/ToggleGroup.types.ts |   16 +-
 .../controls/Upload/Upload.container.tsx      |    4 +
 .../controls/Upload/Upload.view.tsx           |    4 +-
 app/components/icons/Avatar.tsx               |   18 +-
 .../LanguageSwitcher/{index.ts => index.tsx}  |    0
 .../modals/Alert/Alert.container.tsx          |    9 +-
 app/components/modals/Alert/Alert.types.ts    |   18 +-
 .../{ => modals}/ContextMenu/ContextMenu.tsx  |    0
 .../ContextMenu/ContextMenuDivider.tsx        |    0
 .../ContextMenu/ContextMenuSection.tsx        |    0
 .../ContextMenuItem.container.tsx             |    4 +-
 .../ContextMenuItem/ContextMenuItem.types.ts  |   11 +-
 .../ContextMenuItem/ContextMenuItem.view.tsx  |    0
 .../ContextMenuItem/index.tsx                 |    0
 app/components/modals/Login/LoginForm.tsx     |    2 +-
 .../modals/Tooltip/Tooltip.container.tsx      |    4 +-
 .../modals/Tooltip/Tooltip.types.ts           |    5 +-
 .../navigation/ConditionalFooter.tsx          |   33 -
 app/components/navigation/MenuBar.tsx         |    3 +-
 .../MenuBarItem/MenuBarItem.container.tsx     |   11 +-
 .../NavigationItem.container.tsx              |    9 +-
 .../NavigationItem/NavigationItem.types.ts    |   14 +-
 .../ProportionBar/ProportionBar.container.tsx |    3 +-
 .../ProportionBar/ProportionBar.types.ts      |    4 +-
 .../AskOrganizer/AskOrganizer.container.tsx   |    6 +-
 .../AskOrganizer/AskOrganizer.types.ts        |    9 +-
 .../{index.ts => index.tsx}                   |    0
 .../QuoteBlock/QuoteBlock.container.tsx       |    4 +-
 .../sections/QuoteBlock/QuoteBlock.types.ts   |   11 +-
 app/components/sections/SectionHeader.tsx     |   14 +-
 .../WebVitalsDashboard.container.tsx          |    2 +-
 .../WebVitalsDashboard.types.ts               |    0
 .../WebVitalsDashboard.view.tsx               |    0
 .../WebVitalsDashboard/index.tsx              |    0
 .../ContentLockup/ContentLockup.container.tsx |    9 +-
 .../type/ContentLockup/ContentLockup.types.ts |   17 +-
 .../HeaderLockup/HeaderLockup.container.tsx   |   12 +-
 .../type/HeaderLockup/HeaderLockup.types.ts   |   23 +-
 .../NumberedList/NumberedList.container.tsx   |    4 +-
 .../type/NumberedList/NumberedList.types.ts   |    5 +-
 .../{ => AvatarContainer}/AvatarContainer.tsx |   18 +-
 .../utility/AvatarContainer/index.tsx         |    2 +
 .../utility/CardStack/CardStack.container.tsx |    4 +
 .../CreateFlowFooter.container.tsx            |    4 +
 .../CreateFlowFooter.view.tsx                 |    5 +-
 .../CreateFlowTopNav.container.tsx            |    4 +
 .../DecisionMakingSidebar.container.tsx       |   12 +-
 app/components/utility/ErrorBoundary.tsx      |   58 -
 app/components/utility/ImagePlaceholder.tsx   |   70 --
 .../InfoMessageBox.container.tsx              |    4 +
 .../InputLabel/InputLabel.container.tsx       |   16 +-
 .../utility/InputLabel/InputLabel.types.ts    |   14 +-
 .../ModalFooter/ModalFooter.container.tsx     |   18 +
 app/components/utility/ModalFooter/index.tsx  |    2 +-
 .../ModalHeader/ModalHeader.container.tsx     |   18 +
 app/components/utility/ModalHeader/index.tsx  |    2 +-
 .../utility/Scrollbar/Scrollbar.container.tsx |   18 +
 app/components/utility/Scrollbar/index.tsx    |    2 +-
 .../utility/{ => Separator}/Separator.tsx     |    0
 app/components/utility/Separator/index.tsx    |    1 +
 app/components/utility/Tag/Tag.container.tsx  |    4 +
 app/contexts/MessagesContext.tsx              |   30 +-
 app/hooks/index.ts                            |   12 -
 app/hooks/useComponentStyles.ts               |  109 --
 app/hooks/useFormValidation.ts                |  213 ----
 app/layout.tsx                                |    4 +-
 docs/CUSTOM_HOOKS.md                          |  381 ------
 docs/README.md                                |   93 +-
 docs/TESTING_GUIDE.md                         |  266 -----
 docs/create-flow.md                           |   30 +-
 docs/{ => guides}/backend-linear-tickets.md   |   48 +-
 docs/{ => guides}/backend-roadmap.md          |    6 +-
 docs/guides/container-presentation-pattern.md |  401 -------
 docs/guides/i18n-translation-workflow.md      |  411 +------
 .../template-recommendation-matrix.md         |   30 +-
 docs/testing-guide.md                         |   68 ++
 lib/cache.ts                                  |  266 -----
 lib/create/api.ts                             |    2 +-
 lib/create/buildPublishPayload.ts             |    2 +-
 lib/create/draftHydrationUtils.ts             |    2 +-
 lib/create/migrateLegacyCreateFlowState.ts    |    2 +-
 lib/i18n/getTranslation.ts                    |   28 -
 lib/i18n/types.ts                             |   21 -
 lib/mdx.ts                                    |  354 ------
 lib/propNormalization.ts                      | 1033 ++++-------------
 lib/server/validation/createFlowSchemas.ts    |    2 +-
 lib/types.ts                                  |   29 -
 messages/en/pages/login.json                  |    1 +
 performance-budgets.json                      |   22 +-
 scripts/test-local.sh                         |   92 --
 stories/ContextMenu/ContextMenu.stories.js    |    8 +-
 stories/WebVitalsDashboard.stories.js         |    2 +-
 stories/asset/Icon.stories.js                 |   42 +
 stories/cards/NumberCard.stories.js           |    8 +-
 stories/cards/RuleCard.stories.js             |   52 +-
 stories/cards/TemplateReviewCard.stories.js   |   66 ++
 stories/controls/Checkbox.stories.js          |   20 +-
 stories/controls/Chip.stories.js              |   83 ++
 stories/controls/InputWithCounter.stories.js  |   82 ++
 stories/controls/MultiSelect.stories.js       |   85 ++
 stories/controls/RadioButton.stories.js       |   29 +-
 .../ApplicableScopeField.stories.js           |    2 +-
 .../create-flow/ModalTextAreaField.stories.js |    2 +-
 .../localization/LanguageSwitcher.stories.js  |   19 +
 stories/modals/Login.stories.tsx              |    2 +-
 stories/navigation/NavigationItem.stories.js  |   75 ++
 .../pages/CommunicationMethodsPage.stories.js |    2 +-
 stories/pages/CompletedPage.stories.js        |    2 +-
 .../pages/ConfirmStakeholdersPage.stories.js  |    2 +-
 .../pages/DecisionApproachesPage.stories.js   |    2 +-
 stories/pages/FinalReviewPage.stories.js      |    2 +-
 stories/pages/InformationalPage.stories.js    |    2 +-
 stories/pages/ReviewPage.stories.js           |    2 +-
 stories/pages/SelectPage.stories.js           |    2 +-
 stories/pages/TextPage.stories.js             |    2 +-
 stories/pages/UploadPage.stories.js           |    2 +-
 stories/progress/ProportionBar.stories.js     |    2 +-
 .../sections/CommunityRuleDocument.stories.js |   58 +
 .../GovernanceTemplateGrid.stories.js         |   29 +
 stories/utility/ErrorBoundary.stories.js      |   40 -
 stories/utility/ModalFooter.stories.js        |   71 ++
 stories/utility/ModalHeader.stories.js        |   42 +
 stories/utility/Separator.stories.js          |   28 +
 .../components/ApplicableScopeField.test.tsx  |    2 +-
 tests/components/Button.test.tsx              |    1 +
 tests/components/Chip.test.tsx                |   33 +
 .../components/CommunityRuleDocument.test.tsx |   37 +
 tests/components/CompletedPage.test.tsx       |    2 +-
 .../ConfirmStakeholdersPage.test.tsx          |    2 +-
 tests/components/ContentBanner.test.tsx       |    1 +
 tests/components/ContextMenu.test.tsx         |    4 +-
 tests/components/ContextMenuItem.test.tsx     |    2 +-
 .../CoreValuesSelectScreen.test.tsx           |    2 +-
 tests/components/CreateFlowFooter.test.tsx    |    1 +
 tests/components/FinalReviewPage.test.tsx     |    4 +-
 .../GovernanceTemplateGrid.test.tsx           |   28 +
 tests/components/HeaderLockup.test.tsx        |    5 +-
 tests/components/Icon.test.tsx                |   26 +
 tests/components/IconCard.test.tsx            |    1 +
 tests/components/InformationalPage.test.tsx   |    2 +-
 tests/components/InputLabel.test.tsx          |   24 +-
 tests/components/InputWithCounter.test.tsx    |   31 +
 tests/components/LanguageSwitcher.test.tsx    |   23 +
 tests/components/LoginForm.test.tsx           |    6 +-
 tests/components/Logo.test.tsx                |    1 +
 tests/components/ModalFooter.test.tsx         |   30 +
 tests/components/ModalHeader.test.tsx         |   28 +
 tests/components/ModalTextAreaField.test.tsx  |    2 +-
 tests/components/MultiSelect.test.tsx         |   16 +-
 tests/components/NavigationItem.test.tsx      |   29 +
 tests/components/NumberedList.test.tsx        |    1 +
 tests/components/ProportionBar.test.tsx       |    1 +
 tests/components/RelatedArticles.test.tsx     |    1 +
 tests/components/ReviewPage.test.tsx          |    2 +-
 tests/components/SelectPage.test.tsx          |    2 +-
 tests/components/Separator.test.tsx           |   22 +
 tests/components/Stepper.test.tsx             |    1 +
 tests/components/TemplateReviewCard.test.tsx  |   52 +
 tests/components/TextInput.test.tsx           |    6 +-
 tests/components/TextPage.test.tsx            |    2 +-
 tests/components/Tooltip.test.tsx             |    1 +
 tests/components/Upload.test.tsx              |    1 +
 tests/components/UploadPage.test.tsx          |    2 +-
 .../AuthModalContext.test.tsx                 |    6 +-
 tests/pages/communication-methods.test.jsx    |    2 +-
 tests/pages/decision-approaches.test.jsx      |    2 +-
 tests/unit/ContentContainer.test.jsx          |    1 +
 tests/unit/ContentThumbnailTemplate.test.jsx  |    1 +
 tests/unit/Layout.test.jsx                    |   56 +-
 tests/unit/LogoWall.test.jsx                  |    1 +
 tests/unit/NumberCard.test.jsx                |    9 +-
 tests/unit/RuleCard.test.jsx                  |    2 +-
 tests/unit/buildPublishPayload.test.ts        |    6 +-
 tests/unit/createFlowLayoutTokens.test.ts     |    2 +-
 .../unit/createFlowProportionProgress.test.ts |    2 +-
 tests/unit/createFlowValidation.test.ts       |    4 +-
 tests/unit/flowSteps.test.ts                  |    2 +-
 tests/unit/hasCreateFlowUserInput.test.ts     |    2 +-
 tests/unit/saveDraftToServer.test.ts          |    2 +-
 tests/utils/test-utils.tsx                    |    2 +-
 vitest.config.mjs                             |    6 +-
 288 files changed, 2698 insertions(+), 5029 deletions(-)
 create mode 100644 .cursor/rules/hooks.mdc
 create mode 100644 .cursor/rules/routes.mdc
 create mode 100644 AGENTS.md
 create mode 100644 app/(admin)/layout.tsx
 rename app/{ => (app)}/create/CreateFlowLayoutClient.tsx (96%)
 rename app/{ => (app)}/create/CreateFlowLayoutGate.tsx (100%)
 rename app/{ => (app)}/create/PostLoginDraftTransfer.tsx (97%)
 rename app/{ => (app)}/create/SignedInDraftHydration.tsx (95%)
 rename app/{ => (app)}/create/[screenId]/page.tsx (100%)
 rename app/{ => (app)}/create/components/ApplicableScopeField.tsx (95%)
 rename app/{ => (app)}/create/components/CreateFlowHeaderLockup.tsx (79%)
 rename app/{ => (app)}/create/components/CreateFlowLockupCardStepShell.tsx (100%)
 rename app/{ => (app)}/create/components/CreateFlowStepShell.tsx (100%)
 rename app/{ => (app)}/create/components/CreateFlowTwoColumnSelectShell.tsx (100%)
 rename app/{ => (app)}/create/components/ModalTextAreaField.tsx (93%)
 rename app/{ => (app)}/create/components/createFlowLayoutTokens.ts (100%)
 rename app/{ => (app)}/create/context/CreateFlowContext.tsx (100%)
 rename app/{ => (app)}/create/context/CreateFlowDraftSaveBannerContext.tsx (100%)
 rename app/{ => (app)}/create/hooks/useCreateFlowExit.ts (93%)
 rename app/{ => (app)}/create/hooks/useCreateFlowLgUp.ts (91%)
 rename app/{ => (app)}/create/hooks/useCreateFlowMdUp.ts (91%)
 rename app/{ => (app)}/create/hooks/useCreateFlowNavigation.ts (100%)
 rename app/{ => (app)}/create/layout.tsx (100%)
 rename app/{ => (app)}/create/page.tsx (100%)
 rename app/{ => (app)}/create/review-template/[slug]/page.tsx (91%)
 rename app/{ => (app)}/create/screens/CreateFlowScreenView.tsx (100%)
 rename app/{ => (app)}/create/screens/card/CommunicationMethodsScreen.tsx (96%)
 rename app/{ => (app)}/create/screens/card/ConflictManagementScreen.tsx (97%)
 rename app/{ => (app)}/create/screens/card/MembershipMethodsScreen.tsx (96%)
 rename app/{ => (app)}/create/screens/completed/CompletedScreen.tsx (87%)
 rename app/{ => (app)}/create/screens/informational/InformationalScreen.tsx (93%)
 rename app/{ => (app)}/create/screens/review/CommunityReviewScreen.tsx (94%)
 rename app/{ => (app)}/create/screens/review/FinalReviewScreen.tsx (89%)
 rename app/{ => (app)}/create/screens/right-rail/DecisionApproachesScreen.tsx (93%)
 rename app/{ => (app)}/create/screens/select/CommunitySizeSelectScreen.tsx (79%)
 rename app/{ => (app)}/create/screens/select/CommunityStructureSelectScreen.tsx (89%)
 rename app/{ => (app)}/create/screens/select/ConfirmStakeholdersScreen.tsx (87%)
 rename app/{ => (app)}/create/screens/select/CoreValuesSelectScreen.tsx (90%)
 rename app/{ => (app)}/create/screens/text/CreateFlowTextFieldScreen.tsx (93%)
 rename app/{ => (app)}/create/screens/upload/CommunityUploadScreen.tsx (91%)
 rename app/{ => (app)}/create/types.ts (100%)
 rename app/{ => (app)}/create/utils/anonymousDraftStorage.ts (89%)
 rename app/{ => (app)}/create/utils/coreValueDetailsLocalStorage.ts (100%)
 rename app/{ => (app)}/create/utils/createFlowProportionProgress.ts (93%)
 rename app/{ => (app)}/create/utils/createFlowScreenRegistry.ts (95%)
 rename app/{ => (app)}/create/utils/flowSteps.ts (100%)
 rename app/{ => (app)}/create/utils/hasCreateFlowUserInput.ts (100%)
 create mode 100644 app/(app)/layout.tsx
 rename app/{ => (app)}/login/layout.tsx (100%)
 rename app/{ => (app)}/login/page.tsx (85%)
 rename app/{ => (app)}/profile/ProfilePageClient.tsx (88%)
 rename app/{ => (app)}/profile/page.tsx (100%)
 create mode 100644 app/(dev)/layout.tsx
 rename app/(marketing)/{ => _components}/MarketingRuleStackSection.tsx (66%)
 create mode 100644 app/(marketing)/layout.tsx
 rename app/components/asset/{index.ts => index.tsx} (100%)
 rename app/components/asset/logo/{index.ts => index.tsx} (100%)
 rename app/components/cards/TemplateReviewCard/{index.ts => index.tsx} (100%)
 create mode 100644 app/components/controls/InputWithCounter/InputWithCounter.container.tsx
 rename app/components/controls/{SelectInput => }/SelectOption/SelectOption.container.tsx (91%)
 rename app/components/controls/{SelectInput => }/SelectOption/SelectOption.types.ts (68%)
 rename app/components/controls/{SelectInput => }/SelectOption/SelectOption.view.tsx (100%)
 rename app/components/controls/{SelectInput => }/SelectOption/index.tsx (100%)
 rename app/components/localization/LanguageSwitcher/{index.ts => index.tsx} (100%)
 rename app/components/{ => modals}/ContextMenu/ContextMenu.tsx (100%)
 rename app/components/{ => modals}/ContextMenu/ContextMenuDivider.tsx (100%)
 rename app/components/{ => modals}/ContextMenu/ContextMenuSection.tsx (100%)
 rename app/components/{ContextMenu => modals}/ContextMenuItem/ContextMenuItem.container.tsx (91%)
 rename app/components/{ContextMenu => modals}/ContextMenuItem/ContextMenuItem.types.ts (71%)
 rename app/components/{ContextMenu => modals}/ContextMenuItem/ContextMenuItem.view.tsx (100%)
 rename app/components/{ContextMenu => modals}/ContextMenuItem/index.tsx (100%)
 delete mode 100644 app/components/navigation/ConditionalFooter.tsx
 rename app/components/sections/GovernanceTemplateGrid/{index.ts => index.tsx} (100%)
 rename app/components/{ => sections}/WebVitalsDashboard/WebVitalsDashboard.container.tsx (98%)
 rename app/components/{ => sections}/WebVitalsDashboard/WebVitalsDashboard.types.ts (100%)
 rename app/components/{ => sections}/WebVitalsDashboard/WebVitalsDashboard.view.tsx (100%)
 rename app/components/{ => sections}/WebVitalsDashboard/index.tsx (100%)
 rename app/components/utility/{ => AvatarContainer}/AvatarContainer.tsx (62%)
 create mode 100644 app/components/utility/AvatarContainer/index.tsx
 delete mode 100644 app/components/utility/ErrorBoundary.tsx
 delete mode 100644 app/components/utility/ImagePlaceholder.tsx
 create mode 100644 app/components/utility/ModalFooter/ModalFooter.container.tsx
 create mode 100644 app/components/utility/ModalHeader/ModalHeader.container.tsx
 create mode 100644 app/components/utility/Scrollbar/Scrollbar.container.tsx
 rename app/components/utility/{ => Separator}/Separator.tsx (100%)
 create mode 100644 app/components/utility/Separator/index.tsx
 delete mode 100644 app/hooks/useComponentStyles.ts
 delete mode 100644 app/hooks/useFormValidation.ts
 delete mode 100644 docs/CUSTOM_HOOKS.md
 delete mode 100644 docs/TESTING_GUIDE.md
 rename docs/{ => guides}/backend-linear-tickets.md (86%)
 rename docs/{ => guides}/backend-roadmap.md (91%)
 delete mode 100644 docs/guides/container-presentation-pattern.md
 rename docs/{ => guides}/template-recommendation-matrix.md (96%)
 create mode 100644 docs/testing-guide.md
 delete mode 100644 lib/cache.ts
 delete mode 100644 lib/i18n/types.ts
 delete mode 100644 lib/mdx.ts
 delete mode 100644 lib/types.ts
 delete mode 100755 scripts/test-local.sh
 create mode 100644 stories/asset/Icon.stories.js
 create mode 100644 stories/cards/TemplateReviewCard.stories.js
 create mode 100644 stories/controls/Chip.stories.js
 create mode 100644 stories/controls/InputWithCounter.stories.js
 create mode 100644 stories/controls/MultiSelect.stories.js
 create mode 100644 stories/localization/LanguageSwitcher.stories.js
 create mode 100644 stories/navigation/NavigationItem.stories.js
 create mode 100644 stories/sections/CommunityRuleDocument.stories.js
 create mode 100644 stories/sections/GovernanceTemplateGrid.stories.js
 delete mode 100644 stories/utility/ErrorBoundary.stories.js
 create mode 100644 stories/utility/ModalFooter.stories.js
 create mode 100644 stories/utility/ModalHeader.stories.js
 create mode 100644 stories/utility/Separator.stories.js
 create mode 100644 tests/components/Chip.test.tsx
 create mode 100644 tests/components/CommunityRuleDocument.test.tsx
 create mode 100644 tests/components/GovernanceTemplateGrid.test.tsx
 create mode 100644 tests/components/Icon.test.tsx
 create mode 100644 tests/components/InputWithCounter.test.tsx
 create mode 100644 tests/components/LanguageSwitcher.test.tsx
 create mode 100644 tests/components/ModalFooter.test.tsx
 create mode 100644 tests/components/ModalHeader.test.tsx
 create mode 100644 tests/components/NavigationItem.test.tsx
 create mode 100644 tests/components/Separator.test.tsx
 create mode 100644 tests/components/TemplateReviewCard.test.tsx
 rename tests/{components => contexts}/AuthModalContext.test.tsx (94%)

diff --git a/.cursor/rules/component-props.mdc b/.cursor/rules/component-props.mdc
index d906ffc..200beec 100644
--- a/.cursor/rules/component-props.mdc
+++ b/.cursor/rules/component-props.mdc
@@ -1,59 +1,51 @@
 ---
-description: Figma ↔ codebase prop alignment & normalization for design-system components
+description: Component prop conventions — lowercase-canonical enums, Figma traceability
 globs: app/components/**/*.{ts,tsx}
 alwaysApply: false
 ---
 
 # Component prop alignment
 
-Figma emits PascalCase enum values (`"Standard"`, `"Inverse"`); the codebase
-stores lowercase (`"standard"`, `"inverse"`). Components must accept **both**,
-normalize to lowercase internally, and never break existing consumer call
-sites.
+Figma is the source of truth for component **design** (existence, variants,
+visual specification). The codebase implements those components using
+idiomatic TypeScript naming. Enum props are **lowercase** in code; PascalCase
+is a Figma-side concern only.
 
-## Scope
+## Enum prop convention
 
-Applies to enum-like string props: `variant`, `size`, `state`, `mode`, `type`,
-`position`, `alignment`, `status`, `color`, `palette`. **Skip** for free-form
-strings (URLs, classNames), booleans, numbers, or internal-only props.
-
-## Pattern
+- Types use lowercase string unions: `"small" | "medium" | "large"`.
+- Do NOT add PascalCase variants to type unions.
+- Do NOT call normalizers in containers. The container layer is for `memo`,
+  derived state, prop defaults, and bound logic — not for casing translation.
+- Each enum prop has a sibling `<COMPONENT>_<PROP>_OPTIONS as const` array
+  exported alongside the type. Storybook `argTypes` and any runtime guard
+  consume that array as the single source of valid values.
 
 ```typescript
-// Type accepts both formats
-export type ComponentSizeValue = "small" | "medium" | "Small" | "Medium";
-
-// Container normalizes via helpers from lib/propNormalization.ts
-import { normalizeSize } from "../../../lib/propNormalization";
-
-const ComponentContainer = ({ size: sizeProp = "small" }: Props) => {
-  const size = normalizeSize(sizeProp, SIZE_OPTIONS, "small");
-  return <ComponentView size={size} />;
-};
+export const CHIP_PALETTE_OPTIONS = ["primary", "secondary"] as const;
+export type ChipPaletteValue = (typeof CHIP_PALETTE_OPTIONS)[number];
 ```
 
-## Normalizers
-
-Use an existing helper from `lib/propNormalization.ts` before writing a new
-one. Generic: `normalizeMode`, `normalizeState`, `normalizeInputState`,
-`normalizeSize`, `normalizeAlignment`, `normalizeSmallMediumLargeSize`,
-`normalizeLabelVariant`. Component-specific variants are named
-`normalize<Component><Prop>` (e.g. `normalizeChipPalette`,
-`normalizeButtonState`) — add one there rather than inlining a switch in your
-container.
-
 ## Figma traceability
 
-Every DS component's container docstring cites its Figma origin so designers
-and engineers can jump between the two. Format: `Figma: "<Component Path>"
-(<node-id>)`.
+- Container docstring (required on every DS container): `Figma:
+  "<Component Path>" (<node-id>)`.
+- View root element: `data-figma-node="<id>"` when the view maps to a
+  distinct Figma node.
+- For create-flow screens, node ids come from `CREATE_FLOW_SCREEN_REGISTRY`
+  in `app/(app)/create/utils/createFlowScreenRegistry.ts`. For everything else,
+  pull the node id from the Figma file directly. Use `TODO(figma)` as a
+  placeholder rather than omitting the docstring entirely.
 
 ```typescript
 /**
- * Figma: "Control / Incrementer" (`17857:30943`). A compact [ - value + ]
- * row used for numeric step inputs…
+ * Figma: "Control / Incrementer" (17857:30943). A compact [ - value + ]
+ * row used for numeric step inputs.
  */
 ```
 
-When the view renders a distinct Figma node, add `data-figma-node="<id>"` on
-the root element for quick DOM-to-design lookup.
+## Pasting from Figma
+
+Figma's "Inspect → Code" output emits PascalCase. When importing a snippet,
+lowercase the enum values before committing — same pattern as removing
+inline pixel values in favor of design tokens.
diff --git a/.cursor/rules/component-structure.mdc b/.cursor/rules/component-structure.mdc
index 6bd9f32..449befe 100644
--- a/.cursor/rules/component-structure.mdc
+++ b/.cursor/rules/component-structure.mdc
@@ -22,24 +22,27 @@ app/components/controls/<Name>/
 **Container** (`<Name>.container.tsx`):
 
 - Marked `"use client"`.
-- Receives `<Name>Props`; normalizes PascalCase enums via
-  `lib/propNormalization.ts`; computes derived state (clamps, ids, bounds).
-- Renders `<<Name>View />` with already-normalized `<Name>ViewProps`.
+- Receives `<Name>Props`; computes derived state (clamps, ids, bounds, prop
+  defaults) and bound event handlers.
+- Renders `<<Name>View />`. Containers do **not** translate prop casing —
+  enum props are lowercase end-to-end (see `component-props.mdc`).
 - Default export: `memo(<Name>Container)` with `.displayName = "<Name>"`.
+- Carries the Figma docstring (`Figma: "<Path>" (<node-id>)`).
 
 **View** (`<Name>.view.tsx`):
 
 - Marked `"use client"`.
-- Pure render of `<Name>ViewProps`. No prop normalization, no data fetching,
-  no derived business logic.
-- Default export: `memo(<Name>View)` with
-  `.displayName = "<Name>View"`.
+- Pure render of `<Name>ViewProps`. No data fetching, no derived business
+  logic, no enum casing translation.
+- Default export: `memo(<Name>View)` with `.displayName = "<Name>View"`.
 
 **Types** (`<Name>.types.ts`):
 
-- Export `<Name>Props` (consumer-facing, accepts PascalCase + lowercase).
-- Export `<Name>ViewProps` (already-normalized shape the view consumes).
-- Export any locally-defined value types (`<Name>SizeValue`, etc.).
+- Export `<Name>Props` (consumer-facing).
+- Export `<Name>ViewProps` (the shape the view consumes — typically a
+  resolved superset of `<Name>Props`).
+- Export any locally-defined value types (`<Name>SizeValue`, etc.) sourced
+  from the matching `*_OPTIONS` array in `lib/propNormalization.ts`.
 
 **Index** (`index.tsx`):
 
@@ -51,10 +54,10 @@ export type { <Name>Props } from "./<Name>.types";
 ## Single-file pattern (exception)
 
 `app/components/buttons/*.tsx` and other trivially-presentational components
-can stay as a single file when they have **no enum prop normalization and no
-derived state** (e.g. `Button.tsx`, `InlineTextButton.tsx`). If you find
-yourself adding state, enum normalization, or more than a handful of props,
-promote it to the split pattern.
+can stay as a single file when they have **no derived state and only a
+handful of props** (e.g. `Button.tsx`, `InlineTextButton.tsx`). If you find
+yourself adding state, side effects, or enum logic, promote it to the split
+pattern.
 
 ## Wrapper / group components
 
diff --git a/.cursor/rules/create-flow.mdc b/.cursor/rules/create-flow.mdc
index e64c450..9c9a417 100644
--- a/.cursor/rules/create-flow.mdc
+++ b/.cursor/rules/create-flow.mdc
@@ -1,6 +1,6 @@
 ---
 description: Create-flow structure & design-system reuse guardrails
-globs: app/create/**/*.{ts,tsx},messages/en/create/**/*.json
+globs: app/(app)/create/**/*.{ts,tsx},messages/en/create/**/*.json
 alwaysApply: false
 ---
 
@@ -8,15 +8,15 @@ alwaysApply: false
 
 ## Folder & file layout
 
-- Screens live in `app/create/screens/<layoutKind>/<StepIdPascal>Screen.tsx`
+- Screens live in `app/(app)/create/screens/<layoutKind>/<StepIdPascal>Screen.tsx`
   where `<layoutKind>` mirrors `CreateFlowLayoutKind` (`card`, `select`,
   `right-rail`, `completed`, …). File + export name is the **step id**, never
   the layout kind (e.g. `DecisionApproachesScreen`, not `RightRailScreen`).
 - Step id ↔ layout kind mapping is declared in
-  `app/create/utils/createFlowScreenRegistry.ts`. Never branch on layout kind
+  `app/(app)/create/utils/createFlowScreenRegistry.ts`. Never branch on layout kind
   inside a screen — pick the matching shell (`CreateFlowStepShell` /
   `CreateFlowTwoColumnSelectShell`).
-- Shared create-flow pieces go in `app/create/components/` (layout shells,
+- Shared create-flow pieces go in `app/(app)/create/components/` (layout shells,
   field composites). Generic primitives go in `app/components/`.
 
 ## Use the design system — don't hand-roll
@@ -25,8 +25,8 @@ Reach for these before writing new markup:
 
 | Need | Component |
 | --- | --- |
-| Labelled text-area section in a modal | `app/create/components/ModalTextAreaField` |
-| Toggle-chip row + inline "+ Add" input | `app/create/components/ApplicableScopeField` |
+| Labelled text-area section in a modal | `app/(app)/create/components/ModalTextAreaField` |
+| Toggle-chip row + inline "+ Add" input | `app/(app)/create/components/ApplicableScopeField` |
 | `[– value +]` numeric stepper (± label) | `app/components/controls/Incrementer` / `IncrementerBlock` |
 | Mid-paragraph "expand / see all" link button | `app/components/buttons/InlineTextButton` |
 | Help-icon + label above a control | `app/components/utility/InputLabel` (`helpIcon` prop) |
diff --git a/.cursor/rules/hooks.mdc b/.cursor/rules/hooks.mdc
new file mode 100644
index 0000000..245199e
--- /dev/null
+++ b/.cursor/rules/hooks.mdc
@@ -0,0 +1,59 @@
+---
+description: Custom hooks live in app/hooks; co-locate logic, document via TSDoc.
+globs: app/hooks/**/*.{ts,tsx}
+alwaysApply: false
+---
+
+# Custom hooks
+
+Reusable component logic lives in `app/hooks/`. Each hook is a small, focused
+module with a TSDoc block that doubles as the API reference (no separate doc
+file).
+
+## File layout
+
+- One file per hook: `app/hooks/use<Name>.ts`.
+- Re-export from `app/hooks/index.ts`. Consumers import from the barrel:
+  `import { useFoo } from "../hooks";`.
+- Companion unit test (when there is non-trivial logic): `tests/unit/hooks/`.
+
+## Authoring rules
+
+- Marked as a regular function (`export function useFoo() {}`); React handles
+  the `use*` naming convention.
+- Wrap exposed callbacks in `useCallback` and computed values in `useMemo`
+  so consumers can list them in dependency arrays without churn.
+- Read DOM/browser APIs only inside `useEffect` so the hook stays SSR-safe.
+- Never throw on missing globals (e.g. `window`, `gtag`); guard and no-op.
+
+## TSDoc — the only reference
+
+Every exported hook gets a TSDoc block with:
+
+- 1–2 sentence summary.
+- `@param` per argument and `@returns` describing the shape.
+- `@example` showing the typical call site.
+
+```ts
+/**
+ * Detect clicks outside a set of elements (e.g. close a dropdown).
+ *
+ * @param refs Elements that should NOT trigger the handler.
+ * @param handler Invoked when a click lands outside every ref.
+ * @param enabled Toggle without unmounting the consumer (default true).
+ *
+ * @example
+ * useClickOutside([menuRef, buttonRef], () => setOpen(false), open);
+ */
+export function useClickOutside(
+  refs: Array<RefObject<HTMLElement>>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  enabled = true,
+): void { /* ... */ }
+```
+
+## Container/view consumption
+
+Hooks belong in **container** files (per `component-structure.mdc`). Views
+stay pure and read derived values via props — never call hooks that touch
+state or side effects from a view.
diff --git a/.cursor/rules/routes.mdc b/.cursor/rules/routes.mdc
new file mode 100644
index 0000000..1f9d9dd
--- /dev/null
+++ b/.cursor/rules/routes.mdc
@@ -0,0 +1,88 @@
+---
+description: App Router route organization (groups, layouts, chrome composition)
+globs: app/**/*.{ts,tsx}
+alwaysApply: false
+---
+
+# Route organization
+
+Top-level routes live inside **route groups** so each surface owns its own
+layout and chrome. Groups are wrapping folders in `(parens)` — they organize
+the file tree without affecting URLs.
+
+## Group map
+
+| Group | URL surface | Audience | Chrome |
+|---|---|---|---|
+| `app/(marketing)/` | `/`, `/learn`, `/blog`, `/templates`, future public pages | Public, indexable | TopNav (via root) + marketing `<Footer />` |
+| `app/(app)/` | `/create/*`, `/login`, `/profile`, future signed-in surfaces | Authenticated product | TopNav (via root) — no footer |
+| `app/(admin)/` | `/monitor`, future ops dashboards | Operators | TopNav (via root) — no footer |
+| `app/(dev)/` | `/components-preview`, future dev previews | Local dev (NODE_ENV gated) | TopNav (via root) — no footer |
+| `app/api/` | API routes | n/a | n/a |
+
+Route folders **must not** sit loose at the top level of `app/`. If a new
+surface doesn't fit an existing group, add a new group rather than dropping
+the folder next to `(marketing)/`.
+
+## Layout responsibilities
+
+- **`app/layout.tsx`** — `<html>`, `<body>`, providers (`MessagesProvider`,
+  `AuthModalProvider`), fonts, and `ConditionalNavigation`. Renders
+  `{children}` directly inside the flex column. **Does not** render
+  `<main>` — each group layout owns that.
+- **`app/(marketing)/layout.tsx`** — wraps with `<main className="flex-1">`
+  and appends the public `<Footer />`.
+- **`app/(app)/layout.tsx`** / **`(admin)/layout.tsx`** / **`(dev)/layout.tsx`** —
+  wrap with `<main className="flex-1">`. No footer.
+- **Nested layouts** (e.g. `(app)/create/layout.tsx`) compose feature-specific
+  chrome inside the group's `<main>` — never render `<html>`, `<body>`,
+  `<main>`, or providers.
+
+If a route needs different chrome than its group provides, prefer adding a
+**nested layout** under that route — don't introduce pathname-sniffing
+client components. (`ConditionalNavigation` is the lone tolerated exception
+because it carries SSR session state; do not add new pathname-conditional
+chrome components.)
+
+## Co-located component folders
+
+Page-private server/client components that are **only** used by routes in a
+given group go in `_components/` inside that group:
+
+```
+app/(marketing)/_components/MarketingRuleStackSection.tsx
+```
+
+The leading underscore makes Next.js treat the folder as **private** — it's
+ignored by the router. Use this instead of letting page-only files sit next
+to `page.tsx`.
+
+Components reused across groups belong in `app/components/<category>/`
+(see `component-structure.mdc`).
+
+## Adding a new route
+
+1. **Choose the group** by audience: marketing (public), app (signed-in),
+   admin (operators), dev (local-only). When in doubt, ask whether the
+   public marketing footer should appear — if yes, it's `(marketing)`.
+2. Create `app/(<group>)/<route>/page.tsx`. URLs do **not** include the
+   group name.
+3. If the route needs its own chrome (e.g. a wizard header), add
+   `app/(<group>)/<route>/layout.tsx`.
+4. If the route ships private helpers, put them in
+   `app/(<group>)/<route>/_components/` (or
+   `app/(<group>)/_components/` for group-wide page components).
+
+## Splitting a group
+
+Promote a sub-cluster to its own group only when **both** are true:
+
+- It will hold ≥2 routes that share a layout, **or** it has a clearly
+  distinct audience/access model (e.g. a future `(auth)/` for
+  signup/forgot/verify alongside login).
+- Moving the routes pays for itself by replacing existing pathname
+  conditionals or by composing real shared chrome — not just by tidying
+  the folder list.
+
+YAGNI applies: a group with one route and no shared layout is just a
+folder with parens.
diff --git a/.cursor/rules/storybook.mdc b/.cursor/rules/storybook.mdc
index a73b31c..873a716 100644
--- a/.cursor/rules/storybook.mdc
+++ b/.cursor/rules/storybook.mdc
@@ -6,14 +6,22 @@ alwaysApply: false
 
 # Where stories live
 
-All stories live in the top-level `stories/` folder, mirroring the
-`app/components/` directory tree:
+All stories live in the top-level `stories/` folder. Two layout rules:
 
-| Source                            | Story location                         |
-| --------------------------------- | -------------------------------------- |
-| `app/components/controls/Chip`    | `stories/controls/Chip.stories.js`     |
-| `app/components/buttons/Button`   | `stories/buttons/Button.stories.js`    |
-| `app/create/screens/.../FooScreen`| `stories/pages/FooPage.stories.js`     |
+- **Design-system components** mirror `app/components/`. A component at
+  `app/components/<bucket>/<Name>` gets `stories/<bucket>/<Name>.stories.js`.
+- **Create-flow material** has two carve-outs:
+  - `stories/create-flow/` — shared create-flow pieces that aren't in
+    `app/components/` (e.g. composed wizard fragments).
+  - `stories/pages/` — integration stories that exercise an entire
+    `app/(app)/create/screens/<...>` screen as it appears in the wizard.
+
+| Source                            | Story location                          |
+| --------------------------------- | --------------------------------------- |
+| `app/components/controls/Chip`    | `stories/controls/Chip.stories.js`      |
+| `app/components/buttons/Button`   | `stories/buttons/Button.stories.js`     |
+| `app/(app)/create/screens/.../FooScreen`| `stories/pages/FooPage.stories.js`      |
+| Shared create-flow fragment       | `stories/create-flow/<Name>.stories.js` |
 
 Do **not** colocate `*.stories.*` next to components. The Storybook config
 (`.storybook/main.js`) only globs `stories/**`.
@@ -65,8 +73,9 @@ export const Default = { args: { variant: "filled" } };
 ## `argTypes`
 
 For every Figma enum prop (`variant`, `size`, `state`, `mode`, `palette`,
-…) expose a `select` control listing the **lowercase** option set — even
-though the prop accepts PascalCase too. See `.cursor/rules/component-props.mdc`.
+…) expose a `select` control listing the **lowercase** option set, sourced
+from the matching `*_OPTIONS` const in `lib/propNormalization.ts`. See
+`.cursor/rules/component-props.mdc`.
 
 # Rely on the global preview — don't re-wrap
 
@@ -101,5 +110,5 @@ export const Interactive = {
 # Coverage expectation
 
 Every new component in `app/components/**` ships with a story. Screens in
-`app/create/screens/**` ship with a `stories/pages/<Name>Page.stories.js`
+`app/(app)/create/screens/**` ship with a `stories/pages/<Name>Page.stories.js`
 entry. A new component without a story is considered incomplete.
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..fd83a27
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,82 @@
+# Agent guide
+
+Orientation for AI coding agents working in this repo. Per-file conventions
+live in `.cursor/rules/*.mdc` (auto-loaded by Cursor; other agents should
+read them on demand). This file is the **map** — load it first, then load
+the rule(s) matching the file you're editing.
+
+## What this is
+
+Next.js 16 / React 19 app for community decision-making and governance.
+Single-locale (English) today; designed for i18n via `messages/`.
+
+## Read before editing
+
+| If you're touching… | Load this rule |
+| --- | --- |
+| `app/components/**` | `component-structure.mdc`, `component-props.mdc`, `tailwind-styling.mdc` |
+| `app/(app)/create/**` | `create-flow.mdc` (+ component rules) |
+| `app/api/**` | `api-routes.mdc` |
+| `app/hooks/**` | `hooks.mdc` |
+| `app/**/page.tsx` or `app/**/layout.tsx` | `routes.mdc` |
+| `messages/**` or any user-visible string | `localization.mdc` |
+| `tests/**` | `testing.mdc` |
+| `stories/**` | `storybook.mdc` |
+
+When in doubt about file structure or naming, the rules win over your
+priors — they reflect deliberate decisions.
+
+## Cross-cutting principles (no single rule owns these)
+
+1. **Figma is the source of truth for design.** Container files carry a
+   `Figma: "<Path>" (<node-id>)` docstring; views render Figma intent.
+   Codebase naming uses lowercase conventions (see `component-props.mdc`)
+   even when Figma uses PascalCase enum values.
+2. **Container / view split is the component pattern.** Never put state
+   or side effects in a `*.view.tsx`. Hooks belong in containers.
+3. **All user-visible text lives in `messages/`.** Hardcoded strings in
+   components are a bug — even for placeholders.
+4. **Tests live in `tests/`, not co-located.** Mirror the source path
+   (`app/components/Foo` → `tests/components/Foo.test.tsx`).
+5. **Routes live inside groups** — `(marketing)`, `(app)`, `(admin)`,
+   `(dev)`. Don't drop a new route folder loose at the top of `app/`.
+6. **No new pathname-sniffing chrome.** Compose chrome via group/nested
+   layouts, not `usePathname()` checks. (`ConditionalNavigation` is the
+   sole tolerated exception — it carries SSR session state.)
+
+## Legacy / scaffolding
+
+Some code exists temporarily while backend services are stood up:
+
+- `NEXT_PUBLIC_ENABLE_BACKEND_SYNC` gating
+- `migrateLegacyCreateFlowState`, `LEGACY_LIVE_KEY`, `LEGACY_DRAFT_KEY`
+- `/create/right-rail` redirect
+- `docs/guides/backend-roadmap.md`, `backend-linear-tickets.md`,
+  `template-recommendation-matrix.md`
+
+**Do not delete** without an explicit ask. Do not add new code in this
+shape — when adding scaffolding, leave a `// TODO(legacy): …` with the
+removal trigger.
+
+## Verification recipe
+
+Run these (in order) before declaring a change done. They mirror CI:
+
+```bash
+rm -rf .next            # only if you moved/renamed routes or layouts
+npx tsc --noEmit        # type check
+npx vitest run          # unit + component (101 files / ~700 tests)
+npx next build          # production build + route manifest
+```
+
+For UI-only changes, also: `npm run storybook` and visually confirm.
+For E2E-relevant changes: `npm run e2e`.
+
+## Where else to look
+
+- [README.md](README.md) — human onboarding, scripts, project layout.
+- [CONTRIBUTING.md](CONTRIBUTING.md) — local Postgres + Prisma + magic-link
+  setup, PR workflow.
+- [docs/README.md](docs/README.md) — index of user-facing docs.
+- [docs/create-flow.md](docs/create-flow.md) — wizard URL/persistence canon
+  (read alongside `create-flow.mdc`).
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0ab1db8..985deb3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,51 +1,76 @@
 # Contributing
 
-## Backend (local)
+## Local backend
 
-1. Copy [`.env.example`](.env.example) to `.env` and set `SESSION_SECRET` (at least 16 characters).
-2. `docker compose up -d postgres mailhog` — omit `mailhog` if you only need Postgres; with `SMTP_URL` unset, the **magic-link verify URL** is printed in the dev server log (see `.env.example`).
-3. Install dependencies: `npm ci`
-4. Apply migrations: `npx prisma migrate dev`
-5. (Optional) Seed curated rule templates: `npx prisma db seed` — requires `DATABASE_URL` and applied migrations. Safe to re-run; rows are upserted by `slug` so duplicates are not created.
-6. Run the app: `npm run dev`
+1. Copy [`.env.example`](.env.example) to `.env` and set `SESSION_SECRET`
+   (at least 16 characters).
+2. `docker compose up -d postgres mailhog` — omit `mailhog` if you only
+   need Postgres. Without `SMTP_URL`, the **magic-link verify URL** is
+   printed in the dev server log.
+3. `npm ci`
+4. `npx prisma migrate dev`
+5. *(Optional)* `npx prisma db seed` — seeds curated rule templates.
+   Idempotent; rows upsert by `slug`.
+6. `npm run dev`
 
 Use `npx prisma studio` to inspect the database.
 
-### Prisma migrations (important)
+### Prisma migrations
 
-- **Do not edit** migration files that have **already been applied** to **staging, production, or any shared database**. Changing history breaks `migrate deploy` and other environments.
-- To fix a bad migration, add a **new** migration that corrects the schema. See [docs/backend-roadmap.md](docs/backend-roadmap.md) §8 for the full policy.
+- **Never edit** a migration that has already been applied to staging,
+  production, or any shared database. Add a **new** migration that
+  corrects the schema instead. Full policy:
+  [docs/guides/backend-roadmap.md](docs/guides/backend-roadmap.md) §8.
 
-### API routes (overview)
+### API routes
 
-| Method     | Path                           | Purpose                                       |
-| ---------- | ------------------------------ | --------------------------------------------- |
-| GET        | `/api/health`                  | Liveness / DB check                           |
-| GET        | `/api/auth/session`            | Current user or null                          |
-| POST       | `/api/auth/magic-link/request` | Send sign-in link email                       |
-| GET        | `/api/auth/magic-link/verify`  | Validate token, set session cookie, redirect  |
-| POST       | `/api/auth/logout`             | Clear session                                 |
-| GET / PUT  | `/api/drafts/me`               | Load or save create-flow JSON (authenticated) |
-| GET / POST | `/api/rules`                   | List or publish rules (each **Finalize** creates a new published row until an update/edit-published API exists) |
-| GET        | `/api/templates`               | List curated templates                        |
+| Method | Path | Purpose |
+| --- | --- | --- |
+| GET | `/api/health` | Liveness / DB check. |
+| GET | `/api/auth/session` | Current user or null. |
+| POST | `/api/auth/magic-link/request` | Send sign-in link email. |
+| GET | `/api/auth/magic-link/verify` | Validate token, set cookie, redirect. |
+| POST | `/api/auth/logout` | Clear session. |
+| GET / PUT | `/api/drafts/me` | Load or save the create-flow draft. |
+| GET / POST | `/api/rules` | List or publish rules. |
+| GET | `/api/templates` | List curated templates. |
 
-### Email magic link (sign-in)
+### Magic-link sign-in
 
-- Open **[http://localhost:3000/login](http://localhost:3000/login)** or use **Log in** in the site header (modal or full page).
-- Enter email and request a link. Complete sign-in by opening the link in the **same browser** you use for the app (session cookie).
-- **No `SMTP_URL`:** the full **`GET /api/auth/magic-link/verify?...`** URL is printed in the **dev server terminal** — paste it into the browser address bar.
-- **Mailhog:** with Compose Mailhog running, set `SMTP_URL=smtp://localhost:1025` and open the link from the message in the Mailhog UI ([http://localhost:8025](http://localhost:8025)).
-
-**Staging / production:** Sign-in links use the app’s origin. Ensure your reverse proxy sets **`Host`** (and TLS) so links in email match the URL users open. See [docs/backend-roadmap.md](docs/backend-roadmap.md) §9.
+- Visit **[/login](http://localhost:3000/login)** or use **Log in** in the
+  site header.
+- Without `SMTP_URL`: copy the verify URL from the dev server terminal.
+- With Mailhog: set `SMTP_URL=smtp://localhost:1025` and open the message
+  at [http://localhost:8025](http://localhost:8025).
+- Open the link in the **same browser** as the app (session cookie).
 
 ### Optional draft sync
 
-Set `NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` in `.env` so **signed-in** users can persist create-flow drafts to Postgres via **Save & Exit** and so **anonymous** progress can be **uploaded after magic-link sign-in** from the save-progress exit modal. Without it, server **PUT** `/api/drafts/me` is skipped; anonymous work stays in **browser `localStorage`**, but after sign-in with a `?syncDraft=1` return URL the app still **merges that local draft into the in-memory create flow** (no server write) so you can continue and publish.
+`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` enables Postgres draft persistence
+via `PUT /api/drafts/me` for signed-in users and post-sign-in upload of
+anonymous drafts. Without it, anonymous progress stays in `localStorage`
+and signed-in progress stays in memory until **Save & Exit**.
 
-### Create flow URLs (custom wizard)
+### Create flow
 
-The **custom** create-rule wizard lives under **`/create/…`**. The header links to **`/create`**, which redirects to the first step. **Semantic** URL segments (e.g. `community-name`, `community-size`) match Figma intent; order is **`FLOW_STEP_ORDER`** in `app/create/utils/flowSteps.ts`, with UI from **`app/create/[screenId]/page.tsx`** and **`CREATE_FLOW_SCREEN_REGISTRY`** for Figma traceability. **Figma** stages: **Create Community** (through `review`), **Create Custom CommunityRule** (`communication-methods`–`right-rail`), **Review and complete** (`confirm-stakeholders`–`completed`). **`/create/review-template/[slug]`** is a template **preview** only. Full tables and persistence are in **[docs/create-flow.md](docs/create-flow.md)**; engineering tracking: Linear **CR-89** / Ticket 17 in [docs/backend-linear-tickets.md](docs/backend-linear-tickets.md).
+The custom wizard lives under `/create/…`. Step order, URLs, and Figma
+stage mapping are canon in [docs/create-flow.md](docs/create-flow.md).
+Engineering tracking: Linear **CR-89** /
+[docs/guides/backend-linear-tickets.md](docs/guides/backend-linear-tickets.md)
+Ticket 17.
 
-## Frontend / tests
+## Frontend & tests
 
-See [docs/TESTING_GUIDE.md](docs/TESTING_GUIDE.md) and the root [README.md](README.md).
+- Code conventions are enforced by `.cursor/rules/*.mdc` — Cursor surfaces
+  the relevant rule when editing matching files.
+- See [docs/testing-guide.md](docs/testing-guide.md) for testing
+  philosophy and `.cursor/rules/testing.mdc` for layout/helpers.
+
+## Pull request workflow
+
+1. Branch from `main`: `git checkout -b feature/<short-name>`.
+2. Make the change and add/update tests.
+3. `npm test && npm run e2e` (and `npm run storybook:build` if you touched
+   stories).
+4. Commit using a clear message (`feat:`, `fix:`, `chore:`, …).
+5. Open a PR; CI runs unit, E2E, visual regression, and Lighthouse.
diff --git a/README.md b/README.md
index 4ef1aaf..769f4ed 100644
--- a/README.md
+++ b/README.md
@@ -1,252 +1,64 @@
 # Community Rule
 
-A Next.js application for community decision-making and governance documentation.
+A Next.js application for community decision-making and governance
+documentation.
 
-## 📋 Requirements
+## Requirements
 
-- **Node.js**: 20.0.0 or higher (LTS recommended)
-- **npm**: 10.0.0 or higher
+- Node.js **20+** (LTS)
+- npm **10+**
 
-## 🚀 Getting Started
-
-Run the development server:
+## Getting started
 
 ```bash
+npm ci
 npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000).
 
-Backend (Postgres, Prisma, API routes) setup is documented in [CONTRIBUTING.md](CONTRIBUTING.md).
+Backend setup (Postgres, Prisma, magic-link auth) is documented in
+[CONTRIBUTING.md](CONTRIBUTING.md).
 
-## 🧪 Testing Framework
+## Common scripts
 
-This project uses a simplified, component‑first testing model:
+| Command | What it does |
+| --- | --- |
+| `npm run dev` | Next.js dev server (Turbopack). |
+| `npm run build` / `npm start` | Production build / serve. |
+| `npm test` | Vitest unit + component tests with coverage. |
+| `npm run test:component` | Faster inner loop — components only. |
+| `npm run e2e` | Playwright E2E + visual regression. |
+| `npm run storybook` | Storybook on port 6006. |
+| `npm run lhci` | Lighthouse CI performance pass. |
 
-- **Component tests (Vitest + RTL)** live in `tests/components/` with a single file per component.
-- **E2E tests (Playwright)** cover critical user journeys and visual regression.
+## Project layout
 
-### Quick Test Commands
-
-```bash
-# All component tests with coverage
-npm test
-
-# Component tests only (new structure)
-npm run test:component
-
-# E2E tests only
-npm run test:e2e
+```text
+app/              Next.js app router (routes, components, hooks, contexts)
+lib/              Shared library code (i18n, validation, utilities)
+messages/en/      Localized UI copy (see docs/guides/i18n-translation-workflow.md)
+prisma/           Database schema, migrations, seed
+public/           Static assets
+stories/          Storybook stories
+tests/            Vitest + Playwright suites
+docs/             User-facing documentation (start with docs/README.md)
+.cursor/rules/    Implementation conventions enforced by Cursor
 ```
 
-### Test Coverage
+## Tech stack
 
-- ✅ **428 Unit Tests** (94.88% coverage - exceeds 85% target)
-- ✅ **92 E2E Tests** across 4 browsers
-- ✅ **23 Visual Regression Tests** per browser
-- ✅ **Performance Budgets** with Lighthouse CI
-- ✅ **WCAG 2.1 AA Compliance** with automated testing
-- ✅ **Bundle Analysis** with automated monitoring
-- ✅ **Web Vitals Tracking** with real-time metrics
+Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 · Prisma · Vitest ·
+Playwright · Storybook 10 · Lighthouse CI.
 
-### CI/CD Pipeline
+## Documentation
 
-- **Gitea Actions** with 7 parallel jobs
-- **Cross-browser testing** (Chromium, Firefox, WebKit, Mobile)
-- **Visual regression testing**
-- **Performance monitoring**
-- **Code coverage reporting**
+- [docs/README.md](docs/README.md) — index of guides and rules.
+- [docs/create-flow.md](docs/create-flow.md) — create-rule wizard canon.
+- [docs/testing-guide.md](docs/testing-guide.md) — testing philosophy.
+- [CONTRIBUTING.md](CONTRIBUTING.md) — local backend, API routes, PR
+  workflow.
 
-📖 **For detailed testing documentation, see `docs/TESTING_GUIDE.md` and [docs/README.md](docs/README.md)**
+## License
 
-## ⚡ Performance Optimizations
-
-This project includes comprehensive performance optimizations for sub-2-second load times:
-
-### Frontend Optimizations
-
-- **✅ Code Splitting**: Dynamic imports for non-critical components
-- **✅ React.memo**: Applied to all 30+ components to prevent unnecessary re-renders
-- **✅ Image Optimization**: Enhanced `next/image` with lazy loading and blur placeholders
-- **✅ Font Optimization**: Preloading and fallbacks for all fonts
-- **✅ Bundle Analysis**: Real-time monitoring with performance budgets
-- **✅ Error Boundaries**: Comprehensive error handling
-
-### Performance Monitoring
-
-Performance testing is handled by:
-
-- **Lighthouse CI** (`.lighthouserc.json`): Comprehensive performance testing in CI
-
-  ```bash
-  npm run lhci              # Run Lighthouse CI
-  npm run lhci:mobile       # Mobile preset
-  npm run lhci:desktop      # Desktop preset
-  npm run performance:budget # With performance budgets
-  ```
-
-- **E2E Performance Tests** (`tests/e2e/performance.spec.ts`): Essential performance checks
-
-  ```bash
-  npm run e2e:performance   # Run E2E performance tests
-  ```
-
-- **Bundle Analysis**: Analyze bundle sizes
-  ```bash
-  npm run bundle:analyze    # Analyze bundle sizes
-  ```
-
-### Performance Targets
-
-- **Bundle Size**: <250KB gzipped (currently 101KB) ✅
-- **Core Web Vitals**: All metrics in "Good" range ✅
-- **Lighthouse Score**: >90 on all critical pages ✅
-- **Load Time**: <2 seconds on 3G connections ✅
-
-## 📚 Storybook Development
-
-This project includes Storybook for component development and documentation. The setup automatically detects the environment and applies the appropriate configuration.
-
-### Local Development
-
-For local Storybook development:
-
-```bash
-npm run storybook:local
-# or simply
-npm run storybook
-```
-
-This will:
-
-- Start Storybook at `http://localhost:6006`
-- Use relative paths for assets (no base path)
-
-### GitHub Pages Deployment
-
-For GitHub Pages deployment with base path:
-
-```bash
-npm run storybook:build:github
-```
-
-This will:
-
-- Build Storybook with `/communityrulestorybook/` base path
-- Generate files ready for GitHub Pages deployment
-
-### CI/CD Integration
-
-The CI pipeline automatically uses the GitHub Pages configuration when building Storybook.
-
-### Configuration
-
-The Storybook configuration automatically detects the environment:
-
-- **Local development**: No base path, relative assets
-- **CI/Production**: Base path `/communityrulestorybook/` for GitHub Pages
-
-## 📋 Available Scripts
-
-### Development
-
-- `npm run dev` - Start Next.js development server
-- `npm run build` - Build Next.js application for production
-- `npm run start` - Start Next.js production server
-
-### Testing
-
-- `npm test` - Run all component tests with coverage
-- `npm run test:component` - Run tests in `tests/components/` only
-- `npm run test:watch` - Run tests in watch mode
-- `npm run test:ui` - Run tests with UI
-- `npm run test:e2e` - Run E2E tests only
-- `npm run e2e` - Alias for Playwright E2E tests
-- `npm run e2e:ui` - Run E2E tests with UI
-- `npm run e2e:serve` - Start dev server and run E2E tests
-- `npm run lhci` - Run performance tests
-
-### Storybook
-
-- `npm run storybook:local` - Start Storybook for local development
-- `npm run storybook:github` - Start Storybook with GitHub Pages configuration
-- `npm run storybook:build` - Build Storybook for local deployment
-- `npm run storybook:build:github` - Build Storybook for GitHub Pages
-- `npm run storybook` - Start Storybook with current configuration
-
-## 🏗️ Project Structure
-
-```
-community-rule/
-├── app/                          # Next.js app directory
-│   ├── components/              # React components
-│   ├── hooks/                   # Custom React hooks
-│   ├── layout.tsx              # Root layout
-│   └── page.tsx                # Homepage
-├── config/                       # Project-specific configuration
-│   ├── gitea-runner.yaml       # Gitea runner configuration
-│   └── runner-config.yaml      # Runner configuration
-├── docs/                         # Documentation
-│   ├── README.md               # Documentation index
-│   ├── TESTING_GUIDE.md        # Testing guide
-│   ├── CUSTOM_HOOKS.md         # Custom hooks documentation
-│   └── guides/                 # Guides
-│       └── content-creation.md # Content creation guide
-├── scripts/                      # Utility scripts
-│   ├── start-runner.sh        # Start Gitea runner
-│   ├── status-runner.sh       # Check runner status
-│   └── stop-runner.sh         # Stop Gitea runner
-├── tests/                        # Test files
-│   ├── components/             # Component tests (Vitest + RTL)
-│   ├── pages/                 # Page-level tests
-│   ├── e2e/                   # E2E tests (Playwright)
-│   ├── utils/                 # Test utilities (componentTestSuite, etc.)
-│   ├── msw/                   # MSW server setup
-│   └── accessibility/         # E2E accessibility checks
-├── .storybook/                  # Storybook configuration
-├── .gitea/                      # Gitea Actions workflows
-│   └── workflows/
-│       └── ci.yaml            # CI/CD pipeline
-└── public/                      # Static assets
-```
-
-## 🔧 Technology Stack
-
-- **Framework**: Next.js 16 + React 19
-- **Runtime**: Node.js 20+ (LTS)
-- **Styling**: Tailwind CSS 4
-- **Testing**: Vitest + Playwright + Lighthouse CI
-- **Documentation**: Storybook 10
-- **CI/CD**: Gitea Actions
-- **Hosting**: Gitea (Git hosting)
-
-## 📖 Documentation
-
-- **[Documentation Index](docs/README.md)** - Complete documentation guide
-- **[Testing Guide](docs/TESTING_GUIDE.md)** - Testing strategy, component tests, E2E tests, and accessibility
-- **[Custom Hooks](docs/CUSTOM_HOOKS.md)** - Documentation for custom React hooks
-- **[Content Creation Guide](docs/guides/content-creation.md)** - Guide for creating blog content
-- **[Storybook](http://localhost:6006)** - Component documentation (local)
-
-## 🤝 Contributing
-
-1. **Fork the repository**
-2. **Create a feature branch**: `git checkout -b feature/amazing-feature`
-3. **Write tests first** (see [Testing Guide](docs/TESTING_GUIDE.md))
-4. **Make your changes**
-5. **Run tests**: `npm test && npm run e2e`
-6. **Commit changes**: `git commit -m "feat: add amazing feature"`
-7. **Push to branch**: `git push origin feature/amazing-feature`
-8. **Create Pull Request**
-
-### Development Workflow
-
-- All changes must have tests
-- CI pipeline runs automatically on PRs
-- Visual regression tests ensure UI consistency
-- Performance budgets must be met
-- Accessibility standards must be maintained
-
-## 📄 License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+[MIT](LICENSE).
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
new file mode 100644
index 0000000..52df07c
--- /dev/null
+++ b/app/(admin)/layout.tsx
@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+// Operator/admin dashboards (e.g. `/monitor`) intentionally render without the
+// public marketing footer. Auth/access is enforced upstream.
+export default function AdminLayout({ children }: { children: ReactNode }) {
+  return <main className="flex-1">{children}</main>;
+}
diff --git a/app/(admin)/monitor/page.tsx b/app/(admin)/monitor/page.tsx
index 0082f3d..9ba8ff2 100644
--- a/app/(admin)/monitor/page.tsx
+++ b/app/(admin)/monitor/page.tsx
@@ -1,4 +1,4 @@
-import WebVitalsDashboard from "../../components/WebVitalsDashboard";
+import WebVitalsDashboard from "../../components/sections/WebVitalsDashboard";
 import TopNav from "../../components/navigation/TopNav";
 import Footer from "../../components/navigation/Footer";
 
diff --git a/app/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx
similarity index 96%
rename from app/create/CreateFlowLayoutClient.tsx
rename to app/(app)/create/CreateFlowLayoutClient.tsx
index 3f757c3..6448898 100644
--- a/app/create/CreateFlowLayoutClient.tsx
+++ b/app/(app)/create/CreateFlowLayoutClient.tsx
@@ -11,35 +11,35 @@ import { usePathname, useRouter } from "next/navigation";
 import { CreateFlowProvider, useCreateFlow } from "./context/CreateFlowContext";
 import { useCreateFlowNavigation } from "./hooks/useCreateFlowNavigation";
 import { useCreateFlowExit } from "./hooks/useCreateFlowExit";
-import CreateFlowTopNav from "../components/utility/CreateFlowTopNav";
+import CreateFlowTopNav from "../../components/utility/CreateFlowTopNav";
 import { getNextStep, getStepIndex } from "./utils/flowSteps";
 import { getProportionBarProgressForCreateFlowStep } from "./utils/createFlowProportionProgress";
 import {
   createFlowStepUsesCenteredTextLayout,
   createFlowStepUsesCardLayout,
 } from "./utils/createFlowScreenRegistry";
-import CreateFlowFooter from "../components/utility/CreateFlowFooter";
-import Button from "../components/buttons/Button";
-import { buildPublishPayload } from "../../lib/create/buildPublishPayload";
-import { isValidCreateFlowSaveEmail } from "../../lib/create/isValidCreateFlowSaveEmail";
+import CreateFlowFooter from "../../components/utility/CreateFlowFooter";
+import Button from "../../components/buttons/Button";
+import { buildPublishPayload } from "../../../lib/create/buildPublishPayload";
+import { isValidCreateFlowSaveEmail } from "../../../lib/create/isValidCreateFlowSaveEmail";
 import {
   fetchAuthSession,
   publishRule,
   requestMagicLink,
-} from "../../lib/create/api";
-import { safeInternalPath } from "../../lib/safeInternalPath";
+} from "../../../lib/create/api";
+import { safeInternalPath } from "../../../lib/safeInternalPath";
 import { setTransferPendingFlag } from "./utils/anonymousDraftStorage";
-import { writeLastPublishedRule } from "../../lib/create/lastPublishedRule";
+import { writeLastPublishedRule } from "../../../lib/create/lastPublishedRule";
 import {
   fetchTemplateBySlug,
   type RuleTemplateDto,
-} from "../../lib/create/fetchTemplates";
-import messages from "../../messages/en/index";
-import { useAuthModal } from "../contexts/AuthModalContext";
-import { useMessages, useTranslation } from "../contexts/MessagesContext";
+} from "../../../lib/create/fetchTemplates";
+import messages from "../../../messages/en/index";
+import { useAuthModal } from "../../contexts/AuthModalContext";
+import { useMessages, useTranslation } from "../../contexts/MessagesContext";
 import { PostLoginDraftTransfer } from "./PostLoginDraftTransfer";
 import { SignedInDraftHydration } from "./SignedInDraftHydration";
-import Alert from "../components/modals/Alert";
+import Alert from "../../components/modals/Alert";
 import {
   CreateFlowDraftSaveBannerProvider,
   useCreateFlowDraftSaveBanner,
diff --git a/app/create/CreateFlowLayoutGate.tsx b/app/(app)/create/CreateFlowLayoutGate.tsx
similarity index 100%
rename from app/create/CreateFlowLayoutGate.tsx
rename to app/(app)/create/CreateFlowLayoutGate.tsx
diff --git a/app/create/PostLoginDraftTransfer.tsx b/app/(app)/create/PostLoginDraftTransfer.tsx
similarity index 97%
rename from app/create/PostLoginDraftTransfer.tsx
rename to app/(app)/create/PostLoginDraftTransfer.tsx
index 92725e7..bf56460 100644
--- a/app/create/PostLoginDraftTransfer.tsx
+++ b/app/(app)/create/PostLoginDraftTransfer.tsx
@@ -9,8 +9,8 @@ import {
 } from "./utils/anonymousDraftStorage";
 import { useCreateFlow } from "./context/CreateFlowContext";
 import { parseCreateFlowScreenFromPathname } from "./utils/flowSteps";
-import { saveDraftToServer } from "../../lib/create/api";
-import messages from "../../messages/en/index";
+import { saveDraftToServer } from "../../../lib/create/api";
+import messages from "../../../messages/en/index";
 
 const SYNC_ENABLED = process.env.NEXT_PUBLIC_ENABLE_BACKEND_SYNC === "true";
 
diff --git a/app/create/SignedInDraftHydration.tsx b/app/(app)/create/SignedInDraftHydration.tsx
similarity index 95%
rename from app/create/SignedInDraftHydration.tsx
rename to app/(app)/create/SignedInDraftHydration.tsx
index a68e7d4..c191c86 100644
--- a/app/create/SignedInDraftHydration.tsx
+++ b/app/(app)/create/SignedInDraftHydration.tsx
@@ -3,15 +3,15 @@
 import { useEffect, useRef, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import type { CreateFlowState } from "./types";
-import { createFlowStateHasKeys } from "../../lib/create/draftHydrationUtils";
+import { createFlowStateHasKeys } from "../../../lib/create/draftHydrationUtils";
 import {
   clearAnonymousCreateFlowStorage,
   hasTransferPendingFlag,
   readAnonymousCreateFlowState,
 } from "./utils/anonymousDraftStorage";
 import { useCreateFlow } from "./context/CreateFlowContext";
-import { fetchDraftFromServer } from "../../lib/create/api";
-import messages from "../../messages/en/index";
+import { fetchDraftFromServer } from "../../../lib/create/api";
+import messages from "../../../messages/en/index";
 
 const SYNC_ENABLED = process.env.NEXT_PUBLIC_ENABLE_BACKEND_SYNC === "true";
 
diff --git a/app/create/[screenId]/page.tsx b/app/(app)/create/[screenId]/page.tsx
similarity index 100%
rename from app/create/[screenId]/page.tsx
rename to app/(app)/create/[screenId]/page.tsx
diff --git a/app/create/components/ApplicableScopeField.tsx b/app/(app)/create/components/ApplicableScopeField.tsx
similarity index 95%
rename from app/create/components/ApplicableScopeField.tsx
rename to app/(app)/create/components/ApplicableScopeField.tsx
index 730bd93..eb993c6 100644
--- a/app/create/components/ApplicableScopeField.tsx
+++ b/app/(app)/create/components/ApplicableScopeField.tsx
@@ -8,8 +8,8 @@
  */
 
 import { memo, useState } from "react";
-import Chip from "../../components/controls/Chip";
-import InputLabel from "../../components/utility/InputLabel";
+import Chip from "../../../components/controls/Chip";
+import InputLabel from "../../../components/utility/InputLabel";
 
 export interface ApplicableScopeFieldProps {
   /** Label rendered above the capsule row. */
@@ -74,9 +74,9 @@ function ApplicableScopeFieldComponent({
             <Chip
               key={scope}
               label={scope}
-              state={isSelected ? "Selected" : "Disabled"}
-              palette="Default"
-              size="S"
+              state={isSelected ? "selected" : "disabled"}
+              palette="default"
+              size="s"
               disabled={false}
               onClick={() => onToggleScope(scope)}
               ariaLabel={`${isSelected ? "Deselect" : "Select"} ${scope}`}
diff --git a/app/create/components/CreateFlowHeaderLockup.tsx b/app/(app)/create/components/CreateFlowHeaderLockup.tsx
similarity index 79%
rename from app/create/components/CreateFlowHeaderLockup.tsx
rename to app/(app)/create/components/CreateFlowHeaderLockup.tsx
index 301cb94..ec1e099 100644
--- a/app/create/components/CreateFlowHeaderLockup.tsx
+++ b/app/(app)/create/components/CreateFlowHeaderLockup.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import HeaderLockup from "../../components/type/HeaderLockup";
-import type { HeaderLockupProps } from "../../components/type/HeaderLockup/HeaderLockup.types";
+import HeaderLockup from "../../../components/type/HeaderLockup";
+import type { HeaderLockupProps } from "../../../components/type/HeaderLockup/HeaderLockup.types";
 import { useCreateFlowMdUp } from "../hooks/useCreateFlowMdUp";
 
 export type CreateFlowHeaderLockupProps = Omit<HeaderLockupProps, "size"> & {
diff --git a/app/create/components/CreateFlowLockupCardStepShell.tsx b/app/(app)/create/components/CreateFlowLockupCardStepShell.tsx
similarity index 100%
rename from app/create/components/CreateFlowLockupCardStepShell.tsx
rename to app/(app)/create/components/CreateFlowLockupCardStepShell.tsx
diff --git a/app/create/components/CreateFlowStepShell.tsx b/app/(app)/create/components/CreateFlowStepShell.tsx
similarity index 100%
rename from app/create/components/CreateFlowStepShell.tsx
rename to app/(app)/create/components/CreateFlowStepShell.tsx
diff --git a/app/create/components/CreateFlowTwoColumnSelectShell.tsx b/app/(app)/create/components/CreateFlowTwoColumnSelectShell.tsx
similarity index 100%
rename from app/create/components/CreateFlowTwoColumnSelectShell.tsx
rename to app/(app)/create/components/CreateFlowTwoColumnSelectShell.tsx
diff --git a/app/create/components/ModalTextAreaField.tsx b/app/(app)/create/components/ModalTextAreaField.tsx
similarity index 93%
rename from app/create/components/ModalTextAreaField.tsx
rename to app/(app)/create/components/ModalTextAreaField.tsx
index 1cd3676..143b35d 100644
--- a/app/create/components/ModalTextAreaField.tsx
+++ b/app/(app)/create/components/ModalTextAreaField.tsx
@@ -7,8 +7,8 @@
  */
 
 import { memo, useId } from "react";
-import TextArea from "../../components/controls/TextArea";
-import InputLabel from "../../components/utility/InputLabel";
+import TextArea from "../../../components/controls/TextArea";
+import InputLabel from "../../../components/utility/InputLabel";
 
 export interface ModalTextAreaFieldProps {
   /** Label rendered above the text area. */
diff --git a/app/create/components/createFlowLayoutTokens.ts b/app/(app)/create/components/createFlowLayoutTokens.ts
similarity index 100%
rename from app/create/components/createFlowLayoutTokens.ts
rename to app/(app)/create/components/createFlowLayoutTokens.ts
diff --git a/app/create/context/CreateFlowContext.tsx b/app/(app)/create/context/CreateFlowContext.tsx
similarity index 100%
rename from app/create/context/CreateFlowContext.tsx
rename to app/(app)/create/context/CreateFlowContext.tsx
diff --git a/app/create/context/CreateFlowDraftSaveBannerContext.tsx b/app/(app)/create/context/CreateFlowDraftSaveBannerContext.tsx
similarity index 100%
rename from app/create/context/CreateFlowDraftSaveBannerContext.tsx
rename to app/(app)/create/context/CreateFlowDraftSaveBannerContext.tsx
diff --git a/app/create/hooks/useCreateFlowExit.ts b/app/(app)/create/hooks/useCreateFlowExit.ts
similarity index 93%
rename from app/create/hooks/useCreateFlowExit.ts
rename to app/(app)/create/hooks/useCreateFlowExit.ts
index d7b5315..02c6090 100644
--- a/app/create/hooks/useCreateFlowExit.ts
+++ b/app/(app)/create/hooks/useCreateFlowExit.ts
@@ -2,8 +2,8 @@
 
 import { useCallback } from "react";
 import type { CreateFlowState, CreateFlowStep } from "../types";
-import { saveDraftToServer } from "../../../lib/create/api";
-import messages from "../../../messages/en/index";
+import { saveDraftToServer } from "../../../../lib/create/api";
+import messages from "../../../../messages/en/index";
 
 const SYNC_ENABLED = process.env.NEXT_PUBLIC_ENABLE_BACKEND_SYNC === "true";
 
diff --git a/app/create/hooks/useCreateFlowLgUp.ts b/app/(app)/create/hooks/useCreateFlowLgUp.ts
similarity index 91%
rename from app/create/hooks/useCreateFlowLgUp.ts
rename to app/(app)/create/hooks/useCreateFlowLgUp.ts
index 903bee9..7b813dd 100644
--- a/app/create/hooks/useCreateFlowLgUp.ts
+++ b/app/(app)/create/hooks/useCreateFlowLgUp.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { useMediaQuery } from "../../../hooks/useMediaQuery";
 
 /** `--breakpoint-lg` (1024px); same SSR/first-paint pattern as `useCreateFlowMdUp`. */
 const CREATE_FLOW_MIN_WIDTH_LG = "(min-width: 1024px)";
diff --git a/app/create/hooks/useCreateFlowMdUp.ts b/app/(app)/create/hooks/useCreateFlowMdUp.ts
similarity index 91%
rename from app/create/hooks/useCreateFlowMdUp.ts
rename to app/(app)/create/hooks/useCreateFlowMdUp.ts
index 9b8aaf1..b87cc5f 100644
--- a/app/create/hooks/useCreateFlowMdUp.ts
+++ b/app/(app)/create/hooks/useCreateFlowMdUp.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { useMediaQuery } from "../../../hooks/useMediaQuery";
 
 /** `--breakpoint-md` (640px); same SSR/first-paint pattern as `useCreateFlowLgUp`. */
 const CREATE_FLOW_MIN_WIDTH_MD = "(min-width: 640px)";
diff --git a/app/create/hooks/useCreateFlowNavigation.ts b/app/(app)/create/hooks/useCreateFlowNavigation.ts
similarity index 100%
rename from app/create/hooks/useCreateFlowNavigation.ts
rename to app/(app)/create/hooks/useCreateFlowNavigation.ts
diff --git a/app/create/layout.tsx b/app/(app)/create/layout.tsx
similarity index 100%
rename from app/create/layout.tsx
rename to app/(app)/create/layout.tsx
diff --git a/app/create/page.tsx b/app/(app)/create/page.tsx
similarity index 100%
rename from app/create/page.tsx
rename to app/(app)/create/page.tsx
diff --git a/app/create/review-template/[slug]/page.tsx b/app/(app)/create/review-template/[slug]/page.tsx
similarity index 91%
rename from app/create/review-template/[slug]/page.tsx
rename to app/(app)/create/review-template/[slug]/page.tsx
index 0816015..ba38dff 100644
--- a/app/create/review-template/[slug]/page.tsx
+++ b/app/(app)/create/review-template/[slug]/page.tsx
@@ -1,15 +1,15 @@
 "use client";
 
 import { use, useEffect, useState } from "react";
-import { TemplateReviewCard } from "../../../components/cards/TemplateReviewCard";
-import { useTranslation } from "../../../contexts/MessagesContext";
+import { TemplateReviewCard } from "../../../../components/cards/TemplateReviewCard";
+import { useTranslation } from "../../../../contexts/MessagesContext";
 import {
   fetchTemplateBySlug,
   isTemplatesFetchAborted,
   type RuleTemplateDto,
-} from "../../../../lib/create/fetchTemplates";
-import messages from "../../../../messages/en/index";
-import Alert from "../../../components/modals/Alert";
+} from "../../../../../lib/create/fetchTemplates";
+import messages from "../../../../../messages/en/index";
+import Alert from "../../../../components/modals/Alert";
 import {
   CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS,
   CreateFlowLockupCardStepShell,
diff --git a/app/create/screens/CreateFlowScreenView.tsx b/app/(app)/create/screens/CreateFlowScreenView.tsx
similarity index 100%
rename from app/create/screens/CreateFlowScreenView.tsx
rename to app/(app)/create/screens/CreateFlowScreenView.tsx
diff --git a/app/create/screens/card/CommunicationMethodsScreen.tsx b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
similarity index 96%
rename from app/create/screens/card/CommunicationMethodsScreen.tsx
rename to app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
index e8bb90f..033f74b 100644
--- a/app/create/screens/card/CommunicationMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
@@ -10,13 +10,13 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import { useMessages } from "../../../contexts/MessagesContext";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../components/utility/CardStack";
-import Create from "../../../components/modals/Create";
-import InlineTextButton from "../../../components/buttons/InlineTextButton";
+import CardStack from "../../../../components/utility/CardStack";
+import Create from "../../../../components/modals/Create";
+import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
diff --git a/app/create/screens/card/ConflictManagementScreen.tsx b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
similarity index 97%
rename from app/create/screens/card/ConflictManagementScreen.tsx
rename to app/(app)/create/screens/card/ConflictManagementScreen.tsx
index 26ba4e1..3bac17e 100644
--- a/app/create/screens/card/ConflictManagementScreen.tsx
+++ b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
@@ -12,13 +12,13 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import { useMessages } from "../../../contexts/MessagesContext";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../components/utility/CardStack";
-import Create from "../../../components/modals/Create";
-import InlineTextButton from "../../../components/buttons/InlineTextButton";
+import CardStack from "../../../../components/utility/CardStack";
+import Create from "../../../../components/modals/Create";
+import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
diff --git a/app/create/screens/card/MembershipMethodsScreen.tsx b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
similarity index 96%
rename from app/create/screens/card/MembershipMethodsScreen.tsx
rename to app/(app)/create/screens/card/MembershipMethodsScreen.tsx
index 99ba344..de23389 100644
--- a/app/create/screens/card/MembershipMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
@@ -12,13 +12,13 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import { useMessages } from "../../../contexts/MessagesContext";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../components/utility/CardStack";
-import Create from "../../../components/modals/Create";
-import InlineTextButton from "../../../components/buttons/InlineTextButton";
+import CardStack from "../../../../components/utility/CardStack";
+import Create from "../../../../components/modals/Create";
+import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
diff --git a/app/create/screens/completed/CompletedScreen.tsx b/app/(app)/create/screens/completed/CompletedScreen.tsx
similarity index 87%
rename from app/create/screens/completed/CompletedScreen.tsx
rename to app/(app)/create/screens/completed/CompletedScreen.tsx
index 1c69718..7e4294c 100644
--- a/app/create/screens/completed/CompletedScreen.tsx
+++ b/app/(app)/create/screens/completed/CompletedScreen.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import { useState, useEffect, useMemo } from "react";
-import CommunityRuleDocument from "../../../components/sections/CommunityRuleDocument";
-import type { CommunityRuleDocumentSection } from "../../../components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
-import Alert from "../../../components/modals/Alert";
-import { useMessages } from "../../../contexts/MessagesContext";
-import { parseDocumentSectionsForDisplay } from "../../../../lib/create/buildPublishPayload";
-import { readLastPublishedRule } from "../../../../lib/create/lastPublishedRule";
+import CommunityRuleDocument from "../../../../components/sections/CommunityRuleDocument";
+import type { CommunityRuleDocumentSection } from "../../../../components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
+import Alert from "../../../../components/modals/Alert";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import { parseDocumentSectionsForDisplay } from "../../../../../lib/create/buildPublishPayload";
+import { readLastPublishedRule } from "../../../../../lib/create/lastPublishedRule";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import {
diff --git a/app/create/screens/informational/InformationalScreen.tsx b/app/(app)/create/screens/informational/InformationalScreen.tsx
similarity index 93%
rename from app/create/screens/informational/InformationalScreen.tsx
rename to app/(app)/create/screens/informational/InformationalScreen.tsx
index f721876..7069bf4 100644
--- a/app/create/screens/informational/InformationalScreen.tsx
+++ b/app/(app)/create/screens/informational/InformationalScreen.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ReactNode } from "react";
-import NumberedList from "../../../components/type/NumberedList";
-import { useMessages } from "../../../contexts/MessagesContext";
+import NumberedList from "../../../../components/type/NumberedList";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
diff --git a/app/create/screens/review/CommunityReviewScreen.tsx b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
similarity index 94%
rename from app/create/screens/review/CommunityReviewScreen.tsx
rename to app/(app)/create/screens/review/CommunityReviewScreen.tsx
index 96f6d3c..e1ff1cf 100644
--- a/app/create/screens/review/CommunityReviewScreen.tsx
+++ b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import RuleCard from "../../../components/cards/RuleCard";
-import { useTranslation } from "../../../contexts/MessagesContext";
+import RuleCard from "../../../../components/cards/RuleCard";
+import { useTranslation } from "../../../../contexts/MessagesContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowLgUp } from "../../hooks/useCreateFlowLgUp";
diff --git a/app/create/screens/review/FinalReviewScreen.tsx b/app/(app)/create/screens/review/FinalReviewScreen.tsx
similarity index 89%
rename from app/create/screens/review/FinalReviewScreen.tsx
rename to app/(app)/create/screens/review/FinalReviewScreen.tsx
index 4c970d0..db45cb6 100644
--- a/app/create/screens/review/FinalReviewScreen.tsx
+++ b/app/(app)/create/screens/review/FinalReviewScreen.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useMemo } from "react";
-import RuleCard from "../../../components/cards/RuleCard";
-import type { Category } from "../../../components/cards/RuleCard/RuleCard.types";
-import { useMessages, useTranslation } from "../../../contexts/MessagesContext";
+import RuleCard from "../../../../components/cards/RuleCard";
+import type { Category } from "../../../../components/cards/RuleCard/RuleCard.types";
+import { useMessages, useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import {
diff --git a/app/create/screens/right-rail/DecisionApproachesScreen.tsx b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
similarity index 93%
rename from app/create/screens/right-rail/DecisionApproachesScreen.tsx
rename to app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
index 052a2d3..9773969 100644
--- a/app/create/screens/right-rail/DecisionApproachesScreen.tsx
+++ b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
@@ -14,14 +14,14 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import DecisionMakingSidebar from "../../../components/utility/DecisionMakingSidebar";
-import CardStack from "../../../components/utility/CardStack";
-import Create from "../../../components/modals/Create";
-import IncrementerBlock from "../../../components/controls/IncrementerBlock";
-import InlineTextButton from "../../../components/buttons/InlineTextButton";
-import type { InfoMessageBoxItem } from "../../../components/utility/InfoMessageBox/InfoMessageBox.types";
-import type { CardStackItem } from "../../../components/utility/CardStack/CardStack.types";
-import { useMessages } from "../../../contexts/MessagesContext";
+import DecisionMakingSidebar from "../../../../components/utility/DecisionMakingSidebar";
+import CardStack from "../../../../components/utility/CardStack";
+import Create from "../../../../components/modals/Create";
+import IncrementerBlock from "../../../../components/controls/IncrementerBlock";
+import InlineTextButton from "../../../../components/buttons/InlineTextButton";
+import type { InfoMessageBoxItem } from "../../../../components/utility/InfoMessageBox/InfoMessageBox.types";
+import type { CardStackItem } from "../../../../components/utility/CardStack/CardStack.types";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
diff --git a/app/create/screens/select/CommunitySizeSelectScreen.tsx b/app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx
similarity index 79%
rename from app/create/screens/select/CommunitySizeSelectScreen.tsx
rename to app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx
index a65f088..a7d313e 100644
--- a/app/create/screens/select/CommunitySizeSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import MultiSelect from "../../../components/controls/MultiSelect";
-import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
-import { useMessages } from "../../../contexts/MessagesContext";
+import MultiSelect from "../../../../components/controls/MultiSelect";
+import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
@@ -14,13 +14,13 @@ function chipRowsFromLabels(
   return rows.map((row, i) => ({
     id: String(i + 1),
     label: row.label,
-    state: "Unselected" as const,
+    state: "unselected" as const,
   }));
 }
 
 function selectedIdsFromOptions(options: ChipOption[]): string[] {
   return options
-    .filter((o) => o.state === "Selected")
+    .filter((o) => o.state === "selected")
     .map((o) => o.id);
 }
 
@@ -37,7 +37,7 @@ export function CommunitySizeSelectScreen() {
     const selected = new Set(state.selectedCommunitySizeIds ?? []);
     return base.map((opt) => ({
       ...opt,
-      state: selected.has(opt.id) ? ("Selected" as const) : ("Unselected" as const),
+      state: selected.has(opt.id) ? ("selected" as const) : ("unselected" as const),
     }));
   });
 
@@ -45,13 +45,13 @@ export function CommunitySizeSelectScreen() {
     const selected = new Set(state.selectedCommunitySizeIds ?? []);
     setCommunitySizeOptions((prev) =>
       prev.map((opt) =>
-        opt.state === "Custom"
+        opt.state === "custom"
           ? opt
           : {
               ...opt,
               state: selected.has(opt.id)
-                ? ("Selected" as const)
-                : ("Unselected" as const),
+                ? ("selected" as const)
+                : ("unselected" as const),
             },
       ),
     );
@@ -71,9 +71,9 @@ export function CommunitySizeSelectScreen() {
         ? {
             ...opt,
             state:
-              opt.state === "Selected"
-                ? ("Unselected" as const)
-                : ("Selected" as const),
+              opt.state === "selected"
+                ? ("unselected" as const)
+                : ("selected" as const),
           }
         : opt,
     );
@@ -83,7 +83,7 @@ export function CommunitySizeSelectScreen() {
   const multiSelectBlock = (
     <MultiSelect
       formHeader={false}
-      size="M"
+      size="m"
       options={communitySizeOptions}
       onChipClick={handleCommunitySizeClick}
       addButton={false}
diff --git a/app/create/screens/select/CommunityStructureSelectScreen.tsx b/app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx
similarity index 89%
rename from app/create/screens/select/CommunityStructureSelectScreen.tsx
rename to app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx
index 1b27100..8784e32 100644
--- a/app/create/screens/select/CommunityStructureSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx
@@ -7,9 +7,9 @@ import {
   type Dispatch,
   type SetStateAction,
 } from "react";
-import MultiSelect from "../../../components/controls/MultiSelect";
-import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
-import { useMessages } from "../../../contexts/MessagesContext";
+import MultiSelect from "../../../../components/controls/MultiSelect";
+import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import type { CommunityStructureChipSnapshotRow } from "../../types";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
@@ -17,7 +17,7 @@ import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoCo
 
 function createListCustomHandlers(
   setList: Dispatch<SetStateAction<ChipOption[]>>,
-  confirmState: "Unselected" | "Selected",
+  confirmState: "unselected" | "selected",
   onInteraction?: () => void,
 ) {
   const touch = () => onInteraction?.();
@@ -26,7 +26,7 @@ function createListCustomHandlers(
       touch();
       setList((prev) => [
         ...prev,
-        { id: crypto.randomUUID(), label: "", state: "Custom" },
+        { id: crypto.randomUUID(), label: "", state: "custom" },
       ]);
     },
     onCustomChipConfirm: (chipId: string, value: string) => {
@@ -52,7 +52,7 @@ function chipRowsFromLabels(
   return rows.map((row, i) => ({
     id: String(i + 1),
     label: row.label,
-    state: "Unselected" as const,
+    state: "unselected" as const,
   }));
 }
 
@@ -62,20 +62,20 @@ function applySavedSelection(
 ): ChipOption[] {
   const selected = new Set(saved ?? []);
   return options.map((opt) =>
-    opt.state === "Custom"
+    opt.state === "custom"
       ? opt
       : {
           ...opt,
           state: selected.has(opt.id)
-            ? ("Selected" as const)
-            : ("Unselected" as const),
+            ? ("selected" as const)
+            : ("unselected" as const),
         },
   );
 }
 
 function selectedIdsFromOptions(options: ChipOption[]): string[] {
   return options
-    .filter((o) => o.state === "Selected")
+    .filter((o) => o.state === "selected")
     .map((o) => o.id);
 }
 
@@ -194,7 +194,7 @@ export function CommunityStructureSelectScreen() {
     () =>
       createListCustomHandlers(
         setOrganizationTypeOptions,
-        "Unselected",
+        "unselected",
         markCreateFlowInteraction,
       ),
     [markCreateFlowInteraction],
@@ -203,7 +203,7 @@ export function CommunityStructureSelectScreen() {
     () =>
       createListCustomHandlers(
         setScaleOptions,
-        "Unselected",
+        "unselected",
         markCreateFlowInteraction,
       ),
     [markCreateFlowInteraction],
@@ -212,7 +212,7 @@ export function CommunityStructureSelectScreen() {
     () =>
       createListCustomHandlers(
         setMaturityOptions,
-        "Unselected",
+        "unselected",
         markCreateFlowInteraction,
       ),
     [markCreateFlowInteraction],
@@ -258,9 +258,9 @@ export function CommunityStructureSelectScreen() {
           ? {
               ...opt,
               state:
-                opt.state === "Selected"
-                  ? ("Unselected" as const)
-                  : ("Selected" as const),
+                opt.state === "selected"
+                  ? ("unselected" as const)
+                  : ("selected" as const),
             }
           : opt,
       ),
@@ -274,9 +274,9 @@ export function CommunityStructureSelectScreen() {
           ? {
               ...opt,
               state:
-                opt.state === "Selected"
-                  ? ("Unselected" as const)
-                  : ("Selected" as const),
+                opt.state === "selected"
+                  ? ("unselected" as const)
+                  : ("selected" as const),
             }
           : opt,
       ),
@@ -290,9 +290,9 @@ export function CommunityStructureSelectScreen() {
           ? {
               ...opt,
               state:
-                opt.state === "Selected"
-                  ? ("Unselected" as const)
-                  : ("Selected" as const),
+                opt.state === "selected"
+                  ? ("unselected" as const)
+                  : ("selected" as const),
             }
           : opt,
       ),
@@ -304,7 +304,7 @@ export function CommunityStructureSelectScreen() {
       <MultiSelect
         label={cs.organizationMultiSelect.label}
         showHelpIcon
-        size="S"
+        size="s"
         options={organizationTypeOptions}
         onChipClick={handleOrganizationTypeClick}
         {...organizationCustomHandlers}
@@ -314,7 +314,7 @@ export function CommunityStructureSelectScreen() {
       <MultiSelect
         label={cs.scaleMultiSelect.label}
         showHelpIcon
-        size="S"
+        size="s"
         options={scaleOptions}
         onChipClick={handleScaleClick}
         {...scaleCustomHandlers}
@@ -324,7 +324,7 @@ export function CommunityStructureSelectScreen() {
       <MultiSelect
         label={cs.maturityMultiSelect.label}
         showHelpIcon
-        size="S"
+        size="s"
         options={maturityOptions}
         onChipClick={handleMaturityClick}
         {...maturityCustomHandlers}
diff --git a/app/create/screens/select/ConfirmStakeholdersScreen.tsx b/app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
similarity index 87%
rename from app/create/screens/select/ConfirmStakeholdersScreen.tsx
rename to app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
index 116d8b8..8a4fee2 100644
--- a/app/create/screens/select/ConfirmStakeholdersScreen.tsx
+++ b/app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import MultiSelect from "../../../components/controls/MultiSelect";
-import Alert from "../../../components/modals/Alert";
-import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
-import { useTranslation } from "../../../contexts/MessagesContext";
+import MultiSelect from "../../../../components/controls/MultiSelect";
+import Alert from "../../../../components/modals/Alert";
+import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
+import { useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
@@ -22,7 +22,7 @@ export function ConfirmStakeholdersScreen() {
     markCreateFlowInteraction();
     setStakeholderOptions((prev) => [
       ...prev,
-      { id: crypto.randomUUID(), label: "", state: "Custom" },
+      { id: crypto.randomUUID(), label: "", state: "custom" },
     ]);
   };
 
@@ -30,7 +30,7 @@ export function ConfirmStakeholdersScreen() {
     markCreateFlowInteraction();
     setStakeholderOptions((prev) =>
       prev.map((opt) =>
-        opt.id === chipId ? { ...opt, label: value, state: "Selected" } : opt,
+        opt.id === chipId ? { ...opt, label: value, state: "selected" } : opt,
       ),
     );
   };
@@ -64,7 +64,7 @@ export function ConfirmStakeholdersScreen() {
           <MultiSelect
             formHeader={false}
             showHelpIcon={false}
-            size="S"
+            size="s"
             options={stakeholderOptions}
             onChipClick={handleChipClick}
             onAddClick={handleAddStakeholder}
diff --git a/app/create/screens/select/CoreValuesSelectScreen.tsx b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
similarity index 90%
rename from app/create/screens/select/CoreValuesSelectScreen.tsx
rename to app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
index 5cdd0bd..d8639fd 100644
--- a/app/create/screens/select/CoreValuesSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import { useState, useEffect, useCallback, useMemo } from "react";
-import MultiSelect from "../../../components/controls/MultiSelect";
-import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
-import TextArea from "../../../components/controls/TextArea";
-import Create from "../../../components/modals/Create";
-import ContentLockup from "../../../components/type/ContentLockup";
-import { useMessages } from "../../../contexts/MessagesContext";
+import MultiSelect from "../../../../components/controls/MultiSelect";
+import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
+import TextArea from "../../../../components/controls/TextArea";
+import Create from "../../../../components/modals/Create";
+import ContentLockup from "../../../../components/type/ContentLockup";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import type { CommunityStructureChipSnapshotRow } from "../../types";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
@@ -46,7 +46,7 @@ function chipRowsFromPresets(presets: readonly CoreValuePreset[]): ChipOption[]
   return presets.map((row, i) => ({
     id: String(i + 1),
     label: row.label,
-    state: "Unselected" as const,
+    state: "unselected" as const,
   }));
 }
 
@@ -56,20 +56,20 @@ function applySavedSelection(
 ): ChipOption[] {
   const selected = new Set(saved ?? []);
   return options.map((opt) =>
-    opt.state === "Custom"
+    opt.state === "custom"
       ? opt
       : {
           ...opt,
           state: selected.has(opt.id)
-            ? ("Selected" as const)
-            : ("Unselected" as const),
+            ? ("selected" as const)
+            : ("unselected" as const),
         },
   );
 }
 
 function selectedIdsFromOptions(options: ChipOption[]): string[] {
   return options
-    .filter((o) => o.state === "Selected")
+    .filter((o) => o.state === "selected")
     .map((o) => o.id);
 }
 
@@ -194,7 +194,7 @@ export function CoreValuesSelectScreen() {
     if (activeModalChipId && modalSession === "pending") {
       const next = coreValueOptions.map((opt) =>
         opt.id === activeModalChipId
-          ? { ...opt, state: "Unselected" as const }
+          ? { ...opt, state: "unselected" as const }
           : opt,
       );
       persistCoreValues(next);
@@ -226,16 +226,16 @@ export function CoreValuesSelectScreen() {
 
   const handleChipClick = (chipId: string) => {
     const target = coreValueOptions.find((o) => o.id === chipId);
-    if (!target || target.state === "Custom") return;
+    if (!target || target.state === "custom") return;
 
     const selectedCount = coreValueOptions.filter(
-      (o) => o.state === "Selected",
+      (o) => o.state === "selected",
     ).length;
 
-    if (target.state === "Selected") {
+    if (target.state === "selected") {
       const next: ChipOption[] = coreValueOptions.map((opt) =>
         opt.id === chipId
-          ? { ...opt, state: "Unselected" as const }
+          ? { ...opt, state: "unselected" as const }
           : opt,
       );
       persistCoreValues(next);
@@ -246,7 +246,7 @@ export function CoreValuesSelectScreen() {
 
     const next: ChipOption[] = coreValueOptions.map((opt) =>
       opt.id === chipId
-        ? { ...opt, state: "Selected" as const }
+        ? { ...opt, state: "selected" as const }
         : opt,
     );
     persistCoreValues(next);
@@ -259,7 +259,7 @@ export function CoreValuesSelectScreen() {
       setCoreValueOptions((prev) => {
         const next: ChipOption[] = [
           ...prev,
-          { id: crypto.randomUUID(), label: "", state: "Custom" },
+          { id: crypto.randomUUID(), label: "", state: "custom" },
         ];
         queueMicrotask(() => syncCoreValuesToDraft(next));
         return next;
@@ -270,17 +270,17 @@ export function CoreValuesSelectScreen() {
       setCoreValueOptions((prev) => {
         const withLabel = prev.map((opt) =>
           opt.id === chipId
-            ? { ...opt, label: value, state: "Unselected" as const }
+            ? { ...opt, label: value, state: "unselected" as const }
             : opt,
         );
         const selectedCount = withLabel.filter(
-          (o) => o.state === "Selected",
+          (o) => o.state === "selected",
         ).length;
         const canSelect = selectedCount < MAX_CORE_VALUES;
         const next = canSelect
           ? withLabel.map((opt) =>
               opt.id === chipId
-                ? { ...opt, state: "Selected" as const }
+                ? { ...opt, state: "selected" as const }
                 : opt,
             )
           : withLabel;
@@ -343,7 +343,7 @@ export function CoreValuesSelectScreen() {
     >
       <MultiSelect
         formHeader={false}
-        size="M"
+        size="m"
         options={coreValueOptions}
         onChipClick={handleChipClick}
         onAddClick={addHandlers.onAddClick}
diff --git a/app/create/screens/text/CreateFlowTextFieldScreen.tsx b/app/(app)/create/screens/text/CreateFlowTextFieldScreen.tsx
similarity index 93%
rename from app/create/screens/text/CreateFlowTextFieldScreen.tsx
rename to app/(app)/create/screens/text/CreateFlowTextFieldScreen.tsx
index 57a4174..4d17acf 100644
--- a/app/create/screens/text/CreateFlowTextFieldScreen.tsx
+++ b/app/(app)/create/screens/text/CreateFlowTextFieldScreen.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useState, useEffect, type HTMLInputTypeAttribute } from "react";
-import TextInput from "../../../components/controls/TextInput";
-import type { HeaderLockupJustificationValue } from "../../../components/type/HeaderLockup/HeaderLockup.types";
-import { useTranslation } from "../../../contexts/MessagesContext";
+import TextInput from "../../../../components/controls/TextInput";
+import type { HeaderLockupJustificationValue } from "../../../../components/type/HeaderLockup/HeaderLockup.types";
+import { useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
diff --git a/app/create/screens/upload/CommunityUploadScreen.tsx b/app/(app)/create/screens/upload/CommunityUploadScreen.tsx
similarity index 91%
rename from app/create/screens/upload/CommunityUploadScreen.tsx
rename to app/(app)/create/screens/upload/CommunityUploadScreen.tsx
index 0beb278..b3e17fa 100644
--- a/app/create/screens/upload/CommunityUploadScreen.tsx
+++ b/app/(app)/create/screens/upload/CommunityUploadScreen.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import Upload from "../../../components/controls/Upload";
-import { useMessages } from "../../../contexts/MessagesContext";
+import Upload from "../../../../components/controls/Upload";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
diff --git a/app/create/types.ts b/app/(app)/create/types.ts
similarity index 100%
rename from app/create/types.ts
rename to app/(app)/create/types.ts
diff --git a/app/create/utils/anonymousDraftStorage.ts b/app/(app)/create/utils/anonymousDraftStorage.ts
similarity index 89%
rename from app/create/utils/anonymousDraftStorage.ts
rename to app/(app)/create/utils/anonymousDraftStorage.ts
index abe9694..7ab465a 100644
--- a/app/create/utils/anonymousDraftStorage.ts
+++ b/app/(app)/create/utils/anonymousDraftStorage.ts
@@ -1,5 +1,5 @@
 import type { CreateFlowState } from "../types";
-import { migrateLegacyCreateFlowState } from "../../../lib/create/migrateLegacyCreateFlowState";
+import { migrateLegacyCreateFlowState } from "../../../../lib/create/migrateLegacyCreateFlowState";
 
 /** Anonymous in-progress create flow (local only until magic-link transfer). */
 export const CREATE_FLOW_ANONYMOUS_KEY = "create-flow-anonymous" as const;
@@ -75,15 +75,6 @@ export function hasTransferPendingFlag(): boolean {
   }
 }
 
-export function clearTransferPendingFlag(): void {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.removeItem(CREATE_FLOW_TRANSFER_PENDING_KEY);
-  } catch {
-    // ignore
-  }
-}
-
 /** One-time cleanup of pre–anonymous-draft keys. */
 export function clearLegacyCreateFlowKeysOnce(): void {
   if (typeof window === "undefined") return;
diff --git a/app/create/utils/coreValueDetailsLocalStorage.ts b/app/(app)/create/utils/coreValueDetailsLocalStorage.ts
similarity index 100%
rename from app/create/utils/coreValueDetailsLocalStorage.ts
rename to app/(app)/create/utils/coreValueDetailsLocalStorage.ts
diff --git a/app/create/utils/createFlowProportionProgress.ts b/app/(app)/create/utils/createFlowProportionProgress.ts
similarity index 93%
rename from app/create/utils/createFlowProportionProgress.ts
rename to app/(app)/create/utils/createFlowProportionProgress.ts
index 017986b..c5ede99 100644
--- a/app/create/utils/createFlowProportionProgress.ts
+++ b/app/(app)/create/utils/createFlowProportionProgress.ts
@@ -1,4 +1,4 @@
-import type { ProportionBarState } from "../../components/progress/ProportionBar/ProportionBar.types";
+import type { ProportionBarState } from "../../../components/progress/ProportionBar/ProportionBar.types";
 import type { CreateFlowStep } from "../types";
 import { FLOW_STEP_ORDER, getStepIndex } from "./flowSteps";
 
diff --git a/app/create/utils/createFlowScreenRegistry.ts b/app/(app)/create/utils/createFlowScreenRegistry.ts
similarity index 95%
rename from app/create/utils/createFlowScreenRegistry.ts
rename to app/(app)/create/utils/createFlowScreenRegistry.ts
index 7af764e..ff189fe 100644
--- a/app/create/utils/createFlowScreenRegistry.ts
+++ b/app/(app)/create/utils/createFlowScreenRegistry.ts
@@ -2,10 +2,10 @@ import type { CreateFlowStep } from "../types";
 
 /**
  * Figma layout families for the create flow (not encoded in the URL).
- * `app/create/screens/<kind>/` mirrors these names: e.g. `layoutKind: "select"` → `screens/select/`,
+ * `app/(app)/create/screens/<kind>/` mirrors these names: e.g. `layoutKind: "select"` → `screens/select/`,
  * `"card"` → `screens/card/` (compact card-stack frames, distinct from two-column chip selects).
  */
-export type CreateFlowLayoutKind =
+type CreateFlowLayoutKind =
   | "informational"
   | "text"
   | "select"
@@ -15,7 +15,7 @@ export type CreateFlowLayoutKind =
   | "right-rail"
   | "completed";
 
-export interface CreateFlowScreenDefinition {
+interface CreateFlowScreenDefinition {
   layoutKind: CreateFlowLayoutKind;
   /** Figma node id (file Community-Rule-System), dev mode. */
   figmaNodeId: string;
diff --git a/app/create/utils/flowSteps.ts b/app/(app)/create/utils/flowSteps.ts
similarity index 100%
rename from app/create/utils/flowSteps.ts
rename to app/(app)/create/utils/flowSteps.ts
diff --git a/app/create/utils/hasCreateFlowUserInput.ts b/app/(app)/create/utils/hasCreateFlowUserInput.ts
similarity index 100%
rename from app/create/utils/hasCreateFlowUserInput.ts
rename to app/(app)/create/utils/hasCreateFlowUserInput.ts
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
new file mode 100644
index 0000000..7b87c70
--- /dev/null
+++ b/app/(app)/layout.tsx
@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+
+// Signed-in product surfaces (`/create/*`, `/login`, `/profile`) intentionally
+// run without the marketing footer. Per-route chrome (e.g. CreateFlow's own
+// header/footer lockup) is composed in nested layouts.
+export default function AppLayout({ children }: { children: ReactNode }) {
+  return <main className="flex-1">{children}</main>;
+}
diff --git a/app/login/layout.tsx b/app/(app)/login/layout.tsx
similarity index 100%
rename from app/login/layout.tsx
rename to app/(app)/login/layout.tsx
diff --git a/app/login/page.tsx b/app/(app)/login/page.tsx
similarity index 85%
rename from app/login/page.tsx
rename to app/(app)/login/page.tsx
index 7f3e70e..3a67fa4 100644
--- a/app/login/page.tsx
+++ b/app/(app)/login/page.tsx
@@ -3,18 +3,19 @@
 import { Suspense } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useTranslation } from "../contexts/MessagesContext";
-import Login from "../components/modals/Login";
-import LoginForm from "../components/modals/Login/LoginForm";
+import { useTranslation } from "../../contexts/MessagesContext";
+import Login from "../../components/modals/Login";
+import LoginForm from "../../components/modals/Login/LoginForm";
 
 const loginPageBgClass =
   "min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)]";
 
 function LoginLoadingFallback() {
+  const t = useTranslation("pages.login");
   return (
     <div className={`${loginPageBgClass} flex items-center justify-center`}>
       <p className="font-inter text-[14px] text-[var(--color-content-default-primary)]">
-        Loading…
+        {t("loadingFallback")}
       </p>
     </div>
   );
diff --git a/app/profile/ProfilePageClient.tsx b/app/(app)/profile/ProfilePageClient.tsx
similarity index 88%
rename from app/profile/ProfilePageClient.tsx
rename to app/(app)/profile/ProfilePageClient.tsx
index f2a6f4f..b2b8e44 100644
--- a/app/profile/ProfilePageClient.tsx
+++ b/app/(app)/profile/ProfilePageClient.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { useTranslation } from "../contexts/MessagesContext";
-import Button from "../components/buttons/Button";
-import { fetchAuthSession, logout } from "../../lib/create/api";
+import { useTranslation } from "../../contexts/MessagesContext";
+import Button from "../../components/buttons/Button";
+import { fetchAuthSession, logout } from "../../../lib/create/api";
 
 export default function ProfilePageClient() {
   const t = useTranslation("pages.profile");
diff --git a/app/profile/page.tsx b/app/(app)/profile/page.tsx
similarity index 100%
rename from app/profile/page.tsx
rename to app/(app)/profile/page.tsx
diff --git a/app/(dev)/components-preview/page.tsx b/app/(dev)/components-preview/page.tsx
index 5bf532a..6681f22 100644
--- a/app/(dev)/components-preview/page.tsx
+++ b/app/(dev)/components-preview/page.tsx
@@ -14,27 +14,26 @@ let ruleCardIdCounter = 0;
 interface ChipData {
   id: string;
   label: string;
-  state: "Unselected" | "Selected" | "Custom";
-  palette: "Default" | "Inverse";
-  size: "S" | "M";
+  state: "unselected" | "selected" | "custom";
+  palette: "default" | "inverse";
+  size: "s" | "m";
 }
 
-// MultiSelect example component with state management
-function MultiSelectExample({ size }: { size: "S" | "M" }) {
+function MultiSelectExample({ size }: { size: "s" | "m" }) {
   const [options, setOptions] = useState<
     Array<{
       id: string;
       label: string;
-      state: "Unselected" | "Selected" | "Custom";
+      state: "unselected" | "selected" | "custom";
     }>
   >([
-    { id: "1", label: "1 member", state: "Unselected" },
-    { id: "2", label: "2-10 members", state: "Unselected" },
-    { id: "3", label: "10-24 members", state: "Unselected" },
-    { id: "4", label: "24-64 members", state: "Unselected" },
-    { id: "5", label: "64-128 members", state: "Unselected" },
-    { id: "6", label: "125-1000 members", state: "Unselected" },
-    { id: "7", label: "1000+ members", state: "Unselected" },
+    { id: "1", label: "1 member", state: "unselected" },
+    { id: "2", label: "2-10 members", state: "unselected" },
+    { id: "3", label: "10-24 members", state: "unselected" },
+    { id: "4", label: "24-64 members", state: "unselected" },
+    { id: "5", label: "64-128 members", state: "unselected" },
+    { id: "6", label: "125-1000 members", state: "unselected" },
+    { id: "7", label: "1000+ members", state: "unselected" },
   ]);
 
   const handleChipClick = (chipId: string) => {
@@ -43,7 +42,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
         opt.id === chipId
           ? {
               ...opt,
-              state: opt.state === "Selected" ? "Unselected" : "Selected",
+              state: opt.state === "selected" ? "unselected" : "selected",
             }
           : opt,
       ),
@@ -52,14 +51,14 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
 
   const handleAddClick = () => {
     const newId = `custom-${Date.now()}`;
-    setOptions((prev) => [...prev, { id: newId, label: "", state: "Custom" }]);
+    setOptions((prev) => [...prev, { id: newId, label: "", state: "custom" }]);
   };
 
   const handleCustomConfirm = (chipId: string, value: string) => {
     setOptions((prev) =>
       prev.map((opt) =>
         opt.id === chipId
-          ? { ...opt, label: value, state: "Selected" as const }
+          ? { ...opt, label: value, state: "selected" as const }
           : opt,
       ),
     );
@@ -72,7 +71,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
   return (
     <div className="space-y-[var(--spacing-scale-016)]">
       <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
-        {size === "S" ? "Small (S)" : "Medium (M)"}
+        {size === "s" ? "Small (S)" : "Medium (M)"}
       </h3>
       <MultiSelect
         label="Label"
@@ -91,12 +90,12 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
 
 export default function ComponentsPreview() {
   const [chipStates, setChipStates] = useState<
-    Record<string, "Unselected" | "Selected">
+    Record<string, "unselected" | "selected">
   >({
-    "default-s": "Unselected",
-    "default-m": "Unselected",
-    "inverse-s": "Unselected",
-    "inverse-m": "Unselected",
+    "default-s": "unselected",
+    "default-m": "unselected",
+    "inverse-s": "unselected",
+    "inverse-m": "unselected",
   });
 
   // Manage custom chips separately
@@ -104,16 +103,16 @@ export default function ComponentsPreview() {
     {
       id: "custom-1",
       label: "",
-      state: "Custom",
-      palette: "Default",
-      size: "S",
+      state: "custom",
+      palette: "default",
+      size: "s",
     },
     {
       id: "custom-2",
       label: "",
-      state: "Custom",
-      palette: "Default",
-      size: "M",
+      state: "custom",
+      palette: "default",
+      size: "m",
     },
   ]);
 
@@ -124,7 +123,7 @@ export default function ComponentsPreview() {
       chipOptions: Array<{
         id: string;
         label: string;
-        state: "Unselected" | "Selected" | "Custom";
+        state: "unselected" | "selected" | "custom";
       }>;
       onChipClick?: (_categoryName: string, _chipId: string) => void;
       onAddClick?: (_categoryName: string) => void;
@@ -139,11 +138,11 @@ export default function ComponentsPreview() {
     {
       name: "Values",
       chipOptions: [
-        { id: "values-1", label: "Consciousness", state: "Unselected" },
-        { id: "values-2", label: "Ecology", state: "Unselected" },
-        { id: "values-3", label: "Abundance", state: "Unselected" },
-        { id: "values-4", label: "Art", state: "Unselected" },
-        { id: "values-5", label: "Decisiveness", state: "Unselected" },
+        { id: "values-1", label: "Consciousness", state: "unselected" },
+        { id: "values-2", label: "Ecology", state: "unselected" },
+        { id: "values-3", label: "Abundance", state: "unselected" },
+        { id: "values-4", label: "Art", state: "unselected" },
+        { id: "values-5", label: "Decisiveness", state: "unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -156,9 +155,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -176,7 +175,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -195,7 +194,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -220,7 +219,7 @@ export default function ComponentsPreview() {
     },
     {
       name: "Communication",
-      chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
+      chipOptions: [{ id: "comm-1", label: "Signal", state: "unselected" }],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
@@ -232,9 +231,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -252,7 +251,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -271,7 +270,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -297,7 +296,7 @@ export default function ComponentsPreview() {
     {
       name: "Membership",
       chipOptions: [
-        { id: "membership-1", label: "Open Admission", state: "Unselected" },
+        { id: "membership-1", label: "Open Admission", state: "unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -310,9 +309,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -330,7 +329,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -349,7 +348,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -375,8 +374,8 @@ export default function ComponentsPreview() {
     {
       name: "Decision-making",
       chipOptions: [
-        { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
-        { id: "decision-2", label: "Modified Consensus", state: "Unselected" },
+        { id: "decision-1", label: "Lazy Consensus", state: "unselected" },
+        { id: "decision-2", label: "Modified Consensus", state: "unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -389,9 +388,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -409,7 +408,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -428,7 +427,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -454,8 +453,8 @@ export default function ComponentsPreview() {
     {
       name: "Conflict management",
       chipOptions: [
-        { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
-        { id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
+        { id: "conflict-1", label: "Code of Conduct", state: "unselected" },
+        { id: "conflict-2", label: "Restorative Justice", state: "unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -468,9 +467,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -488,7 +487,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -507,7 +506,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -560,45 +559,45 @@ export default function ComponentsPreview() {
                 <Chip
                   label="Small"
                   state={chipStates["default-s"]}
-                  palette="Default"
-                  size="S"
+                  palette="default"
+                  size="s"
                   onClick={() =>
                     setChipStates((prev) => ({
                       ...prev,
                       "default-s":
-                        prev["default-s"] === "Selected"
-                          ? "Unselected"
-                          : "Selected",
+                        prev["default-s"] === "selected"
+                          ? "unselected"
+                          : "selected",
                     }))
                   }
                 />
                 <Chip
                   label="Medium"
                   state={chipStates["default-m"]}
-                  palette="Default"
-                  size="M"
+                  palette="default"
+                  size="m"
                   onClick={() =>
                     setChipStates((prev) => ({
                       ...prev,
                       "default-m":
-                        prev["default-m"] === "Selected"
-                          ? "Unselected"
-                          : "Selected",
+                        prev["default-m"] === "selected"
+                          ? "unselected"
+                          : "selected",
                     }))
                   }
                 />
                 <Chip
                   label="Disabled"
-                  state="Disabled"
-                  palette="Default"
-                  size="S"
+                  state="disabled"
+                  palette="default"
+                  size="s"
                 />
                 {customChips
-                  .filter((chip) => chip.palette === "Default")
+                  .filter((chip) => chip.palette === "default")
                   .map((chip) => (
                     <Chip
                       key={chip.id}
-                      label={chip.state === "Custom" ? "" : chip.label}
+                      label={chip.state === "custom" ? "" : chip.label}
                       state={chip.state}
                       palette={chip.palette}
                       size={chip.size}
@@ -607,7 +606,7 @@ export default function ComponentsPreview() {
                         setCustomChips((prev) =>
                           prev.map((c) =>
                             c.id === chip.id
-                              ? { ...c, label: value, state: "Selected" }
+                              ? { ...c, label: value, state: "selected" }
                               : c,
                           ),
                         );
@@ -622,8 +621,8 @@ export default function ComponentsPreview() {
                         e.stopPropagation();
                         // Only toggle if the chip is in Selected or Unselected state (not Custom)
                         if (
-                          chip.state === "Selected" ||
-                          chip.state === "Unselected"
+                          chip.state === "selected" ||
+                          chip.state === "unselected"
                         ) {
                           setCustomChips((prev) =>
                             prev.map((c) =>
@@ -631,9 +630,9 @@ export default function ComponentsPreview() {
                                 ? {
                                     ...c,
                                     state:
-                                      c.state === "Selected"
-                                        ? "Unselected"
-                                        : "Selected",
+                                      c.state === "selected"
+                                        ? "unselected"
+                                        : "selected",
                                   }
                                 : c,
                             ),
@@ -652,9 +651,9 @@ export default function ComponentsPreview() {
                       {
                         id: newId,
                         label: "",
-                        state: "Custom",
-                        palette: "Default",
-                        size: "S",
+                        state: "custom",
+                        palette: "default",
+                        size: "s",
                       },
                     ]);
                   }}
@@ -698,38 +697,38 @@ export default function ComponentsPreview() {
                   <Chip
                     label="Small"
                     state={chipStates["inverse-s"]}
-                    palette="Inverse"
-                    size="S"
+                    palette="inverse"
+                    size="s"
                     onClick={() =>
                       setChipStates((prev) => ({
                         ...prev,
                         "inverse-s":
-                          prev["inverse-s"] === "Selected"
-                            ? "Unselected"
-                            : "Selected",
+                          prev["inverse-s"] === "selected"
+                            ? "unselected"
+                            : "selected",
                       }))
                     }
                   />
                   <Chip
                     label="Medium"
                     state={chipStates["inverse-m"]}
-                    palette="Inverse"
-                    size="M"
+                    palette="inverse"
+                    size="m"
                     onClick={() =>
                       setChipStates((prev) => ({
                         ...prev,
                         "inverse-m":
-                          prev["inverse-m"] === "Selected"
-                            ? "Unselected"
-                            : "Selected",
+                          prev["inverse-m"] === "selected"
+                            ? "unselected"
+                            : "selected",
                       }))
                     }
                   />
                   <Chip
                     label="Disabled"
-                    state="Disabled"
-                    palette="Inverse"
-                    size="S"
+                    state="disabled"
+                    palette="inverse"
+                    size="s"
                   />
                 </div>
               </div>
@@ -959,10 +958,10 @@ export default function ComponentsPreview() {
           </h2>
           <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
             {/* Small size */}
-            <MultiSelectExample size="S" />
+            <MultiSelectExample size="s" />
 
             {/* Medium size */}
-            <MultiSelectExample size="M" />
+            <MultiSelectExample size="m" />
           </div>
         </section>
       </div>
diff --git a/app/(dev)/layout.tsx b/app/(dev)/layout.tsx
new file mode 100644
index 0000000..84b2b8c
--- /dev/null
+++ b/app/(dev)/layout.tsx
@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+// Development-only previews (e.g. `/components-preview`) — no public chrome.
+// Routes here are gated by NODE_ENV checks at the page level.
+export default function DevLayout({ children }: { children: ReactNode }) {
+  return <main className="flex-1">{children}</main>;
+}
diff --git a/app/(marketing)/MarketingRuleStackSection.tsx b/app/(marketing)/_components/MarketingRuleStackSection.tsx
similarity index 66%
rename from app/(marketing)/MarketingRuleStackSection.tsx
rename to app/(marketing)/_components/MarketingRuleStackSection.tsx
index 5672fd0..fb372bb 100644
--- a/app/(marketing)/MarketingRuleStackSection.tsx
+++ b/app/(marketing)/_components/MarketingRuleStackSection.tsx
@@ -1,9 +1,9 @@
 import dynamic from "next/dynamic";
-import { listRuleTemplatesFromDb } from "../../lib/server/ruleTemplates";
-import { GOVERNANCE_TEMPLATE_HOME_SLUGS } from "../../lib/templates/governanceTemplateCatalog";
-import { gridEntriesForSlugOrderWithCatalogFallback } from "../../lib/templates/templateGridPresentation";
+import { listRuleTemplatesFromDb } from "../../../lib/server/ruleTemplates";
+import { GOVERNANCE_TEMPLATE_HOME_SLUGS } from "../../../lib/templates/governanceTemplateCatalog";
+import { gridEntriesForSlugOrderWithCatalogFallback } from "../../../lib/templates/templateGridPresentation";
 
-const RuleStack = dynamic(() => import("../components/sections/RuleStack"), {
+const RuleStack = dynamic(() => import("../../components/sections/RuleStack"), {
   loading: () => (
     <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
   ),
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
new file mode 100644
index 0000000..bd29e83
--- /dev/null
+++ b/app/(marketing)/layout.tsx
@@ -0,0 +1,21 @@
+import dynamic from "next/dynamic";
+import type { ReactNode } from "react";
+
+// Site footer is part of the public marketing chrome only — not rendered for
+// signed-in product surfaces, admin dashboards, or dev previews. See
+// `.cursor/rules/routes.mdc` for the full chrome composition map.
+const Footer = dynamic(() => import("../components/navigation/Footer"), {
+  loading: () => (
+    <footer className="bg-[var(--color-surface-default-primary)] w-full min-h-[200px]" />
+  ),
+  ssr: true,
+});
+
+export default function MarketingLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <main className="flex-1">{children}</main>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index ce576cf..8a29944 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -4,7 +4,7 @@ import messages from "../../messages/en/index";
 import { getTranslation } from "../../lib/i18n/getTranslation";
 import HeroBanner from "../components/sections/HeroBanner";
 import AskOrganizer from "../components/sections/AskOrganizer";
-import { MarketingRuleStackSection } from "./MarketingRuleStackSection";
+import { MarketingRuleStackSection } from "./_components/MarketingRuleStackSection";
 
 // Code split below-the-fold components to reduce initial bundle size
 const LogoWall = dynamic(() => import("../components/sections/LogoWall"), {
diff --git a/app/components/asset/index.ts b/app/components/asset/index.tsx
similarity index 100%
rename from app/components/asset/index.ts
rename to app/components/asset/index.tsx
diff --git a/app/components/asset/logo/index.ts b/app/components/asset/logo/index.tsx
similarity index 100%
rename from app/components/asset/logo/index.ts
rename to app/components/asset/logo/index.tsx
diff --git a/app/components/buttons/Button.tsx b/app/components/buttons/Button.tsx
index 50b8c2d..ef5308c 100644
--- a/app/components/buttons/Button.tsx
+++ b/app/components/buttons/Button.tsx
@@ -5,34 +5,26 @@ import type {
   ButtonPaletteValue,
   ButtonStateValue,
 } from "../../../lib/propNormalization";
-import {
-  normalizeSize,
-  normalizeButtonType,
-  normalizeButtonPalette,
-} from "../../../lib/propNormalization";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   /**
-   * Button type (Figma prop). Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Button type (Figma prop).
    * @default "filled"
    */
   buttonType?: ButtonTypeValue;
   /**
-   * Button palette (Figma prop). Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses "Invert", codebase uses "inverse" - both are supported.
+   * Button palette (Figma prop).
    * @default "default"
    */
   palette?: ButtonPaletteValue;
   /**
-   * Button size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Button size.
    * @default "xsmall"
    */
   size?: SizeValue;
   /**
-   * Button state (Figma prop). Accepts both lowercase and PascalCase (case-insensitive).
+   * Button state (Figma prop).
    * @default "default"
    */
   state?: ButtonStateValue;
@@ -83,12 +75,9 @@ const Button = memo<ButtonProps>(
     ariaLabel,
     ...props
   }) => {
-    // Normalize props
-    const buttonType = normalizeButtonType(typeProp, "filled");
-    const buttonPalette = normalizeButtonPalette(paletteProp, "default");
-    const size = normalizeSize(sizeProp);
-    // State prop is for Figma alignment - actual state is handled by CSS pseudo-classes
-    // We accept it for API alignment but don't use it for styling (CSS handles states)
+    const buttonType = typeProp ?? "filled";
+    const buttonPalette = paletteProp ?? "default";
+    const size = sizeProp;
 
     // Map type + palette to variant string for styling (internal use only)
     const getVariantFromTypeAndPalette = (
diff --git a/app/components/cards/NumberCard.tsx b/app/components/cards/NumberCard.tsx
index 5d0e311..6772da0 100644
--- a/app/components/cards/NumberCard.tsx
+++ b/app/components/cards/NumberCard.tsx
@@ -3,80 +3,57 @@
 import { memo } from "react";
 import SectionNumber from "../sections/SectionNumber";
 
-import { normalizeNumberCardSize } from "../../../lib/propNormalization";
-
-export type NumberCardSizeValue =
-  | "Small"
-  | "Medium"
-  | "Large"
-  | "XLarge"
-  | "small"
-  | "medium"
-  | "large"
-  | "xlarge";
+export type NumberCardSizeValue = "small" | "medium" | "large" | "xlarge";
 
 interface NumberCardProps {
   number: number;
   text: string;
-  /**
-   * Number card size. Accepts both PascalCase (Figma default) and lowercase (case-insensitive).
-   * Figma uses PascalCase, codebase uses PascalCase - both are supported.
-   */
   size?: NumberCardSizeValue;
   iconShape?: string;
   iconColor?: string;
 }
 
 const NumberCard = memo<NumberCardProps>(({ number, text, size: sizeProp }) => {
-  // Base classes common to all sizes
   const baseClasses =
     "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";
 
-  // If size prop is provided, use explicit size classes
-  // Otherwise, use responsive breakpoints for backward compatibility
   if (sizeProp) {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeNumberCardSize(sizeProp);
-    // Size-specific classes
+    const size = sizeProp;
     const sizeClasses = {
-      Small: "flex flex-col items-end justify-center gap-4 p-5 relative",
-      Medium: "flex flex-row items-center gap-8 p-8 relative",
-      Large:
+      small: "flex flex-col items-end justify-center gap-4 p-5 relative",
+      medium: "flex flex-row items-center gap-8 p-8 relative",
+      large:
         "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
-      XLarge:
+      xlarge:
         "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
     };
 
-    // Text size classes
     const textClasses = {
-      Small:
+      small:
         "font-bricolage-grotesque font-medium text-[24px] leading-[32px] text-[#141414]",
-      Medium:
+      medium:
         "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
-      Large:
+      large:
         "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
-      XLarge:
+      xlarge:
         "font-bricolage-grotesque font-medium text-[32px] leading-[32px] text-[#141414]",
     };
 
-    // Section number wrapper classes - Small doesn't need a wrapper
     const sectionNumberWrapperClasses = {
-      Small: "relative shrink-0",
-      Medium: "flex justify-start flex-shrink-0",
-      Large: "absolute top-8 right-8",
-      XLarge: "absolute top-8 right-8",
+      small: "relative shrink-0",
+      medium: "flex justify-start flex-shrink-0",
+      large: "absolute top-8 right-8",
+      xlarge: "absolute top-8 right-8",
     };
 
-    // Content container classes
     const contentClasses = {
-      Small: "min-w-full relative shrink-0",
-      Medium: "flex-1",
-      Large: "absolute bottom-8 left-8 right-16",
-      XLarge: "absolute bottom-8 left-8 right-16",
+      small: "min-w-full relative shrink-0",
+      medium: "flex-1",
+      large: "absolute bottom-8 left-8 right-16",
+      xlarge: "absolute bottom-8 left-8 right-16",
     };
 
-    // Small variant has section number as direct child, others need wrapper
-    if (size === "Small") {
+    if (size === "small") {
       return (
         <div className={`${baseClasses} ${sizeClasses[size]}`}>
           {/* Section Number - Direct child for Small */}
diff --git a/app/components/cards/RuleCard/RuleCard.container.tsx b/app/components/cards/RuleCard/RuleCard.container.tsx
index 6e55e42..6605c02 100644
--- a/app/components/cards/RuleCard/RuleCard.container.tsx
+++ b/app/components/cards/RuleCard/RuleCard.container.tsx
@@ -3,7 +3,6 @@
 import { memo } from "react";
 import { RuleCardView } from "./RuleCard.view";
 import type { RuleCardProps } from "./RuleCard.types";
-import { normalizeRuleCardSize } from "../../../../lib/propNormalization";
 
 declare global {
   interface Window {
@@ -33,8 +32,7 @@ const RuleCardContainer = memo<RuleCardProps>(
     logoAlt,
     communityInitials,
   }) => {
-    // Normalize size prop
-    const size = normalizeRuleCardSize(sizeProp, "L");
+    const size = sizeProp ?? "L";
 
     const handleClick = () => {
       // Basic analytics event tracking
diff --git a/app/components/cards/RuleCard/RuleCard.types.ts b/app/components/cards/RuleCard/RuleCard.types.ts
index c766789..8c5f67a 100644
--- a/app/components/cards/RuleCard/RuleCard.types.ts
+++ b/app/components/cards/RuleCard/RuleCard.types.ts
@@ -21,7 +21,7 @@ export interface RuleCardProps {
   className?: string;
   onClick?: () => void;
   expanded?: boolean;
-  size?: "XS" | "S" | "M" | "L" | "xs" | "s" | "m" | "l";
+  size?: "XS" | "S" | "M" | "L";
   categories?: Category[];
   logoUrl?: string;
   logoAlt?: string;
diff --git a/app/components/cards/RuleCard/RuleCard.view.tsx b/app/components/cards/RuleCard/RuleCard.view.tsx
index c58c3a9..84c0341 100644
--- a/app/components/cards/RuleCard/RuleCard.view.tsx
+++ b/app/components/cards/RuleCard/RuleCard.view.tsx
@@ -261,8 +261,8 @@ export function RuleCardView({
                   key={categoryIndex}
                   label={category.name}
                   showHelpIcon={false}
-                  size="S"
-                  palette="Inverse"
+                  size="s"
+                  palette="inverse"
                   options={category.chipOptions}
                   onChipClick={(chipId) => {
                     category.onChipClick?.(category.name, chipId);
diff --git a/app/components/cards/TemplateReviewCard/index.ts b/app/components/cards/TemplateReviewCard/index.tsx
similarity index 100%
rename from app/components/cards/TemplateReviewCard/index.ts
rename to app/components/cards/TemplateReviewCard/index.tsx
diff --git a/app/components/content/ContentContainer/ContentContainer.container.tsx b/app/components/content/ContentContainer/ContentContainer.container.tsx
index ce82012..99a8363 100644
--- a/app/components/content/ContentContainer/ContentContainer.container.tsx
+++ b/app/components/content/ContentContainer/ContentContainer.container.tsx
@@ -4,12 +4,10 @@ import { memo } from "react";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import ContentContainerView from "./ContentContainer.view";
 import type { ContentContainerProps } from "./ContentContainer.types";
-import { normalizeContentContainerSize } from "../../../../lib/propNormalization";
 
 const ContentContainerContainer = memo<ContentContainerProps>(
   ({ post, width = "200px", size: sizeProp = "responsive" }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeContentContainerSize(sizeProp);
+    const size = sizeProp;
     // Get the corresponding icon based on the same logic as background images
     const getIconImage = (slug: string): string => {
       const icons = [
diff --git a/app/components/content/ContentContainer/ContentContainer.types.ts b/app/components/content/ContentContainer/ContentContainer.types.ts
index 7fbe41d..b341738 100644
--- a/app/components/content/ContentContainer/ContentContainer.types.ts
+++ b/app/components/content/ContentContainer/ContentContainer.types.ts
@@ -1,17 +1,12 @@
 import type { BlogPost } from "../../../../lib/content";
 
-export type ContentContainerSizeValue =
-  | "xs"
-  | "responsive"
-  | "Xs"
-  | "Responsive";
+export type ContentContainerSizeValue = "xs" | "responsive";
 
 export interface ContentContainerProps {
   post: BlogPost;
   width?: string;
   /**
-   * Content container size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Content container size.
    */
   size?: ContentContainerSizeValue;
 }
diff --git a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
index 646b0da..06cf0f5 100644
--- a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
+++ b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
@@ -4,12 +4,10 @@ import { memo } from "react";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
 import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
-import { normalizeContentThumbnailVariant } from "../../../../lib/propNormalization";
 
 const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
   ({ post, className = "", variant: variantProp = "vertical" }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeContentThumbnailVariant(variantProp);
+    const variant = variantProp;
     // Get article-specific background image from frontmatter
     const getBackgroundImage = (
       post: ContentThumbnailTemplateProps["post"],
diff --git a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
index 425ee5b..f487c30 100644
--- a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
+++ b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
@@ -1,17 +1,12 @@
 import type { BlogPost } from "../../../../lib/content";
 
-export type ContentThumbnailTemplateVariantValue =
-  | "vertical"
-  | "horizontal"
-  | "Vertical"
-  | "Horizontal";
+export type ContentThumbnailTemplateVariantValue = "vertical" | "horizontal";
 
 export interface ContentThumbnailTemplateProps {
   post: BlogPost;
   className?: string;
   /**
-   * Content thumbnail variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Content thumbnail variant.
    */
   variant?: ContentThumbnailTemplateVariantValue;
   slugOrder?: string[];
diff --git a/app/components/controls/Checkbox/Checkbox.container.tsx b/app/components/controls/Checkbox/Checkbox.container.tsx
index df9e74d..7235392 100644
--- a/app/components/controls/Checkbox/Checkbox.container.tsx
+++ b/app/components/controls/Checkbox/Checkbox.container.tsx
@@ -4,11 +4,11 @@ import { memo } from "react";
 import { useComponentId } from "../../../hooks";
 import { CheckboxView } from "./Checkbox.view";
 import type { CheckboxProps } from "./Checkbox.types";
-import {
-  normalizeMode,
-  normalizeState,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / Checkbox" (TODO(figma)). Single boolean checkbox with
+ * optional label, supporting standard and inverse modes.
+ */
 const CheckboxContainer = memo<CheckboxProps>(
   ({
     checked = false,
@@ -24,9 +24,8 @@ const CheckboxContainer = memo<CheckboxProps>(
     ariaLabel,
     ...props
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const mode = normalizeMode(modeProp);
-    const state = normalizeState(stateProp);
+    const mode = modeProp;
+    const state = stateProp;
 
     const isInverse = mode === "inverse";
     const isStandard = mode === "standard";
diff --git a/app/components/controls/Checkbox/Checkbox.types.ts b/app/components/controls/Checkbox/Checkbox.types.ts
index f292633..60fa2ba 100644
--- a/app/components/controls/Checkbox/Checkbox.types.ts
+++ b/app/components/controls/Checkbox/Checkbox.types.ts
@@ -2,15 +2,9 @@ import type { ModeValue, StateValue } from "../../../../lib/propNormalization";
 
 export interface CheckboxProps {
   checked?: boolean;
-  /**
-   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
+  /** Mode variant (Figma: Mode). */
   mode?: ModeValue;
-  /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
+  /** Visual state (Figma: State). */
   state?: StateValue;
   disabled?: boolean;
   label?: string;
diff --git a/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx b/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
index ea96562..bc1b9f4 100644
--- a/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
+++ b/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
@@ -3,8 +3,11 @@
 import { memo, useCallback, useId, useState } from "react";
 import { CheckboxGroupView } from "./CheckboxGroup.view";
 import type { CheckboxGroupProps } from "./CheckboxGroup.types";
-import { normalizeMode } from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / CheckboxGroup" (TODO(figma)). Group of checkboxes sharing
+ * a name that emits the array of currently selected values.
+ */
 const CheckboxGroupContainer = ({
   name,
   value,
@@ -15,8 +18,7 @@ const CheckboxGroupContainer = ({
   className = "",
   ...props
 }: CheckboxGroupProps) => {
-  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-  const mode = normalizeMode(modeProp);
+  const mode = modeProp;
   // Generate unique ID for accessibility if not provided
   const generatedId = useId();
   const groupId = name || `checkbox-group-${generatedId}`;
diff --git a/app/components/controls/CheckboxGroup/CheckboxGroup.types.ts b/app/components/controls/CheckboxGroup/CheckboxGroup.types.ts
index 2a4b9be..c4f370a 100644
--- a/app/components/controls/CheckboxGroup/CheckboxGroup.types.ts
+++ b/app/components/controls/CheckboxGroup/CheckboxGroup.types.ts
@@ -12,8 +12,7 @@ export interface CheckboxGroupProps {
   value?: string[];
   onChange?: (_data: { value: string[] }) => void;
   /**
-   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Mode variant.
    */
   mode?: ModeValue;
   disabled?: boolean;
diff --git a/app/components/controls/Chip/Chip.container.tsx b/app/components/controls/Chip/Chip.container.tsx
index 717ce32..edb36d8 100644
--- a/app/components/controls/Chip/Chip.container.tsx
+++ b/app/components/controls/Chip/Chip.container.tsx
@@ -3,18 +3,17 @@
 import { memo, useState, useEffect, useRef } from "react";
 import ChipView from "./Chip.view";
 import type { ChipProps } from "./Chip.types";
-import {
-  normalizeChipPalette,
-  normalizeChipSize,
-  normalizeChipState,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / Chip" (TODO(figma)). Compact pill-shaped tag with
+ * selectable, removable, and inline-editable (custom) states.
+ */
 const ChipContainer = memo<ChipProps>(
   ({
     label,
-    state: stateProp = "Unselected",
-    palette: paletteProp = "Default",
-    size: sizeProp = "S",
+    state: stateProp = "unselected",
+    palette: paletteProp = "default",
+    size: sizeProp = "s",
     className = "",
     disabled,
     onClick,
@@ -23,9 +22,9 @@ const ChipContainer = memo<ChipProps>(
     onClose,
     ariaLabel,
   }) => {
-    const state = normalizeChipState(stateProp);
-    const palette = normalizeChipPalette(paletteProp);
-    const size = normalizeChipSize(sizeProp);
+    const state = stateProp;
+    const palette = paletteProp;
+    const size = sizeProp;
 
     const isDisabled = disabled ?? state === "disabled";
     const isCustom = state === "custom";
diff --git a/app/components/controls/Chip/Chip.types.ts b/app/components/controls/Chip/Chip.types.ts
index 7b91bf9..d0ddc6c 100644
--- a/app/components/controls/Chip/Chip.types.ts
+++ b/app/components/controls/Chip/Chip.types.ts
@@ -7,38 +7,32 @@ import type {
 export interface ChipProps {
   label: string;
   /**
-   * Visual state of the chip, aligned with Figma:
-   * - "Unselected"
-   * - "Selected"
-   * - "Disabled"
-   * - "Custom" (editable chips with check/close buttons)
-   *
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Visual state of the chip:
+   * - "unselected"
+   * - "selected"
+   * - "disabled"
+   * - "custom" (editable chips with check/close buttons)
    */
   state?: ChipStateValue;
   /**
-   * Palette of the chip, aligned with Figma:
-   * - "Default"
-   * - "Inverse"
-   *
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Palette of the chip:
+   * - "default"
+   * - "inverse"
    */
   palette?: ChipPaletteValue;
   /**
-   * Size of the chip, aligned with Figma:
-   * - "S"
-   * - "M"
-   *
-   * Accepts both uppercase (Figma) and lowercase values.
+   * Size of the chip:
+   * - "s"
+   * - "m"
    */
   size?: ChipSizeValue;
   className?: string;
   /**
    * Whether the chip should be non-interactive. Defaults to `true` when
    * `state === "disabled"` to preserve historical behavior. Pass
-   * `disabled={false}` alongside `state="Disabled"` to render the dimmed
+   * `disabled={false}` alongside `state="disabled"` to render the dimmed
    * "disabled" visual while keeping the chip clickable — useful for toggle
-   * groups where the unselected state is the disabled Figma visual.
+   * groups where the unselected state is the disabled visual.
    */
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
diff --git a/app/components/controls/InputWithCounter/InputWithCounter.container.tsx b/app/components/controls/InputWithCounter/InputWithCounter.container.tsx
new file mode 100644
index 0000000..7cdba29
--- /dev/null
+++ b/app/components/controls/InputWithCounter/InputWithCounter.container.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { memo } from "react";
+import { InputWithCounterView } from "./InputWithCounter.view";
+import type { InputWithCounterProps } from "./InputWithCounter.types";
+
+/**
+ * Figma: "Control / InputWithCounter" (TODO(figma)).
+ * Single-line text input with a label, optional help glyph, and a live
+ * `value.length / maxLength` counter underneath.
+ */
+const InputWithCounterContainer = memo<InputWithCounterProps>((props) => {
+  return <InputWithCounterView {...props} />;
+});
+
+InputWithCounterContainer.displayName = "InputWithCounter";
+
+export default InputWithCounterContainer;
diff --git a/app/components/controls/InputWithCounter/index.tsx b/app/components/controls/InputWithCounter/index.tsx
index 84207e0..0d1746a 100644
--- a/app/components/controls/InputWithCounter/index.tsx
+++ b/app/components/controls/InputWithCounter/index.tsx
@@ -1,2 +1,2 @@
-export { InputWithCounterView as default } from "./InputWithCounter.view";
+export { default } from "./InputWithCounter.container";
 export type { InputWithCounterProps } from "./InputWithCounter.types";
diff --git a/app/components/controls/MultiSelect/MultiSelect.container.tsx b/app/components/controls/MultiSelect/MultiSelect.container.tsx
index 159c6df..fd70a8a 100644
--- a/app/components/controls/MultiSelect/MultiSelect.container.tsx
+++ b/app/components/controls/MultiSelect/MultiSelect.container.tsx
@@ -3,17 +3,17 @@
 import { memo } from "react";
 import MultiSelectView from "./MultiSelect.view";
 import type { MultiSelectProps } from "./MultiSelect.types";
-import {
-  normalizeMultiSelectSize,
-  normalizeChipPalette,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / MultiSelect" (TODO(figma)). Labelled set of chips for
+ * picking multiple values, with an optional add button for custom entries.
+ */
 const MultiSelectContainer = memo<MultiSelectProps>(
   ({
     label,
     showHelpIcon = true,
-    size: sizeProp = "M",
-    palette: paletteProp = "Default",
+    size: sizeProp = "m",
+    palette: paletteProp = "default",
     options,
     onChipClick,
     onAddClick,
@@ -24,8 +24,8 @@ const MultiSelectContainer = memo<MultiSelectProps>(
     onCustomChipClose,
     className = "",
   }) => {
-    const size = normalizeMultiSelectSize(sizeProp);
-    const palette = normalizeChipPalette(paletteProp);
+    const size = sizeProp;
+    const palette = paletteProp;
 
     return (
       <MultiSelectView
diff --git a/app/components/controls/MultiSelect/MultiSelect.types.ts b/app/components/controls/MultiSelect/MultiSelect.types.ts
index edaec7c..873956b 100644
--- a/app/components/controls/MultiSelect/MultiSelect.types.ts
+++ b/app/components/controls/MultiSelect/MultiSelect.types.ts
@@ -9,7 +9,7 @@ export interface ChipOption {
   state?: ChipStateValue;
 }
 
-export type MultiSelectSizeValue = "S" | "M" | "s" | "m";
+export type MultiSelectSizeValue = "s" | "m";
 
 export interface MultiSelectProps {
   /**
@@ -21,13 +21,11 @@ export interface MultiSelectProps {
    */
   showHelpIcon?: boolean;
   /**
-   * Size variant: "S" (small) or "M" (medium)
-   * Accepts both uppercase (Figma) and lowercase values.
+   * Size variant: "s" (small) or "m" (medium)
    */
   size?: MultiSelectSizeValue;
   /**
-   * Palette for chips: "Default" or "Inverse"
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Palette for chips: "default" or "inverse"
    */
   palette?: ChipPaletteValue;
   /**
diff --git a/app/components/controls/MultiSelect/MultiSelect.view.tsx b/app/components/controls/MultiSelect/MultiSelect.view.tsx
index 8ab81b8..0bb1b96 100644
--- a/app/components/controls/MultiSelect/MultiSelect.view.tsx
+++ b/app/components/controls/MultiSelect/MultiSelect.view.tsx
@@ -28,7 +28,7 @@ function MultiSelectView({
     ? "gap-[var(--measures-spacing-200,8px)]"
     : "gap-[var(--measures-spacing-300,12px)]";
 
-  const chipSize = isSmall ? "S" : "M";
+  const chipSize = size;
 
   return (
     <div
@@ -41,8 +41,8 @@ function MultiSelectView({
           helpIcon={showHelpIcon}
           asterisk={false}
           helperText={false}
-          size={size === "s" ? "S" : "M"}
-          palette={palette === "inverse" ? "Inverse" : "Default"}
+          size={size}
+          palette={palette}
         />
       )}
 
@@ -53,13 +53,12 @@ function MultiSelectView({
         {options.map((option) => (
           <Chip
             key={option.id}
-            label={option.state === "Custom" ? "" : option.label}
-            state={option.state || "Unselected"}
-            palette={palette === "inverse" ? "Inverse" : "Default"}
+            label={option.state === "custom" ? "" : option.label}
+            state={option.state || "unselected"}
+            palette={palette}
             size={chipSize}
             onClick={() => {
-              // Only toggle if not in Custom state
-              if (option.state !== "Custom" && onChipClick) {
+              if (option.state !== "custom" && onChipClick) {
                 onChipClick(option.id);
               }
             }}
diff --git a/app/components/controls/RadioButton/RadioButton.container.tsx b/app/components/controls/RadioButton/RadioButton.container.tsx
index 59ec6f1..c54bad4 100644
--- a/app/components/controls/RadioButton/RadioButton.container.tsx
+++ b/app/components/controls/RadioButton/RadioButton.container.tsx
@@ -3,10 +3,6 @@
 import { memo, useCallback, useId } from "react";
 import { RadioButtonView } from "./RadioButton.view";
 import type { RadioButtonProps } from "./RadioButton.types";
-import {
-  normalizeMode,
-  normalizeState,
-} from "../../../../lib/propNormalization";
 
 const RadioButtonContainer = ({
   checked = false,
@@ -22,9 +18,8 @@ const RadioButtonContainer = ({
   ariaLabel,
   className = "",
 }: RadioButtonProps) => {
-  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-  const mode = normalizeMode(modeProp);
-  const state = normalizeState(stateProp);
+  const mode = modeProp;
+  const state = stateProp;
 
   // If state is "selected", it means checked in Figma terms
   const normalizedState = state === "selected" || checked ? "selected" : state;
diff --git a/app/components/controls/RadioButton/RadioButton.types.ts b/app/components/controls/RadioButton/RadioButton.types.ts
index 48cc32a..c5b6f10 100644
--- a/app/components/controls/RadioButton/RadioButton.types.ts
+++ b/app/components/controls/RadioButton/RadioButton.types.ts
@@ -3,14 +3,12 @@ import type { ModeValue, StateValue } from "../../../../lib/propNormalization";
 export interface RadioButtonProps {
   checked?: boolean;
   /**
-   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Mode variant.
    */
   mode?: ModeValue;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus", "selected"/"Selected" (case-insensitive).
+   * Visual state.
    * Note: "selected" state is represented by the `checked` prop in practice.
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   state?: StateValue;
   /**
diff --git a/app/components/controls/RadioGroup/RadioGroup.container.tsx b/app/components/controls/RadioGroup/RadioGroup.container.tsx
index 0b44466..80faa14 100644
--- a/app/components/controls/RadioGroup/RadioGroup.container.tsx
+++ b/app/components/controls/RadioGroup/RadioGroup.container.tsx
@@ -3,11 +3,11 @@
 import { memo, useCallback, useId } from "react";
 import { RadioGroupView } from "./RadioGroup.view";
 import type { RadioGroupProps } from "./RadioGroup.types";
-import {
-  normalizeMode,
-  normalizeState,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / RadioGroup" (TODO(figma)). Group of radio buttons sharing
+ * a name that emits the single currently selected value.
+ */
 const RadioGroupContainer = ({
   name,
   value,
@@ -19,14 +19,11 @@ const RadioGroupContainer = ({
   className = "",
   ...props
 }: RadioGroupProps) => {
-  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-  const mode = normalizeMode(modeProp);
-  // Normalize state, but handle "With Subtext" separately (it's represented by options with subtext)
-  const state =
-    typeof stateProp === "string" &&
-    (stateProp.toLowerCase() === "with subtext" || stateProp === "With Subtext")
-      ? "default" // "With Subtext" is handled via RadioOption.subtext, use default state
-      : normalizeState(stateProp);
+  const mode = modeProp;
+  const state: "default" | "hover" | "focus" | "selected" =
+    stateProp === "With Subtext" || stateProp === "with subtext"
+      ? "default"
+      : stateProp;
   // Generate unique ID for accessibility if not provided
   const generatedId = useId();
   const groupId = name || `radio-group-${generatedId}`;
diff --git a/app/components/controls/RadioGroup/RadioGroup.types.ts b/app/components/controls/RadioGroup/RadioGroup.types.ts
index 2a6ef2e..7b378d2 100644
--- a/app/components/controls/RadioGroup/RadioGroup.types.ts
+++ b/app/components/controls/RadioGroup/RadioGroup.types.ts
@@ -12,14 +12,12 @@ export interface RadioGroupProps {
   value?: string;
   onChange?: (_data: { value: string }) => void;
   /**
-   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Mode variant.
    */
   mode?: ModeValue;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
+   * Visual state.
    * Figma also supports "With Subtext" state, which is handled via RadioOption.subtext.
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   state?: StateValue | "With Subtext" | "with subtext";
   disabled?: boolean;
diff --git a/app/components/controls/SelectInput/SelectInput.container.tsx b/app/components/controls/SelectInput/SelectInput.container.tsx
index 9a60a6d..6106320 100644
--- a/app/components/controls/SelectInput/SelectInput.container.tsx
+++ b/app/components/controls/SelectInput/SelectInput.container.tsx
@@ -16,12 +16,11 @@ import React, {
 import { useClickOutside } from "../../../hooks";
 import { SelectInputView } from "./SelectInput.view";
 import type { SelectInputProps } from "./SelectInput.types";
-import {
-  normalizeState,
-  normalizeSmallMediumLargeSize,
-  normalizeLabelVariant,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / SelectInput" (TODO(figma)). Custom-styled select dropdown
+ * with a labelled trigger button and floating option menu.
+ */
 const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
   (
     {
@@ -53,22 +52,14 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
     const shouldShowLabel =
       showLabel !== undefined ? showLabel : labelText !== undefined;
 
-    // Normalize state - handle "state5" as disabled
     let normalizedState = externalStateProp;
     if (normalizedState === "state5" || normalizedState === "State5") {
-      normalizedState = "default"; // Map to default, disabled prop handles the disabled state
+      normalizedState = "default";
     }
-    const externalState = normalizeState(normalizedState);
+    const externalState = normalizedState;
 
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    // Note: labelVariant and size are normalized for future use but not yet implemented in the view
-    const _labelVariant = labelVariantProp
-      ? normalizeLabelVariant(labelVariantProp)
-      : undefined;
-    const _size = sizeProp
-      ? normalizeSmallMediumLargeSize(sizeProp)
-      : undefined;
-    // Mark as intentionally unused for future implementation
+    const _labelVariant = labelVariantProp;
+    const _size = sizeProp;
     void _labelVariant;
     void _size;
 
diff --git a/app/components/controls/SelectInput/SelectInput.types.ts b/app/components/controls/SelectInput/SelectInput.types.ts
index 199846f..aa04389 100644
--- a/app/components/controls/SelectInput/SelectInput.types.ts
+++ b/app/components/controls/SelectInput/SelectInput.types.ts
@@ -7,18 +7,8 @@ export interface SelectOptionData {
 
 import type { StateValue } from "../../../../lib/propNormalization";
 
-export type SelectInputLabelVariantValue =
-  | "default"
-  | "horizontal"
-  | "Default"
-  | "Horizontal";
-export type SelectInputSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "Small"
-  | "Medium"
-  | "Large";
+export type SelectInputLabelVariantValue = "default" | "horizontal";
+export type SelectInputSizeValue = "small" | "medium" | "large";
 
 export interface SelectInputProps {
   id?: string;
@@ -33,18 +23,15 @@ export interface SelectInputProps {
    */
   showLabel?: boolean;
   /**
-   * Label variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Label variant.
    */
   labelVariant?: SelectInputLabelVariantValue;
   /**
-   * Select input size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Select input size.
    */
   size?: SelectInputSizeValue;
   /**
-   * Visual state. Accepts "default"/"Default", "active"/"Active", "focus"/"Focus", "error"/"Error", "state5"/"State5" (State5 = Disabled).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state. "state5" maps to disabled.
    */
   state?: StateValue | "state5" | "State5";
   /**
diff --git a/app/components/controls/SelectInput/SelectInput.view.tsx b/app/components/controls/SelectInput/SelectInput.view.tsx
index 2e3bad2..8c8b786 100644
--- a/app/components/controls/SelectInput/SelectInput.view.tsx
+++ b/app/components/controls/SelectInput/SelectInput.view.tsx
@@ -1,7 +1,7 @@
 import React, { Children, type ReactNode } from "react";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import SelectDropdown from "./SelectDropdown";
-import SelectOption from "./SelectOption";
+import SelectOption from "../SelectOption";
 import type { SelectOptionData } from "./SelectInput.types";
 
 export interface SelectInputViewProps {
diff --git a/app/components/controls/SelectInput/SelectOption/SelectOption.container.tsx b/app/components/controls/SelectOption/SelectOption.container.tsx
similarity index 91%
rename from app/components/controls/SelectInput/SelectOption/SelectOption.container.tsx
rename to app/components/controls/SelectOption/SelectOption.container.tsx
index c92b089..675614a 100644
--- a/app/components/controls/SelectInput/SelectOption/SelectOption.container.tsx
+++ b/app/components/controls/SelectOption/SelectOption.container.tsx
@@ -3,8 +3,11 @@
 import { forwardRef, memo, useCallback } from "react";
 import { SelectOptionView } from "./SelectOption.view";
 import type { SelectOptionProps } from "./SelectOption.types";
-import { normalizeContextMenuItemSize } from "../../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / SelectOption" (TODO(figma)). Single option row rendered
+ * inside `SelectInput`'s dropdown menu.
+ */
 const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
   (
     {
@@ -18,8 +21,7 @@ const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeContextMenuItemSize(sizeProp);
+    const size = sizeProp;
     const getTextSize = (): string => {
       switch (size) {
         case "small":
diff --git a/app/components/controls/SelectInput/SelectOption/SelectOption.types.ts b/app/components/controls/SelectOption/SelectOption.types.ts
similarity index 68%
rename from app/components/controls/SelectInput/SelectOption/SelectOption.types.ts
rename to app/components/controls/SelectOption/SelectOption.types.ts
index 4004bb2..4a86be4 100644
--- a/app/components/controls/SelectInput/SelectOption/SelectOption.types.ts
+++ b/app/components/controls/SelectOption/SelectOption.types.ts
@@ -1,10 +1,4 @@
-export type SelectOptionSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "Small"
-  | "Medium"
-  | "Large";
+export type SelectOptionSizeValue = "small" | "medium" | "large";
 
 export interface SelectOptionProps {
   children?: React.ReactNode;
@@ -15,8 +9,7 @@ export interface SelectOptionProps {
     _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
   /**
-   * Select option size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Select option size.
    */
   size?: SelectOptionSizeValue;
 }
diff --git a/app/components/controls/SelectInput/SelectOption/SelectOption.view.tsx b/app/components/controls/SelectOption/SelectOption.view.tsx
similarity index 100%
rename from app/components/controls/SelectInput/SelectOption/SelectOption.view.tsx
rename to app/components/controls/SelectOption/SelectOption.view.tsx
diff --git a/app/components/controls/SelectInput/SelectOption/index.tsx b/app/components/controls/SelectOption/index.tsx
similarity index 100%
rename from app/components/controls/SelectInput/SelectOption/index.tsx
rename to app/components/controls/SelectOption/index.tsx
diff --git a/app/components/controls/Switch/Switch.container.tsx b/app/components/controls/Switch/Switch.container.tsx
index 2331b2b..5019501 100644
--- a/app/components/controls/Switch/Switch.container.tsx
+++ b/app/components/controls/Switch/Switch.container.tsx
@@ -3,8 +3,11 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { SwitchView } from "./Switch.view";
 import type { SwitchProps } from "./Switch.types";
-import { normalizeState } from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / Switch" (TODO(figma)). Animated on/off toggle switch,
+ * optionally paired with a trailing text label.
+ */
 const SwitchContainer = memo(
   forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
     const {
@@ -18,8 +21,7 @@ const SwitchContainer = memo(
       ...rest
     } = props;
 
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const state = normalizeState(stateProp);
+    const state = stateProp;
 
     const switchId = useId();
 
diff --git a/app/components/controls/Switch/Switch.types.ts b/app/components/controls/Switch/Switch.types.ts
index 208a399..167defd 100644
--- a/app/components/controls/Switch/Switch.types.ts
+++ b/app/components/controls/Switch/Switch.types.ts
@@ -17,8 +17,7 @@ export interface SwitchProps extends Omit<
   onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
   onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
   state?: StateValue;
   /**
diff --git a/app/components/controls/TextArea/TextArea.container.tsx b/app/components/controls/TextArea/TextArea.container.tsx
index 45b1105..f72a6eb 100644
--- a/app/components/controls/TextArea/TextArea.container.tsx
+++ b/app/components/controls/TextArea/TextArea.container.tsx
@@ -4,13 +4,11 @@ import { memo, forwardRef } from "react";
 import { useComponentId, useFormField } from "../../../hooks";
 import { TextAreaView } from "./TextArea.view";
 import type { TextAreaProps } from "./TextArea.types";
-import {
-  normalizeInputState,
-  normalizeSmallMediumLargeSize,
-  normalizeLabelVariant,
-  normalizeTextAreaAppearance,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / TextArea" (TODO(figma)). Multi-line text input with size
+ * variants, an embedded appearance, and an optional label and help glyph.
+ */
 const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (
     {
@@ -37,11 +35,10 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeSmallMediumLargeSize(sizeProp);
-    const labelVariant = normalizeLabelVariant(labelVariantProp);
-    const state = normalizeInputState(stateProp);
-    const appearance = normalizeTextAreaAppearance(appearanceProp);
+    const size = sizeProp;
+    const labelVariant = labelVariantProp;
+    const state = stateProp;
+    const appearance = appearanceProp;
     // Generate unique ID for accessibility if not provided
     const { id: textareaId, labelId } = useComponentId("textarea", id);
 
diff --git a/app/components/controls/TextArea/TextArea.types.ts b/app/components/controls/TextArea/TextArea.types.ts
index 0997525..b6981a5 100644
--- a/app/components/controls/TextArea/TextArea.types.ts
+++ b/app/components/controls/TextArea/TextArea.types.ts
@@ -1,41 +1,24 @@
 import type { InputStateValue } from "../../../../lib/propNormalization";
 
-export type TextAreaSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "Small"
-  | "Medium"
-  | "Large";
-export type TextAreaLabelVariantValue =
-  | "default"
-  | "horizontal"
-  | "Default"
-  | "Horizontal";
+export type TextAreaSizeValue = "small" | "medium" | "large";
+export type TextAreaLabelVariantValue = "default" | "horizontal";
 
-export type TextAreaAppearanceValue =
-  | "default"
-  | "embedded"
-  | "Default"
-  | "Embedded";
+export type TextAreaAppearanceValue = "default" | "embedded";
 
 export interface TextAreaProps extends Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
   "size" | "onChange" | "onFocus" | "onBlur"
 > {
   /**
-   * Text area size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Text area size.
    */
   size?: TextAreaSizeValue;
   /**
-   * Label variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Label variant.
    */
   labelVariant?: TextAreaLabelVariantValue;
   /**
-   * Visual state. Accepts "default"/"Default", "active"/"Active", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
   state?: InputStateValue;
   disabled?: boolean;
diff --git a/app/components/controls/TextInput/TextInput.container.tsx b/app/components/controls/TextInput/TextInput.container.tsx
index ae3e854..cc1ca9b 100644
--- a/app/components/controls/TextInput/TextInput.container.tsx
+++ b/app/components/controls/TextInput/TextInput.container.tsx
@@ -4,11 +4,11 @@ import { memo, forwardRef, useState, useRef } from "react";
 import { useComponentId, useFormField } from "../../../hooks";
 import { TextInputView } from "./TextInput.view";
 import type { TextInputProps } from "./TextInput.types";
-import {
-  normalizeInputState,
-  normalizeTextInputSize,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / TextInput" (TODO(figma)). Single-line text input with size
+ * variants and managed default/active/focus/error states.
+ */
 const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
@@ -33,9 +33,8 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const externalState = normalizeInputState(externalStateProp);
-    const inputSize = normalizeTextInputSize(inputSizeProp);
+    const externalState = externalStateProp;
+    const inputSize = inputSizeProp;
 
     // Generate unique ID for accessibility if not provided
     const { id: inputId, labelId } = useComponentId("text-input", id);
diff --git a/app/components/controls/TextInput/TextInput.types.ts b/app/components/controls/TextInput/TextInput.types.ts
index b98e653..acbcb18 100644
--- a/app/components/controls/TextInput/TextInput.types.ts
+++ b/app/components/controls/TextInput/TextInput.types.ts
@@ -1,19 +1,17 @@
 import type { InputStateValue } from "../../../../lib/propNormalization";
 
-export type TextInputSizeValue = "small" | "medium" | "Small" | "Medium";
+export type TextInputSizeValue = "small" | "medium";
 
 export interface TextInputProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   "size" | "onChange" | "onFocus" | "onBlur"
 > {
   /**
-   * Visual state. Accepts "default"/"Default", "active"/"Active", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
   state?: InputStateValue;
   /**
-   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Size variant.
    * @default "medium"
    */
   inputSize?: TextInputSizeValue;
diff --git a/app/components/controls/Toggle/Toggle.container.tsx b/app/components/controls/Toggle/Toggle.container.tsx
index d6b7fd4..6186b1e 100644
--- a/app/components/controls/Toggle/Toggle.container.tsx
+++ b/app/components/controls/Toggle/Toggle.container.tsx
@@ -3,8 +3,11 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { ToggleView } from "./Toggle.view";
 import type { ToggleProps } from "./Toggle.types";
-import { normalizeState } from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / Toggle" (TODO(figma)). Pill-shaped toggle button with
+ * checked/unchecked states and optional leading icon and text.
+ */
 const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
   (
     {
@@ -24,8 +27,7 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const state = normalizeState(stateProp);
+    const state = stateProp;
     const toggleId = useId();
     const labelId = useId();
 
diff --git a/app/components/controls/Toggle/Toggle.types.ts b/app/components/controls/Toggle/Toggle.types.ts
index 9dd5517..c5a1c29 100644
--- a/app/components/controls/Toggle/Toggle.types.ts
+++ b/app/components/controls/Toggle/Toggle.types.ts
@@ -15,8 +15,7 @@ export interface ToggleProps extends Omit<
   onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
   state?: StateValue;
   showIcon?: boolean;
diff --git a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx
index 5a07bd2..9281a40 100644
--- a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx
+++ b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx
@@ -3,11 +3,11 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { ToggleGroupView } from "./ToggleGroup.view";
 import type { ToggleGroupProps } from "./ToggleGroup.types";
-import {
-  normalizeToggleState,
-  normalizeToggleGroupPosition,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / ToggleGroup" (TODO(figma)). Segmented row of `Toggle`
+ * buttons whose corner radii are shared based on position (left/middle/right).
+ */
 const ToggleGroupContainer = memo(
   forwardRef<HTMLButtonElement, ToggleGroupProps>((props, _ref) => {
     const {
@@ -23,9 +23,8 @@ const ToggleGroupContainer = memo(
       ...rest
     } = props;
 
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const position = normalizeToggleGroupPosition(positionProp);
-    const state = normalizeToggleState(stateProp);
+    const position = positionProp;
+    const state = stateProp;
 
     const groupId = useId();
 
diff --git a/app/components/controls/ToggleGroup/ToggleGroup.types.ts b/app/components/controls/ToggleGroup/ToggleGroup.types.ts
index d646a94..0d6c424 100644
--- a/app/components/controls/ToggleGroup/ToggleGroup.types.ts
+++ b/app/components/controls/ToggleGroup/ToggleGroup.types.ts
@@ -1,12 +1,6 @@
 import type { StateValue } from "../../../../lib/propNormalization";
 
-export type ToggleGroupPositionValue =
-  | "left"
-  | "middle"
-  | "right"
-  | "Left"
-  | "Middle"
-  | "Right";
+export type ToggleGroupPositionValue = "left" | "middle" | "right";
 
 export interface ToggleGroupProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -15,15 +9,13 @@ export interface ToggleGroupProps extends Omit<
   children?: React.ReactNode;
   className?: string;
   /**
-   * Toggle group position. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Toggle group position.
    */
   position?: ToggleGroupPositionValue;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus", "selected"/"Selected" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
-  state?: StateValue | "selected" | "Selected";
+  state?: StateValue | "selected";
   showText?: boolean;
   ariaLabel?: string;
   onChange?: (
diff --git a/app/components/controls/Upload/Upload.container.tsx b/app/components/controls/Upload/Upload.container.tsx
index 9b73ef2..78b8f2b 100644
--- a/app/components/controls/Upload/Upload.container.tsx
+++ b/app/components/controls/Upload/Upload.container.tsx
@@ -4,6 +4,10 @@ import { memo } from "react";
 import UploadView from "./Upload.view";
 import type { UploadProps } from "./Upload.types";
 
+/**
+ * Figma: "Control / Upload" (TODO(figma)). Click-to-upload tile with a label
+ * and hint text used to add an image from the user's device.
+ */
 const UploadContainer = memo<UploadProps>(
   ({
     active = true,
diff --git a/app/components/controls/Upload/Upload.view.tsx b/app/components/controls/Upload/Upload.view.tsx
index 8409881..eb4cbaf 100644
--- a/app/components/controls/Upload/Upload.view.tsx
+++ b/app/components/controls/Upload/Upload.view.tsx
@@ -44,8 +44,8 @@ function UploadView({
           helpIcon={showHelpIcon}
           asterisk={false}
           helperText={false}
-          size="S"
-          palette="Default"
+          size="s"
+          palette="default"
         />
       )}
 
diff --git a/app/components/icons/Avatar.tsx b/app/components/icons/Avatar.tsx
index 3a85066..35ae5c1 100644
--- a/app/components/icons/Avatar.tsx
+++ b/app/components/icons/Avatar.tsx
@@ -1,31 +1,17 @@
 import { memo } from "react";
-import { normalizeSize } from "../../../lib/propNormalization";
 
-export type AvatarSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "xlarge"
-  | "Small"
-  | "Medium"
-  | "Large"
-  | "XLarge";
+export type AvatarSizeValue = "small" | "medium" | "large" | "xlarge";
 
 interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   src: string;
   alt: string;
-  /**
-   * Avatar size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
   size?: AvatarSizeValue;
   className?: string;
 }
 
 const Avatar = memo<AvatarProps>(
   ({ src, alt, size: sizeProp = "small", className = "", ...props }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeSize(sizeProp, "small");
+    const size = sizeProp;
     const sizeStyles: Record<string, string> = {
       small:
         "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)] border-[1.5px] border-[#FFFFFF4D] border-solid",
diff --git a/app/components/localization/LanguageSwitcher/index.ts b/app/components/localization/LanguageSwitcher/index.tsx
similarity index 100%
rename from app/components/localization/LanguageSwitcher/index.ts
rename to app/components/localization/LanguageSwitcher/index.tsx
diff --git a/app/components/modals/Alert/Alert.container.tsx b/app/components/modals/Alert/Alert.container.tsx
index e01624a..cdd678d 100644
--- a/app/components/modals/Alert/Alert.container.tsx
+++ b/app/components/modals/Alert/Alert.container.tsx
@@ -3,10 +3,6 @@
 import { memo } from "react";
 import { AlertView } from "./Alert.view";
 import type { AlertProps } from "./Alert.types";
-import {
-  normalizeAlertStatus,
-  normalizeAlertType,
-} from "../../../../lib/propNormalization";
 
 const AlertContainer = memo<AlertProps>(
   ({
@@ -19,9 +15,8 @@ const AlertContainer = memo<AlertProps>(
     onClose,
     className = "",
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const status = normalizeAlertStatus(statusProp);
-    const type = normalizeAlertType(typeProp);
+    const status = statusProp;
+    const type = typeProp;
     // Determine background and border colors based on status and type
     const getStatusStyles = () => {
       switch (status) {
diff --git a/app/components/modals/Alert/Alert.types.ts b/app/components/modals/Alert/Alert.types.ts
index e43ff15..e01a8d2 100644
--- a/app/components/modals/Alert/Alert.types.ts
+++ b/app/components/modals/Alert/Alert.types.ts
@@ -1,26 +1,16 @@
-export type AlertStatusValue =
-  | "default"
-  | "positive"
-  | "warning"
-  | "danger"
-  | "Default"
-  | "Positive"
-  | "Warning"
-  | "Danger";
+export type AlertStatusValue = "default" | "positive" | "warning" | "danger";
 
-export type AlertTypeValue = "toast" | "banner" | "Toast" | "Banner";
+export type AlertTypeValue = "toast" | "banner";
 
 export interface AlertProps {
   title: string;
   description?: string;
   /**
-   * Alert status. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Alert status.
    */
   status?: AlertStatusValue;
   /**
-   * Alert type. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Alert type.
    */
   type?: AlertTypeValue;
   /**
diff --git a/app/components/ContextMenu/ContextMenu.tsx b/app/components/modals/ContextMenu/ContextMenu.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenu.tsx
rename to app/components/modals/ContextMenu/ContextMenu.tsx
diff --git a/app/components/ContextMenu/ContextMenuDivider.tsx b/app/components/modals/ContextMenu/ContextMenuDivider.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenuDivider.tsx
rename to app/components/modals/ContextMenu/ContextMenuDivider.tsx
diff --git a/app/components/ContextMenu/ContextMenuSection.tsx b/app/components/modals/ContextMenu/ContextMenuSection.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenuSection.tsx
rename to app/components/modals/ContextMenu/ContextMenuSection.tsx
diff --git a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.container.tsx b/app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx
similarity index 91%
rename from app/components/ContextMenu/ContextMenuItem/ContextMenuItem.container.tsx
rename to app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx
index 23beff6..4d50ba5 100644
--- a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.container.tsx
+++ b/app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx
@@ -3,7 +3,6 @@
 import { forwardRef, memo, useCallback } from "react";
 import { ContextMenuItemView } from "./ContextMenuItem.view";
 import type { ContextMenuItemProps } from "./ContextMenuItem.types";
-import { normalizeContextMenuItemSize } from "../../../../lib/propNormalization";
 
 const ContextMenuItemContainer = forwardRef<
   HTMLDivElement,
@@ -22,8 +21,7 @@ const ContextMenuItemContainer = forwardRef<
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeContextMenuItemSize(sizeProp);
+    const size = sizeProp;
     const getTextSize = (): string => {
       switch (size) {
         case "small":
diff --git a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.types.ts b/app/components/modals/ContextMenuItem/ContextMenuItem.types.ts
similarity index 71%
rename from app/components/ContextMenu/ContextMenuItem/ContextMenuItem.types.ts
rename to app/components/modals/ContextMenuItem/ContextMenuItem.types.ts
index c78a934..27aadbe 100644
--- a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.types.ts
+++ b/app/components/modals/ContextMenuItem/ContextMenuItem.types.ts
@@ -1,10 +1,4 @@
-export type ContextMenuItemSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "Small"
-  | "Medium"
-  | "Large";
+export type ContextMenuItemSizeValue = "small" | "medium" | "large";
 
 export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -16,8 +10,7 @@ export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElemen
     _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
   /**
-   * Context menu item size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Context menu item size.
    */
   size?: ContextMenuItemSizeValue;
 }
diff --git a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.view.tsx b/app/components/modals/ContextMenuItem/ContextMenuItem.view.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenuItem/ContextMenuItem.view.tsx
rename to app/components/modals/ContextMenuItem/ContextMenuItem.view.tsx
diff --git a/app/components/ContextMenu/ContextMenuItem/index.tsx b/app/components/modals/ContextMenuItem/index.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenuItem/index.tsx
rename to app/components/modals/ContextMenuItem/index.tsx
diff --git a/app/components/modals/Login/LoginForm.tsx b/app/components/modals/Login/LoginForm.tsx
index b79e3b8..2276c84 100644
--- a/app/components/modals/Login/LoginForm.tsx
+++ b/app/components/modals/Login/LoginForm.tsx
@@ -9,7 +9,7 @@ import TextInput from "../../controls/TextInput";
 import ContentLockup from "../../type/ContentLockup";
 import { requestMagicLink } from "../../../../lib/create/api";
 import { safeInternalPath } from "../../../../lib/safeInternalPath";
-import { setTransferPendingFlag } from "../../../create/utils/anonymousDraftStorage";
+import { setTransferPendingFlag } from "../../../(app)/create/utils/anonymousDraftStorage";
 
 /** Mail icon for login modal (inline SVG; same pattern as InfoMessageBox ExclamationIconInline). */
 function MailIconInline() {
diff --git a/app/components/modals/Tooltip/Tooltip.container.tsx b/app/components/modals/Tooltip/Tooltip.container.tsx
index 4f278f3..1781f41 100644
--- a/app/components/modals/Tooltip/Tooltip.container.tsx
+++ b/app/components/modals/Tooltip/Tooltip.container.tsx
@@ -3,7 +3,6 @@
 import { memo, useState } from "react";
 import { TooltipView } from "./Tooltip.view";
 import type { TooltipProps } from "./Tooltip.types";
-import { normalizeTooltipPosition } from "../../../../lib/propNormalization";
 
 const TooltipContainer = memo<TooltipProps>(
   ({
@@ -13,8 +12,7 @@ const TooltipContainer = memo<TooltipProps>(
     className = "",
     disabled = false,
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const position = normalizeTooltipPosition(positionProp);
+    const position = positionProp;
     const [isVisible, setIsVisible] = useState(false);
 
     if (disabled) {
diff --git a/app/components/modals/Tooltip/Tooltip.types.ts b/app/components/modals/Tooltip/Tooltip.types.ts
index fc778ba..463b6b1 100644
--- a/app/components/modals/Tooltip/Tooltip.types.ts
+++ b/app/components/modals/Tooltip/Tooltip.types.ts
@@ -1,11 +1,10 @@
-export type TooltipPositionValue = "top" | "bottom" | "Top" | "Bottom";
+export type TooltipPositionValue = "top" | "bottom";
 
 export interface TooltipProps {
   children: React.ReactNode;
   text: string;
   /**
-   * Tooltip position. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Tooltip position.
    */
   position?: TooltipPositionValue;
   className?: string;
diff --git a/app/components/navigation/ConditionalFooter.tsx b/app/components/navigation/ConditionalFooter.tsx
deleted file mode 100644
index 4347e46..0000000
--- a/app/components/navigation/ConditionalFooter.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { usePathname } from "next/navigation";
-import dynamic from "next/dynamic";
-
-// Code split Footer - below the fold, can be lazy loaded
-const Footer = dynamic(() => import("./Footer"), {
-  loading: () => (
-    <footer className="bg-[var(--color-surface-default-primary)] w-full min-h-[200px]" />
-  ),
-  ssr: true, // Keep SSR for SEO
-});
-
-/**
- * Conditionally renders Footer based on pathname.
- * Hides footer for /create/* and /login (full-screen flows; no site chrome).
- */
-const ConditionalFooter = memo(() => {
-  const pathname = usePathname();
-  const isCreateFlow = pathname?.startsWith("/create");
-  const isLogin = pathname === "/login";
-
-  if (isCreateFlow || isLogin) {
-    return null;
-  }
-
-  return <Footer />;
-});
-
-ConditionalFooter.displayName = "ConditionalFooter";
-
-export default ConditionalFooter;
diff --git a/app/components/navigation/MenuBar.tsx b/app/components/navigation/MenuBar.tsx
index 803bfc0..50c7cbe 100644
--- a/app/components/navigation/MenuBar.tsx
+++ b/app/components/navigation/MenuBar.tsx
@@ -2,7 +2,6 @@
 
 import { memo } from "react";
 import { useTranslation } from "../../contexts/MessagesContext";
-import { normalizeMenuBarSize } from "../../../lib/propNormalization";
 
 export type MenuBarSizeValue =
   | "X Small"
@@ -23,7 +22,7 @@ interface MenuBarProps extends React.HTMLAttributes<HTMLElement> {
 
 const MenuBar = memo<MenuBarProps>(
   ({ children, className = "", size: sizeProp = "X Small", ...props }) => {
-    const size = normalizeMenuBarSize(sizeProp);
+    const size = sizeProp ?? "X Small";
     const t = useTranslation("menuBar");
 
     // Size styles based on Figma specifications
diff --git a/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx b/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx
index c2d6be7..cd232db 100644
--- a/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx
+++ b/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx
@@ -3,11 +3,6 @@
 import { memo } from "react";
 import MenuBarItemView from "./MenuBarItem.view";
 import type { MenuBarItemProps } from "./MenuBarItem.types";
-import {
-  normalizeMenuBarItemState,
-  normalizeMenuBarItemMode,
-  normalizeMenuBarItemSize,
-} from "../../../../lib/propNormalization";
 
 const MenuBarItemContainer = memo<MenuBarItemProps>(
   ({
@@ -24,9 +19,9 @@ const MenuBarItemContainer = memo<MenuBarItemProps>(
     ariaLabel,
     ...props
   }) => {
-    const state = normalizeMenuBarItemState(stateProp, "default");
-    const mode = normalizeMenuBarItemMode(modeProp, "default");
-    const size = normalizeMenuBarItemSize(sizeProp, "X Small");
+    const state = stateProp ?? "default";
+    const mode = modeProp ?? "default";
+    const size = sizeProp ?? "X Small";
 
     // Size styles based on Figma specifications
     const sizeStyles: Record<
diff --git a/app/components/navigation/NavigationItem/NavigationItem.container.tsx b/app/components/navigation/NavigationItem/NavigationItem.container.tsx
index 0e15c57..fdf7aa2 100644
--- a/app/components/navigation/NavigationItem/NavigationItem.container.tsx
+++ b/app/components/navigation/NavigationItem/NavigationItem.container.tsx
@@ -3,10 +3,6 @@
 import { memo } from "react";
 import NavigationItemView from "./NavigationItem.view";
 import type { NavigationItemProps } from "./NavigationItem.types";
-import {
-  normalizeNavigationItemVariant,
-  normalizeNavigationItemSize,
-} from "../../../../lib/propNormalization";
 
 const NavigationItemContainer = memo<NavigationItemProps>(
   ({
@@ -19,9 +15,8 @@ const NavigationItemContainer = memo<NavigationItemProps>(
     isActive = false,
     ...props
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeNavigationItemVariant(variantProp);
-    const size = normalizeNavigationItemSize(sizeProp);
+    const variant = variantProp;
+    const size = sizeProp;
     // Variant styles
     const variantStyles: Record<string, string> = {
       default:
diff --git a/app/components/navigation/NavigationItem/NavigationItem.types.ts b/app/components/navigation/NavigationItem/NavigationItem.types.ts
index e99e2cd..1f39227 100644
--- a/app/components/navigation/NavigationItem/NavigationItem.types.ts
+++ b/app/components/navigation/NavigationItem/NavigationItem.types.ts
@@ -1,9 +1,5 @@
-export type NavigationItemVariantValue = "default" | "Default";
-export type NavigationItemSizeValue =
-  | "default"
-  | "xsmall"
-  | "Default"
-  | "XSmall";
+export type NavigationItemVariantValue = "default";
+export type NavigationItemSizeValue = "default" | "xsmall";
 
 export interface NavigationItemProps extends Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -12,13 +8,11 @@ export interface NavigationItemProps extends Omit<
   href?: string;
   children?: React.ReactNode;
   /**
-   * Navigation item variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Navigation item variant.
    */
   variant?: NavigationItemVariantValue;
   /**
-   * Navigation item size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Navigation item size.
    */
   size?: NavigationItemSizeValue;
   className?: string;
diff --git a/app/components/progress/ProportionBar/ProportionBar.container.tsx b/app/components/progress/ProportionBar/ProportionBar.container.tsx
index 62cd255..a8d085e 100644
--- a/app/components/progress/ProportionBar/ProportionBar.container.tsx
+++ b/app/components/progress/ProportionBar/ProportionBar.container.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import { memo } from "react";
-import { normalizeProportionBarVariant } from "../../../../lib/propNormalization";
 import { ProportionBarView } from "./ProportionBar.view";
 import type { ProportionBarProps } from "./ProportionBar.types";
 
 const ProportionBarContainer = memo<ProportionBarProps>(
   ({ progress = "3-2", className = "", variant: variantProp }) => {
-    const variant = normalizeProportionBarVariant(variantProp);
+    const variant = variantProp ?? "default";
     const barClasses = `h-[8px] relative w-full`;
 
     return (
diff --git a/app/components/progress/ProportionBar/ProportionBar.types.ts b/app/components/progress/ProportionBar/ProportionBar.types.ts
index 970e708..c36b6da 100644
--- a/app/components/progress/ProportionBar/ProportionBar.types.ts
+++ b/app/components/progress/ProportionBar/ProportionBar.types.ts
@@ -22,8 +22,8 @@ export interface ProportionBarProps {
   className?: string;
   /**
    * Kept for backwards compatibility. Both `default` and `segmented` render the
-   * same fill geometry (square leading edges, matching Figma). Future variants
-   * can differentiate here without API changes.
+   * same fill geometry. Future variants can differentiate here without API
+   * changes.
    */
   variant?: ProportionBarVariant;
 }
diff --git a/app/components/sections/AskOrganizer/AskOrganizer.container.tsx b/app/components/sections/AskOrganizer/AskOrganizer.container.tsx
index 33c703b..a1bc8d6 100644
--- a/app/components/sections/AskOrganizer/AskOrganizer.container.tsx
+++ b/app/components/sections/AskOrganizer/AskOrganizer.container.tsx
@@ -8,7 +8,6 @@ import type {
   AskOrganizerProps,
   AskOrganizerVariant,
 } from "./AskOrganizer.types";
-import { normalizeAskOrganizerVariant } from "../../../../lib/propNormalization";
 
 const VARIANT_STYLES: Record<
   "centered" | "left-aligned" | "compact" | "inverse",
@@ -43,10 +42,7 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
     variant: variantProp = "centered",
     onContactClick,
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeAskOrganizerVariant(
-      variantProp,
-    ) as AskOrganizerVariant;
+    const variant = variantProp;
     const t = useTranslation();
     const defaultButtonText = buttonText ?? t("askOrganizer.buttonText");
     const defaultButtonHref = buttonHref ?? t("askOrganizer.buttonHref");
diff --git a/app/components/sections/AskOrganizer/AskOrganizer.types.ts b/app/components/sections/AskOrganizer/AskOrganizer.types.ts
index ed425f2..29c2bb7 100644
--- a/app/components/sections/AskOrganizer/AskOrganizer.types.ts
+++ b/app/components/sections/AskOrganizer/AskOrganizer.types.ts
@@ -4,11 +4,7 @@ export type AskOrganizerVariant =
   | "centered"
   | "left-aligned"
   | "compact"
-  | "inverse"
-  | "Centered"
-  | "Left-Aligned"
-  | "Compact"
-  | "Inverse";
+  | "inverse";
 
 export interface AskOrganizerProps {
   title?: string;
@@ -18,8 +14,7 @@ export interface AskOrganizerProps {
   buttonHref?: string;
   className?: string;
   /**
-   * Ask organizer variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Ask organizer variant.
    */
   variant?: AskOrganizerVariant;
   onContactClick?: (_data: {
diff --git a/app/components/sections/GovernanceTemplateGrid/index.ts b/app/components/sections/GovernanceTemplateGrid/index.tsx
similarity index 100%
rename from app/components/sections/GovernanceTemplateGrid/index.ts
rename to app/components/sections/GovernanceTemplateGrid/index.tsx
diff --git a/app/components/sections/QuoteBlock/QuoteBlock.container.tsx b/app/components/sections/QuoteBlock/QuoteBlock.container.tsx
index a88ebac..19737bf 100644
--- a/app/components/sections/QuoteBlock/QuoteBlock.container.tsx
+++ b/app/components/sections/QuoteBlock/QuoteBlock.container.tsx
@@ -4,7 +4,6 @@ import { memo, useState } from "react";
 import { logger } from "../../../../lib/logger";
 import QuoteBlockView from "./QuoteBlock.view";
 import type { QuoteBlockProps, VariantConfig } from "./QuoteBlock.types";
-import { normalizeQuoteBlockVariant } from "../../../../lib/propNormalization";
 
 const QuoteBlockContainer = memo<QuoteBlockProps>(
   ({
@@ -18,8 +17,7 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
     fallbackAvatarSrc = "/assets/Quote_Avatar.svg",
     onError,
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeQuoteBlockVariant(variantProp);
+    const variant = variantProp;
     const [imageError, setImageError] = useState(false);
     const [imageLoading, setImageLoading] = useState(true);
 
diff --git a/app/components/sections/QuoteBlock/QuoteBlock.types.ts b/app/components/sections/QuoteBlock/QuoteBlock.types.ts
index dc2555f..a339e05 100644
--- a/app/components/sections/QuoteBlock/QuoteBlock.types.ts
+++ b/app/components/sections/QuoteBlock/QuoteBlock.types.ts
@@ -1,15 +1,8 @@
-export type QuoteBlockVariantValue =
-  | "compact"
-  | "standard"
-  | "extended"
-  | "Compact"
-  | "Standard"
-  | "Extended";
+export type QuoteBlockVariantValue = "compact" | "standard" | "extended";
 
 export interface QuoteBlockProps {
   /**
-   * Quote block variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Quote block variant.
    */
   variant?: QuoteBlockVariantValue;
   className?: string;
diff --git a/app/components/sections/SectionHeader.tsx b/app/components/sections/SectionHeader.tsx
index 0a5224e..0d14e35 100644
--- a/app/components/sections/SectionHeader.tsx
+++ b/app/components/sections/SectionHeader.tsx
@@ -1,29 +1,19 @@
 "use client";
 
 import { memo } from "react";
-import { normalizeSectionHeaderVariant } from "../../../lib/propNormalization";
 
-export type SectionHeaderVariantValue =
-  | "default"
-  | "multi-line"
-  | "Default"
-  | "Multi-Line";
+export type SectionHeaderVariantValue = "default" | "multi-line";
 
 interface SectionHeaderProps {
   title: string;
   subtitle: string;
   titleLg?: string;
-  /**
-   * Section header variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
   variant?: SectionHeaderVariantValue;
 }
 
 const SectionHeader = memo<SectionHeaderProps>(
   ({ title, subtitle, titleLg, variant: variantProp = "default" }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeSectionHeaderVariant(variantProp);
+    const variant = variantProp;
     return (
       <div
         className={
diff --git a/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx b/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.container.tsx
similarity index 98%
rename from app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
rename to app/components/sections/WebVitalsDashboard/WebVitalsDashboard.container.tsx
index 9edf346..8f2d7ce 100644
--- a/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
+++ b/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.container.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { memo, useEffect, useState } from "react";
-import { logger } from "../../../lib/logger";
+import { logger } from "../../../../lib/logger";
 import WebVitalsDashboardView from "./WebVitalsDashboard.view";
 import type { Metrics, Vitals, VitalData } from "./WebVitalsDashboard.types";
 
diff --git a/app/components/WebVitalsDashboard/WebVitalsDashboard.types.ts b/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.types.ts
similarity index 100%
rename from app/components/WebVitalsDashboard/WebVitalsDashboard.types.ts
rename to app/components/sections/WebVitalsDashboard/WebVitalsDashboard.types.ts
diff --git a/app/components/WebVitalsDashboard/WebVitalsDashboard.view.tsx b/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.view.tsx
similarity index 100%
rename from app/components/WebVitalsDashboard/WebVitalsDashboard.view.tsx
rename to app/components/sections/WebVitalsDashboard/WebVitalsDashboard.view.tsx
diff --git a/app/components/WebVitalsDashboard/index.tsx b/app/components/sections/WebVitalsDashboard/index.tsx
similarity index 100%
rename from app/components/WebVitalsDashboard/index.tsx
rename to app/components/sections/WebVitalsDashboard/index.tsx
diff --git a/app/components/type/ContentLockup/ContentLockup.container.tsx b/app/components/type/ContentLockup/ContentLockup.container.tsx
index 6f25b72..b177734 100644
--- a/app/components/type/ContentLockup/ContentLockup.container.tsx
+++ b/app/components/type/ContentLockup/ContentLockup.container.tsx
@@ -3,10 +3,6 @@
 import { memo } from "react";
 import ContentLockupView from "./ContentLockup.view";
 import type { ContentLockupProps, VariantStyle } from "./ContentLockup.types";
-import {
-  normalizeContentLockupVariant,
-  normalizeAlignment,
-} from "../../../../lib/propNormalization";
 
 const ContentLockupContainer = memo<ContentLockupProps>(
   ({
@@ -21,9 +17,8 @@ const ContentLockupContainer = memo<ContentLockupProps>(
     alignment: alignmentProp = "center",
     titleId,
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeContentLockupVariant(variantProp);
-    const alignment = normalizeAlignment(alignmentProp);
+    const variant = variantProp;
+    const alignment = alignmentProp;
     // Variant-specific styling
     const variantStyles: Record<string, VariantStyle> = {
       hero: {
diff --git a/app/components/type/ContentLockup/ContentLockup.types.ts b/app/components/type/ContentLockup/ContentLockup.types.ts
index a0bce79..de4332a 100644
--- a/app/components/type/ContentLockup/ContentLockup.types.ts
+++ b/app/components/type/ContentLockup/ContentLockup.types.ts
@@ -5,16 +5,9 @@ export type ContentLockupVariantValue =
   | "ask"
   | "ask-inverse"
   | "modal"
-  | "login"
-  | "Hero"
-  | "Feature"
-  | "Learn"
-  | "Ask"
-  | "Ask-Inverse"
-  | "Modal"
-  | "Login";
+  | "login";
 
-export type ContentLockupAlignmentValue = "center" | "left" | "Center" | "Left";
+export type ContentLockupAlignmentValue = "center" | "left";
 
 export interface ContentLockupProps {
   title?: string;
@@ -24,15 +17,13 @@ export interface ContentLockupProps {
   ctaHref?: string;
   buttonClassName?: string;
   /**
-   * Content lockup variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Content lockup variant.
    */
   variant?: ContentLockupVariantValue;
   linkText?: string;
   linkHref?: string;
   /**
-   * Text alignment. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Text alignment.
    */
   alignment?: ContentLockupAlignmentValue;
   /**
diff --git a/app/components/type/HeaderLockup/HeaderLockup.container.tsx b/app/components/type/HeaderLockup/HeaderLockup.container.tsx
index 132037f..1376ae2 100644
--- a/app/components/type/HeaderLockup/HeaderLockup.container.tsx
+++ b/app/components/type/HeaderLockup/HeaderLockup.container.tsx
@@ -3,11 +3,6 @@
 import { memo } from "react";
 import HeaderLockupView from "./HeaderLockup.view";
 import type { HeaderLockupProps } from "./HeaderLockup.types";
-import {
-  normalizeHeaderLockupJustification,
-  normalizeHeaderLockupSize,
-  normalizeHeaderLockupPalette,
-} from "../../../../lib/propNormalization";
 
 const HeaderLockupContainer = memo<HeaderLockupProps>(
   ({
@@ -17,10 +12,9 @@ const HeaderLockupContainer = memo<HeaderLockupProps>(
     size: sizeProp = "L",
     palette: paletteProp = "default",
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const justification = normalizeHeaderLockupJustification(justificationProp);
-    const size = normalizeHeaderLockupSize(sizeProp);
-    const palette = normalizeHeaderLockupPalette(paletteProp);
+    const justification = justificationProp;
+    const size = sizeProp;
+    const palette = paletteProp;
 
     return (
       <HeaderLockupView
diff --git a/app/components/type/HeaderLockup/HeaderLockup.types.ts b/app/components/type/HeaderLockup/HeaderLockup.types.ts
index 44d07fa..d782a99 100644
--- a/app/components/type/HeaderLockup/HeaderLockup.types.ts
+++ b/app/components/type/HeaderLockup/HeaderLockup.types.ts
@@ -1,16 +1,8 @@
 import type { ReactNode } from "react";
 
-export type HeaderLockupJustificationValue =
-  | "left"
-  | "center"
-  | "Left"
-  | "Center";
-export type HeaderLockupSizeValue = "L" | "M" | "l" | "m";
-export type HeaderLockupPaletteValue =
-  | "default"
-  | "inverse"
-  | "Default"
-  | "Inverse";
+export type HeaderLockupJustificationValue = "left" | "center";
+export type HeaderLockupSizeValue = "L" | "M";
+export type HeaderLockupPaletteValue = "default" | "inverse";
 
 export interface HeaderLockupProps {
   /**
@@ -22,18 +14,15 @@ export interface HeaderLockupProps {
    */
   description?: ReactNode;
   /**
-   * Text justification. Accepts both PascalCase (Figma) and lowercase (codebase).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Text justification.
    */
   justification?: HeaderLockupJustificationValue;
   /**
-   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Size variant.
    */
   size?: HeaderLockupSizeValue;
   /**
-   * Palette. Default = light text (dark bg); Inverse = dark text (light bg).
-   * Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Palette. default = light text (dark bg); inverse = dark text (light bg).
    */
   palette?: HeaderLockupPaletteValue;
 }
diff --git a/app/components/type/NumberedList/NumberedList.container.tsx b/app/components/type/NumberedList/NumberedList.container.tsx
index e6a652d..e68bc0b 100644
--- a/app/components/type/NumberedList/NumberedList.container.tsx
+++ b/app/components/type/NumberedList/NumberedList.container.tsx
@@ -3,12 +3,10 @@
 import { memo } from "react";
 import NumberedListView from "./NumberedList.view";
 import type { NumberedListProps } from "./NumberedList.types";
-import { normalizeNumberedListSize } from "../../../../lib/propNormalization";
 
 const NumberedListContainer = memo<NumberedListProps>(
   ({ items, size: sizeProp = "M" }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeNumberedListSize(sizeProp);
+    const size = sizeProp;
 
     return <NumberedListView items={items} size={size} />;
   },
diff --git a/app/components/type/NumberedList/NumberedList.types.ts b/app/components/type/NumberedList/NumberedList.types.ts
index a65233c..e7bd7de 100644
--- a/app/components/type/NumberedList/NumberedList.types.ts
+++ b/app/components/type/NumberedList/NumberedList.types.ts
@@ -1,4 +1,4 @@
-export type NumberedListSizeValue = "M" | "S" | "m" | "s";
+export type NumberedListSizeValue = "M" | "S";
 
 export interface NumberedListItem {
   title: string;
@@ -11,8 +11,7 @@ export interface NumberedListProps {
    */
   items: NumberedListItem[];
   /**
-   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Size variant.
    */
   size?: NumberedListSizeValue;
 }
diff --git a/app/components/utility/AvatarContainer.tsx b/app/components/utility/AvatarContainer/AvatarContainer.tsx
similarity index 62%
rename from app/components/utility/AvatarContainer.tsx
rename to app/components/utility/AvatarContainer/AvatarContainer.tsx
index 8eb4ff1..d15fb94 100644
--- a/app/components/utility/AvatarContainer.tsx
+++ b/app/components/utility/AvatarContainer/AvatarContainer.tsx
@@ -1,30 +1,16 @@
 import { memo } from "react";
-import { normalizeSize } from "../../../lib/propNormalization";
 
-export type AvatarContainerSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "xlarge"
-  | "Small"
-  | "Medium"
-  | "Large"
-  | "XLarge";
+export type AvatarContainerSizeValue = "small" | "medium" | "large" | "xlarge";
 
 interface AvatarContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
-  /**
-   * Avatar container size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
   size?: AvatarContainerSizeValue;
   className?: string;
 }
 
 const AvatarContainer = memo<AvatarContainerProps>(
   ({ children, size: sizeProp = "small", className = "", ...props }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeSize(sizeProp, "small");
+    const size = sizeProp;
     const sizeStyles: Record<string, string> = {
       small: "flex -space-x-[var(--spacing-scale-008)]",
       medium: "flex -space-x-[9px]",
diff --git a/app/components/utility/AvatarContainer/index.tsx b/app/components/utility/AvatarContainer/index.tsx
new file mode 100644
index 0000000..b2db2e6
--- /dev/null
+++ b/app/components/utility/AvatarContainer/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./AvatarContainer";
+export type { AvatarContainerSizeValue } from "./AvatarContainer";
diff --git a/app/components/utility/CardStack/CardStack.container.tsx b/app/components/utility/CardStack/CardStack.container.tsx
index 7c07fee..ada2ef1 100644
--- a/app/components/utility/CardStack/CardStack.container.tsx
+++ b/app/components/utility/CardStack/CardStack.container.tsx
@@ -7,6 +7,10 @@ import type { CardStackProps } from "./CardStack.types";
 const DEFAULT_TOGGLE_LABEL = "See all communication approaches";
 const DEFAULT_SHOW_LESS_LABEL = "Show less";
 
+/**
+ * Figma: "Utility / CardStack" (TODO(figma)). Selectable stack of cards with
+ * an optional "see all"/"show less" expand toggle.
+ */
 const CardStackContainer = memo<CardStackProps>(
   ({
     cards,
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx b/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
index ff67759..c924229 100644
--- a/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
+++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
@@ -4,6 +4,10 @@ import { memo } from "react";
 import { CreateFlowFooterView } from "./CreateFlowFooter.view";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 
+/**
+ * Figma: "Utility / CreateFlowFooter" (TODO(figma)). Sticky footer for the
+ * create flow with a back action, optional secondary button, and progress bar.
+ */
 const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
   ({
     secondButton,
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx b/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
index 4ddf793..47265bb 100644
--- a/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
+++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
@@ -1,4 +1,3 @@
-import { normalizeProportionBarVariant } from "../../../../lib/propNormalization";
 import ProportionBar from "../../progress/ProportionBar";
 import Button from "../../buttons/Button";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
@@ -11,9 +10,7 @@ export function CreateFlowFooterView({
   onBackClick,
   className = "",
 }: CreateFlowFooterProps) {
-  const proportionBarVariant = normalizeProportionBarVariant(
-    proportionBarVariantProp,
-  );
+  const proportionBarVariant = proportionBarVariantProp ?? "default";
   return (
     <footer
       className={`bg-black w-full ${className}`}
diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
index 6e63804..81c513d 100644
--- a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
+++ b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
@@ -5,6 +5,10 @@ import { useRouter } from "next/navigation";
 import { CreateFlowTopNavView } from "./CreateFlowTopNav.view";
 import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
 
+/**
+ * Figma: "Utility / CreateFlowTopNav" (TODO(figma)). Top navigation bar for
+ * the create flow with exit, share, export, and edit actions.
+ */
 const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
   ({
     hasShare = false,
diff --git a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
index 74c687c..11b6180 100644
--- a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
+++ b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
@@ -3,11 +3,11 @@
 import { memo } from "react";
 import DecisionMakingSidebarView from "./DecisionMakingSidebar.view";
 import type { DecisionMakingSidebarProps } from "./DecisionMakingSidebar.types";
-import {
-  normalizeHeaderLockupJustification,
-  normalizeHeaderLockupSize,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Utility / DecisionMakingSidebar" (TODO(figma)). Sidebar pairing a
+ * header lockup with an `InfoMessageBox` checklist for decision-making screens.
+ */
 const DecisionMakingSidebarContainer = memo<DecisionMakingSidebarProps>(
   ({
     title,
@@ -20,8 +20,8 @@ const DecisionMakingSidebarContainer = memo<DecisionMakingSidebarProps>(
     justification: justificationProp = "left",
     className = "",
   }) => {
-    const size = normalizeHeaderLockupSize(sizeProp);
-    const justification = normalizeHeaderLockupJustification(justificationProp);
+    const size = sizeProp;
+    const justification = justificationProp;
 
     return (
       <DecisionMakingSidebarView
diff --git a/app/components/utility/ErrorBoundary.tsx b/app/components/utility/ErrorBoundary.tsx
deleted file mode 100644
index 12379c3..0000000
--- a/app/components/utility/ErrorBoundary.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-
-import React, { Component, type ReactNode } from "react";
-import { logger } from "../../../lib/logger";
-
-interface ErrorBoundaryProps {
-  children: ReactNode;
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    // Update state so the next render will show the fallback UI
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    // Log the error to an error reporting service
-    logger.error("ErrorBoundary caught an error:", error, errorInfo);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      // Fallback UI using design tokens
-      return (
-        <div className="min-h-[200px] flex items-center justify-center p-[var(--spacing-scale-016)]">
-          <div className="text-center">
-            <h2 className="text-xl font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-008)]">
-              Something went wrong
-            </h2>
-            <p className="text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-016)]">
-              We&apos;re sorry, but something unexpected happened.
-            </p>
-            <button
-              onClick={() => this.setState({ hasError: false, error: null })}
-              className="px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] bg-[var(--color-surface-default-brand-royal)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] hover:bg-[var(--color-surface-hover-brand-royal)] transition-colors"
-            >
-              Try again
-            </button>
-          </div>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;
diff --git a/app/components/utility/ImagePlaceholder.tsx b/app/components/utility/ImagePlaceholder.tsx
deleted file mode 100644
index a88c232..0000000
--- a/app/components/utility/ImagePlaceholder.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { normalizeImagePlaceholderColor } from "../../../lib/propNormalization";
-
-export type ImagePlaceholderColorValue =
-  | "blue"
-  | "green"
-  | "purple"
-  | "red"
-  | "orange"
-  | "teal"
-  | "Blue"
-  | "Green"
-  | "Purple"
-  | "Red"
-  | "Orange"
-  | "Teal";
-
-interface ImagePlaceholderProps {
-  width?: number;
-  height?: number;
-  text?: string;
-  /**
-   * Image placeholder color. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
-  color?: ImagePlaceholderColorValue;
-  className?: string;
-}
-
-/**
- * Simple image placeholder component for testing
- * Generates colored backgrounds with text overlays
- */
-const ImagePlaceholder = memo<ImagePlaceholderProps>(
-  ({
-    width = 260,
-    height = 390,
-    text = "Blog Image",
-    color: colorProp = "blue",
-    className = "",
-  }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const color = normalizeImagePlaceholderColor(colorProp);
-    const colors: Record<string, string> = {
-      blue: "bg-blue-500",
-      green: "bg-green-500",
-      purple: "bg-purple-500",
-      red: "bg-red-500",
-      orange: "bg-orange-500",
-      teal: "bg-teal-500",
-    };
-
-    const bgColor = colors[color] || colors.blue;
-
-    return (
-      <div
-        className={`${bgColor} flex items-center justify-center text-white font-bold text-lg ${className}`}
-        style={{ width: `${width}px`, height: `${height}px` }}
-      >
-        {text}
-      </div>
-    );
-  },
-);
-
-ImagePlaceholder.displayName = "ImagePlaceholder";
-
-export default ImagePlaceholder;
diff --git a/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx b/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
index 763d8ee..83309a7 100644
--- a/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
+++ b/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
@@ -4,6 +4,10 @@ import { memo, useCallback, useState } from "react";
 import InfoMessageBoxView from "./InfoMessageBox.view";
 import type { InfoMessageBoxProps } from "./InfoMessageBox.types";
 
+/**
+ * Figma: "Utility / InfoMessageBox" (TODO(figma)). Bordered message box that
+ * lists checkbox items under a title with an optional leading icon.
+ */
 const InfoMessageBoxContainer = memo<InfoMessageBoxProps>(
   ({
     title,
diff --git a/app/components/utility/InputLabel/InputLabel.container.tsx b/app/components/utility/InputLabel/InputLabel.container.tsx
index a5d09e4..8679f6e 100644
--- a/app/components/utility/InputLabel/InputLabel.container.tsx
+++ b/app/components/utility/InputLabel/InputLabel.container.tsx
@@ -3,23 +3,23 @@
 import { memo } from "react";
 import InputLabelView from "./InputLabel.view";
 import type { InputLabelProps } from "./InputLabel.types";
-import {
-  normalizeInputLabelSize,
-  normalizeInputLabelPalette,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Utility / InputLabel" (TODO(figma)). Reusable form-input label with
+ * optional asterisk, help icon, and helper text.
+ */
 const InputLabelContainer = memo<InputLabelProps>(
   ({
     label,
     helpIcon = false,
     asterisk = false,
     helperText = false,
-    size: sizeProp = "S",
-    palette: paletteProp = "Default",
+    size: sizeProp = "s",
+    palette: paletteProp = "default",
     className = "",
   }) => {
-    const size = normalizeInputLabelSize(sizeProp);
-    const palette = normalizeInputLabelPalette(paletteProp);
+    const size = sizeProp;
+    const palette = paletteProp;
 
     return (
       <InputLabelView
diff --git a/app/components/utility/InputLabel/InputLabel.types.ts b/app/components/utility/InputLabel/InputLabel.types.ts
index ca6c139..e434aaf 100644
--- a/app/components/utility/InputLabel/InputLabel.types.ts
+++ b/app/components/utility/InputLabel/InputLabel.types.ts
@@ -1,9 +1,5 @@
-export type InputLabelSizeValue = "S" | "M" | "s" | "m";
-export type InputLabelPaletteValue =
-  | "Default"
-  | "Inverse"
-  | "default"
-  | "inverse";
+export type InputLabelSizeValue = "s" | "m";
+export type InputLabelPaletteValue = "default" | "inverse";
 
 export interface InputLabelProps {
   /**
@@ -25,13 +21,11 @@ export interface InputLabelProps {
    */
   helperText?: boolean | string;
   /**
-   * Size variant: "S" (small) or "M" (medium)
-   * Accepts both uppercase (Figma) and lowercase values.
+   * Size variant: "s" (small) or "m" (medium)
    */
   size?: InputLabelSizeValue;
   /**
-   * Palette variant: "Default" or "Inverse"
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Palette variant: "default" or "inverse"
    */
   palette?: InputLabelPaletteValue;
   className?: string;
diff --git a/app/components/utility/ModalFooter/ModalFooter.container.tsx b/app/components/utility/ModalFooter/ModalFooter.container.tsx
new file mode 100644
index 0000000..e6a2556
--- /dev/null
+++ b/app/components/utility/ModalFooter/ModalFooter.container.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { memo } from "react";
+import { ModalFooterView } from "./ModalFooter.view";
+import type { ModalFooterProps } from "./ModalFooter.types";
+
+/**
+ * Figma: "Utility / ModalFooter" (TODO(figma)).
+ * Sticky modal footer slot used by the create-flow + login modals to host
+ * primary/secondary actions.
+ */
+const ModalFooterContainer = memo<ModalFooterProps>((props) => {
+  return <ModalFooterView {...props} />;
+});
+
+ModalFooterContainer.displayName = "ModalFooter";
+
+export default ModalFooterContainer;
diff --git a/app/components/utility/ModalFooter/index.tsx b/app/components/utility/ModalFooter/index.tsx
index b722de4..0ed8ee8 100644
--- a/app/components/utility/ModalFooter/index.tsx
+++ b/app/components/utility/ModalFooter/index.tsx
@@ -1,2 +1,2 @@
-export { ModalFooterView as default } from "./ModalFooter.view";
+export { default } from "./ModalFooter.container";
 export type { ModalFooterProps } from "./ModalFooter.types";
diff --git a/app/components/utility/ModalHeader/ModalHeader.container.tsx b/app/components/utility/ModalHeader/ModalHeader.container.tsx
new file mode 100644
index 0000000..b0da587
--- /dev/null
+++ b/app/components/utility/ModalHeader/ModalHeader.container.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { memo } from "react";
+import { ModalHeaderView } from "./ModalHeader.view";
+import type { ModalHeaderProps } from "./ModalHeader.types";
+
+/**
+ * Figma: "Utility / ModalHeader" (TODO(figma)).
+ * Sticky 48px modal header with optional close (left) and more-options
+ * (right) icon buttons.
+ */
+const ModalHeaderContainer = memo<ModalHeaderProps>((props) => {
+  return <ModalHeaderView {...props} />;
+});
+
+ModalHeaderContainer.displayName = "ModalHeader";
+
+export default ModalHeaderContainer;
diff --git a/app/components/utility/ModalHeader/index.tsx b/app/components/utility/ModalHeader/index.tsx
index a26925f..3ef272c 100644
--- a/app/components/utility/ModalHeader/index.tsx
+++ b/app/components/utility/ModalHeader/index.tsx
@@ -1,2 +1,2 @@
-export { ModalHeaderView as default } from "./ModalHeader.view";
+export { default } from "./ModalHeader.container";
 export type { ModalHeaderProps } from "./ModalHeader.types";
diff --git a/app/components/utility/Scrollbar/Scrollbar.container.tsx b/app/components/utility/Scrollbar/Scrollbar.container.tsx
new file mode 100644
index 0000000..e5c16e7
--- /dev/null
+++ b/app/components/utility/Scrollbar/Scrollbar.container.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { memo } from "react";
+import { ScrollbarView } from "./Scrollbar.view";
+import type { ScrollbarProps } from "./Scrollbar.types";
+
+/**
+ * Figma: "Utility / Scrollbar" (TODO(figma)).
+ * Custom-styled scrollable wrapper. Most surfaces should attach
+ * `SCROLLBAR_DESIGN_CLASS` directly instead of nesting through this view.
+ */
+const ScrollbarContainer = memo<ScrollbarProps>((props) => {
+  return <ScrollbarView {...props} />;
+});
+
+ScrollbarContainer.displayName = "Scrollbar";
+
+export default ScrollbarContainer;
diff --git a/app/components/utility/Scrollbar/index.tsx b/app/components/utility/Scrollbar/index.tsx
index bc9e054..d4032ab 100644
--- a/app/components/utility/Scrollbar/index.tsx
+++ b/app/components/utility/Scrollbar/index.tsx
@@ -1,4 +1,4 @@
-export { ScrollbarView as default } from "./Scrollbar.view";
+export { default } from "./Scrollbar.container";
 export type { ScrollbarProps } from "./Scrollbar.types";
 
 /** Class name to apply the design system scrollbar to any scrollable element (e.g. textarea, div). */
diff --git a/app/components/utility/Separator.tsx b/app/components/utility/Separator/Separator.tsx
similarity index 100%
rename from app/components/utility/Separator.tsx
rename to app/components/utility/Separator/Separator.tsx
diff --git a/app/components/utility/Separator/index.tsx b/app/components/utility/Separator/index.tsx
new file mode 100644
index 0000000..8234c76
--- /dev/null
+++ b/app/components/utility/Separator/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Separator";
diff --git a/app/components/utility/Tag/Tag.container.tsx b/app/components/utility/Tag/Tag.container.tsx
index 4eef24b..d36c36c 100644
--- a/app/components/utility/Tag/Tag.container.tsx
+++ b/app/components/utility/Tag/Tag.container.tsx
@@ -9,6 +9,10 @@ const DEFAULT_LABELS: Record<TagProps["variant"], string> = {
   selected: "SELECTED",
 };
 
+/**
+ * Figma: "Utility / Tag" (TODO(figma)). Small status pill (e.g. "RECOMMENDED"
+ * or "SELECTED") used to annotate cards and options.
+ */
 const TagContainer = memo<TagProps>(({ variant, children, className = "" }) => {
   const content = children ?? DEFAULT_LABELS[variant];
   return (
diff --git a/app/contexts/MessagesContext.tsx b/app/contexts/MessagesContext.tsx
index cb17c37..963429d 100644
--- a/app/contexts/MessagesContext.tsx
+++ b/app/contexts/MessagesContext.tsx
@@ -2,6 +2,7 @@
 
 import { createContext, useContext, type ReactNode } from "react";
 import type messages from "../../messages/en/index";
+import { getTranslation } from "../../lib/i18n/getTranslation";
 
 type Messages = typeof messages;
 
@@ -31,27 +32,6 @@ export function useMessages(): Messages {
   return messages;
 }
 
-/**
- * Get a translation value from messages using dot notation
- * @param messages - The messages object
- * @param key - Dot-separated key path (e.g., "heroBanner.title")
- * @returns The translation string or the key if not found
- */
-function getTranslationValue(messages: Messages, key: string): string {
-  const keys = key.split(".");
-  let value: unknown = messages;
-
-  for (const k of keys) {
-    if (value && typeof value === "object" && k in value) {
-      value = (value as Record<string, unknown>)[k];
-    } else {
-      return key; // Fallback to key if path not found
-    }
-  }
-
-  return typeof value === "string" ? value : key;
-}
-
 /**
  * Custom translation hook for client components
  * @param namespace - Optional namespace to scope translations (e.g., "footer")
@@ -61,11 +41,7 @@ export function useTranslation(namespace?: string) {
   const messages = useMessages();
 
   return (key: string): string => {
-    if (namespace) {
-      // If namespace is provided, prepend it to the key
-      const fullKey = `${namespace}.${key}`;
-      return getTranslationValue(messages, fullKey);
-    }
-    return getTranslationValue(messages, key);
+    const fullKey = namespace ? `${namespace}.${key}` : key;
+    return getTranslation(messages, fullKey);
   };
 }
diff --git a/app/hooks/index.ts b/app/hooks/index.ts
index 188245c..b139d4d 100644
--- a/app/hooks/index.ts
+++ b/app/hooks/index.ts
@@ -10,7 +10,6 @@ export { useClickOutside } from "./useClickOutside";
 export { useAnalytics } from "./useAnalytics";
 export { useComponentId } from "./useComponentId";
 export { useFormField } from "./useFormField";
-export { useComponentStyles } from "./useComponentStyles";
 export { useSchemaData } from "./useSchemaData";
 export {
   useMediaQuery,
@@ -18,12 +17,6 @@ export {
   useIsDesktop,
   BREAKPOINTS,
 } from "./useMediaQuery";
-export { useFormValidation, validationRules } from "./useFormValidation";
-export type {
-  SizeStyleConfig,
-  StateStyleConfig,
-  UseComponentStylesOptions,
-} from "./useComponentStyles";
 export type {
   SchemaOrganization,
   SchemaWebSite,
@@ -31,8 +24,3 @@ export type {
   SchemaArticle,
   SchemaBreadcrumbList,
 } from "./useSchemaData";
-export type {
-  ValidationRule,
-  FieldValidation,
-  UseFormValidationOptions,
-} from "./useFormValidation";
diff --git a/app/hooks/useComponentStyles.ts b/app/hooks/useComponentStyles.ts
deleted file mode 100644
index a4aa882..0000000
--- a/app/hooks/useComponentStyles.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useMemo } from "react";
-
-/**
- * Configuration for component size styles
- */
-export interface SizeStyleConfig {
-  [key: string]: string | Record<string, string>;
-}
-
-/**
- * Configuration for component state styles
- */
-export interface StateStyleConfig {
-  [key: string]: string | Record<string, string>;
-}
-
-/**
- * Options for useComponentStyles hook
- */
-export interface UseComponentStylesOptions {
-  size: string;
-  state?: string;
-  disabled?: boolean;
-  error?: boolean;
-  sizeStyles: SizeStyleConfig;
-  stateStyles: StateStyleConfig;
-  getStateStyles?: (_params: {
-    state?: string;
-    disabled: boolean;
-    error: boolean;
-  }) => Record<string, string>;
-}
-
-/**
- * Hook for managing component size and state styles
- * Provides a consistent pattern for styling components based on size, state, and error/disabled status
- *
- * @param options - Configuration object with size, state, and style definitions
- *
- * @returns Object with computed style classes
- *
- * @example
- * ```tsx
- * const sizeStyles = {
- *   small: { input: "h-8 text-xs", label: "text-xs" },
- *   medium: { input: "h-10 text-sm", label: "text-sm" },
- * };
- *
- * const stateStyles = {
- *   default: { input: "border-gray-300", label: "text-gray-700" },
- *   focus: { input: "border-blue-500", label: "text-gray-700" },
- * };
- *
- * const { sizeClasses, stateClasses } = useComponentStyles({
- *   size: "medium",
- *   state: "default",
- *   disabled: false,
- *   error: false,
- *   sizeStyles,
- *   stateStyles,
- * });
- * ```
- */
-export function useComponentStyles(options: UseComponentStylesOptions): {
-  sizeClasses: Record<string, string>;
-  stateClasses: Record<string, string>;
-} {
-  const {
-    size,
-    state = "default",
-    disabled = false,
-    error = false,
-    sizeStyles,
-    stateStyles,
-    getStateStyles,
-  } = options;
-
-  const sizeClasses = useMemo(() => {
-    const sizeConfig = sizeStyles[size] || sizeStyles.medium || {};
-    return typeof sizeConfig === "string"
-      ? { base: sizeConfig }
-      : (sizeConfig as Record<string, string>);
-  }, [size, sizeStyles]);
-
-  const stateClasses = useMemo(() => {
-    if (getStateStyles) {
-      return getStateStyles({ state, disabled, error });
-    }
-
-    // Default state style resolution
-    if (disabled) {
-      return (stateStyles.disabled || {}) as Record<string, string>;
-    }
-
-    if (error) {
-      return (stateStyles.error || {}) as Record<string, string>;
-    }
-
-    const stateConfig = stateStyles[state] || stateStyles.default || {};
-    return typeof stateConfig === "string"
-      ? { base: stateConfig }
-      : (stateConfig as Record<string, string>);
-  }, [state, disabled, error, stateStyles, getStateStyles]);
-
-  return {
-    sizeClasses,
-    stateClasses,
-  };
-}
diff --git a/app/hooks/useFormValidation.ts b/app/hooks/useFormValidation.ts
deleted file mode 100644
index a46abab..0000000
--- a/app/hooks/useFormValidation.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-import { useState, useCallback, useMemo } from "react";
-
-/**
- * Validation rule function type
- */
-export type ValidationRule<T = string> = (_value: T) => string | null;
-
-/**
- * Validation rules for common patterns
- */
-export const validationRules = {
-  required: (value: unknown): string | null => {
-    if (value === null || value === undefined || value === "") {
-      return "This field is required";
-    }
-    return null;
-  },
-
-  email: (value: string): string | null => {
-    if (!value) return null; // Let required handle empty values
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(value) ? null : "Please enter a valid email address";
-  },
-
-  minLength:
-    (min: number) =>
-    (value: string): string | null => {
-      if (!value) return null;
-      return value.length >= min
-        ? null
-        : `Must be at least ${min} characters long`;
-    },
-
-  maxLength:
-    (max: number) =>
-    (value: string): string | null => {
-      if (!value) return null;
-      return value.length <= max
-        ? null
-        : `Must be no more than ${max} characters long`;
-    },
-
-  pattern:
-    (regex: RegExp, message: string) =>
-    (value: string): string | null => {
-      if (!value) return null;
-      return regex.test(value) ? null : message;
-    },
-};
-
-/**
- * Form field validation state
- */
-export interface FieldValidation {
-  value: string;
-  error: string | null;
-  touched: boolean;
-  dirty: boolean;
-}
-
-/**
- * Options for useFormValidation hook
- */
-export interface UseFormValidationOptions {
-  initialValues: Record<string, string>;
-  validationRules?: Record<string, ValidationRule[]>;
-  validateOnChange?: boolean;
-  validateOnBlur?: boolean;
-}
-
-/**
- * Hook for form validation
- * Provides validation state and handlers for form fields
- *
- * @param options - Configuration object with initial values and validation rules
- *
- * @returns Object with validation state, handlers, and utilities
- *
- * @example
- * ```tsx
- * const {
- *   values,
- *   errors,
- *   touched,
- *   handleChange,
- *   handleBlur,
- *   validate,
- *   isValid,
- * } = useFormValidation({
- *   initialValues: { email: "", password: "" },
- *   validationRules: {
- *     email: [validationRules.required, validationRules.email],
- *     password: [validationRules.required, validationRules.minLength(8)],
- *   },
- * });
- *
- * <input
- *   value={values.email}
- *   onChange={handleChange}
- *   onBlur={handleBlur}
- *   name="email"
- * />
- * {errors.email && <span>{errors.email}</span>}
- * ```
- */
-export function useFormValidation(options: UseFormValidationOptions) {
-  const {
-    initialValues,
-    validationRules: rules = {},
-    validateOnChange = true,
-    validateOnBlur = true,
-  } = options;
-
-  const [values, setValues] = useState<Record<string, string>>(initialValues);
-  const [touched, setTouched] = useState<Record<string, boolean>>({});
-  const [errors, setErrors] = useState<Record<string, string | null>>({});
-
-  // Validate a single field
-  const validateField = useCallback(
-    (name: string, value: string): string | null => {
-      const fieldRules = rules[name] || [];
-      for (const rule of fieldRules) {
-        const error = rule(value);
-        if (error) return error;
-      }
-      return null;
-    },
-    [rules],
-  );
-
-  // Validate all fields
-  const validate = useCallback((): boolean => {
-    const newErrors: Record<string, string | null> = {};
-    let isValid = true;
-
-    Object.keys(values).forEach((name) => {
-      const error = validateField(name, values[name]);
-      if (error) {
-        newErrors[name] = error;
-        isValid = false;
-      } else {
-        newErrors[name] = null;
-      }
-    });
-
-    setErrors(newErrors);
-    return isValid;
-  }, [values, validateField]);
-
-  // Handle field change
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const { name, value } = e.target;
-      setValues((prev) => ({ ...prev, [name]: value }));
-
-      if (validateOnChange) {
-        const error = validateField(name, value);
-        setErrors((prev) => ({ ...prev, [name]: error }));
-      }
-    },
-    [validateOnChange, validateField],
-  );
-
-  // Handle field blur
-  const handleBlur = useCallback(
-    (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const { name } = e.target;
-      setTouched((prev) => ({ ...prev, [name]: true }));
-
-      if (validateOnBlur) {
-        const error = validateField(name, values[name]);
-        setErrors((prev) => ({ ...prev, [name]: error }));
-      }
-    },
-    [validateOnBlur, validateField, values],
-  );
-
-  // Check if form is valid
-  const isValid = useMemo(() => {
-    return Object.values(errors).every((error) => error === null);
-  }, [errors]);
-
-  // Reset form
-  const reset = useCallback(() => {
-    setValues(initialValues);
-    setTouched({});
-    setErrors({});
-  }, [initialValues]);
-
-  // Set field value programmatically
-  const setValue = useCallback(
-    (name: string, value: string) => {
-      setValues((prev) => ({ ...prev, [name]: value }));
-      if (validateOnChange) {
-        const error = validateField(name, value);
-        setErrors((prev) => ({ ...prev, [name]: error }));
-      }
-    },
-    [validateOnChange, validateField],
-  );
-
-  return {
-    values,
-    errors,
-    touched,
-    handleChange,
-    handleBlur,
-    validate,
-    isValid,
-    reset,
-    setValue,
-  };
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index 8d778f5..a961aca 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,7 +6,6 @@ import { MessagesProvider } from "./contexts/MessagesContext";
 import messages from "../messages/en/index";
 import "./globals.css";
 import ConditionalNavigation from "./components/navigation/ConditionalNavigation";
-import ConditionalFooter from "./components/navigation/ConditionalFooter";
 
 /** Header reads `cr_session` via Server Components; must not use prerendered guest HTML. */
 export const dynamic = "force-dynamic";
@@ -105,8 +104,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           <AuthModalProvider>
             <div className="min-h-screen flex flex-col">
               <ConditionalNavigation />
-              <main className="flex-1">{children}</main>
-              <ConditionalFooter />
+              {children}
             </div>
           </AuthModalProvider>
         </MessagesProvider>
diff --git a/docs/CUSTOM_HOOKS.md b/docs/CUSTOM_HOOKS.md
deleted file mode 100644
index 3353673..0000000
--- a/docs/CUSTOM_HOOKS.md
+++ /dev/null
@@ -1,381 +0,0 @@
-# Custom Hooks Documentation
-
-This document provides comprehensive documentation for all custom hooks available in the project.
-
-## Overview
-
-Custom hooks encapsulate reusable logic and patterns across components, improving code organization, maintainability, and consistency.
-
-## Available Hooks
-
-### `useClickOutside`
-
-Detects clicks outside of specified elements. Useful for closing dropdowns, modals, or menus.
-
-**Location:** `app/hooks/useClickOutside.ts`
-
-**Usage:**
-
-```tsx
-import { useClickOutside } from "../hooks";
-
-const menuRef = useRef<HTMLDivElement>(null);
-const buttonRef = useRef<HTMLButtonElement>(null);
-const [isOpen, setIsOpen] = useState(false);
-
-useClickOutside([menuRef, buttonRef], () => setIsOpen(false), isOpen);
-```
-
-**Parameters:**
-
-- `refs`: Array of refs to elements that should not trigger the callback
-- `handler`: Callback function to execute when clicking outside
-- `enabled`: Whether the hook is enabled (default: true)
-
-**Example:** Used in `Select.tsx` for closing dropdown menus
-
----
-
-### `useAnalytics`
-
-Centralized analytics tracking for component interactions. Supports both Google Analytics (gtag) and custom callbacks.
-
-**Location:** `app/hooks/useAnalytics.ts`
-
-**Usage:**
-
-```tsx
-import { useAnalytics } from "../hooks";
-
-const { trackEvent, trackCustomEvent } = useAnalytics();
-
-// Standard event tracking
-trackEvent({
-  event: "button_click",
-  category: "engagement",
-  label: "contact_button",
-  component: "AskOrganizer",
-});
-
-// Custom event with callback
-trackCustomEvent(
-  "contact_button_click",
-  {
-    component: "AskOrganizer",
-    variant: "centered",
-  },
-  onContactClick, // Optional callback
-);
-```
-
-**Returns:**
-
-- `trackEvent`: Function to track standard analytics events
-- `trackCustomEvent`: Function to track custom events with optional callback
-
-**Example:** Used in `AskOrganizer.tsx` for tracking button clicks
-
----
-
-### `useComponentId`
-
-Generates unique component IDs for accessibility. Provides consistent ID generation pattern.
-
-**Location:** `app/hooks/useComponentId.ts`
-
-**Usage:**
-
-```tsx
-import { useComponentId } from "../hooks";
-
-const { id, labelId } = useComponentId("input", props.id);
-// id: "input-123" or props.id if provided
-// labelId: "input-123-label"
-```
-
-**Parameters:**
-
-- `prefix`: Prefix for the generated ID (e.g., "input", "select")
-- `providedId`: Optional ID provided via props (takes precedence)
-
-**Returns:**
-
-- `id`: Component ID
-- `labelId`: Associated label ID for accessibility
-
-**Example:** Used in `Input.tsx`, `TextArea.tsx`, `Checkbox.tsx`
-
----
-
-### `useFormField`
-
-Manages form field event handlers with disabled state handling. Ensures handlers respect disabled state.
-
-**Location:** `app/hooks/useFormField.ts`
-
-**Usage:**
-
-```tsx
-import { useFormField } from "../hooks";
-
-const { handleChange, handleFocus, handleBlur } = useFormField(disabled, {
-  onChange: (e) => setValue(e.target.value),
-  onFocus: (e) => setFocused(true),
-  onBlur: (e) => setFocused(false),
-});
-
-// Use in component
-<input onChange={handleChange} onFocus={handleFocus} onBlur={handleBlur} />;
-```
-
-**Parameters:**
-
-- `disabled`: Whether the field is disabled
-- `handlers`: Object containing onChange, onFocus, onBlur handlers
-
-**Returns:**
-
-- `handleChange`: Wrapped onChange handler
-- `handleFocus`: Wrapped onFocus handler
-- `handleBlur`: Wrapped onBlur handler
-
-**Example:** Used in `Input.tsx`, `TextArea.tsx`
-
----
-
-### `useComponentStyles`
-
-Manages component size and state styles. Provides a consistent pattern for styling components.
-
-**Location:** `app/hooks/useComponentStyles.ts`
-
-**Usage:**
-
-```tsx
-import { useComponentStyles } from "../hooks";
-
-const sizeStyles = {
-  small: { input: "h-8 text-xs", label: "text-xs" },
-  medium: { input: "h-10 text-sm", label: "text-sm" },
-};
-
-const stateStyles = {
-  default: { input: "border-gray-300", label: "text-gray-700" },
-  focus: { input: "border-blue-500", label: "text-gray-700" },
-};
-
-const { sizeClasses, stateClasses } = useComponentStyles({
-  size: "medium",
-  state: "default",
-  disabled: false,
-  error: false,
-  sizeStyles,
-  stateStyles,
-});
-```
-
-**Note:** This hook is available but styling logic is often component-specific. Consider using it when you have multiple components with similar styling patterns.
-
----
-
-### `useSchemaData`
-
-Generates Schema.org structured data (JSON-LD) for SEO and search engines.
-
-**Location:** `app/hooks/useSchemaData.ts`
-
-**Usage:**
-
-```tsx
-import { useSchemaData } from "../hooks";
-
-// HowTo schema
-const schemaData = useSchemaData({
-  type: "HowTo",
-  name: "How to build a community",
-  description: "Step-by-step guide",
-  steps: [
-    { name: "Step 1", text: "Start here" },
-    { name: "Step 2", text: "Continue here" },
-  ],
-});
-
-// Organization schema
-const orgSchema = useSchemaData({
-  type: "Organization",
-  name: "Media Economies Design Lab",
-  url: "https://communityrule.com",
-  email: "medlab@colorado.edu",
-  sameAs: ["https://twitter.com/medlab"],
-});
-
-// Render in component
-<script
-  type="application/ld+json"
-  dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
-/>;
-```
-
-**Supported Types:**
-
-- `Organization` - Organization information
-- `WebSite` - Website navigation and search
-- `HowTo` - Step-by-step instructions
-- `Article` - Blog posts and articles
-- `BreadcrumbList` - Navigation breadcrumbs
-
-**Example:** Used in `NumberedCards.tsx`, `Header.tsx`, `Footer.tsx`
-
----
-
-### `useMediaQuery`
-
-Responsive breakpoint detection using window.matchMedia.
-
-**Location:** `app/hooks/useMediaQuery.ts`
-
-**Usage:**
-
-```tsx
-import { useMediaQuery, useIsMobile, useIsDesktop } from "../hooks";
-
-// Using breakpoint key
-const isMobile = useMediaQuery("lg", "max");
-// Returns true if screen width < 1024px
-
-// Using custom query
-const isDesktop = useMediaQuery("(min-width: 1024px)");
-
-// Convenience hooks
-const isMobile = useIsMobile(); // Below lg breakpoint
-const isDesktop = useIsDesktop(); // lg breakpoint and above
-```
-
-**Available Breakpoints:**
-
-- `sm`: 640px
-- `md`: 768px
-- `lg`: 1024px
-- `xl`: 1280px
-- `2xl`: 1536px
-
-**Example:** Used in `RelatedArticles.tsx` for responsive behavior
-
----
-
-### `useFormValidation`
-
-Form validation with field-level error handling.
-
-**Location:** `app/hooks/useFormValidation.ts`
-
-**Usage:**
-
-```tsx
-import { useFormValidation, validationRules } from "../hooks";
-
-const {
-  values,
-  errors,
-  touched,
-  handleChange,
-  handleBlur,
-  validate,
-  isValid,
-  reset,
-} = useFormValidation({
-  initialValues: { email: "", password: "" },
-  validationRules: {
-    email: [validationRules.required, validationRules.email],
-    password: [validationRules.required, validationRules.minLength(8)],
-  },
-  validateOnChange: true,
-  validateOnBlur: true,
-});
-
-// In component
-<input
-  name="email"
-  value={values.email}
-  onChange={handleChange}
-  onBlur={handleBlur}
-/>;
-{
-  errors.email && touched.email && <span>{errors.email}</span>;
-}
-```
-
-**Available Validation Rules:**
-
-- `validationRules.required` - Field is required
-- `validationRules.email` - Valid email format
-- `validationRules.minLength(n)` - Minimum length
-- `validationRules.maxLength(n)` - Maximum length
-- `validationRules.pattern(regex, message)` - Custom regex pattern
-
-**Returns:**
-
-- `values` - Current form values
-- `errors` - Field error messages
-- `touched` - Fields that have been interacted with
-- `handleChange` - Change handler
-- `handleBlur` - Blur handler
-- `validate` - Manual validation function
-- `isValid` - Boolean indicating if form is valid
-- `reset` - Reset form to initial values
-- `setValue` - Programmatically set field value
-
----
-
-## Best Practices
-
-1. **Import from index:** Always import hooks from `app/hooks` index file:
-
-   ```tsx
-   import { useAnalytics, useComponentId } from "../hooks";
-   ```
-
-2. **TypeScript:** All hooks are fully typed. Use TypeScript for better IDE support.
-
-3. **Testing:** Hooks should be tested independently. See `tests/unit/hooks/` for examples.
-
-4. **Documentation:** When creating new hooks, add JSDoc comments and update this documentation.
-
-5. **Performance:** Hooks use `useMemo` and `useCallback` where appropriate to prevent unnecessary re-renders.
-
-## Refactored Components
-
-The following components have been refactored to use custom hooks:
-
-- **Select** - Uses `useClickOutside` (now uses Container/Presentation pattern)
-- **AskOrganizer** - Uses `useAnalytics` (now uses Container/Presentation pattern)
-- **Input.tsx** - Uses `useComponentId` and `useFormField`
-- **TextArea.tsx** - Uses `useComponentId` and `useFormField`
-- **Checkbox.tsx** - Uses `useComponentId`
-- **NumberedCards** - Uses `useSchemaData` (now uses Container/Presentation pattern)
-- **RelatedArticles.tsx** - Uses `useIsMobile`
-
-> **Note**: Components marked with "Container/Presentation pattern" have been refactored to separate logic (container) from presentation (view). Hooks are used in the container components. See [Container/Presentation Pattern Guide](./guides/container-presentation-pattern.md) for details.
-
-## Adding New Hooks
-
-When creating a new hook:
-
-1. Create the hook file in `app/hooks/`
-2. Export it from `app/hooks/index.ts`
-3. Add JSDoc comments with examples
-4. Write unit tests in `tests/unit/hooks/`
-5. Update this documentation
-6. Refactor at least one component to use it as a proof of concept
-
-## Testing
-
-All hooks have unit tests in `tests/unit/hooks/`. Run tests with:
-
-```bash
-npm test -- tests/unit/hooks
-```
-
-## See Also
-
-- [React Hooks Documentation](https://react.dev/reference/react) - Official React hooks documentation
diff --git a/docs/README.md b/docs/README.md
index 6ff9adc..79b4c7f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,76 +1,41 @@
 # Documentation
 
-This directory contains project documentation organized by topic.
+User-facing docs. Implementation conventions live in `.cursor/rules/`.
 
-## Documentation Structure
+## Canonical references
 
-### Core Documentation
+- [create-flow.md](./create-flow.md) — Custom create-rule wizard: stages,
+  URLs, persistence. Source of truth for product/eng alignment.
+- [testing-guide.md](./testing-guide.md) — Testing philosophy and what to
+  cover at each layer.
 
-- **[TESTING_GUIDE.md](./TESTING_GUIDE.md)** - Complete testing guide covering component tests, E2E tests, accessibility, and testing philosophy
-- **[CUSTOM_HOOKS.md](./CUSTOM_HOOKS.md)** - Documentation for all custom React hooks used in the project
+## Author guides (`guides/`)
 
-### Guides (`guides/`)
+- [content-creation.md](./guides/content-creation.md) — Writing and
+  publishing blog posts.
+- [i18n-translation-workflow.md](./guides/i18n-translation-workflow.md) —
+  Editing UI copy and translation bundles.
 
-- **[container-presentation-pattern.md](./guides/container-presentation-pattern.md)** - Container/Presentation pattern guide for component architecture
-- **[content-creation.md](./guides/content-creation.md)** - Guide for creating blog content
-- **[i18n-translation-workflow.md](./guides/i18n-translation-workflow.md)** - Guide for working with translations and UI content management
+## Temporary backend planning
 
-## Quick Navigation
+These will be deleted once the backend services are stood up:
 
-### For Testing
+- [guides/backend-roadmap.md](./guides/backend-roadmap.md)
+- [guides/backend-linear-tickets.md](./guides/backend-linear-tickets.md)
+- [guides/template-recommendation-matrix.md](./guides/template-recommendation-matrix.md)
 
-Start with **[TESTING_GUIDE.md](./TESTING_GUIDE.md)** for:
+## Cursor rules
 
-- Testing philosophy and approach
-- Component testing with `componentTestSuite`
-- E2E testing with Playwright
-- Accessibility testing
-- How to add tests for new components
+Implementation contracts are enforced by `.cursor/rules/*.mdc`:
 
-### For Custom Hooks
-
-See **[CUSTOM_HOOKS.md](./CUSTOM_HOOKS.md)** for:
-
-- Available custom hooks
-- Usage examples
-- API documentation
-
-### For Component Architecture
-
-See **[container-presentation-pattern.md](./guides/container-presentation-pattern.md)** for:
-
-- Container/Presentation pattern overview
-- When and how to use the pattern
-- Migration guide for existing components
-- Best practices and examples
-
-### For Content Creation
-
-See **[content-creation.md](./guides/content-creation.md)** for:
-
-- How to create blog articles
-- Content guidelines
-- Contribution workflow
-
-### For Translations and UI Content
-
-See **[i18n-translation-workflow.md](./guides/i18n-translation-workflow.md)** for:
-
-- How to update UI text content
-- Translation key structure and naming conventions
-- How to extract strings from components
-- How to add new translation keys
-- Best practices for content creators and developers
-
-## Additional Resources
-
-- **Vitest Documentation**: https://vitest.dev/
-- **Playwright Documentation**: https://playwright.dev/
-- **React Testing Library**: https://testing-library.com/
-- **Lighthouse CI**: https://github.com/GoogleChrome/lighthouse-ci
-- **Next.js Documentation**: https://nextjs.org/docs
-
----
-
-**Last Updated**: January 2025  
-**Maintained by**: CommunityRule Development Team
+| Rule | Scope |
+| --- | --- |
+| `component-structure.mdc` | 4-file split (container/view/types/index). |
+| `component-props.mdc` | Lowercase enum prop convention + Figma traceability. |
+| `tailwind-styling.mdc` | Token usage and class composition. |
+| `localization.mdc` | `messages/` bundles and `useMessages()`. |
+| `testing.mdc` | Test layout, helpers, required imports. |
+| `storybook.mdc` | Story location and `argTypes` patterns. |
+| `hooks.mdc` | Custom hook authoring + TSDoc as the API reference. |
+| `create-flow.mdc` | Wizard step / screen registry conventions. |
+| `api-routes.mdc` | API route handler conventions. |
diff --git a/docs/TESTING_GUIDE.md b/docs/TESTING_GUIDE.md
deleted file mode 100644
index 0a35865..0000000
--- a/docs/TESTING_GUIDE.md
+++ /dev/null
@@ -1,266 +0,0 @@
-## Testing Guide
-
-### Philosophy
-
-- **Test behaviour, not implementation**: Focus on what the user can see and do, not internal details.
-- **Single source of truth per component**: Each component should have **one consolidated test file**.
-- **Accessibility is mandatory**: Basic a11y checks run as part of every component suite.
-- **E2E is sparse**: Only cover critical user journeys that span pages or systems.
-
-### Test Structure
-
-The test directory structure is organized as follows:
-
-```text
-tests/
-  components/           # All component-focused tests (Vitest + RTL)
-    Button.test.tsx
-    Input.test.tsx
-    Checkbox.test.tsx
-    Select.test.tsx
-    Switch.test.tsx
-  pages/                # Page-level tests (home, blog, etc.)
-    home.test.jsx
-    blog.test.jsx
-  e2e/                  # True end‑to‑end flows + visual regression (Playwright)
-    critical-journeys.spec.ts    # Main user journeys (homepage, navigation, interactions)
-    visual-regression.spec.ts   # Critical page screenshots only (5 tests)
-    edge-cases.spec.ts          # Critical error scenarios (4 tests)
-    performance.spec.ts          # Essential performance checks (2 tests)
-  utils/                # Shared test utilities
-    componentTestSuite.tsx
-  msw/                  # MSW server setup for mocking
-    server.ts
-  accessibility/
-    e2e/                # E2E accessibility checks (WCAG compliance)
-      wcag-compliance.spec.ts
-```
-
-**Component tests** (`tests/components/`) use the standard `componentTestSuite` utility to ensure consistent baseline coverage for all UI components. **Page tests** (`tests/pages/`) cover page-level rendering and flows. **E2E tests** (`tests/e2e/`) focus on critical user journeys, visual regression, and performance. **Accessibility E2E** (`tests/accessibility/e2e/`) provides high-level WCAG compliance checks.
-
-### E2E Testing Philosophy
-
-E2E tests follow a **sparse, critical-path approach** optimized for open source projects:
-
-- **Focus on user value**: Test critical user journeys that span multiple pages or systems, not individual component interactions
-- **Maintainability over coverage**: Keep tests maintainable and contributor-friendly rather than comprehensive
-- **Visual regression is minimal**: Only capture screenshots of major pages (homepage, blog listing/post, 404), not every component or viewport
-- **Performance monitoring is essential**: Track homepage load and Core Web Vitals, but detailed performance analysis is handled by Lighthouse CI
-- **Edge cases are critical only**: Test scenarios that would break user experience (slow network, offline mode, JS errors, missing images)
-
-This approach reduces test maintenance burden while ensuring critical functionality remains stable.
-
-### Standard Component Test Suite
-
-Use the shared suite in `tests/utils/componentTestSuite.tsx` to get a consistent baseline:
-
-```ts
-import Component from "../../app/components/Component";
-import {
-  componentTestSuite,
-  type ComponentTestSuiteConfig,
-} from "../utils/componentTestSuite";
-
-type Props = React.ComponentProps<typeof Component>;
-
-const config: ComponentTestSuiteConfig<Props> = {
-  component: Component,
-  name: "Component",
-  props: {
-    /* default props */
-  } as Props,
-  requiredProps: ["label"],
-  optionalProps: {
-    disabled: true,
-  },
-  queries: {
-    getPrimaryElement: (s) => s.getByRole("button"),
-  },
-  variants: {
-    disabled: {
-      props: { disabled: true },
-      assert: (el) => {
-        expect(el).toBeDisabled();
-      },
-    },
-    error: {
-      props: { error: true } as Partial<Props>,
-      assert: (el) => {
-        expect(el).toHaveClass(
-          "border-[var(--color-border-default-utility-negative)]",
-        );
-      },
-    },
-  },
-  testCases: {
-    renders: true,
-    accessibility: true,
-    keyboardNavigation: true,
-    disabledState: true,
-    errorState: true,
-  },
-};
-
-componentTestSuite<Props>(config);
-```
-
-#### What the Standard Suite Covers
-
-- **Rendering**
-  - Component renders without throwing using the provided `props`.
-  - Required props are present and do not break rendering.
-  - Optional props can be applied without breaking.
-
-- **Accessibility**
-  - Runs `axe` against the rendered output.
-  - Fails on common WCAG 2.1 issues (roles, labels, contrast, etc.).
-
-- **Keyboard Navigation**
-  - Ensures the primary element can receive focus.
-  - Smoke‑tests basic keyboard activation (`Enter`, `Space`) without runtime errors.
-
-- **Disabled State**
-  - Uses `variants.disabled` to verify disabled behaviour (e.g., `aria-disabled`, `disabled` attribute, tab index).
-
-- **Error State**
-  - Uses `variants.error` to verify error styling/attributes when applicable.
-
-### When to Add Custom Tests
-
-Use the standard suite for **baseline coverage**, then add custom `describe` blocks in the same file when:
-
-- The component has **important variants** (different sizes, modes, label variants).
-- There is **non‑trivial interaction** (menus, dropdowns, complex keyboard behaviour).
-- You need to exercise **stateful flows** (forms, validation, error messages).
-
-Example (inside the same `*.test.tsx` file):
-
-```ts
-describe("Input – behaviour specifics", () => {
-  it("calls onChange when user types", async () => {
-    // ...
-  });
-});
-```
-
-### Test Commands
-
-- **All component tests** (Vitest + RTL):
-
-  ```bash
-  npm test
-  ```
-
-- **Component-only tests** (faster inner loop, focused on `tests/components/`):
-
-  ```bash
-  npm run test:component
-  # filter by name:
-  npm run test:component -- --run tests/components/Button.test.tsx
-  ```
-
-- **E2E tests only** (Playwright):
-
-  ```bash
-  npm run test:e2e
-  # or, equivalently:
-  npm run e2e
-  ```
-
-### What to Test vs. What Not to Test
-
-- **Do test**
-  - Public behaviour: visible text, roles, labels, ARIA, keyboard paths.
-  - State transitions that users rely on (error -> success, disabled -> enabled).
-  - Critical component interactions (clicks, form submissions, dropdown selection).
-  - Accessibility invariants (no axe violations, basic keyboard support).
-
-- **Avoid testing**
-  - Pure styling details that are likely to change frequently (exact shadow radius, minor spacing).
-  - Internal implementation details (private helpers, hook internals, memoisation specifics).
-  - Responsive visibility in JSDOM (use Playwright visual / responsive tests instead).
-
-### Adding Tests for a New Component (≈5 minutes)
-
-1. **Create the component file** in `app/components/`.
-2. **Create a test file** in `tests/components/ComponentName.test.tsx`.
-3. **Wire the standard suite** using `componentTestSuite`.
-4. **Add 1–3 custom tests** for any unique behaviours.
-5. Run:
-
-   ```bash
-   npm run test:component -- --run tests/components/ComponentName.test.tsx
-   ```
-
-### E2E and Visual Regression
-
-E2E tests are organized into focused files:
-
-- **`critical-journeys.spec.ts`**: Main user journeys (homepage loads, navigation, key interactions)
-- **`visual-regression.spec.ts`**: Critical page screenshots only (homepage full/viewport, blog listing/post, 404)
-- **`edge-cases.spec.ts`**: Critical error scenarios (slow network, offline mode, JS errors, missing images)
-- **`performance.spec.ts`**: Essential performance checks (homepage load, Core Web Vitals)
-
-**Commands:**
-
-```bash
-# Run all E2E tests
-npm run test:e2e
-
-# Run visual regression tests only
-npm run visual:test
-
-# Update visual regression snapshots (after UI changes)
-npm run visual:update
-
-# Run specific test file
-npx playwright test tests/e2e/critical-journeys.spec.ts
-```
-
-**When to add E2E tests:**
-
-- **Add E2E tests** when:
-  - A new critical user journey is introduced (e.g., new multi-step flow)
-  - A major page is added that needs visual regression coverage
-  - A critical error scenario needs to be tested (e.g., payment failure, form submission errors)
-
-- **Don't add E2E tests** for:
-  - Component-level interactions (use component tests instead)
-  - Single-page functionality (use page tests instead)
-  - Minor UI changes (visual regression will catch major regressions)
-  - Edge cases that don't impact core user experience
-
-**Visual regression snapshots:**
-
-Visual regression tests capture screenshots of critical pages. When UI changes are intentional, update snapshots:
-
-```bash
-npm run visual:update
-```
-
-This updates snapshots for all 5 critical page tests. Review the changes carefully before committing.
-
-### Storybook
-
-**Storybook is used for component documentation and visual review only.** It is not used for automated testing.
-
-- Component tests (`tests/components/*.test.tsx`) provide all test coverage previously handled by Storybook test-runner
-- Storybook stories (`stories/*.stories.js`) serve as living documentation and visual examples
-- Interaction functions are inlined in story files for demonstration purposes
-- Run Storybook locally with `npm run storybook` for component development and review
-
-### Accessibility Testing
-
-Accessibility is tested at two levels:
-
-1. **Component-level accessibility** (`tests/components/*.test.tsx`):
-   - Automatically covered by `componentTestSuite` using `jest-axe`
-   - Tests roles, labels, ARIA attributes, keyboard navigation
-   - Runs as part of every component test suite
-
-2. **Full-page accessibility** (`tests/accessibility/e2e/wcag-compliance.spec.ts`):
-   - E2E tests using Playwright and `@axe-core/playwright`
-   - Validates WCAG 2.1 AA compliance across entire pages
-   - Tests complete user journeys for accessibility barriers
-
-This two-tier approach ensures both individual components and full page experiences meet accessibility standards.
diff --git a/docs/create-flow.md b/docs/create-flow.md
index 94e3d2b..319d47b 100644
--- a/docs/create-flow.md
+++ b/docs/create-flow.md
@@ -1,20 +1,20 @@
 # Create rule flow (custom wizard) — canonical reference
 
-Product/engineering reference for the **custom** “Create rule” experience: URL order, persistence, and entry points. **Implementation work** to align code with this doc (progress bar, resume redirects, etc.) is tracked in Linear **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** and [docs/backend-linear-tickets.md](backend-linear-tickets.md) **Ticket 17**.
+Product/engineering reference for the **custom** “Create rule” experience: URL order, persistence, and entry points. **Implementation work** to align code with this doc (progress bar, resume redirects, etc.) is tracked in Linear **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** and [docs/guides/backend-linear-tickets.md](guides/backend-linear-tickets.md) **Ticket 17**.
 
 ---
 
 ## Product stages (Figma)
 
-The Figma **Create Community** sequence is the **source of truth** for the first segment of the wizard (eight frames). After **`review`**, the flow continues with **Create Custom CommunityRule** and **Review and complete** stages. The shipped URL sequence in [`FLOW_STEP_ORDER`](../app/create/utils/flowSteps.ts) **follows that trajectory**; stages are a **product** slice of that linear order, not separate routers today.
+The Figma **Create Community** sequence is the **source of truth** for the first segment of the wizard (eight frames). After **`review`**, the flow continues with **Create Custom CommunityRule** and **Review and complete** stages. The shipped URL sequence in [`FLOW_STEP_ORDER`](../app/(app)/create/utils/flowSteps.ts) **follows that trajectory**; stages are a **product** slice of that linear order, not separate routers today.
 
 | Stage (Figma) | Purpose (summary) | `CreateFlowStep` values (in order) |
 | --- | --- | --- |
 | **Create Community** | Intro, naming, structure, context, size, upload, save progress (email), then community review. | `informational` → `community-name` → `community-structure` → `community-context` → `community-size` → `community-upload` → `community-save` → `review` |
-| **Create Custom CommunityRule** | Author the CommunityRule content and structure. | `core-values` → `communication-methods` → `right-rail` (further card-stack steps get their own `screenId` and `screens/card/*Screen.tsx`; `right-rail` uses `layoutKind: "right-rail"`) |
+| **Create Custom CommunityRule** | Author the CommunityRule content and structure (core values + four card-stack categories). | `core-values` → `communication-methods` → `membership-methods` → `decision-approaches` → `conflict-management` |
 | **Review and complete** | Stakeholders, final card, publish, success. | `confirm-stakeholders` → `final-review` → `completed` |
 
-Treat these stages as the **canonical product sections** when adding chrome (e.g. stage headers, progress copy), breaking work across teams, or reusing flows in other surfaces. **Layout kind** is **not** encoded in the URL; it lives in [`CREATE_FLOW_SCREEN_REGISTRY`](../app/create/utils/createFlowScreenRegistry.ts) (Figma node id + `layoutKind` per step). Figma defines eight layout kinds: **informational**, **text**, **select**, **upload**, **review**, **card**, **right-rail**, **completed** — `CreateFlowLayoutKind` and [`app/create/screens/`](../app/create/screens/) mirror that list (one folder per kind; multiple steps may share a kind, e.g. several **select** screens).
+Treat these stages as the **canonical product sections** when adding chrome (e.g. stage headers, progress copy), breaking work across teams, or reusing flows in other surfaces. **Layout kind** is **not** encoded in the URL; it lives in [`CREATE_FLOW_SCREEN_REGISTRY`](../app/(app)/create/utils/createFlowScreenRegistry.ts) (Figma node id + `layoutKind` per step). Figma defines eight layout kinds: **informational**, **text**, **select**, **upload**, **review**, **card**, **right-rail**, **completed** — `CreateFlowLayoutKind` and [`app/(app)/create/screens/`](../app/(app)/create/screens/) mirror that list (one folder per kind; multiple steps may share a kind, e.g. several **select** screens).
 
 **Create from template (future):** A full **template-driven** create path is **not** finalized; it will likely live on **additional route(s)** (and may reuse these stages where it overlaps the custom trajectory). Today, **`/create/review-template/[slug]`** is only an auxiliary **preview** in the create shell; it is **not** a Figma stage and not the final template-create entry. See **Out of scope** in [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo).
 
@@ -22,7 +22,7 @@ Treat these stages as the **canonical product sections** when adding chrome (e.g
 
 ## Step order and URLs
 
-Order is defined in code by [`FLOW_STEP_ORDER`](../app/create/utils/flowSteps.ts) and the [`CreateFlowStep`](../app/create/types.ts) type. Wizard steps use a **single dynamic route**: [`app/create/[screenId]/page.tsx`](../app/create/[screenId]/page.tsx), which validates `screenId` and renders [`CreateFlowScreenView`](../app/create/screens/CreateFlowScreenView.tsx). Implementation files are grouped under [`app/create/screens/`](../app/create/screens/) by Figma **layout kind** (subfolders: informational, text, select, upload, review, card, right-rail, completed). **`/create`** redirects to the first step.
+Order is defined in code by [`FLOW_STEP_ORDER`](../app/(app)/create/utils/flowSteps.ts) and the [`CreateFlowStep`](../app/(app)/create/types.ts) type. Wizard steps use a **single dynamic route**: [`app/(app)/create/[screenId]/page.tsx`](../app/(app)/create/[screenId]/page.tsx), which validates `screenId` and renders [`CreateFlowScreenView`](../app/(app)/create/screens/CreateFlowScreenView.tsx). Implementation files are grouped under [`app/(app)/create/screens/`](../app/(app)/create/screens/) by Figma **layout kind** (subfolders: informational, text, select, upload, review, card, right-rail, completed). **`/create`** redirects to the first step.
 
 | Order | Figma stage | Step ID (`screenId`) | Path |
 | ----: | ----------- | -------------------- | ---- |
@@ -36,14 +36,16 @@ Order is defined in code by [`FLOW_STEP_ORDER`](../app/create/utils/flowSteps.ts
 | 8 | Create Community (review frame) | `review` | `/create/review` |
 | 9 | Create Custom CommunityRule | `core-values` | `/create/core-values` |
 | 10 | Create Custom CommunityRule | `communication-methods` | `/create/communication-methods` |
-| 11 | Create Custom CommunityRule | `right-rail` | `/create/right-rail` |
-| 12 | Review and complete | `confirm-stakeholders` | `/create/confirm-stakeholders` |
-| 13 | Review and complete | `final-review` | `/create/final-review` |
-| 14 | Review and complete | `completed` | `/create/completed` |
+| 11 | Create Custom CommunityRule | `membership-methods` | `/create/membership-methods` |
+| 12 | Create Custom CommunityRule | `decision-approaches` | `/create/decision-approaches` |
+| 13 | Create Custom CommunityRule | `conflict-management` | `/create/conflict-management` |
+| 14 | Review and complete | `confirm-stakeholders` | `/create/confirm-stakeholders` |
+| 15 | Review and complete | `final-review` | `/create/final-review` |
+| 16 | Review and complete | `completed` | `/create/completed` |
 
 **Primary entry:** marketing header “Create rule” navigates to **`/create`**, which redirects to **`/create/informational`** (see [`TopNav.container.tsx`](../app/components/navigation/TopNav/TopNav.container.tsx)).
 
-Active step for chrome and navigation is resolved from the pathname via [`parseCreateFlowScreenFromPathname`](../app/create/utils/flowSteps.ts) inside [`useCreateFlowNavigation`](../app/create/hooks/useCreateFlowNavigation.ts).
+Active step for chrome and navigation is resolved from the pathname via [`parseCreateFlowScreenFromPathname`](../app/(app)/create/utils/flowSteps.ts) inside [`useCreateFlowNavigation`](../app/(app)/create/hooks/useCreateFlowNavigation.ts).
 
 ---
 
@@ -61,10 +63,10 @@ From that page, **Customize** currently navigates to `/create/informational?temp
 
 | Mode | Where progress lives | Save & Exit / server draft |
 | --- | --- | --- |
-| **Anonymous** | `localStorage` key **`create-flow-anonymous`** | **Exit** opens save-progress magic link; after verify, optional **PUT** `/api/drafts/me` when `NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` (see Tickets 4–5 in [backend-linear-tickets.md](backend-linear-tickets.md)). |
+| **Anonymous** | `localStorage` key **`create-flow-anonymous`** | **Exit** opens save-progress magic link; after verify, optional **PUT** `/api/drafts/me` when `NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` (see Tickets 4–5 in [guides/backend-linear-tickets.md](guides/backend-linear-tickets.md)). |
 | **Signed-in** | In-memory React state in **`CreateFlowContext`** | **Save & Exit** from the **`community-structure`** step onward (step index ≥ `community-structure`) may **PUT** `/api/drafts/me` when sync is on. **Sign out** is on profile, not in the create top nav. |
 
-Details and edge cases (conflict confirm, banners, `?syncDraft=1`) match **Ticket 4**, **Ticket 5**, and [`docs/backend-roadmap.md`](backend-roadmap.md) §12.
+Details and edge cases (conflict confirm, banners, `?syncDraft=1`) match **Ticket 4**, **Ticket 5**, and [`docs/guides/backend-roadmap.md`](guides/backend-roadmap.md) §12.
 
 ---
 
@@ -77,5 +79,5 @@ Details and edge cases (conflict confirm, banners, `?syncDraft=1`) match **Ticke
 
 ## Related docs
 
-- [docs/backend-roadmap.md](backend-roadmap.md) §12 — Frontend hook-up  
-- [docs/backend-linear-tickets.md](backend-linear-tickets.md) — Tickets 4, 5, 6, 17  
+- [docs/guides/backend-roadmap.md](guides/backend-roadmap.md) §12 — Frontend hook-up
+- [docs/guides/backend-linear-tickets.md](guides/backend-linear-tickets.md) — Tickets 4, 5, 6, 17
diff --git a/docs/backend-linear-tickets.md b/docs/guides/backend-linear-tickets.md
similarity index 86%
rename from docs/backend-linear-tickets.md
rename to docs/guides/backend-linear-tickets.md
index a1eb795..4c15acd 100644
--- a/docs/backend-linear-tickets.md
+++ b/docs/guides/backend-linear-tickets.md
@@ -86,7 +86,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Depends on:** Ticket 1 (optional but keeps docs honest).
 
-**Goal:** Replace the open `[key: string]: unknown` shape in [app/create/types.ts](app/create/types.ts) with real fields (or nested objects) agreed with design/product, and validate JSON on the server for drafts and publish.
+**Goal:** Replace the open `[key: string]: unknown` shape in [app/(app)/create/types.ts](app/(app)/create/types.ts) with real fields (or nested objects) agreed with design/product, and validate JSON on the server for drafts and publish.
 
 **Context:** `PUT /api/drafts/me` and `POST /api/rules` accept loose objects today; oversized or malformed payloads are a stability and security concern.
 
@@ -107,7 +107,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Status:** [CR-73](https://linear.app/community-rule/issue/CR-73/backend-formalize-createflowstate-validate-draftpublish-api-payloads) **Done**.
 
-**Files:** [app/create/types.ts](app/create/types.ts), [app/api/drafts/me/route.ts](app/api/drafts/me/route.ts), [app/api/rules/route.ts](app/api/rules/route.ts), [lib/server/validation/](lib/server/validation/) (Zod + plain-JSON checks), [package.json](package.json) (`zod`).
+**Files:** [app/(app)/create/types.ts](app/(app)/create/types.ts), [app/api/drafts/me/route.ts](app/api/drafts/me/route.ts), [app/api/rules/route.ts](app/api/rules/route.ts), [lib/server/validation/](lib/server/validation/) (Zod + plain-JSON checks), [package.json](package.json) (`zod`).
 
 **Note:** Repo-wide **API error JSON shape** and **request-id logging** are **Ticket 13 / CR-84**—coordinate 400 response bodies with that issue so validation errors match the agreed `{ error: { code, message } }` pattern.
 
@@ -125,12 +125,12 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Implementation (shipped):**
 
-1. **`/login`** route **and** **header modal** — primary **Log in** entry is [`AuthModalProvider`](app/contexts/AuthModalContext.tsx) + [app/components/modals/Login/](app/components/modals/Login/); [app/login/page.tsx](app/login/page.tsx) (solid shell, `usePortal={false}`) remains for verify **error** redirects and bookmarks.
+1. **`/login`** route **and** **header modal** — primary **Log in** entry is [`AuthModalProvider`](app/contexts/AuthModalContext.tsx) + [app/components/modals/Login/](app/components/modals/Login/); [app/(app)/login/page.tsx](app/(app)/login/page.tsx) (solid shell, `usePortal={false}`) remains for verify **error** redirects and bookmarks.
 2. Flow: email → “Send link” → user opens link (email, Mailhog, or dev log) → `GET /api/auth/magic-link/verify?token=...` sets session and redirects; optional `next` for post-login path.
 3. Surface API errors: invalid email, 429 `retryAfterMs`, expired/invalid token, network failure (accessible copy).
 4. Ensure `fetch` calls use `credentials: "include"` where needed (see [lib/create/api.ts](lib/create/api.ts)).
 5. **Dev:** without `SMTP_URL`, verify URL is logged; with Mailhog, use [docker-compose.yml](docker-compose.yml) and `SMTP_URL=smtp://localhost:1025`.
-6. **Marketing header:** When signed in (`fetchAuthSession`), **Log in** becomes **Profile** linking to [`/profile`](app/profile/page.tsx) (placeholder until Ticket 15 / CR-86). Implemented in [TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx) + [TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx).
+6. **Marketing header:** When signed in (`fetchAuthSession`), **Log in** becomes **Profile** linking to [`/profile`](app/(app)/profile/page.tsx) (placeholder until Ticket 15 / CR-86). Implemented in [TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx) + [TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx).
 
 **Acceptance criteria:**
 
@@ -141,7 +141,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Status:** [CR-74](https://linear.app/community-rule/issue/CR-74/backend-magic-link-sign-in-ui-apis-ticket-3-cr-75-done) **Done** for shipped UI/APIs. **Residual checklist** below: repo doc items are **done**; use Linear (CR-74 or child issue) to track **per-environment** staging URL checks.
 
-**Files:** [app/login/](app/login/), [app/profile/](app/profile/) (placeholder), [app/components/modals/Login/](app/components/modals/Login/), [messages/en/pages/login.json](messages/en/pages/login.json), [messages/en/pages/profile.json](messages/en/pages/profile.json), [messages/en/components/header.json](messages/en/components/header.json), [app/components/navigation/TopNav/TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx), [app/components/navigation/TopNav/TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx), [lib/create/api.ts](lib/create/api.ts), [app/api/auth/magic-link/request/route.ts](app/api/auth/magic-link/request/route.ts), [app/api/auth/magic-link/verify/route.ts](app/api/auth/magic-link/verify/route.ts), [prisma/schema.prisma](prisma/schema.prisma) (`MagicLinkToken`), [lib/server/mail.ts](lib/server/mail.ts). Onboarding: [CONTRIBUTING.md](CONTRIBUTING.md), [`.env.example`](.env.example).
+**Files:** [app/(app)/login/](app/(app)/login/), [app/(app)/profile/](app/(app)/profile/) (placeholder), [app/components/modals/Login/](app/components/modals/Login/), [messages/en/pages/login.json](messages/en/pages/login.json), [messages/en/pages/profile.json](messages/en/pages/profile.json), [messages/en/components/header.json](messages/en/components/header.json), [app/components/navigation/TopNav/TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx), [app/components/navigation/TopNav/TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx), [lib/create/api.ts](lib/create/api.ts), [app/api/auth/magic-link/request/route.ts](app/api/auth/magic-link/request/route.ts), [app/api/auth/magic-link/verify/route.ts](app/api/auth/magic-link/verify/route.ts), [prisma/schema.prisma](prisma/schema.prisma) (`MagicLinkToken`), [lib/server/mail.ts](lib/server/mail.ts). Onboarding: [CONTRIBUTING.md](CONTRIBUTING.md), [`.env.example`](.env.example).
 
 ### Residual / before CR-75 (create-flow session UI)
 
@@ -158,24 +158,24 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Depends on:** Ticket 3.
 
-**Goal:** In `/create/*`, **Exit** / **Save & Exit** (from `select` onward for signed-in users) is the only top-nav chrome—no email or Sign out in the create shell. **Anonymous:** progress in **`create-flow-anonymous`** localStorage; **Exit** opens the global **Save your progress?** auth modal (magic link + `?syncDraft=1` return); after verify, [`PostLoginDraftTransfer`](app/create/PostLoginDraftTransfer.tsx) **PUT**s to `/api/drafts/me` when sync is on. **Signed-in:** **Save & Exit** **PUT**s via [`useCreateFlowExit`](app/create/hooks/useCreateFlowExit.ts) when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC`**. **Sign out** for QA lives on **[ProfilePageClient](app/profile/ProfilePageClient.tsx)**. Site **Log in** opens the same modal overlay ([`AuthModalProvider`](app/contexts/AuthModalContext.tsx)), not only `/login`.
+**Goal:** In `/create/*`, **Exit** / **Save & Exit** (from `select` onward for signed-in users) is the only top-nav chrome—no email or Sign out in the create shell. **Anonymous:** progress in **`create-flow-anonymous`** localStorage; **Exit** opens the global **Save your progress?** auth modal (magic link + `?syncDraft=1` return); after verify, [`PostLoginDraftTransfer`](app/(app)/create/PostLoginDraftTransfer.tsx) **PUT**s to `/api/drafts/me` when sync is on. **Signed-in:** **Save & Exit** **PUT**s via [`useCreateFlowExit`](app/(app)/create/hooks/useCreateFlowExit.ts) when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC`**. **Sign out** for QA lives on **[ProfilePageClient](app/(app)/profile/ProfilePageClient.tsx)**. Site **Log in** opens the same modal overlay ([`AuthModalProvider`](app/contexts/AuthModalContext.tsx)), not only `/login`.
 
 **Context:** **`saveDraftOnExit`** is gated on **session + step ≥ select**. Layout **`fetchAuthSession`** drives anonymous vs authenticated persistence and exit behavior. **Save & Exit** styling: Figma [20907:212637](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=20907-212637). Save-progress exit modal: Figma `22398:23743`.
 
 **Implementation (repo):**
 
-1. [app/create/layout.tsx](app/create/layout.tsx): session + `enableAnonymousPersistence`; anonymous exit → `openLogin({ variant: 'saveProgress', nextPath })`; signed-in exit → `useCreateFlowExit`.
+1. [app/(app)/create/layout.tsx](app/(app)/create/layout.tsx): session + `enableAnonymousPersistence`; anonymous exit → `openLogin({ variant: 'saveProgress', nextPath })`; signed-in exit → `useCreateFlowExit`.
 2. [CreateFlowTopNav](app/components/utility/CreateFlowTopNav/): i18n [`messages/en/create/topNav.json`](messages/en/create/topNav.json); logo + Share/Export/Edit (completed) + Exit/Save & Exit only.
-3. [useCreateFlowExit](app/create/hooks/useCreateFlowExit.ts): `saveDraftToServer` when sync + signed in; `clearState` + home.
-4. [CreateFlowContext](app/create/context/CreateFlowContext.tsx): optional anonymous localStorage mirror via `enableAnonymousPersistence`.
-5. **QA:** [ProfilePageClient](app/profile/ProfilePageClient.tsx) Sign out when session present.
+3. [useCreateFlowExit](app/(app)/create/hooks/useCreateFlowExit.ts): `saveDraftToServer` when sync + signed in; `clearState` + home.
+4. [CreateFlowContext](app/(app)/create/context/CreateFlowContext.tsx): optional anonymous localStorage mirror via `enableAnonymousPersistence`.
+5. **QA:** [ProfilePageClient](app/(app)/profile/ProfilePageClient.tsx) Sign out when session present.
 
 **Acceptance criteria:**
 
 - [x] Completed step still works; **Save & Exit** gating uses session + step (not conflated with `completed` only).
 - [x] Signed in + sync: Save & Exit persists server-side; anonymous: localStorage + exit modal + transfer after magic link. Sign out on profile clears session. _(Re-verify on staging/prod as needed.)_
 
-**Files:** [app/create/layout.tsx](app/create/layout.tsx), [app/create/hooks/useCreateFlowExit.ts](app/create/hooks/useCreateFlowExit.ts), [app/components/utility/CreateFlowTopNav/](app/components/utility/CreateFlowTopNav/), [app/create/context/CreateFlowContext.tsx](app/create/context/CreateFlowContext.tsx), [messages/en/create/topNav.json](messages/en/create/topNav.json), [app/profile/ProfilePageClient.tsx](app/profile/ProfilePageClient.tsx).
+**Files:** [app/(app)/create/layout.tsx](app/(app)/create/layout.tsx), [app/(app)/create/hooks/useCreateFlowExit.ts](app/(app)/create/hooks/useCreateFlowExit.ts), [app/components/utility/CreateFlowTopNav/](app/components/utility/CreateFlowTopNav/), [app/(app)/create/context/CreateFlowContext.tsx](app/(app)/create/context/CreateFlowContext.tsx), [messages/en/create/topNav.json](messages/en/create/topNav.json), [app/(app)/profile/ProfilePageClient.tsx](app/(app)/profile/ProfilePageClient.tsx).
 
 ---
 
@@ -189,9 +189,9 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Implementation:**
 
-1. **Hydration:** **Done:** [SignedInDraftHydration](app/create/SignedInDraftHydration.tsx) + [messages/en/create/draftHydration.json](messages/en/create/draftHydration.json); skips `?syncDraft=1` / transfer-pending (PostLogin owns that). Wired in [layout](app/create/layout.tsx).
-2. **Conflict:** **Done:** If `create-flow-anonymous` and server draft are both non-empty, `window.confirm` (OK = account draft, Cancel = browser copy); documented on [anonymousDraftStorage](app/create/utils/anonymousDraftStorage.ts). Newer-`updatedAt` client compare remains optional.
-3. **Save failures (API surface):** **Done (CR-76):** [saveDraftToServer](lib/create/api.ts) returns `SaveDraftResult` with parsed API `message`; wired in [useCreateFlowExit](app/create/hooks/useCreateFlowExit.ts) and [PostLoginDraftTransfer](app/create/PostLoginDraftTransfer.tsx).
+1. **Hydration:** **Done:** [SignedInDraftHydration](app/(app)/create/SignedInDraftHydration.tsx) + [messages/en/create/draftHydration.json](messages/en/create/draftHydration.json); skips `?syncDraft=1` / transfer-pending (PostLogin owns that). Wired in [layout](app/(app)/create/layout.tsx).
+2. **Conflict:** **Done:** If `create-flow-anonymous` and server draft are both non-empty, `window.confirm` (OK = account draft, Cancel = browser copy); documented on [anonymousDraftStorage](app/(app)/create/utils/anonymousDraftStorage.ts). Newer-`updatedAt` client compare remains optional.
+3. **Save failures (API surface):** **Done (CR-76):** [saveDraftToServer](lib/create/api.ts) returns `SaveDraftResult` with parsed API `message`; wired in [useCreateFlowExit](app/(app)/create/hooks/useCreateFlowExit.ts) and [PostLoginDraftTransfer](app/(app)/create/PostLoginDraftTransfer.tsx).
 4. **Save failures (UX):** **Done (CR-76):** Dismissible banner with server `message` (no second confirm to leave); post-login transfer shows reason; unit tests in `tests/unit/saveDraftToServer.test.ts`. Retry/backoff remains optional.
 5. **Tests:** `saveDraftToServer` unit tests; [draftHydrationUtils](lib/create/draftHydrationUtils.ts) unit tests. Playwright against Next standalone + route mocks for `/api/auth/session` was flaky here; cover hydration with **manual QA** (signed in + sync on + server draft) or add a future E2E with a dedicated auth fixture.
 
@@ -200,7 +200,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [x] No silent data loss when server save fails (user sees reason in banner; stays in flow to retry Save & Exit or leave via e.g. logo).
 - [x] User understands when server draft replaced local state (if applicable) — conflict `window.confirm` when both browser anonymous draft and account draft exist; otherwise silent apply of single source.
 
-**Files:** [lib/create/api.ts](lib/create/api.ts), [app/create/hooks/useCreateFlowExit.ts](app/create/hooks/useCreateFlowExit.ts), [app/create/PostLoginDraftTransfer.tsx](app/create/PostLoginDraftTransfer.tsx), [app/create/SignedInDraftHydration.tsx](app/create/SignedInDraftHydration.tsx), [app/create/layout.tsx](app/create/layout.tsx), [CreateFlowContext](app/create/context/CreateFlowContext.tsx), tests under `tests/`.
+**Files:** [lib/create/api.ts](lib/create/api.ts), [app/(app)/create/hooks/useCreateFlowExit.ts](app/(app)/create/hooks/useCreateFlowExit.ts), [app/(app)/create/PostLoginDraftTransfer.tsx](app/(app)/create/PostLoginDraftTransfer.tsx), [app/(app)/create/SignedInDraftHydration.tsx](app/(app)/create/SignedInDraftHydration.tsx), [app/(app)/create/layout.tsx](app/(app)/create/layout.tsx), [CreateFlowContext](app/(app)/create/context/CreateFlowContext.tsx), tests under `tests/`.
 
 ---
 
@@ -210,7 +210,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Completing the flow persists a **PublishedRule** via existing [publishRule](lib/create/api.ts).
 
-**Context:** [lib/create/api.ts](lib/create/api.ts) already wraps `POST /api/rules`. UI on the `final-review` / `completed` steps (see [app/create/screens/CreateFlowScreenView.tsx](app/create/screens/CreateFlowScreenView.tsx) and `app/create/screens/`) must call it with `{ title, summary?, document }` derived from `CreateFlowState`.
+**Context:** [lib/create/api.ts](lib/create/api.ts) already wraps `POST /api/rules`. UI on the `final-review` / `completed` steps (see [app/(app)/create/screens/CreateFlowScreenView.tsx](app/(app)/create/screens/CreateFlowScreenView.tsx) and `app/(app)/create/screens/`) must call it with `{ title, summary?, document }` derived from `CreateFlowState`.
 
 **Implementation:**
 
@@ -224,7 +224,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [ ] Published row appears in Postgres (`PublishedRule`) and `GET /api/rules` lists it.
 - [ ] User sees clear success/failure.
 
-**Files:** relevant `app/create/*/page.tsx`, [lib/create/api.ts](lib/create/api.ts) if request shape changes, types from Ticket 2.
+**Files:** relevant `app/(app)/create/*/page.tsx`, [lib/create/api.ts](lib/create/api.ts) if request shape changes, types from Ticket 2.
 
 ---
 
@@ -258,7 +258,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Home or create entry surfaces use live template data instead of only static i18n JSON.
 
-**Context:** [RuleStack.view.tsx](app/components/sections/RuleStack/RuleStack.view.tsx) and create entry surfaces reference future template work. Wizard URLs are static segments under `app/create/`; see [`docs/create-flow.md`](create-flow.md) and **Ticket 17** for the canonical custom flow.
+**Context:** [RuleStack.view.tsx](app/components/sections/RuleStack/RuleStack.view.tsx) and create entry surfaces reference future template work. Wizard URLs are static segments under `app/(app)/create/`; see [`docs/create-flow.md`](create-flow.md) and **Ticket 17** for the canonical custom flow.
 
 **Implementation:**
 
@@ -271,7 +271,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [ ] Changing a template row in Prisma Studio reflects after refresh (or revalidate).
 - [ ] No layout shift regression on LCP-critical pages (use skeletons).
 
-**Files:** [app/components/sections/RuleStack/](app/components/sections/RuleStack/), create-flow entry routes under [app/create/](app/create/), possibly new `lib/templates/fetchTemplates.ts`.
+**Files:** [app/components/sections/RuleStack/](app/components/sections/RuleStack/), create-flow entry routes under [app/(app)/create/](app/(app)/create/), possibly new `lib/templates/fetchTemplates.ts`.
 
 **Follow-up:** **Ticket 16** — dynamic recommendations from authoring spreadsheets and create-flow answers.
 
@@ -311,14 +311,14 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Establish the **official custom** create-rule flow (ordered steps, URLs, persistence, entry points, **Figma three-stage framing**) in repo docs and close gaps between that spec and the implementation (routing clutter, progress UI, step source of truth, resume vs URL).
 
-**Context:** Step order lives in [`app/create/utils/flowSteps.ts`](app/create/utils/flowSteps.ts). Wizard screens render from [`app/create/[screenId]/page.tsx`](app/create/[screenId]/page.tsx) plus [`CREATE_FLOW_SCREEN_REGISTRY`](app/create/utils/createFlowScreenRegistry.ts) (Figma node + layout family per slug). [`docs/create-flow.md`](create-flow.md) is the **canonical** URL/persistence summary: **Create Community** (eight semantic steps ending at `review`) → **Create Custom CommunityRule** → **Review and complete**. **Full create-from-template** will likely use **additional route(s)** when product defines it; **`/create/review-template/[slug]`** remains auxiliary preview only. **Template → `final-review` or mid-wizard prefill** is **out of scope** here (future ticket); `/create/informational?template=` is a **no-op** until then.
+**Context:** Step order lives in [`app/(app)/create/utils/flowSteps.ts`](app/(app)/create/utils/flowSteps.ts). Wizard screens render from [`app/(app)/create/[screenId]/page.tsx`](app/(app)/create/[screenId]/page.tsx) plus [`CREATE_FLOW_SCREEN_REGISTRY`](app/(app)/create/utils/createFlowScreenRegistry.ts) (Figma node + layout family per slug). [`docs/create-flow.md`](create-flow.md) is the **canonical** URL/persistence summary: **Create Community** (eight semantic steps ending at `review`) → **Create Custom CommunityRule** → **Review and complete**. **Full create-from-template** will likely use **additional route(s)** when product defines it; **`/create/review-template/[slug]`** remains auxiliary preview only. **Template → `final-review` or mid-wizard prefill** is **out of scope** here (future ticket); `/create/informational?template=` is a **no-op** until then.
 
 **Implementation:**
 
 1. Keep [`docs/create-flow.md`](create-flow.md) in sync with product/Figma (stage ↔ step mapping, future template routes).
-2. ~~Remove legacy [`app/create/[step]/page.tsx`](app/create/[step]/page.tsx)~~ — replaced by [`app/create/[screenId]/page.tsx`](app/create/[screenId]/page.tsx) with real screens; unknown slugs `notFound()`.
-3. Unify **step source of truth**: URL via [`useCreateFlowNavigation`](app/create/hooks/useCreateFlowNavigation.ts) vs unused [`CreateFlowContext`](app/create/context/CreateFlowContext.tsx) `currentStep` — pick one model; align [`useCreateFlowExit`](app/create/hooks/useCreateFlowExit.ts) / draft payload if needed.
-4. **Resume:** After [`SignedInDraftHydration`](app/create/SignedInDraftHydration.tsx), decide redirect to `/create/${state.currentStep}` vs stay on current URL; test or document.
+2. ~~Remove legacy [`app/(app)/create/[step]/page.tsx`](app/(app)/create/[step]/page.tsx)~~ — replaced by [`app/(app)/create/[screenId]/page.tsx`](app/(app)/create/[screenId]/page.tsx) with real screens; unknown slugs `notFound()`.
+3. Unify **step source of truth**: URL via [`useCreateFlowNavigation`](app/(app)/create/hooks/useCreateFlowNavigation.ts) vs unused [`CreateFlowContext`](app/(app)/create/context/CreateFlowContext.tsx) `currentStep` — pick one model; align [`useCreateFlowExit`](app/(app)/create/hooks/useCreateFlowExit.ts) / draft payload if needed.
+4. **Resume:** After [`SignedInDraftHydration`](app/(app)/create/SignedInDraftHydration.tsx), decide redirect to `/create/${state.currentStep}` vs stay on current URL; test or document.
 5. Wire [`CreateFlowFooter`](app/components/utility/CreateFlowFooter/) `ProportionBar` to step progress from `FLOW_STEP_ORDER` (and `review-template` / `completed` exceptions per design); optional **two-level progress** (stage + step within stage) when design specifies.
 6. When Figma hands off, surface **stage labels** in create shell (top nav, footer, or step chrome) using the mapping in `create-flow.md`.
 
@@ -330,7 +330,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [ ] Hydration + `currentStep` behavior is verified (redirect vs stay).
 - [ ] `?template=` documented as deferred; no implied “template customize → full wizard” parity.
 
-**Files:** [`docs/create-flow.md`](create-flow.md), [`app/create/`](app/create/), [`app/components/utility/CreateFlowFooter/`](app/components/utility/CreateFlowFooter/), optionally [`docs/backend-roadmap.md`](backend-roadmap.md) §12 cross-links.
+**Files:** [`docs/create-flow.md`](create-flow.md), [`app/(app)/create/`](app/(app)/create/), [`app/components/utility/CreateFlowFooter/`](app/components/utility/CreateFlowFooter/), optionally [`docs/backend-roadmap.md`](backend-roadmap.md) §12 cross-links.
 
 **Linear:** [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo) (**Backlog**). **Parallel** to templates (7–8) and publish (6); not part of **CR-72 → CR-83**.
 
diff --git a/docs/backend-roadmap.md b/docs/guides/backend-roadmap.md
similarity index 91%
rename from docs/backend-roadmap.md
rename to docs/guides/backend-roadmap.md
index 70b6242..a9b3dd6 100644
--- a/docs/backend-roadmap.md
+++ b/docs/guides/backend-roadmap.md
@@ -9,7 +9,7 @@ Temporary working notes for building the backend. Safe to delete once the stack
 - **Next.js 16** single repo ([`package.json`](package.json)).
 - **PostgreSQL + Prisma**: schema and migrations under `prisma/`; product APIs under `app/api/*` (health, auth/magic-link, session, drafts, rules, templates, web-vitals).
 - **Server modules** in `lib/server/` (db, session, mail, rate limiting, etc.).
-- **Create flow:** **Anonymous** users mirror in-progress state to **`create-flow-anonymous`** in `localStorage`; **Exit** opens the save-progress magic-link modal; after verify, [`PostLoginDraftTransfer`](app/create/PostLoginDraftTransfer.tsx) can **PUT** `/api/drafts/me` when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true`**. **Signed-in** users get a **fresh** in-memory session per “Create rule” entry, but with sync on the layout may **hydrate** from **`GET /api/drafts/me`** via [`SignedInDraftHydration`](app/create/SignedInDraftHydration.tsx); **Save & Exit** (from `community-structure` onward) **PUT**s when sync is on. **Log in** from the marketing header uses the global modal ([`AuthModalProvider`](app/contexts/AuthModalContext.tsx)); **`/login`** remains for verify errors and deep links. **Step order and URLs:** [`docs/create-flow.md`](docs/create-flow.md) and [`app/create/utils/flowSteps.ts`](app/create/utils/flowSteps.ts).
+- **Create flow:** **Anonymous** users mirror in-progress state to **`create-flow-anonymous`** in `localStorage`; **Exit** opens the save-progress magic-link modal; after verify, [`PostLoginDraftTransfer`](app/(app)/create/PostLoginDraftTransfer.tsx) can **PUT** `/api/drafts/me` when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true`**. **Signed-in** users get a **fresh** in-memory session per “Create rule” entry, but with sync on the layout may **hydrate** from **`GET /api/drafts/me`** via [`SignedInDraftHydration`](app/(app)/create/SignedInDraftHydration.tsx); **Save & Exit** (from `community-structure` onward) **PUT**s when sync is on. **Log in** from the marketing header uses the global modal ([`AuthModalProvider`](app/contexts/AuthModalContext.tsx)); **`/login`** remains for verify errors and deep links. **Step order and URLs:** [`docs/create-flow.md`](docs/create-flow.md) and [`app/(app)/create/utils/flowSteps.ts`](app/(app)/create/utils/flowSteps.ts).
 - **Web vitals** [`app/api/web-vitals/route.ts`](app/api/web-vitals/route.ts) still use **file-based** storage under `.next` (not suitable for multi-instance production).
 - **CI:** [`.gitea/workflows/ci.yaml`](.gitea/workflows/ci.yaml) (build, test, lint, `prisma validate`); no in-repo production deploy definition.
 
@@ -88,7 +88,7 @@ Plain-English entities (names can evolve):
 
 **RuleDraft future (not v1):** versioning, multiple drafts per user, easier corruption recovery—only if product needs them.
 
-Align JSON shapes with `app/create/types.ts` as it matures.
+Align JSON shapes with `app/(app)/create/types.ts` as it matures.
 
 ---
 
@@ -218,7 +218,7 @@ npm run dev
 
 ## 12. Frontend hook-up
 
-**Step 1.** **Anonymous** create flow: in-progress state is stored in **`create-flow-anonymous`** (`localStorage`). **Signed-in** users: when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true`**, the create layout may **hydrate** in-memory flow state from **`GET /api/drafts/me`** once per session ([`SignedInDraftHydration`](../app/create/SignedInDraftHydration.tsx)), including conflict handling if anonymous storage also has data. Without sync, signed-in progress stays **in memory** until **Save & Exit** (no automatic server read on entry). **Canonical wizard step order, URLs, and Figma product stages** (**Create Community** → **Create Custom CommunityRule** → **Review and complete**) are documented in [`docs/create-flow.md`](create-flow.md). The route **`/create/review-template/[slug]`** is an **auxiliary** template preview (not a numbered wizard step); a **full create-from-template** path will likely be **separate route(s)** when defined. **Prefilling the wizard or landing on `final-review` from a template** is **not** shipped yet — see **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** / Ticket 17 in [docs/backend-linear-tickets.md](backend-linear-tickets.md).
+**Step 1.** **Anonymous** create flow: in-progress state is stored in **`create-flow-anonymous`** (`localStorage`). **Signed-in** users: when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true`**, the create layout may **hydrate** in-memory flow state from **`GET /api/drafts/me`** once per session ([`SignedInDraftHydration`](../app/(app)/create/SignedInDraftHydration.tsx)), including conflict handling if anonymous storage also has data. Without sync, signed-in progress stays **in memory** until **Save & Exit** (no automatic server read on entry). **Canonical wizard step order, URLs, and Figma product stages** (**Create Community** → **Create Custom CommunityRule** → **Review and complete**) are documented in [`docs/create-flow.md`](create-flow.md). The route **`/create/review-template/[slug]`** is an **auxiliary** template preview (not a numbered wizard step); a **full create-from-template** path will likely be **separate route(s)** when defined. **Prefilling the wizard or landing on `final-review` from a template** is **not** shipped yet — see **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** / Ticket 17 in [docs/backend-linear-tickets.md](backend-linear-tickets.md).
 
 **Step 2.** Set `NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` to enable **PUT** on **Save & Exit** and after **magic-link transfer** from the save-progress exit modal.
 
diff --git a/docs/guides/container-presentation-pattern.md b/docs/guides/container-presentation-pattern.md
deleted file mode 100644
index d1bb041..0000000
--- a/docs/guides/container-presentation-pattern.md
+++ /dev/null
@@ -1,401 +0,0 @@
-# Container/Presentation Pattern
-
-## Overview
-
-The Container/Presentation pattern separates component logic from presentation, improving testability, reusability, and maintainability. This pattern is now the standard for complex components in this codebase.
-
-## Motivation
-
-### Benefits
-
-- **Testability**: Pure presentation components can be tested independently with simple prop assertions
-- **Reusability**: Presentation components can be reused with different data sources or logic
-- **Maintainability**: Clear separation makes it easier to locate and modify specific concerns
-- **Performance**: Easier to optimize rendering with React.memo on pure components
-
-### When to Use
-
-Use this pattern for components that have:
-
-- Business logic or state management
-- Data fetching or API calls
-- Analytics tracking
-- Complex event handlers
-- Custom hooks usage
-- Dynamic imports or side effects
-
-Simple presentational components (e.g., `Button`, `Avatar`) can remain as single files.
-
-## Folder Structure
-
-Each component following this pattern should have this structure:
-
-```
-app/components/[ComponentName]/
-  ├── index.tsx                    # Exports container as default
-  ├── [ComponentName].container.tsx # Logic, hooks, state management
-  ├── [ComponentName].view.tsx     # Pure presentation component
-  └── [ComponentName].types.ts     # Shared TypeScript types
-```
-
-### File Responsibilities
-
-#### `index.tsx`
-
-- Exports the container component as the default export
-- Optionally exports types for external use
-- Maintains backward compatibility with existing import paths
-
-```typescript
-export { default } from "./AskOrganizer.container";
-export type { AskOrganizerProps } from "./AskOrganizer.types";
-```
-
-#### `[ComponentName].container.tsx`
-
-**Contains all logic:**
-
-- React hooks (`useState`, `useEffect`, custom hooks)
-- Event handlers and business logic
-- Data fetching and API calls
-- Analytics tracking
-- State management
-- Computed values and derived state
-- Side effects
-
-**Should NOT contain:**
-
-- JSX layout details (beyond composing the view)
-- Inline styles or complex className logic (pass as props)
-- Direct DOM manipulation
-
-```typescript
-"use client";
-
-import { memo } from "react";
-import { useAnalytics } from "../../hooks";
-import { AskOrganizerView } from "./AskOrganizer.view";
-import type { AskOrganizerProps } from "./AskOrganizer.types";
-
-function AskOrganizerContainer(props: AskOrganizerProps) {
-  const { trackEvent } = useAnalytics();
-
-  const handleContactClick = () => {
-    trackEvent({
-      event: "contact_button_click",
-      category: "engagement",
-      component: "AskOrganizer",
-    });
-    // ... additional logic
-  };
-
-  // Compute derived props
-  const variantStyles = computeVariantStyles(props.variant);
-
-  return (
-    <AskOrganizerView
-      {...props}
-      onContactClick={handleContactClick}
-      variantStyles={variantStyles}
-    />
-  );
-}
-
-export default memo(AskOrganizerContainer);
-```
-
-#### `[ComponentName].view.tsx`
-
-**Pure presentation:**
-
-- Receives all data via props
-- Renders JSX based on props
-- No hooks, no state, no side effects
-- Only imports other presentational components
-
-**Should NOT contain:**
-
-- `useState`, `useEffect`, or any hooks
-- Event handler implementations (receive as callbacks)
-- Data fetching or API calls
-- Analytics tracking
-- Business logic
-
-```typescript
-import ContentLockup from "../ContentLockup";
-import Button from "../Button";
-import type { AskOrganizerViewProps } from "./AskOrganizer.types";
-
-export function AskOrganizerView({
-  title,
-  subtitle,
-  description,
-  buttonText,
-  buttonHref,
-  variant,
-  onContactClick,
-  variantStyles,
-  ...props
-}: AskOrganizerViewProps) {
-  return (
-    <section className={variantStyles.container}>
-      <ContentLockup
-        title={title}
-        subtitle={subtitle}
-        description={description}
-      />
-      <Button
-        href={buttonHref}
-        onClick={onContactClick}
-      >
-        {buttonText}
-      </Button>
-    </section>
-  );
-}
-```
-
-#### `[ComponentName].types.ts`
-
-- Shared TypeScript interfaces and types
-- Public props interface (used by consumers)
-- Internal view props (used between container and view)
-- Any utility types specific to the component
-
-```typescript
-export interface AskOrganizerProps {
-  title?: string;
-  subtitle?: string;
-  buttonText?: string;
-  buttonHref?: string;
-  variant?: "centered" | "left-aligned" | "compact" | "inverse";
-  onContactClick?: (data: ContactClickData) => void;
-}
-
-export interface AskOrganizerViewProps extends AskOrganizerProps {
-  onContactClick: () => void;
-  variantStyles: {
-    container: string;
-    buttonContainer: string;
-  };
-}
-```
-
-## Rules of Thumb
-
-### Container Components
-
-✅ **DO:**
-
-- Use React hooks (`useState`, `useEffect`, custom hooks)
-- Handle all event handlers and business logic
-- Fetch data and manage loading states
-- Track analytics events
-- Compute derived values from props/state
-- Compose the view component with computed props
-
-❌ **DON'T:**
-
-- Include complex JSX layout (delegate to view)
-- Mix presentation logic with business logic
-- Access DOM directly (use refs when necessary)
-
-### View Components
-
-✅ **DO:**
-
-- Receive all data via props
-- Render JSX based on props
-- Import only presentational components
-- Use simple conditional rendering
-- Accept callback props for user interactions
-
-❌ **DON'T:**
-
-- Use any React hooks
-- Manage state or side effects
-- Fetch data or make API calls
-- Track analytics directly
-- Implement business logic
-- Access browser APIs directly
-
-## Example: AskOrganizer
-
-### Before (Monolithic)
-
-```typescript
-"use client";
-
-import { memo } from "react";
-import { useAnalytics } from "../hooks";
-import ContentLockup from "./ContentLockup";
-import Button from "./Button";
-
-const AskOrganizer = memo(({ title, variant, ...props }) => {
-  const { trackEvent } = useAnalytics();
-
-  const handleContactClick = () => {
-    trackEvent({ event: "contact_click", component: "AskOrganizer" });
-  };
-
-  return (
-    <section>
-      <ContentLockup title={title} />
-      <Button onClick={handleContactClick}>Ask an organizer</Button>
-    </section>
-  );
-});
-```
-
-### After (Container/Presentation)
-
-**AskOrganizer.container.tsx:**
-
-```typescript
-"use client";
-
-import { memo } from "react";
-import { useAnalytics } from "../../hooks";
-import { AskOrganizerView } from "./AskOrganizer.view";
-import type { AskOrganizerProps } from "./AskOrganizer.types";
-
-function AskOrganizerContainer(props: AskOrganizerProps) {
-  const { trackEvent } = useAnalytics();
-
-  const handleContactClick = () => {
-    trackEvent({ event: "contact_click", component: "AskOrganizer" });
-  };
-
-  return <AskOrganizerView {...props} onContactClick={handleContactClick} />;
-}
-
-export default memo(AskOrganizerContainer);
-```
-
-**AskOrganizer.view.tsx:**
-
-```typescript
-import ContentLockup from "../ContentLockup";
-import Button from "../Button";
-import type { AskOrganizerViewProps } from "./AskOrganizer.types";
-
-export function AskOrganizerView({
-  title,
-  onContactClick,
-  ...props
-}: AskOrganizerViewProps) {
-  return (
-    <section>
-      <ContentLockup title={title} />
-      <Button onClick={onContactClick}>Ask an organizer</Button>
-    </section>
-  );
-}
-```
-
-## Migration Checklist
-
-When converting an existing component to this pattern:
-
-- [ ] **Identify separation points**
-  - [ ] List all hooks and state management
-  - [ ] List all event handlers and business logic
-  - [ ] List all data fetching and side effects
-  - [ ] Identify pure presentation JSX
-
-- [ ] **Create folder structure**
-  - [ ] Create `[ComponentName]/` folder
-  - [ ] Create `[ComponentName].types.ts` with shared types
-  - [ ] Create `[ComponentName].view.tsx` with pure presentation
-  - [ ] Create `[ComponentName].container.tsx` with all logic
-  - [ ] Create `index.tsx` exporting container
-
-- [ ] **Extract types**
-  - [ ] Move component props interface to `types.ts`
-  - [ ] Create view props interface extending container props
-  - [ ] Export types from `index.tsx` for external use
-
-- [ ] **Move presentation to view**
-  - [ ] Copy JSX to view component
-  - [ ] Remove all hooks and state
-  - [ ] Replace event handlers with callback props
-  - [ ] Replace computed values with props
-  - [ ] Ensure view is a pure function
-
-- [ ] **Move logic to container**
-  - [ ] Move all hooks to container
-  - [ ] Move event handlers to container
-  - [ ] Move data fetching to container
-  - [ ] Compute derived props in container
-  - [ ] Render view component with computed props
-
-- [ ] **Update exports**
-  - [ ] Export container as default from `index.tsx`
-  - [ ] Export types from `index.tsx`
-  - [ ] Delete original component file
-  - [ ] Verify import paths still work
-
-- [ ] **Update tests**
-  - [ ] Verify tests still pass (imports should resolve automatically)
-  - [ ] Update any tests that relied on implementation details
-  - [ ] Add tests for view component with mocked props if needed
-
-- [ ] **Update Storybook**
-  - [ ] Verify stories still work (imports should resolve automatically)
-  - [ ] Optionally add view-only stories with mocked props
-
-## Refactored Components
-
-The following components have been refactored to use this pattern:
-
-- ✅ **AskOrganizer** - Analytics tracking and event handlers
-- ✅ **NumberedCards** - Schema generation with `useSchemaData` hook
-- ✅ **FeatureGrid** - Memoized feature data structures
-- ✅ **WebVitalsDashboard** - Dynamic imports, data fetching, complex state
-- ✅ **Select** - Complex form state management with refs and keyboard navigation
-
-These components serve as reference implementations for the pattern.
-
-## Remaining Components
-
-The following components are candidates for future conversion:
-
-### High Priority (Complex Logic)
-
-- `Header` / `HomeHeader` - Navigation state, conditional rendering logic
-- `MenuBar` - Menu state management, keyboard navigation
-- `ContextMenu` - Positioning logic, click outside handling
-- `RadioGroup` - Group state management
-- `ToggleGroup` - Group state management
-
-### Medium Priority (Some Logic)
-
-- `ContentContainer` - Data fetching or transformation
-- `RelatedArticles` - Data fetching, filtering logic
-- `RuleStack` - Complex rendering logic
-- `LogoWall` - Animation or interaction logic
-
-### Low Priority (Mostly Presentational)
-
-- `Button`, `Avatar`, `Checkbox`, `Input`, `TextArea` - Simple presentational components
-- `Separator`, `SectionHeader`, `SectionNumber` - Pure presentation
-- `QuoteBlock`, `QuoteDecor`, `HeroDecor` - Decorative components
-
-## Best Practices
-
-1. **Start with complex components** - Components with the most logic benefit most from separation
-2. **Keep it simple** - Don't over-engineer simple presentational components
-3. **Maintain backward compatibility** - Import paths should remain unchanged
-4. **Test both layers** - Test container for logic, view for presentation
-5. **Document the pattern** - Add comments explaining non-obvious prop flows
-6. **Use TypeScript strictly** - Leverage types to enforce the separation
-
-## Additional Resources
-
-- [React Container/Presenter Pattern](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
-- [Separation of Concerns in React](https://react.dev/learn/thinking-in-react)
-
----
-
-**Last Updated**: April 2025  
-**Maintained by**: CommunityRule Development Team
diff --git a/docs/guides/i18n-translation-workflow.md b/docs/guides/i18n-translation-workflow.md
index d63139c..f6bf948 100644
--- a/docs/guides/i18n-translation-workflow.md
+++ b/docs/guides/i18n-translation-workflow.md
@@ -1,382 +1,81 @@
-# i18n Translation Workflow Guide
+# Translations & UI copy workflow
 
-This guide explains how to work with translations in the CommunityRule application. The app uses a hybrid approach combining globalized, shared UI elements with context-aware, localized content pages, making it easy for content creators and contributors to update text without modifying component code.
+This guide is for **content editors** updating user-visible text. The
+implementation contract (file layout, `useMessages` access pattern, key
+casing rules) lives in `.cursor/rules/localization.mdc`.
 
-## Overview
+## Where copy lives
 
-All UI text is stored in JSON files under `messages/en/`. The structure follows best practices:
+All UI text is JSON under `messages/en/`:
 
-- **Page-specific content** lives in `pages/` (varies by page context)
-- **Component defaults** live in `components/` (shared across pages)
-- **Common strings** live in `common.json` (shared UI elements)
-
-Components reference these translations using keys, allowing content to be edited independently of the codebase.
-
-## Directory Structure
-
-```
-messages/
-  en/
-    pages/
-      home.json              # Home page specific content
-      learn.json             # Learn page specific content
-    components/
-      heroBanner.json        # Component defaults (aria-labels, alt texts)
-      numberedCards.json     # Component defaults
-      askOrganizer.json      # Component defaults
-      featureGrid.json       # Component defaults
-      footer.json            # Shared across pages
-      header.json            # Shared across pages
-    common.json              # Shared UI strings (buttons, links, labels)
-    navigation.json           # Navigation items
-    metadata.json            # Page metadata (title, description)
-    index.ts                 # Exports all messages
+```text
+messages/en/
+  common.json              # shared strings (buttons, links, generic labels)
+  navigation.json          # site nav items
+  metadata.json            # page <title> / description
+  pages/<slug>.json        # one file per page (home, learn, …)
+  components/<name>.json   # one file per shared component default
+  create/<step>.json       # one file per create-flow step
+  index.ts                 # wires all bundles together
 ```
 
-## When to Use `pages/` vs `components/`
+The split is intentional:
 
-### Use `pages/` for:
+- **`pages/`** — copy that varies by page context (titles, hero subheads).
+- **`components/`** — defaults that ride along with a component on every
+  page (aria-labels, alt text patterns).
+- **`common.json`** — strings reused across many components (e.g. "Cancel",
+  "Learn more").
+- **`create/`** — wizard step copy (mirrors the `screenId`).
 
-- **Page-specific content**: Titles, subtitles, descriptions that vary by page
-- **Context-aware text**: Content that changes based on where the component is used
-- **User-facing content**: All text that users see on a specific page
+## Editing existing copy
 
-**Example:** The home page hero banner title "Collaborate" goes in `pages/home.json`, not `components/heroBanner.json`
+1. Find the bundle: search `messages/en/` for the existing English string.
+2. Edit the value. Leave the key alone.
+3. Save and run `npm run dev` — text updates on reload.
 
-### Use `components/` for:
+If you can't find the string, it may still be hard-coded. Open an issue or
+ping a developer; do not change the component file directly.
 
-- **Component defaults**: Aria-labels, alt text patterns, shared behavior text
-- **Shared across pages**: Text that doesn't vary by page context
-- **Accessibility text**: Aria-labels and alt texts that are component-level
+## Adding a new key
 
-**Example:** The hero banner image alt text "Hero illustration" stays in `components/heroBanner.json` because it's the same across all pages
-
-### Use `common.json` for:
-
-- **Shared UI strings**: Buttons, links, labels used across multiple components
-- **Global strings**: Text that appears in many places
-
-## Page-Specific Translations
-
-For page-specific content, use the `pages.*` namespace pattern:
-
-**Server Components:**
-
-```typescript
-import messages from "../../messages/en/index";
-import { getTranslation } from "../../lib/i18n/getTranslation";
-
-export default function LearnPage() {
-  const t = (key: string) => getTranslation(messages, key);
-
-  const contentLockupData = {
-    title: t("pages.learn.contentLockup.title"),
-    subtitle: t("pages.learn.contentLockup.subtitle"),
-  };
-
-  return <ContentLockup {...contentLockupData} />;
-}
-```
-
-**Client Components:**
-
-```typescript
-"use client";
-import { useTranslation } from "../../contexts/MessagesContext";
-
-export default function MyComponent() {
-  const t = useTranslation("pages.home.heroBanner");
-  return <h1>{t("title")}</h1>;
-}
-```
-
-## Adding New Translation Keys
-
-### 1. Identify the Component
-
-Determine which component needs the translation. If it's a shared string (like a button label), add it to `common.json`. Otherwise, add it to the component-specific file.
-
-### 2. Add the Key to the JSON File
-
-Open the appropriate JSON file and add your translation key. Use descriptive, semantic keys:
-
-**Good:**
+1. Decide which bundle owns the copy (page vs component vs common).
+2. Add a descriptive camelCase key. Group related copy in nested objects.
+3. If you created a new JSON file, register it in `messages/en/index.ts`
+   (a developer will help if you're unsure).
+4. Reference the key from the component using `useMessages()` (see the
+   localization rule for the snippet).
 
 ```json
 {
-  "heroBanner": {
-    "title": "Collaborate",
-    "subtitle": "with clarity"
-  }
-}
-```
-
-**Bad:**
-
-```json
-{
-  "text1": "Collaborate",
-  "text2": "with clarity"
-}
-```
-
-### 3. Use Nested Objects for Organization
-
-Group related translations together:
-
-```json
-{
-  "numberedCards": {
-    "title": "How CommunityRule works",
-    "buttons": {
-      "createCommunityRule": "Create CommunityRule",
-      "seeHowItWorks": "See how it works"
-    }
-  }
-}
-```
-
-### 4. Update the Component or Page
-
-**For Page Components (Server Components):**
-
-```typescript
-import messages from "../../messages/en/index";
-import { getTranslation } from "../../lib/i18n/getTranslation";
-
-export default function MyPage() {
-  const t = (key: string) => getTranslation(messages, key);
-
-  // Use page-specific keys
-  const data = {
-    title: t("pages.home.heroBanner.title"),
-    subtitle: t("pages.home.heroBanner.subtitle"),
-  };
-
-  return <HeroBanner {...data} />;
-}
-```
-
-**For Client Components:**
-
-```typescript
-"use client";
-import { useTranslation } from "../../contexts/MessagesContext";
-
-export default function MyComponent() {
-  // For page-specific content
-  const t = useTranslation("pages.home.heroBanner");
-  return <h1>{t("title")}</h1>;
-
-  // For component defaults
-  const tDefault = useTranslation("heroBanner");
-  return <img alt={tDefault("imageAlt")} />;
-}
-```
-
-## Translation Key Naming Conventions
-
-1. **Use camelCase** for keys: `buttonText`, `ariaLabel`
-2. **Use descriptive names**: `createCommunityRule` not `btn1`
-3. **Group by component**: Each component has its own namespace
-4. **Use nested objects** for related strings: `buttons.createCommunityRule`
-5. **Include context in comments**: Use `_comment` fields for clarity
-
-Example:
-
-```json
-{
-  "_comment": "HeroBanner component translations",
-  "title": "Collaborate",
-  "subtitle": "with clarity",
-  "description": "Help your community make important decisions..."
-}
-```
-
-## Extracting Strings from Components
-
-When migrating a component to use translations:
-
-1. **Identify hardcoded strings** in the component
-2. **Create translation keys** in the appropriate JSON file
-3. **Replace hardcoded strings** with `t("key.path")` calls
-4. **Test the component** to ensure translations load correctly
-
-### Example Migration
-
-**Before:**
-
-```typescript
-export default function HeroBanner() {
-  return (
-    <div>
-      <h1>Collaborate</h1>
-      <p>with clarity</p>
-    </div>
-  );
-}
-```
-
-**After:**
-
-```typescript
-"use client";
-import { useTranslations } from "next-intl";
-
-export default function HeroBanner() {
-  const t = useTranslations("heroBanner");
-  return (
-    <div>
-      <h1>{t("title")}</h1>
-      <p>{t("subtitle")}</p>
-    </div>
-  );
-}
-```
-
-## Adding a New Page
-
-When creating a new page that needs translations:
-
-1. **Create a page translation file**: `messages/en/pages/about.json` (for example)
-2. **Add page-specific content**: All user-facing text for that page
-3. **Import in index.ts**: Add the import and export in `messages/en/index.ts`
-4. **Use in page component**: Use `t("pages.about.*")` pattern in your page
-
-**Example:**
-
-```typescript
-// messages/en/pages/about.json
-{
+  "_comment": "About page hero copy",
   "hero": {
-    "title": "About Us",
-    "subtitle": "Learn more about our mission"
-  }
-}
-
-// app/about/page.tsx
-const t = (key: string) => getTranslation(messages, key);
-const title = t("pages.about.hero.title");
-```
-
-## Adding New Languages (Future)
-
-When adding support for a new language:
-
-1. **Create a new locale directory**: `messages/es/` (for Spanish, for example)
-2. **Copy the English files** as a starting point (including `pages/` structure)
-3. **Translate all strings** in the JSON files
-4. **Test thoroughly** to ensure all translations are present
-
-## Testing Translations
-
-1. **Check for missing keys**: Ensure all translation keys used in components exist in the JSON files
-2. **Verify type safety**: TypeScript will catch typos in translation keys at compile time
-3. **Test in browser**: Run the dev server and verify text displays correctly
-4. **Check for fallbacks**: Missing translations will show the key path (e.g., `heroBanner.title`)
-
-## Best Practices
-
-### For Content Creators
-
-- **Edit JSON files directly**: No need to understand React or TypeScript
-- **Use descriptive comments**: Add `_comment` fields to explain context
-- **Maintain consistency**: Use the same terminology across components
-- **Test changes**: Run the dev server to see your changes immediately
-
-### For Developers
-
-- **Use TypeScript**: Translation keys are type-safe
-- **Namespace when possible**: Use `useTranslations("namespace")` for better organization
-- **Server components first**: Prefer server-side translations for better performance
-- **Extract incrementally**: Migrate components one at a time
-
-## Common Patterns
-
-### Buttons and CTAs
-
-```json
-{
-  "buttons": {
-    "createCommunityRule": "Create CommunityRule",
-    "seeHowItWorks": "See how it works"
+    "title": "About us",
+    "subtitle": "Why CommunityRule exists"
   }
 }
 ```
 
-### Aria Labels
+## Style notes
 
-```json
-{
-  "ariaLabels": {
-    "followBluesky": "Follow us on Bluesky",
-    "followGitlab": "Follow us on GitLab"
-  }
-}
-```
+- **camelCase** for structural keys (`compactTitle`, `imageAlt`).
+- **kebab-case** for content ids that match a URL slug, card id, or step
+  id (`"in-person-meetings"`, `"peer-mediation"`).
+- Use `_comment` to leave context for the next editor.
+- Keep terminology consistent — search the messages folder before coining a
+  new label.
 
-### Dynamic Content
+## Adding a new language (future)
 
-For content that varies (like card text), use arrays or numbered keys:
-
-```json
-{
-  "cards": {
-    "card1": { "text": "First step" },
-    "card2": { "text": "Second step" },
-    "card3": { "text": "Third step" }
-  }
-}
-```
+1. Create `messages/<locale>/` mirroring `messages/en/`.
+2. Translate strings; keep keys identical.
+3. Update `messages/en/index.ts` (or split it per locale) — a developer
+   will wire the locale switcher.
 
 ## Troubleshooting
 
-### Translation Key Not Found
-
-If you see a key path like `heroBanner.title` instead of the text:
-
-1. Check the JSON file exists and has the key
-2. Verify the key path matches exactly (case-sensitive)
-3. Restart the dev server if you just added the key
-
-### TypeScript Errors
-
-If TypeScript complains about translation keys:
-
-1. Ensure the key exists in the JSON file
-2. Check for typos in the key path
-3. Verify the namespace is correct if using `useTranslations("namespace")`
-
-### Missing Translations
-
-If text doesn't appear:
-
-1. Check the browser console for errors
-2. Verify the component is wrapped in `MessagesProvider` (for client components)
-3. Ensure `getTranslation()` is called correctly in server components
-4. Check if you're using the correct namespace (`pages.*` vs component defaults)
-
-## Architecture: Hybrid Approach
-
-This implementation follows the recognized best practice of combining:
-
-- **Globalized, shared UI elements**: Component defaults in `components/` (aria-labels, alt texts)
-- **Context-aware, localized content pages**: Page-specific content in `pages/` (titles, descriptions)
-
-This allows:
-
-- Components to remain flexible and reusable
-- Page content to be easily edited without code changes
-- Clear separation between shared defaults and page-specific content
-- Scalable structure for adding new pages
-
-## Resources
-
-- Component defaults in `messages/en/components/`
-- Page-specific content in `messages/en/pages/`
-- Shared UI strings in `messages/en/common.json`
-
----
-
-**Last Updated**: January 2025  
-**Maintained by**: CommunityRule Development Team
+| Symptom | Likely cause | Fix |
+| --- | --- | --- |
+| Key path renders instead of text (e.g. `hero.title`) | Missing key or typo | Check spelling and bundle path |
+| Copy doesn't update | Dev server cache | Restart `npm run dev` |
+| TypeScript red squiggle | Bundle not registered | Add the import in `messages/en/index.ts` |
diff --git a/docs/template-recommendation-matrix.md b/docs/guides/template-recommendation-matrix.md
similarity index 96%
rename from docs/template-recommendation-matrix.md
rename to docs/guides/template-recommendation-matrix.md
index 9b702a5..e7edf44 100644
--- a/docs/template-recommendation-matrix.md
+++ b/docs/guides/template-recommendation-matrix.md
@@ -78,7 +78,7 @@ Order is preserved here because the columns are positional in the sheets:
   see §2.4 data-quality issues).
 - Wizard chip ids are **positional 1..N** within each `messages/en/create/*`
   array (see `chipRowsFromLabels` in
-  `app/create/screens/select/CommunityStructureSelectScreen.tsx` lines 49–57).
+  `app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx` lines 49–57).
   The importer should emit a stable lookup table mapping
   `(facetGroup, label) → wizardChipId` so the recommendation engine can match
   a user's `selectedXxxIds` against the matrix without depending on label
@@ -90,7 +90,7 @@ Order is preserved here because the columns are positional in the sheets:
 
 Maps 1:1 to `messages/en/create/communication.json` and the
 `communication-methods` step
-(`app/create/screens/card/CommunicationMethodsScreen.tsx`).
+(`app/(app)/create/screens/card/CommunicationMethodsScreen.tsx`).
 
 **Content columns (positions 1–5):**
 
@@ -112,7 +112,7 @@ Matrix / Element · GitHub / GitLab · Discord · Email Distribution List · Sla
 ### 2.3 Membership / Group-Membership (`Group_Membership_Methods.xlsx`, sheet `Current`)
 
 Maps to the `membership-methods` step
-(`app/create/screens/card/MembershipMethodsScreen.tsx`) and
+(`app/(app)/create/screens/card/MembershipMethodsScreen.tsx`) and
 `messages/en/create/membership.json`.
 
 **Content columns (positions 1–5):**
@@ -142,7 +142,7 @@ Evaluation · Lottery / Sortition.
 ### 2.4 Decision-making (`Decision-making.xlsx`, sheet `Current`)
 
 Maps to the `decision-approaches` step
-(`app/create/screens/right-rail/DecisionApproachesScreen.tsx`) and
+(`app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx`) and
 `messages/en/create/rightRail.json`.
 
 **Content columns (positions 1–7):**
@@ -182,7 +182,7 @@ Hierarchical Decision-Making · Negotiated Decisions.
 ### 2.5 Conflict Management (`Conflict Management Methods.xlsx`, sheet `Current`)
 
 Maps to the `conflict-management` step
-(`app/create/screens/card/ConflictManagementScreen.tsx`) and
+(`app/(app)/create/screens/card/ConflictManagementScreen.tsx`) and
 `messages/en/create/conflictManagement.json`.
 
 **Content columns (positions 1–6):**
@@ -251,7 +251,7 @@ function governancePatternBody(coreValues: string): Prisma.InputJsonValue {
 
 ### 3.2 Wizard facets captured today (`CreateFlowState`)
 
-```83:95:app/create/types.ts
+```83:95:app/(app)/create/types.ts
 selectedCommunitySizeIds?: string[];
 selectedOrganizationTypeIds?: string[];
 selectedScaleIds?: string[];
@@ -275,7 +275,7 @@ the facet shape.
 
 ### 3.3 Wizard step order
 
-Source of truth is `app/create/utils/flowSteps.ts` (`FLOW_STEP_ORDER`). The
+Source of truth is `app/(app)/create/utils/flowSteps.ts` (`FLOW_STEP_ORDER`). The
 relevant slice is:
 
 ```
@@ -289,10 +289,10 @@ decision-approaches → conflict-management → confirm-stakeholders → final-r
 
 | Surface | File |
 |---|---|
-| Marketing home "Popular templates" | `app/(marketing)/MarketingRuleStackSection.tsx` |
+| Marketing home "Popular templates" | `app/(marketing)/_components/MarketingRuleStackSection.tsx` |
 | Templates index | `app/(marketing)/templates/page.tsx` |
-| Template preview (by slug) | `app/create/review-template/[slug]/page.tsx` |
-| "Use without changes" → publish | `app/create/CreateFlowLayoutClient.tsx` `handleUseTemplateWithoutChanges` |
+| Template preview (by slug) | `app/(app)/create/review-template/[slug]/page.tsx` |
+| "Use without changes" → publish | `app/(app)/create/CreateFlowLayoutClient.tsx` `handleUseTemplateWithoutChanges` |
 | API list | `app/api/templates/route.ts` (GET only, no params) |
 
 There is currently **no** recommendation logic, no facet filtering, and the
@@ -697,12 +697,12 @@ Once the API exists:
 - `lib/server/validation/plainJson.ts` — `assertPlainJsonValue` /
   `DEFAULT_PLAIN_JSON_LIMITS`.
 - `lib/logger.ts` — server-side `logger`.
-- `app/create/types.ts` — `CreateFlowState` and facet fields.
-- `app/create/utils/flowSteps.ts` — canonical step order.
-- `app/create/utils/createFlowScreenRegistry.ts` — screen layout per step.
-- `app/create/screens/select/CommunityStructureSelectScreen.tsx` — chip-id
+- `app/(app)/create/types.ts` — `CreateFlowState` and facet fields.
+- `app/(app)/create/utils/flowSteps.ts` — canonical step order.
+- `app/(app)/create/utils/createFlowScreenRegistry.ts` — screen layout per step.
+- `app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx` — chip-id
   derivation pattern (positional `String(i+1)`).
-- `app/create/screens/card/CommunicationMethodsScreen.tsx` — section-field
+- `app/(app)/create/screens/card/CommunicationMethodsScreen.tsx` — section-field
   contract (`SECTION_FIELDS`).
 - `messages/en/create/{communitySize,communityStructure,communication,membership,rightRail,conflictManagement}.json` —
   current static card / chip copy that the matrix supersedes.
diff --git a/docs/testing-guide.md b/docs/testing-guide.md
new file mode 100644
index 0000000..f00b24e
--- /dev/null
+++ b/docs/testing-guide.md
@@ -0,0 +1,68 @@
+# Testing guide
+
+This is the **why** of testing in CommunityRule. For file layout, helper
+APIs, and required imports see `.cursor/rules/testing.mdc`.
+
+## Philosophy
+
+- **Test behaviour, not implementation.** Assert on what a user can see and
+  do (visible text, roles, labels, keyboard paths). Avoid leaning on
+  internal class names, hook internals, or memoization details.
+- **One consolidated file per component.** A component's standard suite,
+  variant assertions, and behaviour-specific cases all live in
+  `tests/components/<Name>.test.tsx`.
+- **Accessibility is non-negotiable.** Every component suite runs
+  `jest-axe`; full-page WCAG runs in Playwright. A failing axe check is a
+  failing build.
+- **E2E is sparse and high-signal.** Playwright covers critical journeys,
+  visual regression of major pages, and a handful of edge cases — not
+  per-component clicks. Component coverage is the job of Vitest.
+
+## Layered coverage
+
+| Layer | Tool | Scope |
+| --- | --- | --- |
+| Unit | Vitest | Pure logic, reducers, utilities (`tests/unit/`). |
+| Component | Vitest + RTL | DS components in isolation (`tests/components/`). |
+| Page / context | Vitest + RTL | Screens and provider wiring (`tests/pages/`, `tests/contexts/`). |
+| Accessibility (page) | Playwright + axe | WCAG 2.1 AA on key pages (`tests/accessibility/e2e/`). |
+| E2E | Playwright | Critical journeys, visual regression, edge cases (`tests/e2e/`). |
+
+## What to test vs. skip
+
+**Test:**
+
+- Public behaviour — visible text, roles, ARIA, keyboard activation.
+- State transitions users observe (error → success, disabled → enabled).
+- Interaction contracts (click handlers, form submission, dropdown
+  selection).
+- Accessibility invariants.
+
+**Skip:**
+
+- Pure styling that changes with the design system (exact shadow radius,
+  minor spacing).
+- Hook internals or memoization specifics.
+- Responsive visibility in JSDOM — use Playwright instead.
+
+## Running tests
+
+```bash
+npm test                  # vitest run with coverage
+npm run test:component    # vitest, components only (faster inner loop)
+npm run e2e               # playwright (alias: test:e2e)
+npm run visual:update     # refresh playwright screenshots after UI changes
+```
+
+## Adding tests for a new component
+
+1. Create `app/components/<Name>/`.
+2. Create `tests/components/<Name>.test.tsx` and call `componentTestSuite`
+   (see `.cursor/rules/testing.mdc`).
+3. Add behaviour-specific `describe` blocks for any unique interactions.
+4. Run `npm run test:component -- --run tests/components/<Name>.test.tsx`.
+
+## Storybook is documentation, not tests
+
+Stories are visual examples for design review and Code Connect — they do
+not replace component tests. Run `npm run storybook` locally to browse.
diff --git a/lib/cache.ts b/lib/cache.ts
deleted file mode 100644
index 9702625..0000000
--- a/lib/cache.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-/**
- * Content caching utilities for improved performance
- */
-
-import { logger } from "./logger";
-
-// In-memory cache for blog posts
-const blogPostCache = new Map<string, CacheEntry<unknown>>();
-const blogListCache = new Map<string, CacheEntry<unknown[]>>();
-const tagCache = new Map<string, CacheEntry<string[]>>();
-const authorCache = new Map<string, CacheEntry<string[]>>();
-
-// Cache configuration
-const isDevelopment =
-  process.env.NODE_ENV === "development" || !process.env.NODE_ENV;
-const CACHE_TTL = isDevelopment ? 0 : 5 * 60 * 1000; // 0 in dev, 5 minutes in production
-const MAX_CACHE_SIZE = 100; // Maximum number of cached items
-
-/**
- * Cache entry with timestamp
- */
-class CacheEntry<T> {
-  data: T;
-  timestamp: number;
-
-  constructor(data: T) {
-    this.data = data;
-    this.timestamp = Date.now();
-  }
-
-  isExpired(): boolean {
-    // In development, always consider cache expired (no caching)
-    if (isDevelopment) return true;
-    return Date.now() - this.timestamp > CACHE_TTL;
-  }
-}
-
-/**
- * Get cached blog post data
- * @param key - Cache key
- * @returns Cached data or null if not found/expired
- */
-function getCached<T>(key: string): T | null {
-  const entry = blogPostCache.get(key) as CacheEntry<T> | undefined;
-  if (!entry || entry.isExpired()) {
-    blogPostCache.delete(key);
-    return null;
-  }
-  return entry.data;
-}
-
-/**
- * Set cached blog post data
- * @param key - Cache key
- * @param data - Data to cache
- */
-function setCached<T>(key: string, data: T): void {
-  // Implement LRU eviction if cache is full
-  if (blogPostCache.size >= MAX_CACHE_SIZE) {
-    const oldestKey = blogPostCache.keys().next().value;
-    blogPostCache.delete(oldestKey);
-  }
-
-  blogPostCache.set(key, new CacheEntry(data));
-}
-
-/**
- * Clear expired cache entries
- */
-function clearExpiredCache(): void {
-  for (const [key, entry] of blogPostCache.entries()) {
-    if (entry.isExpired()) {
-      blogPostCache.delete(key);
-    }
-  }
-}
-
-/**
- * Clear all caches
- */
-export function clearAllCaches(): void {
-  blogPostCache.clear();
-  blogListCache.clear();
-  tagCache.clear();
-  authorCache.clear();
-}
-
-/**
- * Get cached blog post by slug
- * @param slug - Blog post slug
- * @returns Cached blog post or null
- */
-export function getCachedBlogPost<T>(slug: string): T | null {
-  return getCached<T>(`post:${slug}`);
-}
-
-/**
- * Cache blog post data
- * @param slug - Blog post slug
- * @param postData - Blog post data
- */
-export function cacheBlogPost<T>(slug: string, postData: T): void {
-  setCached(`post:${slug}`, postData);
-}
-
-/**
- * Get cached blog post list
- * @param key - Cache key for list (e.g., 'all', 'recent', 'tag:governance')
- * @returns Cached list or null
- */
-export function getCachedBlogList<T>(key: string): T[] | null {
-  const entry = blogListCache.get(key);
-  if (!entry || entry.isExpired()) {
-    blogListCache.delete(key);
-    return null;
-  }
-  return entry.data as T[];
-}
-
-/**
- * Cache blog post list
- * @param key - Cache key
- * @param listData - List data to cache
- */
-export function cacheBlogList<T>(key: string, listData: T[]): void {
-  blogListCache.set(key, new CacheEntry(listData));
-}
-
-/**
- * Get cached tags
- * @returns Cached tags or null
- */
-export function getCachedTags(): string[] | null {
-  const entry = tagCache.get("all");
-  if (!entry || entry.isExpired()) {
-    tagCache.delete("all");
-    return null;
-  }
-  return entry.data;
-}
-
-/**
- * Cache tags
- * @param tags - Tags to cache
- */
-export function cacheTags(tags: string[]): void {
-  tagCache.set("all", new CacheEntry(tags));
-}
-
-/**
- * Get cached authors
- * @returns Cached authors or null
- */
-export function getCachedAuthors(): string[] | null {
-  const entry = authorCache.get("all");
-  if (!entry || entry.isExpired()) {
-    authorCache.delete("all");
-    return null;
-  }
-  return entry.data;
-}
-
-/**
- * Cache authors
- * @param authors - Authors to cache
- */
-export function cacheAuthors(authors: string[]): void {
-  authorCache.set("all", new CacheEntry(authors));
-}
-
-/**
- * Invalidate cache for a specific blog post
- * @param slug - Blog post slug
- */
-export function invalidateBlogPostCache(slug: string): void {
-  blogPostCache.delete(`post:${slug}`);
-  // Also invalidate list caches since they might contain this post
-  blogListCache.clear();
-}
-
-/**
- * Invalidate all caches
- */
-export function invalidateAllCaches(): void {
-  clearAllCaches();
-}
-
-export interface CacheStats {
-  blogPostCacheSize: number;
-  blogListCacheSize: number;
-  tagCacheSize: number;
-  authorCacheSize: number;
-  totalCacheSize: number;
-  maxCacheSize: number;
-  cacheTTL: number;
-}
-
-/**
- * Get cache statistics
- * @returns Cache statistics
- */
-export function getCacheStats(): CacheStats {
-  clearExpiredCache();
-
-  return {
-    blogPostCacheSize: blogPostCache.size,
-    blogListCacheSize: blogListCache.size,
-    tagCacheSize: tagCache.size,
-    authorCacheSize: authorCache.size,
-    totalCacheSize:
-      blogPostCache.size +
-      blogListCache.size +
-      tagCache.size +
-      authorCache.size,
-    maxCacheSize: MAX_CACHE_SIZE,
-    cacheTTL: CACHE_TTL,
-  };
-}
-
-/**
- * Warm up cache with frequently accessed data
- * @param getAllPosts - Function to get all blog posts
- * @param getAllTags - Function to get all tags
- */
-export async function warmCache<T>(
-  getAllPosts: () => T[],
-  getAllTags: () => string[],
-): Promise<void> {
-  try {
-    // Cache all blog posts
-    const allPosts = getAllPosts();
-    cacheBlogList("all", allPosts);
-
-    // Cache recent posts
-    const recentPosts = allPosts.slice(0, 5);
-    cacheBlogList("recent", recentPosts);
-
-    // Cache tags
-    const tags = getAllTags();
-    cacheTags(tags);
-
-    // Cache individual posts (first 10)
-    allPosts.slice(0, 10).forEach((post) => {
-      const postWithSlug = post as { slug: string };
-      cacheBlogPost(postWithSlug.slug, post);
-    });
-
-    logger.info("Cache warmed up successfully");
-  } catch (error) {
-    logger.error("Error warming up cache:", error);
-  }
-}
-
-/**
- * Check if cache is healthy
- * @returns True if cache is healthy
- */
-export function isCacheHealthy(): boolean {
-  try {
-    clearExpiredCache();
-    return blogPostCache.size < MAX_CACHE_SIZE;
-  } catch (error) {
-    logger.error("Cache health check failed:", error);
-    return false;
-  }
-}
diff --git a/lib/create/api.ts b/lib/create/api.ts
index f7b9fbc..6d1ce85 100644
--- a/lib/create/api.ts
+++ b/lib/create/api.ts
@@ -1,4 +1,4 @@
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 import { migrateLegacyCreateFlowState } from "./migrateLegacyCreateFlowState";
 
 const jsonHeaders = { "Content-Type": "application/json" };
diff --git a/lib/create/buildPublishPayload.ts b/lib/create/buildPublishPayload.ts
index 4bdbe71..0aca7e5 100644
--- a/lib/create/buildPublishPayload.ts
+++ b/lib/create/buildPublishPayload.ts
@@ -1,4 +1,4 @@
-import type { CoreValueDetailEntry, CreateFlowState } from "../../app/create/types";
+import type { CoreValueDetailEntry, CreateFlowState } from "../../app/(app)/create/types";
 import type { CommunityRuleDocumentSection } from "../../app/components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
 
 function isDocumentEntry(x: unknown): x is { title: string; body: string } {
diff --git a/lib/create/draftHydrationUtils.ts b/lib/create/draftHydrationUtils.ts
index 6842881..d56d5f4 100644
--- a/lib/create/draftHydrationUtils.ts
+++ b/lib/create/draftHydrationUtils.ts
@@ -1,4 +1,4 @@
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 
 /** True when the client should treat a draft payload as non-empty for hydration / conflict checks. */
 export function createFlowStateHasKeys(state: CreateFlowState): boolean {
diff --git a/lib/create/migrateLegacyCreateFlowState.ts b/lib/create/migrateLegacyCreateFlowState.ts
index bf6d08a..719348c 100644
--- a/lib/create/migrateLegacyCreateFlowState.ts
+++ b/lib/create/migrateLegacyCreateFlowState.ts
@@ -1,4 +1,4 @@
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 
 /** Legacy `currentStep` values mapped to the current `CreateFlowStep` id. */
 const LEGACY_CREATE_FLOW_STEP_RENAMES: Readonly<Record<string, string>> = {
diff --git a/lib/i18n/getTranslation.ts b/lib/i18n/getTranslation.ts
index 690fc0e..2219f95 100644
--- a/lib/i18n/getTranslation.ts
+++ b/lib/i18n/getTranslation.ts
@@ -26,31 +26,3 @@ export function getTranslation(messages: Messages, key: string): string {
 
   return typeof value === "string" ? value : key;
 }
-
-/**
- * Type-safe helper to get nested values from messages
- * Usage: getNested(messages, "heroBanner", "title")
- */
-export function getNested<T extends keyof Messages>(
-  messages: Messages,
-  namespace: T,
-  key: string,
-): string {
-  const namespaceObj = messages[namespace];
-  if (!namespaceObj || typeof namespaceObj !== "object") {
-    return key;
-  }
-
-  const keys = key.split(".");
-  let value: unknown = namespaceObj;
-
-  for (const k of keys) {
-    if (value && typeof value === "object" && k in value) {
-      value = (value as Record<string, unknown>)[k];
-    } else {
-      return key;
-    }
-  }
-
-  return typeof value === "string" ? value : key;
-}
diff --git a/lib/i18n/types.ts b/lib/i18n/types.ts
deleted file mode 100644
index e744fa9..0000000
--- a/lib/i18n/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Type definitions for translation keys
- *
- * These types provide type safety when accessing translation keys.
- * The actual types are inferred from the JSON files in messages/en/
- */
-
-// Import the message structure to ensure type safety
-import type messages from "../../messages/en/index";
-
-export type Messages = typeof messages;
-
-// Helper type for nested key paths
-export type NestedKeyOf<ObjectType extends object> = {
-  [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
-    ? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}`
-    : `${Key}`;
-}[keyof ObjectType & (string | number)];
-
-// Type for all possible translation keys
-export type TranslationKey = NestedKeyOf<Messages>;
diff --git a/lib/mdx.ts b/lib/mdx.ts
deleted file mode 100644
index 5d5d484..0000000
--- a/lib/mdx.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-/**
- * MDX processing utilities for enhanced markdown content
- */
-
-export interface Heading {
-  level: number;
-  text: string;
-  id: string;
-  line: number;
-}
-
-export interface Link {
-  text: string;
-  url: string;
-  index: number;
-}
-
-export interface Image {
-  alt: string;
-  src: string;
-  index: number;
-}
-
-export interface ProcessedMarkdown {
-  content: string;
-  htmlContent: string;
-  headings: Heading[];
-  links: Link[];
-  images: Image[];
-}
-
-export interface ProcessedFrontmatter {
-  publishedDate: Date;
-  year: number;
-  month: number;
-  day: number;
-  isRecent: boolean;
-  [key: string]: unknown;
-}
-
-/**
- * Format date consistently across the markdown pipeline
- * Uses "Month Year" format (e.g., "April 2025")
- */
-export function formatDate(dateString: string): string {
-  const date = new Date(dateString);
-  return date.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-  });
-}
-
-/**
- * Process markdown content and extract metadata
- * @param markdown - Raw markdown content
- * @returns Processed content with metadata
- */
-export function processMarkdown(markdown: string): ProcessedMarkdown {
-  if (!markdown) {
-    return {
-      content: "",
-      htmlContent: "",
-      headings: [],
-      links: [],
-      images: [],
-    };
-  }
-
-  // Extract headings for table of contents
-  const headings = extractHeadings(markdown);
-
-  // Extract links
-  const links = extractLinks(markdown);
-
-  // Extract images
-  const images = extractImages(markdown);
-
-  // Convert markdown to HTML
-  const htmlContent = markdownToHtml(markdown);
-
-  return {
-    content: markdown,
-    htmlContent,
-    headings,
-    links,
-    images,
-  };
-}
-
-/**
- * Extract all headings from markdown content
- * @param markdown - Raw markdown content
- * @returns Array of heading objects with level, text, and id
- */
-function extractHeadings(markdown: string): Heading[] {
-  const headingRegex = /^(#{1,6})\s+(.+)$/gm;
-  const headings: Heading[] = [];
-  let match: RegExpExecArray | null;
-
-  while ((match = headingRegex.exec(markdown)) !== null) {
-    const level = match[1].length;
-    const text = match[2].trim();
-    const id = generateHeadingId(text);
-
-    headings.push({
-      level,
-      text,
-      id,
-      line: markdown.substring(0, match.index).split("\n").length,
-    });
-  }
-
-  return headings;
-}
-
-/**
- * Extract all links from markdown content
- * @param markdown - Raw markdown content
- * @returns Array of link objects
- */
-function extractLinks(markdown: string): Link[] {
-  const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-  const links: Link[] = [];
-  let match: RegExpExecArray | null;
-
-  while ((match = linkRegex.exec(markdown)) !== null) {
-    links.push({
-      text: match[1],
-      url: match[2],
-      index: match.index,
-    });
-  }
-
-  return links;
-}
-
-/**
- * Extract all images from markdown content
- * @param markdown - Raw markdown content
- * @returns Array of image objects
- */
-function extractImages(markdown: string): Image[] {
-  const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
-  const images: Image[] = [];
-  let match: RegExpExecArray | null;
-
-  while ((match = imageRegex.exec(markdown)) !== null) {
-    images.push({
-      alt: match[1],
-      src: match[2],
-      index: match.index,
-    });
-  }
-
-  return images;
-}
-
-/**
- * Generate a unique ID for a heading
- * @param text - Heading text
- * @returns Unique ID
- */
-function generateHeadingId(text: string): string {
-  return text
-    .toLowerCase()
-    .replace(/[^\w\s-]/g, "")
-    .replace(/\s+/g, "-")
-    .replace(/-+/g, "-")
-    .trim();
-}
-
-/**
- * Convert markdown to HTML with enhanced formatting
- * - Preserves extra blank lines between paragraphs as visible gaps
- *   (each extra blank line becomes <p class="md-gap">&nbsp;</p>)
- * @param markdown - Raw markdown content
- * @returns HTML content
- */
-function markdownToHtml(markdown: string): string {
-  if (!markdown) return "";
-
-  // Normalize line endings
-  const src = String(markdown).replace(/\r\n?/g, "\n");
-
-  // For 3+ consecutive newlines, keep 2 for the paragraph break and
-  // emit a counted gap token for additional blank lines to preserve spacing.
-  const withGaps = src.replace(/\n{3,}/g, (m) => {
-    const extra = m.length - 2;
-    return `\n\n<GAP:${extra}/>`;
-  });
-
-  return (
-    withGaps
-      // Headers with IDs
-      .replace(
-        /^###### (.*$)/gim,
-        (_match, t) => `<h6 id="${generateHeadingId(t)}">${t}</h6>`,
-      )
-      .replace(
-        /^##### (.*$)/gim,
-        (_match, t) => `<h5 id="${generateHeadingId(t)}">${t}</h5>`,
-      )
-      .replace(
-        /^#### (.*$)/gim,
-        (_match, t) => `<h4 id="${generateHeadingId(t)}">${t}</h4>`,
-      )
-      .replace(
-        /^### (.*$)/gim,
-        (_match, t) => `<h3 id="${generateHeadingId(t)}">${t}</h3>`,
-      )
-      .replace(
-        /^## (.*$)/gim,
-        (_match, t) => `<h2 id="${generateHeadingId(t)}">${t}</h2>`,
-      )
-      .replace(
-        /^# (.*$)/gim,
-        (_match, t) => `<h1 id="${generateHeadingId(t)}">${t}</h1>`,
-      )
-
-      // Code fences (block) and inline code
-      .replace(
-        /```(\w+)?\n([\s\S]*?)\n```/g,
-        (_match, lang = "", code) =>
-          `<pre><code class="language-${lang}">${code}</code></pre>`,
-      )
-      .replace(/`([^`]+)`/g, "<code>$1</code>")
-
-      // Bold and italic (strong before em to avoid overlap issues)
-      .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
-      .replace(/\*(.+?)\*/g, "<em>$1</em>")
-
-      // Links and images
-      .replace(
-        /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g,
-        (_match, alt, src, title = "") =>
-          `<img alt="${alt}" src="${src}"${title ? ` title="${title}"` : ""}>`,
-      )
-      .replace(
-        /\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g,
-        (_match, text, href, title = "") =>
-          `<a href="${href}"${title ? ` title="${title}"` : ""}>${text}</a>`,
-      )
-
-      // Blockquotes
-      .replace(/^(>\s?.+)(\n(>\s?.+))*$/gim, (m) => {
-        const inner = m.replace(/^>\s?/gm, "");
-        return `<blockquote><p>${inner.replace(
-          /\n{2,}/g,
-          "</p><p>",
-        )}</p></blockquote>`;
-      })
-
-      // Lists (ul/ol)
-      .replace(/^(\s*[-*]\s.+(?:\n\s*[-*]\s.+)*)/gim, (m) => {
-        const items = m
-          .trim()
-          .split(/\n/)
-          .map((l) => l.replace(/^\s*[-*]\s+/, ""))
-          .map((t) => `<li>${t}</li>`)
-          .join("");
-        return `<ul>${items}</ul>`;
-      })
-      .replace(/^(\s*\d+\.\s.+(?:\n\s*\d+\.\s.+)*)/gim, (m) => {
-        const items = m
-          .trim()
-          .split(/\n/)
-          .map((l) => l.replace(/^\s*\d+\.\s+/, ""))
-          .map((t) => `<li>${t}</li>`)
-          .join("");
-        return `<ol>${items}</ol>`;
-      })
-
-      // Horizontal rules
-      .replace(/^\s*(?:-{3,}|\*{3,})\s*$/gm, "<hr>")
-
-      // Paragraphs:
-      // 1) Convert double newlines to paragraph boundaries
-      .replace(/\n\n/g, "</p><p>")
-      // 2) Convert single line breaks to <br> tags within paragraphs
-      .replace(/(?<!\n)\n(?!\n)/g, "<br>")
-      // 3) Wrap remaining bare lines that are not already block-level elements.
-      //    (Also skip our GAP_TOKEN so we can turn it into gap paragraphs later.)
-      .replace(
-        /^(?!\s*<(h[1-6]|ul|ol|li|blockquote|hr|pre|code|table|img)\b)(?!\s*<\/)(?!\s*<GAP\/>)(.+)$/gim,
-        "<p>$2</p>",
-      )
-
-      // Clean up truly empty paragraphs but keep &nbsp; gap paragraphs
-      .replace(/<p>\s*<\/p>/g, "")
-
-      // Turn counted GAP tokens into explicit, styleable gap elements
-      .replace(
-        /<GAP:(\d+)\/>/g,
-        (_match, n) =>
-          `<div class="md-gap" style="--gap:${Number(
-            n,
-          )}" aria-hidden="true"></div>`,
-      )
-  );
-}
-
-/**
- * Generate a table of contents from headings
- * @param headings - Array of heading objects
- * @returns HTML table of contents
- */
-export function generateTableOfContents(headings: Heading[]): string {
-  if (!headings || headings.length === 0) return "";
-
-  let toc = '<nav class="table-of-contents"><h4>Table of Contents</h4><ul>';
-
-  headings.forEach((heading) => {
-    const indent = (heading.level - 1) * 20;
-    toc += `<li style="margin-left: ${indent}px"><a href="#${heading.id}">${heading.text}</a></li>`;
-  });
-
-  toc += "</ul></nav>";
-  return toc;
-}
-
-/**
- * Process frontmatter with enhanced validation
- * @param frontmatter - Raw frontmatter data
- * @returns Processed and validated frontmatter
- */
-export function processFrontmatter(
-  frontmatter: Record<string, unknown>,
-): ProcessedFrontmatter {
-  // Add computed fields
-  const date = frontmatter.date as string;
-  const processed: ProcessedFrontmatter = {
-    ...frontmatter,
-    publishedDate: new Date(date),
-    year: new Date(date).getFullYear(),
-    month: new Date(date).getMonth() + 1,
-    day: new Date(date).getDate(),
-    isRecent: isRecentPost(date),
-  };
-
-  return processed;
-}
-
-/**
- * Check if a post is recent (within last 30 days)
- * @param date - Post date string
- * @returns True if post is recent
- */
-function isRecentPost(date: string): boolean {
-  const postDate = new Date(date);
-  const thirtyDaysAgo = new Date();
-  thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
-
-  return postDate > thirtyDaysAgo;
-}
diff --git a/lib/propNormalization.ts b/lib/propNormalization.ts
index ff0559d..5c7106d 100644
--- a/lib/propNormalization.ts
+++ b/lib/propNormalization.ts
@@ -1,878 +1,251 @@
 /**
- * Utility functions for normalizing component props to match Figma specifications
- * while maintaining backward compatibility with existing lowercase usage.
+ * Component prop option arrays and value types.
  *
- * Figma uses PascalCase (e.g., "Standard", "Inverse") but codebase uses lowercase.
- * These helpers accept both formats and normalize to lowercase for internal use.
+ * The codebase uses lowercase-canonical enum values (see
+ * `.cursor/rules/component-props.mdc`). This module is the single source of
+ * valid values for each enum prop — Storybook `argTypes` and any runtime guard
+ * import the corresponding `*_OPTIONS` array from here, and the matching
+ * `*Value` type is derived from it.
  */
 
-/**
- * Normalize mode prop values (Standard/Inverse -> standard/inverse)
- */
-export function normalizeMode(
-  value: string | undefined,
-  defaultValue: "standard" | "inverse" = "standard",
-): "standard" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "standard" || normalized === "inverse") {
-    return normalized;
-  }
-  return defaultValue;
-}
+// ---------------------------------------------------------------------------
+// Generic shared values
+// ---------------------------------------------------------------------------
 
-/**
- * Normalize state prop values (Default/Hover/Focus/Selected -> default/hover/focus/selected)
- */
-export function normalizeState(
-  value: string | undefined,
-  defaultValue: "default" | "hover" | "focus" | "selected" = "default",
-): "default" | "hover" | "focus" | "selected" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (
-    normalized === "default" ||
-    normalized === "hover" ||
-    normalized === "focus" ||
-    normalized === "selected"
-  ) {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const MODE_OPTIONS = ["standard", "inverse"] as const;
+export type ModeValue = (typeof MODE_OPTIONS)[number];
 
-/**
- * Normalize state prop values for form inputs (Default/Active/Hover/Focus)
- */
-export function normalizeInputState(
-  value: string | undefined,
-  defaultValue: "default" | "active" | "hover" | "focus" = "default",
-): "default" | "active" | "hover" | "focus" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (
-    normalized === "default" ||
-    normalized === "active" ||
-    normalized === "hover" ||
-    normalized === "focus"
-  ) {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const STATE_OPTIONS = [
+  "default",
+  "hover",
+  "focus",
+  "selected",
+] as const;
+export type StateValue = (typeof STATE_OPTIONS)[number];
 
-/**
- * Normalize toggle state prop values (Default/Hover/Focus/Selected)
- */
-export function normalizeToggleState(
-  value: string | undefined,
-  defaultValue: "default" | "hover" | "focus" | "selected" = "default",
-): "default" | "hover" | "focus" | "selected" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (
-    normalized === "default" ||
-    normalized === "hover" ||
-    normalized === "focus" ||
-    normalized === "selected"
-  ) {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const INPUT_STATE_OPTIONS = [
+  "default",
+  "active",
+  "hover",
+  "focus",
+] as const;
+export type InputStateValue = (typeof INPUT_STATE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive mode prop
- */
-export type ModeValue = "standard" | "inverse" | "Standard" | "Inverse";
+export const SIZE_OPTIONS = [
+  "xsmall",
+  "small",
+  "medium",
+  "large",
+  "xlarge",
+] as const;
+export type SizeValue = (typeof SIZE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive state prop
- */
-export type StateValue =
-  | "default"
-  | "hover"
-  | "focus"
-  | "selected"
-  | "Default"
-  | "Hover"
-  | "Focus"
-  | "Selected";
+export const SMALL_MEDIUM_LARGE_OPTIONS = [
+  "small",
+  "medium",
+  "large",
+] as const;
+export type SmallMediumLargeValue =
+  (typeof SMALL_MEDIUM_LARGE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive input state prop
- */
-export type InputStateValue =
-  | "default"
-  | "active"
-  | "hover"
-  | "focus"
-  | "Default"
-  | "Active"
-  | "Hover"
-  | "Focus";
+export const ALIGNMENT_OPTIONS = ["center", "left"] as const;
+export type AlignmentValue = (typeof ALIGNMENT_OPTIONS)[number];
 
-/**
- * Normalize button size prop values
- */
-export function normalizeSize(
-  value: string | undefined,
-  defaultValue: "xsmall" | "small" | "medium" | "large" | "xlarge" = "xsmall",
-): "xsmall" | "small" | "medium" | "large" | "xlarge" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["xsmall", "small", "medium", "large", "xlarge"];
-  if (sizes.includes(normalized)) {
-    return normalized as "xsmall" | "small" | "medium" | "large" | "xlarge";
-  }
-  return defaultValue;
-}
+// ---------------------------------------------------------------------------
+// Component-specific values
+// ---------------------------------------------------------------------------
 
-/**
- * Normalize alert status prop values
- */
-export function normalizeAlertStatus(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "positive" | "warning" | "danger" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const statuses = ["default", "positive", "warning", "danger"];
-  if (statuses.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const ALERT_STATUS_OPTIONS = [
+  "default",
+  "positive",
+  "warning",
+  "danger",
+] as const;
+export type AlertStatusValue = (typeof ALERT_STATUS_OPTIONS)[number];
 
-/**
- * Normalize alert type prop values
- */
-export function normalizeAlertType(
-  value: string | undefined,
-  defaultValue: "toast" = "toast",
-): "toast" | "banner" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const types = ["toast", "banner"];
-  if (types.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const ALERT_TYPE_OPTIONS = ["toast", "banner"] as const;
+export type AlertTypeValue = (typeof ALERT_TYPE_OPTIONS)[number];
 
-/**
- * Normalize tooltip position prop values
- */
-export function normalizeTooltipPosition(
-  value: string | undefined,
-  defaultValue: "top" = "top",
-): "top" | "bottom" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const positions = ["top", "bottom"];
-  if (positions.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const TOOLTIP_POSITION_OPTIONS = ["top", "bottom"] as const;
+export type TooltipPositionValue = (typeof TOOLTIP_POSITION_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive size prop
- */
-export type SizeValue =
-  | "xsmall"
-  | "small"
-  | "medium"
-  | "large"
-  | "xlarge"
-  | "XSmall"
-  | "Small"
-  | "Medium"
-  | "Large"
-  | "XLarge";
+export const MENU_BAR_SIZE_OPTIONS = [
+  "X Small",
+  "Small",
+  "Medium",
+  "Large",
+  "X Large",
+] as const;
+export type MenuBarSizeValue = (typeof MENU_BAR_SIZE_OPTIONS)[number];
 
-/**
- * Normalize MenuBar size prop values to Figma specifications
- * Maps to: "X Small" | "Small" | "Medium" | "Large" | "X Large"
- * Also supports legacy format for backward compatibility
- */
-export function normalizeMenuBarSize(
-  value: string | undefined,
-  defaultValue:
-    | "X Small"
-    | "Small"
-    | "Medium"
-    | "Large"
-    | "X Large" = "X Small",
-): "X Small" | "Small" | "Medium" | "Large" | "X Large" {
-  if (!value) return defaultValue;
-  if (
-    value === "X Small" ||
-    value === "Small" ||
-    value === "Medium" ||
-    value === "Large" ||
-    value === "X Large"
-  ) {
-    return value;
-  }
-  return defaultValue;
-}
+export const NAVIGATION_ITEM_VARIANT_OPTIONS = ["default"] as const;
+export type NavigationItemVariantValue =
+  (typeof NAVIGATION_ITEM_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize navigation item variant prop values
- */
-export function normalizeNavigationItemVariant(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "default") {
-    return "default";
-  }
-  return defaultValue;
-}
+export const NAVIGATION_ITEM_SIZE_OPTIONS = ["default", "xsmall"] as const;
+export type NavigationItemSizeValue =
+  (typeof NAVIGATION_ITEM_SIZE_OPTIONS)[number];
 
-/**
- * Normalize navigation item size prop values
- */
-export function normalizeNavigationItemSize(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "xsmall" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["default", "xsmall"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const CONTENT_LOCKUP_VARIANT_OPTIONS = [
+  "hero",
+  "feature",
+  "learn",
+  "ask",
+  "ask-inverse",
+  "modal",
+  "login",
+] as const;
+export type ContentLockupVariantValue =
+  (typeof CONTENT_LOCKUP_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize content lockup variant prop values
- */
-export function normalizeContentLockupVariant(
-  value: string | undefined,
-  defaultValue: "hero" = "hero",
-): "hero" | "feature" | "learn" | "ask" | "ask-inverse" | "modal" | "login" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = [
-    "hero",
-    "feature",
-    "learn",
-    "ask",
-    "ask-inverse",
-    "modal",
-    "login",
-  ];
-  if (variants.includes(normalized)) {
-    return normalized as
-      | "hero"
-      | "feature"
-      | "learn"
-      | "ask"
-      | "ask-inverse"
-      | "modal"
-      | "login";
-  }
-  return defaultValue;
-}
+export const NUMBERED_LIST_SIZE_OPTIONS = ["M", "S"] as const;
+export type NumberedListSizeValue = (typeof NUMBERED_LIST_SIZE_OPTIONS)[number];
 
-/**
- * Normalize alignment prop values
- */
-export function normalizeAlignment(
-  value: string | undefined,
-  defaultValue: "center" = "center",
-): "center" | "left" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const alignments = ["center", "left"];
-  if (alignments.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const HEADER_LOCKUP_JUSTIFICATION_OPTIONS = ["left", "center"] as const;
+export type HeaderLockupJustificationValue =
+  (typeof HEADER_LOCKUP_JUSTIFICATION_OPTIONS)[number];
 
-/**
- * Normalize numbered list size prop values
- */
-export function normalizeNumberedListSize(
-  value: string | undefined,
-  defaultValue: "M" = "M",
-): "M" | "S" {
-  if (!value) return defaultValue;
-  const normalized = value.toUpperCase();
-  if (normalized === "M" || normalized === "S") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const HEADER_LOCKUP_SIZE_OPTIONS = ["L", "M"] as const;
+export type HeaderLockupSizeValue =
+  (typeof HEADER_LOCKUP_SIZE_OPTIONS)[number];
 
-/**
- * Normalize header lockup justification prop values
- */
-export function normalizeHeaderLockupJustification(
-  value: string | undefined,
-  defaultValue: "left" = "left",
-): "left" | "center" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "left" || normalized === "center") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const HEADER_LOCKUP_PALETTE_OPTIONS = ["default", "inverse"] as const;
+export type HeaderLockupPaletteValue =
+  (typeof HEADER_LOCKUP_PALETTE_OPTIONS)[number];
 
-/**
- * Normalize header lockup size prop values
- */
-export function normalizeHeaderLockupSize(
-  value: string | undefined,
-  defaultValue: "L" = "L",
-): "L" | "M" {
-  if (!value) return defaultValue;
-  const normalized = value.toUpperCase();
-  if (normalized === "L" || normalized === "M") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const TEXT_INPUT_SIZE_OPTIONS = ["small", "medium"] as const;
+export type TextInputSizeValue = (typeof TEXT_INPUT_SIZE_OPTIONS)[number];
 
-/**
- * Normalize header lockup palette prop values (Default/Inverse -> default/inverse)
- */
-export function normalizeHeaderLockupPalette(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "default" || normalized === "inverse") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const CONTENT_CONTAINER_SIZE_OPTIONS = ["xs", "responsive"] as const;
+export type ContentContainerSizeValue =
+  (typeof CONTENT_CONTAINER_SIZE_OPTIONS)[number];
 
-/**
- * Normalize text input size prop values
- */
-export function normalizeTextInputSize(
-  value: string | undefined,
-  defaultValue: "medium" = "medium",
-): "small" | "medium" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "small" || normalized === "medium") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const CONTENT_THUMBNAIL_VARIANT_OPTIONS = [
+  "vertical",
+  "horizontal",
+] as const;
+export type ContentThumbnailVariantValue =
+  (typeof CONTENT_THUMBNAIL_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize content container size prop values
- */
-export function normalizeContentContainerSize(
-  value: string | undefined,
-  defaultValue: "responsive" = "responsive",
-): "xs" | "responsive" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["xs", "responsive"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const SECTION_HEADER_VARIANT_OPTIONS = [
+  "default",
+  "multi-line",
+] as const;
+export type SectionHeaderVariantValue =
+  (typeof SECTION_HEADER_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize content thumbnail variant prop values
- */
-export function normalizeContentThumbnailVariant(
-  value: string | undefined,
-  defaultValue: "vertical" = "vertical",
-): "vertical" | "horizontal" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["vertical", "horizontal"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const QUOTE_BLOCK_VARIANT_OPTIONS = [
+  "compact",
+  "standard",
+  "extended",
+] as const;
+export type QuoteBlockVariantValue =
+  (typeof QUOTE_BLOCK_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize section header variant prop values
- */
-export function normalizeSectionHeaderVariant(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "multi-line" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["default", "multi-line"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const NUMBER_CARD_SIZE_OPTIONS = [
+  "small",
+  "medium",
+  "large",
+  "xlarge",
+] as const;
+export type NumberCardSizeValue = (typeof NUMBER_CARD_SIZE_OPTIONS)[number];
 
-/**
- * Normalize quote block variant prop values
- */
-export function normalizeQuoteBlockVariant(
-  value: string | undefined,
-  defaultValue: "standard" = "standard",
-): "compact" | "standard" | "extended" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["compact", "standard", "extended"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const ASK_ORGANIZER_VARIANT_OPTIONS = [
+  "centered",
+  "left-aligned",
+  "compact",
+  "inverse",
+] as const;
+export type AskOrganizerVariantValue =
+  (typeof ASK_ORGANIZER_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize number card size prop values (already PascalCase in codebase, supports both)
- */
-export function normalizeNumberCardSize(
-  value: string | undefined,
-  defaultValue: "Medium" = "Medium",
-): "Small" | "Medium" | "Large" | "XLarge" {
-  if (!value) return defaultValue;
-  // Check if already PascalCase
-  if (
-    value === "Small" ||
-    value === "Medium" ||
-    value === "Large" ||
-    value === "XLarge"
-  ) {
-    return value;
-  }
-  // Normalize lowercase to PascalCase
-  const normalized = value.toLowerCase();
-  if (normalized === "small") return "Small";
-  if (normalized === "medium") return "Medium";
-  if (normalized === "large") return "Large";
-  if (normalized === "xlarge") return "XLarge";
-  return defaultValue;
-}
+export const CONTEXT_MENU_ITEM_SIZE_OPTIONS = [
+  "small",
+  "medium",
+  "large",
+] as const;
+export type ContextMenuItemSizeValue =
+  (typeof CONTEXT_MENU_ITEM_SIZE_OPTIONS)[number];
 
-/**
- * Normalize ask organizer variant prop values
- */
-export function normalizeAskOrganizerVariant(
-  value: string | undefined,
-  defaultValue: "centered" = "centered",
-): "centered" | "left-aligned" | "compact" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["centered", "left-aligned", "compact", "inverse"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const TOGGLE_GROUP_POSITION_OPTIONS = [
+  "left",
+  "middle",
+  "right",
+] as const;
+export type ToggleGroupPositionValue =
+  (typeof TOGGLE_GROUP_POSITION_OPTIONS)[number];
 
-/**
- * Normalize context menu item size prop values
- */
-export function normalizeContextMenuItemSize(
-  value: string | undefined,
-  defaultValue: "medium" = "medium",
-): "small" | "medium" | "large" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["small", "medium", "large"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const LABEL_VARIANT_OPTIONS = ["default", "horizontal"] as const;
+export type LabelVariantValue = (typeof LABEL_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize image placeholder color prop values
- */
-export function normalizeImagePlaceholderColor(
-  value: string | undefined,
-  defaultValue: "blue" = "blue",
-): "blue" | "green" | "purple" | "red" | "orange" | "teal" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const colors = ["blue", "green", "purple", "red", "orange", "teal"];
-  if (colors.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const TEXT_AREA_APPEARANCE_OPTIONS = ["default", "embedded"] as const;
+export type TextAreaAppearanceValue =
+  (typeof TEXT_AREA_APPEARANCE_OPTIONS)[number];
 
-/**
- * Normalize toggle group position prop values
- */
-export function normalizeToggleGroupPosition(
-  value: string | undefined,
-  defaultValue: "left" = "left",
-): "left" | "middle" | "right" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const positions = ["left", "middle", "right"];
-  if (positions.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const RULE_CARD_SIZE_OPTIONS = ["XS", "S", "M", "L"] as const;
+export type RuleCardSizeValue = (typeof RULE_CARD_SIZE_OPTIONS)[number];
 
-/**
- * Normalize label variant prop values
- */
-export function normalizeLabelVariant(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "horizontal" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["default", "horizontal"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const CHIP_STATE_OPTIONS = [
+  "unselected",
+  "selected",
+  "disabled",
+  "custom",
+] as const;
+export type ChipStateValue = (typeof CHIP_STATE_OPTIONS)[number];
 
-/**
- * Normalize TextArea appearance prop (default/embedded; Figma: Default/Embedded).
- */
-export function normalizeTextAreaAppearance(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "embedded" {
-  if (!value) return defaultValue;
-  const n = value.toLowerCase();
-  return n === "embedded" ? "embedded" : "default";
-}
+export const CHIP_PALETTE_OPTIONS = ["default", "inverse"] as const;
+export type ChipPaletteValue = (typeof CHIP_PALETTE_OPTIONS)[number];
 
-/**
- * Normalize small/medium/large size prop values (for SelectInput, TextArea, etc.)
- */
-export function normalizeSmallMediumLargeSize(
-  value: string | undefined,
-  defaultValue: "medium" = "medium",
-): "small" | "medium" | "large" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["small", "medium", "large"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const CHIP_SIZE_OPTIONS = ["s", "m"] as const;
+export type ChipSizeValue = (typeof CHIP_SIZE_OPTIONS)[number];
 
-/**
- * Normalize RuleCard size prop values (L/M -> l/m -> L/M)
- */
-export function normalizeRuleCardSize(
-  value: string | undefined,
-  defaultValue: "L" = "L",
-): "XS" | "S" | "M" | "L" {
-  if (!value) return defaultValue;
-  const normalized = value.toUpperCase();
-  if (
-    normalized === "XS" ||
-    normalized === "S" ||
-    normalized === "M" ||
-    normalized === "L"
-  ) {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const MULTI_SELECT_SIZE_OPTIONS = ["s", "m"] as const;
+export type MultiSelectSizeValue = (typeof MULTI_SELECT_SIZE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive Chip state prop
- */
-export type ChipStateValue =
-  | "unselected"
-  | "selected"
-  | "disabled"
-  | "custom"
-  | "Unselected"
-  | "Selected"
-  | "Disabled"
-  | "Custom";
+export const INPUT_LABEL_SIZE_OPTIONS = ["s", "m"] as const;
+export type InputLabelSizeValue = (typeof INPUT_LABEL_SIZE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive Chip palette prop
- */
-export type ChipPaletteValue = "default" | "inverse" | "Default" | "Inverse";
+export const INPUT_LABEL_PALETTE_OPTIONS = ["default", "inverse"] as const;
+export type InputLabelPaletteValue =
+  (typeof INPUT_LABEL_PALETTE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive Chip size prop
- */
-export type ChipSizeValue = "s" | "m" | "S" | "M";
+export const MENU_BAR_ITEM_STATE_OPTIONS = [
+  "default",
+  "hover",
+  "selected",
+] as const;
+export type MenuBarItemStateValue =
+  (typeof MENU_BAR_ITEM_STATE_OPTIONS)[number];
 
-/**
- * Normalize Chip state prop values (Unselected/Selected/Disabled/Custom)
- */
-export function normalizeChipState(
-  value: string | undefined,
-  defaultValue: "unselected" = "unselected",
-): "unselected" | "selected" | "disabled" | "custom" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const states = ["unselected", "selected", "disabled", "custom"];
-  if (states.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const MENU_BAR_ITEM_MODE_OPTIONS = ["default", "inverse"] as const;
+export type MenuBarItemModeValue = (typeof MENU_BAR_ITEM_MODE_OPTIONS)[number];
 
-/**
- * Normalize Chip palette prop values (Default/Inverse -> default/inverse)
- */
-export function normalizeChipPalette(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const palettes = ["default", "inverse"];
-  if (palettes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const MENU_BAR_ITEM_SIZE_OPTIONS = MENU_BAR_SIZE_OPTIONS;
+export type MenuBarItemSizeValue = MenuBarSizeValue;
 
-/**
- * Normalize Chip size prop values (S/M -> s/m)
- */
-export function normalizeChipSize(
-  value: string | undefined,
-  defaultValue: "s" = "s",
-): "s" | "m" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["s", "m"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const BUTTON_TYPE_OPTIONS = [
+  "filled",
+  "outline",
+  "ghost",
+  "danger",
+] as const;
+export type ButtonTypeValue = (typeof BUTTON_TYPE_OPTIONS)[number];
 
-/**
- * Normalize MultiSelect size prop values (S/M -> s/m)
- */
-export function normalizeMultiSelectSize(
-  value: string | undefined,
-  defaultValue: "m" = "m",
-): "s" | "m" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["s", "m"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const BUTTON_PALETTE_OPTIONS = ["default", "inverse"] as const;
+export type ButtonPaletteValue = (typeof BUTTON_PALETTE_OPTIONS)[number];
 
-/**
- * Normalize InputLabel size prop values (S/M -> s/m)
- */
-export function normalizeInputLabelSize(
-  value: string | undefined,
-  defaultValue: "s" = "s",
-): "s" | "m" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["s", "m"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const BUTTON_STATE_OPTIONS = [
+  "default",
+  "focus",
+  "active",
+  "hover",
+  "disabled",
+] as const;
+export type ButtonStateValue = (typeof BUTTON_STATE_OPTIONS)[number];
 
-/**
- * Normalize InputLabel palette prop values (Default/Inverse -> default/inverse)
- */
-export function normalizeInputLabelPalette(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const palettes = ["default", "inverse"];
-  if (palettes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize MenuBarItem state prop values (Default/Hover/Selected -> default/hover/selected)
- */
-export function normalizeMenuBarItemState(
-  value: string | undefined,
-  defaultValue: "default" | "hover" | "selected" = "default",
-): "default" | "hover" | "selected" {
-  if (!value) return defaultValue;
-  if (value === "default" || value === "hover" || value === "selected") {
-    return value;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize MenuBarItem mode prop values.
- * Default mode: yellow text on dark background (standard header)
- * Inverse mode: black text on yellow background (folderTop variant)
- */
-export function normalizeMenuBarItemMode(
-  value: string | undefined,
-  defaultValue: "default" | "inverse" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  if (value === "default" || value === "inverse") {
-    return value;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize MenuBarItem size prop values.
- * Accepts: "X Small", "Small", "Medium", "Large", "X Large"
- */
-export function normalizeMenuBarItemSize(
-  value: string | undefined,
-  defaultValue:
-    | "X Small"
-    | "Small"
-    | "Medium"
-    | "Large"
-    | "X Large" = "X Small",
-): "X Small" | "Small" | "Medium" | "Large" | "X Large" {
-  if (!value) return defaultValue;
-  if (
-    value === "X Small" ||
-    value === "Small" ||
-    value === "Medium" ||
-    value === "Large" ||
-    value === "X Large"
-  ) {
-    return value;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize button type prop values (Filled/Outline/Ghost/Danger -> filled/outline/ghost/danger)
- */
-export function normalizeButtonType(
-  value: string | undefined,
-  defaultValue: "filled" = "filled",
-): "filled" | "outline" | "ghost" | "danger" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const types = ["filled", "outline", "ghost", "danger"];
-  if (types.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize button palette prop values (Default/Invert -> default/inverse)
- */
-export function normalizeButtonPalette(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  // Handle "invert" -> "inverse" mapping
-  if (normalized === "invert" || normalized === "inverse") {
-    return "inverse";
-  }
-  if (normalized === "default") {
-    return "default";
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize button state prop values (Default/Focus/Active/Hover/Disabled -> default/focus/active/hover/disabled)
- */
-export function normalizeButtonState(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "focus" | "active" | "hover" | "disabled" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const states = ["default", "focus", "active", "hover", "disabled"];
-  if (states.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
-
-/**
- * Type helper for case-insensitive button type prop
- */
-export type ButtonTypeValue =
-  | "filled"
-  | "outline"
-  | "ghost"
-  | "danger"
-  | "Filled"
-  | "Outline"
-  | "Ghost"
-  | "Danger";
-
-/**
- * Type helper for case-insensitive button palette prop
- */
-export type ButtonPaletteValue =
-  | "default"
-  | "inverse"
-  | "Default"
-  | "Invert"
-  | "Inverse";
-
-/**
- * Type helper for case-insensitive button state prop
- */
-export type ButtonStateValue =
-  | "default"
-  | "focus"
-  | "active"
-  | "hover"
-  | "disabled"
-  | "Default"
-  | "Focus"
-  | "Active"
-  | "Hover"
-  | "Disabled";
-
-/**
- * ProportionBar layout variant (Figma uses a segmented track in the create-flow footer).
- */
+export const PROPORTION_BAR_VARIANT_OPTIONS = [
+  "default",
+  "segmented",
+] as const;
 export type ProportionBarVariantValue =
-  | "default"
-  | "segmented"
-  | "Default"
-  | "Segmented";
-
-/**
- * Normalize ProportionBar variant (Figma PascalCase vs codebase lowercase).
- */
-export function normalizeProportionBarVariant(
-  value: string | undefined,
-  defaultValue: "default" | "segmented" = "default",
-): "default" | "segmented" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "default" || normalized === "segmented") {
-    return normalized;
-  }
-  return defaultValue;
-}
+  (typeof PROPORTION_BAR_VARIANT_OPTIONS)[number];
diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts
index 2a7d013..1857461 100644
--- a/lib/server/validation/createFlowSchemas.ts
+++ b/lib/server/validation/createFlowSchemas.ts
@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { FLOW_STEP_ORDER } from "../../../app/create/utils/flowSteps";
+import { FLOW_STEP_ORDER } from "../../../app/(app)/create/utils/flowSteps";
 import { assertPlainJsonValue, DEFAULT_PLAIN_JSON_LIMITS } from "./plainJson";
 
 const flowStepTuple = FLOW_STEP_ORDER as unknown as [string, ...string[]];
diff --git a/lib/types.ts b/lib/types.ts
deleted file mode 100644
index 37b0611..0000000
--- a/lib/types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Shared type definitions for the CommunityRule application
- */
-
-// Re-export types from other modules for convenience
-export type { BlogPost, BlogStats } from "./content";
-
-export type { BlogPostFrontmatter, ValidationResult } from "./validation";
-
-export type {
-  Heading,
-  Link,
-  Image,
-  ProcessedMarkdown,
-  ProcessedFrontmatter,
-} from "./mdx";
-
-export type { CacheStats } from "./cache";
-
-// Additional shared types
-export interface ComponentProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export interface PageProps {
-  params?: Record<string, string | string[]>;
-  searchParams?: Record<string, string | string[]>;
-}
diff --git a/messages/en/pages/login.json b/messages/en/pages/login.json
index b924a90..694c911 100644
--- a/messages/en/pages/login.json
+++ b/messages/en/pages/login.json
@@ -12,6 +12,7 @@
   "legalAnd": " and ",
   "legalSuffix": ".",
   "backToHome": "← Back to home",
+  "loadingFallback": "Loading…",
   "errors": {
     "network": "Something went wrong. Check your connection and try again.",
     "emailInvalid": "Enter a valid email address.",
diff --git a/performance-budgets.json b/performance-budgets.json
index 1454f32..0be7868 100644
--- a/performance-budgets.json
+++ b/performance-budgets.json
@@ -6,9 +6,9 @@
       "description": "Largest Contentful Paint should be under 2.5s"
     },
     {
-      "name": "fid",
-      "maxValue": 100,
-      "description": "First Input Delay should be under 100ms"
+      "name": "inp",
+      "maxValue": 200,
+      "description": "Interaction to Next Paint should be under 200ms"
     },
     {
       "name": "cls",
@@ -70,8 +70,8 @@
             "budget": 0.1
           },
           {
-            "metric": "max-potential-fid",
-            "budget": 130
+            "metric": "interaction-to-next-paint",
+            "budget": 200
           }
         ],
         "resourceSizes": [
@@ -155,8 +155,8 @@
             "budget": 0.1
           },
           {
-            "metric": "max-potential-fid",
-            "budget": 130
+            "metric": "interaction-to-next-paint",
+            "budget": 200
           }
         ]
       }
@@ -250,8 +250,8 @@
             "budget": 0.1
           },
           {
-            "metric": "max-potential-fid",
-            "budget": 130
+            "metric": "interaction-to-next-paint",
+            "budget": 200
           }
         ],
         "resourceSizes": [
@@ -331,8 +331,8 @@
             "budget": 0.1
           },
           {
-            "metric": "max-potential-fid",
-            "budget": 130
+            "metric": "interaction-to-next-paint",
+            "budget": 200
           }
         ],
         "resourceSizes": [
diff --git a/scripts/test-local.sh b/scripts/test-local.sh
deleted file mode 100755
index af515de..0000000
--- a/scripts/test-local.sh
+++ /dev/null
@@ -1,92 +0,0 @@
-#!/bin/bash
-
-# Local testing script - run before committing/merging
-# Usage: ./scripts/test-local.sh
-
-set -euo pipefail  # Exit on error, undefined vars, pipe failures
-
-echo "🧪 Running local tests before commit..."
-echo ""
-
-# Cleanup function to ensure servers are killed
-cleanup() {
-  echo ""
-  echo "🧹 Cleaning up any running servers..."
-  # Kill any Next.js servers on common test ports
-  for port in 3000 3010; do
-    if lsof -ti:$port >/dev/null 2>&1; then
-      echo "  Killing process on port $port..."
-      lsof -ti:$port | xargs kill -9 2>/dev/null || true
-    fi
-  done
-  # Kill any processes from PID files if they exist
-  for pidfile in .next/runner.pid .next/performance-server.pid; do
-    if [ -f "$pidfile" ]; then
-      PID=$(cat "$pidfile" 2>/dev/null || echo "")
-      if [ -n "$PID" ] && kill -0 "$PID" 2>/dev/null; then
-        echo "  Killing server PID: $PID (from $pidfile)..."
-        kill -9 "$PID" 2>/dev/null || true
-      fi
-      rm -f "$pidfile"
-    fi
-  done
-}
-
-trap cleanup EXIT INT TERM
-
-echo "🔍 Linting..."
-npm run lint || exit 1
-
-echo ""
-echo "💅 Prettier check..."
-npm exec prettier -- --check "**/*.{js,jsx,ts,tsx,json,css,md}" || exit 1
-
-echo ""
-echo "📦 Component tests with coverage..."
-npm test || exit 1
-
-echo ""
-echo "🎭 E2E tests..."
-npm run test:e2e || exit 1
-
-echo ""
-echo "🖼️  Visual regression tests..."
-# Visual tests use Playwright's webServer config, should auto-start server
-npm run visual:test || exit 1
-
-echo ""
-echo "⚡ Performance tests (Lighthouse CI)..."
-# Performance tests need a server running on port 3010
-# Check if server is already running, if not start one
-if ! lsof -ti:3010 >/dev/null 2>&1; then
-  echo "  Starting server for performance tests..."
-  npm run build || exit 1
-  PORT=3010 HOST=127.0.0.1 node node_modules/next/dist/bin/next start -p 3010 -H 127.0.0.1 > .next/performance-server.log 2>&1 &
-  SERVER_PID=$!
-  echo "$SERVER_PID" > .next/performance-server.pid
-  echo "  Server started (PID: $SERVER_PID), waiting for readiness..."
-  npx wait-on -t 120000 "tcp:127.0.0.1:3010" || { echo "❌ Server failed to start"; kill $SERVER_PID 2>/dev/null || true; exit 1; }
-  echo "  ✅ Server ready"
-fi
-
-# Run performance tests
-npm run performance:budget || EXIT_CODE=$?
-
-# Cleanup performance server if we started it
-if [ -f .next/performance-server.pid ]; then
-  PID=$(cat .next/performance-server.pid 2>/dev/null || echo "")
-  if [ -n "$PID" ] && kill -0 "$PID" 2>/dev/null; then
-    echo "  Stopping performance test server..."
-    kill "$PID" 2>/dev/null || true
-    sleep 2
-    kill -9 "$PID" 2>/dev/null || true
-  fi
-  rm -f .next/performance-server.pid
-fi
-
-if [ -n "${EXIT_CODE:-}" ]; then
-  exit $EXIT_CODE
-fi
-
-echo ""
-echo "✅ All tests passed! Safe to commit/merge."
diff --git a/stories/ContextMenu/ContextMenu.stories.js b/stories/ContextMenu/ContextMenu.stories.js
index 89adb19..32f3c45 100644
--- a/stories/ContextMenu/ContextMenu.stories.js
+++ b/stories/ContextMenu/ContextMenu.stories.js
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import ContextMenu from "../../app/components/ContextMenu/ContextMenu";
-import ContextMenuItem from "../../app/components/ContextMenu/ContextMenuItem";
-import ContextMenuSection from "../../app/components/ContextMenu/ContextMenuSection";
-import ContextMenuDivider from "../../app/components/ContextMenu/ContextMenuDivider";
+import ContextMenu from "../../app/components/modals/ContextMenu/ContextMenu";
+import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
+import ContextMenuSection from "../../app/components/modals/ContextMenu/ContextMenuSection";
+import ContextMenuDivider from "../../app/components/modals/ContextMenu/ContextMenuDivider";
 
 export default {
   title: "Components/ContextMenu/ContextMenu",
diff --git a/stories/WebVitalsDashboard.stories.js b/stories/WebVitalsDashboard.stories.js
index c4a820e..e19144c 100644
--- a/stories/WebVitalsDashboard.stories.js
+++ b/stories/WebVitalsDashboard.stories.js
@@ -1,4 +1,4 @@
-import WebVitalsDashboard from "../app/components/WebVitalsDashboard";
+import WebVitalsDashboard from "../app/components/sections/WebVitalsDashboard";
 
 export default {
   title: "Components/WebVitalsDashboard",
diff --git a/stories/asset/Icon.stories.js b/stories/asset/Icon.stories.js
new file mode 100644
index 0000000..f6c576f
--- /dev/null
+++ b/stories/asset/Icon.stories.js
@@ -0,0 +1,42 @@
+import { Icon } from "../../app/components/asset";
+
+export default {
+  title: "Components/Asset/Icon",
+  component: Icon,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    name: {
+      control: "select",
+      options: ["exclamation"],
+      description: "Name of the icon to render",
+    },
+    size: {
+      control: { type: "number", min: 12, max: 96, step: 4 },
+      description: "Width and height in pixels",
+    },
+    className: {
+      control: "text",
+      description: "Optional className applied to the SVG",
+    },
+    "aria-hidden": {
+      control: "boolean",
+      description: "Whether to mark the icon as aria-hidden",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    name: "exclamation",
+    size: 24,
+  },
+};
+
+export const Large = {
+  args: {
+    name: "exclamation",
+    size: 48,
+  },
+};
diff --git a/stories/cards/NumberCard.stories.js b/stories/cards/NumberCard.stories.js
index b03f9ff..552c933 100644
--- a/stories/cards/NumberCard.stories.js
+++ b/stories/cards/NumberCard.stories.js
@@ -56,7 +56,7 @@ export const Small = {
   args: {
     number: 1,
     text: "Document how your community makes decisions",
-    size: "Small",
+    size: "small",
     iconShape: "blob",
     iconColor: "green",
   },
@@ -74,7 +74,7 @@ export const Medium = {
   args: {
     number: 1,
     text: "Document how your community makes decisions",
-    size: "Medium",
+    size: "medium",
     iconShape: "blob",
     iconColor: "green",
   },
@@ -92,7 +92,7 @@ export const Large = {
   args: {
     number: 1,
     text: "Document how your community makes decisions",
-    size: "Large",
+    size: "large",
     iconShape: "blob",
     iconColor: "green",
   },
@@ -110,7 +110,7 @@ export const XLarge = {
   args: {
     number: 1,
     text: "Document how your community makes decisions",
-    size: "XLarge",
+    size: "xlarge",
     iconShape: "blob",
     iconColor: "green",
   },
diff --git a/stories/cards/RuleCard.stories.js b/stories/cards/RuleCard.stories.js
index 5dde74e..5378837 100644
--- a/stories/cards/RuleCard.stories.js
+++ b/stories/cards/RuleCard.stories.js
@@ -82,11 +82,11 @@ export const Expanded = {
       {
         name: "Values",
         chipOptions: [
-          { id: "values-1", label: "Consciousness", state: "Unselected" },
-          { id: "values-2", label: "Ecology", state: "Unselected" },
-          { id: "values-3", label: "Abundance", state: "Unselected" },
-          { id: "values-4", label: "Art", state: "Unselected" },
-          { id: "values-5", label: "Decisiveness", state: "Unselected" },
+          { id: "values-1", label: "Consciousness", state: "unselected" },
+          { id: "values-2", label: "Ecology", state: "unselected" },
+          { id: "values-3", label: "Abundance", state: "unselected" },
+          { id: "values-4", label: "Art", state: "unselected" },
+          { id: "values-5", label: "Decisiveness", state: "unselected" },
         ],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
@@ -97,7 +97,7 @@ export const Expanded = {
       },
       {
         name: "Communication",
-        chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
+        chipOptions: [{ id: "comm-1", label: "Signal", state: "unselected" }],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
         },
@@ -108,7 +108,7 @@ export const Expanded = {
       {
         name: "Membership",
         chipOptions: [
-          { id: "membership-1", label: "Open Admission", state: "Unselected" },
+          { id: "membership-1", label: "Open Admission", state: "unselected" },
         ],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
@@ -120,11 +120,11 @@ export const Expanded = {
       {
         name: "Decision-making",
         chipOptions: [
-          { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
+          { id: "decision-1", label: "Lazy Consensus", state: "unselected" },
           {
             id: "decision-2",
             label: "Modified Consensus",
-            state: "Unselected",
+            state: "unselected",
           },
         ],
         onChipClick: (categoryName, chipId) => {
@@ -137,11 +137,11 @@ export const Expanded = {
       {
         name: "Conflict management",
         chipOptions: [
-          { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
+          { id: "conflict-1", label: "Code of Conduct", state: "unselected" },
           {
             id: "conflict-2",
             label: "Restorative Justice",
-            state: "Unselected",
+            state: "unselected",
           },
         ],
         onChipClick: (categoryName, chipId) => {
@@ -246,42 +246,42 @@ export const ExpandedMedium = {
       {
         name: "Values",
         chipOptions: [
-          { id: "values-1", label: "Consciousness", state: "Unselected" },
-          { id: "values-2", label: "Ecology", state: "Unselected" },
-          { id: "values-3", label: "Abundance", state: "Unselected" },
-          { id: "values-4", label: "Art", state: "Unselected" },
-          { id: "values-5", label: "Decisiveness", state: "Unselected" },
+          { id: "values-1", label: "Consciousness", state: "unselected" },
+          { id: "values-2", label: "Ecology", state: "unselected" },
+          { id: "values-3", label: "Abundance", state: "unselected" },
+          { id: "values-4", label: "Art", state: "unselected" },
+          { id: "values-5", label: "Decisiveness", state: "unselected" },
         ],
       },
       {
         name: "Communication",
-        chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
+        chipOptions: [{ id: "comm-1", label: "Signal", state: "unselected" }],
       },
       {
         name: "Membership",
         chipOptions: [
-          { id: "membership-1", label: "Open Admission", state: "Unselected" },
+          { id: "membership-1", label: "Open Admission", state: "unselected" },
         ],
       },
       {
         name: "Decision-making",
         chipOptions: [
-          { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
+          { id: "decision-1", label: "Lazy Consensus", state: "unselected" },
           {
             id: "decision-2",
             label: "Modified Consensus",
-            state: "Unselected",
+            state: "unselected",
           },
         ],
       },
       {
         name: "Conflict management",
         chipOptions: [
-          { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
+          { id: "conflict-1", label: "Code of Conduct", state: "unselected" },
           {
             id: "conflict-2",
             label: "Restorative Justice",
-            state: "Unselected",
+            state: "unselected",
           },
         ],
       },
@@ -394,9 +394,9 @@ export const InteractiveStates = {
       {
         name: "Values",
         chipOptions: [
-          { id: "values-1", label: "Consciousness", state: "Unselected" },
-          { id: "values-2", label: "Ecology", state: "Unselected" },
-          { id: "values-3", label: "Abundance", state: "Unselected" },
+          { id: "values-1", label: "Consciousness", state: "unselected" },
+          { id: "values-2", label: "Ecology", state: "unselected" },
+          { id: "values-3", label: "Abundance", state: "unselected" },
         ],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
@@ -407,7 +407,7 @@ export const InteractiveStates = {
       },
       {
         name: "Communication",
-        chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
+        chipOptions: [{ id: "comm-1", label: "Signal", state: "unselected" }],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
         },
diff --git a/stories/cards/TemplateReviewCard.stories.js b/stories/cards/TemplateReviewCard.stories.js
new file mode 100644
index 0000000..f8a57a9
--- /dev/null
+++ b/stories/cards/TemplateReviewCard.stories.js
@@ -0,0 +1,66 @@
+import { TemplateReviewCard } from "../../app/components/cards/TemplateReviewCard";
+
+const sampleTemplate = {
+  id: "tmpl-1",
+  slug: "consensus",
+  title: "Consensus",
+  category: null,
+  description:
+    "Important decisions require unanimous agreement. Proposals pass only if no serious objections remain.",
+  body: {
+    sections: [
+      {
+        categoryName: "Decision making",
+        entries: [
+          { title: "How proposals pass", body: "Unanimous agreement is required." },
+          { title: "Blocks", body: "Anyone with a serious objection may block." },
+        ],
+      },
+      {
+        categoryName: "Membership",
+        entries: [
+          { title: "Joining", body: "New members are welcomed by consensus." },
+        ],
+      },
+    ],
+  },
+  sortOrder: 1,
+  featured: true,
+};
+
+export default {
+  title: "Components/Cards/TemplateReviewCard",
+  component: TemplateReviewCard,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    template: {
+      control: false,
+      description: "RuleTemplateDto used to populate the card",
+    },
+    size: {
+      control: "select",
+      options: ["XS", "S", "M", "L"],
+      description: "RuleCard size variant",
+    },
+    ruleCardClassName: {
+      control: "text",
+      description: "Class names merged onto the inner RuleCard",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    template: sampleTemplate,
+    size: "L",
+  },
+};
+
+export const Medium = {
+  args: {
+    template: sampleTemplate,
+    size: "M",
+  },
+};
diff --git a/stories/controls/Checkbox.stories.js b/stories/controls/Checkbox.stories.js
index 2963390..f0b2440 100644
--- a/stories/controls/Checkbox.stories.js
+++ b/stories/controls/Checkbox.stories.js
@@ -46,15 +46,13 @@ export default {
     },
     mode: {
       control: "select",
-      options: ["standard", "inverse", "Standard", "Inverse"],
-      description:
-        "Visual mode of the checkbox (case-insensitive: accepts both lowercase and PascalCase)",
+      options: ["standard", "inverse"],
+      description: "Visual mode of the checkbox",
     },
     state: {
       control: "select",
-      options: ["default", "hover", "focus", "Default", "Hover", "Focus"],
-      description:
-        "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
+      options: ["default", "hover", "focus"],
+      description: "Interaction state for static display",
     },
     disabled: {
       control: "boolean",
@@ -228,15 +226,15 @@ export const FigmaPascalCase = () => {
           <Checkbox
             label="Standard Mode (PascalCase)"
             checked={standardChecked}
-            mode="Standard"
-            state="Default"
+            mode="standard"
+            state="default"
             onChange={({ checked }) => setStandardChecked(checked)}
           />
           <Checkbox
             label="Inverse Mode (PascalCase)"
             checked={inverseChecked}
-            mode="Inverse"
-            state="Default"
+            mode="inverse"
+            state="default"
             onChange={({ checked }) => setInverseChecked(checked)}
           />
         </div>
@@ -256,7 +254,7 @@ export const FigmaPascalCase = () => {
             label="Inverse Mode (mixed) - still works"
             checked={false}
             mode="inverse"
-            state="Default"
+            state="default"
           />
         </div>
       </div>
diff --git a/stories/controls/Chip.stories.js b/stories/controls/Chip.stories.js
new file mode 100644
index 0000000..0370303
--- /dev/null
+++ b/stories/controls/Chip.stories.js
@@ -0,0 +1,83 @@
+import Chip from "../../app/components/controls/Chip";
+
+export default {
+  title: "Components/Controls/Chip",
+  component: Chip,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Text displayed inside the chip",
+    },
+    state: {
+      control: "select",
+      options: ["unselected", "selected", "disabled", "custom"],
+      description: "Visual state of the chip",
+    },
+    palette: {
+      control: "select",
+      options: ["default", "inverse"],
+      description: "Color palette of the chip",
+    },
+    size: {
+      control: "select",
+      options: ["s", "m"],
+      description: "Size of the chip",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Override the disabled behaviour independently of state",
+    },
+    onClick: { action: "clicked" },
+    onRemove: { action: "removed" },
+    onCheck: { action: "checked" },
+    onClose: { action: "closed" },
+  },
+};
+
+export const Default = {
+  args: {
+    label: "Worker cooperative",
+    state: "unselected",
+    palette: "default",
+    size: "m",
+  },
+};
+
+export const Selected = {
+  args: {
+    label: "Worker cooperative",
+    state: "selected",
+    palette: "default",
+    size: "m",
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: "Worker cooperative",
+    state: "disabled",
+    palette: "default",
+    size: "m",
+  },
+};
+
+export const Inverse = {
+  args: {
+    label: "Worker cooperative",
+    state: "selected",
+    palette: "inverse",
+    size: "m",
+  },
+};
+
+export const Small = {
+  args: {
+    label: "Worker cooperative",
+    state: "unselected",
+    palette: "default",
+    size: "s",
+  },
+};
diff --git a/stories/controls/InputWithCounter.stories.js b/stories/controls/InputWithCounter.stories.js
new file mode 100644
index 0000000..e0ae38b
--- /dev/null
+++ b/stories/controls/InputWithCounter.stories.js
@@ -0,0 +1,82 @@
+import React from "react";
+import InputWithCounter from "../../app/components/controls/InputWithCounter";
+
+export default {
+  title: "Components/Controls/InputWithCounter",
+  component: InputWithCounter,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label rendered above the input",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text shown when value is empty",
+    },
+    value: {
+      control: "text",
+      description: "Current value of the input (controlled)",
+    },
+    maxLength: {
+      control: { type: "number", min: 1, max: 500, step: 1 },
+      description: "Maximum number of characters allowed",
+    },
+    showHelpIcon: {
+      control: "boolean",
+      description: "Whether to show the help icon next to the label",
+    },
+    onChange: { action: "changed" },
+  },
+};
+
+const Template = (args) => {
+  const [value, setValue] = React.useState(args.value ?? "");
+  return (
+    <div style={{ width: 320 }}>
+      <InputWithCounter
+        {...args}
+        value={value}
+        onChange={(next) => {
+          setValue(next);
+          args.onChange?.(next);
+        }}
+      />
+    </div>
+  );
+};
+
+export const Default = {
+  render: Template,
+  args: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "",
+    maxLength: 50,
+    showHelpIcon: false,
+  },
+};
+
+export const WithHelpIcon = {
+  render: Template,
+  args: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "",
+    maxLength: 50,
+    showHelpIcon: true,
+  },
+};
+
+export const WithInitialValue = {
+  render: Template,
+  args: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "My community",
+    maxLength: 30,
+    showHelpIcon: false,
+  },
+};
diff --git a/stories/controls/MultiSelect.stories.js b/stories/controls/MultiSelect.stories.js
new file mode 100644
index 0000000..1952354
--- /dev/null
+++ b/stories/controls/MultiSelect.stories.js
@@ -0,0 +1,85 @@
+import React from "react";
+import MultiSelect from "../../app/components/controls/MultiSelect";
+
+export default {
+  title: "Components/Controls/MultiSelect",
+  component: MultiSelect,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label displayed above the chip set",
+    },
+    showHelpIcon: {
+      control: "boolean",
+      description: "Whether to show the help icon next to the label",
+    },
+    size: {
+      control: "select",
+      options: ["s", "m"],
+      description: "Size variant of the chips",
+    },
+    palette: {
+      control: "select",
+      options: ["default", "inverse"],
+      description: "Color palette applied to the chips",
+    },
+    addButton: {
+      control: "boolean",
+      description: "Whether to show the add button",
+    },
+    addButtonText: {
+      control: "text",
+      description: "Text rendered on the add button",
+    },
+    formHeader: {
+      control: "boolean",
+      description: "Whether to show the label/help-icon header",
+    },
+    onChipClick: { action: "chip-clicked" },
+    onAddClick: { action: "add-clicked" },
+  },
+};
+
+const defaultOptions = [
+  { id: "1", label: "Worker cooperative", state: "unselected" },
+  { id: "2", label: "Consumer cooperative", state: "selected" },
+  { id: "3", label: "Housing cooperative", state: "unselected" },
+  { id: "4", label: "Producer cooperative", state: "unselected" },
+];
+
+export const Default = {
+  args: {
+    label: "Organization type",
+    showHelpIcon: true,
+    size: "m",
+    palette: "default",
+    options: defaultOptions,
+    addButton: true,
+    addButtonText: "Add organization type",
+    formHeader: true,
+  },
+};
+
+export const Small = {
+  args: {
+    ...Default.args,
+    size: "s",
+  },
+};
+
+export const Inverse = {
+  args: {
+    ...Default.args,
+    palette: "inverse",
+  },
+};
+
+export const NoAddButton = {
+  args: {
+    ...Default.args,
+    addButton: false,
+  },
+};
diff --git a/stories/controls/RadioButton.stories.js b/stories/controls/RadioButton.stories.js
index 95ae82c..ee5237a 100644
--- a/stories/controls/RadioButton.stories.js
+++ b/stories/controls/RadioButton.stories.js
@@ -21,24 +21,13 @@ export default {
     },
     mode: {
       control: "select",
-      options: ["standard", "inverse", "Standard", "Inverse"],
-      description:
-        "Visual mode of the radio button (case-insensitive: accepts both lowercase and PascalCase)",
+      options: ["standard", "inverse"],
+      description: "Visual mode of the radio button",
     },
     state: {
       control: "select",
-      options: [
-        "default",
-        "hover",
-        "focus",
-        "selected",
-        "Default",
-        "Hover",
-        "Focus",
-        "Selected",
-      ],
-      description:
-        "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
+      options: ["default", "hover", "focus", "selected"],
+      description: "Interaction state for static display",
     },
     disabled: {
       control: "boolean",
@@ -286,15 +275,15 @@ export const FigmaPascalCase = () => {
           <RadioButton
             label="Standard Mode (PascalCase)"
             checked={standardChecked}
-            mode="Standard"
-            state="Default"
+            mode="standard"
+            state="default"
             onChange={({ checked }) => setStandardChecked(checked)}
           />
           <RadioButton
             label="Inverse Mode (PascalCase)"
             checked={inverseChecked}
-            mode="Inverse"
-            state="Default"
+            mode="inverse"
+            state="default"
             onChange={({ checked }) => setInverseChecked(checked)}
           />
         </div>
@@ -314,7 +303,7 @@ export const FigmaPascalCase = () => {
             label="Inverse Mode (mixed) - still works"
             checked={false}
             mode="inverse"
-            state="Default"
+            state="default"
           />
         </div>
       </div>
diff --git a/stories/create-flow/ApplicableScopeField.stories.js b/stories/create-flow/ApplicableScopeField.stories.js
index 13c7377..107417c 100644
--- a/stories/create-flow/ApplicableScopeField.stories.js
+++ b/stories/create-flow/ApplicableScopeField.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ApplicableScopeField from "../../app/create/components/ApplicableScopeField";
+import ApplicableScopeField from "../../app/(app)/create/components/ApplicableScopeField";
 
 export default {
   title: "Create Flow/ApplicableScopeField",
diff --git a/stories/create-flow/ModalTextAreaField.stories.js b/stories/create-flow/ModalTextAreaField.stories.js
index d557fbe..6e17f72 100644
--- a/stories/create-flow/ModalTextAreaField.stories.js
+++ b/stories/create-flow/ModalTextAreaField.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ModalTextAreaField from "../../app/create/components/ModalTextAreaField";
+import ModalTextAreaField from "../../app/(app)/create/components/ModalTextAreaField";
 
 export default {
   title: "Create Flow/ModalTextAreaField",
diff --git a/stories/localization/LanguageSwitcher.stories.js b/stories/localization/LanguageSwitcher.stories.js
new file mode 100644
index 0000000..51489eb
--- /dev/null
+++ b/stories/localization/LanguageSwitcher.stories.js
@@ -0,0 +1,19 @@
+import LanguageSwitcher from "../../app/components/localization/LanguageSwitcher";
+
+export default {
+  title: "Components/Localization/LanguageSwitcher",
+  component: LanguageSwitcher,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    className: {
+      control: "text",
+      description: "Optional wrapper className",
+    },
+  },
+};
+
+export const Default = {
+  args: {},
+};
diff --git a/stories/modals/Login.stories.tsx b/stories/modals/Login.stories.tsx
index b449be4..e240e2d 100644
--- a/stories/modals/Login.stories.tsx
+++ b/stories/modals/Login.stories.tsx
@@ -121,7 +121,7 @@ export const HeaderOverlayBlurred = {
   ),
 };
 
-/** Matches `app/login/page.tsx`: dedicated route, solid yellow, no portal. */
+/** Matches `app/(app)/login/page.tsx`: dedicated route, solid yellow, no portal. */
 export const FullPageRouteSolid = {
   name: "Full-page route (/login — solid)",
   parameters: {
diff --git a/stories/navigation/NavigationItem.stories.js b/stories/navigation/NavigationItem.stories.js
new file mode 100644
index 0000000..dc6785d
--- /dev/null
+++ b/stories/navigation/NavigationItem.stories.js
@@ -0,0 +1,75 @@
+import NavigationItem from "../../app/components/navigation/NavigationItem";
+
+export default {
+  title: "Components/Navigation/NavigationItem",
+  component: NavigationItem,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    href: {
+      control: "text",
+      description: "Anchor href",
+    },
+    variant: {
+      control: "select",
+      options: ["default"],
+      description: "Visual variant",
+    },
+    size: {
+      control: "select",
+      options: ["default", "xsmall"],
+      description: "Size variant",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disable interaction (renders as span)",
+    },
+    isActive: {
+      control: "boolean",
+      description: "Mark the item as currently active",
+    },
+    children: {
+      control: "text",
+      description: "Item label",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "default",
+  },
+};
+
+export const Active = {
+  args: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "default",
+    isActive: true,
+  },
+};
+
+export const Disabled = {
+  args: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "default",
+    disabled: true,
+  },
+};
+
+export const XSmall = {
+  args: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "xsmall",
+  },
+};
diff --git a/stories/pages/CommunicationMethodsPage.stories.js b/stories/pages/CommunicationMethodsPage.stories.js
index b85396c..ffd9d99 100644
--- a/stories/pages/CommunicationMethodsPage.stories.js
+++ b/stories/pages/CommunicationMethodsPage.stories.js
@@ -1,4 +1,4 @@
-import { CommunicationMethodsScreen } from "../../app/create/screens/card/CommunicationMethodsScreen";
+import { CommunicationMethodsScreen } from "../../app/(app)/create/screens/card/CommunicationMethodsScreen";
 
 export default {
   title: "Pages/Create Flow/Communication methods",
diff --git a/stories/pages/CompletedPage.stories.js b/stories/pages/CompletedPage.stories.js
index 21128b9..3e3ce00 100644
--- a/stories/pages/CompletedPage.stories.js
+++ b/stories/pages/CompletedPage.stories.js
@@ -1,4 +1,4 @@
-import { CompletedScreen } from "../../app/create/screens/completed/CompletedScreen";
+import { CompletedScreen } from "../../app/(app)/create/screens/completed/CompletedScreen";
 
 export default {
   title: "Pages/Create Flow/Completed",
diff --git a/stories/pages/ConfirmStakeholdersPage.stories.js b/stories/pages/ConfirmStakeholdersPage.stories.js
index adb22e0..85c2d0c 100644
--- a/stories/pages/ConfirmStakeholdersPage.stories.js
+++ b/stories/pages/ConfirmStakeholdersPage.stories.js
@@ -1,4 +1,4 @@
-import { ConfirmStakeholdersScreen } from "../../app/create/screens/select/ConfirmStakeholdersScreen";
+import { ConfirmStakeholdersScreen } from "../../app/(app)/create/screens/select/ConfirmStakeholdersScreen";
 
 export default {
   title: "Pages/Create Flow/Confirm stakeholders",
diff --git a/stories/pages/DecisionApproachesPage.stories.js b/stories/pages/DecisionApproachesPage.stories.js
index 1ab27b8..4385740 100644
--- a/stories/pages/DecisionApproachesPage.stories.js
+++ b/stories/pages/DecisionApproachesPage.stories.js
@@ -1,4 +1,4 @@
-import { DecisionApproachesScreen } from "../../app/create/screens/right-rail/DecisionApproachesScreen";
+import { DecisionApproachesScreen } from "../../app/(app)/create/screens/right-rail/DecisionApproachesScreen";
 
 export default {
   title: "Pages/Create Flow/Decision approaches",
diff --git a/stories/pages/FinalReviewPage.stories.js b/stories/pages/FinalReviewPage.stories.js
index 0653fe9..096cd2b 100644
--- a/stories/pages/FinalReviewPage.stories.js
+++ b/stories/pages/FinalReviewPage.stories.js
@@ -1,4 +1,4 @@
-import { FinalReviewScreen } from "../../app/create/screens/review/FinalReviewScreen";
+import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalReviewScreen";
 
 export default {
   title: "Pages/Create Flow/Final review",
diff --git a/stories/pages/InformationalPage.stories.js b/stories/pages/InformationalPage.stories.js
index 21f4d34..6faa8c2 100644
--- a/stories/pages/InformationalPage.stories.js
+++ b/stories/pages/InformationalPage.stories.js
@@ -1,4 +1,4 @@
-import { InformationalScreen } from "../../app/create/screens/informational/InformationalScreen";
+import { InformationalScreen } from "../../app/(app)/create/screens/informational/InformationalScreen";
 
 export default {
   title: "Pages/Create/Informational",
diff --git a/stories/pages/ReviewPage.stories.js b/stories/pages/ReviewPage.stories.js
index b68ee0a..5e6ca46 100644
--- a/stories/pages/ReviewPage.stories.js
+++ b/stories/pages/ReviewPage.stories.js
@@ -1,4 +1,4 @@
-import { CommunityReviewScreen } from "../../app/create/screens/review/CommunityReviewScreen";
+import { CommunityReviewScreen } from "../../app/(app)/create/screens/review/CommunityReviewScreen";
 
 export default {
   title: "Pages/Create/Review",
diff --git a/stories/pages/SelectPage.stories.js b/stories/pages/SelectPage.stories.js
index a0c5307..b861666 100644
--- a/stories/pages/SelectPage.stories.js
+++ b/stories/pages/SelectPage.stories.js
@@ -1,4 +1,4 @@
-import { CommunitySizeSelectScreen } from "../../app/create/screens/select/CommunitySizeSelectScreen";
+import { CommunitySizeSelectScreen } from "../../app/(app)/create/screens/select/CommunitySizeSelectScreen";
 
 export default {
   title: "Pages/Create/CommunitySize",
diff --git a/stories/pages/TextPage.stories.js b/stories/pages/TextPage.stories.js
index 1510cea..b6ef156 100644
--- a/stories/pages/TextPage.stories.js
+++ b/stories/pages/TextPage.stories.js
@@ -1,4 +1,4 @@
-import { CreateFlowTextFieldScreen } from "../../app/create/screens/text/CreateFlowTextFieldScreen";
+import { CreateFlowTextFieldScreen } from "../../app/(app)/create/screens/text/CreateFlowTextFieldScreen";
 
 export default {
   title: "Pages/Create/CommunityName",
diff --git a/stories/pages/UploadPage.stories.js b/stories/pages/UploadPage.stories.js
index 387e999..9a1ef53 100644
--- a/stories/pages/UploadPage.stories.js
+++ b/stories/pages/UploadPage.stories.js
@@ -1,4 +1,4 @@
-import { CommunityUploadScreen } from "../../app/create/screens/upload/CommunityUploadScreen";
+import { CommunityUploadScreen } from "../../app/(app)/create/screens/upload/CommunityUploadScreen";
 
 export default {
   title: "Pages/Create/CommunityUpload",
diff --git a/stories/progress/ProportionBar.stories.js b/stories/progress/ProportionBar.stories.js
index 9907056..b5b1773 100644
--- a/stories/progress/ProportionBar.stories.js
+++ b/stories/progress/ProportionBar.stories.js
@@ -15,7 +15,7 @@ export default {
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: ["default", "segmented", "Default", "Segmented"],
+      options: ["default", "segmented"],
       description:
         "Segmented: pill-shaped partial fills (create-flow footer / Figma).",
     },
diff --git a/stories/sections/CommunityRuleDocument.stories.js b/stories/sections/CommunityRuleDocument.stories.js
new file mode 100644
index 0000000..f882157
--- /dev/null
+++ b/stories/sections/CommunityRuleDocument.stories.js
@@ -0,0 +1,58 @@
+import CommunityRuleDocument from "../../app/components/sections/CommunityRuleDocument";
+
+const sampleSections = [
+  {
+    categoryName: "Decision making",
+    entries: [
+      {
+        title: "How proposals pass",
+        body: "Important decisions require unanimous agreement. Proposals pass only if no serious objections remain.",
+      },
+      {
+        title: "Blocks",
+        body: "Anyone with a serious objection may block consensus and require further discussion.",
+      },
+    ],
+  },
+  {
+    categoryName: "Membership",
+    entries: [
+      {
+        title: "Joining",
+        body: "New members are welcomed by consensus of existing members.",
+      },
+    ],
+  },
+];
+
+export default {
+  title: "Components/Sections/CommunityRuleDocument",
+  component: CommunityRuleDocument,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    sections: {
+      control: false,
+      description: "Document sections, each with a categoryName and entries.",
+    },
+    useCardStyle: {
+      control: "boolean",
+      description: "When true, wraps the document in a white card with a teal bar",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    sections: sampleSections,
+    useCardStyle: false,
+  },
+};
+
+export const CardStyle = {
+  args: {
+    sections: sampleSections,
+    useCardStyle: true,
+  },
+};
diff --git a/stories/sections/GovernanceTemplateGrid.stories.js b/stories/sections/GovernanceTemplateGrid.stories.js
new file mode 100644
index 0000000..1762e20
--- /dev/null
+++ b/stories/sections/GovernanceTemplateGrid.stories.js
@@ -0,0 +1,29 @@
+import { GovernanceTemplateGrid } from "../../app/components/sections/GovernanceTemplateGrid";
+import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
+
+export default {
+  title: "Components/Sections/GovernanceTemplateGrid",
+  component: GovernanceTemplateGrid,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    entries: {
+      control: false,
+      description: "Catalog entries to render as a 2-column grid of RuleCards",
+    },
+    onTemplateClick: { action: "template-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    entries: GOVERNANCE_TEMPLATE_CATALOG.slice(0, 4),
+  },
+};
+
+export const SingleEntry = {
+  args: {
+    entries: GOVERNANCE_TEMPLATE_CATALOG.slice(0, 1),
+  },
+};
diff --git a/stories/utility/ErrorBoundary.stories.js b/stories/utility/ErrorBoundary.stories.js
deleted file mode 100644
index a2eccf4..0000000
--- a/stories/utility/ErrorBoundary.stories.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import ErrorBoundary from "../../app/components/utility/ErrorBoundary";
-
-export default {
-  title: "Components/Utility/ErrorBoundary",
-  component: ErrorBoundary,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "An error boundary component that catches JavaScript errors in its child component tree. Displays a fallback UI when errors occur and logs error information for debugging.",
-      },
-    },
-  },
-  argTypes: {
-    children: {
-      control: { type: "text" },
-      description: "Child components to wrap with error boundary",
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    children: <div>Normal content</div>,
-  },
-};
-
-export const WithError = {
-  render: () => {
-    const ThrowError = () => {
-      throw new Error("Test error for ErrorBoundary");
-    };
-    return (
-      <ErrorBoundary>
-        <ThrowError />
-      </ErrorBoundary>
-    );
-  },
-};
diff --git a/stories/utility/ModalFooter.stories.js b/stories/utility/ModalFooter.stories.js
new file mode 100644
index 0000000..983d5ca
--- /dev/null
+++ b/stories/utility/ModalFooter.stories.js
@@ -0,0 +1,71 @@
+import ModalFooter from "../../app/components/utility/ModalFooter";
+
+export default {
+  title: "Components/Utility/ModalFooter",
+  component: ModalFooter,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    showBackButton: {
+      control: "boolean",
+      description: "Whether to render the back button on the left",
+    },
+    showNextButton: {
+      control: "boolean",
+      description: "Whether to render the next button on the right",
+    },
+    backButtonText: {
+      control: "text",
+      description: "Override text for the back button",
+    },
+    nextButtonText: {
+      control: "text",
+      description: "Override text for the next button",
+    },
+    nextButtonDisabled: {
+      control: "boolean",
+      description: "Whether the next button is disabled",
+    },
+    currentStep: {
+      control: { type: "number", min: 1, max: 10, step: 1 },
+      description: "Current step (used by the centered Stepper)",
+    },
+    totalSteps: {
+      control: { type: "number", min: 1, max: 10, step: 1 },
+      description: "Total number of steps",
+    },
+    stepper: {
+      control: "boolean",
+      description: "Whether to render the centered stepper",
+    },
+    onBack: { action: "back-clicked" },
+    onNext: { action: "next-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    showBackButton: true,
+    showNextButton: true,
+    currentStep: 2,
+    totalSteps: 4,
+  },
+};
+
+export const NextDisabled = {
+  args: {
+    showBackButton: true,
+    showNextButton: true,
+    nextButtonDisabled: true,
+    currentStep: 1,
+    totalSteps: 4,
+  },
+};
+
+export const NextOnly = {
+  args: {
+    showBackButton: false,
+    showNextButton: true,
+  },
+};
diff --git a/stories/utility/ModalHeader.stories.js b/stories/utility/ModalHeader.stories.js
new file mode 100644
index 0000000..12498ee
--- /dev/null
+++ b/stories/utility/ModalHeader.stories.js
@@ -0,0 +1,42 @@
+import ModalHeader from "../../app/components/utility/ModalHeader";
+
+export default {
+  title: "Components/Utility/ModalHeader",
+  component: ModalHeader,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    showCloseButton: {
+      control: "boolean",
+      description: "Whether to render the close button on the left",
+    },
+    showMoreOptionsButton: {
+      control: "boolean",
+      description: "Whether to render the more-options button on the right",
+    },
+    onClose: { action: "close-clicked" },
+    onMoreOptions: { action: "more-options-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    showCloseButton: true,
+    showMoreOptionsButton: true,
+  },
+};
+
+export const CloseOnly = {
+  args: {
+    showCloseButton: true,
+    showMoreOptionsButton: false,
+  },
+};
+
+export const MoreOptionsOnly = {
+  args: {
+    showCloseButton: false,
+    showMoreOptionsButton: true,
+  },
+};
diff --git a/stories/utility/Separator.stories.js b/stories/utility/Separator.stories.js
new file mode 100644
index 0000000..f708afe
--- /dev/null
+++ b/stories/utility/Separator.stories.js
@@ -0,0 +1,28 @@
+import Separator from "../../app/components/utility/Separator";
+
+export default {
+  title: "Components/Utility/Separator",
+  component: Separator,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {},
+};
+
+export const Default = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <Separator />
+    </div>
+  ),
+};
+
+export const InContext = {
+  render: () => (
+    <div style={{ width: 320, display: "flex", flexDirection: "column", gap: 12 }}>
+      <p>Above the separator</p>
+      <Separator />
+      <p>Below the separator</p>
+    </div>
+  ),
+};
diff --git a/tests/components/ApplicableScopeField.test.tsx b/tests/components/ApplicableScopeField.test.tsx
index 0dee4b0..7daaa2c 100644
--- a/tests/components/ApplicableScopeField.test.tsx
+++ b/tests/components/ApplicableScopeField.test.tsx
@@ -3,7 +3,7 @@ import { describe, it, expect, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
-import ApplicableScopeField from "../../app/create/components/ApplicableScopeField";
+import ApplicableScopeField from "../../app/(app)/create/components/ApplicableScopeField";
 import { componentTestSuite } from "../utils/componentTestSuite";
 import { renderWithProviders } from "../utils/test-utils";
 
diff --git a/tests/components/Button.test.tsx b/tests/components/Button.test.tsx
index a5a9957..4cd964d 100644
--- a/tests/components/Button.test.tsx
+++ b/tests/components/Button.test.tsx
@@ -39,6 +39,7 @@ const config: ComponentTestSuiteConfig<ButtonProps> = {
 
 componentTestSuite<ButtonProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("Button (behavioral tests)", () => {
   it("calls onClick when clicked", async () => {
     const user = userEvent.setup();
diff --git a/tests/components/Chip.test.tsx b/tests/components/Chip.test.tsx
new file mode 100644
index 0000000..5463f39
--- /dev/null
+++ b/tests/components/Chip.test.tsx
@@ -0,0 +1,33 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import Chip from "../../app/components/controls/Chip";
+
+type Props = React.ComponentProps<typeof Chip>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: Chip,
+  name: "Chip",
+  props: {
+    label: "Worker cooperative",
+    state: "unselected",
+    palette: "default",
+    size: "m",
+  } as Props,
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: true,
+    disabledState: true,
+  },
+  states: {
+    disabledProps: { disabled: true, state: "disabled" },
+  },
+};
+
+describe("Chip", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/CommunityRuleDocument.test.tsx b/tests/components/CommunityRuleDocument.test.tsx
new file mode 100644
index 0000000..e52aa17
--- /dev/null
+++ b/tests/components/CommunityRuleDocument.test.tsx
@@ -0,0 +1,37 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import CommunityRuleDocument from "../../app/components/sections/CommunityRuleDocument";
+
+type Props = React.ComponentProps<typeof CommunityRuleDocument>;
+
+const sampleSections = [
+  {
+    categoryName: "Decision making",
+    entries: [
+      {
+        title: "How proposals pass",
+        body: "Important decisions require unanimous agreement.",
+      },
+    ],
+  },
+];
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: CommunityRuleDocument,
+  name: "CommunityRuleDocument",
+  props: {
+    sections: sampleSections,
+  } as Props,
+  requiredProps: ["sections"],
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("CommunityRuleDocument", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/CompletedPage.test.tsx b/tests/components/CompletedPage.test.tsx
index 4cc7474..cc30bd0 100644
--- a/tests/components/CompletedPage.test.tsx
+++ b/tests/components/CompletedPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CompletedScreen } from "../../app/create/screens/completed/CompletedScreen";
+import { CompletedScreen } from "../../app/(app)/create/screens/completed/CompletedScreen";
 
 describe("CompletedScreen", () => {
   it("renders without crashing", () => {
diff --git a/tests/components/ConfirmStakeholdersPage.test.tsx b/tests/components/ConfirmStakeholdersPage.test.tsx
index cdde162..8f85373 100644
--- a/tests/components/ConfirmStakeholdersPage.test.tsx
+++ b/tests/components/ConfirmStakeholdersPage.test.tsx
@@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { ConfirmStakeholdersScreen } from "../../app/create/screens/select/ConfirmStakeholdersScreen";
+import { ConfirmStakeholdersScreen } from "../../app/(app)/create/screens/select/ConfirmStakeholdersScreen";
 
 describe("ConfirmStakeholdersScreen", () => {
   it("renders title and description", () => {
diff --git a/tests/components/ContentBanner.test.tsx b/tests/components/ContentBanner.test.tsx
index 0c73395..c4c7321 100644
--- a/tests/components/ContentBanner.test.tsx
+++ b/tests/components/ContentBanner.test.tsx
@@ -43,6 +43,7 @@ const mockPost: BlogPost = {
   lastModified: new Date("2025-04-15"),
 };
 
+// Pure presentational; no provider context needed.
 describe("ContentBanner", () => {
   it("renders without crashing", () => {
     render(<ContentBanner post={mockPost} />);
diff --git a/tests/components/ContextMenu.test.tsx b/tests/components/ContextMenu.test.tsx
index b5ac1f5..c2899df 100644
--- a/tests/components/ContextMenu.test.tsx
+++ b/tests/components/ContextMenu.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import ContextMenu from "../../app/components/ContextMenu/ContextMenu";
-import ContextMenuItem from "../../app/components/ContextMenu/ContextMenuItem";
+import ContextMenu from "../../app/components/modals/ContextMenu/ContextMenu";
+import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
 type ContextMenuProps = React.ComponentProps<typeof ContextMenu>;
diff --git a/tests/components/ContextMenuItem.test.tsx b/tests/components/ContextMenuItem.test.tsx
index e14aa43..bdb27f3 100644
--- a/tests/components/ContextMenuItem.test.tsx
+++ b/tests/components/ContextMenuItem.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import ContextMenuItem from "../../app/components/ContextMenu/ContextMenuItem";
+import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
 type ContextMenuItemProps = React.ComponentProps<typeof ContextMenuItem>;
diff --git a/tests/components/CoreValuesSelectScreen.test.tsx b/tests/components/CoreValuesSelectScreen.test.tsx
index c6ddaf7..a4ca54b 100644
--- a/tests/components/CoreValuesSelectScreen.test.tsx
+++ b/tests/components/CoreValuesSelectScreen.test.tsx
@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { screen, fireEvent, waitFor, within } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
 import { renderWithProviders } from "../utils/test-utils";
-import { CoreValuesSelectScreen } from "../../app/create/screens/select/CoreValuesSelectScreen";
+import { CoreValuesSelectScreen } from "../../app/(app)/create/screens/select/CoreValuesSelectScreen";
 
 describe("CoreValuesSelectScreen", () => {
   beforeEach(() => {
diff --git a/tests/components/CreateFlowFooter.test.tsx b/tests/components/CreateFlowFooter.test.tsx
index 947d66e..fa8d5ae 100644
--- a/tests/components/CreateFlowFooter.test.tsx
+++ b/tests/components/CreateFlowFooter.test.tsx
@@ -35,6 +35,7 @@ const config: ComponentTestSuiteConfig<CreateFlowFooterProps> = {
 
 componentTestSuite<CreateFlowFooterProps>(config);
 
+// Pure presentational; no provider context needed (no useMessages/useAuthModal/useCreateFlow consumers).
 describe("CreateFlowFooter (behavioral tests)", () => {
   it("renders Back button", () => {
     render(<CreateFlowFooter />);
diff --git a/tests/components/FinalReviewPage.test.tsx b/tests/components/FinalReviewPage.test.tsx
index 231bb15..364c46a 100644
--- a/tests/components/FinalReviewPage.test.tsx
+++ b/tests/components/FinalReviewPage.test.tsx
@@ -6,8 +6,8 @@ import {
   waitFor,
 } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { FinalReviewScreen } from "../../app/create/screens/review/FinalReviewScreen";
-import { useCreateFlow } from "../../app/create/context/CreateFlowContext";
+import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalReviewScreen";
+import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
 
 const FALLBACK_CARD_TITLE = "Your community";
 const FALLBACK_CARD_DESCRIPTION_SNIPPET =
diff --git a/tests/components/GovernanceTemplateGrid.test.tsx b/tests/components/GovernanceTemplateGrid.test.tsx
new file mode 100644
index 0000000..8c61694
--- /dev/null
+++ b/tests/components/GovernanceTemplateGrid.test.tsx
@@ -0,0 +1,28 @@
+import { describe, vi } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import { GovernanceTemplateGrid } from "../../app/components/sections/GovernanceTemplateGrid";
+import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
+
+type Props = React.ComponentProps<typeof GovernanceTemplateGrid>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: GovernanceTemplateGrid,
+  name: "GovernanceTemplateGrid",
+  props: {
+    entries: GOVERNANCE_TEMPLATE_CATALOG.slice(0, 2),
+    onTemplateClick: vi.fn(),
+  } as Props,
+  requiredProps: ["entries", "onTemplateClick"],
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("GovernanceTemplateGrid", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/HeaderLockup.test.tsx b/tests/components/HeaderLockup.test.tsx
index 3a8e273..4c8912d 100644
--- a/tests/components/HeaderLockup.test.tsx
+++ b/tests/components/HeaderLockup.test.tsx
@@ -36,6 +36,7 @@ const config: ComponentTestSuiteConfig<HeaderLockupProps> = {
 
 componentTestSuite<HeaderLockupProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("HeaderLockup (behavioral tests)", () => {
   it("renders title", () => {
     render(<HeaderLockup title="Test Title" />);
@@ -84,8 +85,8 @@ describe("HeaderLockup (behavioral tests)", () => {
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 
-  it("accepts PascalCase props", () => {
-    render(<HeaderLockup title="Test Title" justification="Left" size="L" />);
+  it("accepts justification and size props", () => {
+    render(<HeaderLockup title="Test Title" justification="left" size="L" />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 });
diff --git a/tests/components/Icon.test.tsx b/tests/components/Icon.test.tsx
new file mode 100644
index 0000000..27921f9
--- /dev/null
+++ b/tests/components/Icon.test.tsx
@@ -0,0 +1,26 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import { Icon } from "../../app/components/asset";
+
+type Props = React.ComponentProps<typeof Icon>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: Icon,
+  name: "Icon",
+  props: {
+    name: "exclamation",
+    size: 24,
+  } as Props,
+  requiredProps: ["name"],
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("Icon", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/IconCard.test.tsx b/tests/components/IconCard.test.tsx
index d4e9859..c39bbe0 100644
--- a/tests/components/IconCard.test.tsx
+++ b/tests/components/IconCard.test.tsx
@@ -38,6 +38,7 @@ const config: ComponentTestSuiteConfig<IconCardProps> = {
 
 componentTestSuite<IconCardProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("IconCard (behavioral tests)", () => {
   it("calls onClick when clicked", () => {
     const handleClick = vi.fn();
diff --git a/tests/components/InformationalPage.test.tsx b/tests/components/InformationalPage.test.tsx
index 0d2f622..a0b8d98 100644
--- a/tests/components/InformationalPage.test.tsx
+++ b/tests/components/InformationalPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { InformationalScreen } from "../../app/create/screens/informational/InformationalScreen";
+import { InformationalScreen } from "../../app/(app)/create/screens/informational/InformationalScreen";
 
 describe("InformationalScreen", () => {
   it("renders without crashing", () => {
diff --git a/tests/components/InputLabel.test.tsx b/tests/components/InputLabel.test.tsx
index f59966d..c177dbe 100644
--- a/tests/components/InputLabel.test.tsx
+++ b/tests/components/InputLabel.test.tsx
@@ -17,16 +17,16 @@ const config: ComponentTestSuiteConfig<Props> = {
     helpIcon: false,
     asterisk: false,
     helperText: false,
-    size: "S",
-    palette: "Default",
+    size: "s",
+    palette: "default",
   } as Props,
   requiredProps: ["label"],
   optionalProps: {
     helpIcon: true,
     asterisk: true,
     helperText: true,
-    size: "M",
-    palette: "Inverse",
+    size: "m",
+    palette: "inverse",
   },
   primaryRole: undefined, // InputLabel is not directly interactive
   testCases: {
@@ -67,28 +67,28 @@ describe("InputLabel – behaviour specifics", () => {
     expect(screen.getByText("Custom helper")).toBeInTheDocument();
   });
 
-  it("applies size S styling", () => {
-    render(<InputLabel label="Test Label" size="S" />);
+  it("applies size s styling", () => {
+    render(<InputLabel label="Test Label" size="s" />);
     const label = screen.getByText("Test Label");
     expect(label).toHaveClass("text-[length:var(--sizing-350,14px)]");
   });
 
-  it("applies size M styling", () => {
-    render(<InputLabel label="Test Label" size="M" />);
+  it("applies size m styling", () => {
+    render(<InputLabel label="Test Label" size="m" />);
     const label = screen.getByText("Test Label");
     expect(label).toHaveClass("text-[length:var(--sizing-400,16px)]");
   });
 
-  it("applies Default palette styling", () => {
-    render(<InputLabel label="Test Label" palette="Default" />);
+  it("applies default palette styling", () => {
+    render(<InputLabel label="Test Label" palette="default" />);
     const label = screen.getByText("Test Label");
     expect(label).toHaveClass(
       "text-[color:var(--color-content-default-secondary,#d2d2d2)]",
     );
   });
 
-  it("applies Inverse palette styling", () => {
-    render(<InputLabel label="Test Label" palette="Inverse" />);
+  it("applies inverse palette styling", () => {
+    render(<InputLabel label="Test Label" palette="inverse" />);
     const label = screen.getByText("Test Label");
     expect(label).toHaveClass(
       "text-[color:var(--color-content-inverse-secondary,#1f1f1f)]",
diff --git a/tests/components/InputWithCounter.test.tsx b/tests/components/InputWithCounter.test.tsx
new file mode 100644
index 0000000..93bd3a5
--- /dev/null
+++ b/tests/components/InputWithCounter.test.tsx
@@ -0,0 +1,31 @@
+import { describe, vi } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import InputWithCounter from "../../app/components/controls/InputWithCounter";
+
+type Props = React.ComponentProps<typeof InputWithCounter>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: InputWithCounter,
+  name: "InputWithCounter",
+  props: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "",
+    onChange: vi.fn(),
+    maxLength: 50,
+    showHelpIcon: false,
+  } as Props,
+  requiredProps: ["value", "onChange", "maxLength"],
+  primaryRole: "textbox",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("InputWithCounter", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/LanguageSwitcher.test.tsx b/tests/components/LanguageSwitcher.test.tsx
new file mode 100644
index 0000000..daff467
--- /dev/null
+++ b/tests/components/LanguageSwitcher.test.tsx
@@ -0,0 +1,23 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import LanguageSwitcher from "../../app/components/localization/LanguageSwitcher";
+
+type Props = React.ComponentProps<typeof LanguageSwitcher>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: LanguageSwitcher,
+  name: "LanguageSwitcher",
+  props: {} as Props,
+  primaryRole: "combobox",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("LanguageSwitcher", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/LoginForm.test.tsx b/tests/components/LoginForm.test.tsx
index 8a56e58..4ae6ab9 100644
--- a/tests/components/LoginForm.test.tsx
+++ b/tests/components/LoginForm.test.tsx
@@ -32,10 +32,10 @@ vi.mock("../../lib/create/api", () => ({
   requestMagicLink: vi.fn(),
 }));
 
-vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) => {
+vi.mock("../../app/(app)/create/utils/anonymousDraftStorage", async (importOriginal) => {
   const actual =
     await importOriginal<
-      typeof import("../../app/create/utils/anonymousDraftStorage")
+      typeof import("../../app/(app)/create/utils/anonymousDraftStorage")
     >();
   return {
     ...actual,
@@ -44,7 +44,7 @@ vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) =
 });
 
 import { requestMagicLink } from "../../lib/create/api";
-import { setTransferPendingFlag } from "../../app/create/utils/anonymousDraftStorage";
+import { setTransferPendingFlag } from "../../app/(app)/create/utils/anonymousDraftStorage";
 
 function renderLoginForm() {
   return renderWithProviders(
diff --git a/tests/components/Logo.test.tsx b/tests/components/Logo.test.tsx
index ffcbd66..7969ec7 100644
--- a/tests/components/Logo.test.tsx
+++ b/tests/components/Logo.test.tsx
@@ -27,6 +27,7 @@ const config: ComponentTestSuiteConfig<LogoProps> = {
 
 componentTestSuite<LogoProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("Logo (behavioral tests)", () => {
   it("renders as a link to home", () => {
     render(<Logo />);
diff --git a/tests/components/ModalFooter.test.tsx b/tests/components/ModalFooter.test.tsx
new file mode 100644
index 0000000..80a7545
--- /dev/null
+++ b/tests/components/ModalFooter.test.tsx
@@ -0,0 +1,30 @@
+import { describe, vi } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import ModalFooter from "../../app/components/utility/ModalFooter";
+
+type Props = React.ComponentProps<typeof ModalFooter>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: ModalFooter,
+  name: "ModalFooter",
+  props: {
+    showBackButton: true,
+    showNextButton: true,
+    onBack: vi.fn(),
+    onNext: vi.fn(),
+    currentStep: 2,
+    totalSteps: 4,
+  } as Props,
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("ModalFooter", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/ModalHeader.test.tsx b/tests/components/ModalHeader.test.tsx
new file mode 100644
index 0000000..6ed1ed8
--- /dev/null
+++ b/tests/components/ModalHeader.test.tsx
@@ -0,0 +1,28 @@
+import { describe, vi } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import ModalHeader from "../../app/components/utility/ModalHeader";
+
+type Props = React.ComponentProps<typeof ModalHeader>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: ModalHeader,
+  name: "ModalHeader",
+  props: {
+    showCloseButton: true,
+    showMoreOptionsButton: true,
+    onClose: vi.fn(),
+    onMoreOptions: vi.fn(),
+  } as Props,
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("ModalHeader", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/ModalTextAreaField.test.tsx b/tests/components/ModalTextAreaField.test.tsx
index 98a5bd9..043b4b5 100644
--- a/tests/components/ModalTextAreaField.test.tsx
+++ b/tests/components/ModalTextAreaField.test.tsx
@@ -3,7 +3,7 @@ import { describe, it, expect, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
-import ModalTextAreaField from "../../app/create/components/ModalTextAreaField";
+import ModalTextAreaField from "../../app/(app)/create/components/ModalTextAreaField";
 import { componentTestSuite } from "../utils/componentTestSuite";
 import { renderWithProviders } from "../utils/test-utils";
 
diff --git a/tests/components/MultiSelect.test.tsx b/tests/components/MultiSelect.test.tsx
index 1f2b376..464ddb0 100644
--- a/tests/components/MultiSelect.test.tsx
+++ b/tests/components/MultiSelect.test.tsx
@@ -11,8 +11,8 @@ import {
 type Props = React.ComponentProps<typeof MultiSelect>;
 
 const defaultChipOptions = [
-  { id: "1", label: "Option 1", state: "Unselected" as const },
-  { id: "2", label: "Option 2", state: "Selected" as const },
+  { id: "1", label: "Option 1", state: "unselected" as const },
+  { id: "2", label: "Option 2", state: "selected" as const },
 ];
 
 const config: ComponentTestSuiteConfig<Props> = {
@@ -21,8 +21,8 @@ const config: ComponentTestSuiteConfig<Props> = {
   props: {
     label: "Test Label",
     showHelpIcon: false,
-    size: "S",
-    palette: "Default",
+    size: "s",
+    palette: "default",
     options: defaultChipOptions,
     addButton: true,
     addButtonText: "",
@@ -31,8 +31,8 @@ const config: ComponentTestSuiteConfig<Props> = {
   optionalProps: {
     label: "Optional Label",
     showHelpIcon: true,
-    size: "M",
-    palette: "Inverse",
+    size: "m",
+    palette: "inverse",
     onChipClick: vi.fn(),
     onAddClick: vi.fn(),
     addButton: false,
@@ -144,7 +144,7 @@ describe("MultiSelect – behaviour specifics", () => {
   it("handles custom chip confirm", async () => {
     const handleConfirm = vi.fn();
     const customOptions = [
-      { id: "custom-1", label: "", state: "Custom" as const },
+      { id: "custom-1", label: "", state: "custom" as const },
     ];
     render(
       <MultiSelect
@@ -169,7 +169,7 @@ describe("MultiSelect – behaviour specifics", () => {
   it("handles custom chip close", async () => {
     const handleClose = vi.fn();
     const customOptions = [
-      { id: "custom-1", label: "", state: "Custom" as const },
+      { id: "custom-1", label: "", state: "custom" as const },
     ];
     render(
       <MultiSelect options={customOptions} onCustomChipClose={handleClose} />,
diff --git a/tests/components/NavigationItem.test.tsx b/tests/components/NavigationItem.test.tsx
new file mode 100644
index 0000000..f05d24c
--- /dev/null
+++ b/tests/components/NavigationItem.test.tsx
@@ -0,0 +1,29 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import NavigationItem from "../../app/components/navigation/NavigationItem";
+
+type Props = React.ComponentProps<typeof NavigationItem>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: NavigationItem,
+  name: "NavigationItem",
+  props: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "default",
+  } as Props,
+  primaryRole: "link",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: true,
+  },
+};
+
+describe("NavigationItem", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/NumberedList.test.tsx b/tests/components/NumberedList.test.tsx
index 8e8f2f8..0b9b958 100644
--- a/tests/components/NumberedList.test.tsx
+++ b/tests/components/NumberedList.test.tsx
@@ -49,6 +49,7 @@ const config: ComponentTestSuiteConfig<NumberedListProps> = {
 
 componentTestSuite<NumberedListProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("NumberedList (behavioral tests)", () => {
   it("renders all items", () => {
     render(<NumberedList items={mockItems} />);
diff --git a/tests/components/ProportionBar.test.tsx b/tests/components/ProportionBar.test.tsx
index abd28bb..c6fdd18 100644
--- a/tests/components/ProportionBar.test.tsx
+++ b/tests/components/ProportionBar.test.tsx
@@ -36,6 +36,7 @@ const config: ComponentTestSuiteConfig<ProportionBarProps> = {
 
 componentTestSuite<ProportionBarProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("ProportionBar (behavioral tests)", () => {
   it("renders proportion bar with correct progress value", () => {
     render(<ProportionBar progress="2-1" />);
diff --git a/tests/components/RelatedArticles.test.tsx b/tests/components/RelatedArticles.test.tsx
index 65a2016..a0ecf58 100644
--- a/tests/components/RelatedArticles.test.tsx
+++ b/tests/components/RelatedArticles.test.tsx
@@ -63,6 +63,7 @@ const mockPosts: BlogPost[] = [
   },
 ];
 
+// Pure presentational; no provider context needed (mocked thumbnail + useIsMobile).
 describe("RelatedArticles", () => {
   it("renders without crashing", () => {
     render(
diff --git a/tests/components/ReviewPage.test.tsx b/tests/components/ReviewPage.test.tsx
index 612f2f9..880db9b 100644
--- a/tests/components/ReviewPage.test.tsx
+++ b/tests/components/ReviewPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CommunityReviewScreen } from "../../app/create/screens/review/CommunityReviewScreen";
+import { CommunityReviewScreen } from "../../app/(app)/create/screens/review/CommunityReviewScreen";
 
 describe("CommunityReviewScreen", () => {
   it("renders without crashing", () => {
diff --git a/tests/components/SelectPage.test.tsx b/tests/components/SelectPage.test.tsx
index 438a0e5..c940303 100644
--- a/tests/components/SelectPage.test.tsx
+++ b/tests/components/SelectPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CommunitySizeSelectScreen } from "../../app/create/screens/select/CommunitySizeSelectScreen";
+import { CommunitySizeSelectScreen } from "../../app/(app)/create/screens/select/CommunitySizeSelectScreen";
 
 describe("CommunitySizeSelectScreen", () => {
   it("renders HeaderLockup title", () => {
diff --git a/tests/components/Separator.test.tsx b/tests/components/Separator.test.tsx
new file mode 100644
index 0000000..5405ff1
--- /dev/null
+++ b/tests/components/Separator.test.tsx
@@ -0,0 +1,22 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import Separator from "../../app/components/utility/Separator";
+
+type Props = React.ComponentProps<typeof Separator>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: Separator,
+  name: "Separator",
+  props: {} as Props,
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("Separator", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/Stepper.test.tsx b/tests/components/Stepper.test.tsx
index fe0edd9..bf81024 100644
--- a/tests/components/Stepper.test.tsx
+++ b/tests/components/Stepper.test.tsx
@@ -37,6 +37,7 @@ const config: ComponentTestSuiteConfig<StepperProps> = {
 
 componentTestSuite<StepperProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("Stepper (behavioral tests)", () => {
   it("renders with correct number of steps", () => {
     render(<Stepper active={3} totalSteps={5} />);
diff --git a/tests/components/TemplateReviewCard.test.tsx b/tests/components/TemplateReviewCard.test.tsx
new file mode 100644
index 0000000..7367c7f
--- /dev/null
+++ b/tests/components/TemplateReviewCard.test.tsx
@@ -0,0 +1,52 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import { TemplateReviewCard } from "../../app/components/cards/TemplateReviewCard";
+
+type Props = React.ComponentProps<typeof TemplateReviewCard>;
+
+const sampleTemplate = {
+  id: "tmpl-1",
+  slug: "consensus",
+  title: "Consensus",
+  category: null,
+  description:
+    "Important decisions require unanimous agreement. Proposals pass only if no serious objections remain.",
+  body: {
+    sections: [
+      {
+        categoryName: "Decision making",
+        entries: [
+          {
+            title: "How proposals pass",
+            body: "Unanimous agreement is required.",
+          },
+        ],
+      },
+    ],
+  },
+  sortOrder: 1,
+  featured: true,
+};
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: TemplateReviewCard,
+  name: "TemplateReviewCard",
+  props: {
+    template: sampleTemplate,
+    size: "L",
+  } as Props,
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    // RuleCard contains nested interactive elements (chips inside a clickable card)
+    // which trigger axe's "nested-interactive" rule. Tracked by RuleCard itself.
+    accessibility: false,
+  },
+};
+
+describe("TemplateReviewCard", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/TextInput.test.tsx b/tests/components/TextInput.test.tsx
index a565f36..77c1e28 100644
--- a/tests/components/TextInput.test.tsx
+++ b/tests/components/TextInput.test.tsx
@@ -32,6 +32,7 @@ componentTestSuite<TextInputProps>({
   },
 });
 
+// Pure presentational; no provider context needed.
 describe("TextInput (size tests)", () => {
   it("renders with medium size by default", () => {
     const { container } = render(<TextInput label="Test" inputSize="medium" />);
@@ -45,9 +46,4 @@ describe("TextInput (size tests)", () => {
     expect(input).toHaveClass("h-[32px]");
   });
 
-  it("accepts PascalCase size prop", () => {
-    const { container } = render(<TextInput label="Test" inputSize="Small" />);
-    const input = container.querySelector("input");
-    expect(input).toHaveClass("h-[32px]");
-  });
 });
diff --git a/tests/components/TextPage.test.tsx b/tests/components/TextPage.test.tsx
index 8be403c..6722f9e 100644
--- a/tests/components/TextPage.test.tsx
+++ b/tests/components/TextPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CreateFlowTextFieldScreen } from "../../app/create/screens/text/CreateFlowTextFieldScreen";
+import { CreateFlowTextFieldScreen } from "../../app/(app)/create/screens/text/CreateFlowTextFieldScreen";
 
 describe("CreateFlowTextFieldScreen (community name)", () => {
   it("renders main heading", () => {
diff --git a/tests/components/Tooltip.test.tsx b/tests/components/Tooltip.test.tsx
index 1a83aa9..983c651 100644
--- a/tests/components/Tooltip.test.tsx
+++ b/tests/components/Tooltip.test.tsx
@@ -30,6 +30,7 @@ componentTestSuite<TooltipProps>({
   },
 });
 
+// Pure presentational; no provider context needed.
 describe("Tooltip (behavioral tests)", () => {
   it("shows tooltip on hover", async () => {
     const user = userEvent.setup();
diff --git a/tests/components/Upload.test.tsx b/tests/components/Upload.test.tsx
index 27a79a7..dc16887 100644
--- a/tests/components/Upload.test.tsx
+++ b/tests/components/Upload.test.tsx
@@ -30,6 +30,7 @@ componentTestSuite<UploadProps>({
   },
 });
 
+// Pure presentational; no provider context needed.
 describe("Upload (behavioral tests)", () => {
   it("renders with active state by default", () => {
     render(<Upload label="Upload" />);
diff --git a/tests/components/UploadPage.test.tsx b/tests/components/UploadPage.test.tsx
index 772ddf7..0184bac 100644
--- a/tests/components/UploadPage.test.tsx
+++ b/tests/components/UploadPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CommunityUploadScreen } from "../../app/create/screens/upload/CommunityUploadScreen";
+import { CommunityUploadScreen } from "../../app/(app)/create/screens/upload/CommunityUploadScreen";
 
 describe("CommunityUploadScreen", () => {
   it("renders HeaderLockup", () => {
diff --git a/tests/components/AuthModalContext.test.tsx b/tests/contexts/AuthModalContext.test.tsx
similarity index 94%
rename from tests/components/AuthModalContext.test.tsx
rename to tests/contexts/AuthModalContext.test.tsx
index 70a2f7a..22b058e 100644
--- a/tests/components/AuthModalContext.test.tsx
+++ b/tests/contexts/AuthModalContext.test.tsx
@@ -31,10 +31,10 @@ vi.mock("../../lib/create/api", () => ({
   requestMagicLink: vi.fn(),
 }));
 
-vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) => {
+vi.mock("../../app/(app)/create/utils/anonymousDraftStorage", async (importOriginal) => {
   const actual =
     await importOriginal<
-      typeof import("../../app/create/utils/anonymousDraftStorage")
+      typeof import("../../app/(app)/create/utils/anonymousDraftStorage")
     >();
   return {
     ...actual,
@@ -43,7 +43,7 @@ vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) =
 });
 
 import { requestMagicLink } from "../../lib/create/api";
-import { setTransferPendingFlag } from "../../app/create/utils/anonymousDraftStorage";
+import { setTransferPendingFlag } from "../../app/(app)/create/utils/anonymousDraftStorage";
 
 function LoginTrigger() {
   const { openLogin, closeLogin } = useAuthModal();
diff --git a/tests/pages/communication-methods.test.jsx b/tests/pages/communication-methods.test.jsx
index 7c8441e..5ee3d16 100644
--- a/tests/pages/communication-methods.test.jsx
+++ b/tests/pages/communication-methods.test.jsx
@@ -6,7 +6,7 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
-import { CommunicationMethodsScreen } from "../../app/create/screens/card/CommunicationMethodsScreen";
+import { CommunicationMethodsScreen } from "../../app/(app)/create/screens/card/CommunicationMethodsScreen";
 
 afterEach(() => {
   cleanup();
diff --git a/tests/pages/decision-approaches.test.jsx b/tests/pages/decision-approaches.test.jsx
index 3a9c912..672f161 100644
--- a/tests/pages/decision-approaches.test.jsx
+++ b/tests/pages/decision-approaches.test.jsx
@@ -6,7 +6,7 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
-import { DecisionApproachesScreen } from "../../app/create/screens/right-rail/DecisionApproachesScreen";
+import { DecisionApproachesScreen } from "../../app/(app)/create/screens/right-rail/DecisionApproachesScreen";
 
 afterEach(() => {
   cleanup();
diff --git a/tests/unit/ContentContainer.test.jsx b/tests/unit/ContentContainer.test.jsx
index 0df31f5..3e18cf3 100644
--- a/tests/unit/ContentContainer.test.jsx
+++ b/tests/unit/ContentContainer.test.jsx
@@ -24,6 +24,7 @@ const mockPost = {
   },
 };
 
+// Pure presentational; no provider context needed.
 describe("ContentContainer", () => {
   it("renders with default props", () => {
     render(<ContentContainer post={mockPost} />);
diff --git a/tests/unit/ContentThumbnailTemplate.test.jsx b/tests/unit/ContentThumbnailTemplate.test.jsx
index 374684e..8bdc018 100644
--- a/tests/unit/ContentThumbnailTemplate.test.jsx
+++ b/tests/unit/ContentThumbnailTemplate.test.jsx
@@ -35,6 +35,7 @@ const mockPost = {
   },
 };
 
+// Pure presentational; no provider context needed.
 describe("ContentThumbnailTemplate", () => {
   describe("Vertical Variant", () => {
     it("should render vertical variant with responsive dimensions", () => {
diff --git a/tests/unit/Layout.test.jsx b/tests/unit/Layout.test.jsx
index aa48dae..84b18c8 100644
--- a/tests/unit/Layout.test.jsx
+++ b/tests/unit/Layout.test.jsx
@@ -1,5 +1,7 @@
 import { describe, test, expect, vi } from "vitest";
 import RootLayout from "../../app/layout";
+import MarketingLayout from "../../app/(marketing)/layout";
+import AppLayout from "../../app/(app)/layout";
 
 // Mock the font imports since they're Next.js specific
 vi.mock("next/font/google", () => ({
@@ -70,30 +72,46 @@ describe("RootLayout", () => {
     expect(container).toBeTruthy();
   });
 
-  test("renders main content area", () => {
-    const testContent = "Test content";
-    const tree = RootLayout({ children: <div>{testContent}</div> });
-    const main = findDescendant(
-      tree,
-      (n) => n.type === "main" && n.props?.className?.includes("flex-1"),
-    );
-    expect(main).toBeTruthy();
-
-    const childText = findDescendant(
-      main,
-      (n) => typeof n === "string" && n.includes(testContent),
-    );
-    expect(childText).toBeTruthy();
-  });
-
-  test("renders children content correctly", () => {
+  test("renders children directly inside the flex container (no <main> at root)", () => {
     const testContent = "This is test content";
     const tree = RootLayout({ children: <div>{testContent}</div> });
-    const main = findDescendant(tree, (n) => n.type === "main");
+
+    expect(findDescendant(tree, (n) => n?.type === "main")).toBeNull();
+
     const childText = findDescendant(
-      main,
+      tree,
       (n) => typeof n === "string" && n.includes(testContent),
     );
     expect(childText).toBeTruthy();
   });
 });
+
+describe("Group layouts (chrome composition)", () => {
+  test("MarketingLayout wraps children in <main flex-1> and appends Footer", () => {
+    const tree = MarketingLayout({ children: <div>marketing-child</div> });
+    const main = findDescendant(
+      tree,
+      (n) => n?.type === "main" && n.props?.className?.includes("flex-1"),
+    );
+    expect(main).toBeTruthy();
+    expect(
+      findDescendant(main, (n) => typeof n === "string" && n.includes("marketing-child")),
+    ).toBeTruthy();
+
+    // Footer is loaded via next/dynamic — it appears as a render prop component
+    // sibling to <main>. Verify the layout returns more than just <main>.
+    const childrenArr = Array.isArray(tree.props.children)
+      ? tree.props.children
+      : [tree.props.children];
+    expect(childrenArr.length).toBeGreaterThan(1);
+  });
+
+  test("AppLayout wraps children in <main flex-1> with no footer", () => {
+    const tree = AppLayout({ children: <div>app-child</div> });
+    expect(tree.type).toBe("main");
+    expect(tree.props.className).toContain("flex-1");
+    expect(
+      findDescendant(tree, (n) => typeof n === "string" && n.includes("app-child")),
+    ).toBeTruthy();
+  });
+});
diff --git a/tests/unit/LogoWall.test.jsx b/tests/unit/LogoWall.test.jsx
index 2b83130..302236e 100644
--- a/tests/unit/LogoWall.test.jsx
+++ b/tests/unit/LogoWall.test.jsx
@@ -6,6 +6,7 @@ afterEach(() => {
   cleanup();
 });
 
+// Pure presentational; no provider context needed.
 describe("LogoWall Component", () => {
   test("renders with default logos", () => {
     render(<LogoWall />);
diff --git a/tests/unit/NumberCard.test.jsx b/tests/unit/NumberCard.test.jsx
index 20d4bb7..0345d64 100644
--- a/tests/unit/NumberCard.test.jsx
+++ b/tests/unit/NumberCard.test.jsx
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import NumberCard from "../../app/components/cards/NumberCard";
 
+// Pure presentational; no provider context needed.
 describe("NumberCard Component", () => {
   const defaultProps = {
     number: 1,
@@ -200,7 +201,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies Small size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="Small" />);
+    render(<NumberCard {...defaultProps} size="small" />);
 
     // For Small size, text is directly in card div (no wrapper), so use closest("div")
     const card = screen.getByText("Test Card Text").closest("div");
@@ -219,7 +220,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies Medium size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="Medium" />);
+    render(<NumberCard {...defaultProps} size="medium" />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -237,7 +238,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies Large size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="Large" />);
+    render(<NumberCard {...defaultProps} size="large" />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -257,7 +258,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies XLarge size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="XLarge" />);
+    render(<NumberCard {...defaultProps} size="xlarge" />);
 
     const card = screen
       .getByText("Test Card Text")
diff --git a/tests/unit/RuleCard.test.jsx b/tests/unit/RuleCard.test.jsx
index 5f1c29f..33befdc 100644
--- a/tests/unit/RuleCard.test.jsx
+++ b/tests/unit/RuleCard.test.jsx
@@ -159,7 +159,7 @@ describe("RuleCard Component", () => {
       {
         name: "Values",
         chipOptions: [
-          { id: "v1", label: "Consciousness", state: "Unselected" },
+          { id: "v1", label: "Consciousness", state: "unselected" },
         ],
       },
     ];
diff --git a/tests/unit/buildPublishPayload.test.ts b/tests/unit/buildPublishPayload.test.ts
index 1032109..7531fb5 100644
--- a/tests/unit/buildPublishPayload.test.ts
+++ b/tests/unit/buildPublishPayload.test.ts
@@ -4,7 +4,7 @@ import {
   parseDocumentSectionsForDisplay,
   parseSectionsFromCreateFlowState,
 } from "../../lib/create/buildPublishPayload";
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 
 describe("buildPublishPayload", () => {
   it("returns error when title missing", () => {
@@ -97,8 +97,8 @@ describe("buildPublishPayload", () => {
       title: "T",
       selectedCoreValueIds: ["1", "2"],
       coreValuesChipsSnapshot: [
-        { id: "1", label: "Alpha", state: "Selected" },
-        { id: "2", label: "Beta", state: "Selected" },
+        { id: "1", label: "Alpha", state: "selected" },
+        { id: "2", label: "Beta", state: "selected" },
       ],
       coreValueDetailsByChipId: {
         "1": { meaning: "m1", signals: "s1" },
diff --git a/tests/unit/createFlowLayoutTokens.test.ts b/tests/unit/createFlowLayoutTokens.test.ts
index 7e96ba6..fda3e2f 100644
--- a/tests/unit/createFlowLayoutTokens.test.ts
+++ b/tests/unit/createFlowLayoutTokens.test.ts
@@ -3,7 +3,7 @@ import {
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
   CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
-} from "../../app/create/components/createFlowLayoutTokens";
+} from "../../app/(app)/create/components/createFlowLayoutTokens";
 
 describe("createFlowLayoutTokens", () => {
   it("exports create-flow column and two-column max class strings", () => {
diff --git a/tests/unit/createFlowProportionProgress.test.ts b/tests/unit/createFlowProportionProgress.test.ts
index 2733a50..722152b 100644
--- a/tests/unit/createFlowProportionProgress.test.ts
+++ b/tests/unit/createFlowProportionProgress.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { getProportionBarProgressForCreateFlowStep } from "../../app/create/utils/createFlowProportionProgress";
+import { getProportionBarProgressForCreateFlowStep } from "../../app/(app)/create/utils/createFlowProportionProgress";
 
 describe("getProportionBarProgressForCreateFlowStep", () => {
   it("uses 1-2 on community-structure (third Create Community step)", () => {
diff --git a/tests/unit/createFlowValidation.test.ts b/tests/unit/createFlowValidation.test.ts
index 45fe037..ec47882 100644
--- a/tests/unit/createFlowValidation.test.ts
+++ b/tests/unit/createFlowValidation.test.ts
@@ -83,8 +83,8 @@ describe("createFlowStateSchema", () => {
     const r = createFlowStateSchema.safeParse({
       communityStructureChipSnapshots: {
         organizationTypes: [
-          { id: "1", label: "Co-op", state: "Selected" },
-          { id: "custom-uuid", label: "My type", state: "Selected" },
+          { id: "1", label: "Co-op", state: "selected" },
+          { id: "custom-uuid", label: "My type", state: "selected" },
         ],
         scale: [{ id: "1", label: "Local" }],
         maturity: [],
diff --git a/tests/unit/flowSteps.test.ts b/tests/unit/flowSteps.test.ts
index f4d3b49..36a02b7 100644
--- a/tests/unit/flowSteps.test.ts
+++ b/tests/unit/flowSteps.test.ts
@@ -5,7 +5,7 @@ import {
   getPreviousStep,
   isValidStep,
   getStepIndex,
-} from "../../app/create/utils/flowSteps";
+} from "../../app/(app)/create/utils/flowSteps";
 
 describe("flowSteps", () => {
   it("places confirm-stakeholders immediately before final-review", () => {
diff --git a/tests/unit/hasCreateFlowUserInput.test.ts b/tests/unit/hasCreateFlowUserInput.test.ts
index dd71b0d..2f8ad15 100644
--- a/tests/unit/hasCreateFlowUserInput.test.ts
+++ b/tests/unit/hasCreateFlowUserInput.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { hasCreateFlowUserInput } from "../../app/create/utils/hasCreateFlowUserInput";
+import { hasCreateFlowUserInput } from "../../app/(app)/create/utils/hasCreateFlowUserInput";
 
 describe("hasCreateFlowUserInput", () => {
   it("returns false for empty state", () => {
diff --git a/tests/unit/saveDraftToServer.test.ts b/tests/unit/saveDraftToServer.test.ts
index bf4af65..a0d20c8 100644
--- a/tests/unit/saveDraftToServer.test.ts
+++ b/tests/unit/saveDraftToServer.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { saveDraftToServer } from "../../lib/create/api";
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 
 const minimalState: CreateFlowState = {};
 
diff --git a/tests/utils/test-utils.tsx b/tests/utils/test-utils.tsx
index ae71a46..e5b219f 100644
--- a/tests/utils/test-utils.tsx
+++ b/tests/utils/test-utils.tsx
@@ -2,7 +2,7 @@ import React, { type ReactElement } from "react";
 import { render, type RenderOptions } from "@testing-library/react";
 import { AuthModalProvider } from "../../app/contexts/AuthModalContext";
 import { MessagesProvider } from "../../app/contexts/MessagesContext";
-import { CreateFlowProvider } from "../../app/create/context/CreateFlowContext";
+import { CreateFlowProvider } from "../../app/(app)/create/context/CreateFlowContext";
 import messages from "../../messages/en/index";
 
 /**
diff --git a/vitest.config.mjs b/vitest.config.mjs
index 5a0726f..9944ad7 100644
--- a/vitest.config.mjs
+++ b/vitest.config.mjs
@@ -26,10 +26,10 @@ export default defineConfig({
     setupFiles: ["./vitest.setup.ts"],
     include: [
       "tests/components/**/*.test.{js,jsx,ts,tsx}",
+      "tests/contexts/**/*.test.{js,jsx,ts,tsx}",
       "tests/pages/**/*.test.{js,jsx,ts,tsx}",
       "tests/utils/**/*.test.{js,jsx,ts,tsx}",
-      "tests/unit/**/*.test.{js,jsx,ts,tsx}", // Legacy - remaining non-component tests
-      "tests/e2e/**/*.e2e.test.{js,jsx,ts,tsx}",
+      "tests/unit/**/*.test.{js,jsx,ts,tsx}",
     ],
     exclude: ["tests/e2e/**/*.spec.{js,jsx,ts,tsx}"],
     // Disable CSS processing in tests to avoid jsdom parsing errors with Tailwind v4
@@ -40,7 +40,7 @@ export default defineConfig({
       reporter: ["text", "lcov"],
       include: [
         "app/**/*.{js,jsx,ts,tsx}",
-        "components/**/*.{js,jsx,ts,tsx}",
+        "lib/**/*.{js,jsx,ts,tsx}",
         "!**/*.test.{js,jsx,ts,tsx}",
         "!**/*.spec.{js,jsx,ts,tsx}",
         "!**/node_modules/**",

From 45bbbb8a355aa63b08475b095c5a6503e4710d45 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 20 Apr 2026 12:41:10 -0600
Subject: [PATCH 09/15] Implement create custom recommendations

---
 .cursor/rules/create-flow.mdc                 |   13 +-
 .cursor/rules/localization.mdc                |   18 +-
 app/(app)/create/CreateFlowLayoutClient.tsx   |   40 +-
 app/(app)/create/SignedInDraftHydration.tsx   |   55 +-
 .../create/context/CreateFlowContext.tsx      |   68 +-
 .../create/hooks/useFacetRecommendations.ts   |  232 ++++
 .../create/screens/CreateFlowScreenView.tsx   |    6 +-
 .../card/CommunicationMethodsScreen.tsx       |   95 +-
 .../screens/card/ConflictManagementScreen.tsx |   85 +-
 .../screens/card/MembershipMethodsScreen.tsx  |   92 +-
 .../screens/completed/CompletedScreen.tsx     |    2 +-
 .../informational/InformationalScreen.tsx     |    2 +-
 .../screens/review/CommunityReviewScreen.tsx  |    2 +-
 .../screens/review/FinalReviewScreen.tsx      |    6 +-
 .../right-rail/DecisionApproachesScreen.tsx   |  105 +-
 .../select/CommunitySizeSelectScreen.tsx      |    2 +-
 .../select/CommunityStructureSelectScreen.tsx |    2 +-
 .../select/ConfirmStakeholdersScreen.tsx      |    2 +-
 .../screens/select/CoreValuesSelectScreen.tsx |    2 +-
 .../screens/upload/CommunityUploadScreen.tsx  |    2 +-
 app/(app)/create/types.ts                     |    8 +-
 .../create/utils/createFlowScreenRegistry.ts  |   36 +-
 app/api/create-flow/methods/route.ts          |   56 +
 app/api/drafts/me/route.ts                    |   17 +
 app/api/templates/route.ts                    |   26 +-
 .../utility/CardStack/CardStack.container.tsx |    2 +
 .../utility/CardStack/CardStack.types.ts      |   11 +
 .../utility/CardStack/CardStack.view.tsx      |   21 +-
 data/create/customRule/_facetGroups.json      |   79 ++
 data/create/customRule/communication.json     |  321 +++++
 .../create/customRule/conflictManagement.json |  553 ++++++++
 .../create/customRule/decisionApproaches.json |  930 +++++++++++++
 data/create/customRule/membership.json        |  553 ++++++++
 docs/guides/template-recommendation-matrix.md | 1189 +++++++++--------
 lib/create/api.ts                             |   17 +
 lib/server/methodRecommendations.ts           |  171 +++
 lib/server/ruleTemplates.ts                   |  106 +-
 lib/server/templateMethods.ts                 |   76 ++
 lib/server/validation/methodFacetsSchemas.ts  |  273 ++++
 messages/en/create/communication.json         |  120 --
 .../{ => community}/communityContext.json     |    0
 .../create/{ => community}/communityName.json |    0
 .../create/{ => community}/communitySave.json |    0
 .../create/{ => community}/communitySize.json |    0
 .../{ => community}/communityStructure.json   |    0
 .../{ => community}/communityUpload.json      |    0
 .../create/{ => community}/informational.json |    0
 .../en/create/{ => community}/review.json     |    0
 messages/en/create/conflictManagement.json    |  143 --
 .../en/create/customRule/communication.json   |  137 ++
 .../create/customRule/conflictManagement.json |  305 +++++
 .../create/{ => customRule}/coreValues.json   |    0
 .../create/customRule/decisionApproaches.json |  535 ++++++++
 messages/en/create/customRule/membership.json |  217 +++
 messages/en/create/footer.json                |    2 +-
 messages/en/create/membership.json            |  133 --
 .../{ => reviewAndComplete}/completed.json    |    0
 .../confirmStakeholders.json                  |    0
 .../{ => reviewAndComplete}/finalReview.json  |    0
 .../{ => reviewAndComplete}/publish.json      |    0
 messages/en/create/rightRail.json             |  147 --
 messages/en/index.ts                          |   82 +-
 .../migration.sql                             |   21 +
 prisma/schema.prisma                          |   24 +
 prisma/seed.ts                                |    9 +
 prisma/seed/methodFacets.ts                   |  117 ++
 stories/pages/TextPage.stories.js             |    2 +-
 tests/components/TextPage.test.tsx            |    4 +-
 tests/pages/decision-approaches.test.jsx      |   11 +-
 tests/unit/createFlowMethodsRoute.test.ts     |   69 +
 tests/unit/deriveCompactCards.test.ts         |   93 ++
 tests/unit/methodFacets.test.ts               |   88 ++
 tests/unit/methodFacetsSchemas.test.ts        |   83 ++
 tests/unit/methodRecommendations.test.ts      |  160 +++
 tests/unit/templateMethods.test.ts            |   77 ++
 75 files changed, 6403 insertions(+), 1452 deletions(-)
 create mode 100644 app/(app)/create/hooks/useFacetRecommendations.ts
 create mode 100644 app/api/create-flow/methods/route.ts
 create mode 100644 data/create/customRule/_facetGroups.json
 create mode 100644 data/create/customRule/communication.json
 create mode 100644 data/create/customRule/conflictManagement.json
 create mode 100644 data/create/customRule/decisionApproaches.json
 create mode 100644 data/create/customRule/membership.json
 create mode 100644 lib/server/methodRecommendations.ts
 create mode 100644 lib/server/templateMethods.ts
 create mode 100644 lib/server/validation/methodFacetsSchemas.ts
 delete mode 100644 messages/en/create/communication.json
 rename messages/en/create/{ => community}/communityContext.json (100%)
 rename messages/en/create/{ => community}/communityName.json (100%)
 rename messages/en/create/{ => community}/communitySave.json (100%)
 rename messages/en/create/{ => community}/communitySize.json (100%)
 rename messages/en/create/{ => community}/communityStructure.json (100%)
 rename messages/en/create/{ => community}/communityUpload.json (100%)
 rename messages/en/create/{ => community}/informational.json (100%)
 rename messages/en/create/{ => community}/review.json (100%)
 delete mode 100644 messages/en/create/conflictManagement.json
 create mode 100644 messages/en/create/customRule/communication.json
 create mode 100644 messages/en/create/customRule/conflictManagement.json
 rename messages/en/create/{ => customRule}/coreValues.json (100%)
 create mode 100644 messages/en/create/customRule/decisionApproaches.json
 create mode 100644 messages/en/create/customRule/membership.json
 delete mode 100644 messages/en/create/membership.json
 rename messages/en/create/{ => reviewAndComplete}/completed.json (100%)
 rename messages/en/create/{ => reviewAndComplete}/confirmStakeholders.json (100%)
 rename messages/en/create/{ => reviewAndComplete}/finalReview.json (100%)
 rename messages/en/create/{ => reviewAndComplete}/publish.json (100%)
 delete mode 100644 messages/en/create/rightRail.json
 create mode 100644 prisma/migrations/20260418170000_add_method_facet/migration.sql
 create mode 100644 prisma/seed/methodFacets.ts
 create mode 100644 tests/unit/createFlowMethodsRoute.test.ts
 create mode 100644 tests/unit/deriveCompactCards.test.ts
 create mode 100644 tests/unit/methodFacets.test.ts
 create mode 100644 tests/unit/methodFacetsSchemas.test.ts
 create mode 100644 tests/unit/methodRecommendations.test.ts
 create mode 100644 tests/unit/templateMethods.test.ts

diff --git a/.cursor/rules/create-flow.mdc b/.cursor/rules/create-flow.mdc
index 9c9a417..fb76949 100644
--- a/.cursor/rules/create-flow.mdc
+++ b/.cursor/rules/create-flow.mdc
@@ -39,9 +39,16 @@ file are a smell once they're used more than once.
 
 ## Copy & data
 
-- Step copy lives in `messages/en/create/<step>.json`, wired into
-  `messages/en/index.ts` under the `create:` namespace (see
-  `localization.mdc` for the standard pattern).
+- Step copy lives in `messages/en/create/<stage>/<step>.json` where
+  `<stage>` is one of `community`, `customRule`, `reviewAndComplete`
+  (matches Figma stages — see `docs/create-flow.md`). Cross-cutting chrome
+  (`footer.json`, `topNav.json`, `draftHydration.json`,
+  `templateReview.json`) and shared layout-shell strings (`select.json`,
+  `text.json`, `upload.json`) live at the `create/` root. Wire each new
+  JSON into `messages/en/index.ts` under the matching `create.<stage>.*`
+  namespace (see `localization.mdc`).
+- Modal `sections` defaults are DB-shaped seed placeholders, not UI
+  constants — expect replacement with live data.
 - Modal `sections` defaults are DB-shaped seed placeholders, not UI
   constants — expect replacement with live data.
 
diff --git a/.cursor/rules/localization.mdc b/.cursor/rules/localization.mdc
index 467d5bd..b141dd1 100644
--- a/.cursor/rules/localization.mdc
+++ b/.cursor/rules/localization.mdc
@@ -15,9 +15,13 @@ notation). Never hard-code user-facing strings in components.
 - `messages/en/<area>.json` for single-file areas (`common.json`,
   `navigation.json`, `metadata.json`).
 - `messages/en/<folder>/<entry>.json` for areas with multiple buckets:
-  `components/*.json`, `pages/*.json`, `create/*.json`. One JSON per
-  component / page / create-flow step — don't shoehorn unrelated copy into
-  a shared file.
+  `components/*.json`, `pages/*.json`. One JSON per component / page —
+  don't shoehorn unrelated copy into a shared file.
+- `messages/en/create/<stage>/<step>.json` — wizard steps grouped by Figma
+  stage (`community`, `customRule`, `reviewAndComplete`). Cross-cutting
+  chrome (footer, top nav, draft hydration, template review) and shared
+  layout-shell strings (`select.json`, `text.json`, `upload.json`) live at
+  the `create/` root.
 - Optional `"_comment"` at the top of a JSON documents the bundle's purpose.
 
 ## Registration — required
@@ -25,12 +29,14 @@ notation). Never hard-code user-facing strings in components.
 Every new JSON must be wired into `messages/en/index.ts`:
 
 ```typescript
-import createConflictManagement from "./create/conflictManagement.json";
+import createConflictManagement from "./create/customRule/conflictManagement.json";
 
 export default {
   // …
   create: {
-    conflictManagement: createConflictManagement,
+    customRule: {
+      conflictManagement: createConflictManagement,
+    },
   },
 };
 ```
@@ -44,7 +50,7 @@ step means consumers can't read your strings and TypeScript won't flag the gap.
 import { useMessages } from "../contexts/MessagesContext";
 
 const m = useMessages();
-const title = m.create.conflictManagement.page.compactTitle; // fully typed
+const title = m.create.customRule.conflictManagement.page.compactTitle; // fully typed
 ```
 
 Use `useTranslation(namespace)` only when you need dot-path lookup by dynamic
diff --git a/app/(app)/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx
index 6448898..36d6f24 100644
--- a/app/(app)/create/CreateFlowLayoutClient.tsx
+++ b/app/(app)/create/CreateFlowLayoutClient.tsx
@@ -28,7 +28,11 @@ import {
   requestMagicLink,
 } from "../../../lib/create/api";
 import { safeInternalPath } from "../../../lib/safeInternalPath";
-import { setTransferPendingFlag } from "./utils/anonymousDraftStorage";
+import {
+  clearAnonymousCreateFlowStorage,
+  setTransferPendingFlag,
+} from "./utils/anonymousDraftStorage";
+import { deleteServerDraft } from "../../../lib/create/api";
 import { writeLastPublishedRule } from "../../../lib/create/lastPublishedRule";
 import {
   fetchTemplateBySlug,
@@ -64,10 +68,14 @@ function CreateFlowSessionShell({ children }: { children: ReactNode }) {
   }, []);
 
   const sessionResolved = sessionUser !== undefined;
-  const enableAnonymousPersistence = sessionResolved && sessionUser === null;
+  // Mirror in-progress draft to localStorage for ALL visitors once we know who
+  // they are. Refresh-survival is the same UX for guest and signed-in users;
+  // signed-in users additionally get an explicit "Save & Exit" that PUTs to
+  // the server (handled in `useCreateFlowExit`).
+  const enableLocalDraftMirroring = sessionResolved;
 
   return (
-    <CreateFlowProvider enableAnonymousPersistence={enableAnonymousPersistence}>
+    <CreateFlowProvider enableLocalDraftMirroring={enableLocalDraftMirroring}>
       <CreateFlowDraftSaveBannerProvider>
         <CreateFlowLayoutContent
           sessionUser={sessionUser}
@@ -91,7 +99,7 @@ function CreateFlowLayoutContent({
 }) {
   const { create } = useMessages();
   const footer = create.footer;
-  const communitySaveMessages = create.communitySave;
+  const communitySaveMessages = create.community.communitySave;
   const tLogin = useTranslation("pages.login");
   const router = useRouter();
   const pathname = usePathname();
@@ -142,7 +150,7 @@ function CreateFlowLayoutContent({
     if (payloadResult.ok === false) {
       setPublishBannerMessage(
         payloadResult.error === "missingCommunityName"
-          ? messages.create.publish.missingCommunityName
+          ? messages.create.reviewAndComplete.publish.missingCommunityName
           : payloadResult.error,
       );
       return;
@@ -176,7 +184,7 @@ function CreateFlowLayoutContent({
     setPublishBannerMessage(
       publishResult.error.trim() !== ""
         ? publishResult.error
-        : messages.create.publish.genericPublishFailed,
+        : messages.create.reviewAndComplete.publish.genericPublishFailed,
     );
   }, [state, router, openLogin]);
 
@@ -226,6 +234,20 @@ function CreateFlowLayoutContent({
     const saveDraft = opts?.saveDraft ?? false;
     if (!sessionResolved) return;
 
+    // Exit from `/create/completed` is post-publish: the rule is saved, so we
+    // skip the leave-confirm + login prompt and just wipe the in-flight draft.
+    // For signed-in users we also DELETE the server draft so a future visit to
+    // /create starts fresh instead of rehydrating yesterday's work.
+    if (currentStep === "completed") {
+      clearState();
+      clearAnonymousCreateFlowStorage();
+      if (sessionUser) {
+        void deleteServerDraft();
+      }
+      router.push("/");
+      return;
+    }
+
     if (sessionUser === null) {
       if (saveDraft) return;
       const returnToTemplateReview =
@@ -372,7 +394,7 @@ function CreateFlowLayoutContent({
               <Alert
                 type="banner"
                 status="danger"
-                title={messages.create.publish.finalizeBannerTitle}
+                title={messages.create.reviewAndComplete.publish.finalizeBannerTitle}
                 description={publishBannerMessage}
                 onClose={() => setPublishBannerMessage(null)}
                 className="w-full"
@@ -622,7 +644,7 @@ function CreateFlowLayoutContent({
                   goToNextStep();
                 }}
               >
-                {footer.confirmRightRail}
+                {footer.confirmDecisionApproaches}
               </Button>
             ) : currentStep === "conflict-management" && nextStep ? (
               <Button
@@ -657,7 +679,7 @@ function CreateFlowLayoutContent({
               >
                 {currentStep === "final-review"
                   ? isPublishing
-                    ? messages.create.publish.finalizeButtonPublishing
+                    ? messages.create.reviewAndComplete.publish.finalizeButtonPublishing
                     : footer.finalizeCommunityRule
                   : currentStep === "confirm-stakeholders"
                     ? footer.confirmStakeholders
diff --git a/app/(app)/create/SignedInDraftHydration.tsx b/app/(app)/create/SignedInDraftHydration.tsx
index c191c86..bae94e5 100644
--- a/app/(app)/create/SignedInDraftHydration.tsx
+++ b/app/(app)/create/SignedInDraftHydration.tsx
@@ -5,7 +5,6 @@ import { useSearchParams } from "next/navigation";
 import type { CreateFlowState } from "./types";
 import { createFlowStateHasKeys } from "../../../lib/create/draftHydrationUtils";
 import {
-  clearAnonymousCreateFlowStorage,
   hasTransferPendingFlag,
   readAnonymousCreateFlowState,
 } from "./utils/anonymousDraftStorage";
@@ -16,11 +15,18 @@ import messages from "../../../messages/en/index";
 const SYNC_ENABLED = process.env.NEXT_PUBLIC_ENABLE_BACKEND_SYNC === "true";
 
 /**
- * When sync is on and the user is signed in, fetch `GET /api/drafts/me` once and merge into context.
- * Skips when `?syncDraft=1` or transfer-pending — {@link PostLoginDraftTransfer} owns that path.
+ * When sync is on and the user is signed in, restore the server-side draft only
+ * when there is no in-flight localStorage draft to defer to. localStorage is
+ * the on-every-keystroke buffer (CreateFlowProvider mirrors state there for
+ * everyone), so a refresh mid-flow already has the freshest data; pulling the
+ * server draft on top would clobber unsaved keystrokes with a stale snapshot.
  *
- * **Conflict:** If both server draft and `create-flow-anonymous` are non-empty, `window.confirm`
- * chooses account draft (OK) vs browser copy (Cancel); browser storage is cleared after resolution.
+ * Server draft becomes authoritative only when localStorage is empty — i.e.
+ * fresh device, after explicit Save & Exit (which clears localStorage), or
+ * after Exit-from-completed clears local state.
+ *
+ * Skips when `?syncDraft=1` or transfer-pending — {@link PostLoginDraftTransfer}
+ * owns that path.
  */
 export function SignedInDraftHydration({
   sessionUser,
@@ -54,6 +60,14 @@ export function SignedInDraftHydration({
       return;
     }
 
+    // Local draft wins over server: no fetch, no replaceState. The provider
+    // already hydrated from localStorage at mount, so the user sees their
+    // unsaved keystrokes immediately.
+    if (createFlowStateHasKeys(readAnonymousCreateFlowState())) {
+      finishedUserIdRef.current = userId;
+      return;
+    }
+
     let cancelled = false;
     setLoadingHydration(true);
 
@@ -62,43 +76,14 @@ export function SignedInDraftHydration({
         const serverDraft = await fetchDraftFromServer();
         if (cancelled) return;
 
-        const localDraft = readAnonymousCreateFlowState();
-        const hasServer =
-          serverDraft != null && createFlowStateHasKeys(serverDraft);
-        const hasLocal = createFlowStateHasKeys(localDraft);
-
         if (touchedRef.current) {
           finishedUserIdRef.current = userId;
           return;
         }
 
-        if (hasServer && hasLocal) {
-          const useAccount =
-            typeof window !== "undefined" &&
-            window.confirm(messages.create.draftHydration.conflictPrompt);
-          if (cancelled) return;
-          if (useAccount) {
-            replaceState(serverDraft as CreateFlowState);
-          } else {
-            replaceState(localDraft);
-          }
-          clearAnonymousCreateFlowStorage();
-          finishedUserIdRef.current = userId;
-          return;
-        }
-
-        if (hasServer) {
+        if (serverDraft != null && createFlowStateHasKeys(serverDraft)) {
           replaceState(serverDraft as CreateFlowState);
-          clearAnonymousCreateFlowStorage();
-          finishedUserIdRef.current = userId;
-          return;
         }
-
-        if (hasLocal) {
-          replaceState(localDraft);
-          clearAnonymousCreateFlowStorage();
-        }
-
         finishedUserIdRef.current = userId;
       } finally {
         if (!cancelled) setLoadingHydration(false);
diff --git a/app/(app)/create/context/CreateFlowContext.tsx b/app/(app)/create/context/CreateFlowContext.tsx
index ad927b3..4ce6097 100644
--- a/app/(app)/create/context/CreateFlowContext.tsx
+++ b/app/(app)/create/context/CreateFlowContext.tsx
@@ -32,22 +32,29 @@ interface CreateFlowProviderProps {
   children: ReactNode;
   initialStep?: CreateFlowStep | null;
   /**
-   * When true (signed-out, session resolved), load/sync `create-flow-anonymous` in localStorage.
-   * When false, in-memory only (authenticated fresh create).
+   * When true (session resolved, guest or signed-in), mirror in-flight draft to
+   * `create-flow-anonymous` in localStorage so refresh / dev-restart never wipes
+   * progress. When false, in-memory only (e.g. unit tests, pre-session-resolve).
+   *
+   * Signed-in users additionally get an explicit "Save & Exit" that PUTs to the
+   * server (`useCreateFlowExit`); the server draft is the cross-device snapshot,
+   * localStorage is the on-every-keystroke buffer.
    */
-  enableAnonymousPersistence?: boolean;
+  enableLocalDraftMirroring?: boolean;
 }
 
 /**
- * Create flow state. Anonymous users mirror state to localStorage; authenticated users stay in memory.
+ * Create flow state. All users mirror in-flight state to localStorage when
+ * `enableLocalDraftMirroring` is true; signed-in users layer an explicit
+ * server-draft snapshot on top via {@link useCreateFlowExit}.
  */
 export function CreateFlowProvider({
   children,
   initialStep = null,
-  enableAnonymousPersistence = false,
+  enableLocalDraftMirroring = false,
 }: CreateFlowProviderProps) {
   const [state, setState] = useState<CreateFlowState>(() => {
-    const base = enableAnonymousPersistence
+    const base = enableLocalDraftMirroring
       ? readAnonymousCreateFlowState()
       : {};
     const storedDetails = readCoreValueDetailsFromLocalStorage();
@@ -62,15 +69,23 @@ export function CreateFlowProvider({
   });
   const [interactionTouched, setInteractionTouched] = useState(false);
   const [currentStep] = useState<CreateFlowStep | null>(initialStep);
-  const prevPersistRef = useRef(enableAnonymousPersistence);
+  const prevPersistRef = useRef(enableLocalDraftMirroring);
+  const persistWriteSkipRef = useRef(true);
 
   useEffect(() => {
     clearLegacyCreateFlowKeysOnce();
   }, []);
 
-  // Session resolved as guest after initial paint: hydrate from localStorage if still empty.
+  // Session resolved after initial paint: hydrate from localStorage, merging
+  // with anything already in state. We can't bail on `prev` being non-empty:
+  // the initializer pre-populates `coreValueDetailsByChipId` from a separate
+  // localStorage key, so `prev` is virtually always non-empty here.
+  // Merge strategy: `prev` wins for fields the user might have touched between
+  // mount and session-resolve; `from` fills in anything else; coreValueDetails
+  // is union-merged (prev wins per chip id since it loaded from the dedicated
+  // `create-flow-core-value-details` key).
   useEffect(() => {
-    if (!enableAnonymousPersistence) {
+    if (!enableLocalDraftMirroring) {
       prevPersistRef.current = false;
       return;
     }
@@ -79,14 +94,39 @@ export function CreateFlowProvider({
     if (!wasOff) return;
     const from = readAnonymousCreateFlowState();
     if (Object.keys(from).length === 0) return;
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- hydrate anonymous draft when guest persistence turns on
-    setState((prev) => (Object.keys(prev).length > 0 ? prev : { ...from }));
-  }, [enableAnonymousPersistence]);
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- hydrate local draft when mirroring turns on
+    setState((prev) => {
+      const merged: CreateFlowState = { ...from, ...prev };
+      const fromDetails = from.coreValueDetailsByChipId;
+      const prevDetails = prev.coreValueDetailsByChipId;
+      if (fromDetails || prevDetails) {
+        merged.coreValueDetailsByChipId = {
+          ...(fromDetails ?? {}),
+          ...(prevDetails ?? {}),
+        };
+      }
+      return merged;
+    });
+  }, [enableLocalDraftMirroring]);
 
   useEffect(() => {
-    if (!enableAnonymousPersistence) return;
+    if (!enableLocalDraftMirroring) {
+      // Reset so the next OFF→ON transition skips its first write again.
+      persistWriteSkipRef.current = true;
+      return;
+    }
+    // Skip the very first write that runs on the same render where mirroring
+    // turned ON — the hydrate effect (above) is racing to setState the loaded
+    // draft, and writing the still-empty pre-hydrate state here would clobber
+    // localStorage. The next render (with the hydrated state) will write
+    // normally. Without this guard, drafts get wiped during HMR / any
+    // auth-session refetch that re-toggles `enableLocalDraftMirroring`.
+    if (persistWriteSkipRef.current) {
+      persistWriteSkipRef.current = false;
+      return;
+    }
     writeAnonymousCreateFlowState(state);
-  }, [state, enableAnonymousPersistence]);
+  }, [state, enableLocalDraftMirroring]);
 
   /** Meaning/signals for core values: survives refresh for signed-in users; merged with anonymous draft when both exist. */
   useEffect(() => {
diff --git a/app/(app)/create/hooks/useFacetRecommendations.ts b/app/(app)/create/hooks/useFacetRecommendations.ts
new file mode 100644
index 0000000..7da4f3a
--- /dev/null
+++ b/app/(app)/create/hooks/useFacetRecommendations.ts
@@ -0,0 +1,232 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import facetGroups from "../../../../data/create/customRule/_facetGroups.json";
+import {
+  type CreateFlowState,
+} from "../types";
+import { useCreateFlow } from "../context/CreateFlowContext";
+
+/**
+ * Card-deck section ids served by `/api/create-flow/methods` (CR-88 §9.2).
+ */
+export type RecommendationSection =
+  | "communication"
+  | "membership"
+  | "decisionApproaches"
+  | "conflictManagement";
+
+const FACET_GROUPS = ["size", "orgType", "scale", "maturity"] as const;
+type FacetGroupId = (typeof FACET_GROUPS)[number];
+
+/** Reverse map chipId → canonical facet value id, per group. */
+const CHIP_TO_VALUE_BY_GROUP: Record<FacetGroupId, Record<string, string>> = (() => {
+  const out: Record<FacetGroupId, Record<string, string>> = {
+    size: {},
+    orgType: {},
+    scale: {},
+    maturity: {},
+  };
+  for (const group of FACET_GROUPS) {
+    const block = (facetGroups as Record<string, unknown>)[group];
+    if (block && typeof block === "object" && "values" in block) {
+      const values = (block as { values: Record<string, { chipId: string }> })
+        .values;
+      for (const [valueId, entry] of Object.entries(values)) {
+        out[group][entry.chipId] = valueId;
+      }
+    }
+  }
+  return out;
+})();
+
+/** Chip-id state accessors per group. */
+const STATE_KEY_BY_GROUP: Record<FacetGroupId, keyof CreateFlowState> = {
+  size: "selectedCommunitySizeIds",
+  orgType: "selectedOrganizationTypeIds",
+  scale: "selectedScaleIds",
+  maturity: "selectedMaturityIds",
+};
+
+function readChipIds(
+  state: CreateFlowState,
+  group: FacetGroupId,
+): string[] {
+  const value = state[STATE_KEY_BY_GROUP[group]];
+  return Array.isArray(value) ? (value as string[]) : [];
+}
+
+function buildFacetQuery(state: CreateFlowState): string {
+  const params = new URLSearchParams();
+  for (const group of FACET_GROUPS) {
+    const valuesById = CHIP_TO_VALUE_BY_GROUP[group];
+    for (const chipId of readChipIds(state, group)) {
+      const valueId = valuesById[chipId];
+      if (valueId) {
+        params.append(`facet.${group}`, valueId);
+      }
+    }
+  }
+  return params.toString();
+}
+
+export type FacetRecommendationsResult = {
+  /** `true` once the network call completes (or short-circuits with no facets). */
+  isReady: boolean;
+  /** `slug → score`; missing slug means `0`. */
+  scoresBySlug: Record<string, number>;
+  /**
+   * `true` iff the user has selected at least one community facet. When
+   * `false`, callers should preserve authoring order rather than reranking.
+   */
+  hasAnyFacets: boolean;
+};
+
+const EMPTY_SCORES: Record<string, number> = {};
+
+/**
+ * Calls `GET /api/create-flow/methods?section=<section>&facet.*=...` for the
+ * card-deck step `section` and returns a `slug → score` map for re-ranking
+ * the messages-file `methods[]` array (CR-88 §10).
+ *
+ * Returns `{ isReady: true, scoresBySlug: {} }` when the user has not selected
+ * any community facets — callers fall back to the authoring order.
+ *
+ * Network failures resolve to `scoresBySlug: {}` so the wizard is never
+ * blocked on the recommendation backend.
+ */
+export function useFacetRecommendations(
+  section: RecommendationSection,
+): FacetRecommendationsResult {
+  const { state } = useCreateFlow();
+  const queryString = useMemo(() => buildFacetQuery(state), [state]);
+  const hasAnyFacets = queryString.length > 0;
+
+  const [result, setResult] = useState<FacetRecommendationsResult>({
+    isReady: !hasAnyFacets,
+    scoresBySlug: EMPTY_SCORES,
+    hasAnyFacets,
+  });
+
+  // Track the last successful request input so we don't re-fetch on every state poke.
+  const lastQueryRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!hasAnyFacets) {
+      setResult({
+        isReady: true,
+        scoresBySlug: EMPTY_SCORES,
+        hasAnyFacets: false,
+      });
+      lastQueryRef.current = null;
+      return;
+    }
+    const requestKey = `${section}?${queryString}`;
+    if (lastQueryRef.current === requestKey) return;
+    lastQueryRef.current = requestKey;
+
+    const ctrl = new AbortController();
+    setResult((prev) => ({ ...prev, isReady: false, hasAnyFacets: true }));
+    fetch(`/api/create-flow/methods?section=${section}&${queryString}`, {
+      credentials: "include",
+      signal: ctrl.signal,
+    })
+      .then(async (res) => {
+        if (!res.ok) throw new Error(`status ${res.status}`);
+        return (await res.json()) as {
+          methods?: { slug: string; matches?: { score?: number } }[];
+        };
+      })
+      .then((json) => {
+        const scoresBySlug: Record<string, number> = {};
+        for (const m of json.methods ?? []) {
+          if (typeof m.slug === "string") {
+            scoresBySlug[m.slug] = m.matches?.score ?? 0;
+          }
+        }
+        setResult({ isReady: true, scoresBySlug, hasAnyFacets: true });
+      })
+      .catch((e) => {
+        if ((e as { name?: string }).name === "AbortError") return;
+        setResult({
+          isReady: true,
+          scoresBySlug: EMPTY_SCORES,
+          hasAnyFacets: true,
+        });
+      });
+
+    return () => {
+      ctrl.abort();
+      // Clear the dedup key so React 19 Strict Mode's mount → unmount → mount
+      // cycle (and any future remount) re-issues the request instead of
+      // returning early on the same key.
+      if (lastQueryRef.current === requestKey) {
+        lastQueryRef.current = null;
+      }
+    };
+  }, [section, queryString, hasAnyFacets]);
+
+  return result;
+}
+
+/**
+ * Stable comparator for re-ranking a messages-file `methods[]` array. Higher
+ * `scoresBySlug[id]` first; ties fall back to authoring index, so a
+ * zero-facet user sees the original ordering verbatim.
+ */
+export function rankMethodsByScore<T extends { id: string }>(
+  methods: readonly T[],
+  scoresBySlug: Record<string, number>,
+): T[] {
+  const indexById = new Map<string, number>();
+  methods.forEach((m, i) => indexById.set(m.id, i));
+  return [...methods].sort((a, b) => {
+    const sa = scoresBySlug[a.id] ?? 0;
+    const sb = scoresBySlug[b.id] ?? 0;
+    if (sa !== sb) return sb - sa;
+    return (indexById.get(a.id) ?? 0) - (indexById.get(b.id) ?? 0);
+  });
+}
+
+/**
+ * Picks (a) which method ids fill the compact card stack and (b) which of
+ * those should render with the "Recommended" tag. The messages JSON no
+ * longer carries a static `recommended` flag — both selections come
+ * entirely from facet scores (CR-88 §10).
+ *
+ * Behavior:
+ * - Facets selected & at least one method scored > 0 →
+ *   `compactCardIds` = up to `limit` top-scored methods (1..limit cards;
+ *   never padded with unrecommended fillers). All shown cards get the
+ *   "Recommended" badge.
+ * - No facets selected, or every method scored 0 → `compactCardIds` =
+ *   first `limit` in ranked/authoring order, `recommendedIds` empty (no
+ *   badges shown — honest "no signal yet" fallback).
+ *
+ * `CardStack.view` is responsible for laying out variable-length compact
+ * arrays gracefully (uses `.map`/`.slice` and length-guarded indexing).
+ */
+export function deriveCompactCards<T extends { id: string }>(
+  rankedMethods: readonly T[],
+  scoresBySlug: Record<string, number>,
+  hasAnyFacets: boolean,
+  limit: number,
+): { compactCardIds: string[]; recommendedIds: Set<string> } {
+  const fallback = () => ({
+    compactCardIds: rankedMethods.slice(0, limit).map((m) => m.id),
+    recommendedIds: new Set<string>(),
+  });
+
+  if (!hasAnyFacets) return fallback();
+
+  const matched = rankedMethods.filter(
+    (m) => (scoresBySlug[m.id] ?? 0) > 0,
+  );
+  if (matched.length === 0) return fallback();
+
+  const top = matched.slice(0, limit);
+  return {
+    compactCardIds: top.map((m) => m.id),
+    recommendedIds: new Set(top.map((m) => m.id)),
+  };
+}
diff --git a/app/(app)/create/screens/CreateFlowScreenView.tsx b/app/(app)/create/screens/CreateFlowScreenView.tsx
index 502af91..a12d06c 100644
--- a/app/(app)/create/screens/CreateFlowScreenView.tsx
+++ b/app/(app)/create/screens/CreateFlowScreenView.tsx
@@ -35,7 +35,7 @@ export function CreateFlowScreenView({
     case "community-name":
       return (
         <CreateFlowTextFieldScreen
-          messageNamespace="create.communityName"
+          messageNamespace="create.community.communityName"
           stateField="title"
           maxLength={48}
         />
@@ -45,7 +45,7 @@ export function CreateFlowScreenView({
     case "community-context":
       return (
         <CreateFlowTextFieldScreen
-          messageNamespace="create.communityContext"
+          messageNamespace="create.community.communityContext"
           stateField="communityContext"
           maxLength={48}
           mainAlign="center"
@@ -58,7 +58,7 @@ export function CreateFlowScreenView({
     case "community-save":
       return (
         <CreateFlowTextFieldScreen
-          messageNamespace="create.communitySave"
+          messageNamespace="create.community.communitySave"
           stateField="communitySaveEmail"
           maxLength={254}
           mainAlign="center"
diff --git a/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
index 033f74b..6784e4b 100644
--- a/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
@@ -13,6 +13,11 @@ import { useState, useCallback, useMemo } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import {
+  deriveCompactCards,
+  rankMethodsByScore,
+  useFacetRecommendations,
+} from "../../hooks/useFacetRecommendations";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../../components/utility/CardStack";
 import Create from "../../../../components/modals/Create";
@@ -24,10 +29,6 @@ import {
 } from "../../components/createFlowLayoutTokens";
 import ModalTextAreaField from "../../components/ModalTextAreaField";
 
-const IN_PERSON_CARD_ID = "in-person-meetings";
-const SIGNAL_CARD_ID = "signal";
-const VIDEO_MEETINGS_CARD_ID = "video-meetings";
-
 const SECTION_FIELDS = [
   "corePrinciple",
   "logisticsAdmin",
@@ -35,16 +36,6 @@ const SECTION_FIELDS = [
 ] as const;
 type SectionField = (typeof SECTION_FIELDS)[number];
 
-const COMMUNICATION_CARD_ORDER = [
-  IN_PERSON_CARD_ID,
-  SIGNAL_CARD_ID,
-  VIDEO_MEETINGS_CARD_ID,
-  "4",
-  "5",
-  "6",
-  "7",
-] as const;
-
 function AddPlatformModalContent({
   platformCardId,
 }: {
@@ -52,15 +43,13 @@ function AddPlatformModalContent({
 }) {
   const { markCreateFlowInteraction } = useCreateFlow();
   const m = useMessages();
-  const comm = m.create.communication;
-  const modal =
-    platformCardId in comm.modals
-      ? comm.modals[platformCardId as keyof typeof comm.modals]
-      : null;
-  const defaults = modal?.sections ?? {
-    corePrinciple: "",
-    logisticsAdmin: "",
-    codeOfConduct: "",
+  const comm = m.create.customRule.communication;
+  const method = comm.methods.find((entry) => entry.id === platformCardId);
+  const sections = method?.sections;
+  const defaults: Record<SectionField, string> = {
+    corePrinciple: sections?.corePrinciple ?? "",
+    logisticsAdmin: sections?.logisticsAdmin ?? "",
+    codeOfConduct: sections?.codeOfConduct ?? "",
   };
 
   const [sectionValues, setSectionValues] = useState<
@@ -96,7 +85,7 @@ function AddPlatformModalContent({
 
 export function CommunicationMethodsScreen() {
   const m = useMessages();
-  const comm = m.create.communication;
+  const comm = m.create.customRule.communication;
   const mdUp = useCreateFlowMdUp();
   const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
   const [expanded, setExpanded] = useState(false);
@@ -112,18 +101,32 @@ export function CommunicationMethodsScreen() {
     [updateState],
   );
 
+  const { scoresBySlug, hasAnyFacets } =
+    useFacetRecommendations("communication");
+  const rankedMethods = useMemo(
+    () => rankMethodsByScore(comm.methods, scoresBySlug),
+    [comm.methods, scoresBySlug],
+  );
+
+  const { compactCardIds, recommendedIds } = useMemo(
+    () => deriveCompactCards(rankedMethods, scoresBySlug, hasAnyFacets, 5),
+    [rankedMethods, scoresBySlug, hasAnyFacets],
+  );
+
   const sampleCards = useMemo(
     () =>
-      COMMUNICATION_CARD_ORDER.map((id) => {
-        const row = comm.cards[id as keyof typeof comm.cards];
-        return {
-          id,
-          label: row.label,
-          supportText: row.supportText,
-          recommended: true,
-        };
-      }),
-    [comm],
+      rankedMethods.map((entry) => ({
+        id: entry.id,
+        label: entry.label,
+        supportText: entry.supportText,
+        recommended: recommendedIds.has(entry.id),
+      })),
+    [rankedMethods, recommendedIds],
+  );
+
+  const methodById = useMemo(
+    () => new Map(rankedMethods.map((entry) => [entry.id, entry])),
+    [rankedMethods],
   );
 
   const title = expanded ? comm.page.expandedTitle : comm.page.compactTitle;
@@ -157,25 +160,10 @@ export function CommunicationMethodsScreen() {
       };
     }
 
-    if (pendingCardId in comm.modals) {
-      const modal = comm.modals[pendingCardId as keyof typeof comm.modals];
-      return {
-        title: modal.title,
-        description: modal.description,
-        nextButtonText: comm.addPlatform.nextButtonText,
-        showBackButton: false as const,
-        currentStep: undefined,
-        totalSteps: undefined,
-      };
-    }
-
-    const cardRow =
-      pendingCardId in comm.cards
-        ? comm.cards[pendingCardId as keyof typeof comm.cards]
-        : null;
+    const method = methodById.get(pendingCardId);
     return {
-      title: cardRow?.label ?? comm.confirmModal.title,
-      description: cardRow?.supportText ?? comm.confirmModal.description,
+      title: method?.label ?? comm.confirmModal.title,
+      description: method?.supportText ?? comm.confirmModal.description,
       nextButtonText: comm.addPlatform.nextButtonText,
       showBackButton: false as const,
       currentStep: undefined,
@@ -235,7 +223,8 @@ export function CommunicationMethodsScreen() {
             }}
             hasMore={true}
             toggleLabel={comm.page.seeAllLink}
-            compactRecommendedLimit={3}
+            compactRecommendedLimit={5}
+            compactCardIds={compactCardIds}
             compactDesktopLayout="flexWrap"
             headerLockupSize={mdUp ? "L" : "M"}
           />
diff --git a/app/(app)/create/screens/card/ConflictManagementScreen.tsx b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
index 3bac17e..3b804ff 100644
--- a/app/(app)/create/screens/card/ConflictManagementScreen.tsx
+++ b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
@@ -7,7 +7,7 @@
  * Card click opens the Figma "Add Approach" create modal (node `20874-172292`) with four
  * controls: Core Principle, Applicable Scope (capsules), Process Protocol, and Restoration
  * & Fallbacks. Section defaults are sourced from
- * `messages/en/create/conflictManagement.json` and will be replaced with DB-driven
+ * `messages/en/create/customRule/conflictManagement.json` and will be replaced with DB-driven
  * content; labels are hard-coded per the Figma design.
  */
 
@@ -15,6 +15,11 @@ import { useState, useCallback, useMemo } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import {
+  deriveCompactCards,
+  rankMethodsByScore,
+  useFacetRecommendations,
+} from "../../hooks/useFacetRecommendations";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../../components/utility/CardStack";
 import Create from "../../../../components/modals/Create";
@@ -27,17 +32,6 @@ import {
 import ModalTextAreaField from "../../components/ModalTextAreaField";
 import ApplicableScopeField from "../../components/ApplicableScopeField";
 
-const CONFLICT_CARD_ORDER = [
-  "peer-mediation",
-  "conflict-resolution-council",
-  "facilitated-negotiation",
-  "ad-hoc-arbitration",
-  "conflict-workshops",
-  "6",
-  "7",
-  "8",
-] as const;
-
 type ConflictModalSections = {
   corePrinciple: string;
   applicableScope: string[];
@@ -53,12 +47,9 @@ function AddConflictApproachModalContent({
 }) {
   const { markCreateFlowInteraction } = useCreateFlow();
   const m = useMessages();
-  const cm = m.create.conflictManagement;
-  const modal =
-    approachCardId in cm.modals
-      ? cm.modals[approachCardId as keyof typeof cm.modals]
-      : null;
-  const modalSections = modal?.sections;
+  const cm = m.create.customRule.conflictManagement;
+  const method = cm.methods.find((entry) => entry.id === approachCardId);
+  const modalSections = method?.sections;
   const defaults: ConflictModalSections = {
     corePrinciple: modalSections?.corePrinciple ?? "",
     applicableScope: modalSections?.applicableScope ?? [],
@@ -126,7 +117,7 @@ function AddConflictApproachModalContent({
 
 export function ConflictManagementScreen() {
   const m = useMessages();
-  const cm = m.create.conflictManagement;
+  const cm = m.create.customRule.conflictManagement;
   const mdUp = useCreateFlowMdUp();
   const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
   const [expanded, setExpanded] = useState(false);
@@ -142,18 +133,32 @@ export function ConflictManagementScreen() {
     [updateState],
   );
 
+  const { scoresBySlug, hasAnyFacets } =
+    useFacetRecommendations("conflictManagement");
+  const rankedMethods = useMemo(
+    () => rankMethodsByScore(cm.methods, scoresBySlug),
+    [cm.methods, scoresBySlug],
+  );
+
+  const { compactCardIds, recommendedIds } = useMemo(
+    () => deriveCompactCards(rankedMethods, scoresBySlug, hasAnyFacets, 5),
+    [rankedMethods, scoresBySlug, hasAnyFacets],
+  );
+
   const sampleCards = useMemo(
     () =>
-      CONFLICT_CARD_ORDER.map((id) => {
-        const row = cm.cards[id as keyof typeof cm.cards];
-        return {
-          id,
-          label: row.label,
-          supportText: row.supportText,
-          recommended: true,
-        };
-      }),
-    [cm],
+      rankedMethods.map((entry) => ({
+        id: entry.id,
+        label: entry.label,
+        supportText: entry.supportText,
+        recommended: recommendedIds.has(entry.id),
+      })),
+    [rankedMethods, recommendedIds],
+  );
+
+  const methodById = useMemo(
+    () => new Map(rankedMethods.map((entry) => [entry.id, entry])),
+    [rankedMethods],
   );
 
   const title = expanded ? cm.page.expandedTitle : cm.page.compactTitle;
@@ -187,25 +192,10 @@ export function ConflictManagementScreen() {
       };
     }
 
-    if (pendingCardId in cm.modals) {
-      const modal = cm.modals[pendingCardId as keyof typeof cm.modals];
-      return {
-        title: modal.title,
-        description: modal.description,
-        nextButtonText: cm.addApproach.nextButtonText,
-        showBackButton: false as const,
-        currentStep: undefined,
-        totalSteps: undefined,
-      };
-    }
-
-    const cardRow =
-      pendingCardId in cm.cards
-        ? cm.cards[pendingCardId as keyof typeof cm.cards]
-        : null;
+    const method = methodById.get(pendingCardId);
     return {
-      title: cardRow?.label ?? cm.confirmModal.title,
-      description: cardRow?.supportText ?? cm.confirmModal.description,
+      title: method?.label ?? cm.confirmModal.title,
+      description: method?.supportText ?? cm.confirmModal.description,
       nextButtonText: cm.addApproach.nextButtonText,
       showBackButton: false as const,
       currentStep: undefined,
@@ -266,6 +256,7 @@ export function ConflictManagementScreen() {
             hasMore={true}
             toggleLabel={cm.page.seeAllLink}
             compactRecommendedLimit={5}
+            compactCardIds={compactCardIds}
             compactDesktopLayout="pyramidFive"
             headerLockupSize={mdUp ? "L" : "M"}
           />
diff --git a/app/(app)/create/screens/card/MembershipMethodsScreen.tsx b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
index de23389..bd20b52 100644
--- a/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
@@ -7,7 +7,7 @@
  * Card click opens the Figma create modal (node `20858-13948`) with three
  * editable sections — Eligibility & Philosophy, Joining Process, and
  * Expectations & Removal. Section defaults come from
- * `messages/en/create/membership.json` and will be replaced with DB-driven
+ * `messages/en/create/customRule/membership.json` and will be replaced with DB-driven
  * content.
  */
 
@@ -15,6 +15,11 @@ import { useState, useCallback, useMemo } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import {
+  deriveCompactCards,
+  rankMethodsByScore,
+  useFacetRecommendations,
+} from "../../hooks/useFacetRecommendations";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../../components/utility/CardStack";
 import Create from "../../../../components/modals/Create";
@@ -33,17 +38,6 @@ const SECTION_FIELDS = [
 ] as const;
 type SectionField = (typeof SECTION_FIELDS)[number];
 
-const MEMBERSHIP_CARD_ORDER = [
-  "open-access",
-  "orientation-required",
-  "invitation-only",
-  "contribution-based",
-  "mentorship",
-  "6",
-  "7",
-  "8",
-] as const;
-
 function AddMembershipModalContent({
   membershipCardId,
 }: {
@@ -51,15 +45,13 @@ function AddMembershipModalContent({
 }) {
   const { markCreateFlowInteraction } = useCreateFlow();
   const m = useMessages();
-  const mem = m.create.membership;
-  const modal =
-    membershipCardId in mem.modals
-      ? mem.modals[membershipCardId as keyof typeof mem.modals]
-      : null;
-  const defaults = modal?.sections ?? {
-    eligibility: "",
-    joiningProcess: "",
-    expectations: "",
+  const mem = m.create.customRule.membership;
+  const method = mem.methods.find((entry) => entry.id === membershipCardId);
+  const sections = method?.sections;
+  const defaults: Record<SectionField, string> = {
+    eligibility: sections?.eligibility ?? "",
+    joiningProcess: sections?.joiningProcess ?? "",
+    expectations: sections?.expectations ?? "",
   };
 
   const [sectionValues, setSectionValues] = useState<
@@ -95,7 +87,7 @@ function AddMembershipModalContent({
 
 export function MembershipMethodsScreen() {
   const m = useMessages();
-  const mem = m.create.membership;
+  const mem = m.create.customRule.membership;
   const mdUp = useCreateFlowMdUp();
   const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
   const [expanded, setExpanded] = useState(false);
@@ -111,18 +103,32 @@ export function MembershipMethodsScreen() {
     [updateState],
   );
 
+  const { scoresBySlug, hasAnyFacets } =
+    useFacetRecommendations("membership");
+  const rankedMethods = useMemo(
+    () => rankMethodsByScore(mem.methods, scoresBySlug),
+    [mem.methods, scoresBySlug],
+  );
+
+  const { compactCardIds, recommendedIds } = useMemo(
+    () => deriveCompactCards(rankedMethods, scoresBySlug, hasAnyFacets, 5),
+    [rankedMethods, scoresBySlug, hasAnyFacets],
+  );
+
   const sampleCards = useMemo(
     () =>
-      MEMBERSHIP_CARD_ORDER.map((id) => {
-        const row = mem.cards[id as keyof typeof mem.cards];
-        return {
-          id,
-          label: row.label,
-          supportText: row.supportText,
-          recommended: true,
-        };
-      }),
-    [mem],
+      rankedMethods.map((entry) => ({
+        id: entry.id,
+        label: entry.label,
+        supportText: entry.supportText,
+        recommended: recommendedIds.has(entry.id),
+      })),
+    [rankedMethods, recommendedIds],
+  );
+
+  const methodById = useMemo(
+    () => new Map(rankedMethods.map((entry) => [entry.id, entry])),
+    [rankedMethods],
   );
 
   const title = expanded ? mem.page.expandedTitle : mem.page.compactTitle;
@@ -156,25 +162,10 @@ export function MembershipMethodsScreen() {
       };
     }
 
-    if (pendingCardId in mem.modals) {
-      const modal = mem.modals[pendingCardId as keyof typeof mem.modals];
-      return {
-        title: modal.title,
-        description: modal.description,
-        nextButtonText: mem.addPlatform.nextButtonText,
-        showBackButton: false as const,
-        currentStep: undefined,
-        totalSteps: undefined,
-      };
-    }
-
-    const cardRow =
-      pendingCardId in mem.cards
-        ? mem.cards[pendingCardId as keyof typeof mem.cards]
-        : null;
+    const method = methodById.get(pendingCardId);
     return {
-      title: cardRow?.label ?? mem.confirmModal.title,
-      description: cardRow?.supportText ?? mem.confirmModal.description,
+      title: method?.label ?? mem.confirmModal.title,
+      description: method?.supportText ?? mem.confirmModal.description,
       nextButtonText: mem.addPlatform.nextButtonText,
       showBackButton: false as const,
       currentStep: undefined,
@@ -235,6 +226,7 @@ export function MembershipMethodsScreen() {
             hasMore={true}
             toggleLabel={mem.page.seeAllLink}
             compactRecommendedLimit={5}
+            compactCardIds={compactCardIds}
             compactDesktopLayout="pyramidFive"
             headerLockupSize={mdUp ? "L" : "M"}
           />
diff --git a/app/(app)/create/screens/completed/CompletedScreen.tsx b/app/(app)/create/screens/completed/CompletedScreen.tsx
index 7e4294c..ee22a4c 100644
--- a/app/(app)/create/screens/completed/CompletedScreen.tsx
+++ b/app/(app)/create/screens/completed/CompletedScreen.tsx
@@ -17,7 +17,7 @@ import {
 export function CompletedScreen() {
   const mdUp = useCreateFlowMdUp();
   const m = useMessages();
-  const completed = m.create.completed;
+  const completed = m.create.reviewAndComplete.completed;
 
   const fallbackSections = useMemo(
     () =>
diff --git a/app/(app)/create/screens/informational/InformationalScreen.tsx b/app/(app)/create/screens/informational/InformationalScreen.tsx
index 7069bf4..46ec934 100644
--- a/app/(app)/create/screens/informational/InformationalScreen.tsx
+++ b/app/(app)/create/screens/informational/InformationalScreen.tsx
@@ -14,7 +14,7 @@ import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowL
  */
 export function InformationalScreen() {
   const mdUp = useCreateFlowMdUp();
-  const copy = useMessages().create.informational;
+  const copy = useMessages().create.community.informational;
 
   const items = [
     {
diff --git a/app/(app)/create/screens/review/CommunityReviewScreen.tsx b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
index e1ff1cf..33f17f2 100644
--- a/app/(app)/create/screens/review/CommunityReviewScreen.tsx
+++ b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
@@ -14,7 +14,7 @@ import {
 /** Create Community review — Figma `19706:12135` (`/create/review`; two columns from `lg:`; column caps in `createFlowLayoutTokens`). */
 export function CommunityReviewScreen() {
   const lgUp = useCreateFlowLgUp();
-  const t = useTranslation("create.review");
+  const t = useTranslation("create.community.review");
   const { state } = useCreateFlow();
 
   const cardTitle =
diff --git a/app/(app)/create/screens/review/FinalReviewScreen.tsx b/app/(app)/create/screens/review/FinalReviewScreen.tsx
index db45cb6..ed070f1 100644
--- a/app/(app)/create/screens/review/FinalReviewScreen.tsx
+++ b/app/(app)/create/screens/review/FinalReviewScreen.tsx
@@ -27,12 +27,12 @@ function buildFinalReviewCategories(
 export function FinalReviewScreen() {
   const { state } = useCreateFlow();
   const mdUp = useCreateFlowMdUp();
-  const t = useTranslation("create.finalReview");
+  const t = useTranslation("create.reviewAndComplete.finalReview");
   const m = useMessages();
 
   const finalReviewCategories = useMemo(
-    () => buildFinalReviewCategories(m.create.finalReview.categories),
-    [m.create.finalReview.categories],
+    () => buildFinalReviewCategories(m.create.reviewAndComplete.finalReview.categories),
+    [m.create.reviewAndComplete.finalReview.categories],
   );
 
   const ruleCardTitle = useMemo(() => {
diff --git a/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
index 9773969..3e5193a 100644
--- a/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
+++ b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
@@ -9,8 +9,9 @@
  *
  * Card click opens the Figma "Add Approach" create modal (node `20870-72155`) with five controls:
  * Core Principle, Applicable Scope, Step-by-Step Instructions, Consensus Level, and Objections &
- * Deadlocks. Section defaults are sourced from `messages/en/create/rightRail.json` and will be
- * replaced with DB-driven content; labels are hard-coded per the Figma design.
+ * Deadlocks. Section defaults are sourced from `messages/en/create/customRule/decisionApproaches.json` (read
+ * via `m.create.customRule.decisionApproaches`) and will be replaced with DB-driven content; labels are
+ * hard-coded per the Figma design.
  */
 
 import { useState, useCallback, useMemo } from "react";
@@ -24,6 +25,11 @@ import type { CardStackItem } from "../../../../components/utility/CardStack/Car
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import {
+  deriveCompactCards,
+  rankMethodsByScore,
+  useFacetRecommendations,
+} from "../../hooks/useFacetRecommendations";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
 import ModalTextAreaField from "../../components/ModalTextAreaField";
 import ApplicableScopeField from "../../components/ApplicableScopeField";
@@ -49,12 +55,9 @@ function AddDecisionApproachModalContent({
 }) {
   const { markCreateFlowInteraction } = useCreateFlow();
   const m = useMessages();
-  const rr = m.create.rightRail;
-  const modal =
-    approachCardId in rr.modals
-      ? rr.modals[approachCardId as keyof typeof rr.modals]
-      : null;
-  const modalSections = modal?.sections;
+  const da = m.create.customRule.decisionApproaches;
+  const method = da.methods.find((entry) => entry.id === approachCardId);
+  const modalSections = method?.sections;
   const defaults: RightRailModalSections = {
     corePrinciple: modalSections?.corePrinciple ?? "",
     applicableScope: modalSections?.applicableScope ?? [],
@@ -87,13 +90,13 @@ function AddDecisionApproachModalContent({
   return (
     <div className="flex flex-col gap-6">
       <ModalTextAreaField
-        label={rr.sectionHeadings.corePrinciple}
+        label={da.sectionHeadings.corePrinciple}
         value={sections.corePrinciple}
         onChange={(v) => patch("corePrinciple", v)}
       />
       <ApplicableScopeField
-        label={rr.sectionHeadings.applicableScope}
-        addLabel={rr.scopeAddButtonLabel}
+        label={da.sectionHeadings.applicableScope}
+        addLabel={da.scopeAddButtonLabel}
         scopes={sections.applicableScope}
         selectedScopes={sections.selectedApplicableScope}
         onToggleScope={(scope) =>
@@ -109,12 +112,12 @@ function AddDecisionApproachModalContent({
         }
       />
       <ModalTextAreaField
-        label={rr.sectionHeadings.stepByStepInstructions}
+        label={da.sectionHeadings.stepByStepInstructions}
         value={sections.stepByStepInstructions}
         onChange={(v) => patch("stepByStepInstructions", v)}
       />
       <IncrementerBlock
-        label={rr.sectionHeadings.consensusLevel}
+        label={da.sectionHeadings.consensusLevel}
         value={sections.consensusLevel}
         min={CONSENSUS_LEVEL_MIN}
         max={CONSENSUS_LEVEL_MAX}
@@ -125,7 +128,7 @@ function AddDecisionApproachModalContent({
         incrementAriaLabel="Increase consensus level"
       />
       <ModalTextAreaField
-        label={rr.sectionHeadings.objectionsDeadlocks}
+        label={da.sectionHeadings.objectionsDeadlocks}
         value={sections.objectionsDeadlocks}
         onChange={(v) => patch("objectionsDeadlocks", v)}
       />
@@ -135,7 +138,7 @@ function AddDecisionApproachModalContent({
 
 export function DecisionApproachesScreen() {
   const m = useMessages();
-  const rr = m.create.rightRail;
+  const da = m.create.customRule.decisionApproaches;
   const mdUp = useCreateFlowMdUp();
   const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
   const [messageBoxCheckedIds, setMessageBoxCheckedIds] = useState<string[]>(
@@ -156,41 +159,53 @@ export function DecisionApproachesScreen() {
 
   const messageBoxItems: InfoMessageBoxItem[] = useMemo(
     () =>
-      rr.messageBox.items.map((item) => ({
+      da.messageBox.items.map((item) => ({
         id: item.id,
         label: item.label,
       })),
-    [rr.messageBox.items],
+    [da.messageBox.items],
+  );
+
+  const { scoresBySlug, hasAnyFacets } =
+    useFacetRecommendations("decisionApproaches");
+  const rankedMethods = useMemo(
+    () => rankMethodsByScore(da.methods, scoresBySlug),
+    [da.methods, scoresBySlug],
+  );
+
+  const { compactCardIds, recommendedIds } = useMemo(
+    () => deriveCompactCards(rankedMethods, scoresBySlug, hasAnyFacets, 5),
+    [rankedMethods, scoresBySlug, hasAnyFacets],
   );
 
   const sampleCards: CardStackItem[] = useMemo(
     () =>
-      rr.cards.map((c) => ({
-        id: c.id,
-        label: c.label,
-        supportText: c.supportText,
-        recommended: c.recommended,
+      rankedMethods.map((entry) => ({
+        id: entry.id,
+        label: entry.label,
+        supportText: entry.supportText,
+        recommended: recommendedIds.has(entry.id),
       })),
-    [rr.cards],
+    [rankedMethods, recommendedIds],
   );
 
-  const cardById = useMemo(
-    () => new Map(rr.cards.map((c) => [c.id, c])),
-    [rr.cards],
+  const methodById = useMemo(
+    () => new Map(rankedMethods.map((entry) => [entry.id, entry])),
+    [rankedMethods],
   );
 
   const sidebarDescription = (
     <>
-      {rr.sidebar.descriptionBefore}
+      {da.sidebar.descriptionBefore}
       <InlineTextButton
         onClick={() => {
           markCreateFlowInteraction();
           setExpanded(true);
         }}
       >
-        {rr.sidebar.descriptionLinkLabel}
+        {da.sidebar.descriptionLinkLabel}
       </InlineTextButton>
-      {rr.sidebar.descriptionAfter}
+      {da.sidebar.descriptionAfter}
     </>
   );
 
@@ -239,26 +254,17 @@ export function DecisionApproachesScreen() {
   const modalConfig = (() => {
     if (!pendingCardId) {
       return {
-        title: rr.confirmModal.title,
-        description: rr.confirmModal.description,
-        nextButtonText: rr.confirmModal.nextButtonText,
+        title: da.confirmModal.title,
+        description: da.confirmModal.description,
+        nextButtonText: da.confirmModal.nextButtonText,
       };
     }
 
-    if (pendingCardId in rr.modals) {
-      const modal = rr.modals[pendingCardId as keyof typeof rr.modals];
-      return {
-        title: modal.title,
-        description: modal.description,
-        nextButtonText: rr.addApproach.nextButtonText,
-      };
-    }
-
-    const card = cardById.get(pendingCardId);
+    const method = methodById.get(pendingCardId);
     return {
-      title: card?.label ?? rr.confirmModal.title,
-      description: card?.supportText ?? rr.confirmModal.description,
-      nextButtonText: rr.addApproach.nextButtonText,
+      title: method?.label ?? da.confirmModal.title,
+      description: method?.supportText ?? da.confirmModal.description,
+      nextButtonText: da.addApproach.nextButtonText,
     };
   })();
 
@@ -268,9 +274,9 @@ export function DecisionApproachesScreen() {
       lgVerticalAlign="start"
       header={
         <DecisionMakingSidebar
-          title={rr.sidebar.title}
+          title={da.sidebar.title}
           description={sidebarDescription}
-          messageBoxTitle={rr.messageBox.title}
+          messageBoxTitle={da.messageBox.title}
           messageBoxItems={messageBoxItems}
           messageBoxCheckedIds={messageBoxCheckedIds}
           onMessageBoxCheckboxChange={handleMessageBoxCheckboxChange}
@@ -287,12 +293,13 @@ export function DecisionApproachesScreen() {
           expanded={expanded}
           onToggleExpand={handleToggleExpand}
           hasMore={true}
-          toggleLabel={rr.cardStack.toggleSeeAll}
-          showLessLabel={rr.cardStack.toggleShowLess}
+          toggleLabel={da.cardStack.toggleSeeAll}
+          showLessLabel={da.cardStack.toggleShowLess}
           title=""
           description=""
           layout="singleStack"
           compactRecommendedLimit={5}
+          compactCardIds={compactCardIds}
           className="w-full"
           headerLockupSize={mdUp ? "L" : "M"}
         />
diff --git a/app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx b/app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx
index a7d313e..0a46712 100644
--- a/app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx
@@ -27,7 +27,7 @@ function selectedIdsFromOptions(options: ChipOption[]): string[] {
 /** Create Community — Figma `20094:41317`, chips only (layout tokens shared with structure select). */
 export function CommunitySizeSelectScreen() {
   const m = useMessages();
-  const cs = m.create.communitySize;
+  const cs = m.create.community.communitySize;
   const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
 
   const [communitySizeOptions, setCommunitySizeOptions] = useState<
diff --git a/app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx b/app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx
index 8784e32..49242e6 100644
--- a/app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx
@@ -106,7 +106,7 @@ function snapshotRowsToChipOptions(
 /** Create Community step 3 — Figma `20094:18244` (responsive grid + column caps via `createFlowLayoutTokens`). */
 export function CommunityStructureSelectScreen() {
   const m = useMessages();
-  const cs = m.create.communityStructure;
+  const cs = m.create.community.communityStructure;
   const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
 
   const [organizationTypeOptions, setOrganizationTypeOptions] = useState<
diff --git a/app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx b/app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
index 8a4fee2..560735d 100644
--- a/app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
+++ b/app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
@@ -12,7 +12,7 @@ import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowL
 
 export function ConfirmStakeholdersScreen() {
   const { markCreateFlowInteraction } = useCreateFlow();
-  const t = useTranslation("create.confirmStakeholders");
+  const t = useTranslation("create.reviewAndComplete.confirmStakeholders");
   const [toastDismissed, setToastDismissed] = useState(false);
   const [stakeholderOptions, setStakeholderOptions] = useState<ChipOption[]>(
     [],
diff --git a/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
index d8639fd..64a30e3 100644
--- a/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
@@ -99,7 +99,7 @@ function snapshotRowsToChipOptions(
 /** Create Custom — Core Values (Figma `20264:68378`). Up to five selections; preset list + custom chips. */
 export function CoreValuesSelectScreen() {
   const m = useMessages();
-  const cv = m.create.coreValues;
+  const cv = m.create.customRule.coreValues;
   const presets = useMemo(
     () => normalizeCoreValuePresets(cv.values as CoreValuePresetJson[]),
     [cv.values],
diff --git a/app/(app)/create/screens/upload/CommunityUploadScreen.tsx b/app/(app)/create/screens/upload/CommunityUploadScreen.tsx
index b3e17fa..b1681b2 100644
--- a/app/(app)/create/screens/upload/CommunityUploadScreen.tsx
+++ b/app/(app)/create/screens/upload/CommunityUploadScreen.tsx
@@ -10,7 +10,7 @@ import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowL
 /** Create Community — Figma Flow — Upload `20094:41524`. */
 export function CommunityUploadScreen() {
   const m = useMessages();
-  const u = m.create.communityUpload;
+  const u = m.create.community.communityUpload;
   const { markCreateFlowInteraction } = useCreateFlow();
 
   const handleUploadClick = () => {
diff --git a/app/(app)/create/types.ts b/app/(app)/create/types.ts
index 68393b5..8cc2d49 100644
--- a/app/(app)/create/types.ts
+++ b/app/(app)/create/types.ts
@@ -85,13 +85,13 @@ export interface CreateFlowState {
   coreValuesChipsSnapshot?: CommunityStructureChipSnapshotRow[];
   /** User-authored detail text keyed by chip id (preset ids or custom UUIDs). */
   coreValueDetailsByChipId?: Record<string, CoreValueDetailEntry>;
-  /** Create Custom — communication methods step (`/create/communication-methods`); card ids from `create.communication` presets. */
+  /** Create Custom — communication methods step (`/create/communication-methods`); card ids from `create.customRule.communication` presets. */
   selectedCommunicationMethodIds?: string[];
-  /** Create Custom — membership / join patterns (`/create/membership-methods`); card ids from `create.membership` presets. */
+  /** Create Custom — membership / join patterns (`/create/membership-methods`); card ids from `create.customRule.membership` presets. */
   selectedMembershipMethodIds?: string[];
-  /** Create Custom — decision approaches (`/create/decision-approaches`); card ids from `create.rightRail` presets. */
+  /** Create Custom — decision approaches (`/create/decision-approaches`); card ids from `create.customRule.decisionApproaches` presets. */
   selectedDecisionApproachIds?: string[];
-  /** Create Custom — conflict management (`/create/conflict-management`); card ids from `create.conflictManagement` presets. */
+  /** Create Custom — conflict management (`/create/conflict-management`); card ids from `create.customRule.conflictManagement` presets. */
   selectedConflictManagementIds?: string[];
   currentStep?: CreateFlowStep;
   /** Section drafts; structure will tighten as steps persist real shapes. */
diff --git a/app/(app)/create/utils/createFlowScreenRegistry.ts b/app/(app)/create/utils/createFlowScreenRegistry.ts
index ff189fe..19bb251 100644
--- a/app/(app)/create/utils/createFlowScreenRegistry.ts
+++ b/app/(app)/create/utils/createFlowScreenRegistry.ts
@@ -20,7 +20,9 @@ interface CreateFlowScreenDefinition {
   /** Figma node id (file Community-Rule-System), dev mode. */
   figmaNodeId: string;
   /**
-   * Namespace for `useTranslation`, e.g. `create.communityName`.
+   * Namespace for `useTranslation`, e.g. `create.community.communityName`.
+   * Stage prefix (`community` / `customRule` / `reviewAndComplete`) matches the
+   * messages folder layout — see `messages/en/index.ts` and `docs/guides/template-recommendation-matrix.md` §1c.
    * Not all screens use i18n the same way (e.g. card step uses `useMessages` elsewhere).
    */
   messageNamespace: string;
@@ -40,97 +42,97 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record<
   informational: {
     layoutKind: "informational",
     figmaNodeId: "20094-16005",
-    messageNamespace: "create.informational",
+    messageNamespace: "create.community.informational",
     centeredBodyBelowMd: false,
   },
   "community-name": {
     layoutKind: "text",
     figmaNodeId: "20094-18187",
-    messageNamespace: "create.communityName",
+    messageNamespace: "create.community.communityName",
     centeredBodyBelowMd: true,
   },
   "community-size": {
     layoutKind: "select",
     figmaNodeId: "20094-41317",
-    messageNamespace: "create.communitySize",
+    messageNamespace: "create.community.communitySize",
     centeredBodyBelowMd: false,
   },
   "community-context": {
     layoutKind: "text",
     figmaNodeId: "20094-41243",
-    messageNamespace: "create.communityContext",
+    messageNamespace: "create.community.communityContext",
     centeredBodyBelowMd: true,
   },
   "community-structure": {
     layoutKind: "select",
     figmaNodeId: "20094-18244",
-    messageNamespace: "create.communityStructure",
+    messageNamespace: "create.community.communityStructure",
     centeredBodyBelowMd: false,
   },
   "community-upload": {
     layoutKind: "upload",
     figmaNodeId: "20094-41524",
-    messageNamespace: "create.communityUpload",
+    messageNamespace: "create.community.communityUpload",
     centeredBodyBelowMd: false,
   },
   "community-save": {
     layoutKind: "text",
     figmaNodeId: "20097-14948",
-    messageNamespace: "create.communitySave",
+    messageNamespace: "create.community.communitySave",
     centeredBodyBelowMd: true,
   },
   review: {
     layoutKind: "review",
     figmaNodeId: "19706-12135",
-    messageNamespace: "create.review",
+    messageNamespace: "create.community.review",
     centeredBodyBelowMd: false,
   },
   "core-values": {
     layoutKind: "select",
     figmaNodeId: "20264-68378",
-    messageNamespace: "create.coreValues",
+    messageNamespace: "create.customRule.coreValues",
     centeredBodyBelowMd: false,
   },
   "communication-methods": {
     layoutKind: "card",
     figmaNodeId: "20246-15828",
-    messageNamespace: "create.communication",
+    messageNamespace: "create.customRule.communication",
     centeredBodyBelowMd: false,
   },
   "membership-methods": {
     layoutKind: "card",
     figmaNodeId: "20858-13947",
-    messageNamespace: "create.membership",
+    messageNamespace: "create.customRule.membership",
     centeredBodyBelowMd: false,
   },
   "decision-approaches": {
     layoutKind: "right-rail",
     figmaNodeId: "20523-23509",
-    messageNamespace: "create.rightRail",
+    messageNamespace: "create.customRule.decisionApproaches",
     centeredBodyBelowMd: false,
   },
   "conflict-management": {
     layoutKind: "card",
     figmaNodeId: "20879-15979",
-    messageNamespace: "create.conflictManagement",
+    messageNamespace: "create.customRule.conflictManagement",
     centeredBodyBelowMd: false,
   },
   "confirm-stakeholders": {
     layoutKind: "select",
     figmaNodeId: "21104-46594",
-    messageNamespace: "create.confirmStakeholders",
+    messageNamespace: "create.reviewAndComplete.confirmStakeholders",
     centeredBodyBelowMd: false,
   },
   "final-review": {
     layoutKind: "review",
     figmaNodeId: "20907-212767",
-    messageNamespace: "create.finalReview",
+    messageNamespace: "create.reviewAndComplete.finalReview",
     centeredBodyBelowMd: false,
   },
   completed: {
     layoutKind: "completed",
     figmaNodeId: "20907-213286",
-    messageNamespace: "create.completed",
+    messageNamespace: "create.reviewAndComplete.completed",
     centeredBodyBelowMd: false,
   },
 };
diff --git a/app/api/create-flow/methods/route.ts b/app/api/create-flow/methods/route.ts
new file mode 100644
index 0000000..12c77bc
--- /dev/null
+++ b/app/api/create-flow/methods/route.ts
@@ -0,0 +1,56 @@
+import { NextResponse, type NextRequest } from "next/server";
+import { isDatabaseConfigured } from "../../../../lib/server/env";
+import { listMethodRecommendations } from "../../../../lib/server/methodRecommendations";
+import { dbUnavailable } from "../../../../lib/server/responses";
+import {
+  SECTION_IDS,
+  type SectionId,
+  parseRequestedFacetsFromSearchParams,
+} from "../../../../lib/server/validation/methodFacetsSchemas";
+
+const SECTION_SET = new Set<string>(SECTION_IDS);
+
+/**
+ * GET /api/create-flow/methods?section=<section>[&facet.*=...]
+ *
+ * Returns slugs + per-method match scores for one of the four card-deck
+ * sections; the wizard renders by looking up the slug in the section's
+ * messages file (`useMessages().create.customRule.<section>.methods`).
+ *
+ * See `docs/guides/template-recommendation-matrix.md` §9.2 / §10.
+ */
+export async function GET(request: NextRequest) {
+  if (!isDatabaseConfigured()) {
+    return dbUnavailable();
+  }
+
+  const sectionParam = request.nextUrl.searchParams.get("section");
+  if (!sectionParam || !SECTION_SET.has(sectionParam)) {
+    return NextResponse.json(
+      {
+        error: {
+          code: "validation_error",
+          message: `Unknown section. Expected one of: ${SECTION_IDS.join(", ")}`,
+        },
+      },
+      { status: 400 },
+    );
+  }
+  const section = sectionParam as SectionId;
+
+  const facets = parseRequestedFacetsFromSearchParams(
+    request.nextUrl.searchParams,
+  );
+  const result = await listMethodRecommendations({ section, facets });
+  if (!result) {
+    // DB query failed; return empty so the wizard falls back to its messages
+    // deck in authoring order (§10).
+    return NextResponse.json({ section, methods: [] });
+  }
+
+  const methods = result.rankedSlugs.map((slug) => ({
+    slug,
+    matches: result.matchesBySlug[slug] ?? { score: 0, matchedFacets: [] },
+  }));
+  return NextResponse.json({ section, methods });
+}
diff --git a/app/api/drafts/me/route.ts b/app/api/drafts/me/route.ts
index 385f045..dbde8ca 100644
--- a/app/api/drafts/me/route.ts
+++ b/app/api/drafts/me/route.ts
@@ -68,3 +68,20 @@ export async function PUT(request: NextRequest) {
     draft: { payload: draft.payload, updatedAt: draft.updatedAt },
   });
 }
+
+export async function DELETE() {
+  if (!isDatabaseConfigured()) {
+    return dbUnavailable();
+  }
+
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  // Idempotent: missing draft is a no-op so callers can fire-and-forget after
+  // publish / exit without worrying about prior state.
+  await prisma.ruleDraft.deleteMany({ where: { userId: user.id } });
+
+  return NextResponse.json({ ok: true });
+}
diff --git a/app/api/templates/route.ts b/app/api/templates/route.ts
index b28b7ec..16ea3cd 100644
--- a/app/api/templates/route.ts
+++ b/app/api/templates/route.ts
@@ -1,17 +1,31 @@
-import { NextResponse } from "next/server";
+import { NextResponse, type NextRequest } from "next/server";
 import { isDatabaseConfigured } from "../../../lib/server/env";
-import { listRuleTemplatesFromDb } from "../../../lib/server/ruleTemplates";
+import { listRankedRuleTemplatesFromDb } from "../../../lib/server/ruleTemplates";
 import { dbUnavailable } from "../../../lib/server/responses";
+import { parseRequestedFacetsFromSearchParams } from "../../../lib/server/validation/methodFacetsSchemas";
 
 /**
- * Curated rule templates for recommendations (seed via Prisma Studio or a script).
+ * GET /api/templates
+ *
+ * No params → curated ordering (`featured` desc, `sortOrder` asc, `title`
+ * asc). With `facet.<group>=<value>` query params (repeatable per group),
+ * templates are re-ranked by composed-method match count; ties fall back to
+ * the curated order, score-0 templates remain at the end.
+ *
+ * See `docs/guides/template-recommendation-matrix.md` §9.1.
  */
-export async function GET() {
+export async function GET(request: NextRequest) {
   if (!isDatabaseConfigured()) {
     return dbUnavailable();
   }
 
-  const templates = await listRuleTemplatesFromDb();
+  const facets = parseRequestedFacetsFromSearchParams(
+    request.nextUrl.searchParams,
+  );
+  const { templates, scores } = await listRankedRuleTemplatesFromDb(facets);
+  const hasScores = Object.keys(scores).length > 0;
 
-  return NextResponse.json({ templates });
+  return NextResponse.json(
+    hasScores ? { templates, scores } : { templates },
+  );
 }
diff --git a/app/components/utility/CardStack/CardStack.container.tsx b/app/components/utility/CardStack/CardStack.container.tsx
index ada2ef1..bcf498a 100644
--- a/app/components/utility/CardStack/CardStack.container.tsx
+++ b/app/components/utility/CardStack/CardStack.container.tsx
@@ -26,6 +26,7 @@ const CardStackContainer = memo<CardStackProps>(
     description = "",
     layout = "default",
     compactRecommendedLimit = 5,
+    compactCardIds,
     compactDesktopLayout: compactDesktopLayoutProp = "grid",
     headerLockupSize,
     toggleAlignment = "center",
@@ -83,6 +84,7 @@ const CardStackContainer = memo<CardStackProps>(
         description={description}
         layout={layout}
         compactRecommendedLimit={compactRecommendedLimit}
+        compactCardIds={compactCardIds}
         compactDesktopLayout={compactDesktopLayoutProp}
         headerLockupSize={headerLockupSize}
         toggleAlignment={toggleAlignment}
diff --git a/app/components/utility/CardStack/CardStack.types.ts b/app/components/utility/CardStack/CardStack.types.ts
index 6c81314..e7cd602 100644
--- a/app/components/utility/CardStack/CardStack.types.ts
+++ b/app/components/utility/CardStack/CardStack.types.ts
@@ -25,6 +25,16 @@ export interface CardStackProps {
    * Max recommended cards in compact (non-expanded) mode. Default 5; Figma compact stack uses 3.
    */
   compactRecommendedLimit?: number;
+  /**
+   * Optional explicit list of card ids to render in the compact slot, in
+   * order. When provided, this overrides the default
+   * `cards.filter(c => c.recommended)` selection — the `recommended` flag
+   * then only controls the visual "Recommended" badge. Used by the
+   * create-flow card-deck steps so facet scores can pick the compact set
+   * (and badge only the truly matched subset). Cards whose ids are not in
+   * `cards` are silently dropped.
+   */
+  compactCardIds?: string[];
   /**
    * At `md+`, how compact recommended cards are laid out. `flexWrap` matches Figma Flow — Compact Card Stack (three cards in a row).
    * `pyramidFive` = two rows (3 + 2) centered for five recommended cards (membership step).
@@ -50,6 +60,7 @@ export interface CardStackViewProps {
   description: string;
   layout: "default" | "singleStack";
   compactRecommendedLimit: number;
+  compactCardIds: string[] | undefined;
   compactDesktopLayout: "grid" | "flexWrap" | "pyramidFive";
   headerLockupSize: HeaderLockupSizeValue | undefined;
   toggleAlignment: "center" | "end";
diff --git a/app/components/utility/CardStack/CardStack.view.tsx b/app/components/utility/CardStack/CardStack.view.tsx
index 27b28ad..6ec8f7e 100644
--- a/app/components/utility/CardStack/CardStack.view.tsx
+++ b/app/components/utility/CardStack/CardStack.view.tsx
@@ -17,6 +17,7 @@ export function CardStackView({
   description,
   layout,
   compactRecommendedLimit,
+  compactCardIds,
   compactDesktopLayout,
   headerLockupSize,
   toggleAlignment,
@@ -24,10 +25,22 @@ export function CardStackView({
 }: CardStackViewProps) {
   const lockupSize = headerLockupSize ?? "L";
   const isSelected = (id: string) => selectedIds.includes(id);
-  // Compact: recommended only (default up to 5). Expanded: all cards.
-  const compactCards = cards
-    .filter((c) => c.recommended ?? false)
-    .slice(0, compactRecommendedLimit);
+  // Compact: explicit `compactCardIds` (caller-driven, used by create-flow
+  // facet ranker) takes precedence over the legacy `recommended`-filter so
+  // the screen can show un-tagged cards in the compact slot when there is
+  // no facet signal yet (CR-88 §10).
+  const compactCards = (() => {
+    if (compactCardIds && compactCardIds.length > 0) {
+      const byId = new Map(cards.map((c) => [c.id, c]));
+      return compactCardIds
+        .map((id) => byId.get(id))
+        .filter((c): c is (typeof cards)[number] => c !== undefined)
+        .slice(0, compactRecommendedLimit);
+    }
+    return cards
+      .filter((c) => c.recommended ?? false)
+      .slice(0, compactRecommendedLimit);
+  })();
 
   // Single stack: always one column; expand reveals more in same stack (scrollable)
   if (layout === "singleStack") {
diff --git a/data/create/customRule/_facetGroups.json b/data/create/customRule/_facetGroups.json
new file mode 100644
index 0000000..1070d9d
--- /dev/null
+++ b/data/create/customRule/_facetGroups.json
@@ -0,0 +1,79 @@
+{
+  "size": {
+    "source": "messages/en/create/community/communitySize.json#/communitySizes",
+    "values": {
+      "oneMember": {
+        "chipId": "1"
+      },
+      "twoToFive": {
+        "chipId": "2"
+      },
+      "sixToTwelve": {
+        "chipId": "3"
+      },
+      "thirteenToOneHundred": {
+        "chipId": "4"
+      },
+      "oneHundredToOneHundredK": {
+        "chipId": "5"
+      }
+    }
+  },
+  "orgType": {
+    "source": "messages/en/create/community/communityStructure.json#/organizationTypes",
+    "values": {
+      "workersCoop": {
+        "chipId": "1"
+      },
+      "mutualAid": {
+        "chipId": "2"
+      },
+      "openSource": {
+        "chipId": "3"
+      },
+      "nonprofit": {
+        "chipId": "4"
+      },
+      "forProfit": {
+        "chipId": "5"
+      },
+      "dao": {
+        "chipId": "6"
+      }
+    }
+  },
+  "scale": {
+    "source": "messages/en/create/community/communityStructure.json#/scaleOptions",
+    "values": {
+      "local": {
+        "chipId": "1"
+      },
+      "regional": {
+        "chipId": "2"
+      },
+      "national": {
+        "chipId": "3"
+      },
+      "global": {
+        "chipId": "4"
+      }
+    }
+  },
+  "maturity": {
+    "source": "messages/en/create/community/communityStructure.json#/maturityOptions",
+    "values": {
+      "earlyStage": {
+        "chipId": "1"
+      },
+      "growthStage": {
+        "chipId": "2"
+      },
+      "established": {
+        "chipId": "3"
+      },
+      "enterprise": {
+        "chipId": "4"
+      }
+    }
+  }
+}
diff --git a/data/create/customRule/communication.json b/data/create/customRule/communication.json
new file mode 100644
index 0000000..20b70b7
--- /dev/null
+++ b/data/create/customRule/communication.json
@@ -0,0 +1,321 @@
+{
+  "discord": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": false
+    }
+  },
+  "discourse-forum": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "email-distribution-list": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "github-gitlab": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "in-person-meetings": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": false,
+      "national": false,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": false
+    }
+  },
+  "loomio": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "matrix-element": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "signal": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": false
+    }
+  },
+  "slack": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "video-meetings": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "whatsapp": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": false,
+      "national": false,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": false,
+      "enterprise": false
+    }
+  }
+}
diff --git a/data/create/customRule/conflictManagement.json b/data/create/customRule/conflictManagement.json
new file mode 100644
index 0000000..6050a1c
--- /dev/null
+++ b/data/create/customRule/conflictManagement.json
@@ -0,0 +1,553 @@
+{
+  "ad-hoc-arbitration": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": false,
+      "enterprise": false
+    }
+  },
+  "binding-arbitration": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "binding-contracts": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "circle-processes": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": false,
+      "enterprise": false
+    }
+  },
+  "conflict-resolution-council": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "conflict-workshops": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "consensus-building": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": false
+    }
+  },
+  "facilitated-negotiation": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "interest-based-bargaining": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "internal-tribunal": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "judicial-committees": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "lottery-sortition": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "managerial-decision": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "mediation": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "non-binding-arbitration": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "peer-mediation": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "restorative-practices": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": false
+    }
+  },
+  "rotational-judging": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "supermajority-vote": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  }
+}
diff --git a/data/create/customRule/decisionApproaches.json b/data/create/customRule/decisionApproaches.json
new file mode 100644
index 0000000..a934a33
--- /dev/null
+++ b/data/create/customRule/decisionApproaches.json
@@ -0,0 +1,930 @@
+{
+  "advisory-committees": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "algorithm-driven-decisions": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "approval-voting": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "autocratic-decision-making": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "collaborative-platforms": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "consensus-decision-making": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "consensus-seeking-with-delegates": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "continuous-voting": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "cumulative-voting": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "delegated-decision-making": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "deliberative-polling": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "do-ocracy": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "elected-board-of-directors": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "executive-committees": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "first-past-the-post": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "hierarchical-decision-making": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "holacracy": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "investor-filled-board-seats": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "lazy-consensus": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": false,
+      "established": false,
+      "enterprise": false
+    }
+  },
+  "lottery-sortition": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "majority-rule": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "modified-consensus": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "negotiated-decisions": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "proof-of-work": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "quadratic-voting": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "random-choice": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "range-voting": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": false
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "ranked-choice-voting": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": false
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "rotational-leadership": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "sociocracy": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "supermajority-rule": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": false,
+      "thirteenToOneHundred": false,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": false
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": false,
+      "enterprise": false
+    }
+  },
+  "weighted-voting": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": false
+    },
+    "scale": {
+      "global": false,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  }
+}
diff --git a/data/create/customRule/membership.json b/data/create/customRule/membership.json
new file mode 100644
index 0000000..8867ce3
--- /dev/null
+++ b/data/create/customRule/membership.json
@@ -0,0 +1,553 @@
+{
+  "application-review": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "collective-interviews": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "consensus-or-vote-based-approval": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": false,
+      "established": false,
+      "enterprise": false
+    }
+  },
+  "contribution-based": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": false
+    }
+  },
+  "hybrid-approval-process": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "identity-verification": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "invitation-only": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": false
+    }
+  },
+  "lottery-sortition": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": false
+    }
+  },
+  "membership-agreement-or-pledge": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "mentorship": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "open-access": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": false
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": false,
+      "enterprise": false
+    }
+  },
+  "orientation-required": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "pay-to-join": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": false,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": false,
+      "enterprise": false
+    }
+  },
+  "peer-sponsorship": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": true,
+      "enterprise": false
+    }
+  },
+  "referral-system-with-screening": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "skill-based-contribution": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": false,
+      "forProfit": false,
+      "nonprofit": false,
+      "openSource": true,
+      "mutualAid": false,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": true,
+      "growthStage": true,
+      "established": false,
+      "enterprise": false
+    }
+  },
+  "skill-based-evaluation": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": true,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": true,
+      "nonprofit": true,
+      "openSource": false,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "trial-period-provisional-membership": {
+    "size": {
+      "oneMember": true,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  },
+  "weighted-or-tiered-membership": {
+    "size": {
+      "oneMember": false,
+      "twoToFive": false,
+      "sixToTwelve": true,
+      "thirteenToOneHundred": true,
+      "oneHundredToOneHundredK": true
+    },
+    "orgType": {
+      "dao": true,
+      "forProfit": false,
+      "nonprofit": true,
+      "openSource": true,
+      "mutualAid": true,
+      "workersCoop": true
+    },
+    "scale": {
+      "global": true,
+      "national": true,
+      "regional": true,
+      "local": true
+    },
+    "maturity": {
+      "earlyStage": false,
+      "growthStage": false,
+      "established": true,
+      "enterprise": true
+    }
+  }
+}
diff --git a/docs/guides/template-recommendation-matrix.md b/docs/guides/template-recommendation-matrix.md
index e7edf44..467f60d 100644
--- a/docs/guides/template-recommendation-matrix.md
+++ b/docs/guides/template-recommendation-matrix.md
@@ -1,217 +1,209 @@
-# Template Recommendation Matrix — Implementation Context (CR-88)
+# Recommendation Matrix — Implementation Context (CR-88)
 
-**Status:** Draft / context doc. Reference only — not yet implemented.
+**Status:** Implemented (CR-88). This doc remains the spec — keep code in sync with it.
 **Linear:** [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-xlsx-sheets-ingestion)
-**Roadmap:** [`docs/backend-roadmap.md`](backend-roadmap.md) §4 (`RuleTemplate`) and §13.
-**Spec ticket:** [`docs/backend-linear-tickets.md`](backend-linear-tickets.md) Ticket 16.
+**Roadmap:** [`docs/guides/backend-roadmap.md`](backend-roadmap.md) §4 (`RuleTemplate`) and §13.
+**Spec ticket:** [`docs/guides/backend-linear-tickets.md`](backend-linear-tickets.md) Ticket 16.
 
-This doc consolidates the **four product-authored matrix spreadsheets** with the
-**existing data model, create-flow facets, and section structure** so we have a
-single reference while implementing the importer + recommendation API.
+This doc documents the **method facet matrix** that powers two ranking
+surfaces, both consuming the same underlying data:
 
-> **Scope note:** No data, API, or UI surface for this feature is in production
-> yet. **Backwards compatibility is not a constraint** — we will replace the
-> hand-typed `prisma/seed.ts` `COMPOSITION_BY_SLUG` map, the existing
-> `GET /api/templates` response shape, and the static `messages/en/create/*.json`
-> card decks where it makes the design cleaner.
+1. **Create-flow card ranking** — the four card-deck wizard steps
+   (`communication-methods`, `membership-methods`, `decision-approaches`,
+   `conflict-management`) reorder their `methods[]` array based on which
+   methods match the user's selected community facets.
+2. **Template grid ranking** — the curated `RuleTemplate` rows shown on
+   the marketing home `MarketingRuleStackSection.tsx` and `templates/`
+   page get scored by how many of their composed methods match the user's
+   facets, then sorted highest-first.
+
+> **Scope note:** Card / modal copy lives in
+> `messages/en/create/customRule/*.json` as flat `methods` arrays (one
+> entry per method, with `id`, `label`, `supportText`, `recommended`,
+> and a `sections` map). The matrix layer adds **facet data** — which
+> methods match which user facets — as committed JSON in
+> `data/create/customRule/*.json`, validated by Zod and seeded into
+> `MethodFacet`. There is no spreadsheet importer, no `xlsx` runtime
+> dependency, and the spreadsheets in `~/Downloads/` were a **one-time
+> authoring artifact** — they are not part of the runtime contract.
 
 ---
 
-## 1. Goal (one paragraph)
+## 1. Where things live (post-reorg)
 
-Replace the hand-curated `prisma/seed.ts` `COMPOSITION_BY_SLUG` map with a
-**spreadsheet-authored matrix** for each rule section
-(Communication, Membership, Decision-making, Conflict management — and later
-Values), where each row is a **method/pattern card** and each column is either
-**long-form copy that populates the card UI** or a **facet flag** (✓/x or score)
-that the recommendation engine uses to filter and rank cards based on the
-user's create-flow answers (community size, organization type, location/scale,
-maturity).
+### 1a. Card / modal copy — `messages/en/create/customRule/<section>.json`
 
-The same authoring contract should make it trivial for product to ship updated
-spreadsheets and have the create-flow card decks (and the home/templates page
-recommendations) update without any code changes.
+Source of truth for all displayed text. Each file holds the page chrome
+(`page`, `confirmModal`, `addPlatform`/`addApproach`, `sectionHeadings`,
+plus decision-approaches' `sidebar` / `messageBox` / `cardStack` /
+`scopeAddButtonLabel`) plus a flat `methods` array. Read via
+`useMessages().create.customRule.<section>.methods`. Never duplicated
+anywhere else; the recommendation API never returns copy.
+
+### 1b. Facet data — `data/create/customRule/<section>.json`
+
+Mirrors the messages path one-to-one (same filename, different root) so a
+content reviewer can read the two side-by-side. Each file is a typed JSON
+object mapping each method `id` → its facet matches across the four
+canonical groups (`size`, `orgType`, `scale`, `maturity`). Validated by
+the Zod schema at seed time and in CI (see §3 — no app-boot validator).
+Lives **outside** `messages/<locale>/` because facets are not localized
+— they describe the methods, not the UI text.
+
+### 1c. Messages folder reorg (prerequisite)
+
+Today every `messages/en/create/*.json` file sits flat in one folder.
+Plan: regroup into the three Figma stages from
+[`docs/create-flow.md`](../create-flow.md) §"Product stages":
+
+| New folder | Files |
+| --- | --- |
+| `messages/en/create/community/` | `informational.json`, `communityName.json`, `communityStructure.json`, `communityContext.json`, `communitySize.json`, `communityUpload.json`, `communitySave.json`, `review.json` |
+| `messages/en/create/customRule/` | `coreValues.json`, `communication.json`, `membership.json`, `decisionApproaches.json`, `conflictManagement.json` |
+| `messages/en/create/reviewAndComplete/` | `confirmStakeholders.json`, `finalReview.json`, `completed.json`, `publish.json` |
+| `messages/en/create/` (root, cross-cutting) | `footer.json`, `topNav.json`, `draftHydration.json`, `templateReview.json`, plus layout-shell strings (`select.json`, `text.json`, `upload.json`) |
+
+Touchpoints: every file move, the imports in
+[`messages/en/index.ts`](../../messages/en/index.ts), the namespace shape
+exposed via `useMessages()`, and every screen that reads
+`m.create.<section>` becomes `m.create.<stage>.<section>`. This is a
+mechanical refactor — no behavior change.
+
+**Sequencing (explicit).** This reorg is **its own ticket** and **must
+land before** any of §6–§9 below. CR-88's facet JSON paths
+(`data/create/customRule/<section>.json`) and `useMessages()` namespaces
+(`m.create.customRule.<section>`) assume the reorg is already in place.
+Concretely, ship in this order:
+
+1. **Reorg PR (separate ticket).** Move every `messages/en/create/*.json`
+   into the table above, update `messages/en/index.ts`, update every
+   `useMessages().create.<section>` callsite to
+   `useMessages().create.<stage>.<section>`, run `npx tsc --noEmit` and
+   `npx vitest run` green. No new behavior.
+2. **CR-88 PR (this doc).** Adds `data/create/customRule/`,
+   `MethodFacet`, the seed step, and the two API endpoints — all reading
+   the post-reorg paths.
+
+If the reorg slips, do **not** start CR-88 against the flat paths and
+plan to migrate later — the path mirroring between `messages/` and
+`data/` is the whole point of §1a/§1b and is fragile to retrofit.
 
 ---
 
-## 2. The four spreadsheets
+## 2. Facet groups (the canonical 19-column matrix)
 
-All four xlsx files share **the same column shape**: leading **content
-columns** + trailing **facet columns** (✓ / x cells). Sheet name is `Current`
-in every workbook.
+Four facet groups, 19 values total, identical across all four sections.
+These are the only dimensions the recommendation engine scores against.
 
-### 2.1 Shared facet columns (last 19, identical across the four sheets)
+| Group | Value `id`s (canonical lowercase keys) | Wizard chip labels | `CreateFlowState` field |
+| --- | --- | --- | --- |
+| `size` | `oneMember`, `twoToFive`, `sixToTwelve`, `thirteenToOneHundred`, `oneHundredToOneHundredK` | `1 member`, `2-5 members`, `6-12 members`, `13-100 members`, `100-100,000 members` | `selectedCommunitySizeIds` |
+| `orgType` | `dao`, `forProfit`, `nonprofit`, `openSource`, `mutualAid`, `workersCoop` | `DAO`, `For profit business`, `Nonprofit`, `Open source project`, `Mutual aid`, `Worker's coop` | `selectedOrganizationTypeIds` |
+| `scale` | `global`, `national`, `regional`, `local` | `Global`, `National`, `Regional`, `Local` | `selectedScaleIds` |
+| `maturity` | `earlyStage`, `growthStage`, `established`, `enterprise` | `Early stage`, `Growth stage`, `Established`, `Enterprise` | `selectedMaturityIds` |
 
-Order is preserved here because the columns are positional in the sheets:
+**Wizard chip ids vs facet value keys.** Wizard chips today use positional
+1..N ids inside their messages files (see `chipRowsFromLabels` in
+`app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx` and
+`CommunitySizeSelectScreen.tsx`). The recommendation layer needs a
+**stable lookup** from those positional chip ids to the canonical facet
+value keys above. Live that lookup table in
+`data/create/customRule/_facetGroups.json` so every consumer sees the
+same mapping.
 
-| # | Column header (xlsx) | Maps to wizard step / state field | Wizard chip label (`messages/en/create/...`) |
-|---|---|---|---|
-| 1 | `1 member` | `community-size` → `selectedCommunitySizeIds` (id `"1"`) | `1 member` |
-| 2 | `2-5 members` | id `"2"` | `2-5 members` |
-| 3 | `6-12 members` | id `"3"` | `6-12 members` |
-| 4 | `13-100 members` | id `"4"` | `13-100 members` |
-| 5 | `100-100,000 members` | id `"5"` | `100-100,000 members` |
-| 6 | `Organization Type:DAO` (or `DAO` in conflict/comms/membership) | `community-structure` → `selectedOrganizationTypeIds` (id `"6"` in `organizationTypes`) | `DAO` |
-| 7 | `Organization Type:For profit business` (or `For profit business`) | id `"5"` in `organizationTypes` | `For profit business` |
-| 8 | `Organization Type:Nonprofit` (or `Nonprofit`) | id `"4"` in `organizationTypes` | `Nonprofit` |
-| 9 | `Organization Type:Open source project` (or `Open source project`) | id `"3"` | `Open source project` |
-| 10 | `Organization Type:Mutual aid` (or `Mutual aid`) | id `"2"` | `Mutual aid` |
-| 11 | `Organization Type: Worker’s coop` (or `Worker’s coop`) | id `"1"` | `Worker’s coop` |
-| 12 | `Location: Global` (or `Global`) | `community-structure` → `selectedScaleIds` (id `"4"` in `scaleOptions`) | `Global` |
-| 13 | `Location: National` (or `National`) | id `"3"` | `National` |
-| 14 | `Location: Regional` (or `Regional`) | id `"2"` | `Regional` |
-| 15 | `Location: Local` (or `Local`) | id `"1"` | `Local` |
-| 16 | `Organizational Maturity: Early stage` (or `Early stage`) | `community-structure` → `selectedMaturityIds` (id `"1"` in `maturityOptions`) | `Early stage` |
-| 17 | `Organizational Maturity: Growth stage` (or `Growth stage`) | id `"2"` | `Growth stage` |
-| 18 | `Organizational Maturity: Established` (or `Established`) | id `"3"` | `Established` |
-| 19 | `Organizational Maturity: Enterprise` (or `Enterprise`) | id `"4"` | `Enterprise` |
+Shape: a single object keyed by group, then by the canonical value id,
+with the wizard chip's positional id and source messages path. The
+chip's display label is **not** duplicated here — it stays in the
+messages file (the lookup is just position → canonical id). Order in
+each group's `values` follows §2's canonical key order, **not** the
+chip's positional order in the messages file:
 
-**Important normalization rules (importer must enforce):**
+```json
+{
+  "size": {
+    "source": "messages/en/create/community/communitySize.json#/communitySizes",
+    "values": {
+      "oneMember":               { "chipId": "1" },
+      "twoToFive":               { "chipId": "2" },
+      "sixToTwelve":             { "chipId": "3" },
+      "thirteenToOneHundred":    { "chipId": "4" },
+      "oneHundredToOneHundredK": { "chipId": "5" }
+    }
+  },
+  "orgType": {
+    "source": "messages/en/create/community/communityStructure.json#/organizationTypes",
+    "values": {
+      "workersCoop":  { "chipId": "1" },
+      "mutualAid":    { "chipId": "2" },
+      "openSource":   { "chipId": "3" },
+      "nonprofit":    { "chipId": "4" },
+      "forProfit":    { "chipId": "5" },
+      "dao":          { "chipId": "6" }
+    }
+  },
+  "scale": {
+    "source": "messages/en/create/community/communityStructure.json#/scaleOptions",
+    "values": {
+      "local":    { "chipId": "1" },
+      "regional": { "chipId": "2" },
+      "national": { "chipId": "3" },
+      "global":   { "chipId": "4" }
+    }
+  },
+  "maturity": {
+    "source": "messages/en/create/community/communityStructure.json#/maturityOptions",
+    "values": {
+      "earlyStage":  { "chipId": "1" },
+      "growthStage": { "chipId": "2" },
+      "established": { "chipId": "3" },
+      "enterprise":  { "chipId": "4" }
+    }
+  }
+}
+```
 
-- Decision-making prefixes columns with `Organization Type:`, `Location:`,
-  `Organizational Maturity:`. The other three sheets drop the prefix. Importer
-  should normalize to a single canonical key (e.g.
-  `orgType.workersCoop`, `scale.local`, `maturity.earlyStage`, `size.6_12`).
-- Cell value semantics: `✓` → match, `x` (lowercase) → no match, blank → no
-  match, numbers → optional weighted score (only `Decision-making.xlsx` row 32
-  contains a non-symbol cell — `"Military, Corporations"` in the size column —
-  see §2.4 data-quality issues).
-- Wizard chip ids are **positional 1..N** within each `messages/en/create/*`
-  array (see `chipRowsFromLabels` in
-  `app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx` lines 49–57).
-  The importer should emit a stable lookup table mapping
-  `(facetGroup, label) → wizardChipId` so the recommendation engine can match
-  a user's `selectedXxxIds` against the matrix without depending on label
-  spelling.
-- Curly apostrophes appear in `Worker’s coop`. Compare on a normalized key,
-  not on raw label.
-
-### 2.2 Communication Methods (`Communication Methods.xlsx`, sheet `Current`)
-
-Maps 1:1 to `messages/en/create/communication.json` and the
-`communication-methods` step
-(`app/(app)/create/screens/card/CommunicationMethodsScreen.tsx`).
-
-**Content columns (positions 1–5):**
-
-| Sheet column | Card field |
-|---|---|
-| `Label` | `cards[<id>].label` and `modals[<id>].title` |
-| `Description` | `cards[<id>].supportText` and `modals[<id>].description` |
-| `Core Principle & Scope` | `modals[<id>].sections.corePrinciple` |
-| `Logistics, Admin & Norms` | `modals[<id>].sections.logisticsAdmin` |
-| `Code of Conduct` | `modals[<id>].sections.codeOfConduct` |
-
-`SECTION_FIELDS = ["corePrinciple", "logisticsAdmin", "codeOfConduct"]` is
-the source of truth (`CommunicationMethodsScreen.tsx`).
-
-**Card rows (11):** In-Person Meetings · Signal · Video Meetings · Loomio ·
-Matrix / Element · GitHub / GitLab · Discord · Email Distribution List · Slack
-· WhatsApp · Discourse (Forum).
-
-### 2.3 Membership / Group-Membership (`Group_Membership_Methods.xlsx`, sheet `Current`)
-
-Maps to the `membership-methods` step
-(`app/(app)/create/screens/card/MembershipMethodsScreen.tsx`) and
-`messages/en/create/membership.json`.
-
-**Content columns (positions 1–5):**
-
-| Sheet column | Card field (proposed naming) |
-|---|---|
-| `Label` | `cards[<id>].label` / modal title |
-| `Description` | `cards[<id>].supportText` / modal description |
-| `Eligibility & Philosophy` | modal section A (`eligibilityPhilosophy`) |
-| `Joining Process` | modal section B (`joiningProcess`) |
-| `Expectations & Removal` | modal section C (`expectationsRemoval`) |
-
-**Card rows (19):** Open Access · Orientation Required · Invitation Only ·
-Contribution Based · Mentorship · Peer Sponsorship · Consensus or Vote-Based
-Approval · Trial Period / Provisional Membership · Referral System with
-Screening · Membership Agreement or Pledge · Weighted or Tiered Membership ·
-Hybrid Approval Process · Skill-Based Contribution · Pay-to-Join · Application
-& Review · Identity Verification · Collective Interviews · Skill-Based
-Evaluation · Lottery / Sortition.
-
-> The wizard's existing `membership.json` modal section keys do not yet match
-> these. Since backwards compatibility is not a constraint, **rename the
-> wizard's section keys to match the matrix** (`eligibilityPhilosophy` /
-> `joiningProcess` / `expectationsRemoval`) when wiring this up — the existing
-> copy is placeholder.
-
-### 2.4 Decision-making (`Decision-making.xlsx`, sheet `Current`)
-
-Maps to the `decision-approaches` step
-(`app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx`) and
-`messages/en/create/rightRail.json`.
-
-**Content columns (positions 1–7):**
-
-| Sheet column | Card field (proposed naming) |
-|---|---|
-| `Label` | card title |
-| `Description` | card support text |
-| `Core Principle` | modal section A (`corePrinciple`) |
-| `Applicable Scope` | modal section B (`applicableScope`) — free-text examples, e.g. `"Daily Operations, Minor Expenditures"` |
-| `Consensus Level` | numeric 0.0–1.0 stored under `scalars.consensusLevel` (e.g. `0.51`, `0.67`, `1.0`) — drives the **Consensus axis** in any future visual sort/filter |
-| `Step-by-Step Instructions` | modal section C (`stepByStep`) |
-| `Objections & Deadlocks` | modal section D (`objectionsDeadlocks`) |
-
-**Card rows (32):** Lazy Consensus · Do-ocracy · Consensus Decision-Making ·
-Rotational Leadership · Modified Consensus · Consensus Seeking with Delegates
-· Sociocracy · Supermajority Rule · Ranked Choice Voting · Range Voting ·
-Majority Rule · Approval Voting · Weighted Voting · Cumulative Voting ·
-Quadratic Voting · Continuous Voting · Holacracy · Collaborative Platforms ·
-Deliberative Polling · Investor-Filled Board Seats · Elected Board of
-Directors · Advisory Committees · Delegated Decision-Making · Executive
-Committees · First Past the Post · Lottery/Sortition · Proof of Work · Random
-Choice · Algorithm-Driven Decisions · Autocratic Decision-Making ·
-Hierarchical Decision-Making · Negotiated Decisions.
-
-**Data-quality issues to handle in the importer (do not silently drop):**
-
-- Row 32 (`Hierarchical Decision-Making`): the `Consensus Level` cell contains
-  `"Military, Corporations"` (the value clearly belongs to `Applicable Scope`,
-  which itself already contains `"Military, Corporations"`). Importer should
-  flag this as a validation error and require a fix in the source workbook
-  rather than try to repair it.
-- Row 11 (`Range Voting`): the **last facet column** (`Maturity: Enterprise`)
-  is empty in the source — treat empty as `x` (no match) **only after** the
-  importer logs a warning so the author knows it wasn't intentional ✓.
-
-### 2.5 Conflict Management (`Conflict Management Methods.xlsx`, sheet `Current`)
-
-Maps to the `conflict-management` step
-(`app/(app)/create/screens/card/ConflictManagementScreen.tsx`) and
-`messages/en/create/conflictManagement.json`.
-
-**Content columns (positions 1–6):**
-
-| Sheet column | Card field (proposed naming) |
-|---|---|
-| `Title` | card title (note: not `Label` like the other three) |
-| `Description` | card support text |
-| `Core Principle` | modal section A (`corePrinciple`) |
-| `Applicable Scope` | modal section B (`applicableScope`) |
-| `Process Protocol` | modal section C (`processProtocol`) |
-| `Restoration & Fallbacks` | modal section D (`restorationFallbacks`) |
-
-**Card rows (19):** Peer Mediation · Conflict Resolution Council · Facilitated
-Negotiation · Ad Hoc Arbitration · Conflict Workshops · Supermajority Vote ·
-Interest-Based Bargaining · Restorative Practices · Mediation · Circle
-Processes · Judicial Committees · Managerial Decision · Internal Tribunal ·
-Consensus Building · Binding Arbitration · Non-Binding Arbitration · Binding
-Contracts · Lottery/Sortition · Rotational Judging.
-
-> Conflict Management sheet uses `Title` instead of `Label` and omits the
-> `Organization Type:` / `Location:` / `Organizational Maturity:` prefixes —
-> normalize both at import time.
+Validated by the same Zod schema module as the facet files
+(`lib/server/validation/methodFacetsSchemas.ts`). The parity test in §12
+asserts every `chipId` matches an actual position in the referenced
+messages file (off-by-one fails loudly). Adding a chip in messages
+without updating this file → schema error.
 
 ---
 
-## 3. Existing data model & wizard surface area
+## 3. Method inventory per section
 
-### 3.1 `RuleTemplate` (today)
+Every method's slug must exist as a `methods[].id` in the corresponding
+messages file *and* as a key in the corresponding facet file. Parity is
+enforced at two points (no app-boot hook):
+
+- **`prisma db seed`** — `loadSectionFacets()` runs the Zod schema
+  against each `data/create/customRule/<section>.json` file before
+  upserting; any orphan slug or unknown facet value fails the seed.
+- **`tests/unit/methodFacets.test.ts`** — runs in CI on every PR;
+  re-asserts the same parity statically (no DB needed) so authoring
+  errors are caught before the seed ever runs.
+
+There is intentionally **no Next.js app-boot validator** — schema
+failures should surface in CI/seed, not at request time.
+
+| Section | Screen | Messages file | Facet file | Method count |
+| --- | --- | --- | --- | --- |
+| `communication` | `app/(app)/create/screens/card/CommunicationMethodsScreen.tsx` | `messages/en/create/customRule/communication.json` | `data/create/customRule/communication.json` | 11 |
+| `membership` | `app/(app)/create/screens/card/MembershipMethodsScreen.tsx` | `messages/en/create/customRule/membership.json` | `data/create/customRule/membership.json` | 19 |
+| `decisionApproaches` | `app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx` | `messages/en/create/customRule/decisionApproaches.json` | `data/create/customRule/decisionApproaches.json` | 32 |
+| `conflictManagement` | `app/(app)/create/screens/card/ConflictManagementScreen.tsx` | `messages/en/create/customRule/conflictManagement.json` | `data/create/customRule/conflictManagement.json` | 19 |
+
+`section` keys above are the canonical lowercase camelCase tokens used in
+the DB, the API query string, and the Zod schemas. The four xlsx
+authoring artifacts in `~/Downloads/` (see "Source workbooks" appendix
+below) are the human reference for which methods match which facets;
+they do not ship.
+
+---
+
+## 4. Existing data model & wizard surface area
+
+### 4.1 `RuleTemplate` (today, unchanged)
 
 ```64:73:prisma/schema.prisma
 model RuleTemplate {
@@ -228,30 +220,16 @@ model RuleTemplate {
 
 `body` JSON is the rendered rule document
 (`{ sections: [{ categoryName, entries: [{ title, body }] }, ...] }`),
-authored today by the `bodyFromXlsxComposition()` helper in
-`prisma/seed.ts` from a hand-typed `COMPOSITION_BY_SLUG` map.
+authored today by `bodyFromXlsxComposition()` in `prisma/seed.ts` from
+the hand-typed `COMPOSITION_BY_SLUG` map. **Stays hand-curated** — the
+matrix doesn't change how templates are authored, only how they are
+ranked. Section ordering (Values → Communication → Membership →
+Decision-making → Conflict management) is set by `governancePatternBody`
+and is canonical.
 
-**Section ordering (canonical):** Values → Communication → Membership →
-Decision-making → Conflict management. Final-review and `governancePatternBody`
-both rely on this exact order and casing.
+### 4.2 Wizard facets captured today (`CreateFlowState`)
 
-```16:60:prisma/seed.ts
-function governancePatternBody(coreValues: string): Prisma.InputJsonValue {
-  return {
-    sections: [
-      { categoryName: "Values", entries: [{ title: "Core stance", body: coreValues }] },
-      { categoryName: "Communication", entries: [...] },
-      { categoryName: "Membership", entries: [...] },
-      { categoryName: "Decision-making", entries: [...] },
-      { categoryName: "Conflict management", entries: [...] },
-    ],
-  };
-}
-```
-
-### 3.2 Wizard facets captured today (`CreateFlowState`)
-
-```83:95:app/(app)/create/types.ts
+```ts
 selectedCommunitySizeIds?: string[];
 selectedOrganizationTypeIds?: string[];
 selectedScaleIds?: string[];
@@ -263,312 +241,345 @@ selectedDecisionApproachIds?: string[];
 selectedConflictManagementIds?: string[];
 ```
 
-The first four are exactly the four **facet groups** in the matrix sheets. The
-last four are the user's chosen **cards per section**, which the recommendation
-flow can either pre-select (when picked from a template) or feed back into
-ranking.
+The first four are exactly the four facet groups in §2. The last four
+are the user's chosen methods per section (used to pre-rank or to feed
+recommendations on later steps). `createFlowStateSchema` in
+`lib/server/validation/createFlowSchemas.ts` is the canonical Zod schema
+— recommendation-side schemas should import the facet-id arrays from
+there rather than redefine them.
 
-These same fields are validated server-side by `createFlowStateSchema` in
-`lib/server/validation/createFlowSchemas.ts` (lines 47–106) — the recommend
-endpoint should reuse that schema (or a strict subset) instead of redefining
-the facet shape.
+### 4.3 Wizard step order
 
-### 3.3 Wizard step order
-
-Source of truth is `app/(app)/create/utils/flowSteps.ts` (`FLOW_STEP_ORDER`). The
-relevant slice is:
+Source of truth: `app/(app)/create/utils/flowSteps.ts` (`FLOW_STEP_ORDER`).
+Relevant slice for the matrix:
 
 ```
 review → core-values → communication-methods → membership-methods →
 decision-approaches → conflict-management → confirm-stakeholders → final-review
 ```
 
-`docs/create-flow.md`'s step table is **stale**; trust `flowSteps.ts`.
-
-### 3.4 Where templates already surface in the UI
+### 4.4 Where templates surface in the UI (in scope for ranking)
 
 | Surface | File |
-|---|---|
+| --- | --- |
 | Marketing home "Popular templates" | `app/(marketing)/_components/MarketingRuleStackSection.tsx` |
 | Templates index | `app/(marketing)/templates/page.tsx` |
 | Template preview (by slug) | `app/(app)/create/review-template/[slug]/page.tsx` |
 | "Use without changes" → publish | `app/(app)/create/CreateFlowLayoutClient.tsx` `handleUseTemplateWithoutChanges` |
-| API list | `app/api/templates/route.ts` (GET only, no params) |
+| API list | `app/api/templates/route.ts` (GET only, no params today) |
 
-There is currently **no** recommendation logic, no facet filtering, and the
-`/create/informational?template=<slug>` query param is a known no-op (see
-`CreateFlowLayoutClient.tsx` lines 479–482).
+Template ranking adds optional facet query params to `/api/templates`;
+the no-facets path keeps today's curated ordering. The
+`/create/informational?template=<slug>` query-param prefill is a known
+no-op (`CreateFlowLayoutClient.tsx`); fixing it is **out of scope**.
 
 ---
 
-## 4. Repo conventions to follow (don't reinvent)
+## 5. Repo conventions to follow (don't reinvent)
 
-These are the patterns the implementation must match. References point at the
-canonical example for each.
+References point at the canonical example for each.
 
-### 4.1 API routes (`app/api/**/route.ts`)
+### 5.1 API routes (`app/api/**/route.ts`)
 
-`app/api/drafts/me/route.ts` is the reference — every new route in this
-feature must match this exact shape:
+`app/api/drafts/me/route.ts` is the reference. Every new route in this
+feature must match:
 
-1. `if (!isDatabaseConfigured()) return dbUnavailable();` — always first.
+1. `if (!isDatabaseConfigured()) return dbUnavailable();` — always first
    (`lib/server/env.ts`, `lib/server/responses.ts`).
 2. For auth'd routes: `const user = await getSessionUser();` then
-   `return NextResponse.json({ error: "Unauthorized" }, { status: 401 });` if
-   missing. (Recommendation read endpoints can stay unauthenticated.)
-3. For request bodies: `readLimitedJson(request)` →
-   `<schema>.safeParse(parsed.value)` → `jsonFromZodError(validated.error)` on
-   failure. (`lib/server/validation/requestBody.ts`,
+   `NextResponse.json({ error: "Unauthorized" }, { status: 401 })` if
+   missing. Recommendation read endpoints stay unauthenticated.
+3. Request bodies: `readLimitedJson(request)` →
+   `<schema>.safeParse(parsed.value)` → `jsonFromZodError(validated.error)`
+   on failure (`lib/server/validation/requestBody.ts`,
    `lib/server/validation/zodHttp.ts`).
-4. Success: `NextResponse.json({ <key>: data })` — flat object with one or two
-   named keys, no `success: true` envelope.
+4. Success: `NextResponse.json({ <key>: data })` — flat object, no
+   `success: true` envelope.
 5. Errors: structured `{ error: { code, message } }` (Zod path) or simple
-   `{ error: "..." }` (auth path). Match what's already in the repo.
-6. Server-side query helpers swallow Prisma failures and return `[]`/`null`
-   (see `listRuleTemplatesFromDb` in `lib/server/ruleTemplates.ts` lines 9–30).
-   Routes do **not** wrap helper calls in `try/catch`.
+   `{ error: "..." }` (auth path).
+6. Server-side query helpers swallow Prisma failures and return
+   `[]`/`null` (see `listRuleTemplatesFromDb` in
+   `lib/server/ruleTemplates.ts`). Routes do **not** wrap helper calls
+   in `try/catch`.
 
-### 4.2 Zod schemas live in `lib/server/validation/`
+### 5.2 Zod schemas live in `lib/server/validation/`
 
-- One file per feature area (e.g. `createFlowSchemas.ts`, future
-  `templateRecommendationSchemas.ts`).
+- One file per feature area
+  (`lib/server/validation/methodFacetsSchemas.ts` for this feature).
 - Export the schema **and** the inferred type
   (`export type X = z.infer<typeof xSchema>`).
-- Wrap any free-form JSON blobs with `assertPlainJsonValue` /
-  `DEFAULT_PLAIN_JSON_LIMITS` (`lib/server/validation/plainJson.ts`) so the
-  size/depth bounds match the rest of the API.
-- Reuse `FLOW_STEP_ORDER` and existing array bounds where they overlap (see
-  the `selectedXxxMethodIds` arrays in `createFlowStateSchema`).
+- Reuse facet-id arrays from `createFlowStateSchema` rather than
+  redeclaring them.
 
-### 4.3 Prisma access
+### 5.3 Prisma access
 
 - Singleton: `import { prisma } from "lib/server/db";` — never
-  `new PrismaClient()` from app code. (Standalone scripts under `scripts/` /
-  `prisma/` may instantiate their own, matching `prisma/seed.ts` lines
-  363–403.)
-- Server-only "fetch/list" helpers live under `lib/server/<feature>.ts`,
+  `new PrismaClient()` from app code.
+- Server-only fetch/list helpers live under `lib/server/<feature>.ts`,
   return DTOs (not raw Prisma rows), and degrade gracefully
   (`isDatabaseConfigured()` short-circuit, `try/catch` → empty result).
-- No `$transaction` patterns exist yet; **introduce one** for the importer
-  (write `TemplateMethod` + `TemplateMethodFacet` rows atomically).
+- Use `prisma.$transaction` for the seed step that swaps facet rows
+  (delete-then-create per `(section, slug)` pair atomically).
 
-### 4.4 DTO style
+### 5.4 DTO style
 
-- Hand-written `type` aliases that mirror a Prisma `select` clause, co-located
-  with the consumer (see `RuleTemplateDto` in
-  `lib/create/fetchTemplates.ts` lines 5–14).
-- For a feature with both client and server consumers, put the type in
-  `lib/<feature>/types.ts` and import from both sides.
+Hand-written `type` aliases that mirror a Prisma `select` clause,
+co-located with the consumer (see `RuleTemplateDto` in
+`lib/create/fetchTemplates.ts`).
 
-### 4.5 Standalone scripts
+### 5.5 Tests
 
-- Use `tsx` (already a dev dep; entry point `package.json` `prisma.seed`
-  field).
-- Layout matches `prisma/seed.ts`: `async function main()`, log a one-line
-  success summary, `console.error(e); process.exit(1)` on failure,
-  `await prisma.$disconnect()` in `finally`.
-- Add an entry to `package.json` `scripts` (e.g.
-  `"templates:import": "tsx scripts/import-templates-xlsx.ts"`).
-- No shared dotenv loader — rely on env from the shell / Next runtime.
-- Support a `--dry-run` flag that validates + diffs without writing.
+- Vitest under `tests/unit/*.test.ts` for schemas and pure functions
+  (see `tests/unit/createFlowValidation.test.ts`).
+- Test the facet JSON files themselves with a parity test
+  (`tests/unit/methodFacets.test.ts`) that loads each `data/` file
+  alongside its messages file and asserts every `methods[].id` has a
+  facet entry and vice-versa.
+- API routes are not unit-tested today; cover behavior indirectly via
+  schema tests.
 
-### 4.6 Tests
+### 5.6 Logging
 
-- Vitest under `tests/unit/*.test.ts` for parsers / validators / pure
-  functions (see `tests/unit/createFlowValidation.test.ts`).
-- API routes are not unit-tested today; cover route behavior indirectly with a
-  `tests/unit/templateRecommendationSchemas.test.ts` (Zod) plus a fixture
-  workbook + importer test under `tests/unit/importTemplatesXlsx.test.ts`.
-- E2E for the wizard (if needed) goes under `tests/e2e/*.spec.ts` — not
-  required for CR-88 acceptance.
-- Test utilities: `tests/utils/test-utils.tsx` (`renderWithProviders`); MSW
-  server in `tests/msw/server.ts`. No Prisma mock helper exists; importer test
-  should use a fixture workbook and stub the `prisma` client at the import
-  site.
+Use `logger` from `lib/logger.ts` for any server-side info/warn/error in
+scripts and route helpers. No `apiError` helper exists; do not introduce
+one.
 
-### 4.7 Logging
+### 5.7 i18n stays the source of truth for copy
 
-- Use `logger` from `lib/logger.ts` for any server-side info/warn/error in
-  scripts and route helpers (matches `app/api/auth/magic-link/request/route.ts`
-  lines 14–15, 35–45). No `apiError` helper exists; do not introduce one.
+Card decks and modal copy live in
+`messages/en/create/customRule/<section>.json` (post-reorg) and are read
+via `useMessages().create.customRule.<section>` (`messages/en/index.ts`,
+`app/contexts/MessagesContext.tsx`). The matrix never puts copy in the
+DB. The recommendation API returns slugs and scores only — never copy —
+so Storybook stories, MSW handlers, and Vitest specs keep importing the
+message JSON statically and don't need an API mock for content.
 
-### 4.8 New deps
+### 5.8 Component-prop normalization rule
 
-- `xlsx` (SheetJS) is **not** currently in `package.json`. Add it as a
-  **prod** dep only if the importer is invoked from app code; if the importer
-  is script-only, `devDependency` is fine. CR-88's plan calls for a
-  build/CLI-time importer, so `devDependencies` is the right home.
-
-### 4.9 i18n / `messages/` constraint
-
-- Card decks and modal copy are currently keyed in
-  `messages/en/<feature>.json` and read via
-  `useMessages().create.<feature>` (`app/contexts/MessagesContext.tsx`,
-  `messages/en/index.ts`).
-- Only `en` is wired today, so we **don't** have a translation backlog
-  blocking us. The wiring step (§7) replaces `messages/en/create/{communication,
-  membership,rightRail,conflictManagement}.json` card/modal payloads with
-  values served by `GET /api/template-methods` (still keyed by the same
-  message namespace shape so future i18n can layer on if needed). Header
-  strings, button labels, and other purely-static UI copy stay in
-  `messages/en/*`.
-
-### 4.10 `.cursorrules` scope
-
-- The repo's `.cursorrules` PascalCase / lowercase normalization rule applies
-  to **React component props only**. It does **not** apply to API query
-  params, request bodies, or DB columns. The recommendation API uses lowercase
-  facet keys throughout (`orgType`, `scale`, `maturity`, `size`).
+The repo's lowercase prop normalization rule
+(`.cursor/rules/component-props.mdc`) applies to **React component props
+only**. It does **not** apply to API query params, DB columns, JSON
+keys, or messages keys. Conventions used by this feature: facet group
+ids and facet values are camelCase (`orgType`, `workersCoop`); messages
+keys are camelCase (`stepByStepInstructions`, `restorationFallbacks`);
+method slugs are kebab-case (`peer-mediation`, `lazy-consensus`).
 
 ---
 
-## 5. Authoring contract (informs §6 storage + §7 importer)
+## 6. Authoring contract (the JSON shape)
 
-The four spreadsheets together imply this row schema (per matrix workbook):
+Each `data/create/customRule/<section>.json` file is a single object
+keyed by method slug. Each entry has the four facet groups, each holding
+booleans (or numeric weights, optional) per canonical value id.
 
 ```ts
-type MatrixRow = {
-  /** Stable slug derived from `Label`/`Title` (kebab-case, lowercase, ascii).
-   *  Used as the card id everywhere downstream. */
-  id: string;
+type FacetMatch = boolean | { match: boolean; weight?: number };
 
-  /** Section this row belongs to. One of: communication, membership,
-   *  decisionMaking, conflictManagement. (values is not yet sheet-driven.) */
-  section: "communication" | "membership" | "decisionMaking" | "conflictManagement";
-
-  /** Card-facing copy. Keys differ per section; importer normalizes. */
-  card: {
-    label: string;
-    description: string;
-    /** Section-specific long-form fields (3–4 per section). */
-    modalSections: Record<string, string>;
-  };
-
-  /** Optional numeric scalar fields (e.g. decisionMaking `Consensus Level`). */
-  scalars?: Record<string, number>;
-
-  /** Facet matches (✓ → true, x/blank → false). Keys are canonical facet ids. */
-  facets: {
-    size: Record<"1" | "2_5" | "6_12" | "13_100" | "100_100k", boolean>;
-    orgType: Record<"dao" | "forProfit" | "nonprofit" | "openSource" | "mutualAid" | "workersCoop", boolean>;
-    scale: Record<"global" | "national" | "regional" | "local", boolean>;
-    maturity: Record<"earlyStage" | "growthStage" | "established" | "enterprise", boolean>;
-  };
-};
+type SectionFacets = Record<
+  string, // method slug, e.g. "peer-mediation"
+  {
+    size:     Record<"oneMember" | "twoToFive" | "sixToTwelve" | "thirteenToOneHundred" | "oneHundredToOneHundredK", FacetMatch>;
+    orgType:  Record<"dao" | "forProfit" | "nonprofit" | "openSource" | "mutualAid" | "workersCoop", FacetMatch>;
+    scale:    Record<"global" | "national" | "regional" | "local", FacetMatch>;
+    maturity: Record<"earlyStage" | "growthStage" | "established" | "enterprise", FacetMatch>;
+  }
+>;
 ```
 
-A sibling **manifest** documents the per-section section-key mapping and
-column header → canonical facet/scalar key mapping, so the importer can be
-stable across header rewording.
+Example (illustrative, not a real entry):
+
+```json
+{
+  "peer-mediation": {
+    "size":     { "oneMember": false, "twoToFive": true,  "sixToTwelve": true,  "thirteenToOneHundred": true,  "oneHundredToOneHundredK": false },
+    "orgType":  { "dao": false, "forProfit": false, "nonprofit": true, "openSource": true, "mutualAid": true, "workersCoop": true },
+    "scale":    { "global": false, "national": false, "regional": true, "local": true },
+    "maturity": { "earlyStage": true, "growthStage": true, "established": true, "enterprise": false }
+  }
+}
+```
+
+Bulk shorthand: a field that's omitted defaults to `false`, so files
+only need to enumerate matching facets when authors prefer the compact
+form. The Zod schema (run at seed time and in the parity test, per §3)
+fills defaults and enforces:
+
+- Every key in the file matches a `methods[].id` in the corresponding
+  messages file (no orphans either way — fail loudly).
+- Every facet group is present for every method (or fully omitted, in
+  which case it defaults to "all false").
+- Facet values are exactly the canonical ids in §2 (typos fail).
+
+### One-time transcription from the workbooks
+
+The four `.xlsx` files in `~/Downloads/` (see appendix) carry the facet
+matches as the trailing 19 columns after the descriptive copy columns
+(slug, label, supportText, applicableScope, consensusLevel, etc.). The
+implementing agent should:
+
+1. Inspect one workbook with `openpyxl` to confirm the column order
+   matches §2 (`size` × 5, `orgType` × 6, `scale` × 4, `maturity` × 4 =
+   19 facet columns). The copy ingest already confirmed the leading
+   columns; the trailing 19 are the only new bit.
+2. Write a one-shot Python script (mirror of the throwaway
+   `/tmp/ingest_methods.py` used for the messages ingest — **do not
+   commit**) that:
+   - Reads each workbook's `Current` sheet,
+   - Slugifies the first column the same way the messages ingest did
+     (kebab-case, ASCII-folded, lowercase) so keys match
+     `methods[].id` exactly,
+   - Treats `✓` (and `1`, `true`, `yes` — case-insensitive) as `true` and
+     everything else (`x`, blank, `-`, `0`, `false`, `no`, `✗`) as `false`.
+     The workbooks intentionally use `✓` to mark a match and `x` to mark a
+     non-match (cross-out) — both are filled cells but only `✓` counts as
+     a positive recommendation,
+   - Emits one `data/create/customRule/<section>.json` per workbook in
+     the §6 shape, sorted by method slug,
+   - Emits `data/create/customRule/_facetGroups.json` from the column
+     header → canonical-id mapping above (§2).
+3. Hand-review the diff against the workbook for the first ~3 methods
+   per section, then commit the JSON files.
+4. Run `tests/unit/methodFacets.test.ts` (§12) to confirm parity with
+   the messages files, and `prisma db seed` to confirm the schema +
+   transaction work.
+
+The script is throwaway. Future facet edits happen by hand in the JSON
+files. The workbooks stay at `~/Downloads/` and are **not** committed —
+the post-ingest JSON files (both `messages/` and `data/`) are the
+historical record.
 
 ---
 
-## 6. Storage (decided: normalized tables)
+## 7. Storage
 
-We are introducing two new Prisma models. Hand-typed `COMPOSITION_BY_SLUG` in
-`prisma/seed.ts` is replaced by template rows that **reference** method slugs.
+Facet data lives in the JSON files above (the source of truth) and is
+**hydrated into the DB at seed time** so the API can do efficient joins
+when ranking templates by composed-method match. The JSON is canonical —
+the DB is a derived index.
 
 ```prisma
-model TemplateMethod {
-  id            String   @id @default(cuid())
-  section       String   // communication | membership | decisionMaking | conflictManagement
-  slug          String
-  label         String
-  description   String
-  modalSections Json     // { corePrinciple: "...", logisticsAdmin: "...", ... }
-  scalars       Json?    // { consensusLevel: 0.51 }
-  sortOrder     Int      @default(0)
-  facets        TemplateMethodFacet[]
-  @@unique([section, slug])
+model MethodFacet {
+  id       String  @id @default(cuid())
+  section  String  // communication | membership | decisionApproaches | conflictManagement
+  slug     String  // matches the `id` of an entry in the messages file's `methods` array
+  group    String  // size | orgType | scale | maturity
+  value    String  // e.g. "workersCoop"
+  matches  Boolean // ✓ → true, blank/explicit-false → false
+  weight   Float?  // optional numeric override for future scoring tweaks
+  @@unique([section, slug, group, value])
   @@index([section])
-}
-
-model TemplateMethodFacet {
-  id        String  @id @default(cuid())
-  methodId  String
-  group     String  // size | orgType | scale | maturity
-  value     String  // e.g. "workersCoop"
-  matches   Boolean // ✓ → true, x/blank → false
-  weight    Float?  // optional numeric override for future scoring
-  method    TemplateMethod @relation(fields: [methodId], references: [id], onDelete: Cascade)
-  @@unique([methodId, group, value])
   @@index([group, value, matches])
 }
 ```
 
-`RuleTemplate.body` continues to express a **chosen composition** of methods
-(one or more per section). Curated templates in `prisma/seed.ts` become
-references to `TemplateMethod.slug` instead of literal copy strings — when
-copy changes in the spreadsheet, every template that references that slug
-inherits the new copy.
+Why this shape:
 
-A follow-up (out of scope for CR-88) may add a `RuleTemplateMethodLink` join
-table if templates need ordering or per-template overrides; the current `body`
-JSON shape is sufficient for the first ship.
+- **JSON is the source of truth** — diffs are reviewable in PRs, no
+  binary artifacts, no importer to maintain. `prisma db seed` (or the
+  facet-only equivalent script) reads the JSON and upserts rows.
+- **DB enables joins** — template ranking joins `MethodFacet` against
+  the methods listed in `RuleTemplate.body` to compute per-template
+  match scores. In-memory ranking would also work but the join is
+  cleaner and matches existing patterns.
+- **Slug is the contract** — every JSON key matches a `methods[].id` in
+  messages; boot-time validation enforces this both ways.
+- **No runtime spreadsheet dependency** — `xlsx` / SheetJS is **not**
+  added to `package.json`. The original `~/Downloads/*.xlsx` files
+  authored both the messages content (already ingested) and the facet
+  matches (one-time transcription into the JSON files described in §6).
+  Future facet edits happen directly in the JSON.
 
 ---
 
-## 7. Importer (`scripts/import-templates-xlsx.ts`)
+## 8. Seed / sync
 
-Phased plan that the implementation agent can follow top-to-bottom. Mirrors
-the structure of `prisma/seed.ts` (singleton client, `main()` +
-`finally { $disconnect }`, `process.exit(1)` on failure).
+`prisma/seed.ts` (or a small co-located helper at
+`prisma/seed/methodFacets.ts`) does:
 
-1. **Read `.xlsx`** with [`xlsx`](https://www.npmjs.com/package/xlsx) (SheetJS,
-   add as devDependency) from a configurable input dir (default
-   `data/template-matrix/`). The four workbooks live there as committed
-   artifacts, not in `Downloads/`.
-2. **Schema-validate per section** with Zod schemas that live in
-   `lib/server/validation/templateRecommendationSchemas.ts` so the API and
-   importer share the row shape: required column headers, allowed cell
-   symbols (`✓`, `x`, blank, decimal for `Consensus Level`).
-3. **Normalize**: kebab-case slug from label, strip
-   `Organization Type:` / `Location:` / `Organizational Maturity:` prefixes,
-   collapse whitespace, normalize curly quotes.
-4. **Cross-sheet validation**: facet columns must match the canonical 19-column
-   set; unknown columns fail loudly via the importer (use `logger.error`).
-5. **Diff & upsert** inside `prisma.$transaction([...])`: upsert
-   `TemplateMethod` rows by `(section, slug)`; delete + recreate
-   `TemplateMethodFacet` rows for each method.
-6. **Emit a JSON snapshot** to `prisma/data/template-matrix.json` so
-   `prisma/seed.ts` can replay imports when the source workbooks aren't
-   available (e.g. CI seed without the spreadsheet checked in).
-7. **Flags**: `--dry-run` (validate + diff, no writes), `--allow-warnings`
-   (don't fail on the row-32 / row-11 issues in §2.4 while authors are
-   iterating).
-8. **Tests** in `tests/unit/importTemplatesXlsx.test.ts`: a fixture workbook
-   with two rows per section asserts both validation errors (unknown column,
-   bad symbol, miscategorized cell) and successful normalization. Reuse
-   Vitest patterns from `tests/unit/createFlowValidation.test.ts`.
+```ts
+async function seedMethodFacets() {
+  const sections: Section[] = [
+    "communication",
+    "membership",
+    "decisionApproaches",
+    "conflictManagement",
+  ];
 
-Per Ticket 16 and the roadmap, **prefer batch `.xlsx` import** over a live
-Google Sheets API in production. Authors export to `.xlsx` and a maintainer
-runs `npm run templates:import` (or CI does on a `data/template-matrix/` change).
+  for (const section of sections) {
+    const facets = await loadSectionFacets(section); // reads + Zod-validates the JSON
+    await prisma.$transaction([
+      prisma.methodFacet.deleteMany({ where: { section } }),
+      prisma.methodFacet.createMany({
+        data: flattenSectionFacets(section, facets),
+      }),
+    ]);
+  }
+}
+```
+
+- **Validation runs first.** `loadSectionFacets` reads the JSON and runs
+  the Zod schema against it; any orphan slug, missing facet group, or
+  unknown facet value fails the seed.
+- **Per-section atomic swap.** Delete-then-create inside one
+  transaction so the DB is never partially populated.
+- **No flags, no `--dry-run`, no fixture workbooks.** The seed is
+  idempotent and cheap (~80 methods × 19 facets = ~1500 rows total);
+  re-running on every prisma seed is fine.
+- **No app-boot validator.** Authoring errors surface in CI (parity
+  test, §3) or at `prisma db seed` time — never at request time.
 
 ---
 
-## 8. APIs
+## 9. APIs
 
-Two read endpoints. Both follow §4.1 conventions exactly: `dbUnavailable()`
-guard → server helper from `lib/server/templateMethods.ts` →
-`NextResponse.json({ ... })`.
+Both endpoints follow §5.1 conventions. **Neither returns copy** — copy
+lives in messages and is read client-side via `useMessages()`.
 
-### 8.1 `GET /api/templates` (rewrite)
+### 9.1 `GET /api/templates` (rewrite)
 
-Query params (all optional):
+Optional facet query params:
 
-- `facet.size=<chipId>` (repeatable)
-- `facet.orgType=<chipId>` (repeatable)
-- `facet.scale=<chipId>` (repeatable)
-- `facet.maturity=<chipId>` (repeatable)
+- `facet.size=<valueId>` (repeatable)
+- `facet.orgType=<valueId>`
+- `facet.scale=<valueId>`
+- `facet.maturity=<valueId>`
 
 Behavior:
 
-- No params → existing curated ordering (`featured`, `sortOrder`, `title`),
-  no scoring.
-- With facets → score each template by counting matching facets across the
-  methods referenced in its `body`; return ranked `templates` plus an
-  optional `scores` map.
+- No params → existing curated ordering (`featured`, `sortOrder`,
+  `title`), no scoring.
+- With facets → score each template by joining its `body`-referenced
+  method slugs against `MethodFacet` and **summing matches**, then
+  sort highest-first.
+
+**Scoring algorithm (simple count, v1).**
+
+For each template, build the set of `(section, slug)` pairs from
+`RuleTemplate.body` (the existing curated composition). For each
+`(section, slug)` pair, count how many of the requested
+`facet.<group>=<value>` query params match an existing
+`MethodFacet { matches: true }` row. The template's score is the
+**sum across all its methods**:
+
+```
+score(template)
+  = Σ over (section, slug) in template.body:
+      Σ over (group, value) in requested facets:
+        1 if MethodFacet exists with matches=true for (section, slug, group, value)
+        else 0
+```
+
+Notes:
+- A template with five matching methods scores ~5× a template with one
+  matching method, which is the desired bias toward whole-stack fit.
+- `weight` in `MethodFacet` is **ignored** by v1 — it's only there so
+  authors can store nuance for a future weighted-rank pass without a
+  migration.
+- Ties broken by today's curated ordering (`featured` desc → `sortOrder`
+  asc → `title` asc) so no-facets and zero-match cases produce identical
+  output to the existing endpoint.
+- Templates with `score = 0` are still returned, ranked last by the
+  curated tie-break (recommendations rank, never hide; see §10).
 
 Response:
 
@@ -579,150 +590,236 @@ Response:
 }
 ```
 
-Param parsing helper lives next to `listRuleTemplatesFromDb` in
-`lib/server/ruleTemplates.ts` (e.g. `parseTemplateFacetsFromSearchParams`).
+`scores[slug].matchedFacets` is the deduped list of
+`"<section>:<slug>:<group>:<value>"` keys that contributed, useful for
+debugging and for an eventual "Why this template?" UI tooltip.
 
-### 8.2 `GET /api/template-methods?section=<section>[&facet.*=...]`
+### 9.2 `GET /api/create-flow/methods?section=<section>[&facet.*=...]`
 
-Powers the four card-deck wizard steps and the section-level recommendation
-view. Response:
+Powers the four card-deck wizard steps. Returns slugs + per-method match
+scores only — wizard renders by looking up entries in
+`useMessages().create.customRule.<section>.methods` (via the
+`methodById` map each screen builds).
+
+Response:
 
 ```ts
 {
-  section: "communication" | "membership" | "decisionMaking" | "conflictManagement",
+  section: "communication" | "membership" | "decisionApproaches" | "conflictManagement",
   methods: Array<{
     slug: string;
-    label: string;
-    description: string;
-    modalSections: Record<string, string>;
-    scalars?: Record<string, number>;
-    /** Per-method facet match against the requested facets (omitted when no facets passed). */
-    matches?: { score: number; matchedFacets: string[] };
+    matches: { score: number; matchedFacets: string[] };
   }>
 }
 ```
 
-Server helper: `listTemplateMethodsFromDb({ section, facets })` in
-`lib/server/templateMethods.ts`. Same swallow-and-return-`[]` failure mode as
-`listRuleTemplatesFromDb`.
+**Scoring algorithm.** Same simple count as §9.1, scoped to a single
+method:
 
-### 8.3 `POST /api/templates/recommend` (follow-up, optional)
+```
+score(method)
+  = Σ over (group, value) in requested facets:
+      1 if MethodFacet exists with matches=true for (section, method.slug, group, value)
+      else 0
+```
 
-If product wants to send the full `CreateFlowState` (not just facet ids), the
-body schema **reuses** `createFlowStateSchema` from
-`lib/server/validation/createFlowSchemas.ts`. Same scoring engine, just a
-richer input. Skip until §8.1 + §8.2 ship.
+Methods are returned **ranked by `matches.score` desc**, then by the
+on-disk order from the messages file (so the deck stays stable when no
+facets are passed and zero-match methods preserve authoring order). The
+wizard never **hides** rows — see §10.
 
-**Empty / partial facets:** never error. Fall back to today's ordering and
-return all rows.
+Server helper: `listMethodRecommendations({ section, facets })` in
+`lib/server/methodRecommendations.ts`. Same swallow-and-return-`[]`
+failure mode as `listRuleTemplatesFromDb`. When the DB is unavailable
+(or facets are empty), the wizard falls back to the messages deck in
+its on-disk order.
+
+### 9.3 `POST /api/templates/recommend` (follow-up, optional)
+
+If product wants to send the full `CreateFlowState` instead of just
+facet ids, body schema reuses `createFlowStateSchema`. Skip until §9.1
++ §9.2 ship.
+
+**Empty / partial facets:** never error. Fall back to today's ordering
+and return all rows.
 
 ---
 
-## 9. Wizard wiring (UI follow-on, not strictly part of CR-88)
+## 10. Wizard wiring (UI follow-on)
 
 Once the API exists:
 
-- `communication-methods` / `membership-methods` / `decision-approaches` /
-  `conflict-management` screens each call
-  `GET /api/template-methods?section=...&facet.*=...`. The card label and
-  modal copy come from the API response, not from
-  `messages/en/create/<section>.json`. Static JSON in those four files is
-  pruned to the page-level strings (header titles, button labels, modal
-  chrome) only.
-- Selecting a template on the marketing home or `templates/` page can prefill
-  the create flow's `selected*MethodIds` from the template's composition (this
-  closes the `?template=` no-op gap noted in
-  `CreateFlowLayoutClient.tsx`).
-- Recommendations should never **hide** options from the user — ranking only.
-  Authors expect to see "all 32 decision-making patterns" with the ✓-matching
-  ones surfaced first.
+- `communication-methods` / `membership-methods` / `decision-approaches`
+  / `conflict-management` screens each call
+  `GET /api/create-flow/methods?section=...&facet.*=...` to get the
+  ranking. Card label, description, and modal copy continue to come
+  from `useMessages().create.customRule.<section>.methods` (a flat
+  array — each screen already builds a `methodById` lookup map and
+  iterates the array; no per-section `_CARD_ORDER` constants exist).
+  The screen reorders the array by the API's ranked slug list before
+  rendering.
+- API failure or empty facets → render the messages deck in its on-disk
+  order. No regression from today.
+- Selecting a template on the marketing home or `templates/` page can
+  prefill the create flow's `selected*MethodIds` from the template's
+  composition (closes the `?template=` no-op gap noted in
+  `CreateFlowLayoutClient.tsx`). Out of scope for CR-88.
+- Recommendations **never hide** options — ranking only. Authors expect
+  to see "all 32 decision-making patterns" with the matching ones
+  surfaced first.
 
 ---
 
-## 10. Open questions for product before coding
+## 11. Resolved decisions (no open questions)
 
-1. **Should `Values` also be sheet-driven?** Today it's free-text only and
-   not in any of the four matrices. Roadmap implies eventual parity.
-2. **Scoring vs filtering**: do we want to **hide** non-✓ rows when a facet
-   is set, or only **rank** them? Recommend ranking with a soft cutoff.
-3. **Per-template featured composition vs library-wide**: should
-   `RuleTemplate` rows continue to exist as named compositions
-   ("Consensus", "Elected Board", etc.), or become derived from a
-   "this is the best mix for nonprofit + 13–100 + early stage" scoring? Doc
-   today assumes the former — templates remain curated.
-4. **Authoring source of truth**: are the `Downloads/*.xlsx` files committed
-   to `data/template-matrix/` going forward, or do they live in a Drive folder
-   pulled by the importer at build time? Recommend committing.
-5. **Data validation strictness**: the current Decision-making sheet has a
-   miscategorized cell (row 32, see §2.4). Importer should fail by default,
-   with a `--allow-warnings` flag for in-progress edits.
+- ~~Where card copy lives~~ → `messages/en/create/customRule/*.json`,
+  flat `methods` array per file. Done.
+- ~~Card / modal split in messages files~~ → collapsed into a single
+  `methods` array; modal title/description derive from each entry's
+  `label`/`supportText`. Done.
+- ~~`rightRail.json` rename~~ → file is now
+  `messages/en/create/decisionApproaches.json`; namespace is
+  `m.create.decisionApproaches` (and will become
+  `m.create.customRule.decisionApproaches` after the §1c folder reorg).
+  Done.
+- ~~Facet authoring format~~ → typed JSON files committed under
+  `data/create/customRule/`, validated by Zod. No spreadsheets at
+  runtime, no `xlsx` dep, no importer.
+- ~~Where facet data lives at runtime~~ → JSON is canonical; DB is
+  hydrated at seed time for join-friendly queries.
+- ~~Decision-making `Consensus Level` scale~~ → integer 0-100 in
+  messages; the original spreadsheet's 0.0-1.0 floats were converted
+  during the one-time content ingest.
+- ~~Membership section key naming~~ → `eligibility` /
+  `joiningProcess` / `expectations` (matches wizard).
+- ~~Scoring vs filtering~~ → ranking only; never hide rows (§10).
+- ~~`RuleTemplate` rows~~ → stay hand-curated in `prisma/seed.ts`
+  `COMPOSITION_BY_SLUG`. The matrix just adds ranking; it doesn't
+  regenerate templates.
+- ~~Values matrix~~ → out of scope. Values are baked into each
+  curated template (and authored in `coreValues.json` for the
+  open-ended wizard step). No facet matrix needed; if a template is
+  recommended, its values come along statically.
+- ~~Ranking algorithm~~ → simple count (sum of `MethodFacet { matches:
+  true }` rows touched by the requested facets); per-method for §9.2
+  and per-template (sum across composed methods) for §9.1. `weight` is
+  reserved for a future v2; ignored by v1.
+- ~~Boot-time validation~~ → none. Parity is enforced by the seed step
+  (§8) and the parity test in CI (§3, §12). No `next dev` startup hook.
+- ~~Messages folder reorg sequencing~~ → ships as **its own ticket
+  before** CR-88 (§1c). CR-88 assumes the post-reorg paths.
+- ~~Spreadsheet handoff~~ → the four `~/Downloads/*.xlsx` files are
+  passed to the implementing agent alongside this doc. They are **not**
+  committed; the post-ingest `messages/en/create/customRule/*.json`
+  and `data/create/customRule/*.json` files are the historical record.
 
 ---
 
-## 11. Test plan (acceptance for CR-88)
+## 12. Test plan (acceptance for CR-88)
 
-- [ ] `scripts/import-templates-xlsx.ts` runs end-to-end on the four committed
-      workbooks with no errors and produces the expected DB diff (or JSON
-      snapshot).
-- [ ] Editing a row in the source workbook and re-running the importer changes
-      the rank order returned by `GET /api/templates?facet.orgType=4`
-      (the `Nonprofit` chip id) without any manual Studio edit.
-- [ ] `tests/unit/importTemplatesXlsx.test.ts` rejects each documented
-      validation failure (unknown column, bad symbol, miscategorized row).
-- [ ] `tests/unit/templateRecommendationSchemas.test.ts` exercises the Zod
-      schemas the importer and API share.
-- [ ] Manual smoke on the four wizard card-deck steps: facet-narrowed
-      ordering surfaces matching cards first; facetless GET returns the
-      full curated list.
-- [ ] No regression in existing template surfaces (marketing home, templates
-      index, review-template preview).
+- [ ] `prisma db seed` populates `MethodFacet` from the four
+      `data/create/customRule/<section>.json` files with no errors,
+      producing the expected row count
+      (`(11 + 19 + 32 + 19) × 19 = 1539` rows max, fewer if authors
+      use the omit-default shorthand).
+- [ ] `tests/unit/methodFacets.test.ts` asserts every method slug in
+      each facet file matches a `methods[].id` in the corresponding
+      messages file (and vice-versa) — no orphans either way. Also
+      asserts every `chipId` in `_facetGroups.json` resolves to a real
+      position in the referenced messages file (off-by-one fails).
+- [ ] `tests/unit/methodFacetsSchemas.test.ts` exercises the Zod schema
+      (rejects unknown facet values, unknown groups, unknown sections,
+      malformed booleans).
+- [ ] `tests/unit/methodRecommendations.test.ts` exercises the scoring
+      function directly with a fixture set: a method matching 2 of 3
+      requested facets scores `2`; a template composing two methods
+      that each match `2` and `3` requested facets scores `5`; ties
+      fall back to curated `(featured, sortOrder, title)` order.
+- [ ] `GET /api/create-flow/methods?section=conflictManagement&facet.orgType=nonprofit`
+      returns all 19 methods, ranked, with the `nonprofit`-matching
+      methods scoring higher than non-matching ones; zero-match
+      methods preserve their on-disk authoring order.
+- [ ] `GET /api/templates?facet.orgType=nonprofit&facet.size=sixToTwelve`
+      returns templates re-ordered by composed-method match count, with
+      score-0 templates still present at the end in curated order.
+- [ ] No-facets `GET /api/templates` matches today's curated ordering
+      (no regression for the existing marketing/templates surfaces).
+- [ ] DB-down smoke: with `DATABASE_URL` unset, the four wizard
+      card-deck steps still render the full deck from messages (no
+      5xx, no broken cards).
+- [ ] Editing a `data/create/customRule/<section>.json` entry and
+      re-running `prisma db seed` changes the rank order returned by
+      both endpoints without any code change.
 
 ---
 
-## 12. Source files referenced
+## 13. Source files referenced
 
-- `prisma/schema.prisma` — `RuleTemplate` model (lines 64–73).
-- `prisma/seed.ts` — current curated composition + xlsx-shaped helpers
-  (lines 1–404).
-- `app/api/templates/route.ts` — existing GET endpoint (to be rewritten).
-- `app/api/drafts/me/route.ts` — reference route shape (`dbUnavailable` →
-  `getSessionUser` → `readLimitedJson` → `safeParse` → `jsonFromZodError`).
-- `lib/server/db.ts` — Prisma singleton (lines 1–18).
-- `lib/server/responses.ts` — `dbUnavailable()` (lines 1–8).
-- `lib/server/ruleTemplates.ts` — `listRuleTemplatesFromDb` (lines 9–30).
-- `lib/server/validation/createFlowSchemas.ts` — schema to reuse for
-  `POST /api/templates/recommend` (lines 47–106).
-- `lib/server/validation/requestBody.ts` — `readLimitedJson` (lines 13–48).
-- `lib/server/validation/zodHttp.ts` — `jsonFromZodError` (lines 4–17).
-- `lib/server/validation/plainJson.ts` — `assertPlainJsonValue` /
-  `DEFAULT_PLAIN_JSON_LIMITS`.
+- `prisma/schema.prisma` — `RuleTemplate` model (unchanged); add
+  `MethodFacet` model (§7).
+- `prisma/seed.ts` — current curated composition; add `seedMethodFacets`
+  helper (§8).
+- `app/api/templates/route.ts` — existing GET endpoint (rewrite with
+  optional facet params).
+- `app/api/drafts/me/route.ts` — reference route shape.
+- `lib/server/db.ts` — Prisma singleton.
+- `lib/server/responses.ts` — `dbUnavailable()`.
+- `lib/server/ruleTemplates.ts` — `listRuleTemplatesFromDb` (extend with
+  facet param + scoring helper).
+- `lib/server/methodRecommendations.ts` — **new**; helper for §9.2.
+- `lib/server/validation/methodFacetsSchemas.ts` — **new**; Zod schema
+  for the JSON facet files and the API request shapes.
+- `lib/server/validation/createFlowSchemas.ts` — reuse facet-id arrays
+  rather than redeclaring them.
+- `lib/server/validation/requestBody.ts` — `readLimitedJson`.
+- `lib/server/validation/zodHttp.ts` — `jsonFromZodError`.
 - `lib/logger.ts` — server-side `logger`.
 - `app/(app)/create/types.ts` — `CreateFlowState` and facet fields.
 - `app/(app)/create/utils/flowSteps.ts` — canonical step order.
-- `app/(app)/create/utils/createFlowScreenRegistry.ts` — screen layout per step.
-- `app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx` — chip-id
-  derivation pattern (positional `String(i+1)`).
-- `app/(app)/create/screens/card/CommunicationMethodsScreen.tsx` — section-field
-  contract (`SECTION_FIELDS`).
-- `messages/en/create/{communitySize,communityStructure,communication,membership,rightRail,conflictManagement}.json` —
-  current static card / chip copy that the matrix supersedes.
-- `lib/templates/governanceTemplateCatalog.ts`,
-  `lib/templates/templateGridPresentation.ts`,
-  `lib/create/fetchTemplates.ts` — current presentation/DTO layer.
+- `app/(app)/create/utils/createFlowScreenRegistry.ts` — screen
+  metadata.
+- `app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx`
+  — chip-id derivation pattern (positional `String(i+1)`).
+- `app/(app)/create/screens/card/CommunicationMethodsScreen.tsx` (and
+  the three sibling screens) — already iterate `methods[]` via
+  `methodById`; the API ranking layer plugs in here.
+- `messages/en/create/customRule/{communication,membership,decisionApproaches,conflictManagement}.json`
+  — flat `methods` arrays (post-reorg paths). Source of truth for copy;
+  the matrix never edits these.
+- `messages/en/create/{community,reviewAndComplete}/*.json` — the other
+  two stages (post-reorg); not consumed by the matrix but listed for
+  context on the §1c reorg.
+- `data/create/customRule/{communication,membership,decisionApproaches,conflictManagement}.json`
+  — **new**; facet matches per method.
+- `data/create/customRule/_facetGroups.json` — **new**; canonical facet
+  group/value ids and the wizard-chip-id ↔ facet-value-id mapping.
 - `tests/unit/createFlowValidation.test.ts` — Vitest pattern for new
-  schema/importer tests.
-- Roadmap: `docs/backend-roadmap.md` §4 (lines 83–85), §13.
-- Spec: `docs/backend-linear-tickets.md` Ticket 16 (lines 280–304).
+  schema/parity tests.
+- Roadmap: `docs/guides/backend-roadmap.md` §4, §13.
+- Spec: `docs/guides/backend-linear-tickets.md` Ticket 16.
 
-## 13. Source workbooks
+---
 
-| File | Sheet | Rows | Cols | Section |
-|---|---|---|---|---|
-| `Communication Methods.xlsx` | `Current` | 11 cards | 24 | `communication` |
-| `Group_Membership_Methods.xlsx` | `Current` | 19 cards | 24 | `membership` |
-| `Decision-making.xlsx` | `Current` | 32 cards | 26 | `decisionMaking` |
-| `Conflict Management Methods.xlsx` | `Current` | 19 cards | 25 | `conflictManagement` |
+## Appendix — Source workbooks (one-time authoring artifact)
 
-Counts include the header row. Decision-making has 26 columns because of two
-extra content fields (`Consensus Level`, `Step-by-Step Instructions` vs the
-4-section pattern of the others).
+These four spreadsheets are **handed to the implementing agent
+alongside this doc**. They were used once to seed the messages content
+(already done) and will be used once more to transcribe the facet
+matches into `data/create/customRule/*.json` per §6's "One-time
+transcription" steps. They are **not** committed to the repo, **not**
+part of the runtime contract, and **not** referenced by any code path.
+
+| File (in `~/Downloads/`) | Sheet | Rows | Section |
+| --- | --- | --- | --- |
+| `Communication Methods.xlsx` | `Current` | 11 | `communication` |
+| `Group_Membership_Methods.xlsx` | `Current` | 19 | `membership` |
+| `Decision-making.xlsx` | `Current` | 32 | `decisionApproaches` |
+| `Conflict Management Methods.xlsx` | `Current` | 19 | `conflictManagement` |
+
+Each workbook's leading columns hold the descriptive copy already
+ingested into `messages/en/create/customRule/<section>.json`; the
+trailing 19 columns hold the facet matches that need to land in
+`data/create/customRule/<section>.json`. After CR-88 lands, future
+facet edits happen directly in the JSON files — the workbooks are
+historical reference only, and the committed JSON (in both `messages/`
+and `data/`) is the canonical record.
diff --git a/lib/create/api.ts b/lib/create/api.ts
index 6d1ce85..c04f94f 100644
--- a/lib/create/api.ts
+++ b/lib/create/api.ts
@@ -118,6 +118,23 @@ async function errorBodyMessage(res: Response): Promise<string> {
   return "Save failed";
 }
 
+/**
+ * Wipe the signed-in user's saved draft. Fire-and-forget: any non-2xx (including
+ * the sync-flag-off `503` and the unauthenticated `401`) is swallowed because
+ * callers only invoke this on already-published / explicitly-discarded flows
+ * where a leftover server draft is acceptable.
+ */
+export async function deleteServerDraft(): Promise<void> {
+  try {
+    await fetch("/api/drafts/me", {
+      method: "DELETE",
+      credentials: "include",
+    });
+  } catch {
+    /* ignore — server draft cleanup is best-effort */
+  }
+}
+
 export async function saveDraftToServer(
   state: CreateFlowState,
 ): Promise<SaveDraftResult> {
diff --git a/lib/server/methodRecommendations.ts b/lib/server/methodRecommendations.ts
new file mode 100644
index 0000000..d4b91c9
--- /dev/null
+++ b/lib/server/methodRecommendations.ts
@@ -0,0 +1,171 @@
+import { prisma } from "./db";
+import { isDatabaseConfigured } from "./env";
+import {
+  type RequestedFacets,
+  type SectionId,
+  flattenRequestedFacets,
+} from "./validation/methodFacetsSchemas";
+
+/**
+ * Per-method ranking output (CR-88, §9.2).
+ *
+ * `score` = number of requested `(group, value)` pairs that this method's
+ * `MethodFacet { matches: true }` rows cover. `matchedFacets` is the
+ * deduped list of `"<group>:<value>"` keys that contributed — useful for
+ * an eventual "Why this method?" UI tooltip.
+ */
+export type MethodRanking = {
+  slug: string;
+  matches: { score: number; matchedFacets: string[] };
+};
+
+export type ListMethodRecommendationsResult = {
+  /** Ordered slug list, ranked highest-`score`-first; absent slugs scored `0`. */
+  rankedSlugs: string[];
+  /** Per-slug match data; missing entries should be treated as `score = 0`. */
+  matchesBySlug: Record<string, MethodRanking["matches"]>;
+};
+
+/**
+ * Returns the per-method match scores for `section`, given `facets`.
+ * Returns `null` so callers can fall back to messages-file order when DB
+ * is unavailable or the query fails.
+ *
+ * Notes:
+ * - Empty facets ⇒ `rankedSlugs: []`, `matchesBySlug: {}` (caller falls back
+ *   to authoring order).
+ * - Sort is `score` desc only — re-stabilising into authoring order is the
+ *   caller's job (the wizard already iterates the on-disk `methods[]` array).
+ */
+export async function listMethodRecommendations(args: {
+  section: SectionId;
+  facets: RequestedFacets;
+}): Promise<ListMethodRecommendationsResult | null> {
+  if (!isDatabaseConfigured()) return null;
+
+  const requested = flattenRequestedFacets(args.facets);
+  if (requested.length === 0) {
+    return { rankedSlugs: [], matchesBySlug: {} };
+  }
+
+  try {
+    const rows = await prisma.methodFacet.findMany({
+      where: {
+        section: args.section,
+        matches: true,
+        OR: requested.map(({ group, value }) => ({ group, value })),
+      },
+      select: { slug: true, group: true, value: true },
+    });
+
+    const matchesBySlug: Record<string, MethodRanking["matches"]> = {};
+    for (const row of rows) {
+      const key = `${row.group}:${row.value}`;
+      const entry =
+        matchesBySlug[row.slug] ??
+        (matchesBySlug[row.slug] = { score: 0, matchedFacets: [] });
+      if (!entry.matchedFacets.includes(key)) {
+        entry.matchedFacets.push(key);
+        entry.score += 1;
+      }
+    }
+
+    const rankedSlugs = Object.entries(matchesBySlug)
+      .sort(([, a], [, b]) => b.score - a.score)
+      .map(([slug]) => slug);
+
+    return { rankedSlugs, matchesBySlug };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Score every template by joining its composed `(section, slug)` pairs
+ * against `MethodFacet`. Returns a per-slug score map keyed by template slug
+ * and a per-template breakdown of which method-level matches contributed.
+ *
+ * `templateMethods` enumerates the method slugs each template composes;
+ * derived from `RuleTemplate.body` by the caller.
+ */
+export type TemplateRanking = {
+  templateSlug: string;
+  score: number;
+  matchedFacets: string[];
+};
+
+export async function scoreTemplatesByFacets(args: {
+  templateMethods: ReadonlyArray<{
+    templateSlug: string;
+    methods: ReadonlyArray<{ section: SectionId; slug: string }>;
+  }>;
+  facets: RequestedFacets;
+}): Promise<TemplateRanking[] | null> {
+  if (!isDatabaseConfigured()) return null;
+  const requested = flattenRequestedFacets(args.facets);
+  if (requested.length === 0) {
+    return args.templateMethods.map((t) => ({
+      templateSlug: t.templateSlug,
+      score: 0,
+      matchedFacets: [],
+    }));
+  }
+
+  // Collect distinct (section, slug) pairs across all templates so we make
+  // exactly one query.
+  const sectionSlugSet = new Set<string>();
+  for (const t of args.templateMethods) {
+    for (const m of t.methods) {
+      sectionSlugSet.add(`${m.section}:${m.slug}`);
+    }
+  }
+  const sectionSlugPairs = Array.from(sectionSlugSet).map((key) => {
+    const [section, slug] = key.split(":");
+    return { section, slug };
+  });
+  if (sectionSlugPairs.length === 0) {
+    return args.templateMethods.map((t) => ({
+      templateSlug: t.templateSlug,
+      score: 0,
+      matchedFacets: [],
+    }));
+  }
+
+  try {
+    const rows = await prisma.methodFacet.findMany({
+      where: {
+        matches: true,
+        AND: [
+          { OR: sectionSlugPairs },
+          { OR: requested.map(({ group, value }) => ({ group, value })) },
+        ],
+      },
+      select: { section: true, slug: true, group: true, value: true },
+    });
+
+    // Build a lookup: (section,slug) -> Set of "<group>:<value>" matches.
+    const matchesByMethod = new Map<string, Set<string>>();
+    for (const row of rows) {
+      const k = `${row.section}:${row.slug}`;
+      const set = matchesByMethod.get(k) ?? new Set<string>();
+      set.add(`${row.group}:${row.value}`);
+      matchesByMethod.set(k, set);
+    }
+
+    return args.templateMethods.map((t) => {
+      let score = 0;
+      const matched: string[] = [];
+      for (const m of t.methods) {
+        const set = matchesByMethod.get(`${m.section}:${m.slug}`);
+        if (!set) continue;
+        for (const key of set) {
+          score += 1;
+          matched.push(`${m.section}:${m.slug}:${key}`);
+        }
+      }
+      return { templateSlug: t.templateSlug, score, matchedFacets: matched };
+    });
+  } catch {
+    return null;
+  }
+}
diff --git a/lib/server/ruleTemplates.ts b/lib/server/ruleTemplates.ts
index ba2d8f5..3d74c76 100644
--- a/lib/server/ruleTemplates.ts
+++ b/lib/server/ruleTemplates.ts
@@ -1,6 +1,27 @@
 import type { RuleTemplateDto } from "../create/fetchTemplates";
 import { prisma } from "./db";
 import { isDatabaseConfigured } from "./env";
+import { scoreTemplatesByFacets } from "./methodRecommendations";
+import { templateMethodsFromBody } from "./templateMethods";
+import type { RequestedFacets } from "./validation/methodFacetsSchemas";
+import { flattenRequestedFacets } from "./validation/methodFacetsSchemas";
+
+const TEMPLATE_SELECT = {
+  id: true,
+  slug: true,
+  title: true,
+  category: true,
+  description: true,
+  body: true,
+  sortOrder: true,
+  featured: true,
+} as const;
+
+const CURATED_ORDER_BY = [
+  { featured: "desc" as const },
+  { sortOrder: "asc" as const },
+  { title: "asc" as const },
+];
 
 /**
  * Curated templates for public list UIs (same query as GET /api/templates).
@@ -12,19 +33,82 @@ export async function listRuleTemplatesFromDb(): Promise<RuleTemplateDto[]> {
   }
   try {
     return await prisma.ruleTemplate.findMany({
-      orderBy: [{ featured: "desc" }, { sortOrder: "asc" }, { title: "asc" }],
-      select: {
-        id: true,
-        slug: true,
-        title: true,
-        category: true,
-        description: true,
-        body: true,
-        sortOrder: true,
-        featured: true,
-      },
+      orderBy: CURATED_ORDER_BY,
+      select: TEMPLATE_SELECT,
     });
   } catch {
     return [];
   }
 }
+
+export type TemplateScore = {
+  score: number;
+  matchedFacets: string[];
+};
+
+export type RankedTemplatesResult = {
+  templates: RuleTemplateDto[];
+  /** Per-template-slug score map; absent slugs scored `0`. */
+  scores: Record<string, TemplateScore>;
+};
+
+/**
+ * Curated templates ranked by how many of `facets` each composed method
+ * matches (§9.1). When `facets` is empty, returns the curated ordering with
+ * an empty `scores` map (caller can omit it from the API response).
+ *
+ * Ties (and zero-score templates) fall back to the curated
+ * `(featured, sortOrder, title)` order so no-facets and zero-match cases
+ * produce identical output to `listRuleTemplatesFromDb`.
+ */
+export async function listRankedRuleTemplatesFromDb(
+  facets: RequestedFacets,
+): Promise<RankedTemplatesResult> {
+  if (!isDatabaseConfigured()) {
+    return { templates: [], scores: {} };
+  }
+  const requested = flattenRequestedFacets(facets);
+  if (requested.length === 0) {
+    const templates = await listRuleTemplatesFromDb();
+    return { templates, scores: {} };
+  }
+
+  let templates: RuleTemplateDto[];
+  try {
+    templates = await prisma.ruleTemplate.findMany({
+      orderBy: CURATED_ORDER_BY,
+      select: TEMPLATE_SELECT,
+    });
+  } catch {
+    return { templates: [], scores: {} };
+  }
+
+  const templateMethods = templates.map((t) => ({
+    templateSlug: t.slug,
+    methods: templateMethodsFromBody(t.body),
+  }));
+
+  const ranked = await scoreTemplatesByFacets({ templateMethods, facets });
+  if (!ranked) {
+    return { templates, scores: {} };
+  }
+
+  const scores: Record<string, TemplateScore> = {};
+  for (const r of ranked) {
+    scores[r.templateSlug] = {
+      score: r.score,
+      matchedFacets: r.matchedFacets,
+    };
+  }
+
+  // Stable sort: scoreDesc, then preserve curated index order.
+  const indexBySlug = new Map(templates.map((t, i) => [t.slug, i]));
+  const sorted = [...templates].sort((a, b) => {
+    const sa = scores[a.slug]?.score ?? 0;
+    const sb = scores[b.slug]?.score ?? 0;
+    if (sa !== sb) return sb - sa;
+    return (indexBySlug.get(a.slug) ?? 0) - (indexBySlug.get(b.slug) ?? 0);
+  });
+
+  return { templates: sorted, scores };
+}
diff --git a/lib/server/templateMethods.ts b/lib/server/templateMethods.ts
new file mode 100644
index 0000000..39634dc
--- /dev/null
+++ b/lib/server/templateMethods.ts
@@ -0,0 +1,76 @@
+import type { SectionId } from "./validation/methodFacetsSchemas";
+
+/**
+ * Extracts the `(section, slug)` pairs that a curated `RuleTemplate.body`
+ * composes. Used by `/api/templates` to score templates by facet match
+ * (CR-88, §9.1).
+ *
+ * `body.sections[].categoryName` is mapped to the canonical recommendation
+ * `section` id; `entries[].title` is slugified the same way the messages
+ * ingest produced `methods[].id` (kebab-case, ASCII-folded, lowercase) so
+ * the slugs line up with `MethodFacet.slug`.
+ *
+ * "Values" entries are intentionally skipped — values are out of scope for
+ * the facet matrix (§11).
+ */
+
+const CATEGORY_NAME_TO_SECTION: Record<string, SectionId> = {
+  Communication: "communication",
+  Membership: "membership",
+  "Decision-making": "decisionApproaches",
+  "Conflict management": "conflictManagement",
+};
+
+export function methodSlugFromTitle(title: string): string {
+  // Match the slugify rules of the one-time messages ingest: NFKD-normalize,
+  // strip diacritics, drop apostrophes/brackets, collapse non-alphanumerics
+  // to single hyphens, trim leading/trailing hyphens.
+  const folded = title.normalize("NFKD").replace(/[\u0300-\u036f]/g, "");
+  const stripped = folded
+    .toLowerCase()
+    .replace(/['’`()\[\]]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return stripped;
+}
+
+type RuleTemplateBodySection = {
+  categoryName?: unknown;
+  entries?: unknown;
+};
+type RuleTemplateBody = { sections?: unknown };
+
+export type TemplateMethodRef = { section: SectionId; slug: string };
+
+export function templateMethodsFromBody(
+  body: unknown,
+): TemplateMethodRef[] {
+  if (!body || typeof body !== "object") return [];
+  const sections = (body as RuleTemplateBody).sections;
+  if (!Array.isArray(sections)) return [];
+
+  const out: TemplateMethodRef[] = [];
+  const seen = new Set<string>();
+  for (const raw of sections) {
+    if (!raw || typeof raw !== "object") continue;
+    const sec = raw as RuleTemplateBodySection;
+    const categoryName =
+      typeof sec.categoryName === "string" ? sec.categoryName : null;
+    if (!categoryName) continue;
+    const section = CATEGORY_NAME_TO_SECTION[categoryName];
+    if (!section) continue; // Values, or any future category we don't score.
+    if (!Array.isArray(sec.entries)) continue;
+    for (const entry of sec.entries) {
+      if (!entry || typeof entry !== "object") continue;
+      const title = (entry as { title?: unknown }).title;
+      if (typeof title !== "string" || title.trim() === "") continue;
+      const slug = methodSlugFromTitle(title);
+      if (!slug) continue;
+      const key = `${section}:${slug}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push({ section, slug });
+    }
+  }
+  return out;
+}
diff --git a/lib/server/validation/methodFacetsSchemas.ts b/lib/server/validation/methodFacetsSchemas.ts
new file mode 100644
index 0000000..5686499
--- /dev/null
+++ b/lib/server/validation/methodFacetsSchemas.ts
@@ -0,0 +1,273 @@
+import { z } from "zod";
+
+/**
+ * Zod schemas for the recommendation matrix (CR-88).
+ *
+ * Source of truth at runtime is `data/create/customRule/<section>.json` plus
+ * `data/create/customRule/_facetGroups.json`. These schemas validate those
+ * files at seed time and in the parity test (`tests/unit/methodFacets.test.ts`).
+ * They are also reused by the API request shapes for `/api/templates` and
+ * `/api/create-flow/methods` so a single set of canonical ids drives both
+ * the on-disk JSON and the query-string contract.
+ *
+ * See `docs/guides/template-recommendation-matrix.md` §2 (canonical 19
+ * facet values), §6 (JSON shape), §7 (`MethodFacet` schema), §9 (API).
+ */
+
+export const SECTION_IDS = [
+  "communication",
+  "membership",
+  "decisionApproaches",
+  "conflictManagement",
+] as const;
+export type SectionId = (typeof SECTION_IDS)[number];
+export const sectionIdSchema = z.enum(SECTION_IDS);
+
+export const FACET_GROUP_IDS = [
+  "size",
+  "orgType",
+  "scale",
+  "maturity",
+] as const;
+export type FacetGroupId = (typeof FACET_GROUP_IDS)[number];
+export const facetGroupIdSchema = z.enum(FACET_GROUP_IDS);
+
+export const SIZE_VALUE_IDS = [
+  "oneMember",
+  "twoToFive",
+  "sixToTwelve",
+  "thirteenToOneHundred",
+  "oneHundredToOneHundredK",
+] as const;
+export const ORG_TYPE_VALUE_IDS = [
+  "dao",
+  "forProfit",
+  "nonprofit",
+  "openSource",
+  "mutualAid",
+  "workersCoop",
+] as const;
+export const SCALE_VALUE_IDS = [
+  "global",
+  "national",
+  "regional",
+  "local",
+] as const;
+export const MATURITY_VALUE_IDS = [
+  "earlyStage",
+  "growthStage",
+  "established",
+  "enterprise",
+] as const;
+
+export type SizeValueId = (typeof SIZE_VALUE_IDS)[number];
+export type OrgTypeValueId = (typeof ORG_TYPE_VALUE_IDS)[number];
+export type ScaleValueId = (typeof SCALE_VALUE_IDS)[number];
+export type MaturityValueId = (typeof MATURITY_VALUE_IDS)[number];
+
+export const FACET_VALUE_IDS_BY_GROUP: Record<
+  FacetGroupId,
+  readonly string[]
+> = {
+  size: SIZE_VALUE_IDS,
+  orgType: ORG_TYPE_VALUE_IDS,
+  scale: SCALE_VALUE_IDS,
+  maturity: MATURITY_VALUE_IDS,
+};
+
+const sizeValueIdSchema = z.enum(SIZE_VALUE_IDS);
+const orgTypeValueIdSchema = z.enum(ORG_TYPE_VALUE_IDS);
+const scaleValueIdSchema = z.enum(SCALE_VALUE_IDS);
+const maturityValueIdSchema = z.enum(MATURITY_VALUE_IDS);
+
+/**
+ * Per-cell shape: bare boolean, or an object with optional `weight`.
+ * The object form is reserved for a future weighted-rank pass (v1 ignores
+ * `weight`; see §9.1 "Notes").
+ */
+const facetMatchSchema = z.union([
+  z.boolean(),
+  z
+    .object({
+      match: z.boolean(),
+      weight: z.number().finite().optional(),
+    })
+    .strict(),
+]);
+export type FacetMatch = z.infer<typeof facetMatchSchema>;
+
+/**
+ * Builds a Zod object schema for a facet group where every canonical value id
+ * is optional. Omitted keys default to `false` (see §6 "Bulk shorthand").
+ */
+function partialGroupSchema<Values extends readonly [string, ...string[]]>(
+  values: Values,
+) {
+  const enumSchema = z.enum(values);
+  return z.record(enumSchema, facetMatchSchema);
+}
+
+const sizeFacetsSchema = partialGroupSchema(SIZE_VALUE_IDS);
+const orgTypeFacetsSchema = partialGroupSchema(ORG_TYPE_VALUE_IDS);
+const scaleFacetsSchema = partialGroupSchema(SCALE_VALUE_IDS);
+const maturityFacetsSchema = partialGroupSchema(MATURITY_VALUE_IDS);
+
+/**
+ * Per-method facet entry. All four groups are optional; an omitted group
+ * defaults to "all false" at seed time (see `flattenSectionFacets` in
+ * `prisma/seed/methodFacets.ts`).
+ */
+export const methodFacetsSchema = z
+  .object({
+    size: sizeFacetsSchema.optional(),
+    orgType: orgTypeFacetsSchema.optional(),
+    scale: scaleFacetsSchema.optional(),
+    maturity: maturityFacetsSchema.optional(),
+  })
+  .strict();
+export type MethodFacets = z.infer<typeof methodFacetsSchema>;
+
+/**
+ * Whole-section file shape: object keyed by method slug
+ * (`messages/en/create/customRule/<section>.json#/methods[].id`).
+ */
+export const sectionFacetsSchema = z.record(z.string(), methodFacetsSchema);
+export type SectionFacetsFile = z.infer<typeof sectionFacetsSchema>;
+
+/**
+ * `_facetGroups.json` shape: positional chip id ↔ canonical facet value id
+ * mapping (see §2). Validated alongside the section files so chip drift in a
+ * messages file fails CI loudly.
+ */
+const facetGroupValueEntrySchema = z
+  .object({
+    chipId: z.string().min(1),
+  })
+  .strict();
+
+const facetGroupBlockSchema = z
+  .object({
+    source: z.string().min(1),
+    values: z.record(z.string(), facetGroupValueEntrySchema),
+  })
+  .strict();
+
+export const facetGroupsFileSchema = z
+  .object({
+    size: facetGroupBlockSchema,
+    orgType: facetGroupBlockSchema,
+    scale: facetGroupBlockSchema,
+    maturity: facetGroupBlockSchema,
+  })
+  .strict()
+  .superRefine((data, ctx) => {
+    for (const group of FACET_GROUP_IDS) {
+      const expected = new Set(FACET_VALUE_IDS_BY_GROUP[group]);
+      const actual = new Set(Object.keys(data[group].values));
+      for (const v of expected) {
+        if (!actual.has(v)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: [group, "values"],
+            message: `Missing canonical value ${v}`,
+          });
+        }
+      }
+      for (const v of actual) {
+        if (!expected.has(v)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: [group, "values", v],
+            message: `Unknown facet value ${v} for group ${group}`,
+          });
+        }
+      }
+    }
+  });
+export type FacetGroupsFile = z.infer<typeof facetGroupsFileSchema>;
+
+/**
+ * Resolve a `FacetMatch` value to its boolean (the shape can be either a bare
+ * boolean or `{ match, weight? }`). Used by both the seed flattener and the
+ * scoring helpers.
+ */
+export function resolveFacetMatch(
+  v: FacetMatch | undefined,
+): { match: boolean; weight: number | null } {
+  if (v === undefined) return { match: false, weight: null };
+  if (typeof v === "boolean") return { match: v, weight: null };
+  return { match: v.match, weight: v.weight ?? null };
+}
+
+// ---------------------------------------------------------------------------
+// API request shapes (used by /api/templates and /api/create-flow/methods)
+// ---------------------------------------------------------------------------
+
+/**
+ * Generic facet-id-array shape, scoped per group. URLSearchParams produces
+ * either a single string or repeated values; both flatten to `string[]`.
+ */
+export const requestedFacetsSchema = z
+  .object({
+    size: z.array(sizeValueIdSchema).max(SIZE_VALUE_IDS.length).optional(),
+    orgType: z
+      .array(orgTypeValueIdSchema)
+      .max(ORG_TYPE_VALUE_IDS.length)
+      .optional(),
+    scale: z.array(scaleValueIdSchema).max(SCALE_VALUE_IDS.length).optional(),
+    maturity: z
+      .array(maturityValueIdSchema)
+      .max(MATURITY_VALUE_IDS.length)
+      .optional(),
+  })
+  .strict();
+export type RequestedFacets = z.infer<typeof requestedFacetsSchema>;
+
+/** Flattened `(group, value)` tuple for scoring. */
+export type RequestedFacetPair = { group: FacetGroupId; value: string };
+
+export function flattenRequestedFacets(
+  facets: RequestedFacets,
+): RequestedFacetPair[] {
+  const out: RequestedFacetPair[] = [];
+  for (const group of FACET_GROUP_IDS) {
+    const values = facets[group];
+    if (!values) continue;
+    for (const value of values) {
+      out.push({ group, value });
+    }
+  }
+  return out;
+}
+
+/**
+ * Parse `?facet.size=oneMember&facet.orgType=dao&facet.orgType=nonprofit` into
+ * a typed `RequestedFacets`. Unknown groups and unknown values are dropped
+ * silently — the API "never errors on partial facets" (§9.3).
+ */
+export function parseRequestedFacetsFromSearchParams(
+  search: URLSearchParams,
+): RequestedFacets {
+  const collected: Record<FacetGroupId, Set<string>> = {
+    size: new Set(),
+    orgType: new Set(),
+    scale: new Set(),
+    maturity: new Set(),
+  };
+  for (const [rawKey, rawVal] of search.entries()) {
+    if (!rawKey.startsWith("facet.")) continue;
+    const group = rawKey.slice("facet.".length) as FacetGroupId;
+    if (!FACET_GROUP_IDS.includes(group)) continue;
+    const allowed = new Set(FACET_VALUE_IDS_BY_GROUP[group]);
+    if (allowed.has(rawVal)) {
+      collected[group].add(rawVal);
+    }
+  }
+  const out: RequestedFacets = {};
+  for (const group of FACET_GROUP_IDS) {
+    if (collected[group].size > 0) {
+      out[group] = Array.from(collected[group]) as never;
+    }
+  }
+  return out;
+}
diff --git a/messages/en/create/communication.json b/messages/en/create/communication.json
deleted file mode 100644
index cc915ba..0000000
--- a/messages/en/create/communication.json
+++ /dev/null
@@ -1,120 +0,0 @@
-{
-  "_comment": "Create flow – communication step: page, cards, and add-platform modals",
-  "page": {
-    "compactTitle": "How should this community communicate with each-other?",
-    "compactDescriptionBefore": "You can select multiple methods for different needs or ",
-    "compactDescriptionLinkLabel": "add",
-    "compactDescriptionAfter": " your own",
-    "expandedTitle": "What method should this community use to communicate with eachother?",
-    "expandedDescription": "You can select multiple methods for different needs or add your own",
-    "seeAllLink": "See all communication approaches"
-  },
-  "confirmModal": {
-    "title": "Confirm selection",
-    "description": "Confirm to select this option.",
-    "nextButtonText": "Confirm"
-  },
-  "addPlatform": {
-    "nextButtonText": "Add Platform"
-  },
-  "sectionHeadings": {
-    "corePrinciple": "Core Principle & Scope",
-    "logisticsAdmin": "Logistics, Admin & Norms",
-    "codeOfConduct": "Code of Conduct"
-  },
-  "cards": {
-    "in-person-meetings": {
-      "label": "In-Person Meetings",
-      "supportText": "Physical gatherings for high-bandwidth communication and relationship building."
-    },
-    "signal": {
-      "label": "Signal",
-      "supportText": "Encrypted messaging for high-security, private coordination."
-    },
-    "video-meetings": {
-      "label": "Video Meetings",
-      "supportText": "Synchronous video calls for remote face-to-face interaction."
-    },
-    "4": {
-      "label": "Label",
-      "supportText": "Collaborative work to reach a resolution that all parties can agree upon."
-    },
-    "5": {
-      "label": "Label",
-      "supportText": "Structured sessions where parties collaboratively resolve disputes."
-    },
-    "6": {
-      "label": "Label",
-      "supportText": "Members vote to resolve a dispute democratically."
-    },
-    "7": {
-      "label": "Label",
-      "supportText": "Invite-only"
-    }
-  },
-  "modals": {
-    "in-person-meetings": {
-      "title": "In-Person Meetings",
-      "description": "Physical gatherings for high-bandwidth communication and relationship building.",
-      "sections": {
-        "corePrinciple": "We value the highest bandwidth of communication, physical presence, to build trust that digital tools cannot match. Consequently, we reserve this high-trust space for annual retreats, strategic planning, and high-stakes interpersonal repair where body language is essential.",
-        "logisticsAdmin": "Logistics focus on physical accessibility, venue security, and travel equity. Organizers control entry via keys or door staff. Culturally, participants are expected to maintain mission focus and adhere strictly to the itinerary to respect everyone's time. Side conversations or distracting behaviors that derail the agenda are discouraged.",
-        "codeOfConduct": "We aspire to operate within these principles. We don't need to see eye to eye on everything, but we believe the world can be improved by collective action. Aspire to do no harm to members of this community. Violence or physical intimidation will not be tolerated. We have a zero-tolerance policy for racism, sexism, and bigotry."
-      }
-    },
-    "signal": {
-      "title": "Signal",
-      "description": "End-to-end encrypted messaging ideal for small, security-minded groups",
-      "sections": {
-        "corePrinciple": "We use Signal for all operational communication. To keep our workspace organized, official channels are prepended with an emoji (e.g., 🤓). Public channels are open to all volunteers, while Core Channels are restricted to coordinators. All Core Members are designated as admins to share the technical workload.",
-        "logisticsAdmin": "We encourage direct messages to build friendship, but all operational logistics must happen in group channels. To respect everyone's time, use \"Emoji Reactions\" (👍, ♥️) to acknowledge messages rather than typing \"thanks,\" which triggers notifications for everyone. Text is a poor medium for nuance: if a conversation needs more context, move it to a call or in person.",
-        "codeOfConduct": "This space relies on collective responsibility. Posting content that attracts unwanted legal attention or exposes members' real-world identities without consent is prohibited. We aspire to do no harm by practicing strict operational security. Intentionally leaking information violates our safety. We have a zero-tolerance policy for harassment or abuse."
-      }
-    },
-    "video-meetings": {
-      "title": "Video Meetings",
-      "description": "Synchronous video calls for remote face-to-face interaction.",
-      "sections": {
-        "corePrinciple": "We prioritize synchronous connection to read facial expressions without the barrier of travel, using this tool for weekly syncs and quick consensus checks that benefit from real-time debate before moving to a vote.",
-        "logisticsAdmin": "The host manages technical security via waiting rooms to prevent intrusion. Culturally, the focus is on maximizing the value of synchronous time. Norms include muting when not speaking, using the \"Raise Hand\" feature to queue, and utilizing the chat box for non-interruptive side comments. Distractions should be minimized.",
-        "codeOfConduct": "We have a zero-tolerance policy for racism, sexism, and bigotry, whether spoken or shared in the chat. We aspire to do no harm. \"Zoom-bombing\" or broadcasting graphic content is prohibited. Willfully spreading obviously false information will not be tolerated. Do not discuss sensitive data that could attract legal or security risk."
-      }
-    },
-    "4": {
-      "title": "Label",
-      "description": "Collaborative work to reach a resolution that all parties can agree upon.",
-      "sections": {
-        "corePrinciple": "",
-        "logisticsAdmin": "",
-        "codeOfConduct": ""
-      }
-    },
-    "5": {
-      "title": "Label",
-      "description": "Structured sessions where parties collaboratively resolve disputes.",
-      "sections": {
-        "corePrinciple": "",
-        "logisticsAdmin": "",
-        "codeOfConduct": ""
-      }
-    },
-    "6": {
-      "title": "Label",
-      "description": "Members vote to resolve a dispute democratically.",
-      "sections": {
-        "corePrinciple": "",
-        "logisticsAdmin": "",
-        "codeOfConduct": ""
-      }
-    },
-    "7": {
-      "title": "Label",
-      "description": "Invite-only",
-      "sections": {
-        "corePrinciple": "",
-        "logisticsAdmin": "",
-        "codeOfConduct": ""
-      }
-    }
-  }
-}
diff --git a/messages/en/create/communityContext.json b/messages/en/create/community/communityContext.json
similarity index 100%
rename from messages/en/create/communityContext.json
rename to messages/en/create/community/communityContext.json
diff --git a/messages/en/create/communityName.json b/messages/en/create/community/communityName.json
similarity index 100%
rename from messages/en/create/communityName.json
rename to messages/en/create/community/communityName.json
diff --git a/messages/en/create/communitySave.json b/messages/en/create/community/communitySave.json
similarity index 100%
rename from messages/en/create/communitySave.json
rename to messages/en/create/community/communitySave.json
diff --git a/messages/en/create/communitySize.json b/messages/en/create/community/communitySize.json
similarity index 100%
rename from messages/en/create/communitySize.json
rename to messages/en/create/community/communitySize.json
diff --git a/messages/en/create/communityStructure.json b/messages/en/create/community/communityStructure.json
similarity index 100%
rename from messages/en/create/communityStructure.json
rename to messages/en/create/community/communityStructure.json
diff --git a/messages/en/create/communityUpload.json b/messages/en/create/community/communityUpload.json
similarity index 100%
rename from messages/en/create/communityUpload.json
rename to messages/en/create/community/communityUpload.json
diff --git a/messages/en/create/informational.json b/messages/en/create/community/informational.json
similarity index 100%
rename from messages/en/create/informational.json
rename to messages/en/create/community/informational.json
diff --git a/messages/en/create/review.json b/messages/en/create/community/review.json
similarity index 100%
rename from messages/en/create/review.json
rename to messages/en/create/community/review.json
diff --git a/messages/en/create/conflictManagement.json b/messages/en/create/conflictManagement.json
deleted file mode 100644
index b8b7e86..0000000
--- a/messages/en/create/conflictManagement.json
+++ /dev/null
@@ -1,143 +0,0 @@
-{
-  "_comment": "Create flow — conflict management (Figma Flow — Compact Card Stack `20879:15979`)",
-  "page": {
-    "compactTitle": "How should conflicts be managed\nin your group?",
-    "compactDescriptionBefore": "You can also combine or ",
-    "compactDescriptionLinkLabel": "add",
-    "compactDescriptionAfter": " new approaches to the list",
-    "expandedTitle": "How should conflicts be managed in your group?",
-    "expandedDescription": "You can also combine or add new approaches to the list",
-    "seeAllLink": "See all conflict management approaches"
-  },
-  "confirmModal": {
-    "title": "Confirm selection",
-    "description": "Confirm to select this option.",
-    "nextButtonText": "Confirm"
-  },
-  "addApproach": {
-    "nextButtonText": "Add Approach"
-  },
-  "sectionHeadings": {
-    "corePrinciple": "Core Principle",
-    "applicableScope": "Applicable Scope",
-    "processProtocol": "Process Protocol",
-    "restorationFallbacks": "Restoration & Fallbacks"
-  },
-  "scopeAddButtonLabel": "Add Applicable Scope",
-  "cards": {
-    "peer-mediation": {
-      "label": "Peer Mediation",
-      "supportText": "Trained members within the organization mediate disputes among peers."
-    },
-    "conflict-resolution-council": {
-      "label": "Conflict Resolution Council",
-      "supportText": "Senior members with institutional knowledge provide guidance or decisions."
-    },
-    "facilitated-negotiation": {
-      "label": "Facilitated Negotiation",
-      "supportText": "A neutral facilitator helps guide the negotiation process."
-    },
-    "ad-hoc-arbitration": {
-      "label": "Ad Hoc Arbitration",
-      "supportText": "Arbitrators are chosen specifically for a particular case."
-    },
-    "conflict-workshops": {
-      "label": "Conflict Workshops",
-      "supportText": "Structured sessions where parties collaboratively resolve disputes and improve future interactions."
-    },
-    "6": {
-      "label": "Label",
-      "supportText": "Additional conflict management approach."
-    },
-    "7": {
-      "label": "Label",
-      "supportText": "Additional conflict management approach."
-    },
-    "8": {
-      "label": "Label",
-      "supportText": "Additional conflict management approach."
-    }
-  },
-  "modals": {
-    "peer-mediation": {
-      "title": "Peer Mediation",
-      "description": "Trained members within the organization mediate disputes among peers.",
-      "sections": {
-        "corePrinciple": "We democratize conflict skills. Instead of relying on professional outsiders, trained peers help their colleagues resolve disputes, reinforcing the idea that we take care of each other.",
-        "applicableScope": ["Low-level friction", "Misunderstandings"],
-        "processProtocol": "A volunteer peer (who is not a manager) invites the disputants to a private chat. Using a simple script, they ask questions like 'Tell us your side,' 'Tell us what you need,' and 'What can you agree to?'. The peer keeps the conversation focused on future interactions rather than past grievances. The disputants retain full control over the resolution.",
-        "restorationFallbacks": "The goal is a verbal agreement to try a new way of interacting. If the peer mediator determines the issue is too complex or involves serious harassment, they are required to refer the case to professional Mediation or a Judicial Committee."
-      }
-    },
-    "conflict-resolution-council": {
-      "title": "Conflict Resolution Council",
-      "description": "Senior members with institutional knowledge provide guidance or decisions.",
-      "sections": {
-        "corePrinciple": "",
-        "applicableScope": [],
-        "processProtocol": "",
-        "restorationFallbacks": ""
-      }
-    },
-    "facilitated-negotiation": {
-      "title": "Facilitated Negotiation",
-      "description": "A neutral facilitator helps guide the negotiation process.",
-      "sections": {
-        "corePrinciple": "",
-        "applicableScope": [],
-        "processProtocol": "",
-        "restorationFallbacks": ""
-      }
-    },
-    "ad-hoc-arbitration": {
-      "title": "Ad Hoc Arbitration",
-      "description": "Arbitrators are chosen specifically for a particular case.",
-      "sections": {
-        "corePrinciple": "",
-        "applicableScope": [],
-        "processProtocol": "",
-        "restorationFallbacks": ""
-      }
-    },
-    "conflict-workshops": {
-      "title": "Conflict Workshops",
-      "description": "Structured sessions where parties collaboratively resolve disputes and improve future interactions.",
-      "sections": {
-        "corePrinciple": "",
-        "applicableScope": [],
-        "processProtocol": "",
-        "restorationFallbacks": ""
-      }
-    },
-    "6": {
-      "title": "Label",
-      "description": "Additional conflict management approach.",
-      "sections": {
-        "corePrinciple": "",
-        "applicableScope": [],
-        "processProtocol": "",
-        "restorationFallbacks": ""
-      }
-    },
-    "7": {
-      "title": "Label",
-      "description": "Additional conflict management approach.",
-      "sections": {
-        "corePrinciple": "",
-        "applicableScope": [],
-        "processProtocol": "",
-        "restorationFallbacks": ""
-      }
-    },
-    "8": {
-      "title": "Label",
-      "description": "Additional conflict management approach.",
-      "sections": {
-        "corePrinciple": "",
-        "applicableScope": [],
-        "processProtocol": "",
-        "restorationFallbacks": ""
-      }
-    }
-  }
-}
diff --git a/messages/en/create/customRule/communication.json b/messages/en/create/customRule/communication.json
new file mode 100644
index 0000000..61097ba
--- /dev/null
+++ b/messages/en/create/customRule/communication.json
@@ -0,0 +1,137 @@
+{
+  "_comment": "Create flow – communication step: page, cards, and add-platform modals",
+  "page": {
+    "compactTitle": "How should this community communicate with each-other?",
+    "compactDescriptionBefore": "You can select multiple methods for different needs or ",
+    "compactDescriptionLinkLabel": "add",
+    "compactDescriptionAfter": " your own",
+    "expandedTitle": "What method should this community use to communicate with eachother?",
+    "expandedDescription": "You can select multiple methods for different needs or add your own",
+    "seeAllLink": "See all communication approaches"
+  },
+  "confirmModal": {
+    "title": "Confirm selection",
+    "description": "Confirm to select this option.",
+    "nextButtonText": "Confirm"
+  },
+  "addPlatform": {
+    "nextButtonText": "Add Platform"
+  },
+  "sectionHeadings": {
+    "corePrinciple": "Core Principle & Scope",
+    "logisticsAdmin": "Logistics, Admin & Norms",
+    "codeOfConduct": "Code of Conduct"
+  },
+  "methods": [
+    {
+      "id": "in-person-meetings",
+      "label": "In-Person Meetings",
+      "supportText": "Physical gatherings for high-bandwidth communication and relationship building.",
+      "sections": {
+        "corePrinciple": "We value the highest bandwidth of communication, physical presence, to build trust that digital tools cannot match. Consequently, we reserve this high-trust space for annual retreats, strategic planning, and high-stakes interpersonal repair where body language is essential.",
+        "logisticsAdmin": "Logistics focus on physical accessibility, venue security, and travel equity. Organizers control entry via keys or door staff. Culturally, participants are expected to maintain mission focus and adhere strictly to the itinerary to respect everyone's time. Side conversations or distracting behaviors that derail the agenda are discouraged. We prioritize efficiency and shared attention over multitasking.",
+        "codeOfConduct": "We aspire to operate within these principles. We don't need to see eye to eye on everything, but we believe the world can be improved by collective action. Aspire to do no harm to members of this community. Violence or physical intimidation will not be tolerated. We have a zero-tolerance policy for racism, sexism, and bigotry. Do not engage in activities at the venue that attract unwanted legal attention or endanger the group's physical safety."
+      }
+    },
+    {
+      "id": "signal",
+      "label": "Signal",
+      "supportText": "Encrypted messaging for high-security, private coordination.",
+      "sections": {
+        "corePrinciple": "We prioritize privacy and security above all else, accepting limited features to guarantee our communications cannot be surveilled. This acts as our \"Tactical\" layer for high-risk coordination, direct action planning, and medical/legal support where data hygiene is critical.",
+        "logisticsAdmin": "Admins are technical stewards, not status holders; they manage entry/removal and must not change settings without explicit cause. Disappearing messages are mandatory (standard 4-week timer) to prevent data liability. Norms focus on \"Attention Economy\": use emoji reactions instead of \"thanks\" messages to avoid push notification spam. Only join channels where you can actively contribute.",
+        "codeOfConduct": "This space relies on collective responsibility. Posting content that attracts unwanted legal attention or exposes members' real-world identities without consent is prohibited. We aspire to do no harm by practicing strict operational security. Intentionally leaking information violates our safety. We have a zero-tolerance policy for racism, sexism, and bigotry. Willfully spreading false information that endangers the group is grounds for removal."
+      }
+    },
+    {
+      "id": "video-meetings",
+      "label": "Video Meetings",
+      "supportText": "Synchronous video calls for remote face-to-face interaction.",
+      "sections": {
+        "corePrinciple": "We prioritize synchronous connection to read facial expressions without the barrier of travel, using this tool for weekly syncs and quick consensus checks that benefit from real-time debate before moving to a vote.",
+        "logisticsAdmin": "The host manages technical security via waiting rooms to prevent intrusion. Culturally, the focus is on maximizing the value of synchronous time. Norms include muting when not speaking, using the \"Raise Hand\" feature to queue, and utilizing the chat box for non-interruptive side comments. Distractions should be minimized to ensure the meeting stays on track and ends on time.",
+        "codeOfConduct": "We have a zero-tolerance policy for racism, sexism, and bigotry, whether spoken or shared in the chat. We aspire to do no harm. \"Zoom-bombing\" or broadcasting graphic content is prohibited. Willfully spreading obviously false information will not be tolerated. Do not discuss sensitive data that could attract unwanted legal scrutiny if the recording were subpoenaed. The Host will remove anyone threatening the group's safety."
+      }
+    },
+    {
+      "id": "loomio",
+      "label": "Loomio",
+      "supportText": "Decision-making platform for proposals, voting, and consensus.",
+      "sections": {
+        "corePrinciple": "We focus specifically on decision-making, separating \"chatter\" from \"signal\" to count every voice. This is our \"Ballot Box\" layer, used strictly for formal proposals, board elections, and consensus checks, distinct from discussion layers.",
+        "logisticsAdmin": "Groups are invite-only to protect voting integrity. Polls have set deadlines. Norms dictate that users must read the full proposal before voting, use the \"Abstain\" option if uninformed, and provide constructive feedback for any \"No\" vote.",
+        "codeOfConduct": "Our core unity is tied to collective action. Therefore, any attempt to fraudulently manipulate votes violates our principles. We have zero tolerance for hate speech in proposal comments. Disagreement should be expressed through the voting tools, not through harmful attacks. Do not use proposals to provoke unwanted legal attention. Aspire to do no harm to the democratic process."
+      }
+    },
+    {
+      "id": "matrix-element",
+      "label": "Matrix / Element",
+      "supportText": "Decentralized, encrypted chat protocol for sovereignty and interoperability.",
+      "sections": {
+        "corePrinciple": "We value data sovereignty and federation, owning our infrastructure to ensure we cannot be deplatformed. This serves as our \"Sovereign Archive\" for internal governance and cross-org collaboration, replacing corporate tools for groups requiring total data ownership.",
+        "logisticsAdmin": "Infrastructure is self-hosted with users managing their own encryption keys. Bridges connect to other networks. Culturally, this is an asynchronous space, so users should not expect immediate replies. Norms include verifying your own devices to prevent encryption errors and using the \"Reply\" function heavily.",
+        "codeOfConduct": "Users must not post content that attracts unwanted legal scrutiny to the server or its operators. We share a core belief that the world can be improved by collective action, so we do not tolerate behavior that sabotages that goal. We have zero tolerance for hate speech or harassment. Aspire to do no harm. While we value free expression, doxxing or targeted abuse will result in a ban from our room."
+      }
+    },
+    {
+      "id": "github-gitlab",
+      "label": "GitHub / GitLab",
+      "supportText": "Version control platforms for code collaboration and issue tracking.",
+      "sections": {
+        "corePrinciple": "We view \"code as law,\" believing the history of a decision is as important as the outcome. This platform serves as our \"System of Record\" for code changes, text-based bylaw amendments, and technical governance where an immutable audit trail is required.",
+        "logisticsAdmin": "Access is strictly managed via repository permissions and branch protection rules. History is immutable. Culturally, users are expected to write descriptive commit messages and use Pull Request templates to explain the \"why.\" Reviews should be professional and constructive, focusing on the technical merits rather than the personality of the author.",
+        "codeOfConduct": "Avoid rude, inconsiderate, or harmful behaviors in code reviews. We do not tolerate the exposure of private identities or the insertion of malicious code. We aspire to operate within these principles and maintain this repo as a space where hate isn't welcome. Do not upload proprietary IP or content that attracts unwanted legal attention to the project. Willfully spreading false technical information to sabotage the project is grounds for a ban."
+      }
+    },
+    {
+      "id": "discord",
+      "label": "Discord",
+      "supportText": "Real-time chat and voice server organized by topic channels.",
+      "sections": {
+        "corePrinciple": "We create a vibrant, persistent community hub for presence and social connection. It functions as the \"Community Living Room\" for general socializing and working group coordination, feeding into more formal tools like Loomio for decisions.",
+        "logisticsAdmin": "Access is hierarchically managed via Roles and server ownership is tied to an organizational account. Bots automate logging. Norms dictate that users check Pinned Messages before asking questions, keep topics in their designated channels, and use \"Threads\" for deep dives. Voice channels are casual drop-in spaces.",
+        "codeOfConduct": "We have a zero-tolerance policy for racism, sexism, and bigotry. We aspire to do no harm. Avoid rude or inconsiderate behavior. Do not post content that attracts unwanted legal attention to the server, such as pirated material or illicit threats. Exposing private identities is prohibited. Maintaining a space where hate isn't welcome is everyone's responsibility, not just moderators'."
+      }
+    },
+    {
+      "id": "email-distribution-list",
+      "label": "Email Distribution List",
+      "supportText": "Asynchronous announcements and formal threading via email.",
+      "sections": {
+        "corePrinciple": "We prioritize universality and reliability, using the lowest common denominator tool to ensure everyone is included. This functions as our \"Broadcast\" layer for official announcements and legal notices, ensuring members off chat apps still receive critical information.",
+        "logisticsAdmin": "Lists are split into \"Announce\" and \"Discuss.\" Admins approve subscriptions manually. Culturally, users are expected to respect the inbox. Reply directly to the sender for personal matters, avoid \"Reply All\" storms, update the Subject Line if the topic shifts, and format emails clearly.",
+        "codeOfConduct": "We aspire to do no harm in our communications. Using the list to spread obviously false information, racist tropes, or to intentionally target members for harassment is prohibited. Do not use this list to distribute content that attracts unwanted legal attention to the organization. We don't need to see eye to eye, but rude behaviors that degrade our collective dialogue will result in moderation."
+      }
+    },
+    {
+      "id": "slack",
+      "label": "Slack",
+      "supportText": "Structured workplace chat for teams and organizations.",
+      "sections": {
+        "corePrinciple": "We focus on structured productivity, treating communication like a digital office to maximize output. This is our \"Operations\" layer used for daily project management and file sharing, distinct from the governance or social layers.",
+        "logisticsAdmin": "The workspace is paid to retain history. Admins provision accounts for staff and guests. Culturally, users should use public channels by default to share knowledge, strictly observe \"Do Not Disturb\" hours to respect work-life balance, and use \"Threads\" to prevent channel flooding.",
+        "codeOfConduct": "Intentionally harming members via bullying, sexual harassment, or retaliation is prohibited. We maintain a zero-tolerance policy for bigotry in both public channels and DMs. Aspire to be professional. Do not use company channels for content that attracts unwanted legal attention or liability. We believe collective action improves the world, and toxic behavior undermines that work."
+      }
+    },
+    {
+      "id": "whatsapp",
+      "label": "WhatsApp",
+      "supportText": "Ubiquitous mobile chat for quick, informal coordination.",
+      "sections": {
+        "corePrinciple": "We lower the barrier to entry, meeting people where they are with a tool that requires zero training. This acts as the \"Field\" layer for neighborhood pods, urgent mutual aid, specifically for logistics that require immediate mobile notifications.",
+        "logisticsAdmin": "Organized as a \"Community\" with nested groups. Safety relies on vetting members before adding them as phone numbers are exposed. Norms include strict \"Quiet Hours\", keeping the main feed clear for logistics, and moving social chatter to \"Off-topic\" groups.",
+        "codeOfConduct": "Harvesting members' phone numbers for harassment is a severe violation. Willfully spreading misleading information that endangers the community is grounds for removal. We aspire to do no harm. Racism, sexism, and abusive language are never acceptable. Do not post content that attracts unwanted legal attention. Maintaining a safe group is our collective responsibility."
+      }
+    },
+    {
+      "id": "discourse-forum",
+      "label": "Discourse (Forum)",
+      "supportText": "Long-form, threaded discussion board for deep asynchronous conversation.",
+      "sections": {
+        "corePrinciple": "We value depth and deliberation, moving complex discussions away from chat to ensure they are thoughtful. This functions as our \"Library\" layer for policy development and proposal shaping, where rough ideas are refined before going to a vote.",
+        "logisticsAdmin": "Accounts are tied to a membership database. Trust Levels unlock features automatically. Culturally, users are expected to search before posting, write descriptive titles, and cite sources. Emotional argumentation is discouraged in favor of logic. Off-topic replies are moved by moderators.",
+        "codeOfConduct": "We aspire to minimize avoidant strategies like content warnings, trusting members to engage with reality constructively. However, intentional harm, rude behavior, and personal attacks are prohibited. Zero tolerance for racism, sexism, and bigotry. Do not post content that attracts unwanted legal attention. Constructive disagreement is welcome. Willfully false information is not."
+      }
+    }
+  ]
+}
diff --git a/messages/en/create/customRule/conflictManagement.json b/messages/en/create/customRule/conflictManagement.json
new file mode 100644
index 0000000..5f467a5
--- /dev/null
+++ b/messages/en/create/customRule/conflictManagement.json
@@ -0,0 +1,305 @@
+{
+  "_comment": "Create flow — conflict management (Figma Flow — Compact Card Stack `20879:15979`)",
+  "page": {
+    "compactTitle": "How should conflicts be managed\nin your group?",
+    "compactDescriptionBefore": "You can also combine or ",
+    "compactDescriptionLinkLabel": "add",
+    "compactDescriptionAfter": " new approaches to the list",
+    "expandedTitle": "How should conflicts be managed in your group?",
+    "expandedDescription": "You can also combine or add new approaches to the list",
+    "seeAllLink": "See all conflict management approaches"
+  },
+  "confirmModal": {
+    "title": "Confirm selection",
+    "description": "Confirm to select this option.",
+    "nextButtonText": "Confirm"
+  },
+  "addApproach": {
+    "nextButtonText": "Add Approach"
+  },
+  "sectionHeadings": {
+    "corePrinciple": "Core Principle",
+    "applicableScope": "Applicable Scope",
+    "processProtocol": "Process Protocol",
+    "restorationFallbacks": "Restoration & Fallbacks"
+  },
+  "scopeAddButtonLabel": "Add Applicable Scope",
+  "methods": [
+    {
+      "id": "peer-mediation",
+      "label": "Peer Mediation",
+      "supportText": "Trained members within the organization mediate disputes among peers.",
+      "sections": {
+        "corePrinciple": "We democratize conflict skills. Instead of relying on professional outsiders, trained peers help their colleagues resolve disputes, reinforcing the idea that we take care of each other.",
+        "applicableScope": [
+          "Low-level friction",
+          "misunderstandings",
+          "and minor grievances between peers."
+        ],
+        "processProtocol": "A volunteer peer (who is not a manager) invites the disputants to a private chat. Using a simple script, they ask questions like 'Tell us your side,' 'Tell us what you need,' and 'What can you agree to?'. The peer keeps the conversation focused on future interactions rather than past grievances. The disputants retain full control over the resolution.",
+        "restorationFallbacks": "The goal is a verbal agreement to try a new way of interacting. If the peer mediator determines the issue is too complex or involves serious harassment, they are required to refer the case to professional Mediation or a Judicial Committee."
+      }
+    },
+    {
+      "id": "conflict-resolution-council",
+      "label": "Conflict Resolution Council",
+      "supportText": "Senior members with institutional knowledge provide guidance or decisions.",
+      "sections": {
+        "corePrinciple": "We rely on the wisdom of experienced members to guide us back to our values. This body acts as the 'keepers of the culture,' providing high-context advice to resolve friction.",
+        "applicableScope": [
+          "Smoldering cultural tensions or gray-area cases where the Code of Conduct isn't clearly violated but trust is eroding."
+        ],
+        "processProtocol": "Disputants submit a request to the standing Council, which reviews the submission and may interview witnesses to understand the cultural context. The Council deliberates privately, referencing the community's values and history, before issuing a formal 'Opinion' or recommendation. While the Council holds significant influence (approx. 50% 'weight'), their recommendation is not strictly binding; it relies on social pressure and respect for the elders to encourage adoption.",
+        "restorationFallbacks": "The artifact is a formal 'Council Opinion' that clarifies how community values apply to the situation. If the parties ignore this guidance, the Council may recommend formal disciplinary action or a community vote to enforce the standard."
+      }
+    },
+    {
+      "id": "facilitated-negotiation",
+      "label": "Facilitated Negotiation",
+      "supportText": "A neutral facilitator helps guide the negotiation process.",
+      "sections": {
+        "corePrinciple": "Neutral support helps parties navigate emotional barriers to reach their own agreement. We recognize that sometimes communication breaks down not because of the issue, but because of the dynamic between people.",
+        "applicableScope": [
+          "Heated interpersonal disputes where direct communication has failed but the parties are still willing to talk."
+        ],
+        "processProtocol": "A neutral facilitator joins the discussion to set strict ground rules, such as 'no interrupting' and 'speak from I'. The facilitator manages the emotional temperature while parties take turns sharing their perspectives. By reframing toxic language—turning accusations like 'You're a liar' into statements of impact like 'I feel untrusted'—the facilitator helps the disputants focus on the substantive issues. The parties themselves retain the power to co-create and finalize the solution.",
+        "restorationFallbacks": "The process concludes with a signed or verbal Memorandum of Understanding outlining the agreed-upon behaviors. If this fails to hold, the next step is often formal Mediation or Non-Binding Arbitration to bring in more structured guidance."
+      }
+    },
+    {
+      "id": "ad-hoc-arbitration",
+      "label": "Ad Hoc Arbitration",
+      "supportText": "Arbitrators are chosen specifically for a particular case.",
+      "sections": {
+        "corePrinciple": "We value speed and specific expertise. For technical or niche disputes, we appoint a temporary judge who knows the subject matter better than a general tribunal.",
+        "applicableScope": [
+          "Technical disputes (e.g.",
+          "code architecture)",
+          "artistic differences",
+          "or specific one-off grievances."
+        ],
+        "processProtocol": "Parties agree that they are deadlocked and mutually select a single expert they both trust to act as the arbitrator. They sign an agreement beforehand to abide by this person's decision, effectively handing over 100% of the decision power. Each side presents their technical arguments, and the arbitrator reviews the evidence to issue a final ruling on the specific issue.",
+        "restorationFallbacks": "The arbitrator's ruling is final and binding for that specific issue, allowing work to proceed. Importantly, this specific ruling does not create a binding precedent for future, unrelated conflicts."
+      }
+    },
+    {
+      "id": "conflict-workshops",
+      "label": "Conflict Workshops",
+      "supportText": "Structured sessions where parties collaboratively resolve disputes and improve future interactions.",
+      "sections": {
+        "corePrinciple": "We view conflict competence as a skill to be learned. By practicing in a low-stakes environment, we immunize the community against toxic fighting when high-stakes issues arise.",
+        "applicableScope": [
+          "Preventative care during 'peacetime' or as a mandatory reset when the community vibe feels toxic."
+        ],
+        "processProtocol": "A trainer assesses the community's conflict style and gathers the group for a structured session. Participants engage in role-playing exercises, such as 'The Angry Neighbor', to practice active listening and Non-Violent Communication (NVC). The group debriefs what worked and commits to using new tools. This is a capacity-building exercise where no binding decisions are made.",
+        "restorationFallbacks": "The outcome is increased capacity and a shared vocabulary for handling tension. While there is no ruling, a member's refusal to participate in mandatory workshops may be documented as a lack of commitment to the group's health."
+      }
+    },
+    {
+      "id": "supermajority-vote",
+      "label": "Supermajority Vote",
+      "supportText": "Members vote to resolve a dispute democratically.",
+      "sections": {
+        "corePrinciple": "We use the weight of the community to resolve binary impasses. When a decision must be made and consensus is impossible, a decisive vote allows the group to move on.",
+        "applicableScope": [
+          "Final deadlock on policy decisions or removal of a member after other methods have failed."
+        ],
+        "processProtocol": "The conflict is crystallized into a clear, binary proposal (e.g., 'Should we remove member X?'). A debate period allows arguments for and against to be presented. A vote is then taken, typically via secret ballot to protect relationships. For the decision to be binding, the 'Yes' votes must exceed a high threshold—usually 75% (or 2/3rds, depending on bylaws)—effectively transferring 100% of the decision power to the voting body.",
+        "restorationFallbacks": "This produces a binding, final decision. The minority is expected to 'disagree and commit' to the result. Continued resistance or sabotage after a vote is considered a violation of community norms and is often grounds for leaving the group."
+      }
+    },
+    {
+      "id": "interest-based-bargaining",
+      "label": "Interest-Based Bargaining",
+      "supportText": "Focuses on underlying interests rather than fixed positions to find win-win solutions.",
+      "sections": {
+        "corePrinciple": "We separate the people from the problem. By focusing on why someone wants something (interests) rather than what they demand (positions), we can often find 'win-win' scenarios.",
+        "applicableScope": [
+          "Resource allocation disputes",
+          "scheduling conflicts",
+          "or disagreements over project direction."
+        ],
+        "processProtocol": "Parties list their specific demands ('Positions') and then peel back the layers by asking 'Why do you want this?' for each one. This uncovers the underlying 'Interest'—for example, 'I want the 5pm slot' becomes 'I need to pick up my kids'. The parties identify shared interests and brainstorm solutions that satisfy these core needs. They retain full authority to accept or reject the final trade-off.",
+        "restorationFallbacks": "The result is a trade-off agreement or contract. If parties remain stuck in their positions and cannot find a win-win, the process typically escalates to facilitated negotiation or mediation."
+      }
+    },
+    {
+      "id": "restorative-practices",
+      "label": "Restorative Practices",
+      "supportText": "Dialogue-focused methods for understanding and repairing harm.",
+      "sections": {
+        "corePrinciple": "We view conflict as a wound in the community, not a legal infraction. Our goal is accountability and repair: the offender must understand the impact of their actions and work to make it right.",
+        "applicableScope": [
+          "Harassment",
+          "Code of Conduct violations",
+          "or interpersonal harm where the offender admits responsibility."
+        ],
+        "processProtocol": "A facilitator holds pre-conference meetings with both parties to ensure readiness. A joint dialogue is then convened where the harmed party shares the impact of the actions ('When you did X, I felt Y'). The offender practices deep listening and reflects back what they heard without defending themselves. Together, they co-create a 'Repair Plan' to address the harm, retaining ownership of the solution.",
+        "restorationFallbacks": "The artifact is a signed 'Repair Plan' detailing specific actions (apologies, education, community service). If the offender refuses to follow through on the plan they helped create, the process converts to a punitive one, such as a Tribunal hearing or expulsion."
+      }
+    },
+    {
+      "id": "mediation",
+      "label": "Mediation",
+      "supportText": "A neutral third party assists parties in reaching a voluntary agreement.",
+      "sections": {
+        "corePrinciple": "We empower disputants to solve their own problems with structure. A mediator manages the process, but the parties own the outcome, ensuring they actually buy into the solution.",
+        "applicableScope": [
+          "Deep-seated interpersonal conflicts",
+          "co-founder disputes",
+          "or recurring friction between working groups."
+        ],
+        "processProtocol": "The mediator conducts separate 'intake' calls to hear each side's story privately before convening a joint session. During the session, the mediator uses 'looping' to ensure parties feel heard and may call a 'Caucus' (private meeting) if emotions run high. The mediator guides the parties to generate options and stress-test them, but the final decision power remains 0% with the mediator and 100% with the parties.",
+        "restorationFallbacks": "The outcome is a written Mediation Agreement. If mediation fails due to impasse, the parties must explicitly decide whether to 'agree to disagree' and live with the conflict, or escalate to Binding Arbitration to force a resolution."
+      }
+    },
+    {
+      "id": "circle-processes",
+      "label": "Circle Processes",
+      "supportText": "A structured format for open dialogue with equal input from all involved.",
+      "sections": {
+        "corePrinciple": "We prioritize equality and connection. By sitting in a circle and using a talking piece, we dismantle hierarchies and force deep listening, allowing the emotional truth of a conflict to surface.",
+        "applicableScope": [
+          "Community-wide trauma",
+          "grief processing",
+          "or when a conflict has rippled out to affect the whole group."
+        ],
+        "processProtocol": "Participants gather in a circle with a centerpiece, and a 'Keeper' opens the session with a poem or quote to set the tone. A talking piece is introduced, granting the holder sole permission to speak. The group moves through rounds answering specific questions like 'What is the hardest part of this for you?', ensuring every voice is heard equally. No decision is forced; the power resides in the collective understanding generated by the circle.",
+        "restorationFallbacks": "The goal is a collective sense of understanding or a 'Group Covenant' describing how we want to be together. If specific harm is identified that requires repair, the circle may spin off into a separate Restorative Justice process."
+      }
+    },
+    {
+      "id": "judicial-committees",
+      "label": "Judicial Committees",
+      "supportText": "A standing committee responsible for adjudicating disputes.",
+      "sections": {
+        "corePrinciple": "We ensure consistency and due process. By having a standing body, we remove bias and ensure that every conflict is judged against the same set of bylaws.",
+        "applicableScope": [
+          "Interpretation of bylaws",
+          "contested elections",
+          "or allegations of abuse of power by leadership."
+        ],
+        "processProtocol": "A formal complaint is filed with the Committee, which is composed of elected or appointed members serving fixed terms. The Committee holds a formal hearing where both sides present evidence and call witnesses. The proceedings are recorded. The Committee then deliberates in closed session to determine if the rules were violated, holding 100% of the decision power.",
+        "restorationFallbacks": "The Committee issues a written 'Judgment' that is binding. This may include penalties like censure, removal from office, or expulsion. The decision is recorded in the organization's case law to guide future rulings."
+      }
+    },
+    {
+      "id": "managerial-decision",
+      "label": "Managerial Decision",
+      "supportText": "A manager or leader makes a binding decision.",
+      "sections": {
+        "corePrinciple": "We prioritize efficiency and clear lines of authority. In a hierarchy, the person with responsibility for the outcome must have the authority to resolve the blockers.",
+        "applicableScope": [
+          "Operational disagreements",
+          "performance issues",
+          "or swift resolution of low-stakes conflicts."
+        ],
+        "processProtocol": "The manager hears both sides of the conflict (often in 1:1 meetings) and consults organizational policy. They then make a unilateral decision based on what is best for the business or the team's goals. The manager holds 100% of the decision power.",
+        "restorationFallbacks": "The decision is communicated as a directive. Compliance is mandatory as a condition of employment. Failure to comply is treated as insubordination."
+      }
+    },
+    {
+      "id": "internal-tribunal",
+      "label": "Internal Tribunal",
+      "supportText": "A formal hearing body within the organization.",
+      "sections": {
+        "corePrinciple": "We provide rigorous due process for the most serious accusations. To protect members from unjust expulsion, we simulate a legal trial to ensure high standards of evidence.",
+        "applicableScope": [
+          "High-stakes violations that could result in permanent expulsion",
+          "blacklisting",
+          "or significant financial penalty."
+        ],
+        "processProtocol": "A panel of judges (often distinct from the leadership team) is convened. A 'Prosecutor' presents the case against the accused, and a 'Defender' advocates for them. Formal rules of evidence apply. The Tribunal weighs the facts against the organization's 'Constitution' or supreme laws.",
+        "restorationFallbacks": "The Tribunal issues a Verdict. If guilty, the sentence is executed immediately. Appeals are only allowed on procedural grounds (e.g., if the Tribunal failed to follow its own rules), not on the facts of the case."
+      }
+    },
+    {
+      "id": "consensus-building",
+      "label": "Consensus Building",
+      "supportText": "Collaborative work to reach a resolution that all parties can agree upon.",
+      "sections": {
+        "corePrinciple": "We believe that sustainable solutions come from the parties themselves finding common ground. Unlike a top-down ruling, a consensus agreement ensures that all stakeholders feel heard and invested in the outcome.",
+        "applicableScope": [
+          "Best for complex",
+          "multi-stakeholder issues where relationships must be preserved and no single rule was broken."
+        ],
+        "processProtocol": "The process begins by convening all stakeholders in a shared space to establish shared goals and ground rules. Each party is invited to state their underlying needs rather than just their surface demands. The group then brainstorms multiple options for mutual gain without immediate judgment. Through dialogue, these options are refined until a single solution emerges that every stakeholder can support, maintaining full decision-making power within the group itself.",
+        "restorationFallbacks": "The result is a shared agreement ratified by all parties. If consensus cannot be reached, the group may define a specific fallback mechanism, such as escalating to a Supermajority Vote (requiring 75% agreement) or bringing in an external Facilitator to unblock the dialogue."
+      }
+    },
+    {
+      "id": "binding-arbitration",
+      "label": "Binding Arbitration",
+      "supportText": "An external arbitrator makes a binding decision.",
+      "sections": {
+        "corePrinciple": "We need finality and legal certainty. By outsourcing the decision to a professional judge, we remove internal bias and ensure the ruling will hold up in court.",
+        "applicableScope": [
+          "Commercial disputes",
+          "contract breaches between entities",
+          "or employment termination disputes."
+        ],
+        "processProtocol": "The organization contracts a professional arbitration firm. The process follows strict legal procedures similar to a court trial but is private. The arbitrator hears evidence and legal arguments from both sides' lawyers. The arbitrator holds 100% of the decision power.",
+        "restorationFallbacks": "The award is final, binding, and enforceable in real-world courts. There is typically no right of appeal. This provides total closure to the dispute."
+      }
+    },
+    {
+      "id": "non-binding-arbitration",
+      "label": "Non-Binding Arbitration",
+      "supportText": "An arbitrator gives a recommendation that is not binding.",
+      "sections": {
+        "corePrinciple": "We want an expert opinion to break a deadlock, but we aren't ready to hand over full control. A neutral expert's 'advisory opinion' can often shame or persuade parties into agreement.",
+        "applicableScope": [
+          "Complex technical or valuation disputes where parties need a reality check on their positions."
+        ],
+        "processProtocol": "Similar to binding arbitration, a neutral expert hears the case. However, instead of a ruling, they issue a 'Recommendation' explaining how a court would likely rule or what is fair. The parties then take this recommendation back to the negotiation table.",
+        "restorationFallbacks": "The parties use the recommendation as a baseline for a final settlement. If they still cannot agree, they preserve the right to go to court or binding arbitration."
+      }
+    },
+    {
+      "id": "binding-contracts",
+      "label": "Binding Contracts",
+      "supportText": "Legal agreements that define resolution methods.",
+      "sections": {
+        "corePrinciple": "We prioritize predictability and liability protection. By defining the rules of engagement in advance, we prevent ambiguity when things go wrong.",
+        "applicableScope": [
+          "Vendor relationships",
+          "employment terms",
+          "intellectual property ownership",
+          "and liability waivers."
+        ],
+        "processProtocol": "The process happens before conflict arises. Parties negotiate terms (using lawyers if necessary) and sign a document. When a conflict occurs, the contract is referenced. If the contract says 'X happens,' then X happens automatically without further debate.",
+        "restorationFallbacks": "The contract itself is the resolution mechanism. Breach of contract triggers specific penalties defined in the document (e.g., termination, fines)."
+      }
+    },
+    {
+      "id": "lottery-sortition",
+      "label": "Lottery/Sortition",
+      "supportText": "Random selection used to resolve low-stakes disputes or select juries.",
+      "sections": {
+        "corePrinciple": "We believe that when two valid options exist and neither is 'wrong,' a random decision is the fairest way to break the tie.",
+        "applicableScope": [
+          "Allocating scarce resources (e.g.",
+          "who gets the office)",
+          "scheduling conflicts",
+          "or low-stakes ties."
+        ],
+        "processProtocol": "The group agrees that the issue is not worth further debate and commits to a random method (coin flip, drawing straws, RNG). The random event occurs, and the result is accepted immediately. This transfers 100% of the decision power to chance.",
+        "restorationFallbacks": "The resolution is immediate. Because the process is seen as inherently unbiased, no repair is usually needed. Refusal to accept the result is treated as acting in bad faith."
+      }
+    },
+    {
+      "id": "rotational-judging",
+      "label": "Rotational Judging",
+      "supportText": "A rotating set of members is assigned to handle conflicts.",
+      "sections": {
+        "corePrinciple": "We distribute the power of judgment. By taking turns being the 'judge,' members learn empathy for the difficulty of making decisions and prevent a permanent ruling class.",
+        "applicableScope": [
+          "Minor Code of Conduct infractions",
+          "disputes over shared space or noise."
+        ],
+        "processProtocol": "A 'Jury Duty' roster is created including all eligible members. When a dispute arises, the next three members on the list are summoned to hear the case briefly. They issue a ruling based on common sense and community norms, holding 100% of the decision power for that specific instance. Afterward, they return to the pool.",
+        "restorationFallbacks": "The ruling is binding for that instance. This builds community capacity for governance. Repeated poor judgments by rotational judges may trigger a review of the 'Jury Duty' training process."
+      }
+    }
+  ]
+}
diff --git a/messages/en/create/coreValues.json b/messages/en/create/customRule/coreValues.json
similarity index 100%
rename from messages/en/create/coreValues.json
rename to messages/en/create/customRule/coreValues.json
diff --git a/messages/en/create/customRule/decisionApproaches.json b/messages/en/create/customRule/decisionApproaches.json
new file mode 100644
index 0000000..6e755b0
--- /dev/null
+++ b/messages/en/create/customRule/decisionApproaches.json
@@ -0,0 +1,535 @@
+{
+  "_comment": "Create flow — decision approaches (Figma Flow — Right Rail `20523:23509`)",
+  "sidebar": {
+    "title": "How should this community make difficult decisions?",
+    "descriptionBefore": "Select as many as you need to describe how your group makes decisions. You can also ",
+    "descriptionLinkLabel": "add",
+    "descriptionAfter": " new decision making approaches or interact with the categories below to filter."
+  },
+  "messageBox": {
+    "title": "Consider defining approaches to steward key resources:",
+    "items": [
+      {
+        "id": "amend",
+        "label": "Amend your CommunityRule"
+      },
+      {
+        "id": "finances",
+        "label": "Steward finances"
+      },
+      {
+        "id": "project",
+        "label": "Project level decisions"
+      },
+      {
+        "id": "discipline",
+        "label": "Discipline and member termination"
+      }
+    ]
+  },
+  "cardStack": {
+    "toggleSeeAll": "See all decision approaches",
+    "toggleShowLess": "Show less"
+  },
+  "confirmModal": {
+    "title": "Confirm selection",
+    "description": "Confirm to select this option.",
+    "nextButtonText": "Confirm"
+  },
+  "addApproach": {
+    "nextButtonText": "Add Approach"
+  },
+  "sectionHeadings": {
+    "corePrinciple": "Core Principle",
+    "applicableScope": "Applicable Scope",
+    "stepByStepInstructions": "Step-by-Step Instructions",
+    "consensusLevel": "Consensus Level",
+    "objectionsDeadlocks": "Objections & Deadlocks"
+  },
+  "scopeAddButtonLabel": "Add Applicable Scope",
+  "methods": [
+    {
+      "id": "lazy-consensus",
+      "label": "Lazy Consensus",
+      "supportText": "A decision is assumed approved unless objections are raised within a specified timeframe.",
+      "sections": {
+        "corePrinciple": "We prioritize momentum and trust over bureaucracy. By assuming good faith, we avoid bottlenecks; silence is interpreted as consent to keep the work moving.",
+        "applicableScope": [
+          "Daily Operations",
+          "Minor Expenditures"
+        ],
+        "consensusLevel": 100,
+        "stepByStepInstructions": "Post your proposal to the relevant channel with a specific deadline, such as 'Merging in 72 hours.' If the deadline passes without any objections, you are authorized to proceed. Explicit support is welcome but not required.",
+        "objectionsDeadlocks": "Any member can pause the process by raising a 'Block' or 'Concern' before the deadline. The proposer is then required to pause execution and engage in a dialogue to resolve the concern. If the disagreement cannot be resolved asynchronously, the proposal is escalated to a synchronous meeting or a higher governance tier for a final decision."
+      }
+    },
+    {
+      "id": "do-ocracy",
+      "label": "Do-ocracy",
+      "supportText": "Decisions are made by those who take initiative and carry out the work.",
+      "sections": {
+        "corePrinciple": "Action is valued over permission. We believe that decision-making power should reside with the individuals who are actually doing the work.",
+        "applicableScope": [
+          "Implementation Details",
+          "Volunteer Tasks",
+          "Low-Risk Experiments"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "Identify a task that needs to be done and simply start doing it. While it is good practice to announce your intentions to avoid duplicated effort, you do not need to wait for approval. Report back once the task is complete.",
+        "objectionsDeadlocks": "Objections are handled through a retroactive review process (Retrospective). If an action is deemed harmful after the fact, the group discusses it to establish new safety guidelines for the future. In extreme cases, the action may be reversed, but the doer is rarely punished for acting in good faith."
+      }
+    },
+    {
+      "id": "consensus-decision-making",
+      "label": "Consensus Decision-Making",
+      "supportText": "All members must agree. Best for important decisions in small groups. Does not work well for low stakes decsions. ",
+      "sections": {
+        "corePrinciple": "We strive for deep unity and alignment. We only move forward when every single member can live with the decision, ensuring no minority voice is ignored.",
+        "applicableScope": [
+          "Core Values",
+          "Constitutional Changes",
+          "High-Stakes Strategy"
+        ],
+        "consensusLevel": 100,
+        "stepByStepInstructions": "The facilitator presents the proposal and opens the floor for clarifying questions. After a period of discussion and modification to address concerns, the facilitator calls for consensus by asking, 'Does anyone block?' If no blocks are raised, the decision is adopted.",
+        "objectionsDeadlocks": "A 'Block' acts as a veto and stops the proposal entirely. Blocks must be justified based on the group's core principles, not personal preference. If the group cannot resolve the block through modification, the proposal is shelved, and the status quo remains in effect until a new solution is proposed."
+      }
+    },
+    {
+      "id": "rotational-leadership",
+      "label": "Rotational Leadership",
+      "supportText": "Decision-making responsibilities rotate among members.",
+      "sections": {
+        "corePrinciple": "We share the burden of leadership to build skills across the group and prevent power from accumulating in the hands of a single individual.",
+        "applicableScope": [
+          "Facilitation",
+          "Meeting Chair",
+          "Administrative Roles"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "The group defines the role and a set term length, such as one month. A roster of eligible members is created, and at the end of each term, the responsibilities automatically pass to the next person on the list without a vote.",
+        "objectionsDeadlocks": "If a selected member is unable to fulfill their term due to capacity, they are responsible for finding a substitute to swap shifts with them. If a member is deemed unfit by the group, a special governance meeting is called to skip their turn or remove them from the roster."
+      }
+    },
+    {
+      "id": "modified-consensus",
+      "label": "Modified Consensus",
+      "supportText": "Attempts to reach full agreement first, but falls back to voting if consensus isn’t possible.",
+      "sections": {
+        "corePrinciple": "We prefer unanimous agreement but refuse to be paralyzed by it. If full consensus cannot be reached, we have a fallback mechanism to ensure progress.",
+        "applicableScope": [
+          "General Governance",
+          "Policy Changes"
+        ],
+        "consensusLevel": 100,
+        "stepByStepInstructions": "The group first attempts to reach standard consensus. If consensus is blocked after a set number of attempts or a specific time period, the proposal moves to a vote. This fallback vote requires a Supermajority to pass.",
+        "objectionsDeadlocks": "When a deadlock occurs in the consensus phase, the process shifts to a Supermajority vote (e.g., 75%) to resolve it. The dissenting minority's views are explicitly recorded in the official minutes to ensure their perspective is preserved, even though the decision proceeds against their wishes."
+      }
+    },
+    {
+      "id": "consensus-seeking-with-delegates",
+      "label": "Consensus Seeking with Delegates",
+      "supportText": "Members provide input, and delegates refine decisions to seek broad agreement.",
+      "sections": {
+        "corePrinciple": "We scale our decision-making by using representation. Small, trusted groups can deliberate more effectively than large crowds.",
+        "applicableScope": [
+          "Federated Networks",
+          "Large Co-ops"
+        ],
+        "consensusLevel": 100,
+        "stepByStepInstructions": "The general membership discusses the issue in small pods and elects a delegate to represent their views. These delegates then meet in a circle to deliberate and reach consensus on a final decision on behalf of their pods.",
+        "objectionsDeadlocks": "If delegates cannot reach agreement, they must return to their home pods to explain the impasse and receive updated instructions. If a delegate repeatedly fails to represent their pod's will, the pod may recall them and elect a new representative to restart the negotiation."
+      }
+    },
+    {
+      "id": "sociocracy",
+      "label": "Sociocracy",
+      "supportText": "Decisions are made in small, interconnected circles with feedback loops connecting the organization.",
+      "sections": {
+        "corePrinciple": "We govern by dynamic consent. No valid objection is ignored, but no one can stop a decision without a reasoned argument explaining how it harms our aim.",
+        "applicableScope": [
+          "Organizational Structure",
+          "Policy Making"
+        ],
+        "consensusLevel": 100,
+        "stepByStepInstructions": "After a proposal is presented and clarifying questions are answered, the group does a 'reaction round' to share feelings. This is followed by a 'consent round' where the facilitator asks if anyone has a paramount objection. If none exist, the proposal is adopted.",
+        "objectionsDeadlocks": "An objection is only valid if it is 'Paramount'—meaning the objector argues that the proposal interferes with the group's ability to achieve its aim. The group is then obligated to modify the proposal to resolve the objection. If the objection cannot be integrated, the proposal is rejected."
+      }
+    },
+    {
+      "id": "supermajority-rule",
+      "label": "Supermajority Rule",
+      "supportText": "A higher threshold (e.g., 2/3 or 3/4) must be met for a decision to pass. Can be a great fallback for when consensus fails.",
+      "sections": {
+        "corePrinciple": "Broad agreement is necessary for significant changes. We require more than a simple majority to prevent the 'tyranny of the 51%' from dominating the minority.",
+        "applicableScope": [
+          "Bylaw Amendments",
+          "Removing Members"
+        ],
+        "consensusLevel": 67,
+        "stepByStepInstructions": "The proposal is debated until the final text is locked. A vote is then taken, and if the number of 'Yeas' exceeds the pre-set threshold (usually 67% or 75%), the motion passes.",
+        "objectionsDeadlocks": "If the vote achieves a majority but fails to reach the Supermajority threshold, the motion fails and the status quo is maintained. This ensures that the constitution or bylaws remain stable and are not changed without overwhelming support."
+      }
+    },
+    {
+      "id": "ranked-choice-voting",
+      "label": "Ranked Choice Voting",
+      "supportText": "Members rank options by preference, and votes are redistributed until one option has a majority.",
+      "sections": {
+        "corePrinciple": "We seek to maximize overall preference. We want the option that the broadest number of people support, rather than just the one with the loudest base.",
+        "applicableScope": [
+          "Elections",
+          "Multi-Option Selection"
+        ],
+        "consensusLevel": 51,
+        "stepByStepInstructions": "Voters rank all options by preference (1st, 2nd, 3rd). If no option wins a majority of 1st choices, the lowest-ranked option is eliminated, and their votes are redistributed to the voters' second choices. This continues until a winner emerges.",
+        "objectionsDeadlocks": "In the extremely rare event of a mathematical tie in the final round, the winner is decided by looking at which candidate had the most First Choice votes in the initial round. If that is also tied, a random selection method (like a coin toss) is used as the final tie-breaker."
+      }
+    },
+    {
+      "id": "range-voting",
+      "label": "Range Voting",
+      "supportText": "Members score each option, and the option with the highest total or average score wins.",
+      "sections": {
+        "corePrinciple": "We want to capture the nuance of opinion. By measuring the intensity of preference, we can identify options that are broadly acceptable rather than polarizing.",
+        "applicableScope": [
+          "Prioritization",
+          "Budget Allocation"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "Voters assign a score to each option (e.g., from 0 to 10). The scores for each option are summed up or averaged, and the option with the highest total score is selected as the winner.",
+        "objectionsDeadlocks": "If two options receive the exact same total score, the tie is broken by selecting the option that received the highest number of perfect scores (e.g., the most '10s'). This prioritizes the option that generates the most enthusiastic support."
+      }
+    },
+    {
+      "id": "majority-rule",
+      "label": "Majority Rule",
+      "supportText": "A decision is approved if it receives more than 50% of the votes.",
+      "sections": {
+        "corePrinciple": "We value efficiency and equality. Every member's vote counts equally, and we accept that the side with the most votes wins.",
+        "applicableScope": [
+          "General Elections",
+          "Low-Risk Referendums"
+        ],
+        "consensusLevel": 51,
+        "stepByStepInstructions": "After a period of debate, a motion is made to 'call the question.' A simple up/down vote is taken, and if more than 50% of the members vote in favor, the decision is approved.",
+        "objectionsDeadlocks": "In the event of a 50/50 tie, the motion fails by default, and the status quo prevails. Alternatively, a designated Chairperson may cast a tie-breaking vote if this power was granted in the bylaws."
+      }
+    },
+    {
+      "id": "approval-voting",
+      "label": "Approval Voting",
+      "supportText": "Members vote for all options they find acceptable; the option with the most approvals wins.",
+      "sections": {
+        "corePrinciple": "We focus on satisfaction and flexibility. Instead of picking just one favorite, members identify all the options they would be willing to accept.",
+        "applicableScope": [
+          "Scheduling",
+          "Selecting Venues",
+          "Shortlisting"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "All options are presented to the group. Voters select every option they approve of or can live with. The option that receives the most checks is declared the winner.",
+        "objectionsDeadlocks": "Ties are frequent in Approval Voting. If a tie occurs, the group holds a runoff vote featuring only the tied options. If the runoff is also tied, the decision may be made by random selection."
+      }
+    },
+    {
+      "id": "weighted-voting",
+      "label": "Weighted Voting",
+      "supportText": "Votes carry different weights based on criteria like financial contribution or seniority.",
+      "sections": {
+        "corePrinciple": "We recognize stakeholder equity. Those who have invested more risk, money, or time should have a proportionally greater say in the outcome.",
+        "applicableScope": [
+          "Financial Decisions (Condos",
+          "DAOs)"
+        ],
+        "consensusLevel": 51,
+        "stepByStepInstructions": "Voting power is assigned to members based on specific criteria, such as tokens held or years active. When a vote is cast, it is multiplied by the member's weight, and the side with the majority of the weighted stake wins.",
+        "objectionsDeadlocks": "Disputes regarding vote weight must be resolved by auditing the underlying ledger (e.g., financial records or blockchain) before the vote proceeds. If the ledger is contested, the vote is postponed until an external audit is completed."
+      }
+    },
+    {
+      "id": "cumulative-voting",
+      "label": "Cumulative Voting",
+      "supportText": "Members distribute a set number of votes across one or more options, often to express intensity of preference.",
+      "sections": {
+        "corePrinciple": "We want to protect minority representation. Minority groups can pool their influence to ensure they elect at least one representative.",
+        "applicableScope": [
+          "Board Elections"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "Voters are given a number of votes equal to the open seats. They can distribute these votes however they wish, including stacking all of them on a single candidate. The candidates with the highest totals win.",
+        "objectionsDeadlocks": "Deadlocks are rare, but if two candidates tie for the final seat, a runoff election is held between just those two candidates. The voting pool remains the same, but voters only cast ballots for the specific seat in question."
+      }
+    },
+    {
+      "id": "quadratic-voting",
+      "label": "Quadratic Voting",
+      "supportText": "Members use credits to vote, with the cost increasing quadratically for multiple votes on the same option.",
+      "sections": {
+        "corePrinciple": "We measure how much you care, not just what you want. This system uses 'costly signaling' to allow members to express intense preference on specific issues.",
+        "applicableScope": [
+          "Resource Allocation",
+          "DAOs"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "Users are allocated a budget of 'Credits.' They can buy votes for an option, but the cost increases quadratically (e.g., 1 vote costs 1 credit, but 2 votes costs 4 credits). The option with the highest calculated support wins.",
+        "objectionsDeadlocks": "The primary risk is a 'Sybil Attack' (one person pretending to be multiple people to avoid the quadratic cost). Identity verification must be enforced strictly. If an attack is suspected, the vote is frozen pending a security review."
+      }
+    },
+    {
+      "id": "continuous-voting",
+      "label": "Continuous Voting",
+      "supportText": "Members can change their votes over time, with decisions finalized when a threshold is reached.",
+      "sections": {
+        "corePrinciple": "We believe governance should be fluid. Decisions shouldn't be locked in for years; support for a policy can be given or withdrawn at any time.",
+        "applicableScope": [
+          "DAOs",
+          "Policy Settings"
+        ],
+        "consensusLevel": 51,
+        "stepByStepInstructions": "Proposals remain open indefinitely. Members can stake their votes on them at any time. If a proposal maintains enough support to stay above the passing threshold for a set duration (e.g., 24 hours), it executes.",
+        "objectionsDeadlocks": "To prevent 'Flash Attacks' (sudden massive voting to pass a malicious proposal), a mandatory time delay or 'Grace Period' is enforced before execution. This gives dissenting members time to react or withdraw their assets ('Rage Quit') if they strongly disagree."
+      }
+    },
+    {
+      "id": "holacracy",
+      "label": "Holacracy",
+      "supportText": "Decision-making authority is distributed across self-organizing teams.",
+      "sections": {
+        "corePrinciple": "We distribute authority to roles, not people. This system focuses on rapid evolution through 'Integrative Decision Making' within self-organizing circles.",
+        "applicableScope": [
+          "Operational Management"
+        ],
+        "consensusLevel": 100,
+        "stepByStepInstructions": "A proposal is made to change a role or policy. The group tests valid objections, which must be based on data or safety. The proposer then integrates these objections into an amended proposal, which is adopted once no valid objections remain.",
+        "objectionsDeadlocks": "Objections must pass a strict validity test: 'Is this unsafe to try?' or 'Does this move us backward?' If an objector cannot prove the proposal is unsafe, the objection is discarded as a personal preference, and the proposal proceeds."
+      }
+    },
+    {
+      "id": "collaborative-platforms",
+      "label": "Collaborative Platforms",
+      "supportText": "Structured discussions on tools like Loomio or Polis are used to make group decisions.",
+      "sections": {
+        "corePrinciple": "We use technology to bridge time zones and enable asynchronous deliberation. This allows remote teams to participate fully without synchronous meetings.",
+        "applicableScope": [
+          "Remote Teams",
+          "Online Communities"
+        ],
+        "consensusLevel": 51,
+        "stepByStepInstructions": "Discussion happens asynchronously on a platform like Loomio or Polis. A poll is opened for a specific window of time, and the platform automatically closes the poll and tallies the results based on the pre-set settings.",
+        "objectionsDeadlocks": "If technical issues prevent participation, the administrator is empowered to extend the voting deadline by 24 hours. If engagement is too low to meet quorum, the vote is declared void and must be re-launched with better promotion."
+      }
+    },
+    {
+      "id": "deliberative-polling",
+      "label": "Deliberative Polling",
+      "supportText": "Members discuss and reflect on an issue before voting, informed by deliberation.",
+      "sections": {
+        "corePrinciple": "We value informed democracy over raw opinion. We believe that people make better decisions when they are provided with experts, data, and time to reflect.",
+        "applicableScope": [
+          "Civic Juries",
+          "Policy Research"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "A random sample of the population is selected. They are provided with briefing materials and access to experts. After a period of facilitated small-group discussion, they are polled to see how their informed opinions have shifted.",
+        "objectionsDeadlocks": "The result is usually advisory/informational. If the results are ambiguous or contradictory, the organizers may commission a second round of deliberation with a fresh sample to verify the findings."
+      }
+    },
+    {
+      "id": "investor-filled-board-seats",
+      "label": "Investor-Filled Board Seats",
+      "supportText": "Key decisions are made by a board with seats allocated to investors or stakeholders.",
+      "sections": {
+        "corePrinciple": "We operate on fiduciary duty. Since capital controls the direction of the organization, those who provide the funding have the right to steer the ship.",
+        "applicableScope": [
+          "Startups",
+          "For-Profits"
+        ],
+        "consensusLevel": 51,
+        "stepByStepInstructions": "Investors appoint directors to the board as a condition of their funding. The board meets quarterly to vote on strategic decisions, and these votes are binding on the CEO and the organization.",
+        "objectionsDeadlocks": "Deadlocks between Founder-Directors and Investor-Directors are resolved via the legal clauses in the Shareholder Agreement (e.g., specific veto rights or arbitration). If the conflict is irreparable, investors may force a sale of the company."
+      }
+    },
+    {
+      "id": "elected-board-of-directors",
+      "label": "Elected Board of Directors",
+      "supportText": "Members elect representatives to make decisions on their behalf.",
+      "sections": {
+        "corePrinciple": "We believe in representative democracy. It is inefficient for the entire membership to decide every detail, so we delegate authority to a trusted few.",
+        "applicableScope": [
+          "Nonprofits",
+          "Co-ops"
+        ],
+        "consensusLevel": 51,
+        "stepByStepInstructions": "The general membership votes annually to elect Directors. These Directors then meet regularly to make operational and strategic decisions. Members retain the power to recall Directors if they lose trust.",
+        "objectionsDeadlocks": "If the membership disagrees with a Board decision, they can launch a petition to trigger a Special General Meeting. At this meeting, members can vote to overturn the specific policy or, in extreme cases, recall the entire Board."
+      }
+    },
+    {
+      "id": "advisory-committees",
+      "label": "Advisory Committees",
+      "supportText": "Smaller groups provide recommendations, which the broader organization typically follows.",
+      "sections": {
+        "corePrinciple": "We value expertise without granting it absolute authority. These bodies provide specialized guidance to help leaders make better informed choices.",
+        "applicableScope": [
+          "Technical Review",
+          "Ethics Boards"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "The committee reviews a specific problem or proposal in depth. They issue a formal, non-binding report with recommendations. The final decision-maker then chooses whether to adopt or ignore this advice.",
+        "objectionsDeadlocks": "While the decision-maker can ignore the advice, doing so repeatedly may lead to the resignation of the committee members. To prevent this, the decision-maker is often required to write a formal response explaining why they chose to diverge from the recommendation."
+      }
+    },
+    {
+      "id": "delegated-decision-making",
+      "label": "Delegated Decision-Making",
+      "supportText": "Specific individuals or groups are entrusted with decision-making authority.",
+      "sections": {
+        "corePrinciple": "We operate on trust and speed. We explicitly empower individuals to own specific domains so the group doesn't become a bottleneck.",
+        "applicableScope": [
+          "Project Management",
+          "Sub-committees"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "The group explicitly grants authority to a specific person or role for a defined domain. That person makes decisions autonomously, and the group reviews the outcomes periodically rather than micromanaging the process.",
+        "objectionsDeadlocks": "If the delegate makes a decision the group dislikes, the group cannot retroactively undo it (unless unsafe). Instead, the remedy is to revoke the delegation for future decisions or assign the role to a different person."
+      }
+    },
+    {
+      "id": "executive-committees",
+      "label": "Executive Committees",
+      "supportText": "A subset of leaders or senior members makes critical decisions.",
+      "sections": {
+        "corePrinciple": "We need agility for crisis management. A small, high-context group can react faster and handle sensitive information better than a large board.",
+        "applicableScope": [
+          "Emergencies",
+          "Confidential HR"
+        ],
+        "consensusLevel": 51,
+        "stepByStepInstructions": "The full board delegates specific powers to a smaller Executive Committee. This committee meets frequently to handle urgent matters and reports their actions back to the full board for ratification.",
+        "objectionsDeadlocks": "The Executive Committee's power is limited by the bylaws. If they overstep their authority, the Full Board can vote to annul their decision. Persistent overreach typically results in the dissolution or restructuring of the committee."
+      }
+    },
+    {
+      "id": "first-past-the-post",
+      "label": "First Past the Post",
+      "supportText": "The option with the most votes wins, regardless of whether it achieves a majority.",
+      "sections": {
+        "corePrinciple": "We prioritize simplicity. The goal is to identify a clear winner quickly, even if they don't have the support of the majority.",
+        "applicableScope": [
+          "Simple Elections"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "Voters cast a single vote for one option. All votes are counted, and the candidate with the highest number of votes wins, regardless of whether they achieved more than 50% of the total.",
+        "objectionsDeadlocks": "In the event of a tie for first place, a runoff election is held between the tied candidates. To prevent vote-splitting from distorting results in the future, the group may decide to switch to Ranked Choice Voting for subsequent elections."
+      }
+    },
+    {
+      "id": "lottery-sortition",
+      "label": "Lottery/Sortition",
+      "supportText": "Members or leaders are randomly selected to make decisions, promoting fairness.",
+      "sections": {
+        "corePrinciple": "We seek fairness and anti-corruption. By removing ego and campaigning from the process, we ensure that decisions are made by a truly representative sample.",
+        "applicableScope": [
+          "Juries",
+          "selecting speakers",
+          "assigning unpleasant tasks"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "A pool of eligible candidates is defined. A randomizer (like dice or an algorithm) is used to select a person or option. The result of the random draw is binding.",
+        "objectionsDeadlocks": "If a selected individual refuses to serve, the random draw is performed again immediately. If refusal becomes a pattern, the group must examine whether the incentives for the role are adequate."
+      }
+    },
+    {
+      "id": "proof-of-work",
+      "label": "Proof of Work",
+      "supportText": "Decision weight is tied to demonstrable effort or contributions, common in blockchain systems.",
+      "sections": {
+        "corePrinciple": "We require skin in the game. Influence should match effort, so those who contribute the most resources or labor have the right to decide.",
+        "applicableScope": [
+          "Crypto",
+          "Meritocratic Communities"
+        ],
+        "consensusLevel": 51,
+        "stepByStepInstructions": "Participants perform a verifiable task or contribute computational power. Once the work is verified, they earn the right to append a block or make a decision, with the longest chain of work becoming the truth.",
+        "objectionsDeadlocks": "Disagreements result in a 'Fork,' where the community splits into two separate groups, each following a different chain of truth. This is the ultimate deadlock breaker: the groups simply separate and go their own ways."
+      }
+    },
+    {
+      "id": "random-choice",
+      "label": "Random Choice",
+      "supportText": "Decisions are made by chance, such as a coin toss or drawing lots, to avoid bias.",
+      "sections": {
+        "corePrinciple": "We need to break paralysis. When options are equal and the stakes are low, spending time debating is wasteful.",
+        "applicableScope": [
+          "Low stakes ties",
+          "Restaurant choice"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "When the group is deadlocked on trivial options, simply flip a coin or draw straws. The group agrees beforehand to immediately obey the result of the chance event.",
+        "objectionsDeadlocks": "Refusal to accept the coin flip is considered bad faith. Since this method is only used for low-stakes issues, persistent arguing after the flip is grounds for a conduct warning."
+      }
+    },
+    {
+      "id": "algorithm-driven-decisions",
+      "label": "Algorithm-Driven Decisions",
+      "supportText": "Automated systems analyze data and propose or enforce decisions.",
+      "sections": {
+        "corePrinciple": "We value objectivity. We prefer 'rules over rulers,' relying on pre-agreed logic to distribute resources rather than human bias.",
+        "applicableScope": [
+          "Budget distribution",
+          "Scheduling"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "The group agrees on a set of rules or code. Data is input into the system, and the algorithm processes it to produce an output. The group accepts this output as the final decision.",
+        "objectionsDeadlocks": "If the algorithm produces a clearly erroneous result (a 'bug'), the group can vote to suspend the automation and manually override the decision. A technical review is then triggered to patch the code before it is used again."
+      }
+    },
+    {
+      "id": "autocratic-decision-making",
+      "label": "Autocratic Decision-Making",
+      "supportText": "A single leader or authority makes all decisions without group input.",
+      "sections": {
+        "corePrinciple": "We prioritize clarity and speed above all else. A single vision allows for rapid execution without the drag of committee meetings.",
+        "applicableScope": [
+          "Dictatorships",
+          "Owner-operated small biz",
+          "Emergencies"
+        ],
+        "consensusLevel": 0,
+        "stepByStepInstructions": "The designated leader analyzes the situation and makes a unilateral decision. They issue a command, and the group executes it without debate.",
+        "objectionsDeadlocks": "There is no formal appeal process. The only recourse for disagreement is to leave the organization ('voting with your feet'). Mass resignation is the only effective check on the leader's power."
+      }
+    },
+    {
+      "id": "hierarchical-decision-making",
+      "label": "Hierarchical Decision-Making",
+      "supportText": "Decisions are made at different levels of an organizational structure, with authority increasing at higher levels.",
+      "sections": {
+        "corePrinciple": "We use a chain of command to manage complexity. Decisions are made at the appropriate level of the organization to ensure efficiency.",
+        "applicableScope": [
+          "Military",
+          "Corporations"
+        ],
+        "stepByStepInstructions": "An employee formulates a proposal and submits it to their manager. The manager reviews it and either approves, denies, or escalates it to the next level of authority if it is above their pay grade.",
+        "objectionsDeadlocks": "If an employee believes their manager is blocking a decision unfairly, they may appeal to the 'skip-level' manager (their boss's boss) or an Ombudsman. This open-door policy serves as the check against bottlenecking."
+      }
+    },
+    {
+      "id": "negotiated-decisions",
+      "label": "Negotiated Decisions",
+      "supportText": "Stakeholders or parties discuss and negotiate until they reach an agreement.",
+      "sections": {
+        "corePrinciple": "We arrive at decisions through compromise. Parties with different interests meet in the middle to find a mutually acceptable agreement.",
+        "applicableScope": [
+          "Treaties",
+          "Partnerships",
+          "Salary"
+        ],
+        "consensusLevel": 100,
+        "stepByStepInstructions": "Each party states their initial position. Through a series of discussions, trade-offs are proposed and accepted. The process concludes when a final agreement is written and signed by all parties.",
+        "objectionsDeadlocks": "If negotiations stall, the parties may agree to bring in a neutral third-party mediator. If mediation fails, the negotiation is declared dead, and the parties return to their pre-negotiation status (BATNA - Best Alternative to a Negotiated Agreement)."
+      }
+    }
+  ]
+}
diff --git a/messages/en/create/customRule/membership.json b/messages/en/create/customRule/membership.json
new file mode 100644
index 0000000..253b2db
--- /dev/null
+++ b/messages/en/create/customRule/membership.json
@@ -0,0 +1,217 @@
+{
+  "_comment": "Create flow — membership / how members join (compact card stack)",
+  "page": {
+    "compactTitle": "How do new members join\nand get connected?",
+    "compactDescriptionBefore": "You can select multiple methods for different needs or ",
+    "compactDescriptionLinkLabel": "add",
+    "compactDescriptionAfter": " your own",
+    "expandedTitle": "How should new members join and get connected?",
+    "expandedDescription": "You can select multiple methods for different needs or add your own",
+    "seeAllLink": "See all membership approaches"
+  },
+  "confirmModal": {
+    "title": "Confirm selection",
+    "description": "Confirm to select this option.",
+    "nextButtonText": "Confirm"
+  },
+  "addPlatform": {
+    "nextButtonText": "Add Platform"
+  },
+  "sectionHeadings": {
+    "eligibility": "Eligibility & Philosophy",
+    "joiningProcess": "Joining Process",
+    "expectations": "Expectations & Removal"
+  },
+  "methods": [
+    {
+      "id": "open-access",
+      "label": "Open Access",
+      "supportText": "Maximum inclusion. Anyone can join immediately by simply showing up.",
+      "sections": {
+        "eligibility": "Membership is open to any individual who lives in [Region/Context] and supports our mission. We believe that gatekeeping creates unnecessary hierarchy, so we prioritize radical inclusivity and low barriers to entry. Our only requirement is a commitment to mutual respect and adherence to the Community Code of Conduct.",
+        "joiningProcess": "There is no formal application or waiting period. A person becomes a member instantly by joining our [Digital Platform/Meeting], introducing themselves to the group, and explicitly agreeing to the community standards. Access to all channels and working groups is granted immediately upon sign-up.",
+        "expectations": "Members are expected to participate constructively. We view removal as a last resort. Barring immediate safety threats, no member will be banned without first going through the steps outlined in our Conflict Management Policy. We prioritize the restorative measures defined in that section over punitive expulsion. However, refusal to engage in that process may result in removal."
+      }
+    },
+    {
+      "id": "orientation-required",
+      "label": "Orientation Required",
+      "supportText": "Newcomers must attend a training or orientation session.",
+      "sections": {
+        "eligibility": "We welcome all new members who are willing to align with our specific values and operational methods. We believe that shared knowledge is power. Requiring education before decision-making prevents confusion and ensures that all members are empowered to participate fully in our governance.",
+        "joiningProcess": "Prospective members enter as \"Observers.\" To become a voting \"Member,\" an individual must attend a mandatory [2-hour] \"New Member Orientation\" session. This session covers our history, decision-making tools, and safety protocols. Upon completion, they sign the membership agreement and are granted full voting rights.",
+        "expectations": "Members must remain active to retain voting status. Inactivity for [6 months] reverts a member to \"Alumni\" status. Regarding behavior, we follow the graduated sanctions described in our Conflict Management section. Membership revocation is the final step in that process and is reserved for cases where mediation and accountability attempts have failed."
+      }
+    },
+    {
+      "id": "invitation-only",
+      "label": "Invitation Only",
+      "supportText": "New members can only join if they are 'vouched for' by existing members.",
+      "sections": {
+        "eligibility": "To ensure the physical and digital safety of our community, we operate on a strict \"web of trust\" model. We prioritize the security of our vulnerable members over rapid expansion. Membership is restricted to those who are known and trusted by the existing network.",
+        "joiningProcess": "An applicant must be \"vouched for\" by at least [2] existing members in good standing. The vouchers must submit a statement confirming they know the applicant in real life and attest to their integrity. The Membership Working Group reviews these requests. The wider group then has a [72-hour] window to raise safety concerns before approval.",
+        "expectations": "Members are responsible for the integrity of those they vouch for. If trust is broken, we do not act unilaterally. Instead we engage the specific accountability mechanisms detailed in our Conflict Management Policy. Removal is a consensus decision made only after those specific mediation steps have been exhausted or rejected by the offending party."
+      }
+    },
+    {
+      "id": "contribution-based",
+      "label": "Contribution Based",
+      "supportText": "Membership is reserved for people contributing their labor.",
+      "sections": {
+        "eligibility": "We practice \"Do-ocracy\" which means the people doing the work make the decisions. Membership is not a static title but a dynamic status earned through contribution. This ensures that our governance reflects the reality of labor and prevents \"armchair\" participation from stalling our progress.",
+        "joiningProcess": "Participants enter as \"Volunteers.\" A Volunteer becomes a voting \"Member\" only after documenting [10 hours] of labor or completing [3 shifts] within a [30-day] period. \"Labor\" is defined broadly to include administrative tasks, emotional support, and physical work to ensure accessibility.",
+        "expectations": "To maintain voting rights, a member must log at least [5 hours] of activity per month. However, high activity does not grant immunity from community standards. Behavioral violations are handled separate from labor tracking by utilizing the workflows defined in the Conflict Management section. A member may be removed for hampering the group's safety regardless of their work output."
+      }
+    },
+    {
+      "id": "mentorship",
+      "label": "Mentorship",
+      "supportText": "New members are paired with 'Mentors' to guide them through a probationary period.",
+      "sections": {
+        "eligibility": "We believe that the best way to integrate new members is through personal guidance. Eligibility is open to those who are willing to learn and build relationships. We value inter-generational knowledge transfer and community cohesion over rapid growth.",
+        "joiningProcess": "Upon applying, a prospective member is assigned a Mentor. They undergo a [3-month] mentorship period involving regular check-ins and shared tasks. After the mentor validates the newcomer's readiness, full membership is granted.",
+        "expectations": "Mentees are expected to be proactive in their learning. Mentors must provide support, not just judgment. If the relationship fails, a new mentor may be assigned. Persistent lack of engagement or violation of values leads to offboarding."
+      }
+    },
+    {
+      "id": "peer-sponsorship",
+      "label": "Peer Sponsorship",
+      "supportText": "New member must be vouched for by an existing member.",
+      "sections": {
+        "eligibility": "Trust is the foundation of our group. We rely on the judgment of our existing members to bring in trustworthy individuals. Eligibility is restricted to those who have a personal connection with at least one current member.",
+        "joiningProcess": "An existing member must formally sponsor the applicant, submitting a statement of support. The sponsorship is reviewed by the membership committee, followed by a [notification period] for the wider group to raise objections before confirmation.",
+        "expectations": "Sponsors are partially accountable for the behavior of those they bring in during the onboarding phase. If a new member violates norms, the sponsor is expected to participate in the conflict resolution process."
+      }
+    },
+    {
+      "id": "consensus-or-vote-based-approval",
+      "label": "Consensus or Vote-Based Approval",
+      "supportText": "Group votes on whether to admit a new member.",
+      "sections": {
+        "eligibility": "We function as a democratic collective where every voice matters. We believe that adding a new member changes the group dynamic, so the group must consent to the addition. Eligibility implies a willingness to abide by collective decisions.",
+        "joiningProcess": "Candidates introduce themselves at a meeting or submit a profile. After a Q&A period, the existing membership votes. Approval requires [Consensus / Supermajority / Simple Majority].",
+        "expectations": "Members must respect the democratic process. Removal follows the same voting threshold as admission, ensuring that exclusion is a collective decision, not an individual one."
+      }
+    },
+    {
+      "id": "trial-period-provisional-membership",
+      "label": "Trial Period / Provisional Membership",
+      "supportText": "New members have a probationary period before full rights.",
+      "sections": {
+        "eligibility": "Commitment is proven through action, not just words. We believe in a 'try before you commit' approach for both the group and the individual. Anyone can start the trial, but full membership is earned.",
+        "joiningProcess": "Newcomers start as 'Provisional Members' with limited rights (e.g., no voting on strategy). After [3 months] or [X contributions], a review is conducted. Successful completion upgrades them to full 'Member' status.",
+        "expectations": "Provisional members must demonstrate activity and cultural alignment. If the trial period expires without meeting criteria, the provisional status is revoked or extended once."
+      }
+    },
+    {
+      "id": "referral-system-with-screening",
+      "label": "Referral System with Screening",
+      "supportText": "Members refer new people, with structured screening.",
+      "sections": {
+        "eligibility": "We combine the trust of referrals with the fairness of objective screening. This ensures we grow through trusted networks while maintaining quality standards and reducing nepotism.",
+        "joiningProcess": "Candidates must be referred by a member. Once referred, they complete a standard screening interview or questionnaire with the Membership Team to ensure they meet the baseline requirements independently of their referrer.",
+        "expectations": "Referred members are treated as individuals, not extensions of their referrer. They are subject to the standard Code of Conduct and removal processes."
+      }
+    },
+    {
+      "id": "membership-agreement-or-pledge",
+      "label": "Membership Agreement or Pledge",
+      "supportText": "New members must agree to specific values, responsibilities, or rules.",
+      "sections": {
+        "eligibility": "Our unity comes from shared agreement. Eligibility is based on the willingness to explicitly commit to our [Manifesto/Constitution/Code of Conduct]. We prioritize alignment of values over specific skills.",
+        "joiningProcess": "Prospective members review the Membership Agreement. They must sign (digitally or physically) or publicly recite the pledge. Membership is effective immediately upon this affirmation.",
+        "expectations": "The Agreement acts as the contract for behavior. Violation of the specific terms agreed to is grounds for immediate review and potential removal."
+      }
+    },
+    {
+      "id": "weighted-or-tiered-membership",
+      "label": "Weighted or Tiered Membership",
+      "supportText": "Different levels of membership with increasing rights over time.",
+      "sections": {
+        "eligibility": "We recognize that commitment levels vary. By offering tiers (e.g., Supporter, Contributor, Core), we allow people to engage at their capacity. Higher tiers require deeper accountability and grant more governance power.",
+        "joiningProcess": "Everyone joins at the 'Basic' tier. Moving to higher tiers requires meeting specific criteria (e.g., hours worked, dues paid, tenure) and applying for an upgrade, which is verified by the Governance Circle.",
+        "expectations": "Members must maintain the requirements of their tier. Falling below requirements results in a downgrade to a lower tier rather than removal from the group."
+      }
+    },
+    {
+      "id": "hybrid-approval-process",
+      "label": "Hybrid Approval Process",
+      "supportText": "Combines multiple approval steps like voting, screening, and referrals.",
+      "sections": {
+        "eligibility": "We require a rigorous vetting process to ensure high alignment. By combining methods, we filter for competence, culture, and trust. Eligibility is for those dedicated enough to navigate a multi-step process.",
+        "joiningProcess": "Step 1: Application/Referral. Step 2: Screening Interview. Step 3: Trial Task or Period. Step 4: Final Ratification Vote by the core team.",
+        "expectations": "Due to the high barrier to entry, members are expected to be highly active leaders. Removal is a formal process involving the same bodies that approved the member."
+      }
+    },
+    {
+      "id": "skill-based-contribution",
+      "label": "Skill-Based Contribution",
+      "supportText": "Joining by submitting work, such as a pull request.",
+      "sections": {
+        "eligibility": "Code (or work) speaks louder than words. We operate as a meritocracy where the ability to contribute is the only barrier to entry. Anyone capable of doing the work is eligible.",
+        "joiningProcess": "A contributor picks up a 'Good First Issue' or task. Once their contribution (e.g., Pull Request) is reviewed and merged/accepted by a Maintainer, they are invited to the organization roster.",
+        "expectations": "Continued membership depends on active contribution. Members who go dormant for [6 months] may be moved to 'Alumni'. Malicious contributions result in an immediate ban."
+      }
+    },
+    {
+      "id": "pay-to-join",
+      "label": "Pay-to-Join",
+      "supportText": "Requires financial contribution or dues.",
+      "sections": {
+        "eligibility": "We value financial sustainability and commitment. Paying dues demonstrates a tangible investment in the group's longevity. Eligibility is open to anyone willing and able to support the organization financially.",
+        "joiningProcess": "The prospective member selects a membership tier and sets up a payment method. Upon successful transaction, access to member-only spaces is automatically granted.",
+        "expectations": "Membership is contingent on active payment. Failure to pay dues results in a grace period followed by a lapse in membership status/access."
+      }
+    },
+    {
+      "id": "application-review",
+      "label": "Application & Review",
+      "supportText": "Application reviewed by an onboarding team.",
+      "sections": {
+        "eligibility": "We seek specific qualities to balance our team. A formal application allows us to assess skills, experience, and diversity needs objectively. Eligibility is open, but selection is competitive.",
+        "joiningProcess": "Candidates submit a detailed written application. The Membership Committee scores applications against a rubric. Selected candidates are notified and onboarded.",
+        "expectations": "Members obtained through this process are expected to fulfill the roles they applied for. Significant deviation from the stated intent in the application may trigger a review."
+      }
+    },
+    {
+      "id": "identity-verification",
+      "label": "Identity Verification",
+      "supportText": "Requires verification of identity, credentials, or background.",
+      "sections": {
+        "eligibility": "Security and accountability are paramount. We require Sybil resistance (one person, one account). Eligibility is restricted to real, unique humans who can prove their identity.",
+        "joiningProcess": "User submits proof of identity (ID, social media link, or cryptographic proof like Proof of Humanity). A verifier or automated system confirms the identity. Access is granted upon verification.",
+        "expectations": "Members must maintain a single identity. Validated bad actors are permanently blacklisted. Privacy is respected, but accountability is enforced."
+      }
+    },
+    {
+      "id": "collective-interviews",
+      "label": "Collective Interviews",
+      "supportText": "Group collectively interviews new members for cultural fit.",
+      "sections": {
+        "eligibility": "Culture is co-created. We believe the existing community should interact with potential members to ensure resonance. Eligibility requires the social skills to engage with the group.",
+        "joiningProcess": "Applicants attend a 'Ask Me Anything' or group interview session. After the session, the group debriefs and decides on admission based on the interaction.",
+        "expectations": "Members are expected to maintain the cultural vibe established in the interview. 'Vibe checks' may continue, and dissonance can lead to conflict resolution."
+      }
+    },
+    {
+      "id": "skill-based-evaluation",
+      "label": "Skill-Based Evaluation",
+      "supportText": "Requires passing a skills assessment or portfolio review.",
+      "sections": {
+        "eligibility": "We are a guild of professionals. Quality assurance is our priority. Eligibility is limited to those who can demonstrate a specific level of proficiency in our domain.",
+        "joiningProcess": "Candidate submits a portfolio or takes a standardized test. Experts within the group review the submission. A passing score grants membership.",
+        "expectations": "Members must maintain professional standards. Plagiarism or gross negligence in work leads to revocation of credentials/membership."
+      }
+    },
+    {
+      "id": "lottery-sortition",
+      "label": "Lottery / Sortition",
+      "supportText": "Members are selected randomly from a pool of eligible applicants.",
+      "sections": {
+        "eligibility": "We believe in fairness and equality. By removing human bias from selection, we ensure a representative sample of the community and prevent power consolidation. Eligibility is open to all who meet basic criteria.",
+        "joiningProcess": "Interested individuals submit their name to the pool. At regular intervals, a random selection (using a cryptographic or transparent physical randomizer) occurs. Selected individuals are invited to join.",
+        "expectations": "Selected members are expected to serve their term faithfully. Removal is rare and reserved for gross misconduct, as the legitimacy of the system relies on the randomness of the selection."
+      }
+    }
+  ]
+}
diff --git a/messages/en/create/footer.json b/messages/en/create/footer.json
index 24d4b23..bb9573d 100644
--- a/messages/en/create/footer.json
+++ b/messages/en/create/footer.json
@@ -14,6 +14,6 @@
   "confirmCoreValues": "Confirm values",
   "confirmCommunication": "Confirm",
   "confirmMembership": "Confirm",
-  "confirmRightRail": "Confirm",
+  "confirmDecisionApproaches": "Confirm",
   "confirmConflictManagement": "Confirm"
 }
diff --git a/messages/en/create/membership.json b/messages/en/create/membership.json
deleted file mode 100644
index a7337c4..0000000
--- a/messages/en/create/membership.json
+++ /dev/null
@@ -1,133 +0,0 @@
-{
-  "_comment": "Create flow — membership / how members join (compact card stack)",
-  "page": {
-    "compactTitle": "How do new members join\nand get connected?",
-    "compactDescriptionBefore": "You can select multiple methods for different needs or ",
-    "compactDescriptionLinkLabel": "add",
-    "compactDescriptionAfter": " your own",
-    "expandedTitle": "How should new members join and get connected?",
-    "expandedDescription": "You can select multiple methods for different needs or add your own",
-    "seeAllLink": "See all membership approaches"
-  },
-  "confirmModal": {
-    "title": "Confirm selection",
-    "description": "Confirm to select this option.",
-    "nextButtonText": "Confirm"
-  },
-  "addPlatform": {
-    "nextButtonText": "Add Platform"
-  },
-  "sectionHeadings": {
-    "eligibility": "Eligibility & Philosophy",
-    "joiningProcess": "Joining Process",
-    "expectations": "Expectations & Removal"
-  },
-  "cards": {
-    "open-access": {
-      "label": "Open Access",
-      "supportText": "Maximum inclusion. Anyone can join immediately by simply showing up."
-    },
-    "orientation-required": {
-      "label": "Orientation Required",
-      "supportText": "Newcomers must attend a training or orientation session."
-    },
-    "invitation-only": {
-      "label": "Invitation Only",
-      "supportText": "New members can only join if they are 'vouched for' by existing members."
-    },
-    "contribution-based": {
-      "label": "Contribution Based",
-      "supportText": "Membership is reserved for people contributing their labor."
-    },
-    "mentorship": {
-      "label": "Mentorship",
-      "supportText": "New members are paired with 'Mentors' to guide them through a probationary period."
-    },
-    "6": {
-      "label": "Label",
-      "supportText": "Additional membership approach."
-    },
-    "7": {
-      "label": "Label",
-      "supportText": "Additional membership approach."
-    },
-    "8": {
-      "label": "Label",
-      "supportText": "Additional membership approach."
-    }
-  },
-  "modals": {
-    "open-access": {
-      "title": "Open Access",
-      "description": "Maximum inclusion. Anyone can join immediately by simply showing up.",
-      "sections": {
-        "eligibility": "Membership is open to any individual who lives in [Region/Context] and supports our mission. We believe that gatekeeping creates unnecessary hierarchy, so we prioritize radical inclusivity and low barriers to entry. Our only requirement is a commitment to mutual respect and adherence to the Community Code of Conduct.",
-        "joiningProcess": "There is no formal application or waiting period. A person becomes a member instantly by joining our [Digital Platform/Meeting], introducing themselves to the group, and explicitly agreeing to the community standards. Access to all channels and working groups is granted immediately upon sign-up.",
-        "expectations": "Members are expected to participate constructively. We view removal as a last resort. Barring immediate safety threats, no member will be banned without first going through the steps outlined in our Conflict Management Policy. We prioritize the restorative measures defined in that section over punitive expulsion. However, refusal to engage in that process may result in removal."
-      }
-    },
-    "orientation-required": {
-      "title": "Orientation Required",
-      "description": "Newcomers must attend a training or orientation session.",
-      "sections": {
-        "eligibility": "",
-        "joiningProcess": "",
-        "expectations": ""
-      }
-    },
-    "invitation-only": {
-      "title": "Invitation Only",
-      "description": "New members can only join if they are 'vouched for' by existing members.",
-      "sections": {
-        "eligibility": "",
-        "joiningProcess": "",
-        "expectations": ""
-      }
-    },
-    "contribution-based": {
-      "title": "Contribution Based",
-      "description": "Membership is reserved for people contributing their labor.",
-      "sections": {
-        "eligibility": "",
-        "joiningProcess": "",
-        "expectations": ""
-      }
-    },
-    "mentorship": {
-      "title": "Mentorship",
-      "description": "New members are paired with 'Mentors' to guide them through a probationary period.",
-      "sections": {
-        "eligibility": "",
-        "joiningProcess": "",
-        "expectations": ""
-      }
-    },
-    "6": {
-      "title": "Label",
-      "description": "Additional membership approach.",
-      "sections": {
-        "eligibility": "",
-        "joiningProcess": "",
-        "expectations": ""
-      }
-    },
-    "7": {
-      "title": "Label",
-      "description": "Additional membership approach.",
-      "sections": {
-        "eligibility": "",
-        "joiningProcess": "",
-        "expectations": ""
-      }
-    },
-    "8": {
-      "title": "Label",
-      "description": "Additional membership approach.",
-      "sections": {
-        "eligibility": "",
-        "joiningProcess": "",
-        "expectations": ""
-      }
-    }
-  }
-}
diff --git a/messages/en/create/completed.json b/messages/en/create/reviewAndComplete/completed.json
similarity index 100%
rename from messages/en/create/completed.json
rename to messages/en/create/reviewAndComplete/completed.json
diff --git a/messages/en/create/confirmStakeholders.json b/messages/en/create/reviewAndComplete/confirmStakeholders.json
similarity index 100%
rename from messages/en/create/confirmStakeholders.json
rename to messages/en/create/reviewAndComplete/confirmStakeholders.json
diff --git a/messages/en/create/finalReview.json b/messages/en/create/reviewAndComplete/finalReview.json
similarity index 100%
rename from messages/en/create/finalReview.json
rename to messages/en/create/reviewAndComplete/finalReview.json
diff --git a/messages/en/create/publish.json b/messages/en/create/reviewAndComplete/publish.json
similarity index 100%
rename from messages/en/create/publish.json
rename to messages/en/create/reviewAndComplete/publish.json
diff --git a/messages/en/create/rightRail.json b/messages/en/create/rightRail.json
deleted file mode 100644
index 4f53ce5..0000000
--- a/messages/en/create/rightRail.json
+++ /dev/null
@@ -1,147 +0,0 @@
-{
-  "_comment": "Create flow — right rail / decision approaches (Figma Flow — Right Rail `20523:23509`)",
-  "sidebar": {
-    "title": "How should this community make difficult decisions?",
-    "descriptionBefore": "Select as many as you need to describe how your group makes decisions. You can also ",
-    "descriptionLinkLabel": "add",
-    "descriptionAfter": " new decision making approaches or interact with the categories below to filter."
-  },
-  "messageBox": {
-    "title": "Consider defining approaches to steward key resources:",
-    "items": [
-      { "id": "amend", "label": "Amend your CommunityRule" },
-      { "id": "finances", "label": "Steward finances" },
-      { "id": "project", "label": "Project level decisions" },
-      { "id": "discipline", "label": "Discipline and member termination" }
-    ]
-  },
-  "cardStack": {
-    "toggleSeeAll": "See all decision approaches",
-    "toggleShowLess": "Show less"
-  },
-  "confirmModal": {
-    "title": "Confirm selection",
-    "description": "Confirm to select this option.",
-    "nextButtonText": "Confirm"
-  },
-  "addApproach": {
-    "nextButtonText": "Add Approach"
-  },
-  "sectionHeadings": {
-    "corePrinciple": "Core Principle",
-    "applicableScope": "Applicable Scope",
-    "stepByStepInstructions": "Step-by-Step Instructions",
-    "consensusLevel": "Consensus Level",
-    "objectionsDeadlocks": "Objections & Deadlocks"
-  },
-  "scopeAddButtonLabel": "Add Applicable Scope",
-  "modals": {
-    "lazy-consensus": {
-      "title": "Lazy Consensus",
-      "description": "A decision is assumed approved unless objections are raised within a specified timeframe.",
-      "sections": {
-        "corePrinciple": "We prioritize momentum and trust over bureaucracy. By assuming good faith, we avoid bottlenecks; silence is interpreted as consent to keep the work moving.",
-        "applicableScope": [
-          "Daily Operations",
-          "Minor Expenditures",
-          "Working Group Decisions"
-        ],
-        "stepByStepInstructions": "Post your proposal to the relevant channel with a specific deadline, such as 'Merging in 72 hours.' If the deadline passes without any objections, you are authorized to proceed. Explicit support is welcome but not required.",
-        "consensusLevel": 90,
-        "objectionsDeadlocks": "Any member can pause the process by raising a 'Block' or 'Concern' before the deadline. The proposer is then required to pause execution and engage in a dialogue to resolve the concern. If the disagreement cannot be resolved asynchronously, the proposal is escalated to a synchronous meeting or a higher governance tier for a final decision."
-      }
-    }
-  },
-  "cards": [
-    {
-      "id": "lazy-consensus",
-      "label": "Lazy Consensus",
-      "supportText": "A decision is assumed approved unless objections are raised within a specified timeframe.",
-      "recommended": true
-    },
-    {
-      "id": "do-ocracy",
-      "label": "Do-ocracy",
-      "supportText": "Decisions are made by those who take initiative and carry out the work.",
-      "recommended": true
-    },
-    {
-      "id": "consensus-decision-making",
-      "label": "Consensus Decision-Making",
-      "supportText": "All members must agree. Best for important decisions in small groups. Does not work well for low stakes decisions.",
-      "recommended": true
-    },
-    {
-      "id": "rotational-leadership",
-      "label": "Rotational Leadership",
-      "supportText": "Decision-making responsibilities rotate among members.",
-      "recommended": true
-    },
-    {
-      "id": "modified-consensus",
-      "label": "Modified Consensus",
-      "supportText": "Attempts to reach full agreement first, but falls back to voting if consensus isn’t possible.",
-      "recommended": true
-    },
-    {
-      "id": "label-1",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    },
-    {
-      "id": "label-2",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    },
-    {
-      "id": "label-3",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    },
-    {
-      "id": "label-4",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    },
-    {
-      "id": "label-5",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    },
-    {
-      "id": "label-6",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    },
-    {
-      "id": "label-7",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    },
-    {
-      "id": "label-8",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    },
-    {
-      "id": "label-9",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    },
-    {
-      "id": "label-10",
-      "label": "Label",
-      "supportText": "Additional decision approach.",
-      "recommended": false
-    }
-  ]
-}
diff --git a/messages/en/index.ts b/messages/en/index.ts
index 32d362d..2a44d79 100644
--- a/messages/en/index.ts
+++ b/messages/en/index.ts
@@ -18,26 +18,34 @@ import login from "./pages/login.json";
 import profile from "./pages/profile.json";
 import navigation from "./navigation.json";
 import metadata from "./metadata.json";
-import communication from "./create/communication.json";
-import createMembership from "./create/membership.json";
-import createConflictManagement from "./create/conflictManagement.json";
-import createInformational from "./create/informational.json";
-import createCommunityName from "./create/communityName.json";
-import createCommunitySize from "./create/communitySize.json";
-import createCommunityContext from "./create/communityContext.json";
-import createCommunityStructure from "./create/communityStructure.json";
-import createCommunityUpload from "./create/communityUpload.json";
-import createCommunitySave from "./create/communitySave.json";
-import createReview from "./create/review.json";
-import createCoreValues from "./create/coreValues.json";
-import createConfirmStakeholders from "./create/confirmStakeholders.json";
-import createFinalReview from "./create/finalReview.json";
-import createCompleted from "./create/completed.json";
-import createRightRail from "./create/rightRail.json";
+
+// create – stage 1: community
+import createInformational from "./create/community/informational.json";
+import createCommunityName from "./create/community/communityName.json";
+import createCommunityStructure from "./create/community/communityStructure.json";
+import createCommunityContext from "./create/community/communityContext.json";
+import createCommunitySize from "./create/community/communitySize.json";
+import createCommunityUpload from "./create/community/communityUpload.json";
+import createCommunitySave from "./create/community/communitySave.json";
+import createReview from "./create/community/review.json";
+
+// create – stage 2: customRule
+import createCoreValues from "./create/customRule/coreValues.json";
+import createCommunication from "./create/customRule/communication.json";
+import createMembership from "./create/customRule/membership.json";
+import createDecisionApproaches from "./create/customRule/decisionApproaches.json";
+import createConflictManagement from "./create/customRule/conflictManagement.json";
+
+// create – stage 3: reviewAndComplete
+import createConfirmStakeholders from "./create/reviewAndComplete/confirmStakeholders.json";
+import createFinalReview from "./create/reviewAndComplete/finalReview.json";
+import createCompleted from "./create/reviewAndComplete/completed.json";
+import createPublish from "./create/reviewAndComplete/publish.json";
+
+// create – cross-cutting (chrome + layout-shell strings)
 import createFooter from "./create/footer.json";
 import createTopNav from "./create/topNav.json";
 import createDraftHydration from "./create/draftHydration.json";
-import createPublish from "./create/publish.json";
 import createTemplateReview from "./create/templateReview.json";
 
 export default {
@@ -62,26 +70,32 @@ export default {
     profile,
   },
   create: {
-    communication,
-    membership: createMembership,
-    conflictManagement: createConflictManagement,
-    informational: createInformational,
-    communityName: createCommunityName,
-    communitySize: createCommunitySize,
-    communityContext: createCommunityContext,
-    communityStructure: createCommunityStructure,
-    communityUpload: createCommunityUpload,
-    communitySave: createCommunitySave,
-    review: createReview,
-    coreValues: createCoreValues,
-    confirmStakeholders: createConfirmStakeholders,
-    finalReview: createFinalReview,
-    completed: createCompleted,
-    rightRail: createRightRail,
+    community: {
+      informational: createInformational,
+      communityName: createCommunityName,
+      communityStructure: createCommunityStructure,
+      communityContext: createCommunityContext,
+      communitySize: createCommunitySize,
+      communityUpload: createCommunityUpload,
+      communitySave: createCommunitySave,
+      review: createReview,
+    },
+    customRule: {
+      coreValues: createCoreValues,
+      communication: createCommunication,
+      membership: createMembership,
+      decisionApproaches: createDecisionApproaches,
+      conflictManagement: createConflictManagement,
+    },
+    reviewAndComplete: {
+      confirmStakeholders: createConfirmStakeholders,
+      finalReview: createFinalReview,
+      completed: createCompleted,
+      publish: createPublish,
+    },
     footer: createFooter,
     topNav: createTopNav,
     draftHydration: createDraftHydration,
-    publish: createPublish,
     templateReview: createTemplateReview,
   },
   navigation,
diff --git a/prisma/migrations/20260418170000_add_method_facet/migration.sql b/prisma/migrations/20260418170000_add_method_facet/migration.sql
new file mode 100644
index 0000000..451bc81
--- /dev/null
+++ b/prisma/migrations/20260418170000_add_method_facet/migration.sql
@@ -0,0 +1,21 @@
+-- CreateTable
+CREATE TABLE "MethodFacet" (
+    "id" TEXT NOT NULL,
+    "section" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "group" TEXT NOT NULL,
+    "value" TEXT NOT NULL,
+    "matches" BOOLEAN NOT NULL,
+    "weight" DOUBLE PRECISION,
+
+    CONSTRAINT "MethodFacet_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "MethodFacet_section_slug_group_value_key" ON "MethodFacet"("section", "slug", "group", "value");
+
+-- CreateIndex
+CREATE INDEX "MethodFacet_section_idx" ON "MethodFacet"("section");
+
+-- CreateIndex
+CREATE INDEX "MethodFacet_group_value_matches_idx" ON "MethodFacet"("group", "value", "matches");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 10cf8f8..602a80b 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -71,3 +71,27 @@ model RuleTemplate {
   sortOrder   Int      @default(0)
   featured    Boolean  @default(false)
 }
+
+/// Recommendation matrix (CR-88).
+/// JSON in `data/create/customRule/<section>.json` is canonical; this table is
+/// rebuilt from those files at `prisma db seed` time so the API can join.
+/// See `docs/guides/template-recommendation-matrix.md` §7.
+model MethodFacet {
+  id      String  @id @default(cuid())
+  /// One of "communication" | "membership" | "decisionApproaches" | "conflictManagement".
+  section String
+  /// Matches the `id` of an entry in `messages/en/create/customRule/<section>.json#/methods`.
+  slug    String
+  /// One of "size" | "orgType" | "scale" | "maturity".
+  group   String
+  /// Canonical facet value id, e.g. "workersCoop", "earlyStage".
+  value   String
+  /// `true` iff the JSON marks this method as matching the facet (`✓` cell).
+  matches Boolean
+  /// Optional per-cell weight; reserved for a future weighted-rank pass (v1 ignores).
+  weight  Float?
+
+  @@unique([section, slug, group, value])
+  @@index([section])
+  @@index([group, value, matches])
+}
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 1986c42..e5936fe 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,4 +1,5 @@
 import { PrismaClient, type Prisma } from "@prisma/client";
+import { seedMethodFacets } from "./seed/methodFacets";
 
 /**
  * Curated rule templates for GET /api/templates.
@@ -387,6 +388,14 @@ async function main() {
       },
     });
   }
+
+  const facetSeed = await seedMethodFacets(prisma);
+  // eslint-disable-next-line no-console -- seed CLI feedback
+  console.log(
+    `Seeded MethodFacet rows: ${Object.entries(facetSeed.rowsBySection)
+      .map(([section, count]) => `${section}=${count}`)
+      .join(", ")}`,
+  );
 }
 
 main()
diff --git a/prisma/seed/methodFacets.ts b/prisma/seed/methodFacets.ts
new file mode 100644
index 0000000..e6056a7
--- /dev/null
+++ b/prisma/seed/methodFacets.ts
@@ -0,0 +1,117 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import type { PrismaClient } from "@prisma/client";
+import {
+  FACET_GROUP_IDS,
+  FACET_VALUE_IDS_BY_GROUP,
+  SECTION_IDS,
+  type SectionId,
+  facetGroupsFileSchema,
+  resolveFacetMatch,
+  sectionFacetsSchema,
+} from "../../lib/server/validation/methodFacetsSchemas";
+
+const REPO_ROOT = path.resolve(__dirname, "..", "..");
+const DATA_DIR = path.join(REPO_ROOT, "data", "create", "customRule");
+
+/**
+ * Reads + Zod-validates `data/create/customRule/<section>.json`.
+ * Throws on schema failures so the seed aborts before any DB write.
+ */
+async function loadSectionFacets(section: SectionId) {
+  const file = path.join(DATA_DIR, `${section}.json`);
+  const raw = await readFile(file, "utf8");
+  const parsed = JSON.parse(raw) as unknown;
+  const result = sectionFacetsSchema.safeParse(parsed);
+  if (!result.success) {
+    throw new Error(
+      `Invalid facet file ${file}: ${JSON.stringify(result.error.flatten(), null, 2)}`,
+    );
+  }
+  return result.data;
+}
+
+async function loadFacetGroups() {
+  const file = path.join(DATA_DIR, "_facetGroups.json");
+  const raw = await readFile(file, "utf8");
+  const parsed = JSON.parse(raw) as unknown;
+  const result = facetGroupsFileSchema.safeParse(parsed);
+  if (!result.success) {
+    throw new Error(
+      `Invalid facet groups file ${file}: ${JSON.stringify(result.error.flatten(), null, 2)}`,
+    );
+  }
+  return result.data;
+}
+
+type MethodFacetRow = {
+  section: string;
+  slug: string;
+  group: string;
+  value: string;
+  matches: boolean;
+  weight: number | null;
+};
+
+/**
+ * Flattens `{ size: { oneMember: true, ... }, orgType: { ... } }` per slug
+ * into one row per `(section, slug, group, value)`. Omitted groups/values
+ * default to `false` so the table density is constant.
+ */
+function flattenSectionFacets(
+  section: SectionId,
+  facets: Awaited<ReturnType<typeof loadSectionFacets>>,
+): MethodFacetRow[] {
+  const rows: MethodFacetRow[] = [];
+  for (const [slug, perMethod] of Object.entries(facets)) {
+    for (const group of FACET_GROUP_IDS) {
+      const groupValues = perMethod[group];
+      for (const value of FACET_VALUE_IDS_BY_GROUP[group]) {
+        const cell = groupValues?.[value as keyof typeof groupValues];
+        const { match, weight } = resolveFacetMatch(cell);
+        rows.push({
+          section,
+          slug,
+          group,
+          value,
+          matches: match,
+          weight,
+        });
+      }
+    }
+  }
+  return rows;
+}
+
+/**
+ * Validates and re-seeds the `MethodFacet` table from the JSON files.
+ * Per-section atomic swap so the table is never partially populated.
+ *
+ * `_facetGroups.json` is validated for schema correctness but not stored —
+ * its only runtime purpose is the chip-id ↔ canonical-id lookup, which is
+ * read directly from the JSON by the wizard ranker.
+ */
+export async function seedMethodFacets(prisma: PrismaClient): Promise<{
+  rowsBySection: Record<SectionId, number>;
+}> {
+  await loadFacetGroups();
+
+  const rowsBySection: Record<SectionId, number> = {
+    communication: 0,
+    membership: 0,
+    decisionApproaches: 0,
+    conflictManagement: 0,
+  };
+
+  for (const section of SECTION_IDS) {
+    const facets = await loadSectionFacets(section);
+    const rows = flattenSectionFacets(section, facets);
+    rowsBySection[section] = rows.length;
+    await prisma.$transaction([
+      prisma.methodFacet.deleteMany({ where: { section } }),
+      prisma.methodFacet.createMany({ data: rows }),
+    ]);
+  }
+
+  return { rowsBySection };
+}
diff --git a/stories/pages/TextPage.stories.js b/stories/pages/TextPage.stories.js
index b6ef156..2ef2eef 100644
--- a/stories/pages/TextPage.stories.js
+++ b/stories/pages/TextPage.stories.js
@@ -8,7 +8,7 @@ export default {
 
 export const Default = {
   args: {
-    messageNamespace: "create.communityName",
+    messageNamespace: "create.community.communityName",
     stateField: "title",
     maxLength: 48,
   },
diff --git a/tests/components/TextPage.test.tsx b/tests/components/TextPage.test.tsx
index 6722f9e..2c5cc21 100644
--- a/tests/components/TextPage.test.tsx
+++ b/tests/components/TextPage.test.tsx
@@ -7,7 +7,7 @@ describe("CreateFlowTextFieldScreen (community name)", () => {
   it("renders main heading", () => {
     render(
       <CreateFlowTextFieldScreen
-        messageNamespace="create.communityName"
+        messageNamespace="create.community.communityName"
         stateField="title"
         maxLength={48}
       />,
@@ -22,7 +22,7 @@ describe("CreateFlowTextFieldScreen (community name)", () => {
   it("renders description and text field", () => {
     render(
       <CreateFlowTextFieldScreen
-        messageNamespace="create.communityName"
+        messageNamespace="create.community.communityName"
         stateField="title"
         maxLength={48}
       />,
diff --git a/tests/pages/decision-approaches.test.jsx b/tests/pages/decision-approaches.test.jsx
index 672f161..48ae06c 100644
--- a/tests/pages/decision-approaches.test.jsx
+++ b/tests/pages/decision-approaches.test.jsx
@@ -106,17 +106,22 @@ describe("Create flow decision-approaches page", () => {
     ).toBeInTheDocument();
   });
 
-  test("expanded view shows Label cards", async () => {
+  test("expanded view reveals additional non-recommended approaches", async () => {
     const user = userEvent.setup();
     render(<DecisionApproachesScreen />);
 
+    expect(
+      screen.queryByRole("button", { name: /^Sociocracy:/ }),
+    ).not.toBeInTheDocument();
+
     const toggle = screen.getByRole("button", {
       name: "See all decision approaches",
     });
     await user.click(toggle);
 
-    const labelButtons = screen.getAllByRole("button", { name: /^Label/ });
-    expect(labelButtons.length).toBeGreaterThanOrEqual(1);
+    expect(
+      screen.getByRole("button", { name: /^Sociocracy:/ }),
+    ).toBeInTheDocument();
   });
 
   test("clicking a card opens the create modal and confirming selects it", async () => {
diff --git a/tests/unit/createFlowMethodsRoute.test.ts b/tests/unit/createFlowMethodsRoute.test.ts
new file mode 100644
index 0000000..a249353
--- /dev/null
+++ b/tests/unit/createFlowMethodsRoute.test.ts
@@ -0,0 +1,69 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const findManyMock = vi.fn();
+
+vi.mock("../../lib/server/env", () => ({
+  isDatabaseConfigured: () => true,
+}));
+
+vi.mock("../../lib/server/db", () => ({
+  prisma: {
+    methodFacet: {
+      findMany: (...args: unknown[]) => findManyMock(...args),
+    },
+  },
+}));
+
+import { GET } from "../../app/api/create-flow/methods/route";
+
+function makeReq(url: string) {
+  return { nextUrl: new URL(url) } as unknown as Parameters<typeof GET>[0];
+}
+
+beforeEach(() => {
+  findManyMock.mockReset();
+});
+
+describe("GET /api/create-flow/methods", () => {
+  it("400s on missing or unknown section", async () => {
+    const r1 = await GET(makeReq("https://x.test/api/create-flow/methods"));
+    expect(r1.status).toBe(400);
+    const r2 = await GET(
+      makeReq("https://x.test/api/create-flow/methods?section=foo"),
+    );
+    expect(r2.status).toBe(400);
+  });
+
+  it("returns ranked methods from the facet query", async () => {
+    findManyMock.mockResolvedValueOnce([
+      { slug: "loomio", group: "size", value: "twoToFive" },
+      { slug: "loomio", group: "orgType", value: "workersCoop" },
+      { slug: "in-person", group: "size", value: "twoToFive" },
+    ]);
+    const res = await GET(
+      makeReq(
+        "https://x.test/api/create-flow/methods?section=communication&facet.size=twoToFive&facet.orgType=workersCoop",
+      ),
+    );
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as {
+      section: string;
+      methods: { slug: string; matches: { score: number } }[];
+    };
+    expect(json.section).toBe("communication");
+    expect(json.methods.map((m) => m.slug)).toEqual(["loomio", "in-person"]);
+    expect(json.methods[0].matches.score).toBe(2);
+  });
+
+  it("returns empty methods when the DB query throws (caller falls back)", async () => {
+    findManyMock.mockRejectedValueOnce(new Error("db down"));
+    const res = await GET(
+      makeReq(
+        "https://x.test/api/create-flow/methods?section=communication&facet.size=oneMember",
+      ),
+    );
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as { methods: unknown[] };
+    expect(json.methods).toEqual([]);
+  });
+});
diff --git a/tests/unit/deriveCompactCards.test.ts b/tests/unit/deriveCompactCards.test.ts
new file mode 100644
index 0000000..e8a3ea4
--- /dev/null
+++ b/tests/unit/deriveCompactCards.test.ts
@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+import { deriveCompactCards } from "../../app/(app)/create/hooks/useFacetRecommendations";
+
+const methods = [
+  { id: "alpha" },
+  { id: "bravo" },
+  { id: "charlie" },
+  { id: "delta" },
+  { id: "echo" },
+  { id: "foxtrot" },
+  { id: "golf" },
+] as const;
+
+describe("deriveCompactCards", () => {
+  it("falls back to authoring order with no badges when no facets selected", () => {
+    const result = deriveCompactCards(methods, {}, false, 5);
+    expect(result.compactCardIds).toEqual([
+      "alpha",
+      "bravo",
+      "charlie",
+      "delta",
+      "echo",
+    ]);
+    expect(result.recommendedIds.size).toBe(0);
+  });
+
+  it("falls back to authoring order with no badges when facets selected but every score is zero", () => {
+    const result = deriveCompactCards(methods, {}, true, 5);
+    expect(result.compactCardIds).toEqual([
+      "alpha",
+      "bravo",
+      "charlie",
+      "delta",
+      "echo",
+    ]);
+    expect(result.recommendedIds.size).toBe(0);
+  });
+
+  it("shows only recommended (matched) cards when fewer than the limit match", () => {
+    const result = deriveCompactCards(
+      methods,
+      { bravo: 2, delta: 1 },
+      true,
+      5,
+    );
+    // Caller is responsible for pre-ranking by score (rankMethodsByScore).
+    // This test passes already-ranked input; the hook just respects ordering
+    // and tags only the matched subset — no padding with unrecommended cards.
+    expect(result.compactCardIds).toEqual(["bravo", "delta"]);
+    expect([...result.recommendedIds].sort()).toEqual(["bravo", "delta"]);
+  });
+
+  it("caps recommended cards at the limit when more than `limit` match", () => {
+    const scores = {
+      alpha: 4,
+      bravo: 3,
+      charlie: 3,
+      delta: 2,
+      echo: 1,
+      foxtrot: 1,
+      golf: 1,
+    };
+    const result = deriveCompactCards(methods, scores, true, 5);
+    expect(result.compactCardIds).toEqual([
+      "alpha",
+      "bravo",
+      "charlie",
+      "delta",
+      "echo",
+    ]);
+    expect(result.recommendedIds.size).toBe(5);
+    expect([...result.recommendedIds].sort()).toEqual([
+      "alpha",
+      "bravo",
+      "charlie",
+      "delta",
+      "echo",
+    ]);
+  });
+
+  it("returns a single card when only one method matches", () => {
+    const result = deriveCompactCards(methods, { charlie: 4 }, true, 5);
+    expect(result.compactCardIds).toEqual(["charlie"]);
+    expect([...result.recommendedIds]).toEqual(["charlie"]);
+  });
+
+  it("respects a smaller `limit` even when many methods match", () => {
+    const scores = { alpha: 4, bravo: 3, charlie: 3, delta: 2 };
+    const result = deriveCompactCards(methods, scores, true, 3);
+    expect(result.compactCardIds).toEqual(["alpha", "bravo", "charlie"]);
+    expect(result.recommendedIds.size).toBe(3);
+  });
+});
diff --git a/tests/unit/methodFacets.test.ts b/tests/unit/methodFacets.test.ts
new file mode 100644
index 0000000..81ef801
--- /dev/null
+++ b/tests/unit/methodFacets.test.ts
@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import {
+  FACET_GROUP_IDS,
+  FACET_VALUE_IDS_BY_GROUP,
+  SECTION_IDS,
+  type SectionId,
+  facetGroupsFileSchema,
+  sectionFacetsSchema,
+} from "../../lib/server/validation/methodFacetsSchemas";
+
+const REPO_ROOT = path.resolve(__dirname, "..", "..");
+
+const SECTION_TO_MESSAGES_FILE: Record<SectionId, string> = {
+  communication: "messages/en/create/customRule/communication.json",
+  membership: "messages/en/create/customRule/membership.json",
+  decisionApproaches: "messages/en/create/customRule/decisionApproaches.json",
+  conflictManagement: "messages/en/create/customRule/conflictManagement.json",
+};
+
+function readJson<T>(rel: string): T {
+  return JSON.parse(readFileSync(path.join(REPO_ROOT, rel), "utf8")) as T;
+}
+
+describe("data/create/customRule parity (CR-88)", () => {
+  for (const section of SECTION_IDS) {
+    const messagesPath = SECTION_TO_MESSAGES_FILE[section];
+    const dataPath = `data/create/customRule/${section}.json`;
+
+    it(`${section}: facet file matches messages methods one-to-one`, () => {
+      const messages = readJson<{ methods: { id: string }[] }>(messagesPath);
+      const dataParsed = sectionFacetsSchema.safeParse(readJson(dataPath));
+      expect(dataParsed.success).toBe(true);
+      if (!dataParsed.success) return;
+
+      const messageSlugs = new Set(messages.methods.map((m) => m.id));
+      const dataSlugs = new Set(Object.keys(dataParsed.data));
+
+      const onlyInMessages = [...messageSlugs].filter((s) => !dataSlugs.has(s));
+      const onlyInData = [...dataSlugs].filter((s) => !messageSlugs.has(s));
+
+      expect(onlyInMessages, `${section} slugs missing from data/`).toEqual([]);
+      expect(onlyInData, `${section} slugs missing from messages/`).toEqual([]);
+    });
+  }
+});
+
+describe("data/create/customRule/_facetGroups.json (CR-88)", () => {
+  const groups = readJson<unknown>("data/create/customRule/_facetGroups.json");
+
+  it("matches the facetGroupsFileSchema", () => {
+    const parsed = facetGroupsFileSchema.safeParse(groups);
+    expect(parsed.success).toBe(true);
+  });
+
+  it("every chipId resolves to a real position in the referenced messages file", () => {
+    const parsed = facetGroupsFileSchema.parse(groups);
+    for (const group of FACET_GROUP_IDS) {
+      const block = parsed[group];
+      // source is "messages/en/.../foo.json#/<arrayKey>"; resolve relative to repo root.
+      const [filePath, jsonPointer] = block.source.split("#");
+      const file = readJson<Record<string, { label: string }[]>>(filePath);
+      const arrayKey = jsonPointer.replace(/^\//, "");
+      const arr = file[arrayKey];
+      expect(Array.isArray(arr), `${group}: ${block.source} → array`).toBe(true);
+      const positions = new Set(arr.map((_, i) => String(i + 1)));
+      for (const [valueId, { chipId }] of Object.entries(block.values)) {
+        expect(
+          positions.has(chipId),
+          `${group}.${valueId} chipId ${chipId} should be a position in ${block.source} (have ${[...positions].join(",")})`,
+        ).toBe(true);
+      }
+    }
+  });
+
+  it("uses the canonical 19 value ids across the four groups", () => {
+    const parsed = facetGroupsFileSchema.parse(groups);
+    let total = 0;
+    for (const group of FACET_GROUP_IDS) {
+      const expected = new Set(FACET_VALUE_IDS_BY_GROUP[group]);
+      const actual = new Set(Object.keys(parsed[group].values));
+      expect(actual).toEqual(expected);
+      total += actual.size;
+    }
+    expect(total).toBe(19);
+  });
+});
diff --git a/tests/unit/methodFacetsSchemas.test.ts b/tests/unit/methodFacetsSchemas.test.ts
new file mode 100644
index 0000000..04908ff
--- /dev/null
+++ b/tests/unit/methodFacetsSchemas.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import {
+  flattenRequestedFacets,
+  methodFacetsSchema,
+  parseRequestedFacetsFromSearchParams,
+  resolveFacetMatch,
+} from "../../lib/server/validation/methodFacetsSchemas";
+
+describe("methodFacetsSchema", () => {
+  it("accepts boolean cells and partial groups", () => {
+    expect(
+      methodFacetsSchema.safeParse({
+        size: { oneMember: true, twoToFive: false },
+        orgType: { dao: { match: true, weight: 0.5 } },
+      }).success,
+    ).toBe(true);
+  });
+
+  it("rejects unknown facet group", () => {
+    expect(
+      methodFacetsSchema.safeParse({
+        nonsense: { foo: true },
+      }).success,
+    ).toBe(false);
+  });
+
+  it("rejects unknown value within a known group", () => {
+    expect(
+      methodFacetsSchema.safeParse({
+        size: { gigantic: true },
+      }).success,
+    ).toBe(false);
+  });
+});
+
+describe("resolveFacetMatch", () => {
+  it("treats undefined as { match:false }", () => {
+    expect(resolveFacetMatch(undefined)).toEqual({
+      match: false,
+      weight: null,
+    });
+  });
+  it("preserves weight when given as object", () => {
+    expect(resolveFacetMatch({ match: true, weight: 1.5 })).toEqual({
+      match: true,
+      weight: 1.5,
+    });
+  });
+});
+
+describe("parseRequestedFacetsFromSearchParams", () => {
+  it("collects facet.* params across multiple values per group", () => {
+    const params = new URLSearchParams();
+    params.append("facet.size", "oneMember");
+    params.append("facet.orgType", "dao");
+    params.append("facet.orgType", "nonprofit");
+    const out = parseRequestedFacetsFromSearchParams(params);
+    expect(out.size).toEqual(["oneMember"]);
+    expect(out.orgType?.sort()).toEqual(["dao", "nonprofit"]);
+  });
+
+  it("silently drops unknown groups and values", () => {
+    const params = new URLSearchParams();
+    params.append("facet.size", "tiny");
+    params.append("facet.unknown", "dao");
+    params.append("foo", "bar");
+    expect(parseRequestedFacetsFromSearchParams(params)).toEqual({});
+  });
+});
+
+describe("flattenRequestedFacets", () => {
+  it("emits one entry per (group, value) pair", () => {
+    const flat = flattenRequestedFacets({
+      size: ["oneMember", "twoToFive"],
+      orgType: ["dao"],
+    });
+    expect(flat).toEqual([
+      { group: "size", value: "oneMember" },
+      { group: "size", value: "twoToFive" },
+      { group: "orgType", value: "dao" },
+    ]);
+  });
+});
diff --git a/tests/unit/methodRecommendations.test.ts b/tests/unit/methodRecommendations.test.ts
new file mode 100644
index 0000000..61d4b8c
--- /dev/null
+++ b/tests/unit/methodRecommendations.test.ts
@@ -0,0 +1,160 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const findManyMock = vi.fn();
+
+vi.mock("../../lib/server/env", () => ({
+  isDatabaseConfigured: () => true,
+}));
+
+vi.mock("../../lib/server/db", () => ({
+  prisma: {
+    methodFacet: {
+      findMany: (...args: unknown[]) => findManyMock(...args),
+    },
+  },
+}));
+
+import {
+  listMethodRecommendations,
+  scoreTemplatesByFacets,
+} from "../../lib/server/methodRecommendations";
+
+beforeEach(() => {
+  findManyMock.mockReset();
+});
+
+describe("listMethodRecommendations (CR-88 §9.2)", () => {
+  it("returns empty rankings when no facets are requested", async () => {
+    const result = await listMethodRecommendations({
+      section: "communication",
+      facets: {},
+    });
+    expect(result).toEqual({ rankedSlugs: [], matchesBySlug: {} });
+    expect(findManyMock).not.toHaveBeenCalled();
+  });
+
+  it("scores methods by counting matched (group, value) pairs", async () => {
+    findManyMock.mockResolvedValueOnce([
+      { slug: "loomio", group: "size", value: "thirteenToOneHundred" },
+      { slug: "loomio", group: "orgType", value: "workersCoop" },
+      { slug: "in-person", group: "size", value: "thirteenToOneHundred" },
+    ]);
+
+    const result = await listMethodRecommendations({
+      section: "communication",
+      facets: {
+        size: ["thirteenToOneHundred"],
+        orgType: ["workersCoop"],
+      },
+    });
+
+    expect(result).toEqual({
+      rankedSlugs: ["loomio", "in-person"],
+      matchesBySlug: {
+        loomio: {
+          score: 2,
+          matchedFacets: ["size:thirteenToOneHundred", "orgType:workersCoop"],
+        },
+        "in-person": {
+          score: 1,
+          matchedFacets: ["size:thirteenToOneHundred"],
+        },
+      },
+    });
+  });
+
+  it("returns null on query failure (caller falls back to authoring order)", async () => {
+    findManyMock.mockRejectedValueOnce(new Error("db down"));
+    const result = await listMethodRecommendations({
+      section: "communication",
+      facets: { size: ["oneMember"] },
+    });
+    expect(result).toBeNull();
+  });
+
+  it("dedupes (group, value) so the same row never double-counts", async () => {
+    findManyMock.mockResolvedValueOnce([
+      { slug: "loomio", group: "size", value: "twoToFive" },
+      { slug: "loomio", group: "size", value: "twoToFive" },
+    ]);
+    const result = await listMethodRecommendations({
+      section: "communication",
+      facets: { size: ["twoToFive"] },
+    });
+    expect(result?.matchesBySlug["loomio"]?.score).toBe(1);
+  });
+});
+
+describe("scoreTemplatesByFacets (CR-88 §9.1)", () => {
+  it("aggregates per-method matches per template", async () => {
+    findManyMock.mockResolvedValueOnce([
+      {
+        section: "communication",
+        slug: "loomio",
+        group: "size",
+        value: "twoToFive",
+      },
+      {
+        section: "decisionApproaches",
+        slug: "consensus-decision-making",
+        group: "orgType",
+        value: "workersCoop",
+      },
+    ]);
+
+    const result = await scoreTemplatesByFacets({
+      facets: {
+        size: ["twoToFive"],
+        orgType: ["workersCoop"],
+      },
+      templateMethods: [
+        {
+          templateSlug: "consensus",
+          methods: [
+            { section: "communication", slug: "loomio" },
+            {
+              section: "decisionApproaches",
+              slug: "consensus-decision-making",
+            },
+          ],
+        },
+        {
+          templateSlug: "monarch",
+          methods: [
+            {
+              section: "decisionApproaches",
+              slug: "benevolent-dictator",
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(result).toEqual([
+      {
+        templateSlug: "consensus",
+        score: 2,
+        matchedFacets: [
+          "communication:loomio:size:twoToFive",
+          "decisionApproaches:consensus-decision-making:orgType:workersCoop",
+        ],
+      },
+      { templateSlug: "monarch", score: 0, matchedFacets: [] },
+    ]);
+  });
+
+  it("returns 0-score entries for every template when facets are empty", async () => {
+    const result = await scoreTemplatesByFacets({
+      facets: {},
+      templateMethods: [
+        { templateSlug: "consensus", methods: [] },
+        { templateSlug: "monarch", methods: [] },
+      ],
+    });
+    expect(result).toEqual([
+      { templateSlug: "consensus", score: 0, matchedFacets: [] },
+      { templateSlug: "monarch", score: 0, matchedFacets: [] },
+    ]);
+    expect(findManyMock).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/unit/templateMethods.test.ts b/tests/unit/templateMethods.test.ts
new file mode 100644
index 0000000..2ecb847
--- /dev/null
+++ b/tests/unit/templateMethods.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import {
+  methodSlugFromTitle,
+  templateMethodsFromBody,
+} from "../../lib/server/templateMethods";
+
+describe("methodSlugFromTitle", () => {
+  it.each([
+    ["Consensus Decision-Making", "consensus-decision-making"],
+    ["Consent (Sociocracy)", "consent-sociocracy"],
+    ["Mutual aid", "mutual-aid"],
+    ["Workers’ Cooperative", "workers-cooperative"],
+    ["  Multiple   spaces  ", "multiple-spaces"],
+  ])("%s -> %s", (input, expected) => {
+    expect(methodSlugFromTitle(input)).toBe(expected);
+  });
+});
+
+describe("templateMethodsFromBody", () => {
+  it("extracts (section, slug) pairs and skips Values", () => {
+    const body = {
+      sections: [
+        {
+          categoryName: "Values",
+          entries: [{ title: "Mutuality" }],
+        },
+        {
+          categoryName: "Communication",
+          entries: [
+            { title: "In-Person Meetings" },
+            { title: "Loomio" },
+          ],
+        },
+        {
+          categoryName: "Decision-making",
+          entries: [{ title: "Consensus Decision-Making" }],
+        },
+        {
+          categoryName: "Conflict management",
+          entries: [{ title: "Restorative Justice" }],
+        },
+        {
+          categoryName: "Membership",
+          entries: [{ title: "Peer Sponsorship" }],
+        },
+      ],
+    };
+    const result = templateMethodsFromBody(body);
+    expect(result).toEqual([
+      { section: "communication", slug: "in-person-meetings" },
+      { section: "communication", slug: "loomio" },
+      { section: "decisionApproaches", slug: "consensus-decision-making" },
+      { section: "conflictManagement", slug: "restorative-justice" },
+      { section: "membership", slug: "peer-sponsorship" },
+    ]);
+  });
+
+  it("dedupes within a template", () => {
+    const body = {
+      sections: [
+        {
+          categoryName: "Communication",
+          entries: [{ title: "Loomio" }, { title: "Loomio" }],
+        },
+      ],
+    };
+    expect(templateMethodsFromBody(body)).toEqual([
+      { section: "communication", slug: "loomio" },
+    ]);
+  });
+
+  it("returns [] for malformed bodies", () => {
+    expect(templateMethodsFromBody(null)).toEqual([]);
+    expect(templateMethodsFromBody({})).toEqual([]);
+    expect(templateMethodsFromBody({ sections: "nope" })).toEqual([]);
+  });
+});

From d3bb8cdd0fc266ddbed2236d9e0a8470170bb134 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 20 Apr 2026 13:14:56 -0600
Subject: [PATCH 10/15] Template remove add, read-only, chips open modals

---
 .../cards/RuleCard/RuleCard.container.tsx     |   2 +
 .../cards/RuleCard/RuleCard.types.ts          |   3 +
 .../cards/RuleCard/RuleCard.view.tsx          |   3 +-
 .../TemplateChipDetailModal.tsx               | 354 ++++++++++++++++++
 .../TemplateReviewCard/TemplateReviewCard.tsx |  90 +++--
 lib/create/templateReviewMapping.ts           | 110 +++++-
 messages/en/create/customRule/coreValues.json |  35 ++
 messages/en/create/templateReview.json        |   8 +-
 tests/unit/templateReviewMapping.test.ts      |  70 ++++
 9 files changed, 632 insertions(+), 43 deletions(-)
 create mode 100644 app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx

diff --git a/app/components/cards/RuleCard/RuleCard.container.tsx b/app/components/cards/RuleCard/RuleCard.container.tsx
index 6605c02..4a39dc0 100644
--- a/app/components/cards/RuleCard/RuleCard.container.tsx
+++ b/app/components/cards/RuleCard/RuleCard.container.tsx
@@ -31,6 +31,7 @@ const RuleCardContainer = memo<RuleCardProps>(
     logoUrl,
     logoAlt,
     communityInitials,
+    hideCategoryAddButton = false,
   }) => {
     const size = sizeProp ?? "L";
 
@@ -76,6 +77,7 @@ const RuleCardContainer = memo<RuleCardProps>(
         logoUrl={logoUrl}
         logoAlt={logoAlt}
         communityInitials={communityInitials}
+        hideCategoryAddButton={hideCategoryAddButton}
       />
     );
   },
diff --git a/app/components/cards/RuleCard/RuleCard.types.ts b/app/components/cards/RuleCard/RuleCard.types.ts
index 8c5f67a..846374c 100644
--- a/app/components/cards/RuleCard/RuleCard.types.ts
+++ b/app/components/cards/RuleCard/RuleCard.types.ts
@@ -26,6 +26,8 @@ export interface RuleCardProps {
   logoUrl?: string;
   logoAlt?: string;
   communityInitials?: string;
+  /** Hide the per-category "+" add chip affordance (e.g. read-only template review). */
+  hideCategoryAddButton?: boolean;
 }
 
 export interface RuleCardViewProps {
@@ -42,4 +44,5 @@ export interface RuleCardViewProps {
   logoUrl?: string;
   logoAlt?: string;
   communityInitials?: string;
+  hideCategoryAddButton?: boolean;
 }
diff --git a/app/components/cards/RuleCard/RuleCard.view.tsx b/app/components/cards/RuleCard/RuleCard.view.tsx
index 84c0341..f416672 100644
--- a/app/components/cards/RuleCard/RuleCard.view.tsx
+++ b/app/components/cards/RuleCard/RuleCard.view.tsx
@@ -19,6 +19,7 @@ export function RuleCardView({
   logoUrl,
   logoAlt,
   communityInitials,
+  hideCategoryAddButton = false,
 }: RuleCardViewProps) {
   const t = useTranslation("ruleCard");
   const ariaLabel = t("ariaLabel")?.replace("{title}", title) || title;
@@ -280,7 +281,7 @@ export function RuleCardView({
                   onCustomChipClose={(chipId) => {
                     category.onCustomChipClose?.(category.name, chipId);
                   }}
-                  addButton={true}
+                  addButton={!hideCategoryAddButton}
                   addButtonText="" // Empty text for icon-only circular button
                   className="w-full"
                 />
diff --git a/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx b/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx
new file mode 100644
index 0000000..aa8bfab
--- /dev/null
+++ b/app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx
@@ -0,0 +1,354 @@
+"use client";
+
+import { useMemo } from "react";
+import Create from "../../modals/Create";
+import Chip from "../../controls/Chip";
+import InputLabel from "../../utility/InputLabel";
+import ContentLockup from "../../type/ContentLockup";
+import ModalTextAreaField from "../../../(app)/create/components/ModalTextAreaField";
+import { useMessages, useTranslation } from "../../../contexts/MessagesContext";
+import type { TemplateChipDetail } from "../../../../lib/create/templateReviewMapping";
+
+export interface TemplateChipDetailModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  detail: TemplateChipDetail | null;
+}
+
+/**
+ * Read-only mirror of the custom-rule per-chip modals. Shows the exact text
+ * from `messages/en/create/customRule/*.json` for the matched preset — never
+ * the template `body` placeholder. When no preset is found for the chip label,
+ * the modal surfaces a clear "details not available" note rather than falling
+ * back to seed copy.
+ */
+export function TemplateChipDetailModal({
+  isOpen,
+  onClose,
+  detail,
+}: TemplateChipDetailModalProps) {
+  const m = useMessages();
+  const t = useTranslation("create.templateReview.chipDetailModal");
+
+  const resolved = useMemo(() => resolveChipContent(detail, m), [detail, m]);
+
+  return (
+    <Create
+      isOpen={isOpen}
+      onClose={onClose}
+      backdropVariant="loginYellow"
+      headerContent={
+        <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
+          <ContentLockup
+            title={resolved?.title ?? ""}
+            description={resolved?.subtitle ?? ""}
+            variant="modal"
+            alignment="left"
+          />
+        </div>
+      }
+      showBackButton={false}
+      showNextButton
+      onNext={onClose}
+      nextButtonText={t("closeButton")}
+      ariaLabel={resolved?.title || "Template entry details"}
+    >
+      <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
+        {resolved?.body ?? (
+          <p className="font-inter text-[14px] leading-[20px] text-[color:var(--color-content-default-secondary,#a3a3a3)]">
+            {t("fallback.bodyLabel")}
+          </p>
+        )}
+      </div>
+    </Create>
+  );
+}
+
+type ResolvedChipContent = {
+  title: string;
+  subtitle: string;
+  body: React.ReactNode;
+};
+
+function resolveChipContent(
+  detail: TemplateChipDetail | null,
+  m: ReturnType<typeof useMessages>,
+): ResolvedChipContent | null {
+  if (!detail) return null;
+  const title = detail.chipLabel;
+
+  switch (detail.groupKey) {
+    case "coreValues": {
+      const cv = m.create.customRule.coreValues;
+      const preset = findCoreValuePreset(cv.values, detail.chipLabel);
+      if (!preset) return noPresetFallback(title);
+      return {
+        title,
+        subtitle: cv.detailModal.subtitle,
+        body: (
+          <>
+            <ModalTextAreaField
+              label={cv.detailModal.meaningLabel}
+              value={preset.meaning}
+              onChange={noop}
+              disabled
+              rows={4}
+            />
+            <ModalTextAreaField
+              label={cv.detailModal.signalsLabel}
+              value={preset.signals}
+              onChange={noop}
+              disabled
+              rows={4}
+            />
+          </>
+        ),
+      };
+    }
+
+    case "communication": {
+      const comm = m.create.customRule.communication;
+      const preset = findMethodByLabel(comm.methods, detail.chipLabel);
+      if (!preset) return noPresetFallback(title);
+      return {
+        title,
+        subtitle: preset.supportText,
+        body: (
+          <>
+            <ModalTextAreaField
+              label={comm.sectionHeadings.corePrinciple}
+              value={preset.sections.corePrinciple}
+              onChange={noop}
+              disabled
+              rows={6}
+            />
+            <ModalTextAreaField
+              label={comm.sectionHeadings.logisticsAdmin}
+              value={preset.sections.logisticsAdmin}
+              onChange={noop}
+              disabled
+              rows={6}
+            />
+            <ModalTextAreaField
+              label={comm.sectionHeadings.codeOfConduct}
+              value={preset.sections.codeOfConduct}
+              onChange={noop}
+              disabled
+              rows={6}
+            />
+          </>
+        ),
+      };
+    }
+
+    case "membership": {
+      const mem = m.create.customRule.membership;
+      const preset = findMethodByLabel(mem.methods, detail.chipLabel);
+      if (!preset) return noPresetFallback(title);
+      return {
+        title,
+        subtitle: preset.supportText,
+        body: (
+          <>
+            <ModalTextAreaField
+              label={mem.sectionHeadings.eligibility}
+              value={preset.sections.eligibility}
+              onChange={noop}
+              disabled
+              rows={6}
+            />
+            <ModalTextAreaField
+              label={mem.sectionHeadings.joiningProcess}
+              value={preset.sections.joiningProcess}
+              onChange={noop}
+              disabled
+              rows={6}
+            />
+            <ModalTextAreaField
+              label={mem.sectionHeadings.expectations}
+              value={preset.sections.expectations}
+              onChange={noop}
+              disabled
+              rows={6}
+            />
+          </>
+        ),
+      };
+    }
+
+    case "decisionApproaches": {
+      const da = m.create.customRule.decisionApproaches;
+      const preset = findMethodByLabel(da.methods, detail.chipLabel);
+      if (!preset) return noPresetFallback(title);
+      return {
+        title,
+        subtitle: preset.supportText,
+        body: (
+          <>
+            <ModalTextAreaField
+              label={da.sectionHeadings.corePrinciple}
+              value={preset.sections.corePrinciple}
+              onChange={noop}
+              disabled
+              rows={4}
+            />
+            <ReadOnlyScopeField
+              label={da.sectionHeadings.applicableScope}
+              scopes={preset.sections.applicableScope}
+            />
+            <ModalTextAreaField
+              label={da.sectionHeadings.stepByStepInstructions}
+              value={preset.sections.stepByStepInstructions}
+              onChange={noop}
+              disabled
+              rows={4}
+            />
+            <ReadOnlyValueField
+              label={da.sectionHeadings.consensusLevel}
+              value={`${preset.sections.consensusLevel}%`}
+            />
+            <ModalTextAreaField
+              label={da.sectionHeadings.objectionsDeadlocks}
+              value={preset.sections.objectionsDeadlocks}
+              onChange={noop}
+              disabled
+              rows={4}
+            />
+          </>
+        ),
+      };
+    }
+
+    case "conflictManagement": {
+      const cm = m.create.customRule.conflictManagement;
+      const preset = findMethodByLabel(cm.methods, detail.chipLabel);
+      if (!preset) return noPresetFallback(title);
+      return {
+        title,
+        subtitle: preset.supportText,
+        body: (
+          <>
+            <ModalTextAreaField
+              label={cm.sectionHeadings.corePrinciple}
+              value={preset.sections.corePrinciple}
+              onChange={noop}
+              disabled
+              rows={4}
+            />
+            <ReadOnlyScopeField
+              label={cm.sectionHeadings.applicableScope}
+              scopes={preset.sections.applicableScope}
+            />
+            <ModalTextAreaField
+              label={cm.sectionHeadings.processProtocol}
+              value={preset.sections.processProtocol}
+              onChange={noop}
+              disabled
+              rows={4}
+            />
+            <ModalTextAreaField
+              label={cm.sectionHeadings.restorationFallbacks}
+              value={preset.sections.restorationFallbacks}
+              onChange={noop}
+              disabled
+              rows={4}
+            />
+          </>
+        ),
+      };
+    }
+
+    default:
+      return noPresetFallback(title);
+  }
+}
+
+function noPresetFallback(title: string): ResolvedChipContent {
+  return { title, subtitle: "", body: null };
+}
+
+function noop() {
+  /* read-only */
+}
+
+/**
+ * Minimal read-only Applicable Scope row — locked chips shown as "selected"
+ * without the "+ Add" affordance.
+ */
+function ReadOnlyScopeField({
+  label,
+  scopes,
+}: {
+  label: string;
+  scopes: readonly string[];
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <InputLabel label={label} helpIcon size="s" palette="default" />
+      <div className="flex flex-wrap items-center gap-2">
+        {scopes.map((scope) => (
+          <Chip
+            key={scope}
+            label={scope}
+            state="selected"
+            palette="default"
+            size="s"
+            disabled
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ReadOnlyValueField({
+  label,
+  value,
+}: {
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <InputLabel label={label} helpIcon size="s" palette="default" />
+      <span className="font-inter text-[16px] font-medium leading-[20px] text-[color:var(--color-content-default-primary)]">
+        {value}
+      </span>
+    </div>
+  );
+}
+
+/** Case-insensitive, trim-tolerant method lookup by `label`. */
+function findMethodByLabel<T extends { label: string }>(
+  methods: readonly T[],
+  label: string,
+): T | undefined {
+  const normalized = label.trim().toLowerCase();
+  return methods.find((m) => m.label.trim().toLowerCase() === normalized);
+}
+
+type CoreValuePreset = { label: string; meaning: string; signals: string };
+
+function findCoreValuePreset(
+  values: readonly unknown[],
+  label: string,
+): CoreValuePreset | undefined {
+  const normalized = label.trim().toLowerCase();
+  for (const v of values) {
+    if (
+      v &&
+      typeof v === "object" &&
+      "label" in v &&
+      typeof (v as CoreValuePreset).label === "string" &&
+      (v as CoreValuePreset).label.trim().toLowerCase() === normalized
+    ) {
+      const preset = v as Partial<CoreValuePreset>;
+      return {
+        label: preset.label ?? label,
+        meaning: preset.meaning ?? "",
+        signals: preset.signals ?? "",
+      };
+    }
+  }
+  return undefined;
+}
diff --git a/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx b/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx
index 95a2896..27467ef 100644
--- a/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx
+++ b/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx
@@ -1,18 +1,23 @@
 "use client";
 
+import { useMemo, useState } from "react";
 import Image from "next/image";
 import RuleCard from "../RuleCard";
-import type { RuleCardProps } from "../RuleCard/RuleCard.types";
+import type {
+  Category,
+  RuleCardProps,
+} from "../RuleCard/RuleCard.types";
 import { getAssetPath } from "../../../../lib/assetUtils";
 import type { RuleTemplateDto } from "../../../../lib/create/fetchTemplates";
 import {
-  templateBodyToCategories,
+  templateBodyToReviewData,
   templateSummaryFromBody,
 } from "../../../../lib/create/templateReviewMapping";
 import {
   getGovernanceTemplateCatalogEntry,
 } from "../../../../lib/templates/governanceTemplateCatalog";
 import { TEMPLATE_GRID_FALLBACK_PRESENTATION } from "../../../../lib/templates/templateGridPresentation";
+import { TemplateChipDetailModal } from "./TemplateChipDetailModal";
 
 export interface TemplateReviewCardProps {
   template: RuleTemplateDto;
@@ -24,7 +29,9 @@ export interface TemplateReviewCardProps {
 
 /**
  * Expanded RuleCard for template review: surfaces + icon from Figma catalog (21764-16435);
- * tag rows from API `body`.
+ * tag rows from API `body`. Chip clicks open a read-only detail modal per
+ * facet group (values / communication / membership / decision-making / conflict
+ * management) so reviewers can see what each chip means without editing.
  */
 export function TemplateReviewCard({
   template,
@@ -33,33 +40,60 @@ export function TemplateReviewCard({
 }: TemplateReviewCardProps) {
   const catalog = getGovernanceTemplateCatalogEntry(template.slug);
   const pres = catalog ?? TEMPLATE_GRID_FALLBACK_PRESENTATION;
-  const categories = templateBodyToCategories(template.body);
+  const { categories: rawCategories, chipDetailsByChipId } = useMemo(
+    () => templateBodyToReviewData(template.body),
+    [template.body],
+  );
   const summary = templateSummaryFromBody(template.description, template.body);
 
+  const [activeChipId, setActiveChipId] = useState<string | null>(null);
+
+  const categories = useMemo<Category[]>(
+    () =>
+      rawCategories.map((category) => ({
+        ...category,
+        onChipClick: (_categoryName, chipId) => {
+          setActiveChipId(chipId);
+        },
+      })),
+    [rawCategories],
+  );
+
+  const activeDetail =
+    activeChipId !== null ? chipDetailsByChipId[activeChipId] ?? null : null;
+
   return (
-    <RuleCard
-      title={template.title}
-      description={summary}
-      expanded
-      size={size}
-      categories={categories}
-      backgroundColor={pres.backgroundColor}
-      className={ruleCardClassName}
-      onClick={() => {}}
-      icon={
-        <Image
-          src={getAssetPath(pres.iconPath)}
-          alt={template.title}
-          width={90}
-          height={90}
-          className="
-                  max-[639px]:w-[40px] max-[639px]:h-[40px]
-                  min-[640px]:max-[1023px]:w-[56px] min-[640px]:max-[1023px]:h-[56px]
-                  min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
-                  min-[1440px]:w-[90px] min-[1440px]:h-[90px]
-                "
-        />
-      }
-    />
+    <>
+      <RuleCard
+        title={template.title}
+        description={summary}
+        expanded
+        size={size}
+        categories={categories}
+        backgroundColor={pres.backgroundColor}
+        className={ruleCardClassName}
+        onClick={() => {}}
+        hideCategoryAddButton
+        icon={
+          <Image
+            src={getAssetPath(pres.iconPath)}
+            alt={template.title}
+            width={90}
+            height={90}
+            className="
+                    max-[639px]:w-[40px] max-[639px]:h-[40px]
+                    min-[640px]:max-[1023px]:w-[56px] min-[640px]:max-[1023px]:h-[56px]
+                    min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
+                    min-[1440px]:w-[90px] min-[1440px]:h-[90px]
+                  "
+          />
+        }
+      />
+      <TemplateChipDetailModal
+        isOpen={activeChipId !== null}
+        onClose={() => setActiveChipId(null)}
+        detail={activeDetail}
+      />
+    </>
   );
 }
diff --git a/lib/create/templateReviewMapping.ts b/lib/create/templateReviewMapping.ts
index 60f57ba..b054453 100644
--- a/lib/create/templateReviewMapping.ts
+++ b/lib/create/templateReviewMapping.ts
@@ -21,27 +21,111 @@ function isDocumentSection(
 }
 
 /**
- * Maps API template `body` (published-rule document shape) to RuleCard category rows.
+ * Known facet groups that template sections map to. Matches the five modals on
+ * the custom-rule create flow (`m.create.customRule.*`).
  */
-export function templateBodyToCategories(body: unknown): Category[] {
-  if (!body || typeof body !== "object") return [];
-  const sections = (body as Record<string, unknown>).sections;
-  if (!Array.isArray(sections)) return [];
+export type TemplateFacetGroupKey =
+  | "coreValues"
+  | "communication"
+  | "membership"
+  | "decisionApproaches"
+  | "conflictManagement";
 
-  const out: Category[] = [];
+/**
+ * Normalize a section `categoryName` (as it appears in a template's `body`)
+ * to the custom-rule facet-group key. Returns `null` for unknown categories.
+ * Keys are matched case- and punctuation-insensitively so variations like
+ * "Decision making" / "Decision-making" resolve to the same group.
+ */
+export function templateCategoryToGroupKey(
+  categoryName: string,
+): TemplateFacetGroupKey | null {
+  const key = categoryName.toLowerCase().replace(/[^a-z]+/g, "");
+  switch (key) {
+    case "values":
+    case "corevalues":
+      return "coreValues";
+    case "communication":
+    case "communications":
+      return "communication";
+    case "membership":
+    case "memberships":
+      return "membership";
+    case "decisionmaking":
+    case "decisionapproaches":
+    case "decisions":
+      return "decisionApproaches";
+    case "conflictmanagement":
+    case "conflict":
+    case "conflictresolution":
+      return "conflictManagement";
+    default:
+      return null;
+  }
+}
+
+/**
+ * Detail for a single chip rendered on a template review — includes the raw
+ * entry fields plus the facet-group key so a click can open the matching
+ * read-only modal (chip `label` is used to look up the preset method inside
+ * the group).
+ */
+export interface TemplateChipDetail {
+  chipId: string;
+  chipLabel: string;
+  categoryName: string;
+  groupKey: TemplateFacetGroupKey | null;
+  body: string;
+}
+
+/**
+ * Maps API template `body` (published-rule document shape) to RuleCard category
+ * rows **plus** a chipId → detail lookup for wiring chip clicks to the
+ * read-only detail modal.
+ */
+export function templateBodyToReviewData(body: unknown): {
+  categories: Category[];
+  chipDetailsByChipId: Record<string, TemplateChipDetail>;
+} {
+  const empty = { categories: [] as Category[], chipDetailsByChipId: {} };
+  if (!body || typeof body !== "object") return empty;
+  const sections = (body as Record<string, unknown>).sections;
+  if (!Array.isArray(sections)) return empty;
+
+  const categories: Category[] = [];
+  const chipDetailsByChipId: Record<string, TemplateChipDetail> = {};
   for (const raw of sections) {
     if (!isDocumentSection(raw)) continue;
-    const chipOptions: ChipOption[] = raw.entries.map((e, i) => ({
-      id: `${raw.categoryName}-${i}`,
-      label: e.title,
-      state: "unselected",
-    }));
-    out.push({
+    const groupKey = templateCategoryToGroupKey(raw.categoryName);
+    const chipOptions: ChipOption[] = raw.entries.map((e, i) => {
+      const chipId = `${raw.categoryName}-${i}`;
+      chipDetailsByChipId[chipId] = {
+        chipId,
+        chipLabel: e.title,
+        categoryName: raw.categoryName,
+        groupKey,
+        body: e.body,
+      };
+      return {
+        id: chipId,
+        label: e.title,
+        state: "unselected",
+      };
+    });
+    categories.push({
       name: raw.categoryName,
       chipOptions,
     });
   }
-  return out;
+  return { categories, chipDetailsByChipId };
+}
+
+/**
+ * Backwards-compatible wrapper kept so existing consumers can still grab just
+ * the rows when they don't need chip-click wiring.
+ */
+export function templateBodyToCategories(body: unknown): Category[] {
+  return templateBodyToReviewData(body).categories;
 }
 
 /**
diff --git a/messages/en/create/customRule/coreValues.json b/messages/en/create/customRule/coreValues.json
index 23b71f9..6e853e0 100644
--- a/messages/en/create/customRule/coreValues.json
+++ b/messages/en/create/customRule/coreValues.json
@@ -324,6 +324,41 @@
       "label": "Participation",
       "meaning": "Democracy requires the active engagement of all members in the decision-making process. To us, this means we require active contribution to maintain voting rights. We acknowledge a tension with Efficiency (Too many cooks).",
       "signals": "Creating barriers to entry that make it difficult for new members to have a voice or ignoring the input of the broader membership."
+    },
+    {
+      "label": "Reliability",
+      "meaning": "Members can count on one another to follow through on what they commit to. To us, this means we do what we say we will do and notify others early when plans must change. We acknowledge a tension with Flexibility (Sticking to the plan vs adapting).",
+      "signals": "Missing deadlines without notice or making ambitious commitments the group knows it cannot keep."
+    },
+    {
+      "label": "Resilience",
+      "meaning": "The group can absorb shocks and keep functioning when conditions get hard. To us, this means we build redundancy into critical roles and document institutional knowledge so no single departure sinks the work. We acknowledge a tension with Efficiency (Backup capacity vs lean operations).",
+      "signals": "Concentrating all critical knowledge in one person or ignoring warning signs of burnout until key members quit."
+    },
+    {
+      "label": "Solidarity",
+      "meaning": "We stand with one another, especially when members face pressure from outside forces. To us, this means we defend members against unjust treatment and share risk collectively rather than leaving anyone exposed. We acknowledge a tension with Individualism (Collective defense vs personal autonomy).",
+      "signals": "Staying silent when a member faces mistreatment or leaving vulnerable members to handle external pressure alone."
+    },
+    {
+      "label": "Stewardship",
+      "meaning": "We take responsibility for tending the shared resources and relationships entrusted to us. To us, this means we make decisions with future members in mind and reinvest in the infrastructure we depend on. We acknowledge a tension with Efficiency (Long-term care vs short-term output).",
+      "signals": "Extracting short-term value from shared resources without replenishing them or deferring maintenance until systems fail."
+    },
+    {
+      "label": "Transparency",
+      "meaning": "Decisions, finances, and processes are visible to the membership by default. To us, this means we publish meeting notes, budgets, and decision logs where all members can read them. We acknowledge a tension with Privacy (Open books vs personal disclosure).",
+      "signals": "Making major decisions in private channels and only announcing outcomes, or hiding finances behind vague summaries."
+    },
+    {
+      "label": "Trust",
+      "meaning": "We extend good faith to one another and build relationships that can withstand disagreement. To us, this means we interpret others charitably and repair quickly when trust is strained. We acknowledge a tension with Accountability (Assuming good intent vs naming harm).",
+      "signals": "Jumping to worst-case interpretations of ambiguous behavior or withholding repair when a breach could be addressed directly."
+    },
+    {
+      "label": "Voluntarism",
+      "meaning": "Participation is freely chosen rather than coerced, and contribution is recognized on its own terms. To us, this means we don't pressure members into tasks they haven't consented to and we honor their right to step back. We acknowledge a tension with Reliability (Free participation vs guaranteed coverage).",
+      "signals": "Using guilt or social pressure to extract labor from members or shaming people who decline additional responsibilities."
     }
   ]
 }
diff --git a/messages/en/create/templateReview.json b/messages/en/create/templateReview.json
index 4c5ad58..b8958c3 100644
--- a/messages/en/create/templateReview.json
+++ b/messages/en/create/templateReview.json
@@ -13,5 +13,11 @@
     "notFound": "This template was not found.",
     "applyFailed": "Something went wrong. Please try again."
   },
-  "loading": "Loading template…"
+  "loading": "Loading template…",
+  "chipDetailModal": {
+    "closeButton": "Close",
+    "fallback": {
+      "bodyLabel": "Details for this entry are not yet available."
+    }
+  }
 }
diff --git a/tests/unit/templateReviewMapping.test.ts b/tests/unit/templateReviewMapping.test.ts
index 17382af..b6b8cbf 100644
--- a/tests/unit/templateReviewMapping.test.ts
+++ b/tests/unit/templateReviewMapping.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, it } from "vitest";
 import {
   templateBodyToCategories,
+  templateBodyToReviewData,
+  templateCategoryToGroupKey,
   templateSummaryFromBody,
 } from "../../lib/create/templateReviewMapping";
 
@@ -46,4 +48,72 @@ describe("templateReviewMapping", () => {
     };
     expect(templateSummaryFromBody("", body)).toBe("First paragraph.");
   });
+
+  describe("templateCategoryToGroupKey", () => {
+    it.each([
+      ["Values", "coreValues"],
+      ["Core values", "coreValues"],
+      ["Communication", "communication"],
+      ["Membership", "membership"],
+      ["Decision-making", "decisionApproaches"],
+      ["Decision making", "decisionApproaches"],
+      ["Conflict management", "conflictManagement"],
+      ["Conflict Resolution", "conflictManagement"],
+    ] as const)("maps %s -> %s", (input, expected) => {
+      expect(templateCategoryToGroupKey(input)).toBe(expected);
+    });
+
+    it("returns null for unknown categories", () => {
+      expect(templateCategoryToGroupKey("Mystery")).toBeNull();
+    });
+  });
+
+  describe("templateBodyToReviewData", () => {
+    it("returns group-keyed chip detail lookup aligned with categories", () => {
+      const body = {
+        sections: [
+          {
+            categoryName: "Decision-making",
+            entries: [
+              { title: "Consensus Decision-Making", body: "body-1" },
+              { title: "Modified Consensus", body: "body-2" },
+            ],
+          },
+          {
+            categoryName: "Values",
+            entries: [{ title: "Solidarity", body: "body-3" }],
+          },
+          {
+            categoryName: "Mystery",
+            entries: [{ title: "Unknown", body: "body-4" }],
+          },
+        ],
+      };
+      const { categories, chipDetailsByChipId } = templateBodyToReviewData(body);
+      expect(categories).toHaveLength(3);
+
+      const firstChipId = categories[0].chipOptions[0].id;
+      expect(chipDetailsByChipId[firstChipId]).toEqual({
+        chipId: firstChipId,
+        chipLabel: "Consensus Decision-Making",
+        categoryName: "Decision-making",
+        groupKey: "decisionApproaches",
+        body: "body-1",
+      });
+      expect(
+        chipDetailsByChipId[categories[1].chipOptions[0].id].groupKey,
+      ).toBe("coreValues");
+      expect(
+        chipDetailsByChipId[categories[2].chipOptions[0].id].groupKey,
+      ).toBeNull();
+    });
+
+    it("is resilient to bad body input", () => {
+      expect(templateBodyToReviewData(null).categories).toEqual([]);
+      expect(templateBodyToReviewData({}).chipDetailsByChipId).toEqual({});
+      expect(templateBodyToReviewData({ sections: "nope" }).categories).toEqual(
+        [],
+      );
+    });
+  });
 });

From c08cd62872347324ce7bfec5aa79edc2775ce76d Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 20 Apr 2026 16:45:15 -0600
Subject: [PATCH 11/15] Template flow cleaned up

---
 app/(app)/create/CreateFlowLayoutClient.tsx   | 274 +++++++++++-------
 .../create/context/CreateFlowContext.tsx      |  22 ++
 .../screens/review/CommunityReviewScreen.tsx  |  50 +++-
 .../screens/review/FinalReviewScreen.tsx      |  56 +++-
 app/(app)/create/types.ts                     |  51 ++--
 .../utils/clearCreateFlowPersistedDrafts.ts   |  22 ++
 .../utils/createFlowFooterClassNames.ts       |  24 ++
 .../utils/customRuleConfirmFooterSteps.ts     |  69 +++++
 .../create/utils/hasCreateFlowUserInput.ts    |  27 --
 .../templates/TemplatesPageClient.tsx         |  61 +++-
 .../navigation/TopNav/TopNav.container.tsx    |  20 +-
 .../RuleStack/RuleStack.container.tsx         |   6 +
 docs/create-flow.md                           |  22 +-
 docs/guides/backend-linear-tickets.md         |   4 +-
 docs/guides/template-recommendation-matrix.md |  34 ++-
 lib/create/applyTemplatePrefill.ts            | 145 +++++++++
 lib/create/buildFinalReviewCategories.ts      | 152 ++++++++++
 lib/create/loadTemplateReviewBySlug.ts        |  44 +++
 lib/create/methodSlugFromTitle.ts             |  20 ++
 lib/server/templateMethods.ts                 |  14 +-
 lib/server/validation/createFlowSchemas.ts    |   7 +
 messages/en/create/community/review.json      |   4 +-
 messages/en/create/templateReview.json        |   3 +-
 tests/components/FinalReviewPage.test.tsx     |  43 +++
 tests/components/ReviewPage.test.tsx          |  83 +++++-
 tests/components/TopNav.test.tsx              |  55 +++-
 tests/contexts/CreateFlowContext.test.tsx     | 111 +++++++
 tests/pages/templates.test.jsx                |  67 ++++-
 tests/unit/RuleStack.test.jsx                 |  27 ++
 tests/unit/applyTemplatePrefill.test.ts       | 109 +++++++
 tests/unit/buildFinalReviewCategories.test.ts | 135 +++++++++
 tests/unit/hasCreateFlowUserInput.test.ts     |  38 ---
 32 files changed, 1545 insertions(+), 254 deletions(-)
 create mode 100644 app/(app)/create/utils/clearCreateFlowPersistedDrafts.ts
 create mode 100644 app/(app)/create/utils/createFlowFooterClassNames.ts
 create mode 100644 app/(app)/create/utils/customRuleConfirmFooterSteps.ts
 delete mode 100644 app/(app)/create/utils/hasCreateFlowUserInput.ts
 create mode 100644 lib/create/applyTemplatePrefill.ts
 create mode 100644 lib/create/buildFinalReviewCategories.ts
 create mode 100644 lib/create/loadTemplateReviewBySlug.ts
 create mode 100644 lib/create/methodSlugFromTitle.ts
 create mode 100644 tests/contexts/CreateFlowContext.test.tsx
 create mode 100644 tests/unit/applyTemplatePrefill.test.ts
 create mode 100644 tests/unit/buildFinalReviewCategories.test.ts
 delete mode 100644 tests/unit/hasCreateFlowUserInput.test.ts

diff --git a/app/(app)/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx
index 36d6f24..057617d 100644
--- a/app/(app)/create/CreateFlowLayoutClient.tsx
+++ b/app/(app)/create/CreateFlowLayoutClient.tsx
@@ -34,11 +34,17 @@ import {
 } from "./utils/anonymousDraftStorage";
 import { deleteServerDraft } from "../../../lib/create/api";
 import { writeLastPublishedRule } from "../../../lib/create/lastPublishedRule";
-import {
-  fetchTemplateBySlug,
-  type RuleTemplateDto,
-} from "../../../lib/create/fetchTemplates";
+import { buildTemplateCustomizePrefill } from "../../../lib/create/applyTemplatePrefill";
+import { loadTemplateReviewBySlug } from "../../../lib/create/loadTemplateReviewBySlug";
 import messages from "../../../messages/en/index";
+import {
+  CREATE_FLOW_FOOTER_BUTTON_CLASS,
+  CREATE_FLOW_FOOTER_BUTTON_ON_DARK_CLASS,
+} from "./utils/createFlowFooterClassNames";
+import {
+  CUSTOM_RULE_CONFIRM_FOOTER_STEP_BY_STEP,
+  type CustomRuleConfirmFooterStep,
+} from "./utils/customRuleConfirmFooterSteps";
 import { useAuthModal } from "../../contexts/AuthModalContext";
 import { useMessages, useTranslation } from "../../contexts/MessagesContext";
 import { PostLoginDraftTransfer } from "./PostLoginDraftTransfer";
@@ -114,7 +120,8 @@ function CreateFlowLayoutContent({
   } = useCreateFlowNavigation(
     skipCommunitySave ? { skipCommunitySave: true } : undefined,
   );
-  const { state, clearState, updateState } = useCreateFlow();
+  const { state, clearState, updateState, resetCustomRuleSelections } =
+    useCreateFlow();
   const { draftSaveBannerMessage, setDraftSaveBannerMessage } =
     useCreateFlowDraftSaveBanner();
   const [publishBannerMessage, setPublishBannerMessage] = useState<
@@ -188,38 +195,139 @@ function CreateFlowLayoutContent({
     );
   }, [state, router, openLogin]);
 
-  const handleUseTemplateWithoutChanges = useCallback(async () => {
+  /**
+   * Customize flow from a template-review page. Applies the template's
+   * customize selections onto `CreateFlowState` so the custom-rule screens
+   * render with chips pre-highlighted, then routes to `core-values` once
+   * the community name is set — otherwise to `informational` with a
+   * `pendingTemplateAction` pin so `/create/review` later redirects past
+   * itself straight to `core-values` (see `CommunityReviewScreen`).
+   *
+   * Why title alone? Other community-stage fields (e.g.
+   * `communityStructureChipSnapshots`) are sticky once the user lands on
+   * those screens, so they can't reliably answer "has the user given us
+   * real input yet?". A non-empty community name is the minimum bar
+   * `buildPublishPayload` already enforces — we reuse that here.
+   *
+   * Direct entry (marketing home "Popular templates" or `/templates`
+   * landed on directly) wipes the anonymous draft at the *click site* via
+   * `clearCreateFlowPersistedDrafts` before navigating, so `state.title`
+   * is empty here and the no-community branch fires naturally. No
+   * URL-marker plumbing needed in this handler.
+   */
+  const handleCustomizeTemplate = useCallback(async () => {
     if (!templateReviewSlug) return;
     setTemplateReviewApplyError(null);
     setIsApplyingTemplate(true);
-    const result = await fetchTemplateBySlug(templateReviewSlug);
+    const loaded = await loadTemplateReviewBySlug(templateReviewSlug);
     setIsApplyingTemplate(false);
-    if (result === null) {
-      setTemplateReviewApplyError(messages.create.templateReview.errors.notFound);
+    if (loaded.ok === false) {
+      setTemplateReviewApplyError(loaded.message);
       return;
     }
-    if ("error" in result) {
-      setTemplateReviewApplyError(result.error);
+    const prefill = buildTemplateCustomizePrefill(loaded.template.body);
+    const hasCommunityName =
+      typeof state.title === "string" && state.title.trim().length > 0;
+    // Prefill merges (shallow) with current state. When we have to bounce the
+    // user to the community stage first, pin a pendingTemplateAction so
+    // `/create/review` knows to skip past itself to `core-values` later.
+    updateState({
+      ...prefill,
+      ...(hasCommunityName
+        ? { pendingTemplateAction: undefined }
+        : {
+            pendingTemplateAction: {
+              slug: templateReviewSlug,
+              mode: "customize",
+            },
+          }),
+    });
+    router.push(
+      hasCommunityName ? "/create/core-values" : "/create/informational",
+    );
+  }, [router, state.title, templateReviewSlug, updateState]);
+
+  /**
+   * "Use without changes" from a template-review page. Drops users into the
+   * review-and-complete stage (`confirm-stakeholders` → `final-review`) so the
+   * publish flow — and its server-enforced sign-in gate (`publishRule` 401 →
+   * `openLogin`) — is reused. The template body becomes the rule document;
+   * the user's community name remains the rule title.
+   *
+   * Community-name branch: apply template body/summary immediately and jump
+   * to `confirm-stakeholders`.
+   *
+   * No-community-name branch: same template body/summary apply so state is
+   * ready, plus a `pendingTemplateAction` pin so `/create/review` later
+   * redirects past itself straight to `confirm-stakeholders` once community
+   * data is captured (see `CommunityReviewScreen`). Users aren't forced back
+   * through the template picker just to pick the same template again.
+   *
+   * Direct entry (marketing home "Popular templates" or `/templates`
+   * landed on directly) wipes the anonymous draft at the click site via
+   * `clearCreateFlowPersistedDrafts` before navigating, so `state.title`
+   * is empty and the no-community branch fires naturally.
+   */
+  const handleUseTemplateWithoutChanges = useCallback(async () => {
+    if (!templateReviewSlug) return;
+    setTemplateReviewApplyError(null);
+
+    setIsApplyingTemplate(true);
+    const loaded = await loadTemplateReviewBySlug(templateReviewSlug);
+    setIsApplyingTemplate(false);
+    if (loaded.ok === false) {
+      setTemplateReviewApplyError(loaded.message);
       return;
     }
-    const template: RuleTemplateDto = result;
+    const { template } = loaded;
     const doc = template.body;
     if (!doc || typeof doc !== "object" || Array.isArray(doc)) {
       setTemplateReviewApplyError(messages.create.templateReview.errors.applyFailed);
       return;
     }
+    const sectionsRaw = (doc as { sections?: unknown }).sections;
+    const sections = Array.isArray(sectionsRaw)
+      ? (sectionsRaw as Record<string, unknown>[])
+      : [];
+    if (sections.length === 0) {
+      setTemplateReviewApplyError(messages.create.templateReview.errors.applyFailed);
+      return;
+    }
+
+    // Using the template verbatim: scrub any prior customize picks so they
+    // don't bleed into `document.coreValues` at publish time.
+    resetCustomRuleSelections();
+
     const summaryRaw =
       typeof template.description === "string"
         ? template.description.trim()
         : "";
-    writeLastPublishedRule({
-      id: `template:${template.slug}`,
-      title: template.title,
-      summary: summaryRaw.length > 0 ? summaryRaw : null,
-      document: doc as Record<string, unknown>,
+    const hasCommunityName =
+      typeof state.title === "string" && state.title.trim().length > 0;
+    updateState({
+      sections,
+      ...(summaryRaw.length > 0 ? { summary: summaryRaw } : {}),
+      ...(hasCommunityName
+        ? { pendingTemplateAction: undefined }
+        : {
+            pendingTemplateAction: {
+              slug: templateReviewSlug,
+              mode: "useWithoutChanges",
+            },
+          }),
     });
-    router.push("/create/completed");
-  }, [router, templateReviewSlug]);
+    router.push(
+      hasCommunityName
+        ? "/create/confirm-stakeholders"
+        : "/create/informational",
+    );
+  }, [
+    resetCustomRuleSelections,
+    router,
+    state.title,
+    templateReviewSlug,
+    updateState,
+  ]);
 
   const runAuthenticatedExit = useCreateFlowExit({
     state,
@@ -360,8 +468,16 @@ function CreateFlowLayoutContent({
     currentStep,
   );
 
-  const footerPrimaryButtonClass =
-    "md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]";
+  /**
+   * Custom Rule stage "confirm selection" steps: all five render the same
+   * primary footer button, differing only by disable predicate and label.
+   * Driving JSX from a config keeps the five sites aligned — adding a new
+   * selection screen means one row here, not a new branch below.
+   */
+  const customRuleConfirmFooter: CustomRuleConfirmFooterStep | undefined =
+    currentStep != null
+      ? CUSTOM_RULE_CONFIRM_FOOTER_STEP_BY_STEP.get(currentStep)
+      : undefined;
 
   const hasTopOverlays =
     Boolean(draftSaveBannerMessage) ||
@@ -483,7 +599,7 @@ function CreateFlowLayoutContent({
                   palette="default"
                   size="xsmall"
                   disabled={isApplyingTemplate}
-                  className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)] !text-white"
+                  className={CREATE_FLOW_FOOTER_BUTTON_ON_DARK_CLASS}
                   onClick={() => void handleUseTemplateWithoutChanges()}
                 >
                   {messages.create.templateReview.footer.useWithoutChanges}
@@ -493,17 +609,8 @@ function CreateFlowLayoutContent({
                   palette="default"
                   size="xsmall"
                   disabled={isApplyingTemplate}
-                  title={
-                    messages.create.templateReview.footer.customizeAriaHint
-                  }
-                  className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
-                  onClick={() => {
-                    if (!templateReviewSlug) return;
-                    // Preserve template slug for a future customize / prefill ticket (informational does not read it yet).
-                    router.push(
-                      `/create/informational?template=${encodeURIComponent(templateReviewSlug)}`,
-                    );
-                  }}
+                  className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
+                  onClick={() => void handleCustomizeTemplate()}
                 >
                   {messages.create.templateReview.footer.customize}
                 </Button>
@@ -513,8 +620,12 @@ function CreateFlowLayoutContent({
                 buttonType="filled"
                 palette="default"
                 size="xsmall"
-                disabled={isPublishing}
-                className={footerPrimaryButtonClass}
+                disabled={
+                  isPublishing ||
+                  typeof state.title !== "string" ||
+                  state.title.trim().length === 0
+                }
+                className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
                 onClick={() => {
                   goToNextStep();
                 }}
@@ -528,7 +639,7 @@ function CreateFlowLayoutContent({
                   palette="default"
                   size="xsmall"
                   disabled={isPublishing}
-                  className={footerPrimaryButtonClass}
+                  className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
                   onClick={() => {
                     goToNextStep();
                   }}
@@ -545,7 +656,7 @@ function CreateFlowLayoutContent({
                     communitySaveMagicLinkSuccess ||
                     !isValidCreateFlowSaveEmail(state.communitySaveEmail)
                   }
-                  className={footerPrimaryButtonClass}
+                  className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
                   onClick={() => {
                     void handleCommunitySaveMagicLinkSubmit();
                   }}
@@ -562,8 +673,11 @@ function CreateFlowLayoutContent({
                   palette="default"
                   size="xsmall"
                   disabled={isPublishing}
-                  className={footerPrimaryButtonClass}
+                  className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
                   onClick={() => {
+                    // Scrub any prior template-customize prefill so entering
+                    // the custom-rule stage from review is always a clean slate.
+                    resetCustomRuleSelections();
                     goToNextStep();
                   }}
                 >
@@ -574,93 +688,35 @@ function CreateFlowLayoutContent({
                   palette="default"
                   size="xsmall"
                   disabled={isPublishing}
-                  className={footerPrimaryButtonClass}
+                  className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
                   onClick={() => {
-                    router.push("/templates");
+                    // `fromFlow=1` tells `/templates` to skip the fresh-slate
+                    // draft clear it normally runs on template click, so the
+                    // user's in-progress Create Community stage survives this
+                    // detour. Direct entries to `/templates` (no marker) and
+                    // home "Popular templates" clicks always start fresh by
+                    // wiping anonymous draft storage at click time.
+                    router.push("/templates?fromFlow=1");
                   }}
                 >
                   {footer.createFromTemplate}
                 </Button>
               </div>
-            ) : currentStep === "core-values" && nextStep ? (
+            ) : customRuleConfirmFooter && nextStep ? (
               <Button
                 buttonType="filled"
                 palette="default"
                 size="xsmall"
                 disabled={
                   isPublishing ||
-                  (state.selectedCoreValueIds?.length ?? 0) === 0
+                  customRuleConfirmFooter.selectionIds(state).length === 0
                 }
-                className={footerPrimaryButtonClass}
+                className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
                 onClick={() => {
                   goToNextStep();
                 }}
               >
-                {footer.confirmCoreValues}
-              </Button>
-            ) : currentStep === "communication-methods" && nextStep ? (
-              <Button
-                buttonType="filled"
-                palette="default"
-                size="xsmall"
-                disabled={
-                  isPublishing ||
-                  (state.selectedCommunicationMethodIds?.length ?? 0) === 0
-                }
-                className={footerPrimaryButtonClass}
-                onClick={() => {
-                  goToNextStep();
-                }}
-              >
-                {footer.confirmCommunication}
-              </Button>
-            ) : currentStep === "membership-methods" && nextStep ? (
-              <Button
-                buttonType="filled"
-                palette="default"
-                size="xsmall"
-                disabled={
-                  isPublishing ||
-                  (state.selectedMembershipMethodIds?.length ?? 0) === 0
-                }
-                className={footerPrimaryButtonClass}
-                onClick={() => {
-                  goToNextStep();
-                }}
-              >
-                {footer.confirmMembership}
-              </Button>
-            ) : currentStep === "decision-approaches" && nextStep ? (
-              <Button
-                buttonType="filled"
-                palette="default"
-                size="xsmall"
-                disabled={
-                  isPublishing ||
-                  (state.selectedDecisionApproachIds?.length ?? 0) === 0
-                }
-                className={footerPrimaryButtonClass}
-                onClick={() => {
-                  goToNextStep();
-                }}
-              >
-                {footer.confirmDecisionApproaches}
-              </Button>
-            ) : currentStep === "conflict-management" && nextStep ? (
-              <Button
-                buttonType="filled"
-                palette="default"
-                size="xsmall"
-                disabled={
-                  isPublishing ||
-                  (state.selectedConflictManagementIds?.length ?? 0) === 0
-                }
-                className={footerPrimaryButtonClass}
-                onClick={() => {
-                  goToNextStep();
-                }}
-              >
-                {footer.confirmConflictManagement}
+                {footer[customRuleConfirmFooter.footerMessageKey]}
               </Button>
             ) : nextStep ? (
               <Button
@@ -668,7 +724,7 @@ function CreateFlowLayoutContent({
                 palette="default"
                 size="xsmall"
                 disabled={isPublishing}
-                className={footerPrimaryButtonClass}
+                className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
                 onClick={() => {
                   if (currentStep === "final-review") {
                     void handleFinalize();
diff --git a/app/(app)/create/context/CreateFlowContext.tsx b/app/(app)/create/context/CreateFlowContext.tsx
index 4ce6097..eeb989a 100644
--- a/app/(app)/create/context/CreateFlowContext.tsx
+++ b/app/(app)/create/context/CreateFlowContext.tsx
@@ -167,12 +167,34 @@ export function CreateFlowProvider({
     clearCoreValueDetailsLocalStorage();
   }, []);
 
+  // Keys produced by the Create Custom stage screens + `buildTemplateCustomizePrefill`.
+  // Kept in sync with `CreateFlowState` comments marked "Create Custom —".
+  const resetCustomRuleSelections = useCallback(() => {
+    setState((prev) => {
+      const {
+        selectedCoreValueIds: _a,
+        coreValuesChipsSnapshot: _b,
+        coreValueDetailsByChipId: _c,
+        selectedCommunicationMethodIds: _d,
+        selectedMembershipMethodIds: _e,
+        selectedDecisionApproachIds: _f,
+        selectedConflictManagementIds: _g,
+        ...rest
+      } = prev;
+      return rest;
+    });
+    // Effect on `state.coreValueDetailsByChipId` clears its dedicated
+    // localStorage key when the field goes undefined, so we don't need to
+    // touch `clearCoreValueDetailsLocalStorage()` directly here.
+  }, []);
+
   const contextValue: CreateFlowContextValue = {
     state,
     currentStep,
     updateState,
     replaceState,
     clearState,
+    resetCustomRuleSelections,
     interactionTouched,
     markCreateFlowInteraction,
   };
diff --git a/app/(app)/create/screens/review/CommunityReviewScreen.tsx b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
index 33f17f2..7578f9e 100644
--- a/app/(app)/create/screens/review/CommunityReviewScreen.tsx
+++ b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
 import RuleCard from "../../../../components/cards/RuleCard";
 import { useTranslation } from "../../../../contexts/MessagesContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
@@ -11,21 +13,65 @@ import {
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
 } from "../../components/createFlowLayoutTokens";
 
+/**
+ * Targets for a `pendingTemplateAction` redirect. Customize resumes the
+ * custom-rule stage with chips already prefilled; useWithoutChanges jumps to
+ * the review-and-complete stage since the template body is already in state.
+ */
+const PENDING_TEMPLATE_REDIRECT_TARGET: Record<
+  "customize" | "useWithoutChanges",
+  string
+> = {
+  customize: "/create/core-values",
+  useWithoutChanges: "/create/confirm-stakeholders",
+};
+
 /** Create Community review — Figma `19706:12135` (`/create/review`; two columns from `lg:`; column caps in `createFlowLayoutTokens`). */
 export function CommunityReviewScreen() {
+  const router = useRouter();
   const lgUp = useCreateFlowLgUp();
   const t = useTranslation("create.community.review");
-  const { state } = useCreateFlow();
+  const { state, updateState } = useCreateFlow();
+
+  /**
+   * If the user picked "Customize" or "Use without changes" from a template
+   * before entering community stage, we pinned `pendingTemplateAction` so
+   * this screen can skip itself — they already expressed their intent, no
+   * reason to make them re-pick from the review footer. We `replace` (not
+   * `push`) so Back from the destination goes to `community-save` instead of
+   * bouncing through here again. The action is cleared synchronously via
+   * `updateState` to guarantee the redirect only fires once: later visits to
+   * `/create/review` (e.g. navigating here directly) render normally.
+   *
+   * Ref guard covers React 18 StrictMode's double-mount in dev so we don't
+   * fire `router.replace` twice on the same transition.
+   */
+  const firedRedirectRef = useRef(false);
+  useEffect(() => {
+    if (firedRedirectRef.current) return;
+    const pending = state.pendingTemplateAction;
+    if (!pending) return;
+    const target = PENDING_TEMPLATE_REDIRECT_TARGET[pending.mode];
+    if (!target) return;
+    firedRedirectRef.current = true;
+    updateState({ pendingTemplateAction: undefined });
+    router.replace(target);
+  }, [router, state.pendingTemplateAction, updateState]);
 
   const cardTitle =
     typeof state.title === "string" && state.title.trim().length > 0
       ? state.title.trim()
       : t("ruleCard.title");
+  /**
+   * No placeholder fallback: if the user skipped `community-context`, leave
+   * the card description off rather than render the old "Mutual Aid Monday
+   * is a grassroots community…" sample, which read as real user copy.
+   */
   const cardDescription =
     typeof state.communityContext === "string" &&
     state.communityContext.trim().length > 0
       ? state.communityContext.trim()
-      : t("ruleCard.description");
+      : undefined;
 
   return (
     <CreateFlowStepShell
diff --git a/app/(app)/create/screens/review/FinalReviewScreen.tsx b/app/(app)/create/screens/review/FinalReviewScreen.tsx
index ed070f1..82003e8 100644
--- a/app/(app)/create/screens/review/FinalReviewScreen.tsx
+++ b/app/(app)/create/screens/review/FinalReviewScreen.tsx
@@ -10,9 +10,13 @@ import {
   CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS,
   CreateFlowLockupCardStepShell,
 } from "../../components/CreateFlowLockupCardStepShell";
+import {
+  buildFinalReviewCategoriesFromState,
+  type FinalReviewCategoryRow,
+} from "../../../../../lib/create/buildFinalReviewCategories";
 
 function buildFinalReviewCategories(
-  rows: { name: string; chips: string[] }[],
+  rows: readonly FinalReviewCategoryRow[],
 ): Category[] {
   return rows.map((cat) => ({
     name: cat.name,
@@ -24,16 +28,58 @@ function buildFinalReviewCategories(
   }));
 }
 
+/**
+ * `finalReview.json.categories` ships a demo ordering + localized names
+ * (Values / Communication / Membership / Decision-making / Conflict
+ * management). We reuse that ordering for the state-derived rows so the
+ * RuleCard layout stays stable across customize / use-without-changes /
+ * plain-custom flows, and fall back to the demo chips when state resolves
+ * to nothing selected.
+ */
+function readFallbackCategoryNames(
+  categories: readonly { name: string; chips: readonly string[] }[],
+): {
+  names: {
+    values: string;
+    communication: string;
+    membership: string;
+    decisions: string;
+    conflict: string;
+  };
+  rows: FinalReviewCategoryRow[];
+} {
+  const get = (i: number): string =>
+    typeof categories[i]?.name === "string" ? categories[i].name : "";
+  return {
+    names: {
+      values: get(0),
+      communication: get(1),
+      membership: get(2),
+      decisions: get(3),
+      conflict: get(4),
+    },
+    rows: categories.map((c) => ({ name: c.name, chips: [...c.chips] })),
+  };
+}
+
 export function FinalReviewScreen() {
   const { state } = useCreateFlow();
   const mdUp = useCreateFlowMdUp();
   const t = useTranslation("create.reviewAndComplete.finalReview");
   const m = useMessages();
 
-  const finalReviewCategories = useMemo(
-    () => buildFinalReviewCategories(m.create.reviewAndComplete.finalReview.categories),
-    [m.create.reviewAndComplete.finalReview.categories],
-  );
+  const finalReviewCategories = useMemo(() => {
+    const { names, rows: fallbackRows } = readFallbackCategoryNames(
+      m.create.reviewAndComplete.finalReview.categories,
+    );
+    const derived = buildFinalReviewCategoriesFromState(state, names);
+    // When a user lands on final review with nothing actually selected (e.g.
+    // direct-nav during dev), keep the shipped demo chips rather than render
+    // an empty card — matches prior behavior for that edge case.
+    return buildFinalReviewCategories(
+      derived.length > 0 ? derived : fallbackRows,
+    );
+  }, [m.create.reviewAndComplete.finalReview.categories, state]);
 
   const ruleCardTitle = useMemo(() => {
     const raw = typeof state.title === "string" ? state.title.trim() : "";
diff --git a/app/(app)/create/types.ts b/app/(app)/create/types.ts
index 8cc2d49..8b7b447 100644
--- a/app/(app)/create/types.ts
+++ b/app/(app)/create/types.ts
@@ -93,6 +93,18 @@ export interface CreateFlowState {
   selectedDecisionApproachIds?: string[];
   /** Create Custom — conflict management (`/create/conflict-management`); card ids from `create.customRule.conflictManagement` presets. */
   selectedConflictManagementIds?: string[];
+  /**
+   * Set when a user picks a template (Customize or Use without changes) before
+   * completing the community stage. The community-review screen consumes this
+   * to `router.replace` past `/create/review` to the correct downstream step
+   * (`core-values` for customize; `confirm-stakeholders` for use-without-changes)
+   * once community data is captured. Cleared the moment the redirect fires, so
+   * later visits to `/create/review` render normally.
+   */
+  pendingTemplateAction?: {
+    slug: string;
+    mode: "customize" | "useWithoutChanges";
+  };
   currentStep?: CreateFlowStep;
   /** Section drafts; structure will tighten as steps persist real shapes. */
   sections?: Record<string, unknown>[];
@@ -115,30 +127,23 @@ export interface CreateFlowContextValue {
   /** Reset flow state and clear anonymous localStorage draft keys when present. */
   clearState: () => void;
   /**
-   * True after the user edits any template control (pages use local state until wired to `state`).
-   * Drives Save & Exit visibility together with hasCreateFlowUserInput (utils/hasCreateFlowUserInput.ts).
+   * Scrub only the Create Custom stage selections (core values, communication,
+   * membership, decision approaches, conflict management) from state. Keeps
+   * the community stage (title, context, size, structure) intact so users can
+   * re-enter the custom-rule flow from `/create/review` with a clean slate
+   * after a prior "Customize template" prefill.
+   */
+  resetCustomRuleSelections: () => void;
+  /**
+   * True after the user has edited any control inside the wizard. Screens flip
+   * it via {@link markCreateFlowInteraction} from their event handlers.
+   *
+   * Current consumer: {@link SignedInDraftHydration} — when a signed-in user
+   * has already started editing, we skip replaying their server draft on top
+   * of in-progress local state. Save & Exit visibility is driven by step
+   * index (`SAVE_EXIT_FROM_STEP_INDEX` in `CreateFlowLayoutClient`), not this
+   * flag.
    */
   interactionTouched: boolean;
   markCreateFlowInteraction: () => void;
 }
-
-/**
- * Base props interface for page templates
- * Will be expanded in template implementation tickets (CR-51-55)
- */
-export interface PageTemplateProps {
-  // Base props for all page templates
-  // Will be expanded in template tickets
-}
-
-/**
- * Navigation handlers interface
- * Will be implemented in CR-56
- */
-export interface NavigationHandlers {
-  goToNextStep: () => void;
-  goToPreviousStep: () => void;
-  goToStep: (_step: CreateFlowStep) => void;
-  canGoNext: () => boolean;
-  canGoBack: () => boolean;
-}
diff --git a/app/(app)/create/utils/clearCreateFlowPersistedDrafts.ts b/app/(app)/create/utils/clearCreateFlowPersistedDrafts.ts
new file mode 100644
index 0000000..868bf46
--- /dev/null
+++ b/app/(app)/create/utils/clearCreateFlowPersistedDrafts.ts
@@ -0,0 +1,22 @@
+import { clearAnonymousCreateFlowStorage } from "./anonymousDraftStorage";
+import { clearCoreValueDetailsLocalStorage } from "./coreValueDetailsLocalStorage";
+
+/**
+ * Wipe the anonymous in-progress create-flow draft from `localStorage` (both
+ * the main `create-flow-anonymous` blob and the separate core-value details
+ * key). Intended for call sites that navigate **into** the create flow from
+ * outside and want a fresh slate — today that's the marketing "Popular
+ * templates" click handler on the home page and the `/templates` index page
+ * (when not in-flow). `CreateFlowProvider` reads `localStorage` during its
+ * `useState` initializer, so clearing *before* pushing the next route means
+ * the provider mounts empty and the Create Community stage starts clean.
+ *
+ * Note: this only touches localStorage. It does **not** delete the
+ * authenticated user's server draft (`/api/drafts/me`). Server drafts are
+ * loaded deliberately from the profile page, not re-hydrated into the flow
+ * on every entry, so there's nothing to wipe here for signed-in users.
+ */
+export function clearCreateFlowPersistedDrafts(): void {
+  clearAnonymousCreateFlowStorage();
+  clearCoreValueDetailsLocalStorage();
+}
diff --git a/app/(app)/create/utils/createFlowFooterClassNames.ts b/app/(app)/create/utils/createFlowFooterClassNames.ts
new file mode 100644
index 0000000..f14f2b0
--- /dev/null
+++ b/app/(app)/create/utils/createFlowFooterClassNames.ts
@@ -0,0 +1,24 @@
+/**
+ * Typography + padding overrides applied to the primary/secondary buttons
+ * rendered inside `CreateFlowFooter`. The footer slot expects a compact
+ * size regardless of the default `<Button size="xsmall">` output, and both
+ * the Create Community / Custom Rule / Review flows and the template-review
+ * footer share the same override string — keeping it here prevents drift
+ * between those two call sites.
+ *
+ * The `!` prefixes bypass Button's own size tokens; the extra spacing vars
+ * mirror the Figma compact footer button spec. When the design system
+ * exposes a native size that matches, this module should collapse.
+ */
+export const CREATE_FLOW_FOOTER_BUTTON_CLASS =
+  "md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] " +
+  "!px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] " +
+  "!py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]";
+
+/**
+ * Template-review "Use without changes" (ghost variant) renders on a dark
+ * backdrop and needs an explicit text-color override in addition to the
+ * shared compact sizing. Composed from the base class so any future tweak
+ * to typography/padding propagates automatically.
+ */
+export const CREATE_FLOW_FOOTER_BUTTON_ON_DARK_CLASS = `${CREATE_FLOW_FOOTER_BUTTON_CLASS} !text-white`;
diff --git a/app/(app)/create/utils/customRuleConfirmFooterSteps.ts b/app/(app)/create/utils/customRuleConfirmFooterSteps.ts
new file mode 100644
index 0000000..ce7779f
--- /dev/null
+++ b/app/(app)/create/utils/customRuleConfirmFooterSteps.ts
@@ -0,0 +1,69 @@
+import type { CreateFlowState, CreateFlowStep } from "../types";
+import type footerMessages from "../../../../messages/en/create/footer.json";
+
+type FooterMessageKey = keyof typeof footerMessages;
+
+/**
+ * Binding for each Custom Rule stage step whose footer primary button
+ * gates the user on "has at least one chip selected?". All five screens
+ * render the same `<Button …>`; only the disable predicate and the
+ * footer message differ — this table is the single source of truth for
+ * both, so `CreateFlowLayoutClient` can render one JSX block for the
+ * whole group.
+ *
+ * `selectionIds` returns the currently-selected ids array from flow
+ * state for that step (empty array when nothing has been selected or
+ * the field hasn't been touched). Returning a fresh array on empty is
+ * fine: these are read-only length checks, not memo keys.
+ *
+ * Note: the Confirm Stakeholders step has its own dedicated label copy
+ * and is not gated on a selection count, so it stays out of this table.
+ * Template-review and Community Save also have bespoke two-button
+ * layouts and are intentionally excluded.
+ */
+export type CustomRuleConfirmFooterStep = {
+  step: Extract<
+    CreateFlowStep,
+    | "core-values"
+    | "communication-methods"
+    | "membership-methods"
+    | "decision-approaches"
+    | "conflict-management"
+  >;
+  footerMessageKey: FooterMessageKey;
+  selectionIds: (state: CreateFlowState) => readonly string[];
+};
+
+export const CUSTOM_RULE_CONFIRM_FOOTER_STEPS: readonly CustomRuleConfirmFooterStep[] =
+  [
+    {
+      step: "core-values",
+      footerMessageKey: "confirmCoreValues",
+      selectionIds: (s) => s.selectedCoreValueIds ?? [],
+    },
+    {
+      step: "communication-methods",
+      footerMessageKey: "confirmCommunication",
+      selectionIds: (s) => s.selectedCommunicationMethodIds ?? [],
+    },
+    {
+      step: "membership-methods",
+      footerMessageKey: "confirmMembership",
+      selectionIds: (s) => s.selectedMembershipMethodIds ?? [],
+    },
+    {
+      step: "decision-approaches",
+      footerMessageKey: "confirmDecisionApproaches",
+      selectionIds: (s) => s.selectedDecisionApproachIds ?? [],
+    },
+    {
+      step: "conflict-management",
+      footerMessageKey: "confirmConflictManagement",
+      selectionIds: (s) => s.selectedConflictManagementIds ?? [],
+    },
+  ] as const;
+
+export const CUSTOM_RULE_CONFIRM_FOOTER_STEP_BY_STEP: ReadonlyMap<
+  CreateFlowStep,
+  CustomRuleConfirmFooterStep
+> = new Map(CUSTOM_RULE_CONFIRM_FOOTER_STEPS.map((e) => [e.step, e]));
diff --git a/app/(app)/create/utils/hasCreateFlowUserInput.ts b/app/(app)/create/utils/hasCreateFlowUserInput.ts
deleted file mode 100644
index f0391fc..0000000
--- a/app/(app)/create/utils/hasCreateFlowUserInput.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { CreateFlowState } from "../types";
-
-const IGNORED_KEYS = new Set<string>(["currentStep"]);
-
-function valueIndicatesUserInput(value: unknown): boolean {
-  if (value === undefined || value === null) return false;
-  if (typeof value === "string") return value.trim().length > 0;
-  if (typeof value === "boolean") return value;
-  if (typeof value === "number") return Number.isFinite(value);
-  if (Array.isArray(value)) return value.length > 0;
-  if (typeof value === "object") {
-    return Object.keys(value as object).length > 0;
-  }
-  return false;
-}
-
-/**
- * True once the user has entered meaningful create-flow data (not only navigation metadata).
- * Used to show "Save & Exit" vs a plain "Exit" that confirms data loss.
- */
-export function hasCreateFlowUserInput(state: CreateFlowState): boolean {
-  for (const key of Object.keys(state)) {
-    if (IGNORED_KEYS.has(key)) continue;
-    if (valueIndicatesUserInput(state[key])) return true;
-  }
-  return false;
-}
diff --git a/app/(marketing)/templates/TemplatesPageClient.tsx b/app/(marketing)/templates/TemplatesPageClient.tsx
index 09e6353..6446208 100644
--- a/app/(marketing)/templates/TemplatesPageClient.tsx
+++ b/app/(marketing)/templates/TemplatesPageClient.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import HeaderLockup from "../../components/type/HeaderLockup";
 import { GovernanceTemplateGrid } from "../../components/sections/GovernanceTemplateGrid";
 import type { TemplateGridCardEntry } from "../../../lib/templates/templateGridPresentation";
+import { clearCreateFlowPersistedDrafts } from "../../(app)/create/utils/clearCreateFlowPersistedDrafts";
 import { useTranslation } from "../../contexts/MessagesContext";
 
 export interface TemplatesPageClientProps {
@@ -17,7 +19,6 @@ export interface TemplatesPageClientProps {
 export default function TemplatesPageClient({
   initialGridEntries,
 }: TemplatesPageClientProps) {
-  const router = useRouter();
   const t = useTranslation("pages.templates");
 
   return (
@@ -39,16 +40,56 @@ export default function TemplatesPageClient({
           />
         </div>
         <div className="mt-6 min-[1024px]:mt-8">
-          <GovernanceTemplateGrid
-            entries={initialGridEntries}
-            onTemplateClick={(slug) => {
-              router.push(
-                `/create/review-template/${encodeURIComponent(slug)}`,
-              );
-            }}
-          />
+          {/* Suspense boundary required by `useSearchParams` below
+              (Next.js 15+ static-generation contract). */}
+          <Suspense
+            fallback={<TemplatesGrid entries={initialGridEntries} fromFlow={false} />}
+          >
+            <TemplatesGridWithSearchParams entries={initialGridEntries} />
+          </Suspense>
         </div>
       </div>
     </div>
   );
 }
+
+/**
+ * Reads `fromFlow=1` off the URL so we can skip the fresh-slate clear when
+ * the user arrived from `/create/review`'s "Create from template" button.
+ * That button pushes `/templates?fromFlow=1` so their in-progress community
+ * stage is preserved when they pick a template here.
+ */
+function TemplatesGridWithSearchParams({
+  entries,
+}: {
+  entries: TemplateGridCardEntry[];
+}) {
+  const searchParams = useSearchParams();
+  const fromFlow = searchParams.get("fromFlow") === "1";
+  return <TemplatesGrid entries={entries} fromFlow={fromFlow} />;
+}
+
+function TemplatesGrid({
+  entries,
+  fromFlow,
+}: {
+  entries: TemplateGridCardEntry[];
+  fromFlow: boolean;
+}) {
+  const router = useRouter();
+  return (
+    <GovernanceTemplateGrid
+      entries={entries}
+      onTemplateClick={(slug) => {
+        if (!fromFlow) {
+          // Direct entry to `/templates`: treat template click as a fresh
+          // create-flow start and wipe any stale anonymous draft before
+          // navigating. In-flow entry (`?fromFlow=1`) skips the clear so
+          // the user's community stage survives the detour through here.
+          clearCreateFlowPersistedDrafts();
+        }
+        router.push(`/create/review-template/${encodeURIComponent(slug)}`);
+      }}
+    />
+  );
+}
diff --git a/app/components/navigation/TopNav/TopNav.container.tsx b/app/components/navigation/TopNav/TopNav.container.tsx
index ff8cc50..bf7c64a 100644
--- a/app/components/navigation/TopNav/TopNav.container.tsx
+++ b/app/components/navigation/TopNav/TopNav.container.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { memo } from "react";
+import { memo, useCallback } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { useAuthModal } from "../../../contexts/AuthModalContext";
 import { useTranslation } from "../../../contexts/MessagesContext";
@@ -9,6 +9,8 @@ import Button from "../../buttons/Button";
 import AvatarContainer from "../../utility/AvatarContainer";
 import Avatar from "../../icons/Avatar";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
+import { clearAnonymousCreateFlowStorage } from "../../../(app)/create/utils/anonymousDraftStorage";
+import { clearCoreValueDetailsLocalStorage } from "../../../(app)/create/utils/coreValueDetailsLocalStorage";
 import { TopNavView } from "./TopNav.view";
 import type { TopNavProps, NavSize } from "./TopNav.types";
 
@@ -25,6 +27,20 @@ const TopNavContainer = memo<TopNavProps>(
     const { openLogin } = useAuthModal();
     const t = useTranslation("header");
 
+    /**
+     * TopNav is hidden on `/create` routes by ConditionalNavigationClient, so
+     * this button is always clicked from outside the wizard — there is no
+     * mounted CreateFlowProvider to reset. Wiping the anonymous draft keys
+     * here guarantees a fresh start; the provider that mounts on `/create`
+     * will read empty storage. Server drafts (signed-in Save & Exit) are
+     * left alone — they're intentional persistence the user opted into.
+     */
+    const handleCreateRuleClick = useCallback(() => {
+      clearAnonymousCreateFlowStorage();
+      clearCoreValueDetailsLocalStorage();
+      router.push("/create");
+    }, [router]);
+
     // Schema markup for site navigation
     const schemaData = {
       "@context": "https://schema.org",
@@ -197,7 +213,7 @@ const TopNavContainer = memo<TopNavProps>(
           size={buttonSize}
           buttonType={buttonType}
           palette={palette}
-          onClick={() => router.push("/create")}
+          onClick={handleCreateRuleClick}
           ariaLabel={t("ariaLabels.createNewRule")}
         >
           {renderAvatarGroup(containerSize, avatarSize)}
diff --git a/app/components/sections/RuleStack/RuleStack.container.tsx b/app/components/sections/RuleStack/RuleStack.container.tsx
index 0cb28bd..5bf2faf 100644
--- a/app/components/sections/RuleStack/RuleStack.container.tsx
+++ b/app/components/sections/RuleStack/RuleStack.container.tsx
@@ -3,6 +3,7 @@
 import { memo, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { logger } from "../../../../lib/logger";
+import { clearCreateFlowPersistedDrafts } from "../../../(app)/create/utils/clearCreateFlowPersistedDrafts";
 import {
   fetchTemplates,
   isTemplatesFetchAborted,
@@ -89,6 +90,11 @@ const RuleStackContainer = memo<RuleStackProps>(
       }
     }
     logger.debug(`${slug} template clicked`);
+    // Marketing entry is always a *fresh* create-flow start: wipe any
+    // in-progress anonymous draft so a stale community name/structure from
+    // an earlier abandoned session can't short-circuit the `state.title`
+    // check in `handleCustomizeTemplate` / `handleUseTemplateWithoutChanges`.
+    clearCreateFlowPersistedDrafts();
     router.push(`/create/review-template/${encodeURIComponent(slug)}`);
   };
 
diff --git a/docs/create-flow.md b/docs/create-flow.md
index 319d47b..0003f40 100644
--- a/docs/create-flow.md
+++ b/docs/create-flow.md
@@ -55,7 +55,27 @@ Active step for chrome and navigation is resolved from the pathname via [`parseC
 | --- | --- |
 | `/create/review-template/[slug]` | Template preview in the create shell; uses the same layout/footer chrome as other create pages but **is not** part of `FLOW_STEP_ORDER` **or** the three Figma stages above. |
 
-From that page, **Customize** currently navigates to `/create/informational?template=<slug>`. The **`template` query parameter is reserved**; the informational step **does not** yet read it to prefill `CreateFlowState`. **Starting the wizard from a template at `final-review` or any mid-flow step** is **out of scope** until a dedicated product ticket ships. A **full create-from-template** experience will **likely use separate route(s)** when product and eng define it (may still align conceptually with the same three stages where behavior overlaps the custom path).
+From that page, **Customize** pre-fills the custom-rule selections on the current `CreateFlowState` (via [`buildTemplateCustomizePrefill`](../lib/create/applyTemplatePrefill.ts)) and routes to **`/create/core-values`** when the community name (`state.title`) is already set, otherwise to **`/create/informational`**. Name-only is the gate because other community-stage fields (e.g. `communityStructureChipSnapshots`) are sticky once the user lands on those screens; a non-empty title is also the minimum bar [`buildPublishPayload`](../lib/create/buildPublishPayload.ts) enforces, so the two checks stay aligned. No query-param plumbing: state persists via the usual anonymous/server-draft mirrors.
+
+**Use without changes** writes the template's `body.sections` into `state.sections` (and its `description` into `state.summary` when present), resets any prior Customize chip selections so they don't bleed into `document.coreValues`, and routes to **`/create/confirm-stakeholders`**. The user then exits via the normal **`final-review → handleFinalize → publishRule`** pipeline, which gates unauthenticated publishes with a **401 → `openLogin`** redirect back to `/create/final-review?syncDraft=1`.
+
+**Entering a template before community stage is done.** When `state.title` is empty, both handlers apply their side effects eagerly (prefill for Customize; `sections` + `summary` for Use without changes) *and* pin a `pendingTemplateAction: { slug, mode }` on `CreateFlowState` before routing to `/create/informational`. Once the user reaches `/create/review`, [`CommunityReviewScreen`](../app/(app)/create/screens/review/CommunityReviewScreen.tsx) reads the action on mount, clears it via `updateState`, and `router.replace`s past itself — to `/create/core-values` for `customize`, `/create/confirm-stakeholders` for `useWithoutChanges`. The user never sees the community-review page in that flow because their intent was already expressed at the template-review step. `replace` (not `push`) keeps `community-save` as the Back-button target from the destination. The action is cleared on the first fire so later direct visits to `/create/review` render normally.
+
+**Direct entry vs in-flow template pick.** The same `/create/review-template/[slug]` URL is reached from two different origins. We disambiguate at the *click site*, not on the review-template page, using [`clearCreateFlowPersistedDrafts`](../app/(app)/create/utils/clearCreateFlowPersistedDrafts.ts) — a tiny helper that wipes the anonymous draft from `localStorage` (both `create-flow-anonymous` and the core-value-details key) **before** the navigation fires. Because `CreateFlowProvider` reads `localStorage` in its `useState` initializer, the provider mounts empty and `handleCustomizeTemplate` / `handleUseTemplateWithoutChanges` naturally take the no-community branch — no per-handler marker plumbing needed.
+
+| Origin | Click-site behavior | URL the user lands on |
+| --- | --- | --- |
+| Home marketing "Popular templates" ([`RuleStack.container.tsx`](../app/components/sections/RuleStack/RuleStack.container.tsx)) | always calls `clearCreateFlowPersistedDrafts()` | `/create/review-template/[slug]` |
+| `/templates` index ([`TemplatesPageClient.tsx`](../app/(marketing)/templates/TemplatesPageClient.tsx)) visited directly / via pasted URL | `fromFlow` absent → calls `clearCreateFlowPersistedDrafts()` | `/create/review-template/[slug]` |
+| In-flow: `/create/review` footer "Create from template" → `/templates?fromFlow=1` → template click | `fromFlow=1` → skips the clear | `/create/review-template/[slug]` |
+
+Only one `?fromFlow=1` marker exists, on one hop (`/create/review` → `/templates`). It is not forwarded onto the review-template URL. The review-template handlers branch solely on `state.title` — they don't need to know the origin.
+
+Server drafts (`/api/drafts/me`) are **not** touched here. Per product plan they are not auto-hydrated into the create flow; users select and load a specific saved draft from the profile page. So wiping `localStorage` is sufficient for the "fresh slate" invariant.
+
+**Final-review RuleCard category chips** are derived from `CreateFlowState` via [`buildFinalReviewCategoriesFromState`](../lib/create/buildFinalReviewCategories.ts): for the Customize / plain custom-rule path it resolves `selected{Communication,Membership,DecisionApproach,ConflictManagement}MethodIds` against the curated method presets in `messages/en/create/customRule/*.json`, and `buildCoreValuesForDocument` supplies the `Values` row from `coreValuesChipsSnapshot` + `selectedCoreValueIds`. For the Use-without-changes path the template body lives in `state.sections`; the helper renders `categoryName` + entry titles directly. The demo chips shipped in `finalReview.json` remain the fallback only when nothing in state resolves to any chip (e.g. direct navigation for development).
+
+**Starting the wizard from a template at `final-review` directly** is out of scope until a dedicated product ticket ships. A **full create-from-template** experience will **likely use separate route(s)** when product and eng define it (may still align conceptually with the same three stages where behavior overlaps the custom path).
 
 ---
 
diff --git a/docs/guides/backend-linear-tickets.md b/docs/guides/backend-linear-tickets.md
index 4c15acd..fd99db2 100644
--- a/docs/guides/backend-linear-tickets.md
+++ b/docs/guides/backend-linear-tickets.md
@@ -311,7 +311,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Establish the **official custom** create-rule flow (ordered steps, URLs, persistence, entry points, **Figma three-stage framing**) in repo docs and close gaps between that spec and the implementation (routing clutter, progress UI, step source of truth, resume vs URL).
 
-**Context:** Step order lives in [`app/(app)/create/utils/flowSteps.ts`](app/(app)/create/utils/flowSteps.ts). Wizard screens render from [`app/(app)/create/[screenId]/page.tsx`](app/(app)/create/[screenId]/page.tsx) plus [`CREATE_FLOW_SCREEN_REGISTRY`](app/(app)/create/utils/createFlowScreenRegistry.ts) (Figma node + layout family per slug). [`docs/create-flow.md`](create-flow.md) is the **canonical** URL/persistence summary: **Create Community** (eight semantic steps ending at `review`) → **Create Custom CommunityRule** → **Review and complete**. **Full create-from-template** will likely use **additional route(s)** when product defines it; **`/create/review-template/[slug]`** remains auxiliary preview only. **Template → `final-review` or mid-wizard prefill** is **out of scope** here (future ticket); `/create/informational?template=` is a **no-op** until then.
+**Context:** Step order lives in [`app/(app)/create/utils/flowSteps.ts`](app/(app)/create/utils/flowSteps.ts). Wizard screens render from [`app/(app)/create/[screenId]/page.tsx`](app/(app)/create/[screenId]/page.tsx) plus [`CREATE_FLOW_SCREEN_REGISTRY`](app/(app)/create/utils/createFlowScreenRegistry.ts) (Figma node + layout family per slug). [`docs/create-flow.md`](create-flow.md) is the **canonical** URL/persistence summary: **Create Community** (eight semantic steps ending at `review`) → **Create Custom CommunityRule** → **Review and complete**. **Full create-from-template** will likely use **additional route(s)** when product defines it; **`/create/review-template/[slug]`** remains auxiliary preview only. **Template → `final-review` prefill** (skipping straight to publish) is **out of scope** here (future ticket). The **Customize** button on `/create/review-template/[slug]` now prefills customize selections and routes to `core-values` (or `informational` when Community is empty) via [`buildTemplateCustomizePrefill`](../../lib/create/applyTemplatePrefill.ts). **Use without changes** writes `template.body.sections` into `state.sections` and routes to `confirm-stakeholders`, so the user exits through the normal `final-review → handleFinalize → publishRule` pipeline and inherits its 401 sign-in gate. When either button is clicked **before** the community stage is done, the handler still applies its side effects eagerly and pins a `pendingTemplateAction: { slug, mode }` on `CreateFlowState`; [`CommunityReviewScreen`](app/(app)/create/screens/review/CommunityReviewScreen.tsx) consumes the pin on mount and `router.replace`s past itself to the right downstream step (`core-values` for customize, `confirm-stakeholders` for useWithoutChanges), so users never see the community-review page after expressing template intent at the template-review step.
 
 **Implementation:**
 
@@ -328,7 +328,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [ ] No misleading dynamic step placeholder for valid wizard URLs.
 - [ ] Footer progress reflects step index **or** doc/issue records a deliberate deferral with design sign-off.
 - [ ] Hydration + `currentStep` behavior is verified (redirect vs stay).
-- [ ] `?template=` documented as deferred; no implied “template customize → full wizard” parity.
+- [ ] Template **Customize** prefill is documented (maps template body to `selected*Ids` + `coreValuesChipsSnapshot`, routes to `core-values` when Community has data else `informational`); full template-customize-from-mid-wizard entry beyond `core-values` stays deferred.
 
 **Files:** [`docs/create-flow.md`](create-flow.md), [`app/(app)/create/`](app/(app)/create/), [`app/components/utility/CreateFlowFooter/`](app/components/utility/CreateFlowFooter/), optionally [`docs/backend-roadmap.md`](backend-roadmap.md) §12 cross-links.
 
diff --git a/docs/guides/template-recommendation-matrix.md b/docs/guides/template-recommendation-matrix.md
index 467f60d..af7ef63 100644
--- a/docs/guides/template-recommendation-matrix.md
+++ b/docs/guides/template-recommendation-matrix.md
@@ -269,9 +269,27 @@ decision-approaches → conflict-management → confirm-stakeholders → final-r
 | API list | `app/api/templates/route.ts` (GET only, no params today) |
 
 Template ranking adds optional facet query params to `/api/templates`;
-the no-facets path keeps today's curated ordering. The
-`/create/informational?template=<slug>` query-param prefill is a known
-no-op (`CreateFlowLayoutClient.tsx`); fixing it is **out of scope**.
+the no-facets path keeps today's curated ordering. Template **Customize**
+now prefills the custom-rule flow via
+[`buildTemplateCustomizePrefill`](../../lib/create/applyTemplatePrefill.ts)
+(applied in `CreateFlowLayoutClient.tsx`) and routes to `core-values`
+when Community already has input, else to `informational`. Template **Use
+without changes** writes `template.body.sections` into `state.sections`
+and routes to `confirm-stakeholders`, so the user exits via the normal
+`final-review → handleFinalize → publishRule` path and picks up the
+server-enforced 401 sign-in gate for free.
+
+When the user picks a template **before** completing the community
+stage, both handlers still apply their side effects eagerly (prefill or
+`sections`/`summary`) and pin a
+`pendingTemplateAction: { slug, mode: "customize" | "useWithoutChanges" }`
+on `CreateFlowState`, then route to `informational`. Once the user
+reaches `/create/review`, `CommunityReviewScreen` consumes the pin and
+`router.replace`s past itself — to `core-values` for `customize`, to
+`confirm-stakeholders` for `useWithoutChanges`. The community-review
+screen is therefore only shown when the user came from "Create Custom"
+(no template), matching the intent already expressed at the
+template-review step.
 
 ---
 
@@ -660,10 +678,12 @@ Once the API exists:
   rendering.
 - API failure or empty facets → render the messages deck in its on-disk
   order. No regression from today.
-- Selecting a template on the marketing home or `templates/` page can
-  prefill the create flow's `selected*MethodIds` from the template's
-  composition (closes the `?template=` no-op gap noted in
-  `CreateFlowLayoutClient.tsx`). Out of scope for CR-88.
+- Selecting a template on the template-review page via **Customize**
+  prefills the create flow's `selected*MethodIds` and core-values chip
+  snapshot from the template's composition — see
+  [`buildTemplateCustomizePrefill`](../../lib/create/applyTemplatePrefill.ts)
+  and the `handleCustomizeTemplate` handler in
+  `CreateFlowLayoutClient.tsx`. Shipped outside CR-88.
 - Recommendations **never hide** options — ranking only. Authors expect
   to see "all 32 decision-making patterns" with the matching ones
   surfaced first.
diff --git a/lib/create/applyTemplatePrefill.ts b/lib/create/applyTemplatePrefill.ts
new file mode 100644
index 0000000..a59d7fc
--- /dev/null
+++ b/lib/create/applyTemplatePrefill.ts
@@ -0,0 +1,145 @@
+import type {
+  CommunityStructureChipSnapshotRow,
+  CreateFlowState,
+} from "../../app/(app)/create/types";
+import coreValuesMessages from "../../messages/en/create/customRule/coreValues.json";
+import { methodSlugFromTitle } from "./methodSlugFromTitle";
+
+type TemplateEntry = { title: unknown };
+type TemplateSection = { categoryName: unknown; entries: unknown };
+
+function isTemplateSection(x: unknown): x is TemplateSection {
+  if (!x || typeof x !== "object") return false;
+  const o = x as Record<string, unknown>;
+  return typeof o.categoryName === "string" && Array.isArray(o.entries);
+}
+
+function entryTitles(entries: unknown): string[] {
+  if (!Array.isArray(entries)) return [];
+  const out: string[] = [];
+  for (const raw of entries) {
+    if (!raw || typeof raw !== "object") continue;
+    const title = (raw as TemplateEntry).title;
+    if (typeof title !== "string") continue;
+    const trimmed = title.trim();
+    if (trimmed.length > 0) out.push(trimmed);
+  }
+  return out;
+}
+
+/** Normalise a Figma template category header ("Decision-making") for matching. */
+function normaliseCategoryKey(name: string): string {
+  return name.toLowerCase().replace(/[^a-z]+/g, "");
+}
+
+/** Preset core-value labels with the chip id (1-based preset index as string) the select screen expects. */
+type CorePresetRow = { id: string; label: string };
+const CORE_VALUE_PRESETS: readonly CorePresetRow[] = (() => {
+  const raw = (coreValuesMessages as { values: unknown }).values;
+  if (!Array.isArray(raw)) return [];
+  return raw.map((v, i) => ({
+    id: String(i + 1),
+    label: typeof v === "string" ? v : (v as { label: string }).label,
+  }));
+})();
+
+function buildCoreValuePrefill(
+  titles: readonly string[],
+): Pick<CreateFlowState, "selectedCoreValueIds" | "coreValuesChipsSnapshot"> {
+  const wantedByLower = new Map<string, string>();
+  for (const t of titles) wantedByLower.set(t.toLowerCase(), t);
+
+  const selected: string[] = [];
+  const snapshot: CommunityStructureChipSnapshotRow[] = [];
+
+  for (const preset of CORE_VALUE_PRESETS) {
+    const isSelected = wantedByLower.delete(preset.label.toLowerCase());
+    snapshot.push({
+      id: preset.id,
+      label: preset.label,
+      state: isSelected ? "selected" : "unselected",
+    });
+    if (isSelected) selected.push(preset.id);
+  }
+
+  // Any template labels not matching a preset ride along as custom chip rows
+  // so templates authored with bespoke values still pre-select on the screen.
+  for (const original of wantedByLower.values()) {
+    const id = `template-cv-${methodSlugFromTitle(original) || snapshot.length}`;
+    snapshot.push({ id, label: original, state: "selected" });
+    selected.push(id);
+  }
+
+  return {
+    selectedCoreValueIds: selected,
+    coreValuesChipsSnapshot: snapshot,
+  };
+}
+
+/**
+ * Map a curated template `body` (DB shape — `sections[]` with `categoryName`
+ * + `entries[].title`) to the `CreateFlowState` keys the Create Custom Rule
+ * screens read for pre-selection. Used by the "Customize" handler on
+ * `/create/review-template/[slug]` so clicking Customize drops the user into
+ * the custom-rule flow with the template's chips already highlighted.
+ *
+ * Produces:
+ * - `selectedCoreValueIds` + `coreValuesChipsSnapshot` — preset match by
+ *   label; non-matching titles become custom chip rows so bespoke template
+ *   values still appear selected.
+ * - `selectedCommunicationMethodIds`, `selectedMembershipMethodIds`,
+ *   `selectedDecisionApproachIds`, `selectedConflictManagementIds` — chip
+ *   ids derived via {@link methodSlugFromTitle}, matching the `methods[].id`
+ *   produced by the one-time messages ingest.
+ *
+ * Returns an empty object for malformed bodies (no sections array).
+ */
+export function buildTemplateCustomizePrefill(
+  body: unknown,
+): Partial<CreateFlowState> {
+  if (!body || typeof body !== "object") return {};
+  const sections = (body as { sections?: unknown }).sections;
+  if (!Array.isArray(sections)) return {};
+
+  const prefill: Partial<CreateFlowState> = {};
+
+  for (const raw of sections) {
+    if (!isTemplateSection(raw)) continue;
+    const key = normaliseCategoryKey(raw.categoryName as string);
+    const titles = entryTitles(raw.entries);
+    if (titles.length === 0) continue;
+
+    if (key === "values" || key === "corevalues") {
+      Object.assign(prefill, buildCoreValuePrefill(titles));
+      continue;
+    }
+
+    const slugs = titles.map(methodSlugFromTitle).filter((s) => s.length > 0);
+    if (slugs.length === 0) continue;
+
+    switch (key) {
+      case "communication":
+      case "communications":
+        prefill.selectedCommunicationMethodIds = slugs;
+        break;
+      case "membership":
+      case "memberships":
+        prefill.selectedMembershipMethodIds = slugs;
+        break;
+      case "decisionmaking":
+      case "decisionapproaches":
+      case "decisions":
+        prefill.selectedDecisionApproachIds = slugs;
+        break;
+      case "conflictmanagement":
+      case "conflict":
+      case "conflictresolution":
+        prefill.selectedConflictManagementIds = slugs;
+        break;
+      default:
+        break;
+    }
+  }
+
+  return prefill;
+}
diff --git a/lib/create/buildFinalReviewCategories.ts b/lib/create/buildFinalReviewCategories.ts
new file mode 100644
index 0000000..b09735e
--- /dev/null
+++ b/lib/create/buildFinalReviewCategories.ts
@@ -0,0 +1,152 @@
+import type { CreateFlowState } from "../../app/(app)/create/types";
+import communicationMessages from "../../messages/en/create/customRule/communication.json";
+import conflictManagementMessages from "../../messages/en/create/customRule/conflictManagement.json";
+import decisionApproachesMessages from "../../messages/en/create/customRule/decisionApproaches.json";
+import membershipMessages from "../../messages/en/create/customRule/membership.json";
+import {
+  buildCoreValuesForDocument,
+  parseSectionsFromCreateFlowState,
+} from "./buildPublishPayload";
+
+/**
+ * Chip row shape shared with `messages/en/create/reviewAndComplete/finalReview.json`
+ * so the final-review screen can keep its existing category → chip label rendering
+ * contract regardless of whether chips came from state or from fallback content.
+ */
+export type FinalReviewCategoryRow = { name: string; chips: string[] };
+
+/** Category labels supplied by the caller (pulled from localized messages). */
+export type FinalReviewCategoryNames = {
+  values: string;
+  communication: string;
+  membership: string;
+  decisions: string;
+  conflict: string;
+};
+
+type MethodPreset = { id: string; label: string };
+
+function readMethodsArray(source: unknown): MethodPreset[] {
+  if (!source || typeof source !== "object") return [];
+  const methods = (source as { methods?: unknown }).methods;
+  if (!Array.isArray(methods)) return [];
+  const out: MethodPreset[] = [];
+  for (const raw of methods) {
+    if (!raw || typeof raw !== "object") continue;
+    const o = raw as Record<string, unknown>;
+    if (typeof o.id === "string" && typeof o.label === "string") {
+      out.push({ id: o.id, label: o.label });
+    }
+  }
+  return out;
+}
+
+function labelsFromIds(
+  ids: readonly string[] | undefined,
+  methods: readonly MethodPreset[],
+): string[] {
+  if (!ids || ids.length === 0) return [];
+  const byId = new Map(methods.map((m) => [m.id, m.label] as const));
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const id of ids) {
+    const label = byId.get(id);
+    if (typeof label !== "string" || label.length === 0) continue;
+    if (seen.has(label)) continue;
+    seen.add(label);
+    out.push(label);
+  }
+  return out;
+}
+
+/**
+ * Derive the final-review RuleCard category rows from the current
+ * {@link CreateFlowState}.
+ *
+ * Two-mode contract, mirroring the two template entry points:
+ * 1. **Use without changes** — `state.sections` carries the applied template
+ *    body; we render it verbatim (`categoryName` + entry `title`s). Core
+ *    values still come from `buildCoreValuesForDocument` when they were
+ *    captured separately.
+ * 2. **Customize / plain custom-rule flow** — each Create Custom screen writes
+ *    its selection ids into a dedicated state field. We resolve those ids
+ *    against the curated message `methods[]` list to get the display labels,
+ *    matching what the user saw as chips in-flow.
+ *
+ * Empty categories are filtered out so the review card doesn't render headings
+ * with no chips. If nothing in state resolves to any chip, the caller should
+ * fall back to the demo categories shipped in `finalReview.json`.
+ */
+export function buildFinalReviewCategoriesFromState(
+  state: CreateFlowState,
+  names: FinalReviewCategoryNames,
+): FinalReviewCategoryRow[] {
+  const sections = parseSectionsFromCreateFlowState(state);
+  const coreValueLabels = buildCoreValuesForDocument(state).map((r) => r.label);
+
+  // Use-without-changes / pre-rendered template body: the sections array is
+  // the source of truth. Collapse each section's entries to its titles; the
+  // RuleCard category UI shows only labels, not per-entry body copy.
+  if (sections.length > 0) {
+    const rows: FinalReviewCategoryRow[] = [];
+
+    // If core values were also captured (e.g., the template surfaced both),
+    // keep them up top for visual parity with the custom-rule flow. Otherwise
+    // any `Values` section already inside `sections` covers the same ground.
+    if (coreValueLabels.length > 0) {
+      const hasValuesSection = sections.some(
+        (s) => s.categoryName.toLowerCase() === names.values.toLowerCase(),
+      );
+      if (!hasValuesSection) {
+        rows.push({ name: names.values, chips: coreValueLabels });
+      }
+    }
+
+    for (const s of sections) {
+      const chips = s.entries
+        .map((e) => e.title.trim())
+        .filter((t) => t.length > 0);
+      if (chips.length === 0) continue;
+      rows.push({ name: s.categoryName, chips });
+    }
+    return rows;
+  }
+
+  const communicationMethods = readMethodsArray(communicationMessages);
+  const membershipMethods = readMethodsArray(membershipMessages);
+  const decisionApproachMethods = readMethodsArray(decisionApproachesMessages);
+  const conflictManagementMethods = readMethodsArray(conflictManagementMessages);
+
+  const rows: FinalReviewCategoryRow[] = [
+    { name: names.values, chips: coreValueLabels },
+    {
+      name: names.communication,
+      chips: labelsFromIds(
+        state.selectedCommunicationMethodIds,
+        communicationMethods,
+      ),
+    },
+    {
+      name: names.membership,
+      chips: labelsFromIds(
+        state.selectedMembershipMethodIds,
+        membershipMethods,
+      ),
+    },
+    {
+      name: names.decisions,
+      chips: labelsFromIds(
+        state.selectedDecisionApproachIds,
+        decisionApproachMethods,
+      ),
+    },
+    {
+      name: names.conflict,
+      chips: labelsFromIds(
+        state.selectedConflictManagementIds,
+        conflictManagementMethods,
+      ),
+    },
+  ];
+  return rows.filter((r) => r.chips.length > 0);
+}
diff --git a/lib/create/loadTemplateReviewBySlug.ts b/lib/create/loadTemplateReviewBySlug.ts
new file mode 100644
index 0000000..36d9e51
--- /dev/null
+++ b/lib/create/loadTemplateReviewBySlug.ts
@@ -0,0 +1,44 @@
+import messages from "../../messages/en/index";
+import {
+  fetchTemplateBySlug,
+  type RuleTemplateDto,
+} from "./fetchTemplates";
+
+export type LoadTemplateReviewResult =
+  | { ok: true; template: RuleTemplateDto }
+  | { ok: false; message: string };
+
+/**
+ * Shared prelude for the two template-review actions (Customize and
+ * "Use without changes") in `CreateFlowLayoutClient`. Wraps the slug →
+ * `RuleTemplateDto` fetch and normalizes its three possible failures
+ * (network / server / not-found) into a single localized error message
+ * suitable for the template-review banner.
+ *
+ * Keeping the localized copy here (rather than in the fetch layer) means
+ * callers only forward `result.message` to `setTemplateReviewApplyError`,
+ * and both handlers resolve identical error text from a single source.
+ *
+ * Malformed template bodies (`body` not an object, missing `sections`,
+ * etc.) remain the caller's responsibility because the expected shape
+ * differs between Customize (prefill lookup) and Use-without-changes
+ * (full section extraction). Those checks stay in the handlers that need
+ * them so errors surface at the step where the shape matters.
+ */
+export async function loadTemplateReviewBySlug(
+  slug: string,
+): Promise<LoadTemplateReviewResult> {
+  const errors = messages.create.templateReview.errors;
+  const result = await fetchTemplateBySlug(slug);
+  if (result === null) {
+    return { ok: false, message: errors.notFound };
+  }
+  if ("error" in result) {
+    const trimmed = typeof result.error === "string" ? result.error.trim() : "";
+    return {
+      ok: false,
+      message: trimmed.length > 0 ? trimmed : errors.applyFailed,
+    };
+  }
+  return { ok: true, template: result };
+}
diff --git a/lib/create/methodSlugFromTitle.ts b/lib/create/methodSlugFromTitle.ts
new file mode 100644
index 0000000..c2d8ce5
--- /dev/null
+++ b/lib/create/methodSlugFromTitle.ts
@@ -0,0 +1,20 @@
+/**
+ * Client-safe slugifier that mirrors the one-time ingest that produced
+ * `data/create/customRule/<section>.json` `methods[].id`. Lives in
+ * `lib/create/` (not `lib/server/`) so client code — specifically the
+ * template "Customize" prefill — can map template entry titles to the chip
+ * ids the customize screens read out of `CreateFlowState`.
+ *
+ * Rules: NFKD-normalize, strip diacritics, drop apostrophes/brackets,
+ * collapse non-alphanumerics to single hyphens, trim leading/trailing
+ * hyphens. Server-side `lib/server/templateMethods.ts` re-exports this.
+ */
+export function methodSlugFromTitle(title: string): string {
+  const folded = title.normalize("NFKD").replace(/[\u0300-\u036f]/g, "");
+  const stripped = folded
+    .toLowerCase()
+    .replace(/['’`()\[\]]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return stripped;
+}
diff --git a/lib/server/templateMethods.ts b/lib/server/templateMethods.ts
index 39634dc..ce1257f 100644
--- a/lib/server/templateMethods.ts
+++ b/lib/server/templateMethods.ts
@@ -1,3 +1,4 @@
+import { methodSlugFromTitle } from "../create/methodSlugFromTitle";
 import type { SectionId } from "./validation/methodFacetsSchemas";
 
 /**
@@ -21,18 +22,7 @@ const CATEGORY_NAME_TO_SECTION: Record<string, SectionId> = {
   "Conflict management": "conflictManagement",
 };
 
-export function methodSlugFromTitle(title: string): string {
-  // Match the slugify rules of the one-time messages ingest: NFKD-normalize,
-  // strip diacritics, drop apostrophes/brackets, collapse non-alphanumerics
-  // to single hyphens, trim leading/trailing hyphens.
-  const folded = title.normalize("NFKD").replace(/[\u0300-\u036f]/g, "");
-  const stripped = folded
-    .toLowerCase()
-    .replace(/['’`()\[\]]/g, "")
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "");
-  return stripped;
-}
+export { methodSlugFromTitle };
 
 type RuleTemplateBodySection = {
   categoryName?: unknown;
diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts
index 1857461..33dac8e 100644
--- a/lib/server/validation/createFlowSchemas.ts
+++ b/lib/server/validation/createFlowSchemas.ts
@@ -67,6 +67,13 @@ export const createFlowStateSchema = z
     selectedMembershipMethodIds: z.array(z.string()).max(200).optional(),
     selectedDecisionApproachIds: z.array(z.string()).max(200).optional(),
     selectedConflictManagementIds: z.array(z.string()).max(200).optional(),
+    pendingTemplateAction: z
+      .object({
+        slug: z.string().max(200),
+        mode: z.enum(["customize", "useWithoutChanges"]),
+      })
+      .strict()
+      .optional(),
     currentStep: createFlowStepSchema.optional(),
     sections: z.array(z.unknown()).optional(),
     stakeholders: z.array(z.unknown()).optional(),
diff --git a/messages/en/create/community/review.json b/messages/en/create/community/review.json
index efff3e7..15baefa 100644
--- a/messages/en/create/community/review.json
+++ b/messages/en/create/community/review.json
@@ -4,8 +4,6 @@
     "description": "In the next section, we'll go through membership, decision-making, conflict resolution, and community values and create a custom operating manual for your organization based on the specifics you just shared."
   },
   "ruleCard": {
-    "title": "Mutual Aid Mondays",
-    "description": "Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness.",
-    "logoAlt": "Mutual Aid Mondays"
+    "title": "Mutual Aid Mondays"
   }
 }
diff --git a/messages/en/create/templateReview.json b/messages/en/create/templateReview.json
index b8958c3..fe2bd29 100644
--- a/messages/en/create/templateReview.json
+++ b/messages/en/create/templateReview.json
@@ -5,8 +5,7 @@
   },
   "footer": {
     "useWithoutChanges": "Use without changes",
-    "customize": "Customize",
-    "customizeAriaHint": "Customize flow coming soon; for now this continues to the create flow entry."
+    "customize": "Customize"
   },
   "errors": {
     "loadFailed": "We could not load this template. Try again or pick another template from the home page.",
diff --git a/tests/components/FinalReviewPage.test.tsx b/tests/components/FinalReviewPage.test.tsx
index 364c46a..0c23c7b 100644
--- a/tests/components/FinalReviewPage.test.tsx
+++ b/tests/components/FinalReviewPage.test.tsx
@@ -100,3 +100,46 @@ describe("FinalReviewScreen", () => {
     expect(screen.getByText("Open Admission")).toBeInTheDocument();
   });
 });
+
+/**
+ * Seeds a Customize-from-template style state (method ids + core-value
+ * snapshot) and asserts the final-review RuleCard renders the resolved
+ * labels — the fix for "preselected chips don't register on final review".
+ */
+function FinalReviewWithCustomizeSelections() {
+  const { replaceState } = useCreateFlow();
+  useLayoutEffect(() => {
+    replaceState({
+      title: "Oak Park Commons",
+      selectedCoreValueIds: ["1"],
+      coreValuesChipsSnapshot: [
+        { id: "1", label: "Accessibility", state: "selected" },
+        { id: "2", label: "Accountability", state: "unselected" },
+      ],
+      selectedCommunicationMethodIds: ["signal"],
+      selectedMembershipMethodIds: ["open-access"],
+      selectedDecisionApproachIds: ["lazy-consensus"],
+      selectedConflictManagementIds: ["peer-mediation"],
+    });
+  }, [replaceState]);
+  return <FinalReviewScreen />;
+}
+
+describe("FinalReviewScreen — prefilled selections", () => {
+  it("renders chips resolved from selection ids, not demo fallbacks", async () => {
+    render(<FinalReviewWithCustomizeSelections />);
+    await waitFor(() => {
+      expect(screen.getByText("Accessibility")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Signal")).toBeInTheDocument();
+    expect(screen.getByText("Open Access")).toBeInTheDocument();
+    expect(screen.getByText("Lazy Consensus")).toBeInTheDocument();
+    expect(screen.getByText("Peer Mediation")).toBeInTheDocument();
+
+    // Demo chips from `finalReview.json` must not leak through once the
+    // user has real selections: "Open Admission" is shipped as fallback,
+    // while the customize flow resolves to "Open Access".
+    expect(screen.queryByText("Open Admission")).not.toBeInTheDocument();
+    expect(screen.queryByText("Consciousness")).not.toBeInTheDocument();
+  });
+});
diff --git a/tests/components/ReviewPage.test.tsx b/tests/components/ReviewPage.test.tsx
index 880db9b..fb321ab 100644
--- a/tests/components/ReviewPage.test.tsx
+++ b/tests/components/ReviewPage.test.tsx
@@ -1,9 +1,21 @@
-import { describe, it, expect } from "vitest";
-import { renderWithProviders as render, screen } from "../utils/test-utils";
+import { beforeEach, describe, it, expect } from "vitest";
+import React, { useEffect } from "react";
+import {
+  renderWithProviders as render,
+  screen,
+  waitFor,
+} from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
 import { CommunityReviewScreen } from "../../app/(app)/create/screens/review/CommunityReviewScreen";
+import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
+import { testRouter } from "../mocks/navigation";
 
 describe("CommunityReviewScreen", () => {
+  beforeEach(() => {
+    testRouter.replace.mockReset();
+    testRouter.push.mockReset();
+  });
+
   it("renders without crashing", () => {
     render(<CommunityReviewScreen />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
@@ -27,18 +39,18 @@ describe("CommunityReviewScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders RuleCard with title", () => {
+  it("renders RuleCard with title fallback when no community name is set", () => {
     render(<CommunityReviewScreen />);
     expect(screen.getByText("Mutual Aid Mondays")).toBeInTheDocument();
   });
 
-  it("renders RuleCard with description", () => {
+  it("omits the RuleCard description when the user has not entered community context", () => {
     render(<CommunityReviewScreen />);
     expect(
-      screen.getByText(
-        /Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness./i,
+      screen.queryByText(
+        /Mutual Aid Monday is a grassroots community in Denver/i,
       ),
-    ).toBeInTheDocument();
+    ).not.toBeInTheDocument();
   });
 
   it("renders RuleCard as a button (card is interactive)", () => {
@@ -50,3 +62,60 @@ describe("CommunityReviewScreen", () => {
     ).toBe(true);
   });
 });
+
+/**
+ * Seeds `pendingTemplateAction` into CreateFlowContext before the screen
+ * under test mounts, so we can assert its mount-time redirect behavior.
+ * Mirrors the flow `handleCustomizeTemplate` / `handleUseTemplateWithoutChanges`
+ * create when the user picks a template before completing community stage.
+ */
+function ReviewWithPendingAction({
+  mode,
+}: {
+  mode: "customize" | "useWithoutChanges";
+}) {
+  const { state, updateState } = useCreateFlow();
+  const seededRef = React.useRef(false);
+  useEffect(() => {
+    if (seededRef.current) return;
+    seededRef.current = true;
+    updateState({
+      title: "Neighborhood",
+      pendingTemplateAction: { slug: "mutual-aid-mondays", mode },
+    });
+  }, [mode, updateState]);
+  // Block the real screen from mounting until the seed landed — otherwise
+  // its own `useEffect` reads an empty state on the first pass and bails.
+  if (!state.pendingTemplateAction) return null;
+  return <CommunityReviewScreen />;
+}
+
+describe("CommunityReviewScreen — pendingTemplateAction redirect", () => {
+  beforeEach(() => {
+    testRouter.replace.mockReset();
+    testRouter.push.mockReset();
+  });
+
+  it("redirects to /create/core-values when mode === 'customize'", async () => {
+    render(<ReviewWithPendingAction mode="customize" />);
+    await waitFor(() => {
+      expect(testRouter.replace).toHaveBeenCalledWith("/create/core-values");
+    });
+    expect(testRouter.push).not.toHaveBeenCalled();
+  });
+
+  it("redirects to /create/confirm-stakeholders when mode === 'useWithoutChanges'", async () => {
+    render(<ReviewWithPendingAction mode="useWithoutChanges" />);
+    await waitFor(() => {
+      expect(testRouter.replace).toHaveBeenCalledWith(
+        "/create/confirm-stakeholders",
+      );
+    });
+    expect(testRouter.push).not.toHaveBeenCalled();
+  });
+
+  it("does not redirect when no pendingTemplateAction is set", () => {
+    render(<CommunityReviewScreen />);
+    expect(testRouter.replace).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/components/TopNav.test.tsx b/tests/components/TopNav.test.tsx
index abef64d..dcf1a43 100644
--- a/tests/components/TopNav.test.tsx
+++ b/tests/components/TopNav.test.tsx
@@ -1,12 +1,19 @@
 import React from "react";
-import { vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
 import TopNav from "../../app/components/navigation/TopNav";
+import { renderWithProviders } from "../utils/test-utils";
+import { CREATE_FLOW_ANONYMOUS_KEY } from "../../app/(app)/create/utils/anonymousDraftStorage";
+import { CORE_VALUE_DETAILS_STORAGE_KEY } from "../../app/(app)/create/utils/coreValueDetailsLocalStorage";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
-// Mock next/navigation (TopNav uses useRouter for Create Rule button and usePathname for nav state)
+const { pushMock } = vi.hoisted(() => ({ pushMock: vi.fn() }));
+
 vi.mock("next/navigation", () => ({
   useRouter: () => ({
-    push: vi.fn(),
+    push: pushMock,
     replace: vi.fn(),
     prefetch: vi.fn(),
     back: vi.fn(),
@@ -50,3 +57,45 @@ componentTestSuite<TopNavProps>({
     errorState: false,
   },
 });
+
+describe('TopNav "Create rule" button', () => {
+  beforeEach(() => {
+    pushMock.mockReset();
+    window.localStorage.clear();
+  });
+  afterEach(() => {
+    window.localStorage.clear();
+  });
+
+  /**
+   * Guards against localStorage stickiness on the marketing homepage: hitting
+   * the top-nav "Create rule" from anywhere outside `/create` must wipe the
+   * in-flight anonymous draft so the wizard always starts fresh. See
+   * handleCreateRuleClick in TopNav.container.tsx for the contract.
+   */
+  it("clears anonymous draft + core-value-details localStorage before routing to /create", async () => {
+    window.localStorage.setItem(
+      CREATE_FLOW_ANONYMOUS_KEY,
+      JSON.stringify({ title: "Stale community" }),
+    );
+    window.localStorage.setItem(
+      CORE_VALUE_DETAILS_STORAGE_KEY,
+      JSON.stringify({ "1": { meaning: "m", signals: "s" } }),
+    );
+
+    renderWithProviders(<TopNav folderTop={false} />);
+
+    // TopNav renders the Create Rule button at three breakpoints (xs/sm/md);
+    // any of them clicking the same handler is the point.
+    const [btn] = screen.getAllByRole("button", {
+      name: /create a new rule/i,
+    });
+    await userEvent.click(btn);
+
+    expect(window.localStorage.getItem(CREATE_FLOW_ANONYMOUS_KEY)).toBeNull();
+    expect(
+      window.localStorage.getItem(CORE_VALUE_DETAILS_STORAGE_KEY),
+    ).toBeNull();
+    expect(pushMock).toHaveBeenCalledWith("/create");
+  });
+});
diff --git a/tests/contexts/CreateFlowContext.test.tsx b/tests/contexts/CreateFlowContext.test.tsx
new file mode 100644
index 0000000..37cc1e2
--- /dev/null
+++ b/tests/contexts/CreateFlowContext.test.tsx
@@ -0,0 +1,111 @@
+import { describe, it, expect } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import {
+  CreateFlowProvider,
+  useCreateFlow,
+} from "../../app/(app)/create/context/CreateFlowContext";
+
+/**
+ * Harness: mounts a consumer that renders the state we want to assert on and
+ * exposes imperative handles (updateState, resetCustomRuleSelections) via
+ * window globals. Keeps the test readable vs. threading refs everywhere.
+ */
+function Harness() {
+  const { state, updateState, resetCustomRuleSelections } = useCreateFlow();
+  (window as unknown as { __updateState: typeof updateState }).__updateState =
+    updateState;
+  (
+    window as unknown as { __resetCustomRule: typeof resetCustomRuleSelections }
+  ).__resetCustomRule = resetCustomRuleSelections;
+  return (
+    <>
+      <div data-testid="title">{state.title ?? ""}</div>
+      <div data-testid="core">
+        {(state.selectedCoreValueIds ?? []).join(",")}
+      </div>
+      <div data-testid="comm">
+        {(state.selectedCommunicationMethodIds ?? []).join(",")}
+      </div>
+      <div data-testid="details">
+        {Object.keys(state.coreValueDetailsByChipId ?? {}).join(",")}
+      </div>
+      <div data-testid="snapshot">
+        {(state.coreValuesChipsSnapshot ?? []).map((r) => r.id).join(",")}
+      </div>
+    </>
+  );
+}
+
+function getUpdateState() {
+  return (window as unknown as { __updateState: (u: unknown) => void })
+    .__updateState;
+}
+
+function getResetCustomRule() {
+  return (window as unknown as { __resetCustomRule: () => void })
+    .__resetCustomRule;
+}
+
+describe("CreateFlowContext — resetCustomRuleSelections", () => {
+  it("clears all custom-rule stage selections while keeping community stage", () => {
+    render(
+      <CreateFlowProvider>
+        <Harness />
+      </CreateFlowProvider>,
+    );
+
+    act(() => {
+      getUpdateState()({
+        title: "Mutual Aid Mondays",
+        communityContext: "Neighborhood",
+        selectedCoreValueIds: ["1", "3"],
+        coreValuesChipsSnapshot: [
+          { id: "1", label: "Trust", state: "selected" },
+        ],
+        coreValueDetailsByChipId: {
+          "1": { meaning: "m", signals: "s" },
+        },
+        selectedCommunicationMethodIds: ["consensus-decision-making"],
+        selectedMembershipMethodIds: ["open"],
+        selectedDecisionApproachIds: ["consensus-decision-making"],
+        selectedConflictManagementIds: ["mediation"],
+      });
+    });
+
+    expect(screen.getByTestId("title").textContent).toBe("Mutual Aid Mondays");
+    expect(screen.getByTestId("core").textContent).toBe("1,3");
+    expect(screen.getByTestId("comm").textContent).toBe(
+      "consensus-decision-making",
+    );
+
+    act(() => {
+      getResetCustomRule()();
+    });
+
+    expect(screen.getByTestId("title").textContent).toBe("Mutual Aid Mondays");
+    expect(screen.getByTestId("core").textContent).toBe("");
+    expect(screen.getByTestId("comm").textContent).toBe("");
+    expect(screen.getByTestId("details").textContent).toBe("");
+    expect(screen.getByTestId("snapshot").textContent).toBe("");
+  });
+
+  it("is a no-op when no custom-rule selections were set", () => {
+    render(
+      <CreateFlowProvider>
+        <Harness />
+      </CreateFlowProvider>,
+    );
+
+    act(() => {
+      getUpdateState()({ title: "Just a Community" });
+    });
+
+    act(() => {
+      getResetCustomRule()();
+    });
+
+    expect(screen.getByTestId("title").textContent).toBe("Just a Community");
+    expect(screen.getByTestId("core").textContent).toBe("");
+  });
+});
diff --git a/tests/pages/templates.test.jsx b/tests/pages/templates.test.jsx
index 713a67c..b9b881c 100644
--- a/tests/pages/templates.test.jsx
+++ b/tests/pages/templates.test.jsx
@@ -4,17 +4,35 @@ import {
   cleanup,
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
-import { describe, test, expect, afterEach, beforeEach } from "vitest";
+import { describe, test, expect, afterEach, beforeEach, vi } from "vitest";
+import { useSearchParams } from "next/navigation";
 import TemplatesPageClient from "../../app/(marketing)/templates/TemplatesPageClient";
 import { testRouter } from "../mocks/navigation";
 import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
+import { CREATE_FLOW_ANONYMOUS_KEY } from "../../app/(app)/create/utils/anonymousDraftStorage";
+import { CORE_VALUE_DETAILS_STORAGE_KEY } from "../../app/(app)/create/utils/coreValueDetailsLocalStorage";
+
+/** Seed localStorage as if a stale anonymous draft were already in place. */
+function seedStaleDraft() {
+  window.localStorage.setItem(
+    CREATE_FLOW_ANONYMOUS_KEY,
+    JSON.stringify({ title: "Stale Community" }),
+  );
+  window.localStorage.setItem(
+    CORE_VALUE_DETAILS_STORAGE_KEY,
+    JSON.stringify({ "1": { meaning: "stale", signals: "stale" } }),
+  );
+}
 
 beforeEach(() => {
   testRouter.push.mockClear();
+  vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams());
+  window.localStorage.clear();
 });
 
 afterEach(() => {
   cleanup();
+  window.localStorage.clear();
 });
 
 describe("Templates page (/templates)", () => {
@@ -54,4 +72,51 @@ describe("Templates page (/templates)", () => {
       "/create/review-template/solidarity-network",
     );
   });
+
+  test("direct entry (no ?fromFlow=1): wipes anonymous draft before navigating", async () => {
+    seedStaleDraft();
+    const user = userEvent.setup();
+    render(
+      <TemplatesPageClient initialGridEntries={GOVERNANCE_TEMPLATE_CATALOG} />,
+    );
+
+    const consensusCard = screen.getByText("Consensus").closest("div");
+    await user.click(consensusCard);
+
+    expect(window.localStorage.getItem(CREATE_FLOW_ANONYMOUS_KEY)).toBeNull();
+    expect(
+      window.localStorage.getItem(CORE_VALUE_DETAILS_STORAGE_KEY),
+    ).toBeNull();
+    expect(testRouter.push).toHaveBeenCalledWith(
+      "/create/review-template/consensus",
+    );
+  });
+
+  test("in-flow entry (?fromFlow=1): preserves the anonymous draft", async () => {
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams("fromFlow=1"),
+    );
+    seedStaleDraft();
+    const user = userEvent.setup();
+    render(
+      <TemplatesPageClient initialGridEntries={GOVERNANCE_TEMPLATE_CATALOG} />,
+    );
+
+    const consensusCard = screen.getByText("Consensus").closest("div");
+    await user.click(consensusCard);
+
+    expect(window.localStorage.getItem(CREATE_FLOW_ANONYMOUS_KEY)).toBe(
+      JSON.stringify({ title: "Stale Community" }),
+    );
+    expect(
+      window.localStorage.getItem(CORE_VALUE_DETAILS_STORAGE_KEY),
+    ).toBe(
+      JSON.stringify({ "1": { meaning: "stale", signals: "stale" } }),
+    );
+    // No `?fromFlow=1` on the outbound review-template URL — the marker
+    // only disambiguates /templates' own click behavior.
+    expect(testRouter.push).toHaveBeenCalledWith(
+      "/create/review-template/consensus",
+    );
+  });
 });
diff --git a/tests/unit/RuleStack.test.jsx b/tests/unit/RuleStack.test.jsx
index 70fa471..419aa59 100644
--- a/tests/unit/RuleStack.test.jsx
+++ b/tests/unit/RuleStack.test.jsx
@@ -14,6 +14,8 @@ import {
   GOVERNANCE_TEMPLATE_HOME_SLUGS,
   getGovernanceTemplatesForHome,
 } from "../../lib/templates/governanceTemplateCatalog";
+import { CREATE_FLOW_ANONYMOUS_KEY } from "../../app/(app)/create/utils/anonymousDraftStorage";
+import { CORE_VALUE_DETAILS_STORAGE_KEY } from "../../app/(app)/create/utils/coreValueDetailsLocalStorage";
 
 const homeFeatured = getGovernanceTemplatesForHome();
 
@@ -212,6 +214,31 @@ describe("RuleStack Component", () => {
     debugSpy.mockRestore();
   });
 
+  test("template click from home wipes any stale anonymous draft", async () => {
+    window.localStorage.setItem(
+      CREATE_FLOW_ANONYMOUS_KEY,
+      JSON.stringify({ title: "Stale Community" }),
+    );
+    window.localStorage.setItem(
+      CORE_VALUE_DETAILS_STORAGE_KEY,
+      JSON.stringify({ "1": { meaning: "stale", signals: "stale" } }),
+    );
+
+    const user = userEvent.setup();
+    render(<RuleStack />);
+    await waitForRuleStackCards();
+
+    const consensusCard = screen.getByText("Consensus").closest("div");
+    await user.click(consensusCard);
+
+    expect(window.localStorage.getItem(CREATE_FLOW_ANONYMOUS_KEY)).toBeNull();
+    expect(
+      window.localStorage.getItem(CORE_VALUE_DETAILS_STORAGE_KEY),
+    ).toBeNull();
+
+    window.localStorage.clear();
+  });
+
   test("renders with proper semantic structure", async () => {
     render(<RuleStack />);
     await waitForRuleStackCards();
diff --git a/tests/unit/applyTemplatePrefill.test.ts b/tests/unit/applyTemplatePrefill.test.ts
new file mode 100644
index 0000000..f479c77
--- /dev/null
+++ b/tests/unit/applyTemplatePrefill.test.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import { buildTemplateCustomizePrefill } from "../../lib/create/applyTemplatePrefill";
+import coreValuesMessages from "../../messages/en/create/customRule/coreValues.json";
+
+function coreValuePresetId(label: string): string {
+  const values = coreValuesMessages.values as Array<
+    string | { label: string }
+  >;
+  const idx = values.findIndex((v) => {
+    const l = typeof v === "string" ? v : v.label;
+    return l.toLowerCase() === label.toLowerCase();
+  });
+  return String(idx + 1);
+}
+
+describe("buildTemplateCustomizePrefill", () => {
+  it("returns an empty object for malformed bodies", () => {
+    expect(buildTemplateCustomizePrefill(null)).toEqual({});
+    expect(buildTemplateCustomizePrefill({})).toEqual({});
+    expect(buildTemplateCustomizePrefill({ sections: "nope" })).toEqual({});
+  });
+
+  it("maps communication / membership / decisions / conflict titles to method-id slugs", () => {
+    const body = {
+      sections: [
+        {
+          categoryName: "Communication",
+          entries: [
+            { title: "In-Person Meetings", body: "x" },
+            { title: "Loomio", body: "y" },
+          ],
+        },
+        {
+          categoryName: "Membership",
+          entries: [{ title: "Peer Sponsorship", body: "m" }],
+        },
+        {
+          categoryName: "Decision-making",
+          entries: [{ title: "Consensus Decision-Making", body: "d" }],
+        },
+        {
+          categoryName: "Conflict management",
+          entries: [{ title: "Restorative Justice", body: "c" }],
+        },
+      ],
+    };
+    expect(buildTemplateCustomizePrefill(body)).toEqual({
+      selectedCommunicationMethodIds: ["in-person-meetings", "loomio"],
+      selectedMembershipMethodIds: ["peer-sponsorship"],
+      selectedDecisionApproachIds: ["consensus-decision-making"],
+      selectedConflictManagementIds: ["restorative-justice"],
+    });
+  });
+
+  it("matches template Values against the preset list and marks them selected", () => {
+    const body = {
+      sections: [
+        {
+          categoryName: "Values",
+          entries: [
+            { title: "Consensus", body: "" },
+            { title: "Community Care", body: "" },
+          ],
+        },
+      ],
+    };
+    const prefill = buildTemplateCustomizePrefill(body);
+    const selected = prefill.selectedCoreValueIds ?? [];
+    expect(selected).toContain(coreValuePresetId("Consensus"));
+    expect(selected).toContain(coreValuePresetId("Community Care"));
+
+    const snapshot = prefill.coreValuesChipsSnapshot ?? [];
+    const selectedRows = snapshot.filter((r) => r.state === "selected");
+    expect(selectedRows.map((r) => r.label).sort()).toEqual([
+      "Community Care",
+      "Consensus",
+    ]);
+    // Unmatched presets should still appear, as unselected, so the screen
+    // renders the full chip list (the select screen reads the snapshot as-is).
+    expect(snapshot.length).toBeGreaterThan(selectedRows.length);
+  });
+
+  it("preserves bespoke template values as custom chip rows", () => {
+    const body = {
+      sections: [
+        {
+          categoryName: "Values",
+          entries: [{ title: "Very Bespoke Thing", body: "" }],
+        },
+      ],
+    };
+    const prefill = buildTemplateCustomizePrefill(body);
+    const custom = (prefill.coreValuesChipsSnapshot ?? []).find(
+      (r) => r.label === "Very Bespoke Thing",
+    );
+    expect(custom).toBeDefined();
+    expect(custom?.state).toBe("selected");
+    expect(prefill.selectedCoreValueIds).toContain(custom?.id);
+  });
+
+  it("ignores unknown category names", () => {
+    const prefill = buildTemplateCustomizePrefill({
+      sections: [
+        { categoryName: "Mystery", entries: [{ title: "What", body: "" }] },
+      ],
+    });
+    expect(prefill).toEqual({});
+  });
+});
diff --git a/tests/unit/buildFinalReviewCategories.test.ts b/tests/unit/buildFinalReviewCategories.test.ts
new file mode 100644
index 0000000..ca77307
--- /dev/null
+++ b/tests/unit/buildFinalReviewCategories.test.ts
@@ -0,0 +1,135 @@
+import { describe, it, expect } from "vitest";
+import { buildFinalReviewCategoriesFromState } from "../../lib/create/buildFinalReviewCategories";
+import type { CreateFlowState } from "../../app/(app)/create/types";
+
+const NAMES = {
+  values: "Values",
+  communication: "Communication",
+  membership: "Membership",
+  decisions: "Decision-making",
+  conflict: "Conflict management",
+};
+
+describe("buildFinalReviewCategoriesFromState", () => {
+  it("returns [] when state has no selections and no sections", () => {
+    expect(buildFinalReviewCategoriesFromState({}, NAMES)).toEqual([]);
+  });
+
+  it("resolves method ids to labels from message presets", () => {
+    // IDs here match `messages/en/create/customRule/*.json` `methods[].id`.
+    // Same shape `buildTemplateCustomizePrefill` emits via methodSlugFromTitle.
+    const state: CreateFlowState = {
+      selectedCommunicationMethodIds: ["signal", "in-person-meetings"],
+      selectedMembershipMethodIds: ["open-access"],
+      selectedDecisionApproachIds: ["lazy-consensus"],
+      selectedConflictManagementIds: ["peer-mediation"],
+    };
+    const rows = buildFinalReviewCategoriesFromState(state, NAMES);
+    const byName = new Map(rows.map((r) => [r.name, r.chips]));
+    expect(byName.get("Communication")).toEqual([
+      "Signal",
+      "In-Person Meetings",
+    ]);
+    expect(byName.get("Membership")).toEqual(["Open Access"]);
+    expect(byName.get("Decision-making")).toEqual(["Lazy Consensus"]);
+    expect(byName.get("Conflict management")).toEqual(["Peer Mediation"]);
+    expect(byName.has("Values")).toBe(false);
+  });
+
+  it("derives core values via buildCoreValuesForDocument (snapshot + selected ids)", () => {
+    const state: CreateFlowState = {
+      selectedCoreValueIds: ["1", "custom-one"],
+      coreValuesChipsSnapshot: [
+        { id: "1", label: "Accessibility", state: "selected" },
+        { id: "2", label: "Accountability", state: "unselected" },
+        { id: "custom-one", label: "Resilience", state: "selected" },
+      ],
+    };
+    const rows = buildFinalReviewCategoriesFromState(state, NAMES);
+    expect(rows).toEqual([
+      { name: "Values", chips: ["Accessibility", "Resilience"] },
+    ]);
+  });
+
+  it("drops unknown ids silently instead of inserting empty labels", () => {
+    const state: CreateFlowState = {
+      selectedCommunicationMethodIds: ["signal", "bogus-id"],
+    };
+    const rows = buildFinalReviewCategoriesFromState(state, NAMES);
+    expect(rows).toEqual([{ name: "Communication", chips: ["Signal"] }]);
+  });
+
+  it("dedupes repeated labels from duplicate ids", () => {
+    const state: CreateFlowState = {
+      selectedCommunicationMethodIds: ["signal", "signal"],
+    };
+    const rows = buildFinalReviewCategoriesFromState(state, NAMES);
+    expect(rows).toEqual([{ name: "Communication", chips: ["Signal"] }]);
+  });
+
+  it("prefers state.sections when populated (use-without-changes path)", () => {
+    const state: CreateFlowState = {
+      sections: [
+        {
+          categoryName: "Values",
+          entries: [
+            { title: "Consciousness", body: "…" },
+            { title: "Ecology", body: "…" },
+          ],
+        },
+        {
+          categoryName: "Communication",
+          entries: [{ title: "Signal", body: "…" }],
+        },
+      ],
+      // Selection ids must be ignored when sections is present — the
+      // "Use without changes" handler resets them for exactly that reason,
+      // but we double-check the helper honors the sections branch first.
+      selectedCommunicationMethodIds: ["in-person-meetings"],
+    };
+    const rows = buildFinalReviewCategoriesFromState(state, NAMES);
+    expect(rows).toEqual([
+      { name: "Values", chips: ["Consciousness", "Ecology"] },
+      { name: "Communication", chips: ["Signal"] },
+    ]);
+  });
+
+  it("prepends a Values row from coreValuesChipsSnapshot when sections lack one", () => {
+    const state: CreateFlowState = {
+      sections: [
+        {
+          categoryName: "Communication",
+          entries: [{ title: "Signal", body: "…" }],
+        },
+      ],
+      selectedCoreValueIds: ["1"],
+      coreValuesChipsSnapshot: [
+        { id: "1", label: "Accessibility", state: "selected" },
+      ],
+    };
+    const rows = buildFinalReviewCategoriesFromState(state, NAMES);
+    expect(rows).toEqual([
+      { name: "Values", chips: ["Accessibility"] },
+      { name: "Communication", chips: ["Signal"] },
+    ]);
+  });
+
+  it("does not duplicate Values when sections already includes one", () => {
+    const state: CreateFlowState = {
+      sections: [
+        {
+          categoryName: "Values",
+          entries: [{ title: "Consciousness", body: "…" }],
+        },
+      ],
+      selectedCoreValueIds: ["1"],
+      coreValuesChipsSnapshot: [
+        { id: "1", label: "Accessibility", state: "selected" },
+      ],
+    };
+    const rows = buildFinalReviewCategoriesFromState(state, NAMES);
+    expect(rows).toEqual([
+      { name: "Values", chips: ["Consciousness"] },
+    ]);
+  });
+});
diff --git a/tests/unit/hasCreateFlowUserInput.test.ts b/tests/unit/hasCreateFlowUserInput.test.ts
deleted file mode 100644
index 2f8ad15..0000000
--- a/tests/unit/hasCreateFlowUserInput.test.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { hasCreateFlowUserInput } from "../../app/(app)/create/utils/hasCreateFlowUserInput";
-
-describe("hasCreateFlowUserInput", () => {
-  it("returns false for empty state", () => {
-    expect(hasCreateFlowUserInput({})).toBe(false);
-  });
-
-  it("ignores currentStep alone", () => {
-    expect(hasCreateFlowUserInput({ currentStep: "informational" })).toBe(
-      false,
-    );
-  });
-
-  it("returns true for non-empty title", () => {
-    expect(hasCreateFlowUserInput({ title: "My rule" })).toBe(true);
-  });
-
-  it("returns false for whitespace-only title", () => {
-    expect(hasCreateFlowUserInput({ title: "   " })).toBe(false);
-  });
-
-  it("returns true for non-empty sections array", () => {
-    expect(hasCreateFlowUserInput({ sections: [{}] })).toBe(true);
-  });
-
-  it("returns false for empty sections array", () => {
-    expect(hasCreateFlowUserInput({ sections: [] })).toBe(false);
-  });
-
-  it("returns true for extra step-specific keys with content", () => {
-    expect(hasCreateFlowUserInput({ cards: ["a"] })).toBe(true);
-  });
-
-  it("returns false for extra keys with empty object", () => {
-    expect(hasCreateFlowUserInput({ foo: {} })).toBe(false);
-  });
-});

From a22d53e860a183c5cb2681b983c1af59d08391fe Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 20 Apr 2026 17:57:17 -0600
Subject: [PATCH 12/15] Final review edit modals created

---
 app/(app)/create/CreateFlowLayoutClient.tsx   |  24 +-
 .../components/FinalReviewChipEditModal.tsx   | 335 ++++++++++++++++++
 .../CommunicationMethodEditFields.tsx         |  61 ++++
 .../ConflictManagementEditFields.tsx          |  78 ++++
 .../methodEditFields/CoreValueEditFields.tsx  |  57 +++
 .../DecisionApproachEditFields.tsx            |  95 +++++
 .../MembershipMethodEditFields.tsx            |  61 ++++
 .../components/methodEditFields/index.ts      |  14 +
 .../card/CommunicationMethodsScreen.tsx       | 163 ++++-----
 .../screens/card/ConflictManagementScreen.tsx | 203 ++++-------
 .../screens/card/MembershipMethodsScreen.tsx  | 168 ++++-----
 .../screens/review/FinalReviewScreen.tsx      | 196 ++++++++--
 .../right-rail/DecisionApproachesScreen.tsx   | 216 ++++-------
 .../screens/select/CoreValuesSelectScreen.tsx |  61 ++--
 app/(app)/create/types.ts                     |  51 +++
 docs/guides/backend-linear-tickets.md         |  55 ++-
 lib/create/applyTemplatePrefill.ts            |  30 ++
 lib/create/buildFinalReviewCategories.ts      | 251 +++++++++----
 lib/create/buildPublishPayload.ts             | 137 ++++++-
 lib/create/finalReviewChipPresets.ts          | 190 ++++++++++
 lib/server/validation/createFlowSchemas.ts    |  45 +++
 .../create/reviewAndComplete/finalReview.json |   5 +
 ...unicationMethodsScreenPersistence.test.tsx | 150 ++++++++
 tests/components/FinalReviewPage.test.tsx     | 245 ++++++++++++-
 tests/unit/applyTemplatePrefill.test.ts       |  48 ++-
 tests/unit/buildFinalReviewCategories.test.ts |   8 +-
 tests/unit/buildPublishPayload.test.ts        |  83 +++++
 27 files changed, 2410 insertions(+), 620 deletions(-)
 create mode 100644 app/(app)/create/components/FinalReviewChipEditModal.tsx
 create mode 100644 app/(app)/create/components/methodEditFields/CommunicationMethodEditFields.tsx
 create mode 100644 app/(app)/create/components/methodEditFields/ConflictManagementEditFields.tsx
 create mode 100644 app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx
 create mode 100644 app/(app)/create/components/methodEditFields/DecisionApproachEditFields.tsx
 create mode 100644 app/(app)/create/components/methodEditFields/MembershipMethodEditFields.tsx
 create mode 100644 app/(app)/create/components/methodEditFields/index.ts
 create mode 100644 lib/create/finalReviewChipPresets.ts
 create mode 100644 tests/components/CommunicationMethodsScreenPersistence.test.tsx

diff --git a/app/(app)/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx
index 057617d..2f5812b 100644
--- a/app/(app)/create/CreateFlowLayoutClient.tsx
+++ b/app/(app)/create/CreateFlowLayoutClient.tsx
@@ -34,7 +34,10 @@ import {
 } from "./utils/anonymousDraftStorage";
 import { deleteServerDraft } from "../../../lib/create/api";
 import { writeLastPublishedRule } from "../../../lib/create/lastPublishedRule";
-import { buildTemplateCustomizePrefill } from "../../../lib/create/applyTemplatePrefill";
+import {
+  buildCoreValuesPrefillFromTemplateBody,
+  buildTemplateCustomizePrefill,
+} from "../../../lib/create/applyTemplatePrefill";
 import { loadTemplateReviewBySlug } from "../../../lib/create/loadTemplateReviewBySlug";
 import messages from "../../../messages/en/index";
 import {
@@ -298,6 +301,22 @@ function CreateFlowLayoutContent({
     // don't bleed into `document.coreValues` at publish time.
     resetCustomRuleSelections();
 
+    // Seed the core-values snapshot from the Values section so the
+    // final-review chip modal can edit them (it keys edits by chip id).
+    // The Values entries themselves are then dropped from `sections` to
+    // avoid publishing `document.coreValues` and `document.sections.Values`
+    // for the same data — matches the "Customize" path's data shape.
+    const coreValuesPrefill = buildCoreValuesPrefillFromTemplateBody(doc);
+    const sectionsWithoutValues =
+      Object.keys(coreValuesPrefill).length > 0
+        ? sections.filter((s) => {
+            const name = (s as { categoryName?: unknown }).categoryName;
+            if (typeof name !== "string") return true;
+            const key = name.toLowerCase().replace(/[^a-z]+/g, "");
+            return key !== "values" && key !== "corevalues";
+          })
+        : sections;
+
     const summaryRaw =
       typeof template.description === "string"
         ? template.description.trim()
@@ -305,7 +324,8 @@ function CreateFlowLayoutContent({
     const hasCommunityName =
       typeof state.title === "string" && state.title.trim().length > 0;
     updateState({
-      sections,
+      ...coreValuesPrefill,
+      sections: sectionsWithoutValues,
       ...(summaryRaw.length > 0 ? { summary: summaryRaw } : {}),
       ...(hasCommunityName
         ? { pendingTemplateAction: undefined }
diff --git a/app/(app)/create/components/FinalReviewChipEditModal.tsx b/app/(app)/create/components/FinalReviewChipEditModal.tsx
new file mode 100644
index 0000000..d53d0cc
--- /dev/null
+++ b/app/(app)/create/components/FinalReviewChipEditModal.tsx
@@ -0,0 +1,335 @@
+"use client";
+
+/**
+ * Editable mirror of {@link TemplateChipDetailModal} for the final-review
+ * screen. Each chip on `/create/final-review` opens this modal — same field
+ * set as the matching custom-rule add-method modals, but with a **Save**
+ * button instead of **Add**:
+ *
+ * - Initial field values come from the matching `{group}DetailsById` state
+ *   override when present; otherwise from the preset defaults shipped in
+ *   `messages/en/create/customRule/*.json` (see {@link finalReviewChipPresets}).
+ * - Save is disabled until the user edits any field (cheap structural
+ *   compare against the seeded snapshot). Saving writes the draft into
+ *   `CreateFlowState` via the caller's `onSave` handler and closes; the
+ *   state then rides along through the existing localStorage mirror,
+ *   signed-in server draft PUT (Save & Exit), and `buildPublishPayload`
+ *   (Finalize).
+ * - Closing the modal without saving discards any edits — the parent never
+ *   hears about them.
+ *
+ * The actual field rendering lives in `components/methodEditFields/*` and
+ * is shared with the custom-rule add-method modals so the two surfaces stay
+ * in lockstep automatically.
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import Create from "../../../components/modals/Create";
+import ContentLockup from "../../../components/type/ContentLockup";
+import { useMessages, useTranslation } from "../../../contexts/MessagesContext";
+import {
+  CommunicationMethodEditFields,
+  ConflictManagementEditFields,
+  CoreValueEditFields,
+  DecisionApproachEditFields,
+  MembershipMethodEditFields,
+} from "./methodEditFields";
+import {
+  communicationPresetFor,
+  conflictManagementPresetFor,
+  coreValuePresetFor,
+  decisionApproachPresetFor,
+  membershipPresetFor,
+} from "../../../../lib/create/finalReviewChipPresets";
+import type {
+  CommunicationMethodDetailEntry,
+  ConflictManagementDetailEntry,
+  CoreValueDetailEntry,
+  CreateFlowState,
+  DecisionApproachDetailEntry,
+  MembershipMethodDetailEntry,
+} from "../types";
+import type { TemplateFacetGroupKey } from "../../../../lib/create/templateReviewMapping";
+
+export type FinalReviewChipEditTarget = {
+  /** Stable key for override lookup: preset id (methods) or chip id (core values). */
+  overrideKey: string;
+  /** Category group that decides which field set to render. */
+  groupKey: TemplateFacetGroupKey;
+  /** Display label shown at the top of the modal (localized chip label). */
+  chipLabel: string;
+};
+
+export type FinalReviewChipEditPatch =
+  | { groupKey: "coreValues"; overrideKey: string; value: CoreValueDetailEntry }
+  | {
+      groupKey: "communication";
+      overrideKey: string;
+      value: CommunicationMethodDetailEntry;
+    }
+  | {
+      groupKey: "membership";
+      overrideKey: string;
+      value: MembershipMethodDetailEntry;
+    }
+  | {
+      groupKey: "decisionApproaches";
+      overrideKey: string;
+      value: DecisionApproachDetailEntry;
+    }
+  | {
+      groupKey: "conflictManagement";
+      overrideKey: string;
+      value: ConflictManagementDetailEntry;
+    };
+
+export interface FinalReviewChipEditModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /**
+   * Chip being edited. Passed `null` while the modal is closing so the
+   * component can cleanly reset its internal draft state.
+   */
+  target: FinalReviewChipEditTarget | null;
+  /** Current flow state — used to seed the modal from saved overrides. */
+  state: CreateFlowState;
+  /** Called with the typed patch when the user clicks Save. */
+  onSave: (_patch: FinalReviewChipEditPatch) => void;
+}
+
+/**
+ * Discriminated union of every group's draft + value. Storing both the
+ * `groupKey` and the `value` together keeps render-time switches exhaustive
+ * and prevents the four method group states from drifting apart (which is
+ * the bug that motivated extracting `methodEditFields/*` in the first place).
+ */
+type Draft =
+  | { groupKey: "coreValues"; value: CoreValueDetailEntry }
+  | { groupKey: "communication"; value: CommunicationMethodDetailEntry }
+  | { groupKey: "membership"; value: MembershipMethodDetailEntry }
+  | { groupKey: "decisionApproaches"; value: DecisionApproachDetailEntry }
+  | { groupKey: "conflictManagement"; value: ConflictManagementDetailEntry };
+
+export function FinalReviewChipEditModal({
+  isOpen,
+  onClose,
+  target,
+  state,
+  onSave,
+}: FinalReviewChipEditModalProps) {
+  const m = useMessages();
+  const tCv = m.create.customRule.coreValues;
+  const tComm = m.create.customRule.communication;
+  const tMem = m.create.customRule.membership;
+  const tDa = m.create.customRule.decisionApproaches;
+  const tCm = m.create.customRule.conflictManagement;
+  const tModal = useTranslation(
+    "create.reviewAndComplete.finalReview.chipEditModal",
+  );
+
+  const [draft, setDraft] = useState<Draft | null>(null);
+  /**
+   * JSON-stringified seed used for the cheap dirty check. Re-captured on
+   * every (re)open so reopening a chip after a save shows Save-disabled
+   * again until the user makes a fresh edit.
+   */
+  const initialSnapshotRef = useRef<string>("");
+  const seededTargetRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!isOpen || !target) return;
+    const targetKey = `${target.groupKey}:${target.overrideKey}`;
+    if (seededTargetRef.current === targetKey) return;
+
+    const seed = seedDraftForTarget(target, state);
+    setDraft(seed);
+    initialSnapshotRef.current = JSON.stringify(seed.value);
+    seededTargetRef.current = targetKey;
+  }, [isOpen, target, state]);
+
+  useEffect(() => {
+    if (!isOpen) seededTargetRef.current = null;
+  }, [isOpen]);
+
+  const isDirty = useMemo(() => {
+    if (!draft) return false;
+    return JSON.stringify(draft.value) !== initialSnapshotRef.current;
+  }, [draft]);
+
+  const handleSave = () => {
+    if (!target || !draft || !isDirty) return;
+    onSave({
+      groupKey: draft.groupKey,
+      overrideKey: target.overrideKey,
+      value: draft.value,
+    } as FinalReviewChipEditPatch);
+    onClose();
+  };
+
+  const subtitle = useMemo(() => {
+    if (!target) return "";
+    return subtitleForTarget(target, { tCv, tComm, tMem, tDa, tCm });
+  }, [target, tCv, tComm, tMem, tDa, tCm]);
+
+  return (
+    <Create
+      isOpen={isOpen}
+      onClose={onClose}
+      backdropVariant="loginYellow"
+      headerContent={
+        <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
+          <ContentLockup
+            title={target?.chipLabel ?? ""}
+            description={subtitle}
+            variant="modal"
+            alignment="left"
+          />
+        </div>
+      }
+      showBackButton={false}
+      showNextButton
+      nextButtonText={tModal("saveButton")}
+      nextButtonDisabled={!isDirty}
+      onNext={handleSave}
+      ariaLabel={target?.chipLabel || "Edit chip details"}
+    >
+      <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
+        {draft?.groupKey === "coreValues" && (
+          <CoreValueEditFields
+            value={draft.value}
+            onChange={(value) => setDraft({ groupKey: "coreValues", value })}
+          />
+        )}
+        {draft?.groupKey === "communication" && (
+          <CommunicationMethodEditFields
+            value={draft.value}
+            onChange={(value) =>
+              setDraft({ groupKey: "communication", value })
+            }
+          />
+        )}
+        {draft?.groupKey === "membership" && (
+          <MembershipMethodEditFields
+            value={draft.value}
+            onChange={(value) => setDraft({ groupKey: "membership", value })}
+          />
+        )}
+        {draft?.groupKey === "decisionApproaches" && (
+          <DecisionApproachEditFields
+            value={draft.value}
+            onChange={(value) =>
+              setDraft({ groupKey: "decisionApproaches", value })
+            }
+          />
+        )}
+        {draft?.groupKey === "conflictManagement" && (
+          <ConflictManagementEditFields
+            value={draft.value}
+            onChange={(value) =>
+              setDraft({ groupKey: "conflictManagement", value })
+            }
+          />
+        )}
+      </div>
+    </Create>
+  );
+}
+
+// ---------- helpers ------------------------------------------------------
+
+function seedDraftForTarget(
+  target: FinalReviewChipEditTarget,
+  state: CreateFlowState,
+): Draft {
+  switch (target.groupKey) {
+    case "coreValues": {
+      const saved = state.coreValueDetailsByChipId?.[target.overrideKey];
+      const preset = coreValuePresetFor(target.overrideKey);
+      return {
+        groupKey: "coreValues",
+        value: {
+          meaning: saved?.meaning ?? preset.meaning,
+          signals: saved?.signals ?? preset.signals,
+        },
+      };
+    }
+    case "communication": {
+      const saved =
+        state.communicationMethodDetailsById?.[target.overrideKey] ??
+        communicationPresetFor(target.overrideKey);
+      return { groupKey: "communication", value: { ...saved } };
+    }
+    case "membership": {
+      const saved =
+        state.membershipMethodDetailsById?.[target.overrideKey] ??
+        membershipPresetFor(target.overrideKey);
+      return { groupKey: "membership", value: { ...saved } };
+    }
+    case "decisionApproaches": {
+      const saved =
+        state.decisionApproachDetailsById?.[target.overrideKey] ??
+        decisionApproachPresetFor(target.overrideKey);
+      return {
+        groupKey: "decisionApproaches",
+        value: {
+          ...saved,
+          applicableScope: [...saved.applicableScope],
+          selectedApplicableScope: [...saved.selectedApplicableScope],
+        },
+      };
+    }
+    case "conflictManagement": {
+      const saved =
+        state.conflictManagementDetailsById?.[target.overrideKey] ??
+        conflictManagementPresetFor(target.overrideKey);
+      return {
+        groupKey: "conflictManagement",
+        value: {
+          ...saved,
+          applicableScope: [...saved.applicableScope],
+          selectedApplicableScope: [...saved.selectedApplicableScope],
+        },
+      };
+    }
+  }
+}
+
+type SubtitleMessages = {
+  tCv: ReturnType<typeof useMessages>["create"]["customRule"]["coreValues"];
+  tComm: ReturnType<typeof useMessages>["create"]["customRule"]["communication"];
+  tMem: ReturnType<typeof useMessages>["create"]["customRule"]["membership"];
+  tDa: ReturnType<
+    typeof useMessages
+  >["create"]["customRule"]["decisionApproaches"];
+  tCm: ReturnType<
+    typeof useMessages
+  >["create"]["customRule"]["conflictManagement"];
+};
+
+function subtitleForTarget(
+  target: FinalReviewChipEditTarget,
+  msgs: SubtitleMessages,
+): string {
+  switch (target.groupKey) {
+    case "coreValues":
+      return msgs.tCv.detailModal.subtitle;
+    case "communication":
+      return findMethodSupportText(msgs.tComm.methods, target.overrideKey);
+    case "membership":
+      return findMethodSupportText(msgs.tMem.methods, target.overrideKey);
+    case "decisionApproaches":
+      return findMethodSupportText(msgs.tDa.methods, target.overrideKey);
+    case "conflictManagement":
+      return findMethodSupportText(msgs.tCm.methods, target.overrideKey);
+  }
+}
+
+function findMethodSupportText(
+  methods: readonly { id: string; supportText: string }[],
+  id: string,
+): string {
+  for (const method of methods) {
+    if (method.id === id) return method.supportText;
+  }
+  return "";
+}
diff --git a/app/(app)/create/components/methodEditFields/CommunicationMethodEditFields.tsx b/app/(app)/create/components/methodEditFields/CommunicationMethodEditFields.tsx
new file mode 100644
index 0000000..221baa7
--- /dev/null
+++ b/app/(app)/create/components/methodEditFields/CommunicationMethodEditFields.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+/**
+ * Controlled section editor for a communication-method chip. Used by both
+ * the custom-rule `communication-methods` add-method modal and the
+ * `final-review` chip edit modal — caller owns draft state and decides when
+ * to persist or discard.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import type { CommunicationMethodDetailEntry } from "../../types";
+
+export interface CommunicationMethodEditFieldsProps {
+  value: CommunicationMethodDetailEntry;
+  onChange: (_next: CommunicationMethodDetailEntry) => void;
+}
+
+const FIELDS: ReadonlyArray<keyof CommunicationMethodDetailEntry> = [
+  "corePrinciple",
+  "logisticsAdmin",
+  "codeOfConduct",
+];
+
+function CommunicationMethodEditFieldsComponent({
+  value,
+  onChange,
+}: CommunicationMethodEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.communication;
+
+  const patch = useCallback(
+    <K extends keyof CommunicationMethodDetailEntry>(
+      key: K,
+      next: CommunicationMethodDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      {FIELDS.map((field) => (
+        <ModalTextAreaField
+          key={field}
+          label={t.sectionHeadings[field]}
+          rows={6}
+          value={value[field]}
+          onChange={(v) => patch(field, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
+CommunicationMethodEditFieldsComponent.displayName =
+  "CommunicationMethodEditFields";
+
+export default memo(CommunicationMethodEditFieldsComponent);
diff --git a/app/(app)/create/components/methodEditFields/ConflictManagementEditFields.tsx b/app/(app)/create/components/methodEditFields/ConflictManagementEditFields.tsx
new file mode 100644
index 0000000..3c0da4f
--- /dev/null
+++ b/app/(app)/create/components/methodEditFields/ConflictManagementEditFields.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+/**
+ * Controlled section editor for a conflict-management chip. Used by both the
+ * custom-rule `conflict-management` add-method modal and the `final-review`
+ * chip edit modal. Caller owns draft state and persistence.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import ApplicableScopeField from "../ApplicableScopeField";
+import type { ConflictManagementDetailEntry } from "../../types";
+
+export interface ConflictManagementEditFieldsProps {
+  value: ConflictManagementDetailEntry;
+  onChange: (_next: ConflictManagementDetailEntry) => void;
+}
+
+function ConflictManagementEditFieldsComponent({
+  value,
+  onChange,
+}: ConflictManagementEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.conflictManagement;
+
+  const patch = useCallback(
+    <K extends keyof ConflictManagementDetailEntry>(
+      key: K,
+      next: ConflictManagementDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ModalTextAreaField
+        label={t.sectionHeadings.corePrinciple}
+        value={value.corePrinciple}
+        onChange={(v) => patch("corePrinciple", v)}
+      />
+      <ApplicableScopeField
+        label={t.sectionHeadings.applicableScope}
+        addLabel={t.scopeAddButtonLabel}
+        scopes={value.applicableScope}
+        selectedScopes={value.selectedApplicableScope}
+        onToggleScope={(scope) =>
+          patch(
+            "selectedApplicableScope",
+            value.selectedApplicableScope.includes(scope)
+              ? value.selectedApplicableScope.filter((s) => s !== scope)
+              : [...value.selectedApplicableScope, scope],
+          )
+        }
+        onAddScope={(scope) =>
+          patch("applicableScope", [...value.applicableScope, scope])
+        }
+      />
+      <ModalTextAreaField
+        label={t.sectionHeadings.processProtocol}
+        value={value.processProtocol}
+        onChange={(v) => patch("processProtocol", v)}
+      />
+      <ModalTextAreaField
+        label={t.sectionHeadings.restorationFallbacks}
+        value={value.restorationFallbacks}
+        onChange={(v) => patch("restorationFallbacks", v)}
+      />
+    </div>
+  );
+}
+
+ConflictManagementEditFieldsComponent.displayName =
+  "ConflictManagementEditFields";
+
+export default memo(ConflictManagementEditFieldsComponent);
diff --git a/app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx b/app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx
new file mode 100644
index 0000000..e612028
--- /dev/null
+++ b/app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+/**
+ * Controlled meaning/signals field set for a core-value chip. Rendered both
+ * by `core-values` (custom-rule selection step) and `final-review` (chip
+ * edit modal). Holds no state — the parent owns the draft and decides when
+ * to persist (`updateState`) or discard.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import type { CoreValueDetailEntry } from "../../types";
+
+export interface CoreValueEditFieldsProps {
+  value: CoreValueDetailEntry;
+  onChange: (_next: CoreValueDetailEntry) => void;
+}
+
+function CoreValueEditFieldsComponent({
+  value,
+  onChange,
+}: CoreValueEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.coreValues.detailModal;
+
+  const patch = useCallback(
+    <K extends keyof CoreValueDetailEntry>(
+      key: K,
+      next: CoreValueDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
+      <ModalTextAreaField
+        label={t.meaningLabel}
+        value={value.meaning}
+        onChange={(v) => patch("meaning", v)}
+        rows={4}
+      />
+      <ModalTextAreaField
+        label={t.signalsLabel}
+        value={value.signals}
+        onChange={(v) => patch("signals", v)}
+        rows={4}
+      />
+    </div>
+  );
+}
+
+CoreValueEditFieldsComponent.displayName = "CoreValueEditFields";
+
+export default memo(CoreValueEditFieldsComponent);
diff --git a/app/(app)/create/components/methodEditFields/DecisionApproachEditFields.tsx b/app/(app)/create/components/methodEditFields/DecisionApproachEditFields.tsx
new file mode 100644
index 0000000..08c3132
--- /dev/null
+++ b/app/(app)/create/components/methodEditFields/DecisionApproachEditFields.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+/**
+ * Controlled section editor for a decision-approach chip. Used by both the
+ * custom-rule `decision-approaches` add-method modal and the `final-review`
+ * chip edit modal. Caller owns draft state — Confirm/Save persistence and
+ * `markCreateFlowInteraction` live in the parent.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import ApplicableScopeField from "../ApplicableScopeField";
+import IncrementerBlock from "../../../../components/controls/IncrementerBlock";
+import type { DecisionApproachDetailEntry } from "../../types";
+
+export interface DecisionApproachEditFieldsProps {
+  value: DecisionApproachDetailEntry;
+  onChange: (_next: DecisionApproachDetailEntry) => void;
+}
+
+const CONSENSUS_LEVEL_MIN = 0;
+const CONSENSUS_LEVEL_MAX = 100;
+const CONSENSUS_LEVEL_STEP = 5;
+
+function DecisionApproachEditFieldsComponent({
+  value,
+  onChange,
+}: DecisionApproachEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.decisionApproaches;
+
+  const patch = useCallback(
+    <K extends keyof DecisionApproachDetailEntry>(
+      key: K,
+      next: DecisionApproachDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ModalTextAreaField
+        label={t.sectionHeadings.corePrinciple}
+        value={value.corePrinciple}
+        onChange={(v) => patch("corePrinciple", v)}
+      />
+      <ApplicableScopeField
+        label={t.sectionHeadings.applicableScope}
+        addLabel={t.scopeAddButtonLabel}
+        scopes={value.applicableScope}
+        selectedScopes={value.selectedApplicableScope}
+        onToggleScope={(scope) =>
+          patch(
+            "selectedApplicableScope",
+            value.selectedApplicableScope.includes(scope)
+              ? value.selectedApplicableScope.filter((s) => s !== scope)
+              : [...value.selectedApplicableScope, scope],
+          )
+        }
+        onAddScope={(scope) =>
+          patch("applicableScope", [...value.applicableScope, scope])
+        }
+      />
+      <ModalTextAreaField
+        label={t.sectionHeadings.stepByStepInstructions}
+        value={value.stepByStepInstructions}
+        onChange={(v) => patch("stepByStepInstructions", v)}
+      />
+      <IncrementerBlock
+        label={t.sectionHeadings.consensusLevel}
+        value={value.consensusLevel}
+        min={CONSENSUS_LEVEL_MIN}
+        max={CONSENSUS_LEVEL_MAX}
+        step={CONSENSUS_LEVEL_STEP}
+        onChange={(next) => patch("consensusLevel", next)}
+        formatValue={(v) => `${v}%`}
+        decrementAriaLabel="Decrease consensus level"
+        incrementAriaLabel="Increase consensus level"
+      />
+      <ModalTextAreaField
+        label={t.sectionHeadings.objectionsDeadlocks}
+        value={value.objectionsDeadlocks}
+        onChange={(v) => patch("objectionsDeadlocks", v)}
+      />
+    </div>
+  );
+}
+
+DecisionApproachEditFieldsComponent.displayName =
+  "DecisionApproachEditFields";
+
+export default memo(DecisionApproachEditFieldsComponent);
diff --git a/app/(app)/create/components/methodEditFields/MembershipMethodEditFields.tsx b/app/(app)/create/components/methodEditFields/MembershipMethodEditFields.tsx
new file mode 100644
index 0000000..8372756
--- /dev/null
+++ b/app/(app)/create/components/methodEditFields/MembershipMethodEditFields.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+/**
+ * Controlled section editor for a membership-method chip. Used by both the
+ * custom-rule `membership-methods` add-method modal and the `final-review`
+ * chip edit modal — caller owns draft state and decides when to persist or
+ * discard.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import ModalTextAreaField from "../ModalTextAreaField";
+import type { MembershipMethodDetailEntry } from "../../types";
+
+export interface MembershipMethodEditFieldsProps {
+  value: MembershipMethodDetailEntry;
+  onChange: (_next: MembershipMethodDetailEntry) => void;
+}
+
+const FIELDS: ReadonlyArray<keyof MembershipMethodDetailEntry> = [
+  "eligibility",
+  "joiningProcess",
+  "expectations",
+];
+
+function MembershipMethodEditFieldsComponent({
+  value,
+  onChange,
+}: MembershipMethodEditFieldsProps) {
+  const m = useMessages();
+  const t = m.create.customRule.membership;
+
+  const patch = useCallback(
+    <K extends keyof MembershipMethodDetailEntry>(
+      key: K,
+      next: MembershipMethodDetailEntry[K],
+    ) => {
+      onChange({ ...value, [key]: next });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      {FIELDS.map((field) => (
+        <ModalTextAreaField
+          key={field}
+          label={t.sectionHeadings[field]}
+          rows={6}
+          value={value[field]}
+          onChange={(v) => patch(field, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
+MembershipMethodEditFieldsComponent.displayName =
+  "MembershipMethodEditFields";
+
+export default memo(MembershipMethodEditFieldsComponent);
diff --git a/app/(app)/create/components/methodEditFields/index.ts b/app/(app)/create/components/methodEditFields/index.ts
new file mode 100644
index 0000000..4ca359f
--- /dev/null
+++ b/app/(app)/create/components/methodEditFields/index.ts
@@ -0,0 +1,14 @@
+export { default as CoreValueEditFields } from "./CoreValueEditFields";
+export type { CoreValueEditFieldsProps } from "./CoreValueEditFields";
+
+export { default as CommunicationMethodEditFields } from "./CommunicationMethodEditFields";
+export type { CommunicationMethodEditFieldsProps } from "./CommunicationMethodEditFields";
+
+export { default as MembershipMethodEditFields } from "./MembershipMethodEditFields";
+export type { MembershipMethodEditFieldsProps } from "./MembershipMethodEditFields";
+
+export { default as DecisionApproachEditFields } from "./DecisionApproachEditFields";
+export type { DecisionApproachEditFieldsProps } from "./DecisionApproachEditFields";
+
+export { default as ConflictManagementEditFields } from "./ConflictManagementEditFields";
+export type { ConflictManagementEditFieldsProps } from "./ConflictManagementEditFields";
diff --git a/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
index 6784e4b..c386e43 100644
--- a/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
@@ -7,6 +7,11 @@
  * Lives under `screens/card/` (not `select/`): Figma **card stack** layout is a distinct shell from
  * two-column chip **select** frames. Future card-stack steps get their own `*Screen.tsx` here and
  * reuse `CardStack` / `CreateFlowStepShell` as needed.
+ *
+ * Card click opens the Figma "Add Platform" create modal (node `20246-15829`) with three
+ * editable sections rendered by {@link CommunicationMethodEditFields}. The same field set is
+ * reused on `/create/final-review` — see `FinalReviewChipEditModal`. Confirm persists both
+ * the chip selection and any user edits as a `communicationMethodDetailsById[id]` override.
  */
 
 import { useState, useCallback, useMemo } from "react";
@@ -27,61 +32,9 @@ import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
-import ModalTextAreaField from "../../components/ModalTextAreaField";
-
-const SECTION_FIELDS = [
-  "corePrinciple",
-  "logisticsAdmin",
-  "codeOfConduct",
-] as const;
-type SectionField = (typeof SECTION_FIELDS)[number];
-
-function AddPlatformModalContent({
-  platformCardId,
-}: {
-  platformCardId: string;
-}) {
-  const { markCreateFlowInteraction } = useCreateFlow();
-  const m = useMessages();
-  const comm = m.create.customRule.communication;
-  const method = comm.methods.find((entry) => entry.id === platformCardId);
-  const sections = method?.sections;
-  const defaults: Record<SectionField, string> = {
-    corePrinciple: sections?.corePrinciple ?? "",
-    logisticsAdmin: sections?.logisticsAdmin ?? "",
-    codeOfConduct: sections?.codeOfConduct ?? "",
-  };
-
-  const [sectionValues, setSectionValues] = useState<
-    Record<SectionField, string>
-  >(() => ({
-    corePrinciple: defaults.corePrinciple,
-    logisticsAdmin: defaults.logisticsAdmin,
-    codeOfConduct: defaults.codeOfConduct,
-  }));
-
-  const updateSection = useCallback(
-    (key: SectionField, value: string) => {
-      markCreateFlowInteraction();
-      setSectionValues((prev) => ({ ...prev, [key]: value }));
-    },
-    [markCreateFlowInteraction],
-  );
-
-  return (
-    <div className="flex flex-col gap-6">
-      {SECTION_FIELDS.map((field) => (
-        <ModalTextAreaField
-          key={field}
-          label={comm.sectionHeadings[field]}
-          rows={6}
-          value={sectionValues[field]}
-          onChange={(v) => updateSection(field, v)}
-        />
-      ))}
-    </div>
-  );
-}
+import { CommunicationMethodEditFields } from "../../components/methodEditFields";
+import { communicationPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
+import type { CommunicationMethodDetailEntry } from "../../types";
 
 export function CommunicationMethodsScreen() {
   const m = useMessages();
@@ -91,16 +44,11 @@ export function CommunicationMethodsScreen() {
   const [expanded, setExpanded] = useState(false);
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [pendingCardId, setPendingCardId] = useState<string | null>(null);
+  const [pendingDraft, setPendingDraft] =
+    useState<CommunicationMethodDetailEntry | null>(null);
 
   const selectedIds = state.selectedCommunicationMethodIds ?? [];
 
-  const setSelectedIds = useCallback(
-    (next: string[]) => {
-      updateState({ selectedCommunicationMethodIds: next });
-    },
-    [updateState],
-  );
-
   const { scoresBySlug, hasAnyFacets } =
     useFacetRecommendations("communication");
   const rankedMethods = useMemo(
@@ -148,55 +96,81 @@ export function CommunicationMethodsScreen() {
     </>
   );
 
-  const modalConfig = (() => {
-    if (!pendingCardId) {
-      return {
+  const modalConfig = pendingCardId
+    ? (() => {
+        const method = methodById.get(pendingCardId);
+        return {
+          title: method?.label ?? comm.confirmModal.title,
+          description: method?.supportText ?? comm.confirmModal.description,
+          nextButtonText: comm.addPlatform.nextButtonText,
+        };
+      })()
+    : {
         title: comm.confirmModal.title,
         description: comm.confirmModal.description,
         nextButtonText: comm.confirmModal.nextButtonText,
-        showBackButton: false as const,
-        currentStep: undefined,
-        totalSteps: undefined,
       };
-    }
 
-    const method = methodById.get(pendingCardId);
-    return {
-      title: method?.label ?? comm.confirmModal.title,
-      description: method?.supportText ?? comm.confirmModal.description,
-      nextButtonText: comm.addPlatform.nextButtonText,
-      showBackButton: false as const,
-      currentStep: undefined,
-      totalSteps: undefined,
-    };
-  })();
+  const seedDraft = useCallback(
+    (id: string): CommunicationMethodDetailEntry => {
+      const saved = state.communicationMethodDetailsById?.[id];
+      if (saved) {
+        return { ...saved };
+      }
+      return communicationPresetFor(id);
+    },
+    [state.communicationMethodDetailsById],
+  );
 
   const handleCardClick = useCallback(
     (id: string) => {
       markCreateFlowInteraction();
       setPendingCardId(id);
+      setPendingDraft(seedDraft(id));
       setCreateModalOpen(true);
     },
+    [markCreateFlowInteraction, seedDraft],
+  );
+
+  const handleDraftChange = useCallback(
+    (next: CommunicationMethodDetailEntry) => {
+      markCreateFlowInteraction();
+      setPendingDraft(next);
+    },
     [markCreateFlowInteraction],
   );
 
   const handleCreateModalClose = useCallback(() => {
     setCreateModalOpen(false);
     setPendingCardId(null);
+    setPendingDraft(null);
   }, []);
 
   const handleCreateModalConfirm = useCallback(() => {
-    markCreateFlowInteraction();
-    if (pendingCardId) {
-      setSelectedIds(
-        selectedIds.includes(pendingCardId)
-          ? selectedIds
-          : [...selectedIds, pendingCardId],
-      );
+    if (!pendingCardId || !pendingDraft) {
+      handleCreateModalClose();
+      return;
     }
-    setCreateModalOpen(false);
-    setPendingCardId(null);
-  }, [markCreateFlowInteraction, pendingCardId, selectedIds, setSelectedIds]);
+    markCreateFlowInteraction();
+    updateState({
+      selectedCommunicationMethodIds: selectedIds.includes(pendingCardId)
+        ? selectedIds
+        : [...selectedIds, pendingCardId],
+      communicationMethodDetailsById: {
+        ...(state.communicationMethodDetailsById ?? {}),
+        [pendingCardId]: pendingDraft,
+      },
+    });
+    handleCreateModalClose();
+  }, [
+    handleCreateModalClose,
+    markCreateFlowInteraction,
+    pendingCardId,
+    pendingDraft,
+    selectedIds,
+    state.communicationMethodDetailsById,
+    updateState,
+  ]);
 
   return (
     <CreateFlowStepShell
@@ -238,15 +212,14 @@ export function CommunicationMethodsScreen() {
         title={modalConfig.title}
         description={modalConfig.description}
         nextButtonText={modalConfig.nextButtonText}
-        showBackButton={modalConfig.showBackButton}
-        currentStep={modalConfig.currentStep}
-        totalSteps={modalConfig.totalSteps}
+        showBackButton={false}
         backdropVariant="loginYellow"
       >
-        {pendingCardId ? (
-          <AddPlatformModalContent
+        {pendingCardId && pendingDraft ? (
+          <CommunicationMethodEditFields
             key={pendingCardId}
-            platformCardId={pendingCardId}
+            value={pendingDraft}
+            onChange={handleDraftChange}
           />
         ) : null}
       </Create>
diff --git a/app/(app)/create/screens/card/ConflictManagementScreen.tsx b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
index 3b804ff..4948988 100644
--- a/app/(app)/create/screens/card/ConflictManagementScreen.tsx
+++ b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
@@ -4,11 +4,12 @@
  * `conflict-management` step — Figma compact card stack (node `20879-15979`).
  * Registry: `CREATE_FLOW_SCREEN_REGISTRY["conflict-management"]`.
  *
- * Card click opens the Figma "Add Approach" create modal (node `20874-172292`) with four
- * controls: Core Principle, Applicable Scope (capsules), Process Protocol, and Restoration
- * & Fallbacks. Section defaults are sourced from
- * `messages/en/create/customRule/conflictManagement.json` and will be replaced with DB-driven
- * content; labels are hard-coded per the Figma design.
+ * Card click opens the Figma "Add Approach" create modal (node `20874-172292`)
+ * with four controls rendered by {@link ConflictManagementEditFields}: Core
+ * Principle, Applicable Scope (capsules), Process Protocol, and Restoration
+ * & Fallbacks. The same field set is reused on `/create/final-review` — see
+ * `FinalReviewChipEditModal`. Confirm persists both the chip selection and
+ * any user edits as a `conflictManagementDetailsById[id]` override.
  */
 
 import { useState, useCallback, useMemo } from "react";
@@ -29,91 +30,9 @@ import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
-import ModalTextAreaField from "../../components/ModalTextAreaField";
-import ApplicableScopeField from "../../components/ApplicableScopeField";
-
-type ConflictModalSections = {
-  corePrinciple: string;
-  applicableScope: string[];
-  selectedApplicableScope: string[];
-  processProtocol: string;
-  restorationFallbacks: string;
-};
-
-function AddConflictApproachModalContent({
-  approachCardId,
-}: {
-  approachCardId: string;
-}) {
-  const { markCreateFlowInteraction } = useCreateFlow();
-  const m = useMessages();
-  const cm = m.create.customRule.conflictManagement;
-  const method = cm.methods.find((entry) => entry.id === approachCardId);
-  const modalSections = method?.sections;
-  const defaults: ConflictModalSections = {
-    corePrinciple: modalSections?.corePrinciple ?? "",
-    applicableScope: modalSections?.applicableScope ?? [],
-    selectedApplicableScope: [],
-    processProtocol: modalSections?.processProtocol ?? "",
-    restorationFallbacks: modalSections?.restorationFallbacks ?? "",
-  };
-
-  const [sections, setSections] = useState<ConflictModalSections>(() => ({
-    corePrinciple: defaults.corePrinciple,
-    applicableScope: [...defaults.applicableScope],
-    selectedApplicableScope: [...defaults.selectedApplicableScope],
-    processProtocol: defaults.processProtocol,
-    restorationFallbacks: defaults.restorationFallbacks,
-  }));
-
-  const patch = useCallback(
-    <K extends keyof ConflictModalSections>(
-      key: K,
-      value: ConflictModalSections[K],
-    ) => {
-      markCreateFlowInteraction();
-      setSections((prev) => ({ ...prev, [key]: value }));
-    },
-    [markCreateFlowInteraction],
-  );
-
-  return (
-    <div className="flex flex-col gap-6">
-      <ModalTextAreaField
-        label={cm.sectionHeadings.corePrinciple}
-        value={sections.corePrinciple}
-        onChange={(v) => patch("corePrinciple", v)}
-      />
-      <ApplicableScopeField
-        label={cm.sectionHeadings.applicableScope}
-        addLabel={cm.scopeAddButtonLabel}
-        scopes={sections.applicableScope}
-        selectedScopes={sections.selectedApplicableScope}
-        onToggleScope={(scope) =>
-          patch(
-            "selectedApplicableScope",
-            sections.selectedApplicableScope.includes(scope)
-              ? sections.selectedApplicableScope.filter((s) => s !== scope)
-              : [...sections.selectedApplicableScope, scope],
-          )
-        }
-        onAddScope={(scope) =>
-          patch("applicableScope", [...sections.applicableScope, scope])
-        }
-      />
-      <ModalTextAreaField
-        label={cm.sectionHeadings.processProtocol}
-        value={sections.processProtocol}
-        onChange={(v) => patch("processProtocol", v)}
-      />
-      <ModalTextAreaField
-        label={cm.sectionHeadings.restorationFallbacks}
-        value={sections.restorationFallbacks}
-        onChange={(v) => patch("restorationFallbacks", v)}
-      />
-    </div>
-  );
-}
+import { ConflictManagementEditFields } from "../../components/methodEditFields";
+import { conflictManagementPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
+import type { ConflictManagementDetailEntry } from "../../types";
 
 export function ConflictManagementScreen() {
   const m = useMessages();
@@ -123,16 +42,11 @@ export function ConflictManagementScreen() {
   const [expanded, setExpanded] = useState(false);
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [pendingCardId, setPendingCardId] = useState<string | null>(null);
+  const [pendingDraft, setPendingDraft] =
+    useState<ConflictManagementDetailEntry | null>(null);
 
   const selectedIds = state.selectedConflictManagementIds ?? [];
 
-  const setSelectedIds = useCallback(
-    (next: string[]) => {
-      updateState({ selectedConflictManagementIds: next });
-    },
-    [updateState],
-  );
-
   const { scoresBySlug, hasAnyFacets } =
     useFacetRecommendations("conflictManagement");
   const rankedMethods = useMemo(
@@ -180,55 +94,85 @@ export function ConflictManagementScreen() {
     </>
   );
 
-  const modalConfig = (() => {
-    if (!pendingCardId) {
-      return {
+  const modalConfig = pendingCardId
+    ? (() => {
+        const method = methodById.get(pendingCardId);
+        return {
+          title: method?.label ?? cm.confirmModal.title,
+          description: method?.supportText ?? cm.confirmModal.description,
+          nextButtonText: cm.addApproach.nextButtonText,
+        };
+      })()
+    : {
         title: cm.confirmModal.title,
         description: cm.confirmModal.description,
         nextButtonText: cm.confirmModal.nextButtonText,
-        showBackButton: false as const,
-        currentStep: undefined,
-        totalSteps: undefined,
       };
-    }
 
-    const method = methodById.get(pendingCardId);
-    return {
-      title: method?.label ?? cm.confirmModal.title,
-      description: method?.supportText ?? cm.confirmModal.description,
-      nextButtonText: cm.addApproach.nextButtonText,
-      showBackButton: false as const,
-      currentStep: undefined,
-      totalSteps: undefined,
-    };
-  })();
+  const seedDraft = useCallback(
+    (id: string): ConflictManagementDetailEntry => {
+      const saved = state.conflictManagementDetailsById?.[id];
+      if (saved) {
+        return {
+          ...saved,
+          applicableScope: [...saved.applicableScope],
+          selectedApplicableScope: [...saved.selectedApplicableScope],
+        };
+      }
+      return conflictManagementPresetFor(id);
+    },
+    [state.conflictManagementDetailsById],
+  );
 
   const handleCardClick = useCallback(
     (id: string) => {
       markCreateFlowInteraction();
       setPendingCardId(id);
+      setPendingDraft(seedDraft(id));
       setCreateModalOpen(true);
     },
+    [markCreateFlowInteraction, seedDraft],
+  );
+
+  const handleDraftChange = useCallback(
+    (next: ConflictManagementDetailEntry) => {
+      markCreateFlowInteraction();
+      setPendingDraft(next);
+    },
     [markCreateFlowInteraction],
   );
 
   const handleCreateModalClose = useCallback(() => {
     setCreateModalOpen(false);
     setPendingCardId(null);
+    setPendingDraft(null);
   }, []);
 
   const handleCreateModalConfirm = useCallback(() => {
-    markCreateFlowInteraction();
-    if (pendingCardId) {
-      setSelectedIds(
-        selectedIds.includes(pendingCardId)
-          ? selectedIds
-          : [...selectedIds, pendingCardId],
-      );
+    if (!pendingCardId || !pendingDraft) {
+      handleCreateModalClose();
+      return;
     }
-    setCreateModalOpen(false);
-    setPendingCardId(null);
-  }, [markCreateFlowInteraction, pendingCardId, selectedIds, setSelectedIds]);
+    markCreateFlowInteraction();
+    updateState({
+      selectedConflictManagementIds: selectedIds.includes(pendingCardId)
+        ? selectedIds
+        : [...selectedIds, pendingCardId],
+      conflictManagementDetailsById: {
+        ...(state.conflictManagementDetailsById ?? {}),
+        [pendingCardId]: pendingDraft,
+      },
+    });
+    handleCreateModalClose();
+  }, [
+    handleCreateModalClose,
+    markCreateFlowInteraction,
+    pendingCardId,
+    pendingDraft,
+    selectedIds,
+    state.conflictManagementDetailsById,
+    updateState,
+  ]);
 
   return (
     <CreateFlowStepShell
@@ -270,15 +214,14 @@ export function ConflictManagementScreen() {
         title={modalConfig.title}
         description={modalConfig.description}
         nextButtonText={modalConfig.nextButtonText}
-        showBackButton={modalConfig.showBackButton}
-        currentStep={modalConfig.currentStep}
-        totalSteps={modalConfig.totalSteps}
+        showBackButton={false}
         backdropVariant="loginYellow"
       >
-        {pendingCardId ? (
-          <AddConflictApproachModalContent
+        {pendingCardId && pendingDraft ? (
+          <ConflictManagementEditFields
             key={pendingCardId}
-            approachCardId={pendingCardId}
+            value={pendingDraft}
+            onChange={handleDraftChange}
           />
         ) : null}
       </Create>
diff --git a/app/(app)/create/screens/card/MembershipMethodsScreen.tsx b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
index bd20b52..902c989 100644
--- a/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
@@ -5,10 +5,12 @@
  * Registry: `CREATE_FLOW_SCREEN_REGISTRY["membership-methods"]`.
  *
  * Card click opens the Figma create modal (node `20858-13948`) with three
- * editable sections — Eligibility & Philosophy, Joining Process, and
- * Expectations & Removal. Section defaults come from
- * `messages/en/create/customRule/membership.json` and will be replaced with DB-driven
- * content.
+ * 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.
  */
 
 import { useState, useCallback, useMemo } from "react";
@@ -29,61 +31,9 @@ import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
-import ModalTextAreaField from "../../components/ModalTextAreaField";
-
-const SECTION_FIELDS = [
-  "eligibility",
-  "joiningProcess",
-  "expectations",
-] as const;
-type SectionField = (typeof SECTION_FIELDS)[number];
-
-function AddMembershipModalContent({
-  membershipCardId,
-}: {
-  membershipCardId: string;
-}) {
-  const { markCreateFlowInteraction } = useCreateFlow();
-  const m = useMessages();
-  const mem = m.create.customRule.membership;
-  const method = mem.methods.find((entry) => entry.id === membershipCardId);
-  const sections = method?.sections;
-  const defaults: Record<SectionField, string> = {
-    eligibility: sections?.eligibility ?? "",
-    joiningProcess: sections?.joiningProcess ?? "",
-    expectations: sections?.expectations ?? "",
-  };
-
-  const [sectionValues, setSectionValues] = useState<
-    Record<SectionField, string>
-  >(() => ({
-    eligibility: defaults.eligibility,
-    joiningProcess: defaults.joiningProcess,
-    expectations: defaults.expectations,
-  }));
-
-  const updateSection = useCallback(
-    (key: SectionField, value: string) => {
-      markCreateFlowInteraction();
-      setSectionValues((prev) => ({ ...prev, [key]: value }));
-    },
-    [markCreateFlowInteraction],
-  );
-
-  return (
-    <div className="flex flex-col gap-6">
-      {SECTION_FIELDS.map((field) => (
-        <ModalTextAreaField
-          key={field}
-          label={mem.sectionHeadings[field]}
-          rows={6}
-          value={sectionValues[field]}
-          onChange={(v) => updateSection(field, v)}
-        />
-      ))}
-    </div>
-  );
-}
+import { MembershipMethodEditFields } from "../../components/methodEditFields";
+import { membershipPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
+import type { MembershipMethodDetailEntry } from "../../types";
 
 export function MembershipMethodsScreen() {
   const m = useMessages();
@@ -93,16 +43,11 @@ export function MembershipMethodsScreen() {
   const [expanded, setExpanded] = useState(false);
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [pendingCardId, setPendingCardId] = useState<string | null>(null);
+  const [pendingDraft, setPendingDraft] =
+    useState<MembershipMethodDetailEntry | null>(null);
 
   const selectedIds = state.selectedMembershipMethodIds ?? [];
 
-  const setSelectedIds = useCallback(
-    (next: string[]) => {
-      updateState({ selectedMembershipMethodIds: next });
-    },
-    [updateState],
-  );
-
   const { scoresBySlug, hasAnyFacets } =
     useFacetRecommendations("membership");
   const rankedMethods = useMemo(
@@ -150,55 +95,81 @@ export function MembershipMethodsScreen() {
     </>
   );
 
-  const modalConfig = (() => {
-    if (!pendingCardId) {
-      return {
+  const modalConfig = pendingCardId
+    ? (() => {
+        const method = methodById.get(pendingCardId);
+        return {
+          title: method?.label ?? mem.confirmModal.title,
+          description: method?.supportText ?? mem.confirmModal.description,
+          nextButtonText: mem.addPlatform.nextButtonText,
+        };
+      })()
+    : {
         title: mem.confirmModal.title,
         description: mem.confirmModal.description,
         nextButtonText: mem.confirmModal.nextButtonText,
-        showBackButton: false as const,
-        currentStep: undefined,
-        totalSteps: undefined,
       };
-    }
 
-    const method = methodById.get(pendingCardId);
-    return {
-      title: method?.label ?? mem.confirmModal.title,
-      description: method?.supportText ?? mem.confirmModal.description,
-      nextButtonText: mem.addPlatform.nextButtonText,
-      showBackButton: false as const,
-      currentStep: undefined,
-      totalSteps: undefined,
-    };
-  })();
+  const seedDraft = useCallback(
+    (id: string): MembershipMethodDetailEntry => {
+      const saved = state.membershipMethodDetailsById?.[id];
+      if (saved) {
+        return { ...saved };
+      }
+      return membershipPresetFor(id);
+    },
+    [state.membershipMethodDetailsById],
+  );
 
   const handleCardClick = useCallback(
     (id: string) => {
       markCreateFlowInteraction();
       setPendingCardId(id);
+      setPendingDraft(seedDraft(id));
       setCreateModalOpen(true);
     },
+    [markCreateFlowInteraction, seedDraft],
+  );
+
+  const handleDraftChange = useCallback(
+    (next: MembershipMethodDetailEntry) => {
+      markCreateFlowInteraction();
+      setPendingDraft(next);
+    },
     [markCreateFlowInteraction],
   );
 
   const handleCreateModalClose = useCallback(() => {
     setCreateModalOpen(false);
     setPendingCardId(null);
+    setPendingDraft(null);
   }, []);
 
   const handleCreateModalConfirm = useCallback(() => {
-    markCreateFlowInteraction();
-    if (pendingCardId) {
-      setSelectedIds(
-        selectedIds.includes(pendingCardId)
-          ? selectedIds
-          : [...selectedIds, pendingCardId],
-      );
+    if (!pendingCardId || !pendingDraft) {
+      handleCreateModalClose();
+      return;
     }
-    setCreateModalOpen(false);
-    setPendingCardId(null);
-  }, [markCreateFlowInteraction, pendingCardId, selectedIds, setSelectedIds]);
+    markCreateFlowInteraction();
+    updateState({
+      selectedMembershipMethodIds: selectedIds.includes(pendingCardId)
+        ? selectedIds
+        : [...selectedIds, pendingCardId],
+      membershipMethodDetailsById: {
+        ...(state.membershipMethodDetailsById ?? {}),
+        [pendingCardId]: pendingDraft,
+      },
+    });
+    handleCreateModalClose();
+  }, [
+    handleCreateModalClose,
+    markCreateFlowInteraction,
+    pendingCardId,
+    pendingDraft,
+    selectedIds,
+    state.membershipMethodDetailsById,
+    updateState,
+  ]);
 
   return (
     <CreateFlowStepShell
@@ -240,15 +211,14 @@ export function MembershipMethodsScreen() {
         title={modalConfig.title}
         description={modalConfig.description}
         nextButtonText={modalConfig.nextButtonText}
-        showBackButton={modalConfig.showBackButton}
-        currentStep={modalConfig.currentStep}
-        totalSteps={modalConfig.totalSteps}
+        showBackButton={false}
         backdropVariant="loginYellow"
       >
-        {pendingCardId ? (
-          <AddMembershipModalContent
+        {pendingCardId && pendingDraft ? (
+          <MembershipMethodEditFields
             key={pendingCardId}
-            membershipCardId={pendingCardId}
+            value={pendingDraft}
+            onChange={handleDraftChange}
           />
         ) : null}
       </Create>
diff --git a/app/(app)/create/screens/review/FinalReviewScreen.tsx b/app/(app)/create/screens/review/FinalReviewScreen.tsx
index 82003e8..5fea46e 100644
--- a/app/(app)/create/screens/review/FinalReviewScreen.tsx
+++ b/app/(app)/create/screens/review/FinalReviewScreen.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import RuleCard from "../../../../components/cards/RuleCard";
 import type { Category } from "../../../../components/cards/RuleCard/RuleCard.types";
+import { TemplateChipDetailModal } from "../../../../components/cards/TemplateReviewCard/TemplateChipDetailModal";
 import { useMessages, useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
@@ -11,22 +12,15 @@ import {
   CreateFlowLockupCardStepShell,
 } from "../../components/CreateFlowLockupCardStepShell";
 import {
-  buildFinalReviewCategoriesFromState,
-  type FinalReviewCategoryRow,
+  buildFinalReviewCategoryRowsDetailed,
+  type FinalReviewCategoryRowDetailed,
 } from "../../../../../lib/create/buildFinalReviewCategories";
-
-function buildFinalReviewCategories(
-  rows: readonly FinalReviewCategoryRow[],
-): Category[] {
-  return rows.map((cat) => ({
-    name: cat.name,
-    chipOptions: cat.chips.map((label, idx) => ({
-      id: `${cat.name}-${idx}`,
-      label,
-      state: "unselected" as const,
-    })),
-  }));
-}
+import type { TemplateChipDetail } from "../../../../../lib/create/templateReviewMapping";
+import {
+  FinalReviewChipEditModal,
+  type FinalReviewChipEditPatch,
+  type FinalReviewChipEditTarget,
+} from "../../components/FinalReviewChipEditModal";
 
 /**
  * `finalReview.json.categories` ships a demo ordering + localized names
@@ -36,7 +30,7 @@ function buildFinalReviewCategories(
  * plain-custom flows, and fall back to the demo chips when state resolves
  * to nothing selected.
  */
-function readFallbackCategoryNames(
+function readFallbackCategoryRows(
   categories: readonly { name: string; chips: readonly string[] }[],
 ): {
   names: {
@@ -46,7 +40,7 @@ function readFallbackCategoryNames(
     decisions: string;
     conflict: string;
   };
-  rows: FinalReviewCategoryRow[];
+  rows: FinalReviewCategoryRowDetailed[];
 } {
   const get = (i: number): string =>
     typeof categories[i]?.name === "string" ? categories[i].name : "";
@@ -58,28 +52,158 @@ function readFallbackCategoryNames(
       decisions: get(3),
       conflict: get(4),
     },
-    rows: categories.map((c) => ({ name: c.name, chips: [...c.chips] })),
+    rows: categories.map((c) => ({
+      name: c.name,
+      groupKey: null,
+      entries: [...c.chips].map((label) => ({
+        label,
+        groupKey: null,
+        overrideKey: null,
+      })),
+    })),
   };
 }
 
 export function FinalReviewScreen() {
-  const { state } = useCreateFlow();
+  const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
   const mdUp = useCreateFlowMdUp();
   const t = useTranslation("create.reviewAndComplete.finalReview");
   const m = useMessages();
 
-  const finalReviewCategories = useMemo(() => {
-    const { names, rows: fallbackRows } = readFallbackCategoryNames(
+  /**
+   * Two modals coexist on this screen:
+   *
+   * - {@link FinalReviewChipEditModal} — editable Save-button version used
+   *   whenever the chip resolves to a stable `overrideKey` (core-value
+   *   chip id, or a method preset id). Writes through to
+   *   `{group}DetailsById` state fields on Save; close-without-save is a
+   *   no-op so any typed edits are discarded.
+   * - {@link TemplateChipDetailModal} — read-only fallback for chips we
+   *   can't map to an override key (e.g. template body entries on the
+   *   "Use without changes" path where no preset matches the title).
+   *
+   * `activeEditTarget` drives the editable modal; `activeReadOnlyDetail`
+   * drives the read-only modal; only one is ever non-null at a time.
+   */
+  const [activeEditTarget, setActiveEditTarget] =
+    useState<FinalReviewChipEditTarget | null>(null);
+  const [activeReadOnlyDetail, setActiveReadOnlyDetail] =
+    useState<TemplateChipDetail | null>(null);
+
+  const handleSave = useCallback(
+    (patch: FinalReviewChipEditPatch) => {
+      markCreateFlowInteraction();
+      switch (patch.groupKey) {
+        case "coreValues": {
+          updateState({
+            coreValueDetailsByChipId: {
+              ...(state.coreValueDetailsByChipId ?? {}),
+              [patch.overrideKey]: patch.value,
+            },
+          });
+          return;
+        }
+        case "communication": {
+          updateState({
+            communicationMethodDetailsById: {
+              ...(state.communicationMethodDetailsById ?? {}),
+              [patch.overrideKey]: patch.value,
+            },
+          });
+          return;
+        }
+        case "membership": {
+          updateState({
+            membershipMethodDetailsById: {
+              ...(state.membershipMethodDetailsById ?? {}),
+              [patch.overrideKey]: patch.value,
+            },
+          });
+          return;
+        }
+        case "decisionApproaches": {
+          updateState({
+            decisionApproachDetailsById: {
+              ...(state.decisionApproachDetailsById ?? {}),
+              [patch.overrideKey]: patch.value,
+            },
+          });
+          return;
+        }
+        case "conflictManagement": {
+          updateState({
+            conflictManagementDetailsById: {
+              ...(state.conflictManagementDetailsById ?? {}),
+              [patch.overrideKey]: patch.value,
+            },
+          });
+          return;
+        }
+      }
+    },
+    [markCreateFlowInteraction, updateState, state],
+  );
+
+  const { categories: finalReviewCategories, chipLookup } = useMemo(() => {
+    const { names, rows: fallbackRows } = readFallbackCategoryRows(
       m.create.reviewAndComplete.finalReview.categories,
     );
-    const derived = buildFinalReviewCategoriesFromState(state, names);
-    // When a user lands on final review with nothing actually selected (e.g.
-    // direct-nav during dev), keep the shipped demo chips rather than render
-    // an empty card — matches prior behavior for that edge case.
-    return buildFinalReviewCategories(
-      derived.length > 0 ? derived : fallbackRows,
-    );
-  }, [m.create.reviewAndComplete.finalReview.categories, state]);
+    const derived = buildFinalReviewCategoryRowsDetailed(state, names);
+    const rowsToRender: readonly FinalReviewCategoryRowDetailed[] =
+      derived.length > 0 ? derived : fallbackRows;
+
+    const lookup = new Map<
+      string,
+      { target: FinalReviewChipEditTarget | null; readOnly: TemplateChipDetail }
+    >();
+
+    const cats: Category[] = rowsToRender.map((row) => {
+      const chipOptions = row.entries.map((entry, idx) => {
+        const chipId = `${row.name}-${idx}`;
+        const readOnly: TemplateChipDetail = {
+          chipId,
+          chipLabel: entry.label,
+          categoryName: row.name,
+          groupKey: entry.groupKey,
+          body: "",
+        };
+        const target: FinalReviewChipEditTarget | null =
+          entry.groupKey && entry.overrideKey
+            ? {
+                overrideKey: entry.overrideKey,
+                groupKey: entry.groupKey,
+                chipLabel: entry.label,
+              }
+            : null;
+        lookup.set(chipId, { target, readOnly });
+        return {
+          id: chipId,
+          label: entry.label,
+          state: "unselected" as const,
+        };
+      });
+      return {
+        name: row.name,
+        chipOptions,
+        onChipClick: (_categoryName: string, chipId: string) => {
+          const hit = lookup.get(chipId);
+          if (!hit) return;
+          markCreateFlowInteraction();
+          if (hit.target) {
+            setActiveEditTarget(hit.target);
+          } else {
+            setActiveReadOnlyDetail(hit.readOnly);
+          }
+        },
+      };
+    });
+    return { categories: cats, chipLookup: lookup };
+  }, [
+    m.create.reviewAndComplete.finalReview.categories,
+    state,
+    markCreateFlowInteraction,
+  ]);
+  void chipLookup;
 
   const ruleCardTitle = useMemo(() => {
     const raw = typeof state.title === "string" ? state.title.trim() : "";
@@ -109,6 +233,18 @@ export function FinalReviewScreen() {
         className={CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS}
         onClick={() => {}}
       />
+      <FinalReviewChipEditModal
+        isOpen={activeEditTarget !== null}
+        onClose={() => setActiveEditTarget(null)}
+        target={activeEditTarget}
+        state={state}
+        onSave={handleSave}
+      />
+      <TemplateChipDetailModal
+        isOpen={activeReadOnlyDetail !== null}
+        onClose={() => setActiveReadOnlyDetail(null)}
+        detail={activeReadOnlyDetail}
+      />
     </CreateFlowLockupCardStepShell>
   );
 }
diff --git a/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
index 3e5193a..dfdd285 100644
--- a/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
+++ b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
@@ -7,18 +7,19 @@
  * Layout matches {@link CreateFlowTwoColumnSelectShell}: one column below `lg` (1024px), two columns
  * at `lg+` with a scrollable rail — same breakpoint and height chain as select steps, distinct content.
  *
- * Card click opens the Figma "Add Approach" create modal (node `20870-72155`) with five controls:
- * Core Principle, Applicable Scope, Step-by-Step Instructions, Consensus Level, and Objections &
- * Deadlocks. Section defaults are sourced from `messages/en/create/customRule/decisionApproaches.json` (read
- * via `m.create.customRule.decisionApproaches`) and will be replaced with DB-driven content; labels are
- * hard-coded per the Figma design.
+ * Card click opens the Figma "Add Approach" create modal (node `20870-72155`) with five controls
+ * rendered by {@link DecisionApproachEditFields}: Core Principle, Applicable Scope, Step-by-Step
+ * Instructions, Consensus Level, and Objections & Deadlocks. The same field set is reused on
+ * `/create/final-review` — see `FinalReviewChipEditModal`. Confirm persists both the chip
+ * selection and any user edits as a `decisionApproachDetailsById[id]` override; section
+ * defaults come from `messages/en/create/customRule/decisionApproaches.json` and will be
+ * replaced with DB-driven content.
  */
 
 import { useState, useCallback, useMemo } from "react";
 import DecisionMakingSidebar from "../../../../components/utility/DecisionMakingSidebar";
 import CardStack from "../../../../components/utility/CardStack";
 import Create from "../../../../components/modals/Create";
-import IncrementerBlock from "../../../../components/controls/IncrementerBlock";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import type { InfoMessageBoxItem } from "../../../../components/utility/InfoMessageBox/InfoMessageBox.types";
 import type { CardStackItem } from "../../../../components/utility/CardStack/CardStack.types";
@@ -31,110 +32,9 @@ import {
   useFacetRecommendations,
 } from "../../hooks/useFacetRecommendations";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
-import ModalTextAreaField from "../../components/ModalTextAreaField";
-import ApplicableScopeField from "../../components/ApplicableScopeField";
-
-const CONSENSUS_LEVEL_MIN = 0;
-const CONSENSUS_LEVEL_MAX = 100;
-const CONSENSUS_LEVEL_STEP = 5;
-const CONSENSUS_LEVEL_DEFAULT = 75;
-
-type RightRailModalSections = {
-  corePrinciple: string;
-  applicableScope: string[];
-  selectedApplicableScope: string[];
-  stepByStepInstructions: string;
-  consensusLevel: number;
-  objectionsDeadlocks: string;
-};
-
-function AddDecisionApproachModalContent({
-  approachCardId,
-}: {
-  approachCardId: string;
-}) {
-  const { markCreateFlowInteraction } = useCreateFlow();
-  const m = useMessages();
-  const da = m.create.customRule.decisionApproaches;
-  const method = da.methods.find((entry) => entry.id === approachCardId);
-  const modalSections = method?.sections;
-  const defaults: RightRailModalSections = {
-    corePrinciple: modalSections?.corePrinciple ?? "",
-    applicableScope: modalSections?.applicableScope ?? [],
-    selectedApplicableScope: [],
-    stepByStepInstructions: modalSections?.stepByStepInstructions ?? "",
-    consensusLevel: modalSections?.consensusLevel ?? CONSENSUS_LEVEL_DEFAULT,
-    objectionsDeadlocks: modalSections?.objectionsDeadlocks ?? "",
-  };
-
-  const [sections, setSections] = useState<RightRailModalSections>(() => ({
-    corePrinciple: defaults.corePrinciple,
-    applicableScope: [...defaults.applicableScope],
-    selectedApplicableScope: [...defaults.selectedApplicableScope],
-    stepByStepInstructions: defaults.stepByStepInstructions,
-    consensusLevel: defaults.consensusLevel,
-    objectionsDeadlocks: defaults.objectionsDeadlocks,
-  }));
-
-  const patch = useCallback(
-    <K extends keyof RightRailModalSections>(
-      key: K,
-      value: RightRailModalSections[K],
-    ) => {
-      markCreateFlowInteraction();
-      setSections((prev) => ({ ...prev, [key]: value }));
-    },
-    [markCreateFlowInteraction],
-  );
-
-  return (
-    <div className="flex flex-col gap-6">
-      <ModalTextAreaField
-        label={da.sectionHeadings.corePrinciple}
-        value={sections.corePrinciple}
-        onChange={(v) => patch("corePrinciple", v)}
-      />
-      <ApplicableScopeField
-        label={da.sectionHeadings.applicableScope}
-        addLabel={da.scopeAddButtonLabel}
-        scopes={sections.applicableScope}
-        selectedScopes={sections.selectedApplicableScope}
-        onToggleScope={(scope) =>
-          patch(
-            "selectedApplicableScope",
-            sections.selectedApplicableScope.includes(scope)
-              ? sections.selectedApplicableScope.filter((s) => s !== scope)
-              : [...sections.selectedApplicableScope, scope],
-          )
-        }
-        onAddScope={(scope) =>
-          patch("applicableScope", [...sections.applicableScope, scope])
-        }
-      />
-      <ModalTextAreaField
-        label={da.sectionHeadings.stepByStepInstructions}
-        value={sections.stepByStepInstructions}
-        onChange={(v) => patch("stepByStepInstructions", v)}
-      />
-      <IncrementerBlock
-        label={da.sectionHeadings.consensusLevel}
-        value={sections.consensusLevel}
-        min={CONSENSUS_LEVEL_MIN}
-        max={CONSENSUS_LEVEL_MAX}
-        step={CONSENSUS_LEVEL_STEP}
-        onChange={(next) => patch("consensusLevel", next)}
-        formatValue={(v) => `${v}%`}
-        decrementAriaLabel="Decrease consensus level"
-        incrementAriaLabel="Increase consensus level"
-      />
-      <ModalTextAreaField
-        label={da.sectionHeadings.objectionsDeadlocks}
-        value={sections.objectionsDeadlocks}
-        onChange={(v) => patch("objectionsDeadlocks", v)}
-      />
-    </div>
-  );
-}
+import { DecisionApproachEditFields } from "../../components/methodEditFields";
+import { decisionApproachPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
+import type { DecisionApproachDetailEntry } from "../../types";
 
 export function DecisionApproachesScreen() {
   const m = useMessages();
@@ -147,16 +47,11 @@ export function DecisionApproachesScreen() {
   const [expanded, setExpanded] = useState(false);
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [pendingCardId, setPendingCardId] = useState<string | null>(null);
+  const [pendingDraft, setPendingDraft] =
+    useState<DecisionApproachDetailEntry | null>(null);
 
   const selectedIds = state.selectedDecisionApproachIds ?? [];
 
-  const setSelectedIds = useCallback(
-    (next: string[]) => {
-      updateState({ selectedDecisionApproachIds: next });
-    },
-    [updateState],
-  );
-
   const messageBoxItems: InfoMessageBoxItem[] = useMemo(
     () =>
       da.messageBox.items.map((item) => ({
@@ -219,12 +114,36 @@ export function DecisionApproachesScreen() {
     [markCreateFlowInteraction],
   );
 
+  const seedDraft = useCallback(
+    (id: string): DecisionApproachDetailEntry => {
+      const saved = state.decisionApproachDetailsById?.[id];
+      if (saved) {
+        return {
+          ...saved,
+          applicableScope: [...saved.applicableScope],
+          selectedApplicableScope: [...saved.selectedApplicableScope],
+        };
+      }
+      return decisionApproachPresetFor(id);
+    },
+    [state.decisionApproachDetailsById],
+  );
+
   const handleCardSelect = useCallback(
     (id: string) => {
       markCreateFlowInteraction();
       setPendingCardId(id);
+      setPendingDraft(seedDraft(id));
       setCreateModalOpen(true);
     },
+    [markCreateFlowInteraction, seedDraft],
+  );
+
+  const handleDraftChange = useCallback(
+    (next: DecisionApproachDetailEntry) => {
+      markCreateFlowInteraction();
+      setPendingDraft(next);
+    },
     [markCreateFlowInteraction],
   );
 
@@ -236,37 +155,49 @@ export function DecisionApproachesScreen() {
   const handleCreateModalClose = useCallback(() => {
     setCreateModalOpen(false);
     setPendingCardId(null);
+    setPendingDraft(null);
   }, []);
 
   const handleCreateModalConfirm = useCallback(() => {
-    markCreateFlowInteraction();
-    if (pendingCardId) {
-      setSelectedIds(
-        selectedIds.includes(pendingCardId)
-          ? selectedIds
-          : [...selectedIds, pendingCardId],
-      );
+    if (!pendingCardId || !pendingDraft) {
+      handleCreateModalClose();
+      return;
     }
-    setCreateModalOpen(false);
-    setPendingCardId(null);
-  }, [markCreateFlowInteraction, pendingCardId, selectedIds, setSelectedIds]);
+    markCreateFlowInteraction();
+    updateState({
+      selectedDecisionApproachIds: selectedIds.includes(pendingCardId)
+        ? selectedIds
+        : [...selectedIds, pendingCardId],
+      decisionApproachDetailsById: {
+        ...(state.decisionApproachDetailsById ?? {}),
+        [pendingCardId]: pendingDraft,
+      },
+    });
+    handleCreateModalClose();
+  }, [
+    handleCreateModalClose,
+    markCreateFlowInteraction,
+    pendingCardId,
+    pendingDraft,
+    selectedIds,
+    state.decisionApproachDetailsById,
+    updateState,
+  ]);
 
-  const modalConfig = (() => {
-    if (!pendingCardId) {
-      return {
+  const modalConfig = pendingCardId
+    ? (() => {
+        const method = methodById.get(pendingCardId);
+        return {
+          title: method?.label ?? da.confirmModal.title,
+          description: method?.supportText ?? da.confirmModal.description,
+          nextButtonText: da.addApproach.nextButtonText,
+        };
+      })()
+    : {
         title: da.confirmModal.title,
         description: da.confirmModal.description,
         nextButtonText: da.confirmModal.nextButtonText,
       };
-    }
-
-    const method = methodById.get(pendingCardId);
-    return {
-      title: method?.label ?? da.confirmModal.title,
-      description: method?.supportText ?? da.confirmModal.description,
-      nextButtonText: da.addApproach.nextButtonText,
-    };
-  })();
 
   return (
     <CreateFlowTwoColumnSelectShell
@@ -315,10 +246,11 @@ export function DecisionApproachesScreen() {
         showBackButton={false}
         backdropVariant="loginYellow"
       >
-        {pendingCardId ? (
-          <AddDecisionApproachModalContent
+        {pendingCardId && pendingDraft ? (
+          <DecisionApproachEditFields
             key={pendingCardId}
-            approachCardId={pendingCardId}
+            value={pendingDraft}
+            onChange={handleDraftChange}
           />
         ) : null}
       </Create>
diff --git a/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
index 64a30e3..7bd37fa 100644
--- a/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
@@ -3,14 +3,17 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import MultiSelect from "../../../../components/controls/MultiSelect";
 import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
-import TextArea from "../../../../components/controls/TextArea";
 import Create from "../../../../components/modals/Create";
 import ContentLockup from "../../../../components/type/ContentLockup";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
-import type { CommunityStructureChipSnapshotRow } from "../../types";
+import type {
+  CommunityStructureChipSnapshotRow,
+  CoreValueDetailEntry,
+} from "../../types";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
+import { CoreValueEditFields } from "../../components/methodEditFields";
 
 const MAX_CORE_VALUES = 5;
 
@@ -96,6 +99,8 @@ function snapshotRowsToChipOptions(
   }));
 }
 
+const EMPTY_DETAIL: CoreValueDetailEntry = { meaning: "", signals: "" };
+
 /** Create Custom — Core Values (Figma `20264:68378`). Up to five selections; preset list + custom chips. */
 export function CoreValuesSelectScreen() {
   const m = useMessages();
@@ -122,8 +127,7 @@ export function CoreValuesSelectScreen() {
     null,
   );
   const [modalSession, setModalSession] = useState<ModalSession | null>(null);
-  const [draftMeaning, setDraftMeaning] = useState("");
-  const [draftSignals, setDraftSignals] = useState("");
+  const [draft, setDraft] = useState<CoreValueDetailEntry>(EMPTY_DETAIL);
 
   useEffect(() => {
     const fromSnap = snapshotRowsToChipOptions(state.coreValuesChipsSnapshot);
@@ -158,16 +162,16 @@ export function CoreValuesSelectScreen() {
 
   /** Default meaning/signals from `coreValues.json` `values` for each preset label. */
   const getPresetTexts = useCallback(
-    (valueLabel: string): { meaning: string; signals: string } => {
+    (valueLabel: string): CoreValueDetailEntry => {
       const row = presets.find((p) => p.label === valueLabel);
-      if (!row) return { meaning: "", signals: "" };
+      if (!row) return EMPTY_DETAIL;
       return { meaning: row.meaning, signals: row.signals };
     },
     [presets],
   );
 
   const getInitialTexts = useCallback(
-    (chipId: string, valueLabel: string) => {
+    (chipId: string, valueLabel: string): CoreValueDetailEntry => {
       const saved = state.coreValueDetailsByChipId?.[chipId];
       const preset = getPresetTexts(valueLabel);
       return {
@@ -180,9 +184,7 @@ export function CoreValuesSelectScreen() {
 
   const openModal = useCallback(
     (chipId: string, session: ModalSession, valueLabel: string) => {
-      const initial = getInitialTexts(chipId, valueLabel);
-      setDraftMeaning(initial.meaning);
-      setDraftSignals(initial.signals);
+      setDraft(getInitialTexts(chipId, valueLabel));
       setActiveModalChipId(chipId);
       setModalSession(session);
       markCreateFlowInteraction();
@@ -190,6 +192,14 @@ export function CoreValuesSelectScreen() {
     [getInitialTexts, markCreateFlowInteraction],
   );
 
+  const handleDraftChange = useCallback(
+    (next: CoreValueDetailEntry) => {
+      markCreateFlowInteraction();
+      setDraft(next);
+    },
+    [markCreateFlowInteraction],
+  );
+
   const handleModalDismiss = useCallback(() => {
     if (activeModalChipId && modalSession === "pending") {
       const next = coreValueOptions.map((opt) =>
@@ -208,19 +218,17 @@ export function CoreValuesSelectScreen() {
     markCreateFlowInteraction();
     updateState({
       coreValueDetailsByChipId: {
-        [activeModalChipId]: {
-          meaning: draftMeaning,
-          signals: draftSignals,
-        },
+        ...(state.coreValueDetailsByChipId ?? {}),
+        [activeModalChipId]: draft,
       },
     });
     setActiveModalChipId(null);
     setModalSession(null);
   }, [
     activeModalChipId,
-    draftMeaning,
-    draftSignals,
+    draft,
     markCreateFlowInteraction,
+    state.coreValueDetailsByChipId,
     updateState,
   ]);
 
@@ -374,26 +382,7 @@ export function CoreValuesSelectScreen() {
           nextButtonText={detailModal.addValueButton}
           ariaLabel={modalChipLabel || "Core value details"}
         >
-          <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
-            <TextArea
-              label={detailModal.meaningLabel}
-              showHelpIcon
-              appearance="embedded"
-              size="medium"
-              value={draftMeaning}
-              onChange={(e) => setDraftMeaning(e.target.value)}
-              rows={4}
-            />
-            <TextArea
-              label={detailModal.signalsLabel}
-              showHelpIcon
-              appearance="embedded"
-              size="medium"
-              value={draftSignals}
-              onChange={(e) => setDraftSignals(e.target.value)}
-              rows={4}
-            />
-          </div>
+          <CoreValueEditFields value={draft} onChange={handleDraftChange} />
         </Create>
       )}
     </CreateFlowTwoColumnSelectShell>
diff --git a/app/(app)/create/types.ts b/app/(app)/create/types.ts
index 8b7b447..0f44c25 100644
--- a/app/(app)/create/types.ts
+++ b/app/(app)/create/types.ts
@@ -50,6 +50,41 @@ export type CoreValueDetailEntry = {
   signals: string;
 };
 
+/**
+ * Per-chip edited sections written by the `final-review` edit modal and
+ * merged back onto presets at publish time. Shapes mirror the custom-rule
+ * add-method modals (see `app/(app)/create/screens/card/*`) so the same
+ * field widgets can render both surfaces.
+ */
+export type CommunicationMethodDetailEntry = {
+  corePrinciple: string;
+  logisticsAdmin: string;
+  codeOfConduct: string;
+};
+
+export type MembershipMethodDetailEntry = {
+  eligibility: string;
+  joiningProcess: string;
+  expectations: string;
+};
+
+export type DecisionApproachDetailEntry = {
+  corePrinciple: string;
+  applicableScope: string[];
+  selectedApplicableScope: string[];
+  stepByStepInstructions: string;
+  consensusLevel: number;
+  objectionsDeadlocks: string;
+};
+
+export type ConflictManagementDetailEntry = {
+  corePrinciple: string;
+  applicableScope: string[];
+  selectedApplicableScope: string[];
+  processProtocol: string;
+  restorationFallbacks: string;
+};
+
 /**
  * Flow state for inputs across create-flow steps.
  * Validated on `PUT /api/drafts/me` via `createFlowStateSchema` (Zod + JSON safety checks).
@@ -93,6 +128,22 @@ export interface CreateFlowState {
   selectedDecisionApproachIds?: string[];
   /** Create Custom — conflict management (`/create/conflict-management`); card ids from `create.customRule.conflictManagement` presets. */
   selectedConflictManagementIds?: string[];
+  /**
+   * User edits from the `final-review` edit modal, keyed by preset method id
+   * (e.g. `"signal"`). Merged onto preset defaults at publish time so the
+   * stored rule reflects the author's customizations. Edits persist to the
+   * anonymous localStorage draft and signed-in server draft automatically.
+   */
+  communicationMethodDetailsById?: Record<
+    string,
+    CommunicationMethodDetailEntry
+  >;
+  membershipMethodDetailsById?: Record<string, MembershipMethodDetailEntry>;
+  decisionApproachDetailsById?: Record<string, DecisionApproachDetailEntry>;
+  conflictManagementDetailsById?: Record<
+    string,
+    ConflictManagementDetailEntry
+  >;
   /**
    * Set when a user picks a template (Customize or Use without changes) before
    * completing the community stage. The community-review screen consumes this
diff --git a/docs/guides/backend-linear-tickets.md b/docs/guides/backend-linear-tickets.md
index fd99db2..a65b552 100644
--- a/docs/guides/backend-linear-tickets.md
+++ b/docs/guides/backend-linear-tickets.md
@@ -336,6 +336,55 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 ---
 
+## Ticket 18 — Invite stakeholders (email) from `confirm-stakeholders` step
+
+**Depends on:** **Ticket 3 / CR-74** + **Ticket 4 / CR-75** (magic-link + session) for per-stakeholder identity, **Ticket 6 / CR-77** (publish) so a `PublishedRule` exists to invite people to, **Ticket 2 / CR-73** (`CreateFlowState` validation) to land the persisted stakeholder shape.
+
+**Server / admin:** **Same as CR-74** — dev works against Mailhog / dev-log; **staging/prod** reuses the **SMTP** + **SPF/DKIM** already set up for magic-link email.
+
+**Goal:** Turn the [`confirm-stakeholders`](../../app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx) step from a local chip list into a real **stakeholder invite** feature. Today the screen only collects in-memory `ChipOption[]` labels with no email, no persistence, no notification. Product copy in [`messages/en/create/reviewAndComplete/confirmStakeholders.json`](../../messages/en/create/reviewAndComplete/confirmStakeholders.json) already promises that "Adding people at this step will **invite them** to see your proposed CommunityRule and make their own proposals" — we need the feature behind that promise.
+
+**Context:** **No Figma hand-off or product direction yet** for the invite mechanic. **Email is the working assumption** (magic-link parity) but could become email + copy-link, in-app invite, SMS, etc. `CreateFlowState` has no structured `stakeholders` field and there is no `RuleStakeholder` / `RuleInvite` Prisma model. Leaving the step as-is ships a copy promise we do not keep; this ticket is the container for closing that gap once the design + product brief lands.
+
+**Open product questions (block implementation until resolved):**
+
+1. Invite channel: email only, email + shareable link, or in-app (account required)?
+2. Does accepting an invite require a CommunityRule account (magic-link), or can stakeholders read / propose anonymously?
+3. Per-stakeholder permissions: view-only vs. propose-changes vs. co-owner? Default?
+4. Timing: invites sent on **publish** (after `POST /api/rules`) or at **confirm-stakeholders** save? How are post-publish additions handled?
+5. Revocation / re-send UX and rate limits (reuse magic-link per-IP limiter or a new per-rule limiter?).
+6. Notification copy + sender identity (reuse `SMTP_FROM` or dedicated sender).
+
+**Implementation sketch (subject to product sign-off):**
+
+1. **Product + design pass** to answer the questions above and produce Figma for the stakeholder row (email field, validation, resend/remove affordances, empty state).
+2. **Schema:** Add a structured `stakeholders: StakeholderInvite[]` to `CreateFlowState` (Ticket 2 pattern) and/or a Prisma `RuleStakeholder` (`id`, `ruleId`, `email`, `role`, `invitedAt`, `acceptedAt`, `revokedAt`, `tokenHash?`). Decide draft vs. published semantics.
+3. **API:** Likely `POST /api/rules/:id/stakeholders` (invite), `DELETE /api/rules/:id/stakeholders/:id` (revoke), `POST /api/rules/:id/stakeholders/:id/resend`. Validate with Zod; align error shape with **Ticket 13 / CR-84**.
+4. **Mail:** Reuse [`lib/server/mail.ts`](../../lib/server/mail.ts) + Mailhog/dev-log pattern from **CR-74**; per-stakeholder hashed token akin to `MagicLinkToken` if acceptance requires identity.
+5. **UI:** Replace free-text chips with `email` + optional `label` input, client-side email validation, inline errors (invalid email, 429 `retryAfterMs`, duplicate). Use `markCreateFlowInteraction()` per the create-flow guardrails in [`.cursor/rules/create-flow.mdc`](../../.cursor/rules/create-flow.mdc).
+6. **i18n:** Expand [`confirmStakeholders.json`](../../messages/en/create/reviewAndComplete/confirmStakeholders.json) with invite copy (send button, error strings, resend, revoke confirm).
+7. **Tests:** Schema + route unit tests; Vitest component tests for the form; optional E2E once publish is stable.
+
+**Out of scope:**
+
+- Real-time collaboration / editing by stakeholders.
+- Threaded proposals / comments UI (future product work).
+- Notifications beyond the initial invite (digest emails, reminders).
+
+**Acceptance criteria:**
+
+- [ ] Product + design brief answering the open questions, linked from the Linear issue.
+- [ ] `CreateFlowState.stakeholders` (or equivalent) is typed, validated server-side, and persists across draft save / resume.
+- [ ] An invited stakeholder receives the chosen notification (email in the default proposal) in local dev via Mailhog / dev-log, same pattern as magic-link.
+- [ ] Invalid / duplicate / rate-limited invites show clear, accessible errors; no silent failures.
+- [ ] Copy in [`confirmStakeholders.json`](../../messages/en/create/reviewAndComplete/confirmStakeholders.json) matches the shipped capability (no "will invite" promise without implementation).
+
+**Files (expected):** [`app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx`](../../app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx), [`messages/en/create/reviewAndComplete/confirmStakeholders.json`](../../messages/en/create/reviewAndComplete/confirmStakeholders.json), [`app/(app)/create/types.ts`](../../app/(app)/create/types.ts), [`prisma/schema.prisma`](../../prisma/schema.prisma), new `app/api/rules/[id]/stakeholders/*`, [`lib/server/mail.ts`](../../lib/server/mail.ts), [`lib/server/validation/`](../../lib/server/validation/), tests under `tests/`.
+
+**Linear:** [CR-90](https://linear.app/community-rule/issue/CR-90/productbackend-invite-stakeholders-email-from-confirm-stakeholders) (**Backlog**). **Parallel** to the CR-72 → CR-83 chain; unblocked to start the product/design brief now — implementation waits on **CR-74 / CR-75 / CR-77 / CR-73**.
+
+---
+
 ## Ticket 9 — Persist web vitals outside `.next` (prefer external RUM)
 
 **Depends on:** none (orthogonal).
@@ -541,14 +590,15 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 |    15 | 15     | Profile + account (Figma profile) |
 |    16 | 16     | Template matrix + xlsx ingestion  |
 |    17 | 17     | Canon create-flow (custom path)     |
+|    18 | 18     | Stakeholder invites (confirm-stakeholders) |
 
-Tickets **10–11** can be deferred without blocking the core “auth + drafts + publish + templates” vertical slice. **Ticket 16** is also **deferrable** until after **7–8** (flat template list + UI); it adds **spreadsheet-driven** recommendations and facet APIs. **Ticket 17** (**[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)**) canonizes the **custom** wizard in [`docs/create-flow.md`](create-flow.md) and tracks UX/code alignment (progress bar, resume URL, `[step]` cleanup); **parallel** to publish and templates. **Tickets 13–14** are parallel to that chain (**CR-73** / **CR-75** prerequisites are **Done** — **CR-84** / **CR-85** are unblocked), not sequential after CR-83. **Ticket 15** is also **parallel** (blocked by **publish (CR-77)** once session/auth are shipped); Linear: **CR-86**.
+Tickets **10–11** can be deferred without blocking the core “auth + drafts + publish + templates” vertical slice. **Ticket 16** is also **deferrable** until after **7–8** (flat template list + UI); it adds **spreadsheet-driven** recommendations and facet APIs. **Ticket 17** (**[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)**) canonizes the **custom** wizard in [`docs/create-flow.md`](create-flow.md) and tracks UX/code alignment (progress bar, resume URL, `[step]` cleanup); **parallel** to publish and templates. **Tickets 13–14** are parallel to that chain (**CR-73** / **CR-75** prerequisites are **Done** — **CR-84** / **CR-85** are unblocked), not sequential after CR-83. **Ticket 15** is also **parallel** (blocked by **publish (CR-77)** once session/auth are shipped); Linear: **CR-86**. **Ticket 18** (**[CR-90](https://linear.app/community-rule/issue/CR-90/productbackend-invite-stakeholders-email-from-confirm-stakeholders)**) adds real **email-based stakeholder invites** to the `confirm-stakeholders` step — currently ships as a label-only chip list despite copy promising invites; **parallel** to the main chain, awaits design + product brief before implementation.
 
 ---
 
 ## Linear (Community-rule team)
 
-**Main chain:** **CR-72 → CR-83** (each blocks the next). **Parallel:** **CR-84** (**CR-73** Done — ready to pick up), **CR-85** (**CR-75** Done — ready to pick up), **CR-86** / Ticket 15 (blocked by **CR-77** publish only; **CR-75** Done), **CR-88** / Ticket 16 (template matrix + `.xlsx` ingestion — after **CR-78**/**CR-79**), **CR-89** / Ticket 17 (canon create-flow + implementation gaps), not in the CR-72–83 sequence.
+**Main chain:** **CR-72 → CR-83** (each blocks the next). **Parallel:** **CR-84** (**CR-73** Done — ready to pick up), **CR-85** (**CR-75** Done — ready to pick up), **CR-86** / Ticket 15 (blocked by **CR-77** publish only; **CR-75** Done), **CR-88** / Ticket 16 (template matrix + `.xlsx` ingestion — after **CR-78**/**CR-79**), **CR-89** / Ticket 17 (canon create-flow + implementation gaps), **CR-90** / Ticket 18 (stakeholder invites — product/design brief unblocked; implementation waits on **CR-73** / **CR-74** / **CR-75** / **CR-77**), none in the CR-72–83 sequence.
 
 | Doc ticket | Linear                                                                                                                      | Title (short)                           |
 | ---------: | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
@@ -569,6 +619,7 @@ Tickets **10–11** can be deferred without blocking the core “auth + drafts +
 |         15 | [CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile)                      | Profile + account (Figma 22143:900069)  |
 |         16 | [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-xlsx-sheets-ingestion)         | Template matrix + xlsx ingestion        |
 |         17 | [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)   | Canon create-flow (custom wizard + docs) |
+|         18 | [CR-90](https://linear.app/community-rule/issue/CR-90/productbackend-invite-stakeholders-email-from-confirm-stakeholders)    | Stakeholder invites (confirm-stakeholders) |
 
 ---
 
diff --git a/lib/create/applyTemplatePrefill.ts b/lib/create/applyTemplatePrefill.ts
index a59d7fc..a8cf7ef 100644
--- a/lib/create/applyTemplatePrefill.ts
+++ b/lib/create/applyTemplatePrefill.ts
@@ -76,6 +76,36 @@ function buildCoreValuePrefill(
   };
 }
 
+/**
+ * Variant of {@link buildTemplateCustomizePrefill} that pulls *only* the
+ * Values section out of a template body. Used by the "Use without changes"
+ * handler so the verbatim template flow still seeds
+ * `coreValuesChipsSnapshot` + `selectedCoreValueIds` — without that, the
+ * final-review screen has no per-chip ids to attach edits to and falls
+ * back to the read-only chip modal for values.
+ *
+ * Returns an empty object when the body is malformed or has no Values
+ * section.
+ */
+export function buildCoreValuesPrefillFromTemplateBody(
+  body: unknown,
+): Partial<CreateFlowState> {
+  if (!body || typeof body !== "object") return {};
+  const sections = (body as { sections?: unknown }).sections;
+  if (!Array.isArray(sections)) return {};
+
+  for (const raw of sections) {
+    if (!isTemplateSection(raw)) continue;
+    const key = normaliseCategoryKey(raw.categoryName as string);
+    if (key !== "values" && key !== "corevalues") continue;
+    const titles = entryTitles(raw.entries);
+    if (titles.length === 0) continue;
+    return buildCoreValuePrefill(titles);
+  }
+
+  return {};
+}
+
 /**
  * Map a curated template `body` (DB shape — `sections[]` with `categoryName`
  * + `entries[].title`) to the `CreateFlowState` keys the Create Custom Rule
diff --git a/lib/create/buildFinalReviewCategories.ts b/lib/create/buildFinalReviewCategories.ts
index b09735e..1a4cea6 100644
--- a/lib/create/buildFinalReviewCategories.ts
+++ b/lib/create/buildFinalReviewCategories.ts
@@ -7,6 +7,10 @@ import {
   buildCoreValuesForDocument,
   parseSectionsFromCreateFlowState,
 } from "./buildPublishPayload";
+import {
+  templateCategoryToGroupKey,
+  type TemplateFacetGroupKey,
+} from "./templateReviewMapping";
 
 /**
  * Chip row shape shared with `messages/en/create/reviewAndComplete/finalReview.json`
@@ -15,6 +19,31 @@ import {
  */
 export type FinalReviewCategoryRow = { name: string; chips: string[] };
 
+/**
+ * Per-chip details needed to open an *editable* chip modal on the final-review
+ * screen. `overrideKey` is the stable id we use to look up / write user edits
+ * in `CreateFlowState`:
+ *
+ * - `coreValues` → the chip id from `coreValuesChipsSnapshot`
+ *   (round-trips via `coreValueDetailsByChipId`).
+ * - Method groups → the preset method id from
+ *   `messages/en/create/customRule/{group}.json` `methods[].id`
+ *   (round-trips via `{group}MethodDetailsById`).
+ * - Unknown / template-only chips → `null` (modal falls back to read-only).
+ */
+export type FinalReviewChipEntry = {
+  label: string;
+  groupKey: TemplateFacetGroupKey | null;
+  overrideKey: string | null;
+};
+
+/** Detailed row paired with per-chip override + group metadata. */
+export type FinalReviewCategoryRowDetailed = {
+  name: string;
+  groupKey: TemplateFacetGroupKey | null;
+  entries: FinalReviewChipEntry[];
+};
+
 /** Category labels supplied by the caller (pulled from localized messages). */
 export type FinalReviewCategoryNames = {
   values: string;
@@ -41,24 +70,166 @@ function readMethodsArray(source: unknown): MethodPreset[] {
   return out;
 }
 
-function labelsFromIds(
+/**
+ * Resolve an ordered list of preset ids to `{label, id}` entries, filtering
+ * missing/duplicate labels. The id is returned alongside so callers can key
+ * per-chip overrides by the stable preset id (e.g. `"signal"`) even after
+ * labels change through localization.
+ */
+function entriesFromIds(
   ids: readonly string[] | undefined,
   methods: readonly MethodPreset[],
-): string[] {
+  groupKey: TemplateFacetGroupKey,
+): FinalReviewChipEntry[] {
   if (!ids || ids.length === 0) return [];
   const byId = new Map(methods.map((m) => [m.id, m.label] as const));
   const seen = new Set<string>();
-  const out: string[] = [];
+  const out: FinalReviewChipEntry[] = [];
   for (const id of ids) {
     const label = byId.get(id);
     if (typeof label !== "string" || label.length === 0) continue;
     if (seen.has(label)) continue;
     seen.add(label);
-    out.push(label);
+    out.push({ label, groupKey, overrideKey: id });
   }
   return out;
 }
 
+/**
+ * Reverse-lookup a preset id by label for the template-sections path, where
+ * chips carry entry titles rather than ids. Used to recover an overrideKey
+ * for chips the user sees on a "Use without changes" template review.
+ */
+function overrideKeyForLabel(
+  label: string,
+  methods: readonly MethodPreset[],
+): string | null {
+  const normalized = label.trim().toLowerCase();
+  if (normalized.length === 0) return null;
+  for (const m of methods) {
+    if (m.label.trim().toLowerCase() === normalized) return m.id;
+  }
+  return null;
+}
+
+function methodsForGroup(
+  groupKey: TemplateFacetGroupKey | null,
+): readonly MethodPreset[] {
+  switch (groupKey) {
+    case "communication":
+      return readMethodsArray(communicationMessages);
+    case "membership":
+      return readMethodsArray(membershipMessages);
+    case "decisionApproaches":
+      return readMethodsArray(decisionApproachesMessages);
+    case "conflictManagement":
+      return readMethodsArray(conflictManagementMessages);
+    default:
+      return [];
+  }
+}
+
+/**
+ * Detailed builder: same logic as {@link buildFinalReviewCategoriesFromState}
+ * but each chip is returned with its `overrideKey` + `groupKey` so the
+ * final-review screen can wire chip clicks to an editable modal that
+ * round-trips writes back into `CreateFlowState`.
+ */
+export function buildFinalReviewCategoryRowsDetailed(
+  state: CreateFlowState,
+  names: FinalReviewCategoryNames,
+): FinalReviewCategoryRowDetailed[] {
+  const sections = parseSectionsFromCreateFlowState(state);
+  const coreValues = buildCoreValuesForDocument(state);
+
+  const coreValueEntries: FinalReviewChipEntry[] = coreValues.map((r) => ({
+    label: r.label,
+    groupKey: "coreValues" as const,
+    overrideKey: r.chipId,
+  }));
+
+  // Use-without-changes / pre-rendered template body.
+  if (sections.length > 0) {
+    const rows: FinalReviewCategoryRowDetailed[] = [];
+
+    // Always prefer the chip-snapshot derived entries when present so the
+    // values row uses stable per-chip ids the edit modal can attach to.
+    // We then skip any Values section in the template body to avoid
+    // duplicating the row (the snapshot already represents the same data).
+    if (coreValueEntries.length > 0) {
+      rows.push({
+        name: names.values,
+        groupKey: "coreValues",
+        entries: coreValueEntries,
+      });
+    }
+
+    for (const s of sections) {
+      const groupKey = templateCategoryToGroupKey(s.categoryName);
+      if (groupKey === "coreValues" && coreValueEntries.length > 0) continue;
+      const methods = methodsForGroup(groupKey);
+      const entries: FinalReviewChipEntry[] = [];
+      for (const e of s.entries) {
+        const title = e.title.trim();
+        if (title.length === 0) continue;
+        // For the Values section inside template bodies we can't recover a
+        // stable chip id (no snapshot), so override is unavailable — the
+        // modal will render read-only. Method sections fall back to label
+        // → preset-id resolution so matching titles stay editable.
+        let overrideKey: string | null = null;
+        if (groupKey && groupKey !== "coreValues") {
+          overrideKey = overrideKeyForLabel(title, methods);
+        }
+        entries.push({ label: title, groupKey, overrideKey });
+      }
+      if (entries.length === 0) continue;
+      rows.push({ name: s.categoryName, groupKey, entries });
+    }
+    return rows;
+  }
+
+  const rows: FinalReviewCategoryRowDetailed[] = [
+    { name: names.values, groupKey: "coreValues", entries: coreValueEntries },
+    {
+      name: names.communication,
+      groupKey: "communication",
+      entries: entriesFromIds(
+        state.selectedCommunicationMethodIds,
+        methodsForGroup("communication"),
+        "communication",
+      ),
+    },
+    {
+      name: names.membership,
+      groupKey: "membership",
+      entries: entriesFromIds(
+        state.selectedMembershipMethodIds,
+        methodsForGroup("membership"),
+        "membership",
+      ),
+    },
+    {
+      name: names.decisions,
+      groupKey: "decisionApproaches",
+      entries: entriesFromIds(
+        state.selectedDecisionApproachIds,
+        methodsForGroup("decisionApproaches"),
+        "decisionApproaches",
+      ),
+    },
+    {
+      name: names.conflict,
+      groupKey: "conflictManagement",
+      entries: entriesFromIds(
+        state.selectedConflictManagementIds,
+        methodsForGroup("conflictManagement"),
+        "conflictManagement",
+      ),
+    },
+  ];
+  return rows.filter((r) => r.entries.length > 0);
+}
+
 /**
  * Derive the final-review RuleCard category rows from the current
  * {@link CreateFlowState}.
@@ -81,72 +252,8 @@ export function buildFinalReviewCategoriesFromState(
   state: CreateFlowState,
   names: FinalReviewCategoryNames,
 ): FinalReviewCategoryRow[] {
-  const sections = parseSectionsFromCreateFlowState(state);
-  const coreValueLabels = buildCoreValuesForDocument(state).map((r) => r.label);
-
-  // Use-without-changes / pre-rendered template body: the sections array is
-  // the source of truth. Collapse each section's entries to its titles; the
-  // RuleCard category UI shows only labels, not per-entry body copy.
-  if (sections.length > 0) {
-    const rows: FinalReviewCategoryRow[] = [];
-
-    // If core values were also captured (e.g., the template surfaced both),
-    // keep them up top for visual parity with the custom-rule flow. Otherwise
-    // any `Values` section already inside `sections` covers the same ground.
-    if (coreValueLabels.length > 0) {
-      const hasValuesSection = sections.some(
-        (s) => s.categoryName.toLowerCase() === names.values.toLowerCase(),
-      );
-      if (!hasValuesSection) {
-        rows.push({ name: names.values, chips: coreValueLabels });
-      }
-    }
-
-    for (const s of sections) {
-      const chips = s.entries
-        .map((e) => e.title.trim())
-        .filter((t) => t.length > 0);
-      if (chips.length === 0) continue;
-      rows.push({ name: s.categoryName, chips });
-    }
-    return rows;
-  }
-
-  const communicationMethods = readMethodsArray(communicationMessages);
-  const membershipMethods = readMethodsArray(membershipMessages);
-  const decisionApproachMethods = readMethodsArray(decisionApproachesMessages);
-  const conflictManagementMethods = readMethodsArray(conflictManagementMessages);
-
-  const rows: FinalReviewCategoryRow[] = [
-    { name: names.values, chips: coreValueLabels },
-    {
-      name: names.communication,
-      chips: labelsFromIds(
-        state.selectedCommunicationMethodIds,
-        communicationMethods,
-      ),
-    },
-    {
-      name: names.membership,
-      chips: labelsFromIds(
-        state.selectedMembershipMethodIds,
-        membershipMethods,
-      ),
-    },
-    {
-      name: names.decisions,
-      chips: labelsFromIds(
-        state.selectedDecisionApproachIds,
-        decisionApproachMethods,
-      ),
-    },
-    {
-      name: names.conflict,
-      chips: labelsFromIds(
-        state.selectedConflictManagementIds,
-        conflictManagementMethods,
-      ),
-    },
-  ];
-  return rows.filter((r) => r.chips.length > 0);
+  return buildFinalReviewCategoryRowsDetailed(state, names).map((r) => ({
+    name: r.name,
+    chips: r.entries.map((e) => e.label),
+  }));
 }
diff --git a/lib/create/buildPublishPayload.ts b/lib/create/buildPublishPayload.ts
index 0aca7e5..2ef42f3 100644
--- a/lib/create/buildPublishPayload.ts
+++ b/lib/create/buildPublishPayload.ts
@@ -1,5 +1,19 @@
-import type { CoreValueDetailEntry, CreateFlowState } from "../../app/(app)/create/types";
+import type {
+  CommunicationMethodDetailEntry,
+  ConflictManagementDetailEntry,
+  CoreValueDetailEntry,
+  CreateFlowState,
+  DecisionApproachDetailEntry,
+  MembershipMethodDetailEntry,
+} from "../../app/(app)/create/types";
 import type { CommunityRuleDocumentSection } from "../../app/components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
+import {
+  communicationPresetFor,
+  conflictManagementPresetFor,
+  decisionApproachPresetFor,
+  membershipPresetFor,
+  methodLabelFor,
+} from "./finalReviewChipPresets";
 
 function isDocumentEntry(x: unknown): x is { title: string; body: string } {
   if (!x || typeof x !== "object") return false;
@@ -52,6 +66,36 @@ export function buildCoreValuesForDocument(state: CreateFlowState): Array<{
     });
 }
 
+/**
+ * Structured per-group method selections emitted into `document.methodSelections`
+ * at publish time. Each entry carries the preset id (stable key), display
+ * label, and the fully-resolved section payload (override on top of preset).
+ * Empty groups are omitted so downstream readers can iterate just the set
+ * the author actually picked.
+ */
+export type PublishedMethodSelections = {
+  communication?: Array<{
+    id: string;
+    label: string;
+    sections: CommunicationMethodDetailEntry;
+  }>;
+  membership?: Array<{
+    id: string;
+    label: string;
+    sections: MembershipMethodDetailEntry;
+  }>;
+  decisionApproaches?: Array<{
+    id: string;
+    label: string;
+    sections: DecisionApproachDetailEntry;
+  }>;
+  conflictManagement?: Array<{
+    id: string;
+    label: string;
+    sections: ConflictManagementDetailEntry;
+  }>;
+};
+
 export type BuildPublishPayloadResult =
   | {
       ok: true;
@@ -97,16 +141,93 @@ export function buildPublishPayload(
   }
 
   const coreValues = buildCoreValuesForDocument(state);
+  const methodSelections = buildMethodSelectionsForDocument(state);
+
+  const document: Record<string, unknown> = { sections, coreValues };
+  if (hasAnyMethodSelection(methodSelections)) {
+    document.methodSelections = methodSelections;
+  }
 
   if (summary !== undefined) {
-    return {
-      ok: true,
-      title,
-      summary,
-      document: { sections, coreValues },
-    };
+    return { ok: true, title, summary, document };
   }
-  return { ok: true, title, document: { sections, coreValues } };
+  return { ok: true, title, document };
+}
+
+function hasAnyMethodSelection(m: PublishedMethodSelections): boolean {
+  return Boolean(
+    m.communication?.length ||
+      m.membership?.length ||
+      m.decisionApproaches?.length ||
+      m.conflictManagement?.length,
+  );
+}
+
+/**
+ * Merge `selected*MethodIds` with any saved `{group}MethodDetailsById`
+ * overrides authored on the final-review screen. Preset defaults from the
+ * shipped `messages/en/create/customRule/*.json` seed any sub-fields the
+ * user didn't edit so consumers of `document.methodSelections` always see
+ * a complete payload per method.
+ */
+export function buildMethodSelectionsForDocument(
+  state: CreateFlowState,
+): PublishedMethodSelections {
+  const out: PublishedMethodSelections = {};
+
+  const commIds = state.selectedCommunicationMethodIds ?? [];
+  if (commIds.length > 0) {
+    out.communication = commIds.map((id) => {
+      const preset = communicationPresetFor(id);
+      const override = state.communicationMethodDetailsById?.[id];
+      return {
+        id,
+        label: methodLabelFor("communication", id),
+        sections: override ? { ...preset, ...override } : preset,
+      };
+    });
+  }
+
+  const memIds = state.selectedMembershipMethodIds ?? [];
+  if (memIds.length > 0) {
+    out.membership = memIds.map((id) => {
+      const preset = membershipPresetFor(id);
+      const override = state.membershipMethodDetailsById?.[id];
+      return {
+        id,
+        label: methodLabelFor("membership", id),
+        sections: override ? { ...preset, ...override } : preset,
+      };
+    });
+  }
+
+  const daIds = state.selectedDecisionApproachIds ?? [];
+  if (daIds.length > 0) {
+    out.decisionApproaches = daIds.map((id) => {
+      const preset = decisionApproachPresetFor(id);
+      const override = state.decisionApproachDetailsById?.[id];
+      return {
+        id,
+        label: methodLabelFor("decisionApproaches", id),
+        sections: override ? { ...preset, ...override } : preset,
+      };
+    });
+  }
+
+  const cmIds = state.selectedConflictManagementIds ?? [];
+  if (cmIds.length > 0) {
+    out.conflictManagement = cmIds.map((id) => {
+      const preset = conflictManagementPresetFor(id);
+      const override = state.conflictManagementDetailsById?.[id];
+      return {
+        id,
+        label: methodLabelFor("conflictManagement", id),
+        sections: override ? { ...preset, ...override } : preset,
+      };
+    });
+  }
+
+  return out;
 }
 
 /** Read `document.sections` from a stored published payload for display. */
diff --git a/lib/create/finalReviewChipPresets.ts b/lib/create/finalReviewChipPresets.ts
new file mode 100644
index 0000000..6642d45
--- /dev/null
+++ b/lib/create/finalReviewChipPresets.ts
@@ -0,0 +1,190 @@
+import communicationMessages from "../../messages/en/create/customRule/communication.json";
+import conflictManagementMessages from "../../messages/en/create/customRule/conflictManagement.json";
+import coreValuesMessages from "../../messages/en/create/customRule/coreValues.json";
+import decisionApproachesMessages from "../../messages/en/create/customRule/decisionApproaches.json";
+import membershipMessages from "../../messages/en/create/customRule/membership.json";
+import type { TemplateFacetGroupKey } from "./templateReviewMapping";
+import type {
+  CommunicationMethodDetailEntry,
+  ConflictManagementDetailEntry,
+  CoreValueDetailEntry,
+  DecisionApproachDetailEntry,
+  MembershipMethodDetailEntry,
+} from "../../app/(app)/create/types";
+
+/**
+ * Per-method preset defaults shipped in `messages/en/create/customRule/*.json`.
+ * Used to seed the final-review edit modal when the user has no saved
+ * override yet, and to merge onto overrides when emitting the published rule
+ * document so every method carries a complete section payload even if the
+ * author only edited a subset of fields.
+ */
+type CustomRuleMethodRow = {
+  id: string;
+  label: string;
+  supportText?: string;
+  sections?: Record<string, unknown>;
+};
+
+function readMethodsArray(source: unknown): CustomRuleMethodRow[] {
+  if (!source || typeof source !== "object") return [];
+  const methods = (source as { methods?: unknown }).methods;
+  if (!Array.isArray(methods)) return [];
+  const out: CustomRuleMethodRow[] = [];
+  for (const raw of methods) {
+    if (!raw || typeof raw !== "object") continue;
+    const o = raw as Record<string, unknown>;
+    if (typeof o.id !== "string" || typeof o.label !== "string") continue;
+    out.push({
+      id: o.id,
+      label: o.label,
+      supportText:
+        typeof o.supportText === "string" ? o.supportText : undefined,
+      sections:
+        o.sections && typeof o.sections === "object"
+          ? (o.sections as Record<string, unknown>)
+          : undefined,
+    });
+  }
+  return out;
+}
+
+function asString(value: unknown): string {
+  return typeof value === "string" ? value : "";
+}
+
+function asStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  const out: string[] = [];
+  for (const v of value) {
+    if (typeof v === "string") out.push(v);
+  }
+  return out;
+}
+
+function asNumberClamped(
+  value: unknown,
+  min: number,
+  max: number,
+  fallback: number,
+): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+  if (value < min) return min;
+  if (value > max) return max;
+  return Math.round(value);
+}
+
+function findMethod(
+  source: unknown,
+  id: string,
+): CustomRuleMethodRow | null {
+  const rows = readMethodsArray(source);
+  return rows.find((r) => r.id === id) ?? null;
+}
+
+/** Preset-default communication sections for a given method id. */
+export function communicationPresetFor(
+  id: string,
+): CommunicationMethodDetailEntry {
+  const method = findMethod(communicationMessages, id);
+  const s = method?.sections ?? {};
+  return {
+    corePrinciple: asString(s.corePrinciple),
+    logisticsAdmin: asString(s.logisticsAdmin),
+    codeOfConduct: asString(s.codeOfConduct),
+  };
+}
+
+export function membershipPresetFor(id: string): MembershipMethodDetailEntry {
+  const method = findMethod(membershipMessages, id);
+  const s = method?.sections ?? {};
+  return {
+    eligibility: asString(s.eligibility),
+    joiningProcess: asString(s.joiningProcess),
+    expectations: asString(s.expectations),
+  };
+}
+
+/** Default consensus level used when presets omit a value (see DecisionApproachesScreen). */
+export const DECISION_CONSENSUS_LEVEL_DEFAULT = 75;
+
+export function decisionApproachPresetFor(
+  id: string,
+): DecisionApproachDetailEntry {
+  const method = findMethod(decisionApproachesMessages, id);
+  const s = method?.sections ?? {};
+  return {
+    corePrinciple: asString(s.corePrinciple),
+    applicableScope: asStringArray(s.applicableScope),
+    selectedApplicableScope: [],
+    stepByStepInstructions: asString(s.stepByStepInstructions),
+    consensusLevel: asNumberClamped(
+      s.consensusLevel,
+      0,
+      100,
+      DECISION_CONSENSUS_LEVEL_DEFAULT,
+    ),
+    objectionsDeadlocks: asString(s.objectionsDeadlocks),
+  };
+}
+
+export function conflictManagementPresetFor(
+  id: string,
+): ConflictManagementDetailEntry {
+  const method = findMethod(conflictManagementMessages, id);
+  const s = method?.sections ?? {};
+  return {
+    corePrinciple: asString(s.corePrinciple),
+    applicableScope: asStringArray(s.applicableScope),
+    selectedApplicableScope: [],
+    processProtocol: asString(s.processProtocol),
+    restorationFallbacks: asString(s.restorationFallbacks),
+  };
+}
+
+/**
+ * Preset meaning/signals for a core value chip. Mirrors `CoreValuesSelectScreen`'s
+ * `getInitialTexts` so the final-review edit modal opens with the same
+ * preset copy the select screen would have shown — without requiring the
+ * user to have opened the select-screen modal first.
+ *
+ * Lookup order:
+ * 1. Numeric chip id → 1-based index into `coreValues.json` `values[]`
+ *    (matches `CoreValuesSelectScreen` chip ids).
+ * 2. Otherwise → empty (bespoke / template-derived chip with no preset).
+ */
+export function coreValuePresetFor(chipId: string): CoreValueDetailEntry {
+  const values = (coreValuesMessages as { values?: unknown }).values;
+  if (!Array.isArray(values)) return { meaning: "", signals: "" };
+  const idx = Number.parseInt(chipId, 10);
+  if (!Number.isInteger(idx) || idx < 1 || idx > values.length) {
+    return { meaning: "", signals: "" };
+  }
+  const row = values[idx - 1];
+  if (!row || typeof row !== "object") return { meaning: "", signals: "" };
+  const o = row as Record<string, unknown>;
+  return {
+    meaning: asString(o.meaning),
+    signals: asString(o.signals),
+  };
+}
+
+/** Resolve method preset label by id for a given group (localized display). */
+export function methodLabelFor(
+  groupKey: TemplateFacetGroupKey,
+  id: string,
+): string {
+  const source =
+    groupKey === "communication"
+      ? communicationMessages
+      : groupKey === "membership"
+        ? membershipMessages
+        : groupKey === "decisionApproaches"
+          ? decisionApproachesMessages
+          : groupKey === "conflictManagement"
+            ? conflictManagementMessages
+            : null;
+  if (!source) return "";
+  const method = findMethod(source, id);
+  return method?.label ?? "";
+}
diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts
index 33dac8e..1ea208c 100644
--- a/lib/server/validation/createFlowSchemas.ts
+++ b/lib/server/validation/createFlowSchemas.ts
@@ -25,6 +25,39 @@ const coreValueDetailEntrySchema = z.object({
   signals: z.string().max(8000),
 });
 
+/**
+ * Final-review edit modal details per group, merged onto preset defaults at
+ * publish time. Shapes mirror the custom-rule add-method modals.
+ */
+const communicationMethodDetailEntrySchema = z.object({
+  corePrinciple: z.string().max(8000),
+  logisticsAdmin: z.string().max(8000),
+  codeOfConduct: z.string().max(8000),
+});
+
+const membershipMethodDetailEntrySchema = z.object({
+  eligibility: z.string().max(8000),
+  joiningProcess: z.string().max(8000),
+  expectations: z.string().max(8000),
+});
+
+const decisionApproachDetailEntrySchema = z.object({
+  corePrinciple: z.string().max(8000),
+  applicableScope: z.array(z.string().max(2000)).max(50),
+  selectedApplicableScope: z.array(z.string().max(2000)).max(50),
+  stepByStepInstructions: z.string().max(8000),
+  consensusLevel: z.number().int().min(0).max(100),
+  objectionsDeadlocks: z.string().max(8000),
+});
+
+const conflictManagementDetailEntrySchema = z.object({
+  corePrinciple: z.string().max(8000),
+  applicableScope: z.array(z.string().max(2000)).max(50),
+  selectedApplicableScope: z.array(z.string().max(2000)).max(50),
+  processProtocol: z.string().max(8000),
+  restorationFallbacks: z.string().max(8000),
+});
+
 /**
  * Published rule `document` column: arbitrary JSON object with safety bounds.
  */
@@ -67,6 +100,18 @@ export const createFlowStateSchema = z
     selectedMembershipMethodIds: z.array(z.string()).max(200).optional(),
     selectedDecisionApproachIds: z.array(z.string()).max(200).optional(),
     selectedConflictManagementIds: z.array(z.string()).max(200).optional(),
+    communicationMethodDetailsById: z
+      .record(communicationMethodDetailEntrySchema)
+      .optional(),
+    membershipMethodDetailsById: z
+      .record(membershipMethodDetailEntrySchema)
+      .optional(),
+    decisionApproachDetailsById: z
+      .record(decisionApproachDetailEntrySchema)
+      .optional(),
+    conflictManagementDetailsById: z
+      .record(conflictManagementDetailEntrySchema)
+      .optional(),
     pendingTemplateAction: z
       .object({
         slug: z.string().max(200),
diff --git a/messages/en/create/reviewAndComplete/finalReview.json b/messages/en/create/reviewAndComplete/finalReview.json
index 863d09d..5854aaa 100644
--- a/messages/en/create/reviewAndComplete/finalReview.json
+++ b/messages/en/create/reviewAndComplete/finalReview.json
@@ -3,6 +3,11 @@
   "description": "Here's what other people will see. Make sure everything looks good before you finalize everything. Once the rule is finalized, you must use one of your decision-making mechanisms to edit it again.",
   "ruleCardTitleFallback": "Your community",
   "ruleCardDescriptionFallback": "Add a short description of your community on earlier steps when that field is available. For now, this card shows your community name.",
+  "chipEditModal": {
+    "saveButton": "Save",
+    "readOnlyCloseButton": "Close",
+    "readOnlyNote": "Details for this entry aren't editable yet."
+  },
   "categories": [
     {
       "name": "Values",
diff --git a/tests/components/CommunicationMethodsScreenPersistence.test.tsx b/tests/components/CommunicationMethodsScreenPersistence.test.tsx
new file mode 100644
index 0000000..8954274
--- /dev/null
+++ b/tests/components/CommunicationMethodsScreenPersistence.test.tsx
@@ -0,0 +1,150 @@
+import { useEffect, useLayoutEffect } from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+  within,
+  waitFor,
+} from "../utils/test-utils";
+import { fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { CommunicationMethodsScreen } from "../../app/(app)/create/screens/card/CommunicationMethodsScreen";
+import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
+import type { CreateFlowState } from "../../app/(app)/create/types";
+
+afterEach(() => {
+  cleanup();
+});
+
+/**
+ * Mounts the screen with optional starting state and exposes the latest
+ * `state` to the test harness so we can assert the persistence side of
+ * the Add Platform flow without driving the wizard's Next chain.
+ */
+const EMPTY_STATE: CreateFlowState = {};
+
+function ScreenWithStateProbe({
+  onState,
+  initial = EMPTY_STATE,
+}: {
+  onState: (_state: CreateFlowState) => void;
+  initial?: CreateFlowState;
+}) {
+  const { state, replaceState } = useCreateFlow();
+  useLayoutEffect(() => {
+    replaceState(initial);
+  }, [replaceState, initial]);
+  useEffect(() => {
+    onState(state);
+  }, [state, onState]);
+  return <CommunicationMethodsScreen />;
+}
+
+/**
+ * Confirms the persistence half of the Add-Platform flow that lets the
+ * final-review chip edit modal start from a known seed instead of always
+ * snapping back to preset copy. See {@link CommunicationMethodEditFields}
+ * and `buildPublishPayload` for the read side.
+ */
+describe("CommunicationMethodsScreen — Add Platform persistence", () => {
+  it("seeds the modal from preset and persists edits + selection on Confirm", async () => {
+    let latest: CreateFlowState = {};
+    render(
+      <ScreenWithStateProbe
+        onState={(s) => {
+          latest = s;
+        }}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: /Signal: Encrypted messaging/ })[0],
+    );
+
+    const dialog = await screen.findByRole("dialog");
+    const textareas = within(dialog).getAllByRole("textbox");
+    expect(textareas.length).toBe(3);
+    // Preset corePrinciple must seed into the first textarea so the user
+    // edits a real starting point rather than an empty field.
+    expect((textareas[0] as HTMLTextAreaElement).value.length).toBeGreaterThan(
+      0,
+    );
+
+    fireEvent.change(textareas[0], { target: { value: "Custom principle" } });
+    fireEvent.click(
+      within(dialog).getByRole("button", { name: "Add Platform" }),
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(latest.selectedCommunicationMethodIds).toContain("signal");
+    });
+    expect(
+      latest.communicationMethodDetailsById?.signal?.corePrinciple,
+    ).toBe("Custom principle");
+  });
+
+  it("does not persist edits when the modal closes without Confirm", async () => {
+    let latest: CreateFlowState = {};
+    render(
+      <ScreenWithStateProbe
+        onState={(s) => {
+          latest = s;
+        }}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: /Signal: Encrypted messaging/ })[0],
+    );
+    const dialog = await screen.findByRole("dialog");
+    const [firstTextarea] = within(dialog).getAllByRole("textbox");
+    fireEvent.change(firstTextarea, {
+      target: { value: "Should NOT persist" },
+    });
+
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+
+    expect(latest.selectedCommunicationMethodIds ?? []).not.toContain("signal");
+    expect(latest.communicationMethodDetailsById).toBeUndefined();
+  });
+
+  it("re-seeds the modal from a saved override when reopening the same chip", async () => {
+    let latest: CreateFlowState = {};
+    render(
+      <ScreenWithStateProbe
+        onState={(s) => {
+          latest = s;
+        }}
+        initial={{
+          selectedCommunicationMethodIds: ["signal"],
+          communicationMethodDetailsById: {
+            signal: {
+              corePrinciple: "Saved principle",
+              logisticsAdmin: "Saved logistics",
+              codeOfConduct: "Saved coc",
+            },
+          },
+        }}
+      />,
+    );
+    void latest;
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: /Signal: Encrypted messaging/ })[0],
+    );
+    const dialog = await screen.findByRole("dialog");
+    const textareas = within(dialog).getAllByRole(
+      "textbox",
+    ) as HTMLTextAreaElement[];
+    expect(textareas[0].value).toBe("Saved principle");
+    expect(textareas[1].value).toBe("Saved logistics");
+    expect(textareas[2].value).toBe("Saved coc");
+  });
+});
diff --git a/tests/components/FinalReviewPage.test.tsx b/tests/components/FinalReviewPage.test.tsx
index 0c23c7b..7d40e8f 100644
--- a/tests/components/FinalReviewPage.test.tsx
+++ b/tests/components/FinalReviewPage.test.tsx
@@ -1,5 +1,6 @@
-import { useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect } from "react";
 import { describe, it, expect } from "vitest";
+import { fireEvent, within } from "@testing-library/react";
 import {
   renderWithProviders as render,
   screen,
@@ -8,6 +9,30 @@ import {
 import "@testing-library/jest-dom/vitest";
 import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalReviewScreen";
 import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
+import type { CreateFlowState } from "../../app/(app)/create/types";
+
+/**
+ * Mounts the screen with a Customize-style preset selection and exposes the
+ * latest `state` to the test via `onState`. Used by the edit-modal save
+ * semantics suite below to assert what the user's edits actually persist
+ * (or don't, on close).
+ */
+function FinalReviewWithStateProbe({
+  onState,
+  initial,
+}: {
+  onState: (_state: CreateFlowState) => void;
+  initial: CreateFlowState;
+}) {
+  const { state, replaceState } = useCreateFlow();
+  useLayoutEffect(() => {
+    replaceState(initial);
+  }, [replaceState, initial]);
+  useEffect(() => {
+    onState(state);
+  }, [state, onState]);
+  return <FinalReviewScreen />;
+}
 
 const FALLBACK_CARD_TITLE = "Your community";
 const FALLBACK_CARD_DESCRIPTION_SNIPPET =
@@ -143,3 +168,221 @@ describe("FinalReviewScreen — prefilled selections", () => {
     expect(screen.queryByText("Consciousness")).not.toBeInTheDocument();
   });
 });
+
+describe("FinalReviewScreen — chip detail modal", () => {
+  it("opens the read-only detail modal when a chip is clicked, matching the preset copy", async () => {
+    render(<FinalReviewWithCustomizeSelections />);
+
+    const signalChip = await screen.findByRole("button", { name: "Signal" });
+    fireEvent.click(signalChip);
+
+    // Modal subtitle is the `supportText` from communication.json for the
+    // "signal" method — proves the chip click resolved the correct preset
+    // and reused the TemplateChipDetailModal's by-label lookup.
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          /Encrypted messaging for high-security, private coordination\./i,
+        ),
+      ).toBeInTheDocument();
+    });
+    // Core-principle section heading is shared copy from the same messages
+    // file; assert it renders to confirm the modal body hydrated.
+    expect(
+      screen.getAllByText(/core principle/i).length,
+    ).toBeGreaterThanOrEqual(1);
+  });
+
+  it("opens a core-values chip with the matching preset meaning/signals", async () => {
+    function CoreValuesHarness() {
+      const { replaceState } = useCreateFlow();
+      useLayoutEffect(() => {
+        replaceState({
+          selectedCoreValueIds: ["1"],
+          coreValuesChipsSnapshot: [
+            { id: "1", label: "Accessibility", state: "selected" },
+          ],
+        });
+      }, [replaceState]);
+      return <FinalReviewScreen />;
+    }
+    render(<CoreValuesHarness />);
+
+    const chip = await screen.findByRole("button", { name: "Accessibility" });
+    fireEvent.click(chip);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(/what does this value mean to your group\?/i),
+      ).toBeInTheDocument();
+    });
+    expect(
+      screen.getByText(/signals of violation/i),
+    ).toBeInTheDocument();
+  });
+
+  it("opens the editable Save modal for a values chip (parity with method chips)", async () => {
+    // Customize / plain custom-rule path: snapshot is set, sections is not.
+    function CoreValuesHarness() {
+      const { replaceState } = useCreateFlow();
+      useLayoutEffect(() => {
+        replaceState({
+          selectedCoreValueIds: ["1"],
+          coreValuesChipsSnapshot: [
+            { id: "1", label: "Accessibility", state: "selected" },
+          ],
+        });
+      }, [replaceState]);
+      return <FinalReviewScreen />;
+    }
+    render(<CoreValuesHarness />);
+
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Accessibility" }),
+    );
+    const dialog = await screen.findByRole("dialog");
+    expect(
+      within(dialog).getByRole("button", { name: "Save" }),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).queryByRole("button", { name: "Close" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("opens the editable Save modal for a values chip in the use-without-changes flow", async () => {
+    // Mirrors the post-fix payload from `handleUseTemplateWithoutChanges`:
+    // template Values section is stripped from `sections`, snapshot +
+    // selected ids are seeded so the chip carries an `overrideKey`.
+    function UseWithoutChangesHarness() {
+      const { replaceState } = useCreateFlow();
+      useLayoutEffect(() => {
+        replaceState({
+          title: "Oak Park Commons",
+          // Values section deliberately absent — apply handler scrubs it.
+          sections: [
+            {
+              categoryName: "Communication",
+              entries: [{ title: "Signal", body: "…" }],
+            },
+          ],
+          selectedCoreValueIds: ["1"],
+          coreValuesChipsSnapshot: [
+            { id: "1", label: "Accessibility", state: "selected" },
+          ],
+        });
+      }, [replaceState]);
+      return <FinalReviewScreen />;
+    }
+    render(<UseWithoutChangesHarness />);
+
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Accessibility" }),
+    );
+    const dialog = await screen.findByRole("dialog");
+    expect(
+      within(dialog).getByRole("button", { name: "Save" }),
+    ).toBeInTheDocument();
+  });
+
+});
+
+/**
+ * Save semantics for {@link FinalReviewChipEditModal}. Mirrors the
+ * "edits ride along to publish" promise documented in the modal:
+ *
+ * 1. Save starts disabled (no edits yet → nothing to persist).
+ * 2. Editing any field flips Save on; clicking it writes the typed
+ *    `{group}MethodDetailsById[id]` entry into create-flow state and
+ *    closes the modal.
+ * 3. Closing without Save discards every typed change.
+ */
+describe("FinalReviewScreen — chip edit modal save semantics", () => {
+  const baseSelections: CreateFlowState = {
+    title: "Oak Park Commons",
+    selectedCommunicationMethodIds: ["signal"],
+  };
+
+  it("starts with the Save button disabled until the user edits a field", async () => {
+    let latest: CreateFlowState = {};
+    render(
+      <FinalReviewWithStateProbe
+        onState={(s) => {
+          latest = s;
+        }}
+        initial={baseSelections}
+      />,
+    );
+    void latest;
+
+    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    const dialog = await screen.findByRole("dialog");
+    const saveButton = within(dialog).getByRole("button", { name: "Save" });
+    expect(saveButton).toBeDisabled();
+
+    const [firstTextarea] = within(dialog).getAllByRole("textbox");
+    fireEvent.change(firstTextarea, {
+      target: { value: "Edited principle" },
+    });
+
+    await waitFor(() => {
+      expect(
+        within(dialog).getByRole("button", { name: "Save" }),
+      ).not.toBeDisabled();
+    });
+  });
+
+  it("writes edits into communicationMethodDetailsById when Save is clicked", async () => {
+    let latest: CreateFlowState = {};
+    render(
+      <FinalReviewWithStateProbe
+        onState={(s) => {
+          latest = s;
+        }}
+        initial={baseSelections}
+      />,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    const dialog = await screen.findByRole("dialog");
+    const [firstTextarea] = within(dialog).getAllByRole("textbox");
+    fireEvent.change(firstTextarea, {
+      target: { value: "Edited principle" },
+    });
+    fireEvent.click(within(dialog).getByRole("button", { name: "Save" }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(
+        latest.communicationMethodDetailsById?.signal?.corePrinciple,
+      ).toBe("Edited principle");
+    });
+  });
+
+  it("discards typed edits when the modal closes without Save", async () => {
+    let latest: CreateFlowState = {};
+    render(
+      <FinalReviewWithStateProbe
+        onState={(s) => {
+          latest = s;
+        }}
+        initial={baseSelections}
+      />,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    const dialog = await screen.findByRole("dialog");
+    const [firstTextarea] = within(dialog).getAllByRole("textbox");
+    fireEvent.change(firstTextarea, {
+      target: { value: "Should NOT persist" },
+    });
+
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+
+    expect(latest.communicationMethodDetailsById).toBeUndefined();
+  });
+});
diff --git a/tests/unit/applyTemplatePrefill.test.ts b/tests/unit/applyTemplatePrefill.test.ts
index f479c77..e2222d1 100644
--- a/tests/unit/applyTemplatePrefill.test.ts
+++ b/tests/unit/applyTemplatePrefill.test.ts
@@ -1,5 +1,8 @@
 import { describe, expect, it } from "vitest";
-import { buildTemplateCustomizePrefill } from "../../lib/create/applyTemplatePrefill";
+import {
+  buildCoreValuesPrefillFromTemplateBody,
+  buildTemplateCustomizePrefill,
+} from "../../lib/create/applyTemplatePrefill";
 import coreValuesMessages from "../../messages/en/create/customRule/coreValues.json";
 
 function coreValuePresetId(label: string): string {
@@ -107,3 +110,46 @@ describe("buildTemplateCustomizePrefill", () => {
     expect(prefill).toEqual({});
   });
 });
+
+describe("buildCoreValuesPrefillFromTemplateBody", () => {
+  it("returns {} for malformed bodies", () => {
+    expect(buildCoreValuesPrefillFromTemplateBody(null)).toEqual({});
+    expect(buildCoreValuesPrefillFromTemplateBody({})).toEqual({});
+    expect(
+      buildCoreValuesPrefillFromTemplateBody({ sections: "nope" }),
+    ).toEqual({});
+  });
+
+  it("returns {} when the body has no Values section", () => {
+    expect(
+      buildCoreValuesPrefillFromTemplateBody({
+        sections: [
+          { categoryName: "Communication", entries: [{ title: "Signal" }] },
+        ],
+      }),
+    ).toEqual({});
+  });
+
+  it("seeds the snapshot + selected ids from the Values section only", () => {
+    const prefill = buildCoreValuesPrefillFromTemplateBody({
+      sections: [
+        {
+          categoryName: "Values",
+          entries: [
+            { title: "Consensus", body: "" },
+            { title: "Community Care", body: "" },
+          ],
+        },
+        {
+          categoryName: "Communication",
+          entries: [{ title: "Signal", body: "" }],
+        },
+      ],
+    });
+    const selected = prefill.selectedCoreValueIds ?? [];
+    expect(selected).toContain(coreValuePresetId("Consensus"));
+    expect(selected).toContain(coreValuePresetId("Community Care"));
+    // Methods should not be touched by the values-only helper.
+    expect(prefill.selectedCommunicationMethodIds).toBeUndefined();
+  });
+});
diff --git a/tests/unit/buildFinalReviewCategories.test.ts b/tests/unit/buildFinalReviewCategories.test.ts
index ca77307..0a5f13a 100644
--- a/tests/unit/buildFinalReviewCategories.test.ts
+++ b/tests/unit/buildFinalReviewCategories.test.ts
@@ -114,7 +114,11 @@ describe("buildFinalReviewCategoriesFromState", () => {
     ]);
   });
 
-  it("does not duplicate Values when sections already includes one", () => {
+  it("prefers the chip snapshot over a duplicated Values section in sections", () => {
+    // The use-without-changes handler now strips Values from `sections` and
+    // seeds the snapshot, but legacy drafts persisted before that fix can
+    // still arrive here with both sources present. The snapshot wins so the
+    // final-review chip modal can attach edits via the per-chip id.
     const state: CreateFlowState = {
       sections: [
         {
@@ -129,7 +133,7 @@ describe("buildFinalReviewCategoriesFromState", () => {
     };
     const rows = buildFinalReviewCategoriesFromState(state, NAMES);
     expect(rows).toEqual([
-      { name: "Values", chips: ["Consciousness"] },
+      { name: "Values", chips: ["Accessibility"] },
     ]);
   });
 });
diff --git a/tests/unit/buildPublishPayload.test.ts b/tests/unit/buildPublishPayload.test.ts
index 7531fb5..2af899b 100644
--- a/tests/unit/buildPublishPayload.test.ts
+++ b/tests/unit/buildPublishPayload.test.ts
@@ -113,6 +113,89 @@ describe("buildPublishPayload", () => {
   });
 });
 
+describe("buildPublishPayload — methodSelections", () => {
+  it("omits document.methodSelections when no method group is selected", () => {
+    const r = buildPublishPayload({ title: "T" });
+    expect(r.ok).toBe(true);
+    if (!r.ok) return;
+    expect(r.document.methodSelections).toBeUndefined();
+  });
+
+  it("emits preset-only sections when a method is selected without an override", () => {
+    const r = buildPublishPayload({
+      title: "T",
+      selectedCommunicationMethodIds: ["signal"],
+    });
+    expect(r.ok).toBe(true);
+    if (!r.ok) return;
+    const ms = r.document.methodSelections as
+      | Record<string, Array<Record<string, unknown>>>
+      | undefined;
+    expect(ms).toBeDefined();
+    expect(ms?.communication?.length).toBe(1);
+    const entry = ms?.communication?.[0] as {
+      id: string;
+      label: string;
+      sections: { corePrinciple: string };
+    };
+    expect(entry.id).toBe("signal");
+    expect(entry.label).toBe("Signal");
+    // Preset corePrinciple is non-empty for `signal` in the shipped messages
+    // file — proves we read presets when no override is present.
+    expect(entry.sections.corePrinciple.length).toBeGreaterThan(0);
+  });
+
+  it("merges override on top of preset for the selected method", () => {
+    const r = buildPublishPayload({
+      title: "T",
+      selectedCommunicationMethodIds: ["signal"],
+      communicationMethodDetailsById: {
+        signal: {
+          corePrinciple: "OVERRIDE PRINCIPLE",
+          logisticsAdmin: "OVERRIDE LOGISTICS",
+          codeOfConduct: "OVERRIDE COC",
+        },
+      },
+    });
+    expect(r.ok).toBe(true);
+    if (!r.ok) return;
+    const ms = r.document.methodSelections as
+      | Record<string, Array<Record<string, unknown>>>
+      | undefined;
+    const entry = ms?.communication?.[0] as {
+      sections: {
+        corePrinciple: string;
+        logisticsAdmin: string;
+        codeOfConduct: string;
+      };
+    };
+    expect(entry.sections.corePrinciple).toBe("OVERRIDE PRINCIPLE");
+    expect(entry.sections.logisticsAdmin).toBe("OVERRIDE LOGISTICS");
+    expect(entry.sections.codeOfConduct).toBe("OVERRIDE COC");
+  });
+
+  it("emits a methodSelections entry per selected group", () => {
+    const r = buildPublishPayload({
+      title: "T",
+      selectedCommunicationMethodIds: ["signal"],
+      selectedMembershipMethodIds: ["open-access"],
+      selectedDecisionApproachIds: ["lazy-consensus"],
+      selectedConflictManagementIds: ["peer-mediation"],
+    });
+    expect(r.ok).toBe(true);
+    if (!r.ok) return;
+    const ms = r.document.methodSelections as
+      | Record<string, Array<unknown>>
+      | undefined;
+    expect(Object.keys(ms ?? {}).sort()).toEqual([
+      "communication",
+      "conflictManagement",
+      "decisionApproaches",
+      "membership",
+    ]);
+  });
+});
+
 describe("parseDocumentSectionsForDisplay", () => {
   it("returns empty for non-object", () => {
     expect(parseDocumentSectionsForDisplay(null)).toEqual([]);

From 707d08642c0da5e4d35a24a8467d26034bf8ea0e Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 20 Apr 2026 18:33:33 -0600
Subject: [PATCH 13/15] Tighten final-review screen

---
 .../screens/review/FinalReviewScreen.tsx      | 13 +++-
 .../screens/select/CoreValuesSelectScreen.tsx | 30 ++++++--
 docs/guides/backend-linear-tickets.md         | 68 ++++++++++++++++++-
 .../create/reviewAndComplete/finalReview.json |  1 -
 .../CoreValuesSelectScreen.test.tsx           | 66 ++++++++++++++++++
 tests/components/FinalReviewPage.test.tsx     | 37 +++++++---
 6 files changed, 192 insertions(+), 23 deletions(-)

diff --git a/app/(app)/create/screens/review/FinalReviewScreen.tsx b/app/(app)/create/screens/review/FinalReviewScreen.tsx
index 5fea46e..8de973a 100644
--- a/app/(app)/create/screens/review/FinalReviewScreen.tsx
+++ b/app/(app)/create/screens/review/FinalReviewScreen.tsx
@@ -210,11 +210,18 @@ export function FinalReviewScreen() {
     return raw.length > 0 ? raw : t("ruleCardTitleFallback");
   }, [state.title, t]);
 
+  /**
+   * Match {@link CommunityReviewScreen}: the card body is the free-text
+   * `community-context` field only — not `summary` (template / one-line
+   * rule summary can carry template-review copy).
+   */
   const ruleCardDescription = useMemo(() => {
     const raw =
-      typeof state.summary === "string" ? state.summary.trim() : "";
-    return raw.length > 0 ? raw : t("ruleCardDescriptionFallback");
-  }, [state.summary, t]);
+      typeof state.communityContext === "string"
+        ? state.communityContext.trim()
+        : "";
+    return raw.length > 0 ? raw : undefined;
+  }, [state.communityContext]);
 
   return (
     <CreateFlowLockupCardStepShell
diff --git a/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
index 7bd37fa..06bfa6e 100644
--- a/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
@@ -17,7 +17,19 @@ import { CoreValueEditFields } from "../../components/methodEditFields";
 
 const MAX_CORE_VALUES = 5;
 
-type ModalSession = "pending" | "editing";
+/**
+ * Why three sessions, not two:
+ *
+ * - `pending` — preset chip just selected; modal opened to capture
+ *   meaning/signals. Dismiss = unselect the chip (keep it in the
+ *   preset row, just not selected).
+ * - `customPending` — brand-new custom chip just created via the Add
+ *   value flow; modal opened with empty fields. Dismiss = drop the
+ *   chip entirely (it was never confirmed via the Add Value button).
+ * - `editing` — chip already exists & is selected; modal reopened to
+ *   tweak meaning/signals. Dismiss = no-op (chip stays as-is).
+ */
+type ModalSession = "pending" | "customPending" | "editing";
 
 /** Row in `coreValues.json` `values` — string (legacy) or `{ label, meaning, signals }`. */
 type CoreValuePresetJson =
@@ -208,6 +220,14 @@ export function CoreValuesSelectScreen() {
           : opt,
       );
       persistCoreValues(next);
+    } else if (activeModalChipId && modalSession === "customPending") {
+      // Custom chip never confirmed via Add Value — drop it from both
+      // the local options and the create-flow draft so refresh / back
+      // navigation doesn't resurrect a phantom chip.
+      const next = coreValueOptions.filter(
+        (opt) => opt.id !== activeModalChipId,
+      );
+      persistCoreValues(next);
     }
     setActiveModalChipId(null);
     setModalSession(null);
@@ -295,11 +315,9 @@ export function CoreValuesSelectScreen() {
 
         queueMicrotask(() => {
           syncCoreValuesToDraft(next);
-          if (canSelect) {
-            openModal(chipId, "pending", value);
-          } else {
-            openModal(chipId, "editing", value);
-          }
+          // Both branches treat the chip as a brand-new draft until the
+          // user confirms via Add Value — dismissal removes it.
+          openModal(chipId, "customPending", value);
         });
         return next;
       });
diff --git a/docs/guides/backend-linear-tickets.md b/docs/guides/backend-linear-tickets.md
index a65b552..720fd75 100644
--- a/docs/guides/backend-linear-tickets.md
+++ b/docs/guides/backend-linear-tickets.md
@@ -385,6 +385,68 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 ---
 
+## Ticket 19 — `Add` button behavior on custom-rule pages and Final Review chips
+
+**Depends on:** nothing technical. Pure **product + design** clarification — blocks consistent UX of the Create flow's custom path and the Final Review screen, but does not block any backend work.
+
+**Server / admin:** none.
+
+**Goal:** Decide what the **`Add`** affordance should do on each custom-rule page and on the **Final Review** screen, and produce Figma covering the chosen behavior. Today the affordance is inconsistent: on most custom-rule pages it just expands the card list, on `core-values` it opens a real modal flow, and on Final Review the `+` button on each chip row is a no-op.
+
+**Context — what `Add` does today:**
+
+- **Core values** ([`CoreValuesSelectScreen.tsx`](../../app/(app)/create/screens/select/CoreValuesSelectScreen.tsx)) — full custom-chip flow: `Add value` → empty chip with input → check → opens an editable `meaning` / `signals` modal. Dismissing the modal now drops the brand-new chip (`customPending` session). Add Value confirms it as a selected chip.
+- **Communication / Membership / Conflict management / Decision approaches** (card-style screens, e.g. [`CommunicationMethodsScreen.tsx`](../../app/(app)/create/screens/card/CommunicationMethodsScreen.tsx)) — there is **no `Add custom method` affordance**. The inline `add` link in the page description (`messages/en/create/customRule/*.json`, `compactDescriptionLinkLabel: "add"`) only toggles `setExpanded(true)` on the card stack — it shows more preset cards, it does **not** open a creation modal.
+- **Confirm stakeholders** — multiselect-style add (free-text chip), pending real invite work in **Ticket 18 / CR-90**.
+- **Community structure** — multiselect-style add (free-text chip).
+- **Final Review** ([`FinalReviewScreen.tsx`](../../app/(app)/create/screens/review/FinalReviewScreen.tsx)) — renders `<RuleCard categories=…>` and only wires `onChipClick`. `category.onAddClick` is **not provided**, so the `+` button on each MultiSelect category renders by default (`addButton={!hideCategoryAddButton}` in [`RuleCard.view.tsx`](../../app/components/cards/RuleCard/RuleCard.view.tsx)) but **does nothing** when clicked. Dead control we are shipping today.
+
+**Open product questions (block implementation until resolved):**
+
+_Section A — custom-rule card pages (communication, membership, conflict management, decision approaches):_
+
+1. Should each of these pages have a true **"Add custom \<method/approach/protocol\>"** button, distinct from the existing `add` text link that just expands the card stack?
+2. If yes: where does it sit (header CTA / end of stack / both)? Does it open a **clean empty modal** in the same shape as the page's edit modal (the `*EditFields` components under `app/(app)/create/components/methodEditFields/`)? Same `customPending` semantics as core values (dismiss = drop, confirm = persist + select)? Required vs optional fields?
+3. If no: should we **rename or remove** the inline `add` link in the description so it doesn't promise creation behavior we don't deliver?
+
+_Section B — Final Review screen `+` button per category:_
+
+1. Pick one:
+   - **Option 1 — fresh modal in place.** Clicking `+` opens [`FinalReviewChipEditModal`](../../app/(app)/create/components/FinalReviewChipEditModal.tsx) seeded empty for the category. On Save, append a new chip and write through to the matching `*MethodDetailsById` (or `coreValueDetailsByChipId` + snapshot) map, matching the editable chip flow that just shipped.
+   - **Option 2 — bounce back to the source step.** Navigate the user to the corresponding custom-rule step (e.g. communication chip `+` → `/create/communication`) so they add via the existing card-page flow, then return to Final Review.
+   - **Option 3 — hide the button.** Pass `hideCategoryAddButton` to the Final Review `<RuleCard>` so the dead control disappears until product knows what they want.
+2. If Option 1, what is the empty state of the modal (title only, all fields, recommended seeds)?
+3. If Option 2, how do we preserve the user's place on Final Review so they can come back without re-confirming everything?
+4. Does the answer differ for `coreValues` vs the four method categories? (Different edit-fields components, different state slices.)
+
+**Implementation sketch (subject to product sign-off):**
+
+1. **Product + design pass** answering Sections A and B; produce Figma for whichever options win on each affected page and on Final Review.
+2. **Custom-rule card pages (if Option A1 wins):** add an `Add custom <method>` button alongside the card stack on each of the four pages. Reuse the page's `*EditFields` component inside a `customPending`-style modal (same dismiss-drops / confirm-persists semantics as `CoreValuesSelectScreen`). Persist into the matching `*MethodDetailsById` slice and selected-id list.
+3. **Final Review (if Option B1 wins):** wire `category.onAddClick` per category in [`FinalReviewScreen.tsx`](../../app/(app)/create/screens/review/FinalReviewScreen.tsx) → open `FinalReviewChipEditModal` seeded empty for the matching `groupKey`, with a `customPending` mode that drops the new entry on dismiss and persists on Save (parity with the current chip-edit flow).
+4. **Final Review (if Option B3 wins, interim):** pass `hideCategoryAddButton` to the Final Review `<RuleCard>` so the no-op `+` is removed.
+5. **i18n:** add copy for the new buttons, modal headers, validation, and confirmation/discard prompts under `messages/en/create/customRule/*.json` and `messages/en/create/reviewAndComplete/finalReview.json`.
+6. **Tests:** Vitest component tests covering dismiss-drops vs confirm-persists for each new modal (mirror the new `CoreValuesSelectScreen.test.tsx` `custom chip — confirmed vs dismissed` pair).
+
+**Out of scope:**
+
+- Server-side persistence changes — adding a chip already flows through existing `*MethodDetailsById` / `coreValueDetailsByChipId` snapshots.
+- Reworking the inline `add` link's `compactDescriptionLinkLabel` semantics until product decides whether it still belongs.
+- Bulk-add UX (paste many chips at once).
+
+**Acceptance criteria:**
+
+- [ ] Product brief answering Section A and Section B, linked from the Linear issue.
+- [ ] Figma covering whichever options product picks for the four card-style pages and Final Review.
+- [ ] If Option B3 (interim) ships first: the Final Review `+` is no longer rendered (no dead controls).
+- [ ] Once Option A1 / B1 are picked: implementation tickets file under this one with `customPending` parity and tests, no regressions to the existing chip-edit flow.
+
+**Files (reference):** [`app/(app)/create/screens/card/CommunicationMethodsScreen.tsx`](../../app/(app)/create/screens/card/CommunicationMethodsScreen.tsx), [`MembershipMethodsScreen.tsx`](../../app/(app)/create/screens/card/MembershipMethodsScreen.tsx), [`ConflictManagementScreen.tsx`](../../app/(app)/create/screens/card/ConflictManagementScreen.tsx), [`right-rail/DecisionApproachesScreen.tsx`](../../app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx), [`select/CoreValuesSelectScreen.tsx`](../../app/(app)/create/screens/select/CoreValuesSelectScreen.tsx), [`review/FinalReviewScreen.tsx`](../../app/(app)/create/screens/review/FinalReviewScreen.tsx), [`components/FinalReviewChipEditModal.tsx`](../../app/(app)/create/components/FinalReviewChipEditModal.tsx), [`components/methodEditFields/`](../../app/(app)/create/components/methodEditFields/), [`components/cards/RuleCard/RuleCard.view.tsx`](../../app/components/cards/RuleCard/RuleCard.view.tsx).
+
+**Linear:** [CR-91](https://linear.app/community-rule/issue/CR-91/productdesign-add-button-behavior-on-custom-rule-pages-and-final) (**Backlog**). Sibling product/design ticket to **CR-90** (same "copy promises a feature, UI doesn't deliver" pattern). **Parallel** to the CR-72 → CR-83 chain; not on the critical path.
+
+---
+
 ## Ticket 9 — Persist web vitals outside `.next` (prefer external RUM)
 
 **Depends on:** none (orthogonal).
@@ -591,14 +653,15 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 |    16 | 16     | Template matrix + xlsx ingestion  |
 |    17 | 17     | Canon create-flow (custom path)     |
 |    18 | 18     | Stakeholder invites (confirm-stakeholders) |
+|    19 | 19     | `Add` button behavior (custom-rule pages + Final Review) |
 
-Tickets **10–11** can be deferred without blocking the core “auth + drafts + publish + templates” vertical slice. **Ticket 16** is also **deferrable** until after **7–8** (flat template list + UI); it adds **spreadsheet-driven** recommendations and facet APIs. **Ticket 17** (**[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)**) canonizes the **custom** wizard in [`docs/create-flow.md`](create-flow.md) and tracks UX/code alignment (progress bar, resume URL, `[step]` cleanup); **parallel** to publish and templates. **Tickets 13–14** are parallel to that chain (**CR-73** / **CR-75** prerequisites are **Done** — **CR-84** / **CR-85** are unblocked), not sequential after CR-83. **Ticket 15** is also **parallel** (blocked by **publish (CR-77)** once session/auth are shipped); Linear: **CR-86**. **Ticket 18** (**[CR-90](https://linear.app/community-rule/issue/CR-90/productbackend-invite-stakeholders-email-from-confirm-stakeholders)**) adds real **email-based stakeholder invites** to the `confirm-stakeholders` step — currently ships as a label-only chip list despite copy promising invites; **parallel** to the main chain, awaits design + product brief before implementation.
+Tickets **10–11** can be deferred without blocking the core “auth + drafts + publish + templates” vertical slice. **Ticket 16** is also **deferrable** until after **7–8** (flat template list + UI); it adds **spreadsheet-driven** recommendations and facet APIs. **Ticket 17** (**[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)**) canonizes the **custom** wizard in [`docs/create-flow.md`](create-flow.md) and tracks UX/code alignment (progress bar, resume URL, `[step]` cleanup); **parallel** to publish and templates. **Tickets 13–14** are parallel to that chain (**CR-73** / **CR-75** prerequisites are **Done** — **CR-84** / **CR-85** are unblocked), not sequential after CR-83. **Ticket 15** is also **parallel** (blocked by **publish (CR-77)** once session/auth are shipped); Linear: **CR-86**. **Ticket 18** (**[CR-90](https://linear.app/community-rule/issue/CR-90/productbackend-invite-stakeholders-email-from-confirm-stakeholders)**) adds real **email-based stakeholder invites** to the `confirm-stakeholders` step — currently ships as a label-only chip list despite copy promising invites; **parallel** to the main chain, awaits design + product brief before implementation. **Ticket 19** (**[CR-91](https://linear.app/community-rule/issue/CR-91/productdesign-add-button-behavior-on-custom-rule-pages-and-final)**) is a **product/design** clarification ticket: the `Add` affordance is inconsistent across custom-rule pages (full custom-chip flow only on `core-values`; an `add` link that just expands the card stack on the four card-style pages) and the Final Review screen renders a `+` button per category that today is a no-op; needs a brief + Figma before any implementation lands.
 
 ---
 
 ## Linear (Community-rule team)
 
-**Main chain:** **CR-72 → CR-83** (each blocks the next). **Parallel:** **CR-84** (**CR-73** Done — ready to pick up), **CR-85** (**CR-75** Done — ready to pick up), **CR-86** / Ticket 15 (blocked by **CR-77** publish only; **CR-75** Done), **CR-88** / Ticket 16 (template matrix + `.xlsx` ingestion — after **CR-78**/**CR-79**), **CR-89** / Ticket 17 (canon create-flow + implementation gaps), **CR-90** / Ticket 18 (stakeholder invites — product/design brief unblocked; implementation waits on **CR-73** / **CR-74** / **CR-75** / **CR-77**), none in the CR-72–83 sequence.
+**Main chain:** **CR-72 → CR-83** (each blocks the next). **Parallel:** **CR-84** (**CR-73** Done — ready to pick up), **CR-85** (**CR-75** Done — ready to pick up), **CR-86** / Ticket 15 (blocked by **CR-77** publish only; **CR-75** Done), **CR-88** / Ticket 16 (template matrix + `.xlsx` ingestion — after **CR-78**/**CR-79**), **CR-89** / Ticket 17 (canon create-flow + implementation gaps), **CR-90** / Ticket 18 (stakeholder invites — product/design brief unblocked; implementation waits on **CR-73** / **CR-74** / **CR-75** / **CR-77**), **CR-91** / Ticket 19 (`Add` button behavior on custom-rule pages and Final Review chips — pure product/design clarification, no technical blockers), none in the CR-72–83 sequence.
 
 | Doc ticket | Linear                                                                                                                      | Title (short)                           |
 | ---------: | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
@@ -620,6 +683,7 @@ Tickets **10–11** can be deferred without blocking the core “auth + drafts +
 |         16 | [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-xlsx-sheets-ingestion)         | Template matrix + xlsx ingestion        |
 |         17 | [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)   | Canon create-flow (custom wizard + docs) |
 |         18 | [CR-90](https://linear.app/community-rule/issue/CR-90/productbackend-invite-stakeholders-email-from-confirm-stakeholders)    | Stakeholder invites (confirm-stakeholders) |
+|         19 | [CR-91](https://linear.app/community-rule/issue/CR-91/productdesign-add-button-behavior-on-custom-rule-pages-and-final)      | `Add` button behavior (custom-rule + Final Review) |
 
 ---
 
diff --git a/messages/en/create/reviewAndComplete/finalReview.json b/messages/en/create/reviewAndComplete/finalReview.json
index 5854aaa..c763919 100644
--- a/messages/en/create/reviewAndComplete/finalReview.json
+++ b/messages/en/create/reviewAndComplete/finalReview.json
@@ -2,7 +2,6 @@
   "title": "Review your CommunityRule",
   "description": "Here's what other people will see. Make sure everything looks good before you finalize everything. Once the rule is finalized, you must use one of your decision-making mechanisms to edit it again.",
   "ruleCardTitleFallback": "Your community",
-  "ruleCardDescriptionFallback": "Add a short description of your community on earlier steps when that field is available. For now, this card shows your community name.",
   "chipEditModal": {
     "saveButton": "Save",
     "readOnlyCloseButton": "Close",
diff --git a/tests/components/CoreValuesSelectScreen.test.tsx b/tests/components/CoreValuesSelectScreen.test.tsx
index a4ca54b..37ccd56 100644
--- a/tests/components/CoreValuesSelectScreen.test.tsx
+++ b/tests/components/CoreValuesSelectScreen.test.tsx
@@ -39,4 +39,70 @@ describe("CoreValuesSelectScreen", () => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
     });
   });
+
+  // The "Add value" → custom-chip → modal flow uses a `customPending`
+  // session: dismissing the modal must drop the brand-new chip entirely
+  // (not just unselect it), because the user never confirmed it via
+  // the modal's Add Value button. Clicking Add Value keeps the chip
+  // as a selected entry. These two tests pin both halves of the
+  // contract so the screens stay in sync with the create-flow draft.
+  describe("custom chip — confirmed vs dismissed", () => {
+    // Use a label guaranteed to NOT collide with any preset value
+    // (we'd otherwise get two matching chips and false positives).
+    const CUSTOM_LABEL = "ZZTopBespokeValue";
+
+    async function addCustomChipNamed(label: string) {
+      fireEvent.click(screen.getByRole("button", { name: "Add value" }));
+      const input = await screen.findByPlaceholderText("Type to add");
+      fireEvent.change(input, { target: { value: label } });
+      fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+      return screen.findByRole("dialog");
+    }
+
+    /**
+     * The label can also appear in the modal header while the modal
+     * is open, and as the chip's "Remove" button aria-label. Scope to
+     * chip-row buttons by excluding both.
+     */
+    function countCustomChips(label: string) {
+      return screen
+        .queryAllByRole("button", { name: label })
+        .filter(
+          (el) =>
+            !el.closest('[role="dialog"]') &&
+            (el.getAttribute("aria-label") ?? "") !== `Remove ${label}`,
+        ).length;
+    }
+
+    it("removes the custom chip when its modal is dismissed without Add Value", async () => {
+      renderWithProviders(<CoreValuesSelectScreen />);
+      await addCustomChipNamed(CUSTOM_LABEL);
+      expect(countCustomChips(CUSTOM_LABEL)).toBe(1);
+
+      fireEvent.keyDown(document, { key: "Escape" });
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      });
+      // Chip must be gone — not just unselected. If it were merely
+      // unselected the chip button would still render. Wrap in waitFor
+      // because the chip removal flushes through `updateState` →
+      // `useEffect` → `setCoreValueOptions` and isn't synchronous with
+      // the dialog close.
+      await waitFor(() => {
+        expect(countCustomChips(CUSTOM_LABEL)).toBe(0);
+      });
+    });
+
+    it("keeps the custom chip selected when Add Value is clicked", async () => {
+      renderWithProviders(<CoreValuesSelectScreen />);
+      const dialog = await addCustomChipNamed(CUSTOM_LABEL);
+      fireEvent.click(
+        within(dialog).getByRole("button", { name: "Add Value" }),
+      );
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      });
+      expect(countCustomChips(CUSTOM_LABEL)).toBe(1);
+    });
+  });
 });
diff --git a/tests/components/FinalReviewPage.test.tsx b/tests/components/FinalReviewPage.test.tsx
index 7d40e8f..bb237e3 100644
--- a/tests/components/FinalReviewPage.test.tsx
+++ b/tests/components/FinalReviewPage.test.tsx
@@ -35,20 +35,21 @@ function FinalReviewWithStateProbe({
 }
 
 const FALLBACK_CARD_TITLE = "Your community";
-const FALLBACK_CARD_DESCRIPTION_SNIPPET =
-  "Add a short description of your community";
 
 function FinalReviewWithFlowState({
   title,
-  summary,
+  communityContext,
 }: {
   title: string;
-  summary?: string;
+  communityContext?: string;
 }) {
   const { replaceState } = useCreateFlow();
   useLayoutEffect(() => {
-    replaceState({ title, ...(summary !== undefined ? { summary } : {}) });
-  }, [replaceState, title, summary]);
+    replaceState({
+      title,
+      ...(communityContext !== undefined ? { communityContext } : {}),
+    });
+  }, [replaceState, title, communityContext]);
   return <FinalReviewScreen />;
 }
 
@@ -81,16 +82,30 @@ describe("FinalReviewScreen", () => {
     expect(screen.getByText(FALLBACK_CARD_TITLE)).toBeInTheDocument();
   });
 
-  it("renders RuleCard with fallback description when context has no summary", () => {
-    render(<FinalReviewScreen />);
+  it("does not use summary as the card body when community context is empty", () => {
+    function TitleAndSummaryHarness() {
+      const { replaceState } = useCreateFlow();
+      useLayoutEffect(() => {
+        replaceState({
+          title: "Oak Park Commons",
+          summary:
+            "Leftover template or one-line summary — must not appear as the RuleCard description.",
+        });
+      }, [replaceState]);
+      return <FinalReviewScreen />;
+    }
+    render(<TitleAndSummaryHarness />);
     expect(
-      screen.getByText(new RegExp(FALLBACK_CARD_DESCRIPTION_SNIPPET, "i")),
-    ).toBeInTheDocument();
+      screen.queryByText(/Leftover template or one-line summary/i),
+    ).not.toBeInTheDocument();
   });
 
   it("renders RuleCard title from create flow state", async () => {
     render(
-      <FinalReviewWithFlowState title="Oak Park Commons" summary="Local mutual aid." />,
+      <FinalReviewWithFlowState
+        title="Oak Park Commons"
+        communityContext="Local mutual aid."
+      />,
     );
     await waitFor(() => {
       expect(screen.getByText("Oak Park Commons")).toBeInTheDocument();

From 2438c6f707543a578585825e6ec938e8766da030 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 20 Apr 2026 19:00:30 -0600
Subject: [PATCH 14/15] Template navigation and review/complete cleanup

---
 app/(app)/create/CreateFlowLayoutClient.tsx   | 409 +++++-------------
 .../create/hooks/useCreateFlowFinalize.ts     | 106 +++++
 .../create/hooks/useCreateFlowNavigation.ts   |  75 +++-
 .../create/hooks/useTemplateReviewActions.ts  | 208 +++++++++
 .../screens/review/FinalReviewScreen.tsx      |  49 +--
 app/(app)/create/types.ts                     |  17 +
 .../create/utils/createFlowFooterLabels.ts    |  38 ++
 app/(app)/create/utils/flowSteps.ts           |  45 ++
 .../templates/TemplatesPageClient.tsx         |   5 +-
 lib/create/applyFinalReviewChipEditPatch.ts   |  59 +++
 lib/server/validation/createFlowSchemas.ts    |   2 +
 tests/pages/templates.test.jsx                |   6 +-
 .../applyFinalReviewChipEditPatch.test.ts     | 127 ++++++
 tests/unit/createFlowValidation.test.ts       |  14 +
 tests/unit/flowSteps.test.ts                  |  31 ++
 15 files changed, 836 insertions(+), 355 deletions(-)
 create mode 100644 app/(app)/create/hooks/useCreateFlowFinalize.ts
 create mode 100644 app/(app)/create/hooks/useTemplateReviewActions.ts
 create mode 100644 app/(app)/create/utils/createFlowFooterLabels.ts
 create mode 100644 lib/create/applyFinalReviewChipEditPatch.ts
 create mode 100644 tests/unit/applyFinalReviewChipEditPatch.test.ts

diff --git a/app/(app)/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx
index 2f5812b..983136f 100644
--- a/app/(app)/create/CreateFlowLayoutClient.tsx
+++ b/app/(app)/create/CreateFlowLayoutClient.tsx
@@ -11,6 +11,8 @@ import { usePathname, useRouter } from "next/navigation";
 import { CreateFlowProvider, useCreateFlow } from "./context/CreateFlowContext";
 import { useCreateFlowNavigation } from "./hooks/useCreateFlowNavigation";
 import { useCreateFlowExit } from "./hooks/useCreateFlowExit";
+import { useCreateFlowFinalize } from "./hooks/useCreateFlowFinalize";
+import { useTemplateReviewActions } from "./hooks/useTemplateReviewActions";
 import CreateFlowTopNav from "../../components/utility/CreateFlowTopNav";
 import { getNextStep, getStepIndex } from "./utils/flowSteps";
 import { getProportionBarProgressForCreateFlowStep } from "./utils/createFlowProportionProgress";
@@ -20,11 +22,9 @@ import {
 } from "./utils/createFlowScreenRegistry";
 import CreateFlowFooter from "../../components/utility/CreateFlowFooter";
 import Button from "../../components/buttons/Button";
-import { buildPublishPayload } from "../../../lib/create/buildPublishPayload";
 import { isValidCreateFlowSaveEmail } from "../../../lib/create/isValidCreateFlowSaveEmail";
 import {
   fetchAuthSession,
-  publishRule,
   requestMagicLink,
 } from "../../../lib/create/api";
 import { safeInternalPath } from "../../../lib/safeInternalPath";
@@ -33,12 +33,6 @@ import {
   setTransferPendingFlag,
 } from "./utils/anonymousDraftStorage";
 import { deleteServerDraft } from "../../../lib/create/api";
-import { writeLastPublishedRule } from "../../../lib/create/lastPublishedRule";
-import {
-  buildCoreValuesPrefillFromTemplateBody,
-  buildTemplateCustomizePrefill,
-} from "../../../lib/create/applyTemplatePrefill";
-import { loadTemplateReviewBySlug } from "../../../lib/create/loadTemplateReviewBySlug";
 import messages from "../../../messages/en/index";
 import {
   CREATE_FLOW_FOOTER_BUTTON_CLASS,
@@ -48,6 +42,7 @@ import {
   CUSTOM_RULE_CONFIRM_FOOTER_STEP_BY_STEP,
   type CustomRuleConfirmFooterStep,
 } from "./utils/customRuleConfirmFooterSteps";
+import { getDefaultFooterLabel } from "./utils/createFlowFooterLabels";
 import { useAuthModal } from "../../contexts/AuthModalContext";
 import { useMessages, useTranslation } from "../../contexts/MessagesContext";
 import { PostLoginDraftTransfer } from "./PostLoginDraftTransfer";
@@ -86,12 +81,14 @@ function CreateFlowSessionShell({ children }: { children: ReactNode }) {
   return (
     <CreateFlowProvider enableLocalDraftMirroring={enableLocalDraftMirroring}>
       <CreateFlowDraftSaveBannerProvider>
-        <CreateFlowLayoutContent
-          sessionUser={sessionUser}
-          sessionResolved={sessionResolved}
-        >
-          {children}
-        </CreateFlowLayoutContent>
+        <Suspense fallback={null}>
+          <CreateFlowLayoutContent
+            sessionUser={sessionUser}
+            sessionResolved={sessionResolved}
+          >
+            {children}
+          </CreateFlowLayoutContent>
+        </Suspense>
       </CreateFlowDraftSaveBannerProvider>
     </CreateFlowProvider>
   );
@@ -120,6 +117,7 @@ function CreateFlowLayoutContent({
     previousStep,
     goToNextStep,
     goToPreviousStep,
+    templateReviewFooterBackToCreateReview,
   } = useCreateFlowNavigation(
     skipCommunitySave ? { skipCommunitySave: true } : undefined,
   );
@@ -127,14 +125,6 @@ function CreateFlowLayoutContent({
     useCreateFlow();
   const { draftSaveBannerMessage, setDraftSaveBannerMessage } =
     useCreateFlowDraftSaveBanner();
-  const [publishBannerMessage, setPublishBannerMessage] = useState<
-    string | null
-  >(null);
-  const [isPublishing, setIsPublishing] = useState(false);
-  const [templateReviewApplyError, setTemplateReviewApplyError] = useState<
-    string | null
-  >(null);
-  const [isApplyingTemplate, setIsApplyingTemplate] = useState(false);
   const [communitySaveMagicLinkSubmitting, setCommunitySaveMagicLinkSubmitting] =
     useState(false);
   const [communitySaveMagicLinkError, setCommunitySaveMagicLinkError] = useState<
@@ -143,211 +133,28 @@ function CreateFlowLayoutContent({
   const [communitySaveMagicLinkSuccess, setCommunitySaveMagicLinkSuccess] =
     useState(false);
 
-  const templateReviewMatch = pathname?.match(
-    /\/create\/review-template\/([^/?#]+)/,
-  );
-  const templateReviewSlug = templateReviewMatch?.[1]
-    ? decodeURIComponent(templateReviewMatch[1])
-    : null;
-  /** Match anywhere in path so locale/basePath variants still get template footer + layout. */
-  const isTemplateReviewRoute = Boolean(
-    pathname?.includes("/create/review-template/"),
-  );
+  const {
+    publishBannerMessage,
+    setPublishBannerMessage,
+    isPublishing,
+    finalize: handleFinalize,
+  } = useCreateFlowFinalize({ state, router, openLogin });
 
-  const handleFinalize = useCallback(async () => {
-    setPublishBannerMessage(null);
-    const payloadResult = buildPublishPayload(state);
-    if (payloadResult.ok === false) {
-      setPublishBannerMessage(
-        payloadResult.error === "missingCommunityName"
-          ? messages.create.reviewAndComplete.publish.missingCommunityName
-          : payloadResult.error,
-      );
-      return;
-    }
-    const { title, summary, document: ruleDocument } = payloadResult;
-    setIsPublishing(true);
-    const publishResult = await publishRule({
-      title,
-      summary,
-      document: ruleDocument,
-    });
-    setIsPublishing(false);
-    if (publishResult.ok === true) {
-      writeLastPublishedRule({
-        id: publishResult.id,
-        title,
-        summary: summary ?? null,
-        document: ruleDocument,
-      });
-      router.push("/create/completed");
-      return;
-    }
-    if (publishResult.status === 401) {
-      openLogin({
-        variant: "default",
-        nextPath: "/create/final-review?syncDraft=1",
-        backdropVariant: "blurredYellow",
-      });
-      return;
-    }
-    setPublishBannerMessage(
-      publishResult.error.trim() !== ""
-        ? publishResult.error
-        : messages.create.reviewAndComplete.publish.genericPublishFailed,
-    );
-  }, [state, router, openLogin]);
-
-  /**
-   * Customize flow from a template-review page. Applies the template's
-   * customize selections onto `CreateFlowState` so the custom-rule screens
-   * render with chips pre-highlighted, then routes to `core-values` once
-   * the community name is set — otherwise to `informational` with a
-   * `pendingTemplateAction` pin so `/create/review` later redirects past
-   * itself straight to `core-values` (see `CommunityReviewScreen`).
-   *
-   * Why title alone? Other community-stage fields (e.g.
-   * `communityStructureChipSnapshots`) are sticky once the user lands on
-   * those screens, so they can't reliably answer "has the user given us
-   * real input yet?". A non-empty community name is the minimum bar
-   * `buildPublishPayload` already enforces — we reuse that here.
-   *
-   * Direct entry (marketing home "Popular templates" or `/templates`
-   * landed on directly) wipes the anonymous draft at the *click site* via
-   * `clearCreateFlowPersistedDrafts` before navigating, so `state.title`
-   * is empty here and the no-community branch fires naturally. No
-   * URL-marker plumbing needed in this handler.
-   */
-  const handleCustomizeTemplate = useCallback(async () => {
-    if (!templateReviewSlug) return;
-    setTemplateReviewApplyError(null);
-    setIsApplyingTemplate(true);
-    const loaded = await loadTemplateReviewBySlug(templateReviewSlug);
-    setIsApplyingTemplate(false);
-    if (loaded.ok === false) {
-      setTemplateReviewApplyError(loaded.message);
-      return;
-    }
-    const prefill = buildTemplateCustomizePrefill(loaded.template.body);
-    const hasCommunityName =
-      typeof state.title === "string" && state.title.trim().length > 0;
-    // Prefill merges (shallow) with current state. When we have to bounce the
-    // user to the community stage first, pin a pendingTemplateAction so
-    // `/create/review` knows to skip past itself to `core-values` later.
-    updateState({
-      ...prefill,
-      ...(hasCommunityName
-        ? { pendingTemplateAction: undefined }
-        : {
-            pendingTemplateAction: {
-              slug: templateReviewSlug,
-              mode: "customize",
-            },
-          }),
-    });
-    router.push(
-      hasCommunityName ? "/create/core-values" : "/create/informational",
-    );
-  }, [router, state.title, templateReviewSlug, updateState]);
-
-  /**
-   * "Use without changes" from a template-review page. Drops users into the
-   * review-and-complete stage (`confirm-stakeholders` → `final-review`) so the
-   * publish flow — and its server-enforced sign-in gate (`publishRule` 401 →
-   * `openLogin`) — is reused. The template body becomes the rule document;
-   * the user's community name remains the rule title.
-   *
-   * Community-name branch: apply template body/summary immediately and jump
-   * to `confirm-stakeholders`.
-   *
-   * No-community-name branch: same template body/summary apply so state is
-   * ready, plus a `pendingTemplateAction` pin so `/create/review` later
-   * redirects past itself straight to `confirm-stakeholders` once community
-   * data is captured (see `CommunityReviewScreen`). Users aren't forced back
-   * through the template picker just to pick the same template again.
-   *
-   * Direct entry (marketing home "Popular templates" or `/templates`
-   * landed on directly) wipes the anonymous draft at the click site via
-   * `clearCreateFlowPersistedDrafts` before navigating, so `state.title`
-   * is empty and the no-community branch fires naturally.
-   */
-  const handleUseTemplateWithoutChanges = useCallback(async () => {
-    if (!templateReviewSlug) return;
-    setTemplateReviewApplyError(null);
-
-    setIsApplyingTemplate(true);
-    const loaded = await loadTemplateReviewBySlug(templateReviewSlug);
-    setIsApplyingTemplate(false);
-    if (loaded.ok === false) {
-      setTemplateReviewApplyError(loaded.message);
-      return;
-    }
-    const { template } = loaded;
-    const doc = template.body;
-    if (!doc || typeof doc !== "object" || Array.isArray(doc)) {
-      setTemplateReviewApplyError(messages.create.templateReview.errors.applyFailed);
-      return;
-    }
-    const sectionsRaw = (doc as { sections?: unknown }).sections;
-    const sections = Array.isArray(sectionsRaw)
-      ? (sectionsRaw as Record<string, unknown>[])
-      : [];
-    if (sections.length === 0) {
-      setTemplateReviewApplyError(messages.create.templateReview.errors.applyFailed);
-      return;
-    }
-
-    // Using the template verbatim: scrub any prior customize picks so they
-    // don't bleed into `document.coreValues` at publish time.
-    resetCustomRuleSelections();
-
-    // Seed the core-values snapshot from the Values section so the
-    // final-review chip modal can edit them (it keys edits by chip id).
-    // The Values entries themselves are then dropped from `sections` to
-    // avoid publishing `document.coreValues` and `document.sections.Values`
-    // for the same data — matches the "Customize" path's data shape.
-    const coreValuesPrefill = buildCoreValuesPrefillFromTemplateBody(doc);
-    const sectionsWithoutValues =
-      Object.keys(coreValuesPrefill).length > 0
-        ? sections.filter((s) => {
-            const name = (s as { categoryName?: unknown }).categoryName;
-            if (typeof name !== "string") return true;
-            const key = name.toLowerCase().replace(/[^a-z]+/g, "");
-            return key !== "values" && key !== "corevalues";
-          })
-        : sections;
-
-    const summaryRaw =
-      typeof template.description === "string"
-        ? template.description.trim()
-        : "";
-    const hasCommunityName =
-      typeof state.title === "string" && state.title.trim().length > 0;
-    updateState({
-      ...coreValuesPrefill,
-      sections: sectionsWithoutValues,
-      ...(summaryRaw.length > 0 ? { summary: summaryRaw } : {}),
-      ...(hasCommunityName
-        ? { pendingTemplateAction: undefined }
-        : {
-            pendingTemplateAction: {
-              slug: templateReviewSlug,
-              mode: "useWithoutChanges",
-            },
-          }),
-    });
-    router.push(
-      hasCommunityName
-        ? "/create/confirm-stakeholders"
-        : "/create/informational",
-    );
-  }, [
+  const {
+    isTemplateReviewRoute,
+    templateReviewSlug,
+    isApplyingTemplate,
+    templateReviewApplyError,
+    setTemplateReviewApplyError,
+    handleCustomize: handleCustomizeTemplate,
+    handleUseWithoutChanges: handleUseTemplateWithoutChanges,
+  } = useTemplateReviewActions({
+    pathname,
+    state,
+    updateState,
     resetCustomRuleSelections,
     router,
-    state.title,
-    templateReviewSlug,
-    updateState,
-  ]);
+  });
 
   const runAuthenticatedExit = useCreateFlowExit({
     state,
@@ -499,80 +306,90 @@ function CreateFlowLayoutContent({
       ? CUSTOM_RULE_CONFIRM_FOOTER_STEP_BY_STEP.get(currentStep)
       : undefined;
 
-  const hasTopOverlays =
-    Boolean(draftSaveBannerMessage) ||
-    Boolean(publishBannerMessage) ||
-    Boolean(templateReviewApplyError) ||
-    Boolean(communitySaveMagicLinkError) ||
-    Boolean(communitySaveMagicLinkSuccess);
+  /**
+   * Top banner stack rendered above the main column when any of the
+   * shell-level statuses are active. Each entry maps to one `<Alert>`;
+   * we filter out empty messages so the wrapper only mounts when at
+   * least one banner is actually showing. Order here is the visual
+   * stacking order (top → bottom).
+   */
+  const topBanners: Array<{
+    key: string;
+    status: "danger" | "positive";
+    title: string;
+    description?: string;
+    onClose: () => void;
+  }> = [
+    draftSaveBannerMessage
+      ? {
+          key: "draftSave",
+          status: "danger" as const,
+          title: messages.create.topNav.draftSaveBannerTitle,
+          description: draftSaveBannerMessage,
+          onClose: () => setDraftSaveBannerMessage(null),
+        }
+      : null,
+    publishBannerMessage
+      ? {
+          key: "publish",
+          status: "danger" as const,
+          title:
+            messages.create.reviewAndComplete.publish.finalizeBannerTitle,
+          description: publishBannerMessage,
+          onClose: () => setPublishBannerMessage(null),
+        }
+      : null,
+    templateReviewApplyError
+      ? {
+          key: "templateApply",
+          status: "danger" as const,
+          title: messages.create.templateReview.errors.applyFailed,
+          description: templateReviewApplyError,
+          onClose: () => setTemplateReviewApplyError(null),
+        }
+      : null,
+    communitySaveMagicLinkError
+      ? {
+          key: "magicLinkError",
+          status: "danger" as const,
+          title: communitySaveMessages.magicLinkErrorTitle,
+          description: communitySaveMagicLinkError,
+          onClose: () => setCommunitySaveMagicLinkError(null),
+        }
+      : null,
+    communitySaveMagicLinkSuccess
+      ? {
+          key: "magicLinkSuccess",
+          status: "positive" as const,
+          title: communitySaveMessages.magicLinkSuccessTitle,
+          description: communitySaveMessages.magicLinkSuccessDescription,
+          onClose: () => setCommunitySaveMagicLinkSuccess(false),
+        }
+      : null,
+  ].filter((b): b is NonNullable<typeof b> => b !== null);
 
   return (
     <div className="relative flex h-screen min-h-0 flex-col overflow-hidden bg-black">
-      {hasTopOverlays ? (
+      {topBanners.length > 0 ? (
         <div
           className="pointer-events-none fixed left-0 right-0 top-0 z-[200] flex flex-col gap-2 px-[var(--spacing-measures-spacing-500,20px)] pt-[var(--spacing-measures-spacing-300,12px)] md:px-[var(--measures-spacing-1800,64px)]"
           aria-live="polite"
         >
-          {draftSaveBannerMessage ? (
-            <div className="pointer-events-auto mx-auto w-full max-w-[960px]">
+          {topBanners.map((b) => (
+            <div
+              key={b.key}
+              className="pointer-events-auto mx-auto w-full max-w-[960px]"
+            >
               <Alert
                 type="banner"
-                status="danger"
-                title={messages.create.topNav.draftSaveBannerTitle}
-                description={draftSaveBannerMessage}
-                onClose={() => setDraftSaveBannerMessage(null)}
+                status={b.status}
+                title={b.title}
+                description={b.description}
+                onClose={b.onClose}
                 className="w-full"
               />
             </div>
-          ) : null}
-          {publishBannerMessage ? (
-            <div className="pointer-events-auto mx-auto w-full max-w-[960px]">
-              <Alert
-                type="banner"
-                status="danger"
-                title={messages.create.reviewAndComplete.publish.finalizeBannerTitle}
-                description={publishBannerMessage}
-                onClose={() => setPublishBannerMessage(null)}
-                className="w-full"
-              />
-            </div>
-          ) : null}
-          {templateReviewApplyError ? (
-            <div className="pointer-events-auto mx-auto w-full max-w-[960px]">
-              <Alert
-                type="banner"
-                status="danger"
-                title={messages.create.templateReview.errors.applyFailed}
-                description={templateReviewApplyError}
-                onClose={() => setTemplateReviewApplyError(null)}
-                className="w-full"
-              />
-            </div>
-          ) : null}
-          {communitySaveMagicLinkError ? (
-            <div className="pointer-events-auto mx-auto w-full max-w-[960px]">
-              <Alert
-                type="banner"
-                status="danger"
-                title={communitySaveMessages.magicLinkErrorTitle}
-                description={communitySaveMagicLinkError}
-                onClose={() => setCommunitySaveMagicLinkError(null)}
-                className="w-full"
-              />
-            </div>
-          ) : null}
-          {communitySaveMagicLinkSuccess ? (
-            <div className="pointer-events-auto mx-auto w-full max-w-[960px]">
-              <Alert
-                type="banner"
-                status="positive"
-                title={communitySaveMessages.magicLinkSuccessTitle}
-                description={communitySaveMessages.magicLinkSuccessDescription}
-                onClose={() => setCommunitySaveMagicLinkSuccess(false)}
-                className="w-full"
-              />
-            </div>
-          ) : null}
+          ))}
         </div>
       ) : null}
       <Suspense fallback={null}>
@@ -755,23 +572,21 @@ function CreateFlowLayoutContent({
               >
                 {currentStep === "final-review"
                   ? isPublishing
-                    ? messages.create.reviewAndComplete.publish.finalizeButtonPublishing
+                    ? messages.create.reviewAndComplete.publish
+                        .finalizeButtonPublishing
                     : footer.finalizeCommunityRule
-                  : currentStep === "confirm-stakeholders"
-                    ? footer.confirmStakeholders
-                    : currentStep === "community-context"
-                      ? footer.confirmDescription
-                      : currentStep === "community-structure"
-                        ? footer.confirmDetails
-                        : currentStep === "community-size"
-                          ? footer.confirmMembers
-                          : footer.next}
+                  : getDefaultFooterLabel(currentStep, footer)}
               </Button>
             ) : null
           }
           onBackClick={
             isTemplateReviewRoute
-              ? () => router.push("/")
+              ? () =>
+                  router.push(
+                    templateReviewFooterBackToCreateReview
+                      ? "/create/review"
+                      : "/",
+                  )
               : previousStep
                 ? goToPreviousStep
                 : undefined
diff --git a/app/(app)/create/hooks/useCreateFlowFinalize.ts b/app/(app)/create/hooks/useCreateFlowFinalize.ts
new file mode 100644
index 0000000..603a008
--- /dev/null
+++ b/app/(app)/create/hooks/useCreateFlowFinalize.ts
@@ -0,0 +1,106 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { buildPublishPayload } from "../../../../lib/create/buildPublishPayload";
+import { publishRule } from "../../../../lib/create/api";
+import { writeLastPublishedRule } from "../../../../lib/create/lastPublishedRule";
+import messages from "../../../../messages/en/index";
+import type { CreateFlowState } from "../types";
+
+type AppRouterLike = { push: (_href: string) => void };
+
+type OpenLogin = (args: {
+  variant: "default" | "saveProgress";
+  nextPath: string;
+  backdropVariant: "blurredYellow";
+}) => void;
+
+export type UseCreateFlowFinalizeResult = {
+  /** Set when publish fails (validation, server error, or empty server message). Reset on each `finalize()` invocation. */
+  publishBannerMessage: string | null;
+  setPublishBannerMessage: (_message: string | null) => void;
+  /** True from the moment the publish request fires until the response resolves. */
+  isPublishing: boolean;
+  /**
+   * Build a publish payload from the current `CreateFlowState`, post it to
+   * `publishRule`, and route to `/create/completed` on success.
+   *
+   * Failure modes:
+   * - Payload validation fails → surface the localized banner message.
+   * - 401 from the API → re-open the login modal targeting `/create/final-review?syncDraft=1` so the user can retry post-auth.
+   * - Any other failure → show either the trimmed server message or a generic localized fallback.
+   */
+  finalize: () => Promise<void>;
+};
+
+/**
+ * Encapsulates the Final Review → publish flow that previously lived inline
+ * in `CreateFlowLayoutClient`. Keeps publish state (banner + in-flight flag)
+ * co-located with the publish handler so the layout shell only has to wire
+ * the resulting message into its banner stack.
+ */
+export function useCreateFlowFinalize({
+  state,
+  router,
+  openLogin,
+}: {
+  state: CreateFlowState;
+  router: AppRouterLike;
+  openLogin: OpenLogin;
+}): UseCreateFlowFinalizeResult {
+  const [publishBannerMessage, setPublishBannerMessage] = useState<
+    string | null
+  >(null);
+  const [isPublishing, setIsPublishing] = useState(false);
+
+  const finalize = useCallback(async () => {
+    setPublishBannerMessage(null);
+    const payloadResult = buildPublishPayload(state);
+    if (payloadResult.ok === false) {
+      setPublishBannerMessage(
+        payloadResult.error === "missingCommunityName"
+          ? messages.create.reviewAndComplete.publish.missingCommunityName
+          : payloadResult.error,
+      );
+      return;
+    }
+    const { title, summary, document: ruleDocument } = payloadResult;
+    setIsPublishing(true);
+    const publishResult = await publishRule({
+      title,
+      summary,
+      document: ruleDocument,
+    });
+    setIsPublishing(false);
+    if (publishResult.ok === true) {
+      writeLastPublishedRule({
+        id: publishResult.id,
+        title,
+        summary: summary ?? null,
+        document: ruleDocument,
+      });
+      router.push("/create/completed");
+      return;
+    }
+    if (publishResult.status === 401) {
+      openLogin({
+        variant: "default",
+        nextPath: "/create/final-review?syncDraft=1",
+        backdropVariant: "blurredYellow",
+      });
+      return;
+    }
+    setPublishBannerMessage(
+      publishResult.error.trim() !== ""
+        ? publishResult.error
+        : messages.create.reviewAndComplete.publish.genericPublishFailed,
+    );
+  }, [state, router, openLogin]);
+
+  return {
+    publishBannerMessage,
+    setPublishBannerMessage,
+    isPublishing,
+    finalize,
+  };
+}
diff --git a/app/(app)/create/hooks/useCreateFlowNavigation.ts b/app/(app)/create/hooks/useCreateFlowNavigation.ts
index 848e723..d9d7ebb 100644
--- a/app/(app)/create/hooks/useCreateFlowNavigation.ts
+++ b/app/(app)/create/hooks/useCreateFlowNavigation.ts
@@ -1,13 +1,18 @@
 "use client";
 
-import { usePathname, useRouter } from "next/navigation";
-import { useCallback } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useLayoutEffect, useMemo } from "react";
+import { useCreateFlow } from "../context/CreateFlowContext";
 import type { CreateFlowStep } from "../types";
 import {
   type CreateFlowNavigationOptions,
+  buildTemplateReviewHref,
   getNextStep,
   getPreviousStep,
   parseCreateFlowScreenFromPathname,
+  resolveCreateFlowBackTarget,
+  TEMPLATE_REVIEW_FROM_CREATE_FLOW_QUERY,
+  TEMPLATE_REVIEW_FROM_CREATE_FLOW_VALUE,
 } from "../utils/flowSteps";
 
 /**
@@ -25,7 +30,15 @@ const blurActiveElement = (): void => {
 /**
  * Hook for Create Rule Flow navigation.
  *
- * Resolves the active step from `/create/{screenId}` via {@link parseCreateFlowScreenFromPathname} (flowSteps).
+ * Resolves the active step from `/create/{screenId}` via
+ * {@link parseCreateFlowScreenFromPathname} (flowSteps). Footer Back uses
+ * {@link resolveCreateFlowBackTarget} so template **Use without changes**
+ * (which skips the custom-rule segment) returns to `/create/review-template/{slug}`
+ * from `confirm-stakeholders` instead of `conflict-management`.
+ *
+ * Template review footer Back uses {@link buildTemplateReviewHref}’s
+ * `?fromFlow=1` marker (and persisted `templateReviewEntryFromCreateFlow`) so
+ * users who came from `/create/review` return there instead of `/`.
  */
 export function useCreateFlowNavigation(
   options?: CreateFlowNavigationOptions,
@@ -38,15 +51,46 @@ export function useCreateFlowNavigation(
   canGoBack: () => boolean;
   nextStep: CreateFlowStep | null;
   previousStep: CreateFlowStep | null;
+  /** On `/create/review-template/…`, footer Back should go to `/create/review`. */
+  templateReviewFooterBackToCreateReview: boolean;
 } {
   const pathname = usePathname();
+  const searchParams = useSearchParams();
   const router = useRouter();
+  const { state, updateState } = useCreateFlow();
 
   const validStep = parseCreateFlowScreenFromPathname(pathname ?? null);
 
+  useLayoutEffect(() => {
+    if (!pathname?.includes("/create/review-template/")) return;
+    if (
+      searchParams.get(TEMPLATE_REVIEW_FROM_CREATE_FLOW_QUERY) !==
+      TEMPLATE_REVIEW_FROM_CREATE_FLOW_VALUE
+    ) {
+      return;
+    }
+    if (state.templateReviewEntryFromCreateFlow === true) return;
+    updateState({ templateReviewEntryFromCreateFlow: true });
+  }, [
+    pathname,
+    searchParams,
+    state.templateReviewEntryFromCreateFlow,
+    updateState,
+  ]);
+
   const nextStep = getNextStep(validStep, options);
   const previousStep = getPreviousStep(validStep, options);
 
+  const backTarget = useMemo(
+    () =>
+      resolveCreateFlowBackTarget(
+        validStep,
+        options,
+        state.templateReviewBackSlug,
+      ),
+    [validStep, options?.skipCommunitySave, state.templateReviewBackSlug],
+  );
+
   const goToNextStep = useCallback(() => {
     blurActiveElement();
     if (nextStep) {
@@ -56,10 +100,26 @@ export function useCreateFlowNavigation(
 
   const goToPreviousStep = useCallback(() => {
     blurActiveElement();
-    if (previousStep) {
-      router.push(`/create/${previousStep}`);
+    if (!backTarget) return;
+    if (backTarget.kind === "templateReview") {
+      router.push(
+        buildTemplateReviewHref(backTarget.slug, {
+          fromCreateWizard: state.templateReviewEntryFromCreateFlow === true,
+        }),
+      );
+      return;
     }
-  }, [router, previousStep]);
+    router.push(`/create/${backTarget.step}`);
+  }, [router, backTarget, state.templateReviewEntryFromCreateFlow]);
+
+  const templateReviewFooterBackToCreateReview = useMemo(
+    () =>
+      Boolean(state.templateReviewEntryFromCreateFlow) ||
+      (pathname?.includes("/create/review-template/") &&
+        searchParams.get(TEMPLATE_REVIEW_FROM_CREATE_FLOW_QUERY) ===
+          TEMPLATE_REVIEW_FROM_CREATE_FLOW_VALUE),
+    [state.templateReviewEntryFromCreateFlow, pathname, searchParams],
+  );
 
   const goToStep = useCallback(
     (step: CreateFlowStep) => {
@@ -70,7 +130,7 @@ export function useCreateFlowNavigation(
   );
 
   const canGoNext = useCallback(() => nextStep !== null, [nextStep]);
-  const canGoBack = useCallback(() => previousStep !== null, [previousStep]);
+  const canGoBack = useCallback(() => backTarget != null, [backTarget]);
 
   return {
     currentStep: validStep,
@@ -81,5 +141,6 @@ export function useCreateFlowNavigation(
     canGoBack,
     nextStep,
     previousStep,
+    templateReviewFooterBackToCreateReview,
   };
 }
diff --git a/app/(app)/create/hooks/useTemplateReviewActions.ts b/app/(app)/create/hooks/useTemplateReviewActions.ts
new file mode 100644
index 0000000..970f35c
--- /dev/null
+++ b/app/(app)/create/hooks/useTemplateReviewActions.ts
@@ -0,0 +1,208 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import {
+  buildCoreValuesPrefillFromTemplateBody,
+  buildTemplateCustomizePrefill,
+} from "../../../../lib/create/applyTemplatePrefill";
+import { loadTemplateReviewBySlug } from "../../../../lib/create/loadTemplateReviewBySlug";
+import messages from "../../../../messages/en/index";
+import type { CreateFlowState } from "../types";
+
+type AppRouterLike = { push: (_href: string) => void };
+type UpdateState = (_patch: Partial<CreateFlowState>) => void;
+
+export type UseTemplateReviewActionsResult = {
+  /** True iff the current pathname is a template-review route (locale/basePath tolerant). */
+  isTemplateReviewRoute: boolean;
+  /** Decoded slug parsed out of the template-review pathname, or null. */
+  templateReviewSlug: string | null;
+  /** True between the fetch start and resolution for either action. */
+  isApplyingTemplate: boolean;
+  /** Set when the template fetch failed or the body was malformed. Cleared at the start of each action. */
+  templateReviewApplyError: string | null;
+  setTemplateReviewApplyError: (_message: string | null) => void;
+  /**
+   * Customize: apply the template's selections onto state and route to
+   * `/create/core-values` (if community name is set) or `/create/informational`
+   * with a `pendingTemplateAction` pin so `/create/review` can later replace
+   * itself with `/create/core-values`.
+   */
+  handleCustomize: () => Promise<void>;
+  /**
+   * Use without changes: scrub any prior customize picks, seed the core-values
+   * snapshot from the template's Values section, drop that section from
+   * `state.sections`, and route to `/create/confirm-stakeholders` (or
+   * `/create/informational` with a pin to skip past `/create/review` to
+   * `/create/confirm-stakeholders` later).
+   */
+  handleUseWithoutChanges: () => Promise<void>;
+};
+
+/**
+ * Encapsulates the two template-review footer actions (Customize / Use
+ * without changes) plus the small amount of state they share (in-flight
+ * flag, error banner, parsed slug). Called from `CreateFlowLayoutClient`
+ * once; extracting it here keeps the layout shell focused on rendering
+ * rather than orchestrating template fetch + state seeding.
+ *
+ * @example
+ * const {
+ *   isTemplateReviewRoute,
+ *   templateReviewSlug,
+ *   isApplyingTemplate,
+ *   templateReviewApplyError,
+ *   setTemplateReviewApplyError,
+ *   handleCustomize,
+ *   handleUseWithoutChanges,
+ * } = useTemplateReviewActions({ pathname, state, updateState, resetCustomRuleSelections, router });
+ */
+export function useTemplateReviewActions({
+  pathname,
+  state,
+  updateState,
+  resetCustomRuleSelections,
+  router,
+}: {
+  pathname: string | null | undefined;
+  state: CreateFlowState;
+  updateState: UpdateState;
+  resetCustomRuleSelections: () => void;
+  router: AppRouterLike;
+}): UseTemplateReviewActionsResult {
+  const [isApplyingTemplate, setIsApplyingTemplate] = useState(false);
+  const [templateReviewApplyError, setTemplateReviewApplyError] = useState<
+    string | null
+  >(null);
+
+  const templateReviewSlug = useMemo(() => {
+    const m = pathname?.match(/\/create\/review-template\/([^/?#]+)/);
+    return m?.[1] ? decodeURIComponent(m[1]) : null;
+  }, [pathname]);
+
+  const isTemplateReviewRoute = Boolean(
+    pathname?.includes("/create/review-template/"),
+  );
+
+  const handleCustomize = useCallback(async () => {
+    if (!templateReviewSlug) return;
+    setTemplateReviewApplyError(null);
+    setIsApplyingTemplate(true);
+    const loaded = await loadTemplateReviewBySlug(templateReviewSlug);
+    setIsApplyingTemplate(false);
+    if (loaded.ok === false) {
+      setTemplateReviewApplyError(loaded.message);
+      return;
+    }
+    const prefill = buildTemplateCustomizePrefill(loaded.template.body);
+    const hasCommunityName =
+      typeof state.title === "string" && state.title.trim().length > 0;
+    updateState({
+      ...prefill,
+      templateReviewBackSlug: undefined,
+      ...(hasCommunityName
+        ? { pendingTemplateAction: undefined }
+        : {
+            pendingTemplateAction: {
+              slug: templateReviewSlug,
+              mode: "customize",
+            },
+          }),
+    });
+    router.push(
+      hasCommunityName ? "/create/core-values" : "/create/informational",
+    );
+  }, [router, state.title, templateReviewSlug, updateState]);
+
+  const handleUseWithoutChanges = useCallback(async () => {
+    if (!templateReviewSlug) return;
+    setTemplateReviewApplyError(null);
+    setIsApplyingTemplate(true);
+    const loaded = await loadTemplateReviewBySlug(templateReviewSlug);
+    setIsApplyingTemplate(false);
+    if (loaded.ok === false) {
+      setTemplateReviewApplyError(loaded.message);
+      return;
+    }
+    const { template } = loaded;
+    const doc = template.body;
+    if (!doc || typeof doc !== "object" || Array.isArray(doc)) {
+      setTemplateReviewApplyError(
+        messages.create.templateReview.errors.applyFailed,
+      );
+      return;
+    }
+    const sectionsRaw = (doc as { sections?: unknown }).sections;
+    const sections = Array.isArray(sectionsRaw)
+      ? (sectionsRaw as Record<string, unknown>[])
+      : [];
+    if (sections.length === 0) {
+      setTemplateReviewApplyError(
+        messages.create.templateReview.errors.applyFailed,
+      );
+      return;
+    }
+
+    // Using the template verbatim: scrub any prior customize picks so they
+    // don't bleed into `document.coreValues` at publish time.
+    resetCustomRuleSelections();
+
+    // Seed the core-values snapshot from the Values section so the
+    // final-review chip modal can edit them (it keys edits by chip id).
+    // The Values entries themselves are then dropped from `sections` to
+    // avoid publishing `document.coreValues` and `document.sections.Values`
+    // for the same data — matches the "Customize" path's data shape.
+    const coreValuesPrefill = buildCoreValuesPrefillFromTemplateBody(doc);
+    const sectionsWithoutValues =
+      Object.keys(coreValuesPrefill).length > 0
+        ? sections.filter((s) => {
+            const name = (s as { categoryName?: unknown }).categoryName;
+            if (typeof name !== "string") return true;
+            const key = name.toLowerCase().replace(/[^a-z]+/g, "");
+            return key !== "values" && key !== "corevalues";
+          })
+        : sections;
+
+    const summaryRaw =
+      typeof template.description === "string"
+        ? template.description.trim()
+        : "";
+    const hasCommunityName =
+      typeof state.title === "string" && state.title.trim().length > 0;
+    updateState({
+      ...coreValuesPrefill,
+      sections: sectionsWithoutValues,
+      ...(summaryRaw.length > 0 ? { summary: summaryRaw } : {}),
+      templateReviewBackSlug: templateReviewSlug,
+      ...(hasCommunityName
+        ? { pendingTemplateAction: undefined }
+        : {
+            pendingTemplateAction: {
+              slug: templateReviewSlug,
+              mode: "useWithoutChanges",
+            },
+          }),
+    });
+    router.push(
+      hasCommunityName
+        ? "/create/confirm-stakeholders"
+        : "/create/informational",
+    );
+  }, [
+    resetCustomRuleSelections,
+    router,
+    state.title,
+    templateReviewSlug,
+    updateState,
+  ]);
+
+  return {
+    isTemplateReviewRoute,
+    templateReviewSlug,
+    isApplyingTemplate,
+    templateReviewApplyError,
+    setTemplateReviewApplyError,
+    handleCustomize,
+    handleUseWithoutChanges,
+  };
+}
diff --git a/app/(app)/create/screens/review/FinalReviewScreen.tsx b/app/(app)/create/screens/review/FinalReviewScreen.tsx
index 8de973a..ac585d2 100644
--- a/app/(app)/create/screens/review/FinalReviewScreen.tsx
+++ b/app/(app)/create/screens/review/FinalReviewScreen.tsx
@@ -15,6 +15,7 @@ import {
   buildFinalReviewCategoryRowsDetailed,
   type FinalReviewCategoryRowDetailed,
 } from "../../../../../lib/create/buildFinalReviewCategories";
+import { applyFinalReviewChipEditPatch } from "../../../../../lib/create/applyFinalReviewChipEditPatch";
 import type { TemplateChipDetail } from "../../../../../lib/create/templateReviewMapping";
 import {
   FinalReviewChipEditModal,
@@ -93,53 +94,7 @@ export function FinalReviewScreen() {
   const handleSave = useCallback(
     (patch: FinalReviewChipEditPatch) => {
       markCreateFlowInteraction();
-      switch (patch.groupKey) {
-        case "coreValues": {
-          updateState({
-            coreValueDetailsByChipId: {
-              ...(state.coreValueDetailsByChipId ?? {}),
-              [patch.overrideKey]: patch.value,
-            },
-          });
-          return;
-        }
-        case "communication": {
-          updateState({
-            communicationMethodDetailsById: {
-              ...(state.communicationMethodDetailsById ?? {}),
-              [patch.overrideKey]: patch.value,
-            },
-          });
-          return;
-        }
-        case "membership": {
-          updateState({
-            membershipMethodDetailsById: {
-              ...(state.membershipMethodDetailsById ?? {}),
-              [patch.overrideKey]: patch.value,
-            },
-          });
-          return;
-        }
-        case "decisionApproaches": {
-          updateState({
-            decisionApproachDetailsById: {
-              ...(state.decisionApproachDetailsById ?? {}),
-              [patch.overrideKey]: patch.value,
-            },
-          });
-          return;
-        }
-        case "conflictManagement": {
-          updateState({
-            conflictManagementDetailsById: {
-              ...(state.conflictManagementDetailsById ?? {}),
-              [patch.overrideKey]: patch.value,
-            },
-          });
-          return;
-        }
-      }
+      updateState(applyFinalReviewChipEditPatch(state, patch));
     },
     [markCreateFlowInteraction, updateState, state],
   );
diff --git a/app/(app)/create/types.ts b/app/(app)/create/types.ts
index 0f44c25..f65ed77 100644
--- a/app/(app)/create/types.ts
+++ b/app/(app)/create/types.ts
@@ -156,6 +156,23 @@ export interface CreateFlowState {
     slug: string;
     mode: "customize" | "useWithoutChanges";
   };
+  /**
+   * Set when the user chooses **Use without changes** on a template-review
+   * page. The custom-rule segment (`core-values` … `conflict-management`) is
+   * skipped, so linear `getPreviousStep("confirm-stakeholders")` would wrongly
+   * point at `conflict-management`. Navigation uses this slug so Back from
+   * `confirm-stakeholders` returns to `/create/review-template/{slug}`.
+   * Cleared when the user picks **Customize** from template review (normal
+   * linear back applies) or when the flow state is cleared.
+   */
+  templateReviewBackSlug?: string;
+  /**
+   * True when the user opened `/create/review-template/{slug}` from the create
+   * wizard (`/templates?fromFlow=1` after `/create/review`). Persisted so Back
+   * from template review targets `/create/review` and so returning from
+   * `confirm-stakeholders` can re-apply `?fromFlow=1` on the template URL.
+   */
+  templateReviewEntryFromCreateFlow?: boolean;
   currentStep?: CreateFlowStep;
   /** Section drafts; structure will tighten as steps persist real shapes. */
   sections?: Record<string, unknown>[];
diff --git a/app/(app)/create/utils/createFlowFooterLabels.ts b/app/(app)/create/utils/createFlowFooterLabels.ts
new file mode 100644
index 0000000..be3a82a
--- /dev/null
+++ b/app/(app)/create/utils/createFlowFooterLabels.ts
@@ -0,0 +1,38 @@
+import type footerMessages from "../../../../messages/en/create/footer.json";
+import type { CreateFlowStep } from "../types";
+
+type FooterMessages = typeof footerMessages;
+
+/**
+ * Per-step label override for the default "next-step" primary footer
+ * button (the catch-all branch in `CreateFlowLayoutClient`'s footer that
+ * fires `goToNextStep` for steps without a bespoke footer). Steps absent
+ * from this map fall back to `footer.next`.
+ *
+ * `final-review` is handled separately by the caller because its label
+ * also depends on the in-flight publish flag (`finalizeButtonPublishing`
+ * vs `finalizeCommunityRule`).
+ */
+const DEFAULT_FOOTER_LABEL_BY_STEP: ReadonlyMap<
+  CreateFlowStep,
+  keyof FooterMessages
+> = new Map<CreateFlowStep, keyof FooterMessages>([
+  ["confirm-stakeholders", "confirmStakeholders"],
+  ["community-context", "confirmDescription"],
+  ["community-structure", "confirmDetails"],
+  ["community-size", "confirmMembers"],
+]);
+
+/**
+ * Resolve the localized label for the default "next-step" footer button.
+ * Returns the per-step override when one is registered, otherwise
+ * `footer.next`. Caller still owns the `final-review` special case.
+ */
+export function getDefaultFooterLabel(
+  step: CreateFlowStep | null | undefined,
+  footer: FooterMessages,
+): string {
+  if (step == null) return footer.next;
+  const key = DEFAULT_FOOTER_LABEL_BY_STEP.get(step);
+  return key != null ? footer[key] : footer.next;
+}
diff --git a/app/(app)/create/utils/flowSteps.ts b/app/(app)/create/utils/flowSteps.ts
index fad4baa..bbb57e6 100644
--- a/app/(app)/create/utils/flowSteps.ts
+++ b/app/(app)/create/utils/flowSteps.ts
@@ -79,6 +79,32 @@ export function getPreviousStep(
   return prev;
 }
 
+/**
+ * Where the create-flow footer Back action should go. Usually the previous
+ * step in {@link FLOW_STEP_ORDER}; when the user reached `confirm-stakeholders`
+ * via template **Use without changes**, Back returns to template review instead
+ * of `conflict-management` (that segment was skipped).
+ */
+export type CreateFlowBackTarget =
+  | { kind: "step"; step: CreateFlowStep }
+  | { kind: "templateReview"; slug: string };
+
+export function resolveCreateFlowBackTarget(
+  currentStep: CreateFlowStep | null | undefined,
+  options: CreateFlowNavigationOptions | undefined,
+  templateReviewBackSlug: string | undefined | null,
+): CreateFlowBackTarget | null {
+  const slug =
+    typeof templateReviewBackSlug === "string"
+      ? templateReviewBackSlug.trim()
+      : "";
+  if (currentStep === "confirm-stakeholders" && slug.length > 0) {
+    return { kind: "templateReview", slug };
+  }
+  const prev = getPreviousStep(currentStep, options);
+  return prev != null ? { kind: "step", step: prev } : null;
+}
+
 /**
  * Returns the index of the step (0-based), or -1 if invalid
  */
@@ -118,3 +144,22 @@ export function parseCreateFlowScreenFromPathname(
 
   return isValidStep(segment) ? segment : null;
 }
+
+/** Same query as `/templates?fromFlow=1` — template was picked after `/create/review`. */
+export const TEMPLATE_REVIEW_FROM_CREATE_FLOW_QUERY = "fromFlow" as const;
+export const TEMPLATE_REVIEW_FROM_CREATE_FLOW_VALUE = "1" as const;
+
+/**
+ * `/create/review-template/{slug}` with optional marker so chrome can send
+ * footer Back to `/create/review` instead of marketing home.
+ */
+export function buildTemplateReviewHref(
+  slug: string,
+  options?: { fromCreateWizard?: boolean },
+): string {
+  const path = `/create/review-template/${encodeURIComponent(slug)}`;
+  if (options?.fromCreateWizard) {
+    return `${path}?${TEMPLATE_REVIEW_FROM_CREATE_FLOW_QUERY}=${TEMPLATE_REVIEW_FROM_CREATE_FLOW_VALUE}`;
+  }
+  return path;
+}
diff --git a/app/(marketing)/templates/TemplatesPageClient.tsx b/app/(marketing)/templates/TemplatesPageClient.tsx
index 6446208..f3cbe19 100644
--- a/app/(marketing)/templates/TemplatesPageClient.tsx
+++ b/app/(marketing)/templates/TemplatesPageClient.tsx
@@ -6,6 +6,7 @@ import HeaderLockup from "../../components/type/HeaderLockup";
 import { GovernanceTemplateGrid } from "../../components/sections/GovernanceTemplateGrid";
 import type { TemplateGridCardEntry } from "../../../lib/templates/templateGridPresentation";
 import { clearCreateFlowPersistedDrafts } from "../../(app)/create/utils/clearCreateFlowPersistedDrafts";
+import { buildTemplateReviewHref } from "../../(app)/create/utils/flowSteps";
 import { useTranslation } from "../../contexts/MessagesContext";
 
 export interface TemplatesPageClientProps {
@@ -88,7 +89,9 @@ function TemplatesGrid({
           // the user's community stage survives the detour through here.
           clearCreateFlowPersistedDrafts();
         }
-        router.push(`/create/review-template/${encodeURIComponent(slug)}`);
+        router.push(
+          buildTemplateReviewHref(slug, { fromCreateWizard: fromFlow }),
+        );
       }}
     />
   );
diff --git a/lib/create/applyFinalReviewChipEditPatch.ts b/lib/create/applyFinalReviewChipEditPatch.ts
new file mode 100644
index 0000000..72b3aa9
--- /dev/null
+++ b/lib/create/applyFinalReviewChipEditPatch.ts
@@ -0,0 +1,59 @@
+import type { CreateFlowState } from "../../app/(app)/create/types";
+import type { FinalReviewChipEditPatch } from "../../app/(app)/create/components/FinalReviewChipEditModal";
+
+/**
+ * Translate a {@link FinalReviewChipEditPatch} into the `Partial<CreateFlowState>`
+ * patch that {@link CreateFlowState}'s update merger should write back. Each
+ * group key targets its own `*DetailsById` (or `coreValueDetailsByChipId`)
+ * record; the patch always merges the new value onto the existing record so
+ * other chips' overrides are preserved.
+ *
+ * The `switch` is exhaustive because {@link FinalReviewChipEditPatch} is a
+ * discriminated union — adding a new facet group in the modal forces a new
+ * `case` here at compile time, which is the whole reason this lives outside
+ * `FinalReviewScreen` (the screen used to host an identical 5-case switch).
+ *
+ * Exported as a pure function so it's unit-testable without React.
+ */
+export function applyFinalReviewChipEditPatch(
+  state: CreateFlowState,
+  patch: FinalReviewChipEditPatch,
+): Partial<CreateFlowState> {
+  switch (patch.groupKey) {
+    case "coreValues":
+      return {
+        coreValueDetailsByChipId: {
+          ...(state.coreValueDetailsByChipId ?? {}),
+          [patch.overrideKey]: patch.value,
+        },
+      };
+    case "communication":
+      return {
+        communicationMethodDetailsById: {
+          ...(state.communicationMethodDetailsById ?? {}),
+          [patch.overrideKey]: patch.value,
+        },
+      };
+    case "membership":
+      return {
+        membershipMethodDetailsById: {
+          ...(state.membershipMethodDetailsById ?? {}),
+          [patch.overrideKey]: patch.value,
+        },
+      };
+    case "decisionApproaches":
+      return {
+        decisionApproachDetailsById: {
+          ...(state.decisionApproachDetailsById ?? {}),
+          [patch.overrideKey]: patch.value,
+        },
+      };
+    case "conflictManagement":
+      return {
+        conflictManagementDetailsById: {
+          ...(state.conflictManagementDetailsById ?? {}),
+          [patch.overrideKey]: patch.value,
+        },
+      };
+  }
+}
diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts
index 1ea208c..1876434 100644
--- a/lib/server/validation/createFlowSchemas.ts
+++ b/lib/server/validation/createFlowSchemas.ts
@@ -119,6 +119,8 @@ export const createFlowStateSchema = z
       })
       .strict()
       .optional(),
+    templateReviewBackSlug: z.string().max(200).optional(),
+    templateReviewEntryFromCreateFlow: z.boolean().optional(),
     currentStep: createFlowStepSchema.optional(),
     sections: z.array(z.unknown()).optional(),
     stakeholders: z.array(z.unknown()).optional(),
diff --git a/tests/pages/templates.test.jsx b/tests/pages/templates.test.jsx
index b9b881c..61ada5d 100644
--- a/tests/pages/templates.test.jsx
+++ b/tests/pages/templates.test.jsx
@@ -113,10 +113,10 @@ describe("Templates page (/templates)", () => {
     ).toBe(
       JSON.stringify({ "1": { meaning: "stale", signals: "stale" } }),
     );
-    // No `?fromFlow=1` on the outbound review-template URL — the marker
-    // only disambiguates /templates' own click behavior.
+    // In-flow picks also pass `?fromFlow=1` on the template review URL so
+    // footer Back on `/create/review-template/…` returns to `/create/review`.
     expect(testRouter.push).toHaveBeenCalledWith(
-      "/create/review-template/consensus",
+      "/create/review-template/consensus?fromFlow=1",
     );
   });
 });
diff --git a/tests/unit/applyFinalReviewChipEditPatch.test.ts b/tests/unit/applyFinalReviewChipEditPatch.test.ts
new file mode 100644
index 0000000..270061d
--- /dev/null
+++ b/tests/unit/applyFinalReviewChipEditPatch.test.ts
@@ -0,0 +1,127 @@
+import { describe, expect, it } from "vitest";
+import { applyFinalReviewChipEditPatch } from "../../lib/create/applyFinalReviewChipEditPatch";
+import type { CreateFlowState } from "../../app/(app)/create/types";
+import type { FinalReviewChipEditPatch } from "../../app/(app)/create/components/FinalReviewChipEditModal";
+
+describe("applyFinalReviewChipEditPatch", () => {
+  it("creates the coreValueDetailsByChipId record when missing", () => {
+    const patch: FinalReviewChipEditPatch = {
+      groupKey: "coreValues",
+      overrideKey: "accessibility",
+      value: { meaning: "Be welcoming.", signals: "Captions on videos." },
+    };
+
+    const result = applyFinalReviewChipEditPatch({}, patch);
+
+    expect(result).toEqual({
+      coreValueDetailsByChipId: {
+        accessibility: {
+          meaning: "Be welcoming.",
+          signals: "Captions on videos.",
+        },
+      },
+    });
+  });
+
+  it("merges into the existing record without dropping siblings", () => {
+    const state: CreateFlowState = {
+      communicationMethodDetailsById: {
+        signal: {
+          corePrinciple: "Stay async-first.",
+          logisticsAdmin: "Daily check-ins.",
+          codeOfConduct: "Be kind.",
+        },
+      },
+    };
+    const patch: FinalReviewChipEditPatch = {
+      groupKey: "communication",
+      overrideKey: "in-person-meetings",
+      value: {
+        corePrinciple: "Meet weekly.",
+        logisticsAdmin: "Hybrid format.",
+        codeOfConduct: "Listen actively.",
+      },
+    };
+
+    const result = applyFinalReviewChipEditPatch(state, patch);
+
+    expect(result.communicationMethodDetailsById).toEqual({
+      signal: {
+        corePrinciple: "Stay async-first.",
+        logisticsAdmin: "Daily check-ins.",
+        codeOfConduct: "Be kind.",
+      },
+      "in-person-meetings": {
+        corePrinciple: "Meet weekly.",
+        logisticsAdmin: "Hybrid format.",
+        codeOfConduct: "Listen actively.",
+      },
+    });
+  });
+
+  it("overwrites the same key when the user re-saves it", () => {
+    const state: CreateFlowState = {
+      membershipMethodDetailsById: {
+        "open-access": {
+          eligibility: "Anyone",
+          joiningProcess: "Sign up",
+          expectations: "Old expectations",
+        },
+      },
+    };
+    const patch: FinalReviewChipEditPatch = {
+      groupKey: "membership",
+      overrideKey: "open-access",
+      value: {
+        eligibility: "Anyone over 18",
+        joiningProcess: "Sign up + intro call",
+        expectations: "New expectations",
+      },
+    };
+
+    const result = applyFinalReviewChipEditPatch(state, patch);
+
+    expect(result.membershipMethodDetailsById?.["open-access"]).toEqual({
+      eligibility: "Anyone over 18",
+      joiningProcess: "Sign up + intro call",
+      expectations: "New expectations",
+    });
+  });
+
+  it("routes decisionApproaches to its dedicated state field", () => {
+    const patch: FinalReviewChipEditPatch = {
+      groupKey: "decisionApproaches",
+      overrideKey: "lazy-consensus",
+      value: {
+        corePrinciple: "Silence implies assent.",
+        applicableScope: ["budget"],
+        selectedApplicableScope: ["budget"],
+        stepByStepInstructions: "Propose. Wait 72h.",
+        consensusLevel: 0.66,
+        objectionsDeadlocks: "Escalate to vote.",
+      },
+    };
+
+    const result = applyFinalReviewChipEditPatch({}, patch);
+
+    expect(Object.keys(result)).toEqual(["decisionApproachDetailsById"]);
+  });
+
+  it("routes conflictManagement to its dedicated state field", () => {
+    const patch: FinalReviewChipEditPatch = {
+      groupKey: "conflictManagement",
+      overrideKey: "peer-mediation",
+      value: {
+        corePrinciple: "Restore trust.",
+        applicableScope: ["interpersonal"],
+        selectedApplicableScope: ["interpersonal"],
+        processProtocol: "Pair the parties with a neutral facilitator.",
+        restorationFallbacks: "Council escalation.",
+      },
+    };
+
+    const result = applyFinalReviewChipEditPatch({}, patch);
+
+    expect(Object.keys(result)).toEqual(["conflictManagementDetailsById"]);
+  });
+});
diff --git a/tests/unit/createFlowValidation.test.ts b/tests/unit/createFlowValidation.test.ts
index ec47882..4675d60 100644
--- a/tests/unit/createFlowValidation.test.ts
+++ b/tests/unit/createFlowValidation.test.ts
@@ -112,6 +112,20 @@ describe("createFlowStateSchema", () => {
     expect(r.success).toBe(true);
   });
 
+  it("accepts templateReviewBackSlug", () => {
+    const r = createFlowStateSchema.safeParse({
+      templateReviewBackSlug: "mutual-aid-mondays",
+    });
+    expect(r.success).toBe(true);
+  });
+
+  it("accepts templateReviewEntryFromCreateFlow", () => {
+    const r = createFlowStateSchema.safeParse({
+      templateReviewEntryFromCreateFlow: true,
+    });
+    expect(r.success).toBe(true);
+  });
+
   it("rejects core value detail strings that are too long", () => {
     const r = createFlowStateSchema.safeParse({
       coreValueDetailsByChipId: {
diff --git a/tests/unit/flowSteps.test.ts b/tests/unit/flowSteps.test.ts
index 36a02b7..bd10248 100644
--- a/tests/unit/flowSteps.test.ts
+++ b/tests/unit/flowSteps.test.ts
@@ -1,10 +1,12 @@
 import { describe, it, expect } from "vitest";
 import {
   FLOW_STEP_ORDER,
+  buildTemplateReviewHref,
   getNextStep,
   getPreviousStep,
   isValidStep,
   getStepIndex,
+  resolveCreateFlowBackTarget,
 } from "../../app/(app)/create/utils/flowSteps";
 
 describe("flowSteps", () => {
@@ -72,4 +74,33 @@ describe("flowSteps", () => {
     expect(getNextStep("review", opts)).toBe("core-values");
     expect(getPreviousStep("communication-methods", opts)).toBe("core-values");
   });
+
+  it("resolveCreateFlowBackTarget returns template review when use-without slug is set on confirm-stakeholders", () => {
+    expect(
+      resolveCreateFlowBackTarget(
+        "confirm-stakeholders",
+        undefined,
+        "mutual-aid-mondays",
+      ),
+    ).toEqual({ kind: "templateReview", slug: "mutual-aid-mondays" });
+  });
+
+  it("resolveCreateFlowBackTarget falls back to linear previous when slug is absent", () => {
+    expect(
+      resolveCreateFlowBackTarget("confirm-stakeholders", undefined, undefined),
+    ).toEqual({ kind: "step", step: "conflict-management" });
+  });
+
+  it("resolveCreateFlowBackTarget ignores whitespace-only slug", () => {
+    expect(
+      resolveCreateFlowBackTarget("confirm-stakeholders", undefined, "   "),
+    ).toEqual({ kind: "step", step: "conflict-management" });
+  });
+
+  it("buildTemplateReviewHref encodes slug and optional fromFlow query", () => {
+    expect(buildTemplateReviewHref("a/b")).toBe("/create/review-template/a%2Fb");
+    expect(buildTemplateReviewHref("mutual-aid", { fromCreateWizard: true })).toBe(
+      "/create/review-template/mutual-aid?fromFlow=1",
+    );
+  });
 });

From b01a49bc186ea82ac624da3f1f38351140971b4e Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 20 Apr 2026 22:35:46 -0600
Subject: [PATCH 15/15] Update docs

---
 CONTRIBUTING.md                               |   6 +-
 docs/create-flow.md                           |   8 +-
 docs/guides/backend-linear-tickets.md         | 130 ++++++++++--------
 docs/guides/backend-roadmap.md                |  10 +-
 docs/guides/template-recommendation-matrix.md |  19 ++-
 5 files changed, 95 insertions(+), 78 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 985deb3..3231c04 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -33,7 +33,9 @@ Use `npx prisma studio` to inspect the database.
 | POST | `/api/auth/logout` | Clear session. |
 | GET / PUT | `/api/drafts/me` | Load or save the create-flow draft. |
 | GET / POST | `/api/rules` | List or publish rules. |
-| GET | `/api/templates` | List curated templates. |
+| GET | `/api/templates` | List curated templates. Optional repeatable `facet.<group>=<value>` query params re-rank results (and may include `scores` in the JSON). See [docs/guides/template-recommendation-matrix.md](docs/guides/template-recommendation-matrix.md) §9.1. |
+| GET | `/api/create-flow/methods` | Facet-aware scores for custom-rule card steps: required `section` (`communication` \| `membership` \| `decisionApproaches` \| `conflictManagement`) and optional `facet.*` params (same facet groups as `/api/templates`). Returns `methods` with match metadata for re-ordering in the wizard. |
+| POST / GET | `/api/web-vitals` | Ingest or read aggregated web vitals (file-based store under `.next` today; not ideal for multi-instance — see [docs/guides/backend-roadmap.md](docs/guides/backend-roadmap.md) §7). |
 
 ### Magic-link sign-in
 
@@ -55,7 +57,7 @@ and signed-in progress stays in memory until **Save & Exit**.
 
 The custom wizard lives under `/create/…`. Step order, URLs, and Figma
 stage mapping are canon in [docs/create-flow.md](docs/create-flow.md).
-Engineering tracking: Linear **CR-89** /
+Engineering tracking: Linear **CR-89** (**Done**) /
 [docs/guides/backend-linear-tickets.md](docs/guides/backend-linear-tickets.md)
 Ticket 17.
 
diff --git a/docs/create-flow.md b/docs/create-flow.md
index 0003f40..4482f6b 100644
--- a/docs/create-flow.md
+++ b/docs/create-flow.md
@@ -1,6 +1,6 @@
 # Create rule flow (custom wizard) — canonical reference
 
-Product/engineering reference for the **custom** “Create rule” experience: URL order, persistence, and entry points. **Implementation work** to align code with this doc (progress bar, resume redirects, etc.) is tracked in Linear **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** and [docs/guides/backend-linear-tickets.md](guides/backend-linear-tickets.md) **Ticket 17**.
+Product/engineering reference for the **custom** “Create rule” experience: URL order, persistence, and entry points. **Canon wizard** alignment (docs, `[screenId]` routing, footer progress) shipped under **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** (**Done**). **Draft resume vs profile**, server hydration, and “new rule” vs **continue draft** are tracked with **[CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile)** (profile dashboard). See also [docs/guides/backend-linear-tickets.md](guides/backend-linear-tickets.md) **Ticket 17**.
 
 ---
 
@@ -90,9 +90,9 @@ Details and edge cases (conflict confirm, banners, `?syncDraft=1`) match **Ticke
 
 ---
 
-## Known implementation gaps (tracked on CR-89)
+## Known implementation gaps (tracked on CR-86)
 
-- **URL vs `currentStep` in saved draft:** hydration may merge server JSON without redirecting to `state.currentStep`; confirm product behavior and fix or document.
+- **Server draft + URL alignment:** `SignedInDraftHydration` may merge server JSON without navigating to the saved step; **profile** will own listing drafts, **Continue** at last step, and **New rule** vs stale server draft — see **[CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile)** (“Rule drafts + create-flow resume”).
 - **Inner “text/select shells”:** deferred until Create Community is stable; screens use **`CreateFlowStepShell`** only for Stage 1.
 
 ---
@@ -100,4 +100,4 @@ Details and edge cases (conflict confirm, banners, `?syncDraft=1`) match **Ticke
 ## Related docs
 
 - [docs/guides/backend-roadmap.md](guides/backend-roadmap.md) §12 — Frontend hook-up
-- [docs/guides/backend-linear-tickets.md](guides/backend-linear-tickets.md) — Tickets 4, 5, 6, 17
+- [docs/guides/backend-linear-tickets.md](guides/backend-linear-tickets.md) — Tickets 4, 5, 6, 17; profile/drafts — Ticket 15 / **CR-86**
diff --git a/docs/guides/backend-linear-tickets.md b/docs/guides/backend-linear-tickets.md
index 720fd75..e7e3983 100644
--- a/docs/guides/backend-linear-tickets.md
+++ b/docs/guides/backend-linear-tickets.md
@@ -8,6 +8,13 @@ Copy each block into Linear (or your tracker) as a separate issue, **in order**.
 
 A backend review was merged into **[docs/backend-roadmap.md](backend-roadmap.md)** after checking the repo. **Incorporated:** custom session lifecycle follow-ups (not a mandate to adopt Auth.js/Lucia), **passwordless email (magic-link request)** rate limits in-memory until multi-instance + shared store, `RuleDraft` already has `updatedAt` (no migration to add it), **prefer external web vitals** over product Postgres by default, API error shape + request-id observability targets, **authorization v1** aligned with `app/api/rules`, Prisma **never edit applied migrations**, **profile / my rules / account** scope from Figma profile (`22143:900069`) as **Ticket 15** (change email deferred). **Excluded:** requiring NextAuth/Lucia; “add `updatedAt` on drafts”; hard ban on DB for vitals (softened to default external). **Parallel Linear issues:** **CR-84** (API errors — **unblocked** now that **CR-73** is Done), **CR-85** (session lifecycle — **unblocked** now that **CR-75** is Done)—see **Linear** table at the end of this doc.
 
+### Audit note (Linear CR-72+ vs repo, 2026-04)
+
+- **Done in Linear and shipped:** **CR-72–CR-76**, **CR-77** (publish from create flow), **CR-78** (template seed), **CR-79**, **CR-88**, **CR-89**. The **CR-72 → CR-83** numbering is the original **sequential plan**, not current blocking order; the **core product vertical** through publish + templates is effectively complete in-repo.
+- **Backlog (still open):** **CR-80** (web vitals — file-based route remains), **CR-81** (public rule detail — no `GET /api/rules/[id]` or marketing detail page yet), **CR-82** (CI migrate smoke), **CR-83** (no `docs/ops-backend-deploy.md` yet), **CR-84** / **CR-85** (parallel hygiene), **CR-86** (profile + account + draft resume — UI mostly placeholder), **CR-90** / **CR-91**, **CR-93** (template grid facets on marketing).
+- **CR-86** is **no longer blocked** by publish — **CR-77** is **Done**; profile work is gated by **implementation**, not waiting on publish wiring.
+- **Not in this ticket list** but called out in **[docs/backend-roadmap.md](backend-roadmap.md):** shared **rate-limit store** (e.g. Redis) before multi-instance; **`GET /api/create-flow/methods`** exists for facet scoring (Ticket 16 / CR-88) but is not duplicated as a separate doc ticket.
+
 ---
 
 ## When you need server / admin access (and for what)
@@ -210,21 +217,23 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Completing the flow persists a **PublishedRule** via existing [publishRule](lib/create/api.ts).
 
-**Context:** [lib/create/api.ts](lib/create/api.ts) already wraps `POST /api/rules`. UI on the `final-review` / `completed` steps (see [app/(app)/create/screens/CreateFlowScreenView.tsx](app/(app)/create/screens/CreateFlowScreenView.tsx) and `app/(app)/create/screens/`) must call it with `{ title, summary?, document }` derived from `CreateFlowState`.
+**Context:** [lib/create/api.ts](lib/create/api.ts) wraps `POST /api/rules` with Zod-validated body (Ticket 2). Finalize flows through [useCreateFlowFinalize](app/(app)/create/hooks/useCreateFlowFinalize.ts) from [CreateFlowLayoutClient](app/(app)/create/CreateFlowLayoutClient.tsx) (`final-review` → `publishRule` → `/create/completed`).
 
-**Implementation:**
+**Implementation (shipped):**
 
-1. Map `useCreateFlow().state` → `title` / `summary` / `document` (document likely mirrors [CommunityRuleDocument](app/components/sections/CommunityRuleDocument/) shape or raw JSON).
-2. Call `publishRule` on explicit user action (“Publish” / “Finalize”) or on transition to `completed` (product decision—prefer explicit button to avoid double-submit).
-3. Handle **401**: redirect or modal to sign-in (Ticket 3).
-4. Success: navigate to `completed` with rule id in query or state; optional confetti per design.
+1. Map `CreateFlowState` → `title` / `summary` / `document` via [buildPublishPayload](lib/create/buildPublishPayload.ts) (and related builders).
+2. Call `publishRule` on explicit **Finalize** from `final-review` ([useCreateFlowFinalize](app/(app)/create/hooks/useCreateFlowFinalize.ts)).
+3. **401** → `openLogin` with return path (Ticket 3 / `AuthModalProvider`).
+4. Success: navigate to `completed` with rule id in query string.
 
 **Acceptance criteria:**
 
-- [ ] Published row appears in Postgres (`PublishedRule`) and `GET /api/rules` lists it.
-- [ ] User sees clear success/failure.
+- [x] Published row appears in Postgres (`PublishedRule`) and `GET /api/rules` lists it.
+- [x] User sees clear success/failure (banner / flow state; see finalize hook).
 
-**Files:** relevant `app/(app)/create/*/page.tsx`, [lib/create/api.ts](lib/create/api.ts) if request shape changes, types from Ticket 2.
+**Files:** [app/(app)/create/hooks/useCreateFlowFinalize.ts](app/(app)/create/hooks/useCreateFlowFinalize.ts), [CreateFlowLayoutClient.tsx](app/(app)/create/CreateFlowLayoutClient.tsx), [app/api/rules/route.ts](app/api/rules/route.ts), [lib/create/api.ts](lib/create/api.ts), [lib/create/buildPublishPayload.ts](lib/create/buildPublishPayload.ts).
+
+**Status:** [CR-77](https://linear.app/community-rule/issue/CR-77/backend-wire-publish-rule-from-create-flow-post-apirules) **Done**.
 
 ---
 
@@ -234,7 +243,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Curated templates exist in DB for recommendations (v1 = static curated list, no ML).
 
-**Not in v1 (this ticket):** **Spreadsheet-authored matrices**, multi-axis **facet filtering**, or **ranked** recommendations from user answers — that is **Ticket 16 / [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-xlsx-sheets-ingestion)** after the flat list ships.
+**Not in v1 (this ticket):** **Facet-based method/template intelligence** beyond a flat curated list — that work is **Ticket 16 / [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-facet-data-seed-and-apis-no)** (facet data + APIs + wizard method ranking). **Template marketing grids** ranked by user facets are **[CR-93](https://linear.app/community-rule/issue/CR-93/product-rank-template-cards-by-community-facets-reuse-get-apitemplates)** (product/UI follow-up).
 
 **Implementation:**
 
@@ -245,11 +254,13 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Acceptance criteria:**
 
-- [ ] `GET /api/templates` returns non-empty `templates` after seed on empty DB.
-- [ ] Re-running seed does not duplicate rows.
+- [x] `GET /api/templates` returns non-empty `templates` after seed on empty DB.
+- [x] Re-running seed does not duplicate rows.
 
 **Files:** `prisma/seed.ts`, [package.json](package.json), [CONTRIBUTING.md](CONTRIBUTING.md).
 
+**Status:** [CR-78](https://linear.app/community-rule/issue/CR-78/backend-prisma-seed-ruletemplate-document) **Done**.
+
 ---
 
 ## Ticket 8 — Load rule templates from the API in the UI
@@ -258,50 +269,52 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Home or create entry surfaces use live template data instead of only static i18n JSON.
 
-**Context:** [RuleStack.view.tsx](app/components/sections/RuleStack/RuleStack.view.tsx) and create entry surfaces reference future template work. Wizard URLs are static segments under `app/(app)/create/`; see [`docs/create-flow.md`](create-flow.md) and **Ticket 17** for the canonical custom flow.
+**Context:** [RuleStack.view.tsx](app/components/sections/RuleStack/RuleStack.view.tsx) renders cards from API-shaped grid entries. The custom wizard uses [`app/(app)/create/[screenId]/page.tsx`](app/(app)/create/[screenId]/page.tsx) and [`docs/create-flow.md`](create-flow.md) (**Ticket 17**).
 
-**Implementation:**
+**Implementation (shipped):**
 
-1. Add a small client or server data fetch to `GET /api/templates` (RSC `fetch` with cache tags, or client `useEffect` with loading skeleton—match existing data-fetch patterns in the app).
-2. Map API rows to existing card components; keep i18n for chrome strings (“See all templates”).
-3. Empty state: if API returns `[]`, fall back to static copy or hide section per design.
+1. **Server-first paint:** [MarketingRuleStackSection](app/(marketing)/_components/MarketingRuleStackSection.tsx) loads rows via `listRuleTemplatesFromDb` and passes `initialGridEntries` into [RuleStack.container.tsx](app/components/sections/RuleStack/RuleStack.container.tsx) (avoids client fetch on LCP-critical home).
+2. **Client fetch:** [lib/create/fetchTemplates.ts](lib/create/fetchTemplates.ts) when `initialGridEntries` is not provided (`GET /api/templates`, credentials, abort); catalog fallback on error/empty.
+3. **Templates index:** [app/(marketing)/templates/page.tsx](app/(marketing)/templates/page.tsx) server-loads the full grid for first paint.
+4. **Empty / error:** Fallback presentation via [templateGridPresentation.ts](lib/templates/templateGridPresentation.ts) + catalog slugs.
 
 **Acceptance criteria:**
 
-- [ ] Changing a template row in Prisma Studio reflects after refresh (or revalidate).
-- [ ] No layout shift regression on LCP-critical pages (use skeletons).
+- [x] Changing a template row in the DB reflects after refresh (SSR path) or client refetch where the client path is used.
+- [x] No layout shift regression on LCP-critical pages: dynamic `RuleStack` loading shell + server-provided `initialGridEntries` on home.
 
-**Files:** [app/components/sections/RuleStack/](app/components/sections/RuleStack/), create-flow entry routes under [app/(app)/create/](app/(app)/create/), possibly new `lib/templates/fetchTemplates.ts`.
+**Files:** [app/components/sections/RuleStack/](app/components/sections/RuleStack/), [app/(marketing)/_components/MarketingRuleStackSection.tsx](app/(marketing)/_components/MarketingRuleStackSection.tsx), [app/(marketing)/templates/](app/(marketing)/templates/), [lib/create/fetchTemplates.ts](lib/create/fetchTemplates.ts), [lib/templates/templateGridPresentation.ts](lib/templates/templateGridPresentation.ts).
 
-**Follow-up:** **Ticket 16** — dynamic recommendations from authoring spreadsheets and create-flow answers.
+**Follow-up:** **[CR-93](https://linear.app/community-rule/issue/CR-93/product-rank-template-cards-by-community-facets-reuse-get-apitemplates)** — rank marketing template cards by community facets (API already supports `facet.*`; UI wiring is product work).
+
+**Status:** [CR-79](https://linear.app/community-rule/issue/CR-79/backend-load-rule-templates-from-get-apitemplates-in-ui) **Done**.
 
 ---
 
-## Ticket 16 — Template recommendation matrix + spreadsheet ingestion
+## Ticket 16 — Template recommendation matrix (facet data + APIs; no xlsx import)
 
-**Depends on:** Tickets 7–8 (templates exist in DB and UI can fetch them). Can overlap **Ticket 6** (create flow) for wizard steps that POST answers.
+**Depends on:** Tickets 7–8 (templates exist in DB and UI can fetch them).
 
-**Goal:** Support **dynamic** template selection driven by **authoring spreadsheets** (e.g. Excel / Google Sheets exported to `.xlsx`): each **row** is a template variant with long-form copy (title, description, principles, steps, objections); **columns** encode **matching dimensions** (group size bands, organization type, location, maturity, etc.) with symbols or weights (✓/✗, 0–1 scores). The create flow (or home) should **narrow or rank** options from **user-supplied facets** or a short questionnaire.
+**Goal:** **Facet-aware recommendations** for **methods** in the create-flow card decks, and **API-level** ranking for **templates** when `facet.*` query params are present — without a runtime `.xlsx` / SheetJS import (authoring stays **committed JSON** + Prisma seed, with spreadsheets as optional one-time offline references only).
 
-**Context:** The current [`RuleTemplate`](prisma/schema.prisma) model is a **flat** list (`slug`, `title`, `category`, `description`, `body` JSON). It does **not** model dimension columns, matrix versioning, or import from sheets. Example product shape: a “Decision-making” workbook → many governance patterns, each row tied to applicability across org context.
+**Context:** [`RuleTemplate`](prisma/schema.prisma) remains a list row per template; facet match data for **methods** lives in `MethodFacet` (seeded from `data/create/customRule/*.json`). See [template-recommendation-matrix.md](template-recommendation-matrix.md).
 
-**Implementation (phased — product can stop after any phase):**
+**Implementation (shipped):**
 
-1. **Authoring contract:** Document required columns / sheet tabs (per domain: decision-making, meetings, etc.), validation rules, and how ✓/✗ or numeric cells map to API filters or scores.
-2. **Storage:** Either extend `RuleTemplate` / `body` with a structured `recommendationMatrix` blob **or** add normalized tables (`TemplateDimension`, `TemplateFacetValue`, `TemplateApplicability`) — pick based on query needs and reporting.
-3. **Import:** Script or internal admin path: `.xlsx` → parse (e.g. `xlsx` / SheetJS) → validate → upsert DB rows or generate seed JSON checked into repo. **Default:** batch job on export, **not** live Sheets API in prod unless explicitly required.
-4. **API:** Extend `GET /api/templates` with optional query params (`?facet.orgType=nonprofit&facet.size=6-12`) **or** add `POST /api/templates/recommend` with a JSON body of answers; return ranked `templates` + optional `scores` / `reasons` for UI.
-5. **UI:** Create-flow step(s) collect facets; call API; prefill `CreateFlowState` or document JSON from chosen row’s `body`.
+1. **Authoring contract + storage:** Zod-validated JSON under `data/create/customRule/`; seed into `MethodFacet` (and related); documented in template-recommendation-matrix.md.
+2. **APIs:** `GET /api/templates?facet.*` returns `{ templates, scores? }`; `GET /api/create-flow/methods?section=…&facet.*` returns methods with match scores for card re-ranking.
+3. **UI (wizard):** `useFacetRecommendations` + `rankMethodsByScore` / `deriveCompactCards` on the custom-rule card / right-rail steps (recommended methods).
+4. **Not shipped here:** **Marketing template grids** (home, `/templates`) still call `GET /api/templates` **without** facets — product/UI follow-up **[CR-93](https://linear.app/community-rule/issue/CR-93/product-rank-template-cards-by-community-facets-reuse-get-apitemplates)**. **Automated tests** for template ranking via `/api/templates` are **deferred to CR-93** with that UI work.
 
 **Acceptance criteria:**
 
-- [ ] Importing an updated workbook (or running the importer) changes recommendations without hand-editing Prisma rows in Studio.
-- [ ] API behavior is documented (params or POST body) and covered by tests for at least one reference matrix.
-- [ ] Invalid / partial facet combinations degrade gracefully (empty list vs fallback featured templates).
+- [x] Updating committed facet JSON + re-seeding changes recommendations without hand-editing arbitrary Prisma rows for facet data.
+- [x] API behavior documented in template-recommendation-matrix.md §9; facet parsing / method route covered by tests; template ranking tests deferred per CR-93.
+- [x] Invalid / partial facet combinations degrade gracefully (curated / score-0 fallbacks).
 
-**Files (expected):** `prisma/schema.prisma`, `lib/templates/*` or `scripts/import-templates-xlsx.ts`, `app/api/templates/*`, create-flow pages, tests.
+**Files:** [prisma/schema.prisma](prisma/schema.prisma), [data/create/customRule/](data/create/customRule/), [app/api/templates/route.ts](app/api/templates/route.ts), [app/api/create-flow/methods/route.ts](app/api/create-flow/methods/route.ts), [lib/server/ruleTemplates.ts](lib/server/ruleTemplates.ts), [lib/server/validation/methodFacetsSchemas.ts](lib/server/validation/methodFacetsSchemas.ts), [app/(app)/create/hooks/useFacetRecommendations.ts](app/(app)/create/hooks/useFacetRecommendations.ts), [docs/guides/template-recommendation-matrix.md](template-recommendation-matrix.md).
 
-**Linear:** [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-xlsx-sheets-ingestion) (**Backlog**). **Parallel** to much of the core chain; **blocked** only by having **CR-78**/**CR-79** far enough along that a template list exists (or stub rows).
+**Status:** [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-facet-data-seed-and-apis-no) **Done**.
 
 ---
 
@@ -317,22 +330,20 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 1. Keep [`docs/create-flow.md`](create-flow.md) in sync with product/Figma (stage ↔ step mapping, future template routes).
 2. ~~Remove legacy [`app/(app)/create/[step]/page.tsx`](app/(app)/create/[step]/page.tsx)~~ — replaced by [`app/(app)/create/[screenId]/page.tsx`](app/(app)/create/[screenId]/page.tsx) with real screens; unknown slugs `notFound()`.
-3. Unify **step source of truth**: URL via [`useCreateFlowNavigation`](app/(app)/create/hooks/useCreateFlowNavigation.ts) vs unused [`CreateFlowContext`](app/(app)/create/context/CreateFlowContext.tsx) `currentStep` — pick one model; align [`useCreateFlowExit`](app/(app)/create/hooks/useCreateFlowExit.ts) / draft payload if needed.
-4. **Resume:** After [`SignedInDraftHydration`](app/(app)/create/SignedInDraftHydration.tsx), decide redirect to `/create/${state.currentStep}` vs stay on current URL; test or document.
-5. Wire [`CreateFlowFooter`](app/components/utility/CreateFlowFooter/) `ProportionBar` to step progress from `FLOW_STEP_ORDER` (and `review-template` / `completed` exceptions per design); optional **two-level progress** (stage + step within stage) when design specifies.
-6. When Figma hands off, surface **stage labels** in create shell (top nav, footer, or step chrome) using the mapping in `create-flow.md`.
+3. ~~Unify **step source of truth** / **resume after `SignedInDraftHydration`~~ — moved to **[CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile)** (profile lists drafts, continue at last step, new rule vs server draft; see `docs/create-flow.md` known gaps).
+4. Wire [`CreateFlowFooter`](app/components/utility/CreateFlowFooter/) `ProportionBar` to step progress from `FLOW_STEP_ORDER` (and `review-template` / `completed` exceptions per design); optional **two-level progress** (stage + step within stage) when design specifies.
+5. When Figma hands off, surface **stage labels** in create shell (top nav, footer, or step chrome) using the mapping in `create-flow.md`.
 
 **Acceptance criteria:**
 
-- [ ] [`docs/create-flow.md`](create-flow.md) matches shipped behavior or lists known gaps, including **Figma three-stage** mapping and **future template route** note.
-- [ ] No misleading dynamic step placeholder for valid wizard URLs.
-- [ ] Footer progress reflects step index **or** doc/issue records a deliberate deferral with design sign-off.
-- [ ] Hydration + `currentStep` behavior is verified (redirect vs stay).
-- [ ] Template **Customize** prefill is documented (maps template body to `selected*Ids` + `coreValuesChipsSnapshot`, routes to `core-values` when Community has data else `informational`); full template-customize-from-mid-wizard entry beyond `core-values` stays deferred.
+- [x] [`docs/create-flow.md`](create-flow.md) matches shipped behavior or lists known gaps, including **Figma three-stage** mapping and **future template route** note; draft/hydration follow-ups point to **CR-86**.
+- [x] No misleading dynamic step placeholder for valid wizard URLs.
+- [x] Footer progress reflects step index via `getProportionBarProgressForCreateFlowStep` (optional stage labels still Figma-dependent).
+- [x] Template **Customize** prefill is documented (maps template body to `selected*Ids` + `coreValuesChipsSnapshot`, routes to `core-values` when Community has data else `informational`); full template-customize-from-mid-wizard entry beyond `core-values` stays deferred.
 
 **Files:** [`docs/create-flow.md`](create-flow.md), [`app/(app)/create/`](app/(app)/create/), [`app/components/utility/CreateFlowFooter/`](app/components/utility/CreateFlowFooter/), optionally [`docs/backend-roadmap.md`](backend-roadmap.md) §12 cross-links.
 
-**Linear:** [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo) (**Backlog**). **Parallel** to templates (7–8) and publish (6); not part of **CR-72 → CR-83**.
+**Linear:** [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo) **Done**. Open-ended draft/hydration work: **[CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile)**. **Parallel** to templates (7–8) and publish (6); not part of **CR-72 → CR-83**.
 
 ---
 
@@ -468,7 +479,9 @@ _Section B — Final Review screen `+` button per category:_
 - [ ] Production with read-only filesystem does not break vitals collection path.
 - [ ] Monitor page still useful or intentionally replaced with a doc link.
 
-**Files:** [app/api/web-vitals/route.ts](app/api/web-vitals/route.ts), [app/(admin)/monitor/](<app/(admin)/monitor/page.tsx>) (adjust paths as needed), optionally `prisma/schema.prisma` **only if** option C.
+**Files:** [app/api/web-vitals/route.ts](app/api/web-vitals/route.ts), [app/(admin)/monitor/page.tsx](app/(admin)/monitor/page.tsx), optionally `prisma/schema.prisma` **only if** option C.
+
+**Repo check (2026-04):** Route still **writes files under `.next/web-vitals`** — **CR-80** remains applicable.
 
 ---
 
@@ -486,6 +499,8 @@ _Section B — Final Review screen `+` button per category:_
 2. Add `app/(marketing)/rules/[id]/page.tsx` (or under `create` if private) rendering `document` JSON with existing document components.
 3. Consider soft-delete flag later; out of scope unless product requires hide.
 
+**Repo check (2026-04):** Only [`app/api/rules/route.ts`](app/api/rules/route.ts) exists (list + POST); **no** `app/api/rules/[id]/` handler yet — **CR-81** still open.
+
 **Acceptance criteria:**
 
 - [ ] UUID/cuid from Ticket 6 opens a readable page for anonymous users.
@@ -599,7 +614,7 @@ _Section B — Final Review screen `+` button per category:_
 
 ## Ticket 15 — Profile dashboard + account (Figma profile)
 
-**Depends on:** Ticket 3 (auth), **Ticket 4** (session in UI), **Ticket 6** (publish so users have rules to list). Soft optional: Tickets 7–8 for “create from template” CTA parity.
+**Depends on:** Ticket 3 (auth), **Ticket 4** (session in UI), **Ticket 6** (**CR-77** publish — **Done** — so real published rules exist for “my rules”). Soft optional: Tickets 7–8 for “create from template” CTA parity.
 
 **Goal:** Signed-in **profile** experience matching [Figma — Profile](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22143-900069): **Your CommunityRules** (list **own** published rules), **duplicate** / **delete** per rule, CTAs into create flow (custom + from template), **logout** (existing API), **delete account** (policy + API + confirmation UX).
 
@@ -627,7 +642,7 @@ _Section B — Final Review screen `+` button per category:_
 
 **Files:** new `app/` routes and components, `app/api/rules/...` (or new segment handlers), [lib/create/api.ts](lib/create/api.ts) as needed, [prisma/schema.prisma](prisma/schema.prisma) only if account-delete policy requires schema tweaks, [messages/en/](messages/en/) for copy.
 
-**Linear:** [CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile) (**Backlog**). **Blocked by** **CR-77** (publish) only — **CR-75** Done. **Related:** [CR-81](https://linear.app/community-rule/issue/CR-81/backend-public-rule-detail-page-get-apirulesid-optional) (public rule detail for deep links from profile cards). **Not** part of the sequential **CR-72 → CR-83** chain—parallel after publish + session, similar to CR-84/CR-85.
+**Linear:** [CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile) (**Backlog**). **Publish prerequisite:** **CR-77** **Done** — not blocked on wiring. **Related:** [CR-81](https://linear.app/community-rule/issue/CR-81/backend-public-rule-detail-page-get-apirulesid-optional) (public rule detail for deep links from profile cards). **Not** part of the sequential **CR-72 → CR-83** chain—parallel after session, similar to CR-84/CR-85. **Also on CR-86:** draft list + resume + hydration alignment (moved from CR-89).
 
 ---
 
@@ -650,18 +665,20 @@ _Section B — Final Review screen `+` button per category:_
 |    13 | 13     | API errors + request-id logging   |
 |    14 | 14     | Session lifecycle + cleanup       |
 |    15 | 15     | Profile + account (Figma profile) |
-|    16 | 16     | Template matrix + xlsx ingestion  |
+|    16 | 16     | Template matrix (facets; no xlsx) |
 |    17 | 17     | Canon create-flow (custom path)     |
 |    18 | 18     | Stakeholder invites (confirm-stakeholders) |
 |    19 | 19     | `Add` button behavior (custom-rule pages + Final Review) |
 
-Tickets **10–11** can be deferred without blocking the core “auth + drafts + publish + templates” vertical slice. **Ticket 16** is also **deferrable** until after **7–8** (flat template list + UI); it adds **spreadsheet-driven** recommendations and facet APIs. **Ticket 17** (**[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)**) canonizes the **custom** wizard in [`docs/create-flow.md`](create-flow.md) and tracks UX/code alignment (progress bar, resume URL, `[step]` cleanup); **parallel** to publish and templates. **Tickets 13–14** are parallel to that chain (**CR-73** / **CR-75** prerequisites are **Done** — **CR-84** / **CR-85** are unblocked), not sequential after CR-83. **Ticket 15** is also **parallel** (blocked by **publish (CR-77)** once session/auth are shipped); Linear: **CR-86**. **Ticket 18** (**[CR-90](https://linear.app/community-rule/issue/CR-90/productbackend-invite-stakeholders-email-from-confirm-stakeholders)**) adds real **email-based stakeholder invites** to the `confirm-stakeholders` step — currently ships as a label-only chip list despite copy promising invites; **parallel** to the main chain, awaits design + product brief before implementation. **Ticket 19** (**[CR-91](https://linear.app/community-rule/issue/CR-91/productdesign-add-button-behavior-on-custom-rule-pages-and-final)**) is a **product/design** clarification ticket: the `Add` affordance is inconsistent across custom-rule pages (full custom-chip flow only on `core-values`; an `add` link that just expands the card stack on the four card-style pages) and the Final Review screen renders a `+` button per category that today is a no-op; needs a brief + Figma before any implementation lands.
+**Follow-up (no doc ticket #):** **[CR-93](https://linear.app/community-rule/issue/CR-93/product-rank-template-cards-by-community-facets-reuse-get-apitemplates)** — marketing template grids ranked by user facets (API-ready; tests deferred with that issue).
+
+Tickets **10–11** can be deferred without blocking the core “auth + drafts + publish + templates” vertical slice. **Ticket 6 / CR-77** (publish) is **Done**. **Ticket 16** / **CR-88** (facet data + APIs + wizard method ranking) shipped **after 7–8**; **CR-93** tracks **marketing** template grids ranked by user facets (API-ready). **Ticket 17** / **CR-89** (**[Done](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)**) canonizes the **custom** wizard in [`docs/create-flow.md`](create-flow.md) (progress bar, `[screenId]` routing). **Draft resume / hydration** follow-ups: **CR-86**. **Tickets 13–14** are parallel (**CR-84** / **CR-85** — **Backlog**). **Ticket 15 / CR-86** is **parallel** (publish prerequisite met); implementation backlog. **Ticket 18** (**[CR-90](https://linear.app/community-rule/issue/CR-90/productbackend-invite-stakeholders-email-from-confirm-stakeholders)**) adds real **email-based stakeholder invites** to the `confirm-stakeholders` step — currently ships as a label-only chip list despite copy promising invites; **parallel** to the main chain, awaits design + product brief before implementation. **Ticket 19** (**[CR-91](https://linear.app/community-rule/issue/CR-91/productdesign-add-button-behavior-on-custom-rule-pages-and-final)**) is a **product/design** clarification ticket: the `Add` affordance is inconsistent across custom-rule pages (full custom-chip flow only on `core-values`; an `add` link that just expands the card stack on the four card-style pages) and the Final Review screen renders a `+` button per category that today is a no-op; needs a brief + Figma before any implementation lands.
 
 ---
 
 ## Linear (Community-rule team)
 
-**Main chain:** **CR-72 → CR-83** (each blocks the next). **Parallel:** **CR-84** (**CR-73** Done — ready to pick up), **CR-85** (**CR-75** Done — ready to pick up), **CR-86** / Ticket 15 (blocked by **CR-77** publish only; **CR-75** Done), **CR-88** / Ticket 16 (template matrix + `.xlsx` ingestion — after **CR-78**/**CR-79**), **CR-89** / Ticket 17 (canon create-flow + implementation gaps), **CR-90** / Ticket 18 (stakeholder invites — product/design brief unblocked; implementation waits on **CR-73** / **CR-74** / **CR-75** / **CR-77**), **CR-91** / Ticket 19 (`Add` button behavior on custom-rule pages and Final Review chips — pure product/design clarification, no technical blockers), none in the CR-72–83 sequence.
+**Main chain (historical):** **CR-72 → CR-83** was the original **strict sequence**; **repo + Linear status today:** **CR-72–CR-79**, **CR-88**, **CR-89** are **Done**; **CR-77** (publish) **Done**; **CR-80–CR-83** remain **Backlog** (web vitals, public rule detail, CI migrate smoke, ops runbook — optional / ops tail). **Parallel:** **CR-84**, **CR-85** (**Backlog**); **CR-86** / Ticket 15 (**Backlog** — publish **not** a blocker); **CR-93** (**Backlog**); **CR-90** / Ticket 18 (stakeholder invites); **CR-91** / Ticket 19 (`Add` button behavior).
 
 | Doc ticket | Linear                                                                                                                      | Title (short)                           |
 | ---------: | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
@@ -670,8 +687,8 @@ Tickets **10–11** can be deferred without blocking the core “auth + drafts +
 |          3 | [CR-74](https://linear.app/community-rule/issue/CR-74/backend-magic-link-sign-in-ui-apis-ticket-3-cr-75-done)               | Magic-link sign-in UI (Ticket 3; Done)  |
 |          4 | [CR-75](https://linear.app/community-rule/issue/CR-75/backend-create-flow-session-ui-sign-out-ticket-4-done)                | Create flow session UI (Ticket 4; Done) |
 |          5 | [CR-76](https://linear.app/community-rule/issue/CR-76/backend-harden-server-draft-sync-save-and-exit-post-login-transfer)   | Draft sync hardening (PUT UX / errors)  |
-|          6 | [CR-77](https://linear.app/community-rule/issue/CR-77/backend-wire-publish-rule-from-create-flow-post-apirules)             | Publish wiring                          |
-|          7 | [CR-78](https://linear.app/community-rule/issue/CR-78/backend-prisma-seed-ruletemplate-document)                            | Template seed                           |
+|          6 | [CR-77](https://linear.app/community-rule/issue/CR-77/backend-wire-publish-rule-from-create-flow-post-apirules)             | Publish wiring **Done**                 |
+|          7 | [CR-78](https://linear.app/community-rule/issue/CR-78/backend-prisma-seed-ruletemplate-document)                            | Template seed **Done**                  |
 |          8 | [CR-79](https://linear.app/community-rule/issue/CR-79/backend-load-rule-templates-from-get-apitemplates-in-ui)              | Templates in UI                         |
 |          9 | [CR-80](https://linear.app/community-rule/issue/CR-80/backend-persist-web-vitals-outside-next-db-or-external-rum)           | Web vitals (prefer external)            |
 |         10 | [CR-81](https://linear.app/community-rule/issue/CR-81/backend-public-rule-detail-page-get-apirulesid-optional)              | Public rule detail (optional)           |
@@ -680,8 +697,9 @@ Tickets **10–11** can be deferred without blocking the core “auth + drafts +
 |         13 | [CR-84](https://linear.app/community-rule/issue/CR-84/backend-api-error-contract-request-id-logging)                        | API errors + request-id logging         |
 |         14 | [CR-85](https://linear.app/community-rule/issue/CR-85/backend-custom-session-lifecycle-cleanup-invalidation-policy)         | Session lifecycle + cleanup             |
 |         15 | [CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile)                      | Profile + account (Figma 22143:900069)  |
-|         16 | [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-xlsx-sheets-ingestion)         | Template matrix + xlsx ingestion        |
-|         17 | [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)   | Canon create-flow (custom wizard + docs) |
+|         16 | [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-facet-data-seed-and-apis-no)         | Template matrix (facets; no xlsx)        |
+|         17 | [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)   | Canon create-flow (custom wizard + docs) **Done** |
+|          — | [CR-93](https://linear.app/community-rule/issue/CR-93/product-rank-template-cards-by-community-facets-reuse-get-apitemplates) | Template grid + facet ranking (product)   |
 |         18 | [CR-90](https://linear.app/community-rule/issue/CR-90/productbackend-invite-stakeholders-email-from-confirm-stakeholders)    | Stakeholder invites (confirm-stakeholders) |
 |         19 | [CR-91](https://linear.app/community-rule/issue/CR-91/productdesign-add-button-behavior-on-custom-rule-pages-and-final)      | `Add` button behavior (custom-rule + Final Review) |
 
diff --git a/docs/guides/backend-roadmap.md b/docs/guides/backend-roadmap.md
index a9b3dd6..3c3ec32 100644
--- a/docs/guides/backend-roadmap.md
+++ b/docs/guides/backend-roadmap.md
@@ -15,7 +15,7 @@ Temporary working notes for building the backend. Safe to delete once the stack
 
 ### HTTP API (implemented in repo)
 
-Mirrors [CONTRIBUTING.md](../CONTRIBUTING.md) **API routes** table; handlers live under `app/api/*/route.ts`.
+Mirrors [CONTRIBUTING.md](../CONTRIBUTING.md) **API routes** table (including `/api/templates` facet params, `/api/create-flow/methods`, and `/api/web-vitals`); handlers live under `app/api/*/route.ts`.
 
 | Method     | Path                           | Purpose                                       |
 | ---------- | ------------------------------ | --------------------------------------------- |
@@ -26,12 +26,12 @@ Mirrors [CONTRIBUTING.md](../CONTRIBUTING.md) **API routes** table; handlers liv
 | POST       | `/api/auth/logout`             | Clear session                                 |
 | GET / PUT  | `/api/drafts/me`               | Load or save create-flow JSON (authenticated) |
 | GET / POST | `/api/rules`                   | List or publish rules                         |
-| GET        | `/api/templates`               | List curated templates                        |
+| GET        | `/api/templates`               | List curated templates; optional `facet.*` re-ranks (see [template-recommendation-matrix.md](template-recommendation-matrix.md)) |
+| GET        | `/api/create-flow/methods`      | Facet scores for wizard method lists (`section` + optional `facet.*`) |
+| POST / GET | `/api/web-vitals`              | Web vitals ingest / aggregate (file-based under `.next` today; production path §7) |
 
 **Product sign-in** uses **magic link** (`/api/auth/magic-link/*`).
 
-**Also present (not in CONTRIBUTING table):** `POST` / `GET` [`/api/web-vitals`](../app/api/web-vitals/route.ts) — file-based store today; production path TBD (§7).
-
 ### HTTP API (profile / account — not implemented yet)
 
 Planned for the signed-in profile/dashboard ([Figma profile frame](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22143-900069); [docs/backend-linear-tickets.md](backend-linear-tickets.md) Ticket 15; Linear **[CR-86](https://linear.app/community-rule/issue/CR-86/backend-profile-dashboard-account-figma-profile)**):
@@ -82,7 +82,7 @@ Plain-English entities (names can evolve):
 | **PublishedRule**  | Saved rule after publish (title, summary, document JSON). Profile UI badges such as **IN PROGRESS** may be **derived from `document` JSON**, a future `status` column, or UI-only—product decision when implementing Ticket 15.                              |
 | **RuleTemplate**   | Curated templates (slug, category, ordering, `body` JSON). **v1 API** lists rows for cards / create entry; **not** yet a recommendation engine (see below).                                                                                                  |
 
-**RuleTemplate — recommendation matrix (after v1 list):** Product may author templates in **spreadsheets** (e.g. one row per governance pattern, columns for **matching dimensions** such as group size, organization type, location, maturity, plus long-form fields for create-flow prefill). That implies: **normalized schema or versioned JSON** for dimensions × template fit (✓/✗, weights, or scores), an **import path** (export `.xlsx` / Sheets → validate → DB or build-time artifact), and **`GET /api/templates` (or a sibling route)** that accepts **user- or wizard-selected facets** and returns a **ranked or filtered** set. **Out of scope for first ship** of Tickets 7–8 (seed + display list); tracked as **Ticket 16** in [docs/backend-linear-tickets.md](backend-linear-tickets.md) and Linear **[CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-xlsx-sheets-ingestion)**. Prefer **batch import** over live Google Sheets API in production unless ops explicitly wants sync.
+**RuleTemplate — recommendation matrix (after v1 list):** Product may author templates in **spreadsheets** (e.g. one row per governance pattern, columns for **matching dimensions** such as group size, organization type, location, maturity, plus long-form fields for create-flow prefill). That implies: **normalized schema or versioned JSON** for dimensions × template fit (✓/✗, weights, or scores), an **import path** (export `.xlsx` / Sheets → validate → DB or build-time artifact), and **`GET /api/templates` (or a sibling route)** that accepts **user- or wizard-selected facets** and returns a **ranked or filtered** set. **Out of scope for first ship** of Tickets 7–8 (seed + display list); tracked as **Ticket 16** in [docs/backend-linear-tickets.md](backend-linear-tickets.md) and Linear **[CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-facet-data-seed-and-apis-no)** (**Done** — committed JSON + seed; no runtime `.xlsx`). Prefer **batch import** over live Google Sheets API in production unless ops explicitly wants sync.
 
 **Session follow-ups to implement or decide:** token **rotation** on sensitive events, whether **new login invalidates other sessions**, and **cleanup** of expired `Session` rows (job or lazy delete). Revisit a small auth library (e.g. Auth.js, Lucia) only if maintaining custom code becomes costly.
 
diff --git a/docs/guides/template-recommendation-matrix.md b/docs/guides/template-recommendation-matrix.md
index af7ef63..1958e85 100644
--- a/docs/guides/template-recommendation-matrix.md
+++ b/docs/guides/template-recommendation-matrix.md
@@ -1,21 +1,19 @@
 # Recommendation Matrix — Implementation Context (CR-88)
 
 **Status:** Implemented (CR-88). This doc remains the spec — keep code in sync with it.
-**Linear:** [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-xlsx-sheets-ingestion)
+**Linear:** [CR-88](https://linear.app/community-rule/issue/CR-88/backend-template-recommendation-matrix-facet-data-seed-and-apis-no) (**Done** — no `.xlsx` import; authoring = committed JSON + seed).
+**Follow-up (UI):** [CR-93](https://linear.app/community-rule/issue/CR-93/product-rank-template-cards-by-community-facets-reuse-get-apitemplates) — pass facets into marketing template fetches so grids rank like the wizard; template ranking **tests** ship with CR-93.
 **Roadmap:** [`docs/guides/backend-roadmap.md`](backend-roadmap.md) §4 (`RuleTemplate`) and §13.
 **Spec ticket:** [`docs/guides/backend-linear-tickets.md`](backend-linear-tickets.md) Ticket 16.
 
-This doc documents the **method facet matrix** that powers two ranking
-surfaces, both consuming the same underlying data:
+This doc documents the **method facet matrix** that powers ranking from shared facet data:
 
-1. **Create-flow card ranking** — the four card-deck wizard steps
+1. **Create-flow card ranking (shipped)** — the four card-deck wizard steps
    (`communication-methods`, `membership-methods`, `decision-approaches`,
    `conflict-management`) reorder their `methods[]` array based on which
    methods match the user's selected community facets.
-2. **Template grid ranking** — the curated `RuleTemplate` rows shown on
-   the marketing home `MarketingRuleStackSection.tsx` and `templates/`
-   page get scored by how many of their composed methods match the user's
-   facets, then sorted highest-first.
+2. **Template list API (shipped)** — `GET /api/templates?facet.*` returns scored/ranked `RuleTemplate` rows when query params are present.
+3. **Template marketing grids (CR-93)** — home `MarketingRuleStackSection.tsx` and `/templates` still call `GET /api/templates` **without** facets; wiring + tests are **[CR-93](https://linear.app/community-rule/issue/CR-93/product-rank-template-cards-by-community-facets-reuse-get-apitemplates)**.
 
 > **Scope note:** Card / modal copy lives in
 > `messages/en/create/customRule/*.json` as flat `methods` arrays (one
@@ -266,10 +264,9 @@ decision-approaches → conflict-management → confirm-stakeholders → final-r
 | Templates index | `app/(marketing)/templates/page.tsx` |
 | Template preview (by slug) | `app/(app)/create/review-template/[slug]/page.tsx` |
 | "Use without changes" → publish | `app/(app)/create/CreateFlowLayoutClient.tsx` `handleUseTemplateWithoutChanges` |
-| API list | `app/api/templates/route.ts` (GET only, no params today) |
+| API list | `app/api/templates/route.ts` (`GET`; optional `facet.*` params — see §9.1) |
 
-Template ranking adds optional facet query params to `/api/templates`;
-the no-facets path keeps today's curated ordering. Template **Customize**
+**Marketing UIs** do not pass `facet.*` yet (**[CR-93](https://linear.app/community-rule/issue/CR-93/product-rank-template-cards-by-community-facets-reuse-get-apitemplates)**). The no-facets path keeps curated ordering; with facets, templates are ranked and `scores` may be returned. Template **Customize**
 now prefills the custom-rule flow via
 [`buildTemplateCustomizePrefill`](../../lib/create/applyTemplatePrefill.ts)
 (applied in `CreateFlowLayoutClient.tsx`) and routes to `core-values`