Center lockup-plus-card and card-stack create-flow steps in the nav–footer band so they are not stuck under the header when the content is shorter than the viewport.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/components/CreateFlowLockupCardStepShell.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 import { CreateFlowHeaderLockup } from "./CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "./CreateFlowStepShell";
 import {
+  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
   CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
 } from "./createFlowLayoutTokens";
@@ -18,14 +19,18 @@ type CreateFlowLockupCardStepShellProps = {
   children: ReactNode;
 };
 
-/** Final-review layout: `wideGrid`, two columns from `md:`, column widths from `createFlowLayoutTokens`. */
+/** Lockup + card: `wideGrid`, two columns from `md:`, centered in the nav–footer band from `md`. */
 export function CreateFlowLockupCardStepShell({
   lockupTitle,
   lockupDescription,
   children,
 }: CreateFlowLockupCardStepShellProps) {
   return (
-    <CreateFlowStepShell variant="wideGrid" contentTopBelowMd="space-800">
+    <CreateFlowStepShell
+      variant="wideGrid"
+      contentTopBelowMd="space-800"
+      className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
+    >
       <div
         className={`mx-auto flex w-full min-w-0 flex-col gap-4 md:grid md:w-full md:grid-cols-2 md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
       >

app/(app)/create/components/createFlowLayoutTokens.ts

@@ -9,6 +9,19 @@ 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]";
 
+/**
+ * Lockup+card and card-stack `<main>`: keep `items-start` so a tall card can
+ * scroll from the top. Pair with {@link CREATE_FLOW_MD_CENTERED_SHELL_CLASS}.
+ */
+export const CREATE_FLOW_MD_CENTERED_MAIN_CLASS =
+  "items-start justify-center overflow-y-auto";
+
+/**
+ * Center the step in the nav–footer band from `md` when it fits (`my-auto`),
+ * and drop the mobile top inset so that centering is not biased downward.
+ */
+export const CREATE_FLOW_MD_CENTERED_SHELL_CLASS = "md:my-auto md:pt-0";
+
 /**
  * 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}.