chore: shorten the homepage hero title

Author: boojack

DESIGN_SYSTEM.md

@@ -390,7 +390,7 @@ before implementation.
 
 | Role | Canonical treatment |
 | --- | --- |
-| Brand hero | `font-serif text-[clamp(2.25rem,12vw,3.25rem)] leading-[0.96] font-semibold tracking-[-0.04em] sm:text-6xl lg:text-[4.25rem]` |
+| Brand hero | `font-serif text-[clamp(2.25rem,10.5vw,3.25rem)] leading-[0.96] font-semibold tracking-[-0.04em] sm:text-6xl lg:text-[4.25rem]` |
 | Campaign hero | `font-serif text-5xl leading-[0.98] font-semibold tracking-[-0.035em] sm:text-6xl lg:text-7xl` |
 | Standard marketing H1 | `font-serif text-5xl leading-[1.04] font-semibold tracking-[-0.035em] sm:text-6xl lg:text-7xl` |
 | Section thesis | `font-serif text-[2.5rem] leading-[1.03] font-semibold tracking-[-0.035em] sm:text-5xl lg:text-[3.35rem]` |
@@ -761,6 +761,16 @@ A durable user-requested exception MUST be recorded in this document with its
 route, scope, reason, and affected rule. Registered page signatures are part of
 the system and are not exceptions.
 
+- At the user's request, the Homepage hero at `/` uses the page-specific title
+  "Capture a thought. Keep it yours." to express quick capture and ownership
+  with less text. This scoped exception to section 16's canonical brand-copy
+  rule applies only to the visible hero title. Keep the two sentences on
+  separate lines when space permits, with `HeroAccent` on "Keep it yours.";
+  allow natural wrapping on narrower screens and with larger text settings.
+  The desktop claim column is 36rem, and the mobile fluid scale uses 10.5vw
+  within the existing rem bounds so each sentence fits at the primary review
+  sizes without preventing text from wrapping.
+
 - The Homepage's `MemoHeroMock` follows the current `demo.usememos.com` product
   UI at the user's request. Inside that reconstruction, section 12's website
   radius roles give way to the product's 8px memo/editor surfaces, compact

src/app/(public)/(site)/page.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { describe, expect, it, vi } from "vitest";
-import { BRAND_SHORT, BRAND_TAGLINE } from "@/shared/lib/branding";
+import { BRAND_SHORT } from "@/shared/lib/branding";
 
 vi.mock("@/features/marketing/components/hero-section", () => ({
   HeroSection: ({ title, subtitle }: { title: ReactNode; subtitle: string }) => (
@@ -31,11 +31,12 @@ vi.mock("@/features/marketing/components/home-faq-section", () => ({
 import HomePage from "./page";
 
 describe("HomePage", () => {
-  it("preserves the approved brand introduction as one accessible heading", () => {
+  it("renders the chosen hero title as one accessible heading with the ownership accent", () => {
     render(<HomePage />);
 
     expect(screen.getAllByRole("heading", { level: 1 })).toHaveLength(1);
-    expect(screen.getByRole("heading", { level: 1, name: BRAND_TAGLINE })).toBeVisible();
+    expect(screen.getByRole("heading", { level: 1, name: "Capture a thought. Keep it yours." })).toBeVisible();
+    expect(screen.getByText("Keep it yours.")).toHaveClass("text-brand-600", "dark:text-brand-300");
     expect(screen.getByText(BRAND_SHORT)).toBeVisible();
   });
 

src/app/(public)/(site)/page.tsx

@@ -6,7 +6,7 @@ import { HomeFindSection } from "@/features/marketing/components/home-find-secti
 import { HomeOwnSection } from "@/features/marketing/components/home-own-section";
 import { HomeWriteSection } from "@/features/marketing/components/home-write-section";
 import { StartSection } from "@/features/marketing/components/start-section";
-import { BRAND_DESCRIPTION, BRAND_SHORT, BRAND_TAGLINE_LINES, BRAND_TITLE } from "@/shared/lib/branding";
+import { BRAND_DESCRIPTION, BRAND_SHORT, BRAND_TITLE } from "@/shared/lib/branding";
 import { buildDefaultOpenGraphImages, DEFAULT_OG_IMAGE } from "@/shared/lib/seo";
 
 export const metadata: Metadata = {
@@ -54,9 +54,9 @@ export default function HomePage() {
       <HeroSection
         title={
           <>
-            <span className="block text-balance">{BRAND_TAGLINE_LINES[0]}</span>{" "}
+            <span className="block text-balance">Capture a thought.</span>{" "}
             <span className="block text-balance">
-              <HeroAccent>{BRAND_TAGLINE_LINES[1]}</HeroAccent>
+              <HeroAccent>Keep it yours.</HeroAccent>
             </span>
           </>
         }

src/features/marketing/components/hero-section.tsx

@@ -25,7 +25,7 @@ export function HeroSection({ version = "26.10-rc.1", title, subtitle, primaryCt
   return (
     <section className="relative isolate overflow-hidden bg-white dark:bg-zinc-950">
       <HeroAmbient />
-      <div className="site-container grid gap-12 pt-12 pb-16 sm:pt-14 sm:pb-20 lg:grid-cols-[minmax(0,32rem)_minmax(0,1fr)] lg:items-center lg:gap-12 lg:py-20">
+      <div className="site-container grid gap-12 pt-12 pb-16 sm:pt-14 sm:pb-20 lg:grid-cols-[minmax(0,36rem)_minmax(0,1fr)] lg:items-center lg:gap-12 lg:py-20">
         <div className={`${styles.copy} min-w-0`}>
           {version ? (
             <Link
@@ -42,7 +42,7 @@ export function HeroSection({ version = "26.10-rc.1", title, subtitle, primaryCt
             </Link>
           ) : null}
 
-          <h1 className="mt-6 text-balance font-serif text-[clamp(2.25rem,12vw,3.25rem)] leading-[0.96] font-semibold tracking-[-0.04em] text-zinc-950 dark:text-zinc-50 sm:text-6xl lg:text-[4.25rem]">
+          <h1 className="mt-6 text-balance font-serif text-[clamp(2.25rem,10.5vw,3.25rem)] leading-[0.96] font-semibold tracking-[-0.04em] text-zinc-950 dark:text-zinc-50 sm:text-6xl lg:text-[4.25rem]">
             {title}
           </h1>