Cap Rule stack section titles at the Figma 3-line width so they wrap instead of stretching on wide viewports.

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

app/components/type/SectionHeader/SectionHeader.tsx

@@ -68,8 +68,8 @@ const SectionHeader = memo<SectionHeaderProps>(
               variant === "multi-line"
                 ? ruleStackDesktopTypeScale
                   ? splitFromMd
-                    ? "font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:w-full md:max-w-none md:text-left md:text-large-heading xl:text-xx-large-heading"
+                    ? "font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:w-full md:max-w-[571px] md:text-left md:text-large-heading xl:text-xx-large-heading"
-                    : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-full lg:max-w-none lg:text-left lg:text-large-heading xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
+                    : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-full lg:max-w-[571px] lg:text-left lg:text-large-heading xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
                   : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-[410px] lg:text-left xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
                 : "font-bricolage-grotesque text-medium-heading sm:text-large-heading lg:text-large-heading lg:w-[369px] lg:pr-[var(--spacing-scale-096)] xl:text-xx-large-heading xl:w-[452px] xl:pr-[var(--spacing-scale-096)] text-[var(--color-content-default-primary)]"
             }

tests/components/SectionHeader.test.tsx

@@ -42,3 +42,40 @@ describe("SectionHeader twoColumnsFromMd", () => {
     expect(container.firstElementChild).toHaveClass("md:flex-row");
   });
 });
+
+describe("SectionHeader rule stack title max width", () => {
+  it("caps the title at the Figma 3-line width from lg", () => {
+    render(
+      <SectionHeader
+        title="Get Templates that help your community run smoothly"
+        subtitle="Start from a proven pattern."
+        variant="multi-line"
+        ruleStackDesktopTypeScale
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", {
+        name: /get templates that help your community run smoothly/i,
+      }),
+    ).toHaveClass("lg:max-w-[571px]");
+  });
+
+  it("caps the title at the Figma 3-line width from md when twoColumnsFromMd is set", () => {
+    render(
+      <SectionHeader
+        title="Get Templates that help your community run smoothly"
+        subtitle="Start from a proven pattern."
+        variant="multi-line"
+        ruleStackDesktopTypeScale
+        twoColumnsFromMd
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", {
+        name: /get templates that help your community run smoothly/i,
+      }),
+    ).toHaveClass("md:max-w-[571px]");
+  });
+});