Create flow UX updates

app/create/components/CreateFlowHeaderLockup.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+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"> & {
+  /** Omit for responsive `M` below `md`, `L` at/above `md` (matches `--breakpoint-md`). */
+  size?: HeaderLockupProps["size"];
+};
+
+/**
+ * Create-flow HeaderLockup: **`L` at/above `md`**, `M` below unless `size` is passed explicitly.
+ */
+export function CreateFlowHeaderLockup({
+  size: sizeProp,
+  ...rest
+}: CreateFlowHeaderLockupProps) {
+  const mdUp = useCreateFlowMdUp();
+  const size = sizeProp ?? (mdUp ? "L" : "M");
+  return <HeaderLockup {...rest} size={size} />;
+}

app/create/components/CreateFlowLockupCardStepShell.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { CreateFlowHeaderLockup } from "./CreateFlowHeaderLockup";
+import { CreateFlowStepShell } from "./CreateFlowStepShell";
+
+/** Shared `RuleCard` / template card chrome: matches final-review desktop + mobile padding and radius. */
+export const CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS =
+  "w-full min-w-0 rounded-[12px] p-4 md:rounded-[24px] md:!max-w-full md:!w-full md:p-0";
+
+type CreateFlowLockupCardStepShellProps = {
+  lockupTitle: string;
+  lockupDescription?: string;
+  children: ReactNode;
+};
+
+/**
+ * Final-review-style create-flow step: `wideGrid` shell, two-column grid at `md+`,
+ * left `CreateFlowHeaderLockup` (vertically centered in column), right column for card content.
+ */
+export function CreateFlowLockupCardStepShell({
+  lockupTitle,
+  lockupDescription,
+  children,
+}: CreateFlowLockupCardStepShellProps) {
+  return (
+    <CreateFlowStepShell variant="wideGrid" contentTopBelowMd="space-800">
+      <div className="flex w-full min-w-0 flex-col gap-4 md:grid md:grid-cols-2 md:gap-[var(--measures-spacing-1200,48px)]">
+        <div className="flex min-w-0 flex-col justify-start md:justify-center">
+          <CreateFlowHeaderLockup
+            title={lockupTitle}
+            description={lockupDescription}
+            justification="left"
+          />
+        </div>
+        <div className="flex min-w-0 w-full flex-col items-stretch">{children}</div>
+      </div>
+    </CreateFlowStepShell>
+  );
+}

app/create/components/CreateFlowStepShell.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+export type CreateFlowStepShellVariant =
+  | "centeredNarrow"
+  | "centeredNarrowBottomPad"
+  | "wideGrid"
+  | "wideGridLoosePadding"
+  | "bare";
+
+/** Top padding below `md` between top nav and step content (semantic space tokens). */
+export type CreateFlowContentTopBelowMd = "none" | "space-1400" | "space-800";
+
+const outerByVariant: Record<CreateFlowStepShellVariant, string> = {
+  centeredNarrow:
+    "flex w-full min-w-0 flex-col items-center px-5 md:px-16",
+  centeredNarrowBottomPad:
+    "flex w-full min-w-0 flex-col items-center px-5 pb-28 md:px-[var(--measures-spacing-1800,64px)] md:pb-32",
+  wideGrid: "w-full min-w-0 max-w-[1280px] shrink-0 px-5 md:px-12",
+  wideGridLoosePadding:
+    "w-full min-w-0 max-w-[1280px] shrink-0 px-5 md:px-16",
+  bare: "w-full min-w-0",
+};
+
+const contentTopBelowMdClass: Record<CreateFlowContentTopBelowMd, string> = {
+  none: "",
+  "space-1400": "max-md:pt-[var(--space-1400)]",
+  "space-800": "max-md:pt-[var(--space-800)]",
+};
+
+interface CreateFlowStepShellProps {
+  children: ReactNode;
+  variant?: CreateFlowStepShellVariant;
+  /** Padding-top below `md` only; `text` step uses `none`. */
+  contentTopBelowMd?: CreateFlowContentTopBelowMd;
+  className?: string;
+}
+
+/**
+ * Shared horizontal padding and width constraints for create-flow step pages.
+ * Horizontal padding uses Tailwind `md:` so it tracks `--breakpoint-md` (640px in `app/tailwind.css`).
+ */
+export function CreateFlowStepShell({
+  children,
+  variant = "centeredNarrow",
+  contentTopBelowMd = "none",
+  className = "",
+}: CreateFlowStepShellProps) {
+  const topClass = contentTopBelowMdClass[contentTopBelowMd];
+  return (
+    <div
+      className={`${outerByVariant[variant]} ${topClass} ${className}`.trim()}
+    >
+      {children}
+    </div>
+  );
+}