Keep process-card numerals upright and match Display type and section gaps.

Rotate only the numbered shapes, use 24/32 and 32/1.1 card copy, and tighten the header-to-CTA stack.

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

tests/components/SectionNumber.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import SectionNumber from "../../app/components/sections/SectionNumber";
+
+describe("SectionNumber", () => {
+  it("rotates the shape and keeps the numeral upright", () => {
+    render(<SectionNumber number={1} />);
+
+    const numeral = screen.getByText("1");
+    expect(numeral).toHaveClass("text-large-label");
+    expect(numeral.className).not.toMatch(/rotate/);
+
+    const shape = screen.getByAltText("Section 1");
+    expect(shape).toHaveClass("rotate-15");
+    expect(shape.parentElement).not.toHaveClass("rotate-15");
+    expect(shape.parentElement?.className).not.toMatch(/-rotate-/);
+  });
+});

tests/unit/Step.test.jsx

@@ -137,12 +137,9 @@ describe("Step Component", () => {
     const textElement = screen.getByText("Test Card Text");
     expect(textElement).toHaveClass(
       "text-[24px]",
-      "sm:text-[24px]",
-      "sm:leading-[24px]",
-      "lg:text-[24px]",
-      "lg:leading-[24px]",
+      "leading-[32px]",
       "xl:text-[32px]",
-      "xl:leading-[32px]",
+      "xl:leading-[1.1]",
     );
   });
 
@@ -234,7 +231,7 @@ describe("Step Component", () => {
     );
 
     const textElement = screen.getByText("Test Card Text");
-    expect(textElement).toHaveClass("text-[24px]", "leading-[24px]");
+    expect(textElement).toHaveClass("text-[24px]", "leading-[32px]");
   });
 
   it("applies Large size variant correctly", () => {
@@ -254,7 +251,7 @@ describe("Step Component", () => {
     );
 
     const textElement = screen.getByText("Test Card Text");
-    expect(textElement).toHaveClass("text-[24px]", "leading-[24px]");
+    expect(textElement).toHaveClass("text-[24px]", "leading-[32px]");
   });
 
   it("applies XLarge size variant correctly", () => {
@@ -274,6 +271,6 @@ describe("Step Component", () => {
     );
 
     const textElement = screen.getByText("Test Card Text");
-    expect(textElement).toHaveClass("text-[32px]", "leading-[32px]");
+    expect(textElement).toHaveClass("text-[32px]", "leading-[1.1]");
   });
 });