From c71895aef826454f33c46a4b63cc64d5a47c9083 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Oct 2026 00:13:30 +0000
Subject: [PATCH 1/2] Restore the old nav and make the main pages minimal

- Nav: undo the floating bordered box from 968a5bf. The header is a plain
  white bar again, now with a 1px line under it, and Get Involved is a plain
  nav link. Links, dropdowns and the language picker are unchanged.
- Home, About, Projects, Get Involved and Know Your Rights are one narrow
  column of text: no hero photos, collages, slideshow, typing effect, stat
  tiles, cards or bands. Purple is kept for links, the active nav item and
  one main button per page. All copy and both forms stay.
- /rights: the phone demo is replaced by the same laws as plain text
  (federal, nine researched states, and a summary for the rest).
- New styles live in app/minimal.css, scoped under .mn, so the Team and
  Learning Resources pages are untouched.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
---
 app/[locale]/about/page.tsx                   | 152 ++++++--
 app/[locale]/join/page.tsx                    |  91 ++---
 app/[locale]/page.tsx                         | 146 ++++++--
 app/[locale]/research/page.tsx                | 102 +++---
 app/[locale]/rights/page.tsx                  | 160 +++++----
 app/minimal.css                               | 178 ++++++++++
 app/redesign-overrides.css                    |  20 +-
 app/redesign.css                              |   2 +-
 components/layout/SiteHeader.tsx              |   6 +-
 components/sections/about/AiScams.tsx         |  64 ----
 components/sections/about/FounderStory.tsx    |  25 --
 components/sections/about/FounderVideo.tsx    |  58 ---
 components/sections/about/MissionPillars.tsx  |  22 --
 components/sections/about/PhotoGrid.tsx       |  36 --
 components/sections/about/WhatWeProvide.tsx   |  40 ---
 components/sections/about/ZoomSlideshow.tsx   | 127 -------
 components/sections/home/CampusChapters.tsx   |  82 -----
 components/sections/home/EqualFooting.tsx     |  34 --
 components/sections/home/FollowLinks.tsx      |  32 --
 components/sections/home/FreeResources.tsx    |  37 --
 components/sections/home/HomeHero.tsx         | 117 ------
 components/sections/home/Pillars.tsx          |  34 --
 components/sections/home/PpiExplainer.tsx     |  61 ----
 components/sections/research/ProjectCard.tsx  |  41 ---
 components/sections/research/TrackNav.tsx     |  65 ----
 .../RightsPhoneDemo.tsx => lib/rights-laws.ts | 332 +-----------------
 26 files changed, 614 insertions(+), 1450 deletions(-)
 create mode 100644 app/minimal.css
 delete mode 100644 components/sections/about/AiScams.tsx
 delete mode 100644 components/sections/about/FounderStory.tsx
 delete mode 100644 components/sections/about/FounderVideo.tsx
 delete mode 100644 components/sections/about/MissionPillars.tsx
 delete mode 100644 components/sections/about/PhotoGrid.tsx
 delete mode 100644 components/sections/about/WhatWeProvide.tsx
 delete mode 100644 components/sections/about/ZoomSlideshow.tsx
 delete mode 100644 components/sections/home/CampusChapters.tsx
 delete mode 100644 components/sections/home/EqualFooting.tsx
 delete mode 100644 components/sections/home/FollowLinks.tsx
 delete mode 100644 components/sections/home/FreeResources.tsx
 delete mode 100644 components/sections/home/HomeHero.tsx
 delete mode 100644 components/sections/home/Pillars.tsx
 delete mode 100644 components/sections/home/PpiExplainer.tsx
 delete mode 100644 components/sections/research/ProjectCard.tsx
 delete mode 100644 components/sections/research/TrackNav.tsx
 rename components/sections/RightsPhoneDemo.tsx => lib/rights-laws.ts (50%)

diff --git a/app/[locale]/about/page.tsx b/app/[locale]/about/page.tsx
index 89c4b24..3f8e9ad 100644
--- a/app/[locale]/about/page.tsx
+++ b/app/[locale]/about/page.tsx
@@ -1,16 +1,12 @@
-import { PageHero } from "@/components/sections/shared/PageHero";
-import { CtaBand } from "@/components/sections/shared/CtaBand";
-import { ZoomSlideshow } from "@/components/sections/about/ZoomSlideshow";
-import { PhotoGrid } from "@/components/sections/about/PhotoGrid";
-import { MissionPillars } from "@/components/sections/about/MissionPillars";
-import { FounderStory } from "@/components/sections/about/FounderStory";
-import { FounderVideo } from "@/components/sections/about/FounderVideo";
-import { QuoteBand } from "@/components/sections/about/QuoteBand";
-import { WhatWeProvide } from "@/components/sections/about/WhatWeProvide";
-import { AiScams } from "@/components/sections/about/AiScams";
+import Link from "next/link";
 import { getDictionary } from "@/lib/i18n/get-dictionary";
 import { getRouteMetadata } from "@/lib/i18n/metadata";
 import { localizeHref, type Locale } from "@/lib/i18n/config";
+import "../../minimal.css";
+
+const FTC_ALERT =
+  "https://consumer.ftc.gov/consumer-alerts/2026/09/scammers-are-spoofing-car-dealership-websites-what-you-need-know";
+const FTC_REPORT = "https://reportfraud.ftc.gov/";
 
 export async function generateMetadata({
   params,
@@ -29,33 +25,121 @@ export default async function AboutPage({
   const { locale } = await params;
   const dict = (await getDictionary(locale as Locale)).aboutPage;
   const href = (h: string) => localizeHref(locale as Locale, h);
+  const { hero, zoom, photos, mission, story, video, ai, quote, provide, cta } = dict;
+  const last = provide.items.length - 1;
 
   return (
-    <div className="rd rd-page">
-      <PageHero
-        className="a-hero"
-        centered
-        title={dict.hero.title}
-        body={dict.hero.body}
-      >
-        <div className="scroll-cue" aria-hidden="true">
-          <span />
+    <div className="rd rd-page mn">
+      <div className="mn-col">
+        <h1>{hero.title}</h1>
+        <p className="mn-lead">{hero.body}</p>
+
+        <h2 id="chapters">{photos.title}</h2>
+        <p>{photos.body}</p>
+        <p>{zoom.body}</p>
+
+        <h2 id="mission">{mission.title}</h2>
+        <p>{mission.body}</p>
+        {mission.items.map((item) => (
+          <div key={item.title}>
+            <h3>{item.title}</h3>
+            <p>{item.body}</p>
+          </div>
+        ))}
+
+        <h2 id="story">{story.title}</h2>
+        <p>{story.body}</p>
+        {story.strikes.map((s) => (
+          <div key={s.n}>
+            <h3>{s.title}</h3>
+            <p className="mn-meta">{s.tag}</p>
+            <p>{s.body}</p>
+          </div>
+        ))}
+        <blockquote>
+          <p>{story.quote}</p>
+          <p className="mn-meta">{story.quoteCite}</p>
+        </blockquote>
+
+        <h2 id="founder-video">{video.title}</h2>
+        <p>{video.body}</p>
+        <video
+          controls
+          preload="metadata"
+          playsInline
+          poster="/images/about/founder-rana-poster.webp"
+          aria-label={video.label}
+          style={{ display: "block", width: "100%", margin: "0 0 12px" }}
+        >
+          <source src="/videos/founder-rana.mp4" type="video/mp4" />
+        </video>
+        <p className="mn-meta">
+          {video.name}, {video.role}
+        </p>
+
+        <h2 id="ai">{ai.title}</h2>
+        <p>{ai.body}</p>
+        <ol>
+          {ai.steps.map((s) => (
+            <li key={s.title}>
+              <strong>{s.title}</strong> {s.body}
+            </li>
+          ))}
+        </ol>
+        <p className="mn-meta">{ai.source}</p>
+        <h3>
+          {ai.saveStat}: {ai.saveTitle}
+        </h3>
+        <p>{ai.saveBody}</p>
+        <p>
+          <Link href={href("/fraud#law")}>{ai.saveCta}</Link>
+        </p>
+        <h3>{ai.tipsTitle}</h3>
+        <ul>
+          {ai.tips.map((t) => (
+            <li key={t}>{t}</li>
+          ))}
+        </ul>
+        <div className="mn-links">
+          <a href={FTC_ALERT} target="_blank" rel="noopener noreferrer">
+            {ai.ftcCta}
+          </a>
+          <a href={FTC_REPORT} target="_blank" rel="noopener noreferrer">
+            {ai.reportCta}
+          </a>
+        </div>
+
+        <blockquote style={{ marginTop: 64 }}>
+          <p>{quote.text}</p>
+          <p className="mn-meta">{quote.cite}</p>
+        </blockquote>
+
+        <h2 id="provide">{provide.title}</h2>
+        <p>{provide.body}</p>
+        {provide.items.map((item, i) => (
+          <div key={item.title}>
+            <h3>{item.title}</h3>
+            <p>
+              {item.body}
+              {i === last && (
+                <>
+                  {" "}
+                  <Link href={href("/research")}>{provide.projectsLink}</Link>
+                </>
+              )}
+            </p>
+          </div>
+        ))}
+
+        <h2>{cta.title}</h2>
+        <p>{cta.body}</p>
+        <div className="mn-links">
+          <Link className="mn-btn" href={href("/join")}>
+            {cta.primary}
+          </Link>
+          <Link href={href("/team")}>{cta.secondary}</Link>
         </div>
-      </PageHero>
-      <ZoomSlideshow dict={dict.zoom} />
-      <PhotoGrid dict={dict.photos} />
-      <MissionPillars dict={dict.mission} />
-      <FounderStory dict={dict.story} />
-      <FounderVideo dict={dict.video} />
-      <AiScams dict={dict.ai} rightsHref={href("/fraud#law")} />
-      <QuoteBand text={dict.quote.text} cite={dict.quote.cite} />
-      <WhatWeProvide dict={dict.provide} projectsHref={href("/research")} />
-      <CtaBand
-        title={dict.cta.title}
-        body={dict.cta.body}
-        primary={{ label: dict.cta.primary, href: href("/join") }}
-        secondary={{ label: dict.cta.secondary, href: href("/team") }}
-      />
+      </div>
     </div>
   );
 }
diff --git a/app/[locale]/join/page.tsx b/app/[locale]/join/page.tsx
index 75ec5fb..868f617 100644
--- a/app/[locale]/join/page.tsx
+++ b/app/[locale]/join/page.tsx
@@ -1,9 +1,9 @@
 import Link from "next/link";
-import { PageHero } from "@/components/sections/shared/PageHero";
 import { ApplyForm } from "@/components/sections/join/ApplyForm";
 import { ContactForm } from "@/components/sections/join/ContactForm";
 import { getDictionary } from "@/lib/i18n/get-dictionary";
 import type { Locale } from "@/lib/i18n/config";
+import "../../minimal.css";
 
 // Minimum weekly hours per role, same order as joinPage.roles.items.
 const ROLE_HOURS = [5, 5, 5, 3, 3, 3];
@@ -17,69 +17,48 @@ export default async function JoinPage({
   const d = (await getDictionary(locale as Locale)).joinPage;
 
   return (
-    <div className="rd rd-page">
-      <PageHero title={d.hero.title} body={d.hero.body}>
-        <div className="ctas">
-          <Link className="btn btn-solid" href="#apply">
-            {d.hero.ctaPrimary}
-          </Link>
-          <Link className="btn btn-line" href="#chapters">
-            {d.hero.ctaSecondary}
-          </Link>
+    <div className="rd rd-page mn">
+      <div className="mn-col">
+        <h1>{d.hero.title}</h1>
+        <p className="mn-lead">{d.hero.body}</p>
+        <div className="mn-links">
+          <Link href="#apply">{d.hero.ctaPrimary}</Link>
+          <Link href="#chapters">{d.hero.ctaSecondary}</Link>
         </div>
-      </PageHero>
 
-      <section className="pt0" id="chapters">
-        <div className="wrap">
-          <div className="intro">
-            <h2 className="h2">{d.chapters.title}</h2>
+        <h2 id="chapters">{d.chapters.title}</h2>
+        {d.chapters.items.map((c) => (
+          <div key={c.name}>
+            <h3>{c.name}</h3>
+            <p className="mn-meta">{c.school}</p>
+            <p>{c.focus}</p>
+            <p>
+              <strong>{d.chapters.leadsLabel}</strong> {c.leads}
+            </p>
           </div>
-          <div className="chapters">
-            {d.chapters.items.map((c) => (
-              <div className="card chapter" key={c.name}>
-                <h3>{c.name}</h3>
-                <div className="u">{c.school}</div>
-                <p className="d">{c.focus}</p>
-                <div className="leads">
-                  <strong>{d.chapters.leadsLabel}</strong> {c.leads}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
+        ))}
 
-      <section className="pt0">
-        <div className="wrap">
-          <div className="intro">
-            <h2 className="h2">{d.roles.title}</h2>
-            <p className="lede">{d.roles.body}</p>
-          </div>
-          <ul className="roles">
-            {d.roles.items.map((r, i) => (
-              <li key={r}>
-                <b>{r}</b>
-                {d.roles.hours.replace("{n}", String(ROLE_HOURS[i]))}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </section>
+        <h2>{d.roles.title}</h2>
+        <p>{d.roles.body}</p>
+        <ul>
+          {d.roles.items.map((r, i) => (
+            <li key={r}>
+              <strong>{r}</strong> {d.roles.hours.replace("{n}", String(ROLE_HOURS[i]))}
+            </li>
+          ))}
+        </ul>
 
-      <section id="apply">
-        <div className="wrap apply-wrap">
-          <h2 className="h2">{d.form.title}</h2>
+        <section id="apply">
+          <h2>{d.form.title}</h2>
           <ApplyForm dict={d} />
-        </div>
-      </section>
+        </section>
 
-      <section className="pt0" id="contact">
-        <div className="wrap apply-wrap">
-          <h2 className="h2">{d.contact.title}</h2>
-          <p className="lede mt18">{d.contact.body}</p>
+        <section id="contact">
+          <h2>{d.contact.title}</h2>
+          <p>{d.contact.body}</p>
           <ContactForm dict={d.contact} />
-        </div>
-      </section>
+        </section>
+      </div>
     </div>
   );
 }
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index f95812a..4049d38 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,18 +1,23 @@
 import type { Metadata } from "next";
-import { HomeHero } from "@/components/sections/home/HomeHero";
-import { PpiExplainer } from "@/components/sections/home/PpiExplainer";
-import { EqualFooting } from "@/components/sections/home/EqualFooting";
-import { CampusChapters } from "@/components/sections/home/CampusChapters";
-import { FollowLinks } from "@/components/sections/home/FollowLinks";
-import { Pillars } from "@/components/sections/home/Pillars";
-import { FreeResources } from "@/components/sections/home/FreeResources";
+import Link from "next/link";
+import { Rich } from "@/components/sections/shared/Rich";
 import { getDictionary } from "@/lib/i18n/get-dictionary";
 import { SHARE_IMAGE } from "@/lib/i18n/metadata";
+import { SOCIAL_URLS } from "@/lib/social";
 import {
   localizedPathnames,
   localizeHref,
   type Locale,
 } from "@/lib/i18n/config";
+import "../minimal.css";
+
+const CHAPTERS = ["ucla", "berkeley", "ucsc"];
+const FOLLOW = [
+  SOCIAL_URLS.linkedin,
+  SOCIAL_URLS.instagramUcla,
+  SOCIAL_URLS.instagramBerkeley,
+  SOCIAL_URLS.instagramUcsc,
+];
 
 export async function generateMetadata({
   params,
@@ -56,26 +61,117 @@ export default async function HomePage({
   const dict = await getDictionary(locale as Locale);
   const home = dict.homePage;
   const href = (h: string) => localizeHref(locale as Locale, h);
-
-  const ppi = href("/inspection");
-  const fraud = href("/fraud");
-  const story = href("/about#story");
+  const { hero, ppi, publicKnowledge, footing, chapters, follow, pillars, free } = home;
+  const [inspection, fraud] = pillars.items;
 
   return (
-    <div className="rd rd-page">
-      <HomeHero dict={home.hero} ppiHref={ppi} storyHref={story} />
-      <PpiExplainer
-        dict={home.ppi}
-        knowledge={home.publicKnowledge}
-        ppiHref={ppi}
-        whereHref={href("/inspection#where")}
-        fraudHref={fraud}
-      />
-      <EqualFooting dict={home.footing} />
-      <CampusChapters dict={home.chapters} joinHref={href("/join")} />
-      <FollowLinks dict={home.follow} />
-      <Pillars dict={home.pillars} ppiHref={ppi} fraudHref={fraud} />
-      <FreeResources dict={home.free} />
+    <div className="rd rd-page mn">
+      <div className="mn-col">
+        <h1>
+          {hero.titleLead} {hero.phrases[0]}
+        </h1>
+        <p className="mn-lead">{hero.body}</p>
+        <div className="mn-links">
+          <Link className="mn-btn" href={href("/inspection")}>
+            {hero.ctaPrimary}
+          </Link>
+          <Link href={href("/about#story")}>{hero.ctaSecondary}</Link>
+        </div>
+
+        <h2 id="ppi">{ppi.title}</h2>
+        <p>
+          <Rich text={ppi.body} />
+        </p>
+        {ppi.items.map((item) => (
+          <div key={item.title}>
+            <h3>{item.title}</h3>
+            <p>{item.body}</p>
+          </div>
+        ))}
+        <div className="mn-links">
+          <Link href={href("/inspection")}>{ppi.primary}</Link>
+          <Link href={href("/inspection#where")}>{ppi.secondary}</Link>
+        </div>
+
+        <h2>{publicKnowledge.title}</h2>
+        <p>
+          <Rich text={publicKnowledge.body} />
+        </p>
+        <p>
+          <Link href={href("/fraud")}>{publicKnowledge.cta}</Link>
+        </p>
+
+        <h2>{footing.title}</h2>
+        <p>{footing.body}</p>
+        <blockquote>
+          <p>{footing.quote}</p>
+          <p className="mn-meta">{footing.quoteCite}</p>
+        </blockquote>
+        {footing.rows.map((row) => (
+          <div key={row.stat}>
+            <h3>
+              {row.stat}: {row.title}
+            </h3>
+            <p>{row.body}</p>
+            <p className="mn-meta">{row.cite}</p>
+          </div>
+        ))}
+
+        <h2 id="chapters-home">{chapters.title}</h2>
+        <p>{chapters.body}</p>
+        {chapters.items.map((item, i) => (
+          <div key={item.tag}>
+            <h3>
+              {item.tag}: {item.title}
+            </h3>
+            <p>{item.body}</p>
+            <p>
+              <Link href={`${href("/join")}?chapter=${CHAPTERS[i]}#apply`}>{item.cta}</Link>
+            </p>
+          </div>
+        ))}
+
+        <h2 id="social">{follow.title}</h2>
+        <p>{follow.body}</p>
+        <ul>
+          {FOLLOW.map((url, i) => (
+            <li key={url}>
+              {follow.links[i].platform}:{" "}
+              <a href={url} target="_blank" rel="noopener noreferrer">
+                {follow.links[i].handle}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <h2>{pillars.title}</h2>
+        <p>{pillars.body}</p>
+        <h3>
+          <Link href={href("/inspection")}>{inspection.title}</Link>
+        </h3>
+        <p>{inspection.body}</p>
+        <h3>
+          <Link href={href("/fraud")}>{fraud.title}</Link>
+        </h3>
+        <p>{fraud.body}</p>
+
+        <h2 id="free">{free.title}</h2>
+        <p>{free.body}</p>
+        <h3>
+          {free.planTitle}: {free.price}
+        </h3>
+        <ul>
+          {free.checks.map((c) => (
+            <li key={c}>{c}</li>
+          ))}
+        </ul>
+        {free.offers.map((o) => (
+          <div key={o.title}>
+            <h3>{o.title}</h3>
+            <p>{o.body}</p>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/app/[locale]/research/page.tsx b/app/[locale]/research/page.tsx
index e17cfb9..44c1213 100644
--- a/app/[locale]/research/page.tsx
+++ b/app/[locale]/research/page.tsx
@@ -1,11 +1,9 @@
-import { PageHero } from "@/components/sections/shared/PageHero";
-import { CtaBand } from "@/components/sections/shared/CtaBand";
-import { TrackNav } from "@/components/sections/research/TrackNav";
-import { ProjectCard } from "@/components/sections/research/ProjectCard";
-import { TRACKS } from "@/components/sections/research/projects";
+import Link from "next/link";
+import { TRACKS, applyHref } from "@/components/sections/research/projects";
 import { getDictionary } from "@/lib/i18n/get-dictionary";
 import { getRouteMetadata } from "@/lib/i18n/metadata";
 import { localizeHref, type Locale } from "@/lib/i18n/config";
+import "../../minimal.css";
 
 export async function generateMetadata({
   params,
@@ -26,49 +24,57 @@ export default async function ResearchPage({
   const joinHref = localizeHref(locale as Locale, "/join");
 
   return (
-    <div className="rd rd-page">
-      <PageHero title={d.hero.title} body={d.hero.body} />
-      <TrackNav
-        label={d.navLabel}
-        items={TRACKS.map((t) => ({
-          key: t.key,
-          title: d.tracks[t.key].title,
-          count: t.projects.length,
-        }))}
-      />
-      {TRACKS.map((track, ti) => {
-        const copy = d.tracks[track.key];
-        return (
-          <section
-            key={track.key}
-            id={track.key}
-            className={ti % 2 === 0 ? "band" : undefined}
-          >
-            <div className="wrap">
-              <div className="intro">
-                <h2 className="h2">{copy.title}</h2>
-                <p className="lede">{copy.body}</p>
-              </div>
-              <div className={`projects projects-${track.projects.length}`}>
-                {track.projects.map((meta, i) => (
-                  <ProjectCard
-                    key={copy.projects[i].name}
-                    copy={copy.projects[i]}
-                    meta={meta}
-                    dict={d}
-                    joinHref={joinHref}
-                  />
-                ))}
-              </div>
-            </div>
-          </section>
-        );
-      })}
-      <CtaBand
-        title={d.cta.title}
-        body={d.cta.body}
-        primary={{ label: d.cta.button, href: `${joinHref}#apply` }}
-      />
+    <div className="rd rd-page mn">
+      <div className="mn-col">
+        <h1>{d.hero.title}</h1>
+        <p className="mn-lead">{d.hero.body}</p>
+        <nav aria-label={d.navLabel}>
+          <ul>
+            {TRACKS.map((t) => (
+              <li key={t.key}>
+                <a href={`#${t.key}`}>{d.tracks[t.key].title}</a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        {TRACKS.map((track) => {
+          const copy = d.tracks[track.key];
+          return (
+            <section key={track.key} id={track.key}>
+              <h2>{copy.title}</h2>
+              <p>{copy.body}</p>
+              {track.projects.map((meta, i) => {
+                const project = copy.projects[i];
+                return (
+                  <div key={project.name}>
+                    <h3>{project.name}</h3>
+                    {meta.chapter && <p className="mn-meta">{d.chapters[meta.chapter]}</p>}
+                    <p>{project.desc}</p>
+                    <p>
+                      <strong>{d.skillsLabel}:</strong> {project.skills.join(", ")}
+                    </p>
+                    <p>
+                      <strong>{d.membersLabel}:</strong> {project.members}
+                    </p>
+                    <p>
+                      <Link href={applyHref(joinHref, meta)}>{project.join}</Link>
+                    </p>
+                  </div>
+                );
+              })}
+            </section>
+          );
+        })}
+
+        <h2>{d.cta.title}</h2>
+        <p>{d.cta.body}</p>
+        <div className="mn-links">
+          <Link className="mn-btn" href={`${joinHref}#apply`}>
+            {d.cta.button}
+          </Link>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/[locale]/rights/page.tsx b/app/[locale]/rights/page.tsx
index 452c8bf..7de43f6 100644
--- a/app/[locale]/rights/page.tsx
+++ b/app/[locale]/rights/page.tsx
@@ -1,12 +1,8 @@
-import {
-  PageHero,
-  FadeUp,
-  SectionTitle,
-  InfoBox,
-  Button,
-} from "@/components/ui";
-import { RightsPhoneDemo } from "@/components/sections/RightsPhoneDemo";
+import Link from "next/link";
 import { getRouteMetadata } from "@/lib/i18n/metadata";
+import { localizeHref, type Locale } from "@/lib/i18n/config";
+import { COOLING_OFF, FEDERAL_LAWS, STATE_DIRECTION, STATE_LAWS, type Law } from "@/lib/rights-laws";
+import "../../minimal.css";
 
 export async function generateMetadata({
   params,
@@ -17,76 +13,90 @@ export async function generateMetadata({
   return getRouteMetadata(locale, "rights", "/rights");
 }
 
-export default function RightsPage() {
-  return (
-    <>
-      <PageHero
-        kicker=""
-        title={
-          <>
-            Know your rights
-            <br />
-            <em>before you sign.</em>
-          </>
-        }
-        subtitle="Federal and California laws protect you from discrimination and deceptive practices at dealerships. Here is what every buyer should know."
-      />
+const titleCase = (s: string) => s.replace(/\b\w/g, (c) => c.toUpperCase());
 
-      {/* Federal Laws */}
-     <FadeUp>
-  <section
-    className="px-20 py-16 max-md:px-6"
-    style={{ background: "var(--color-bg-surface)", margin: 0 }}
-  >
-    <SectionTitle className="mb-6">
-      Try It <em>Yourself.</em>
-    </SectionTitle>
-    <p className="text-base text-white leading-[1.7] max-w-[680px] mb-10">
-      A preview of the mobile app version of this page: tell it your state, then scroll through the laws that actually apply to you.
-    </p>
-    <div className="flex justify-center">
-      <RightsPhoneDemo />
+function LawText({ law, heading: H }: { law: Law; heading: "h3" | "h4" }) {
+  return (
+    <div>
+      <H>{law.title}</H>
+      {law.citation && <p className="mn-meta">{law.citation}</p>}
+      <p>{law.plain}</p>
+      <p>
+        <strong>What to say:</strong> &ldquo;{law.script}&rdquo;
+      </p>
+      <p>
+        <strong>If they push back:</strong> {law.escalation}
+      </p>
     </div>
-  </section>
-</FadeUp>
+  );
+}
 
-      {/* Bottom CTA */}
-      <FadeUp>
-        <section className="px-20 py-24 max-md:px-6 max-md:py-16">
-          <InfoBox label="Remember">
-            <p className="mb-3">
-              <strong className="text-white">
-                You do not need to be a lawyer to use these laws.
-              </strong>{" "}
-              Simply knowing they exist changes the power dynamic. If a dealer
-              refuses to provide written disclosures, that itself is a red flag.
-            </p>
-            <p>
-              If you believe your rights have been violated, you can file a
-              complaint with the{" "}
-              <strong className="text-white">
-                Consumer Financial Protection Bureau (CFPB)
-              </strong>
-              , the{" "}
-              <strong className="text-white">
-                Federal Trade Commission (FTC)
-              </strong>
-              , or the{" "}
-              <strong className="text-white">
-                California Department of Motor Vehicles (DMV)
-              </strong>
-              .
-            </p>
-          </InfoBox>
+export default async function RightsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const href = (h: string) => localizeHref(locale as Locale, h);
+
+  return (
+    <div className="rd rd-page mn">
+      <div className="mn-col">
+        <h1>Know your rights before you sign.</h1>
+        <p className="mn-lead">
+          Federal and California laws protect you from discrimination and deceptive practices at dealerships. Here is
+          what every buyer should know.
+        </p>
+
+        <h2 id="federal">Federal laws</h2>
+        <p>These apply in every state.</p>
+        {[...FEDERAL_LAWS, COOLING_OFF].map((law) => (
+          <LawText key={law.tag} law={law} heading="h3" />
+        ))}
 
-          <div className="flex gap-4 mt-10 flex-wrap">
-            <Button href="/fraud">Spot the Red Flags</Button>
-            <Button href="/inspection" variant="outline">
-              Pre-Purchase Inspection Guide
-            </Button>
-          </div>
-        </section>
-      </FadeUp>
-    </>
+        <h2 id="states">State laws</h2>
+        <p>The states we have researched in detail, on top of the federal laws above.</p>
+        {Object.entries(STATE_LAWS).map(([state, laws]) => (
+          <section key={state} id={state.replace(/\s+/g, "-")}>
+            <h3>{titleCase(state)}</h3>
+            {laws.map((law) => (
+              <LawText key={law.tag} law={law} heading="h4" />
+            ))}
+          </section>
+        ))}
+
+        <h2 id="other-states">Other states</h2>
+        <p>
+          Based on a 50-state legal summary. Exact statute numbers have not been independently verified for these
+          states, so treat this as a starting point, not legal advice. Before you sign, search &ldquo;[your state]
+          lemon law&rdquo; and &ldquo;[your state] used car dealer warranty&rdquo; on your state Attorney
+          General&apos;s website.
+        </p>
+        <ul>
+          {Object.entries(STATE_DIRECTION).map(([state, direction]) => (
+            <li key={state}>
+              <strong>{titleCase(state)}:</strong> the lemon law {direction}.
+            </li>
+          ))}
+        </ul>
+
+        <h2>Remember</h2>
+        <p>
+          <strong>You do not need to be a lawyer to use these laws.</strong> Simply knowing they exist changes the
+          power dynamic. If a dealer refuses to provide written disclosures, that itself is a red flag.
+        </p>
+        <p>
+          If you believe your rights have been violated, you can file a complaint with the{" "}
+          <strong>Consumer Financial Protection Bureau (CFPB)</strong>, the <strong>Federal Trade Commission (FTC)</strong>
+          , or the <strong>California Department of Motor Vehicles (DMV)</strong>.
+        </p>
+        <div className="mn-links">
+          <Link className="mn-btn" href={href("/fraud")}>
+            Spot the Red Flags
+          </Link>
+          <Link href={href("/inspection")}>Pre-Purchase Inspection Guide</Link>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/app/minimal.css b/app/minimal.css
new file mode 100644
index 0000000..27f6ba7
--- /dev/null
+++ b/app/minimal.css
@@ -0,0 +1,178 @@
+/*
+ * Minimal pages (Home, About, Projects, Get Involved, Know Your Rights).
+ * Everything is scoped under .mn so the Team and Learning Resources pages,
+ * which share the .rd styles, are unaffected.
+ * White page, one narrow column, text first. Purple only for links, the
+ * active nav item and one main button per page. Square corners, no
+ * shadows, no boxes around sections.
+ */
+.mn {
+  --mn-ink: #2a0f31;
+  --mn-deep: #5e1a6b;
+  --mn-purple: #9533a5;
+  --mn-rule: #e6e1e8;
+  background: #fff;
+  color: var(--mn-ink);
+}
+.mn .mn-col {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 64px 20px 112px;
+}
+.mn h1,
+.mn h2,
+.mn h3 {
+  color: var(--mn-ink);
+  font-weight: 700;
+  line-height: 1.2;
+}
+.mn h1 {
+  font-size: clamp(2rem, 5vw, 2.6rem);
+  margin: 0 0 24px;
+}
+.mn h2 {
+  font-size: 1.5rem;
+  margin: 72px 0 16px;
+}
+.mn h3 {
+  font-size: 1.12rem;
+  margin: 32px 0 8px;
+}
+.mn h2 + h3 {
+  margin-top: 16px;
+}
+.mn p,
+.mn ul,
+.mn ol,
+.mn blockquote {
+  margin: 0 0 18px;
+}
+.mn ul,
+.mn ol {
+  padding-left: 22px;
+}
+.mn li {
+  margin: 0 0 12px;
+}
+.mn li::marker {
+  color: var(--mn-ink);
+}
+.mn a {
+  color: var(--mn-purple);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.mn a:hover {
+  color: var(--mn-deep);
+}
+.mn .mn-lead {
+  font-size: 1.15rem;
+}
+/* Secondary text: full strength, dark purple, readable size. */
+.mn .mn-meta {
+  color: var(--mn-deep);
+  font-size: 1rem;
+}
+.mn blockquote {
+  padding: 0;
+  font-size: 1.1rem;
+}
+.mn blockquote p {
+  margin-bottom: 8px;
+}
+.mn .mn-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 28px;
+  align-items: center;
+  margin: 28px 0 0;
+}
+/* The one main button on a page. */
+.mn .mn-btn {
+  display: inline-block;
+  background: var(--mn-purple);
+  color: #fff;
+  text-decoration: none;
+  font-weight: 700;
+  padding: 12px 24px;
+  border: 0;
+  border-radius: 0;
+}
+.mn .mn-btn:hover {
+  background: var(--mn-deep);
+  color: #fff;
+}
+.mn hr {
+  border: 0;
+  border-top: 1px solid var(--mn-rule);
+  margin: 64px 0 0;
+}
+.mn img,
+.mn video,
+.mn iframe {
+  max-width: 100%;
+}
+@media (max-width: 640px) {
+  .mn .mn-col {
+    padding: 40px 20px 88px;
+  }
+  .mn h2 {
+    margin-top: 56px;
+  }
+}
+
+/* Forms on Get Involved. The apply form's submit is the page's one main
+   button; the contact form's is dark. */
+.mn form.apply {
+  grid-template-columns: 1fr;
+  gap: 18px;
+  margin-top: 24px;
+}
+.mn .fld input,
+.mn .fld select,
+.mn .fld textarea {
+  border: 1px solid var(--mn-ink);
+  border-radius: 0;
+  box-shadow: none;
+}
+.mn .fld input:focus,
+.mn .fld select:focus,
+.mn .fld textarea:focus {
+  border-color: var(--mn-purple);
+  outline: 2px solid var(--mn-purple);
+  outline-offset: 0;
+}
+.mn .radios {
+  flex-wrap: wrap;
+}
+.mn .btn {
+  border-radius: 0;
+  box-shadow: none;
+  justify-self: start;
+}
+.mn #contact .btn-solid {
+  background: var(--mn-ink);
+  border-color: var(--mn-ink);
+}
+.mn #contact .btn-solid:hover {
+  background: var(--mn-deep);
+  border-color: var(--mn-deep);
+}
+.mn .form-note {
+  font-weight: 400;
+}
+.mn .form-ok {
+  background: none;
+  padding: 0;
+}
+
+.mn h4 {
+  color: var(--mn-ink);
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.25;
+  margin: 28px 0 6px;
+}
+.mn section {
+  scroll-margin-top: 96px;
+}
diff --git a/app/redesign-overrides.css b/app/redesign-overrides.css
index 1b4d738..eb96284 100644
--- a/app/redesign-overrides.css
+++ b/app/redesign-overrides.css
@@ -33,17 +33,8 @@
 .rd-hdr {
   z-index: 100;
 }
-/* The nav sits in a bordered box that floats below the top of the page.
-   8px + 60px + 8px keeps the header 76px tall, so sticky offsets elsewhere
-   still line up. */
 .rd-hdr .nav {
   gap: 16px;
-  height: 60px;
-  width: calc(100% - 32px);
-  background: #fff;
-  border: var(--divider);
-  border-radius: var(--radius-card);
-  padding: 0 24px;
 }
 .rd-hdr .right {
   display: flex;
@@ -119,14 +110,13 @@
     align-items: stretch;
     gap: 2px;
     position: absolute;
-    top: 72px;
-    left: 16px;
-    right: 16px;
+    top: 76px;
+    left: 0;
+    right: 0;
     background: #fff;
     padding: 14px 20px 24px;
-    border: var(--divider);
-    border-radius: var(--radius-card);
-    max-height: calc(100dvh - 88px);
+    border-bottom: 1px solid #e6e1e8;
+    max-height: calc(100dvh - 76px);
     overflow: auto;
   }
   .rd-hdr.open .drop {
diff --git a/app/redesign.css b/app/redesign.css
index f867c75..719eb8f 100644
--- a/app/redesign.css
+++ b/app/redesign.css
@@ -74,7 +74,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .tag{display:inline-block;font-size:.85rem;font-weight:700;color:var(--purple-deep)}
 .rd .say{margin-top:16px;background:var(--tint);padding:14px 16px;font-weight:700;line-height:1.5}
 .rd .band .say{background:var(--bg)}
-.rd-hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:transparent;padding:8px 0}
+.rd-hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:#fff;border-bottom:1px solid #e6e1e8}
 .rd .nav{display:flex;align-items:center;justify-content:space-between;height:76px}
 .rd .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.35rem}
 .rd .logo-img{height:46px;width:auto;display:block}
diff --git a/components/layout/SiteHeader.tsx b/components/layout/SiteHeader.tsx
index 09cc6d0..b1b3bfd 100644
--- a/components/layout/SiteHeader.tsx
+++ b/components/layout/SiteHeader.tsx
@@ -48,6 +48,7 @@ const NAV: NavItem[] = [
       { key: "dealerMap", href: "/map" },
     ],
   },
+  { key: "getInvolved", href: "/join", match: ["/join"] },
 ];
 
 export function SiteHeader({
@@ -137,11 +138,6 @@ export function SiteHeader({
               )}
             </li>
           ))}
-          <li>
-            <Link className="btn btn-solid" href={href("/join")}>
-              {label("getInvolved")}
-            </Link>
-          </li>
         </ul>
         <div className="right">
           <div className="lang" ref={langRef}>
diff --git a/components/sections/about/AiScams.tsx b/components/sections/about/AiScams.tsx
deleted file mode 100644
index 73bc7f9..0000000
--- a/components/sections/about/AiScams.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import Link from "next/link";
-import type { AboutPageDict } from "@/lib/i18n/dictionary";
-import { CheckIcon } from "../shared/icons";
-
-const FTC_ALERT =
-  "https://consumer.ftc.gov/consumer-alerts/2026/09/scammers-are-spoofing-car-dealership-websites-what-you-need-know";
-const FTC_REPORT = "https://reportfraud.ftc.gov/";
-
-export function AiScams({
-  dict,
-  rightsHref,
-}: {
-  dict: AboutPageDict["ai"];
-  rightsHref: string;
-}) {
-  return (
-    <section className="band" id="ai">
-      <div className="wrap ai">
-        <div>
-          <h2 className="h2">{dict.title}</h2>
-          <p className="lede">{dict.body}</p>
-          <ol className="num-list">
-            {dict.steps.map((s) => (
-              <li key={s.title}>
-                <h3>{s.title}</h3>
-                <p>{s.body}</p>
-              </li>
-            ))}
-          </ol>
-          <p className="ai-src">{dict.source}</p>
-        </div>
-        <div className="ai-side">
-          <div className="ai-save">
-            <div className="big">{dict.saveStat}</div>
-            <h3>{dict.saveTitle}</h3>
-            <p>{dict.saveBody}</p>
-            <Link className="inline-link" href={rightsHref}>
-              {dict.saveCta}
-            </Link>
-          </div>
-          <div className="card ai-tips">
-            <h3>{dict.tipsTitle}</h3>
-            <ul className="checks one">
-              {dict.tips.map((t) => (
-                <li key={t}>
-                  <CheckIcon />
-                  <span>{t}</span>
-                </li>
-              ))}
-            </ul>
-            <div className="ctas">
-              <a className="btn btn-solid" href={FTC_ALERT} target="_blank" rel="noopener noreferrer">
-                {dict.ftcCta}
-              </a>
-              <a className="btn btn-line" href={FTC_REPORT} target="_blank" rel="noopener noreferrer">
-                {dict.reportCta}
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/about/FounderStory.tsx b/components/sections/about/FounderStory.tsx
deleted file mode 100644
index 5c473b4..0000000
--- a/components/sections/about/FounderStory.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { AboutPageDict } from "@/lib/i18n/dictionary";
-
-export function FounderStory({ dict }: { dict: AboutPageDict["story"] }) {
-  return (
-    <section id="story">
-      <div className="wrap prose">
-        <h2 className="h2">{dict.title}</h2>
-        <p className="lede">{dict.body}</p>
-        {dict.strikes.map((s) => (
-          <article className="strike" key={s.n}>
-            <h3>
-              <span className="strike-n">{s.n}</span> {s.title}
-            </h3>
-            <p className="strike-meta">{s.tag}</p>
-            <p>{s.body}</p>
-          </article>
-        ))}
-        <blockquote className="pull">
-          {dict.quote}
-          <cite>{dict.quoteCite}</cite>
-        </blockquote>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/about/FounderVideo.tsx b/components/sections/about/FounderVideo.tsx
deleted file mode 100644
index 33c283d..0000000
--- a/components/sections/about/FounderVideo.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-
-import { useRef, useState } from "react";
-import type { AboutPageDict } from "@/lib/i18n/dictionary";
-
-export function FounderVideo({ dict }: { dict: AboutPageDict["video"] }) {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [playing, setPlaying] = useState(false);
-
-  function play() {
-    const v = videoRef.current;
-    if (!v) return;
-    setPlaying(true);
-    v.play();
-    v.focus();
-  }
-
-  return (
-    <section className="pt0 fv-section" id="founder-video">
-      <div className="wrap fv">
-        <div className={`fv-player${playing ? " playing" : ""}`}>
-          <video
-            ref={videoRef}
-            preload="metadata"
-            playsInline
-            controls={playing}
-            poster="/images/about/founder-rana-poster.webp"
-            aria-label={dict.label}
-            onEnded={() => {
-              setPlaying(false);
-              videoRef.current?.load();
-            }}
-          >
-            <source src="/videos/founder-rana.mp4" type="video/mp4" />
-          </video>
-          <button type="button" className="fv-play" aria-label={dict.play} onClick={play}>
-            <span className="fv-btn">
-              <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                <path d="M8 5v14l11-7z" />
-              </svg>
-            </span>
-            <span className="fv-len" aria-hidden="true">
-              {dict.length}
-            </span>
-          </button>
-        </div>
-        <div className="fv-text">
-          <h2 className="h2">{dict.title}</h2>
-          <p className="lede">{dict.body}</p>
-          <p className="fv-who">
-            <b>{dict.name}</b>
-            {dict.role}
-          </p>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/about/MissionPillars.tsx b/components/sections/about/MissionPillars.tsx
deleted file mode 100644
index 0a55072..0000000
--- a/components/sections/about/MissionPillars.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { AboutPageDict } from "@/lib/i18n/dictionary";
-
-export function MissionPillars({ dict }: { dict: AboutPageDict["mission"] }) {
-  return (
-    <section className="band" id="mission">
-      <div className="wrap">
-        <div className="intro">
-          <h2 className="h2">{dict.title}</h2>
-          <p className="lede">{dict.body}</p>
-        </div>
-        <div className="grid3 mt48">
-          {dict.items.map((item) => (
-            <div className="pillar" key={item.title}>
-              <h3>{item.title}</h3>
-              <p>{item.body}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/about/PhotoGrid.tsx b/components/sections/about/PhotoGrid.tsx
deleted file mode 100644
index 0081034..0000000
--- a/components/sections/about/PhotoGrid.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Image from "next/image";
-import type { AboutPageDict } from "@/lib/i18n/dictionary";
-
-// Same order as aboutPage.photos.items.
-const PHOTOS = [
-  { src: "/images/about/berkeley-tabling-1.webp", width: 1800, height: 1177 },
-  { src: "/images/about/berkeley-tabling-2.webp", width: 800, height: 524 },
-  { src: "/images/about/img_8120.webp", width: 1800, height: 1013 },
-  { src: "/images/about/img_8126.webp", width: 1800, height: 1013 },
-];
-
-export function PhotoGrid({ dict }: { dict: AboutPageDict["photos"] }) {
-  return (
-    <section className="pt0">
-      <div className="wrap">
-        <div className="intro">
-          <h2 className="h2">{dict.title}</h2>
-          <p className="lede">{dict.body}</p>
-        </div>
-        <div className="photo-grid">
-          {PHOTOS.map((p, i) => (
-            <figure key={p.src}>
-              <Image
-                src={p.src}
-                alt={dict.items[i].alt}
-                width={p.width}
-                height={p.height}
-                sizes="(max-width: 760px) calc(100vw - 40px), 560px"
-              />
-            </figure>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/about/WhatWeProvide.tsx b/components/sections/about/WhatWeProvide.tsx
deleted file mode 100644
index 16eaea1..0000000
--- a/components/sections/about/WhatWeProvide.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import Link from "next/link";
-import type { AboutPageDict } from "@/lib/i18n/dictionary";
-
-export function WhatWeProvide({
-  dict,
-  projectsHref,
-}: {
-  dict: AboutPageDict["provide"];
-  projectsHref: string;
-}) {
-  const last = dict.items.length - 1;
-  return (
-    <section id="provide">
-      <div className="wrap split-head">
-        <div>
-          <h2 className="h2">{dict.title}</h2>
-          <p className="lede">{dict.body}</p>
-        </div>
-        <dl className="def-list">
-          {dict.items.map((item, i) => (
-            <div key={item.title}>
-              <dt>{item.title}</dt>
-              <dd>
-                {item.body}
-                {i === last && (
-                  <>
-                    {" "}
-                    <Link className="inline-link" href={projectsHref}>
-                      {dict.projectsLink}
-                    </Link>
-                  </>
-                )}
-              </dd>
-            </div>
-          ))}
-        </dl>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/about/ZoomSlideshow.tsx b/components/sections/about/ZoomSlideshow.tsx
deleted file mode 100644
index c84f66c..0000000
--- a/components/sections/about/ZoomSlideshow.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import Image from "next/image";
-import type { AboutPageDict } from "@/lib/i18n/dictionary";
-import { usePrefersReducedMotion } from "../shared/usePrefersReducedMotion";
-
-const PHOTOS = [
-  { src: "/images/about/img_4424_2.webp", position: "center 70%" },
-  { src: "/images/about/berkeley-tabling-1.webp", position: "center 45%" },
-  { src: "/images/about/berkeley-tabling-2.webp", position: "center 40%" },
-  { src: "/images/about/img_8120.webp", position: "center 55%" },
-  { src: "/images/about/img_4422_2.webp", position: "center 72%" },
-  { src: "/images/about/img_8112.webp", position: "center 50%" },
-  { src: "/images/about/img_8126.webp", position: "center 50%" },
-  { src: "/images/about/img_4423_2.webp", position: "center 70%" },
-  { src: "/images/about/img_8103.webp", position: "center 45%" },
-  { src: "/images/about/img_8130.webp", position: "center 50%" },
-];
-
-const INTERVAL_MS = 3200;
-const pad = (n: number) => String(n).padStart(2, "0");
-
-// A photo frame that grows to full-bleed as you scroll through it, while
-// the photos cross-fade on a timer.
-export function ZoomSlideshow({ dict }: { dict: AboutPageDict["zoom"] }) {
-  const reduce = usePrefersReducedMotion();
-  const sectionRef = useRef<HTMLElement>(null);
-  const frameRef = useRef<HTMLDivElement>(null);
-  const [index, setIndex] = useState(0);
-  const [userPaused, setUserPaused] = useState(false);
-  const paused = userPaused || reduce;
-
-  useEffect(() => {
-    if (paused) return;
-    const t = setInterval(
-      () => setIndex((i) => (i + 1) % PHOTOS.length),
-      INTERVAL_MS,
-    );
-    return () => clearInterval(t);
-  }, [paused]);
-
-  useEffect(() => {
-    const section = sectionRef.current;
-    const frame = frameRef.current;
-    if (!section || !frame) return;
-    if (reduce) {
-      frame.style.removeProperty("--p");
-      return;
-    }
-    let ticking = false;
-    const update = () => {
-      ticking = false;
-      const r = section.getBoundingClientRect();
-      const total = r.height - window.innerHeight;
-      const p = Math.min(1, Math.max(0, -r.top / (total * 0.7)));
-      frame.style.setProperty("--p", p.toFixed(4));
-    };
-    const onScroll = () => {
-      if (!ticking) {
-        ticking = true;
-        requestAnimationFrame(update);
-      }
-    };
-    update();
-    window.addEventListener("scroll", onScroll, { passive: true });
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", onScroll);
-      window.removeEventListener("resize", update);
-    };
-  }, [reduce]);
-
-  return (
-    <section className="zoom" ref={sectionRef} aria-label={dict.label}>
-      <div className="zoom-sticky">
-        <div className="zoom-frame" ref={frameRef}>
-          <div className="zoom-imgs">
-            {PHOTOS.map((p, i) => (
-              <Image
-                key={p.src}
-                src={p.src}
-                alt={dict.alts[i]}
-                fill
-                sizes="100vw"
-                preload={i === 0}
-                className={i === index ? "on" : undefined}
-                style={{ objectPosition: p.position }}
-              />
-            ))}
-          </div>
-          <div className="zoom-shade" />
-          <div className="zoom-copy">
-            <h2>
-              {dict.titleLine1}
-              <br />
-              {dict.titleLine2}
-            </h2>
-            <p>{dict.body}</p>
-          </div>
-          <div className="zoom-ctrl">
-            <span className="zoom-count" aria-hidden="true">
-              {pad(index + 1)} / {pad(PHOTOS.length)}
-            </span>
-            <button
-              type="button"
-              aria-label={paused ? dict.play : dict.pause}
-              aria-pressed={paused}
-              onClick={() => setUserPaused((v) => !v)}
-            >
-              {paused ? (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                  <path d="M8 5v14l11-7z" />
-                </svg>
-              ) : (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                  <rect x="6" y="5" width="4" height="14" rx="1" />
-                  <rect x="14" y="5" width="4" height="14" rx="1" />
-                </svg>
-              )}
-            </button>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/home/CampusChapters.tsx b/components/sections/home/CampusChapters.tsx
deleted file mode 100644
index 89eaaf8..0000000
--- a/components/sections/home/CampusChapters.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-import type { HomePageDict } from "@/lib/i18n/dictionary";
-
-const CAMPUSES = [
-  {
-    chapter: "ucla",
-    frame: "royce",
-    src: "/images/campus/royce-hall.webp",
-    width: 697,
-    height: 321,
-    // Sized by height (60% of the frame), so it renders wider than the card.
-    sizes: "(max-width: 720px) 120vw, 560px",
-  },
-  {
-    chapter: "berkeley",
-    frame: "tower",
-    src: "/images/campus/campanile.webp",
-    width: 523,
-    height: 477,
-    // Sized by height (96% of the frame).
-    sizes: "(max-width: 720px) 95vw, 460px",
-  },
-  {
-    chapter: "ucsc",
-    frame: "photo",
-    src: "/images/campus/quarry-amphitheater.webp",
-    width: 1200,
-    height: 800,
-    sizes: "(max-width: 720px) 78vw, 380px",
-  },
-] as const;
-
-export function CampusChapters({
-  dict,
-  joinHref,
-}: {
-  dict: HomePageDict["chapters"];
-  // Base join URL; the chapter is passed as ?chapter= to preselect the form.
-  joinHref: string;
-}) {
-  return (
-    <section className="pt0" id="chapters-home">
-      <div className="wrap">
-        <div className="intro">
-          <h2 className="h2">{dict.title}</h2>
-          <p className="lede">{dict.body}</p>
-        </div>
-        <div className="campus-grid">
-          {CAMPUSES.map((c, i) => {
-            const item = dict.items[i];
-            return (
-              <Link
-                key={c.chapter}
-                className="campus"
-                href={`${joinHref}?chapter=${c.chapter}#apply`}
-              >
-                <div className={`campus-img ${c.frame}`}>
-                  <Image
-                    src={c.src}
-                    alt={item.alt}
-                    width={c.width}
-                    height={c.height}
-                    sizes={c.sizes}
-                  />
-                </div>
-                <div className="campus-body">
-                  <span className="tag">{item.tag}</span>
-                  <h3>{item.title}</h3>
-                  <p>{item.body}</p>
-                  <span className="campus-go">
-                    {item.cta}
-                  </span>
-                </div>
-              </Link>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/home/EqualFooting.tsx b/components/sections/home/EqualFooting.tsx
deleted file mode 100644
index 9ebd069..0000000
--- a/components/sections/home/EqualFooting.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { HomePageDict } from "@/lib/i18n/dictionary";
-
-export function EqualFooting({ dict }: { dict: HomePageDict["footing"] }) {
-  return (
-    <section className="band footing">
-      <div className="wrap">
-        <div className="footing-top">
-          <div>
-            <h2 className="h2">{dict.title}</h2>
-            <p className="lede">{dict.body}</p>
-          </div>
-          <figure className="footing-law">
-            <blockquote>
-              <p>{dict.quote}</p>
-            </blockquote>
-            <figcaption>
-              <cite>{dict.quoteCite}</cite>
-            </figcaption>
-          </figure>
-        </div>
-        <ul className="stats">
-          {dict.rows.map((row) => (
-            <li key={row.stat}>
-              <div className="big">{row.stat}</div>
-              <h3>{row.title}</h3>
-              <p>{row.body}</p>
-              <cite>{row.cite}</cite>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/home/FollowLinks.tsx b/components/sections/home/FollowLinks.tsx
deleted file mode 100644
index 12a1a8d..0000000
--- a/components/sections/home/FollowLinks.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { HomePageDict } from "@/lib/i18n/dictionary";
-import { SOCIAL_URLS } from "@/lib/social";
-
-const LINKS = [
-  SOCIAL_URLS.linkedin,
-  SOCIAL_URLS.instagramUcla,
-  SOCIAL_URLS.instagramBerkeley,
-  SOCIAL_URLS.instagramUcsc,
-];
-
-export function FollowLinks({ dict }: { dict: HomePageDict["follow"] }) {
-  return (
-    <section className="pt0" id="social">
-      <div className="wrap split-head">
-        <div>
-          <h2 className="h2">{dict.title}</h2>
-          <p className="lede">{dict.body}</p>
-        </div>
-        <ul className="follow-list">
-          {LINKS.map((url, i) => (
-            <li key={url}>
-              <a href={url} target="_blank" rel="noopener noreferrer">
-                <span>{dict.links[i].platform}</span>
-                <b>{dict.links[i].handle}</b>
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/home/FreeResources.tsx b/components/sections/home/FreeResources.tsx
deleted file mode 100644
index 7466d92..0000000
--- a/components/sections/home/FreeResources.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { HomePageDict } from "@/lib/i18n/dictionary";
-import { CheckIcon } from "../shared/icons";
-
-export function FreeResources({ dict }: { dict: HomePageDict["free"] }) {
-  return (
-    <section id="free">
-      <div className="wrap plan">
-        <div>
-          <h2 className="h2">{dict.title}</h2>
-          <p className="lede">{dict.body}</p>
-        </div>
-        <div className="plan-card">
-          <div className="plan-head">
-            <h3>{dict.planTitle}</h3>
-            <div className="price">{dict.price}</div>
-          </div>
-          <ul className="checks">
-            {dict.checks.map((c) => (
-              <li key={c}>
-                <CheckIcon />
-                {c}
-              </li>
-            ))}
-          </ul>
-          <div className="offer">
-            {dict.offers.map((o) => (
-              <div key={o.title}>
-                <h4>{o.title}</h4>
-                <p>{o.body}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/home/HomeHero.tsx b/components/sections/home/HomeHero.tsx
deleted file mode 100644
index a34c802..0000000
--- a/components/sections/home/HomeHero.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import type { HomePageDict } from "@/lib/i18n/dictionary";
-import { usePrefersReducedMotion } from "../shared/usePrefersReducedMotion";
-
-// Typewriter timings (ms).
-const TYPE_MS = 70;
-const ERASE_MS = 35;
-const HOLD_MS = 1600;
-const GAP_MS = 300;
-
-export function HomeHero({
-  dict,
-  ppiHref,
-  storyHref,
-}: {
-  dict: HomePageDict["hero"];
-  ppiHref: string;
-  storyHref: string;
-}) {
-  const reduce = usePrefersReducedMotion();
-  const phrases = dict.phrases;
-  // Start with the first phrase fully shown so the heading is never blank.
-  const [text, setText] = useState(phrases[0] ?? "");
-  const [busy, setBusy] = useState(false);
-
-  // Hold the phrase, erase it, then type the next one.
-  useEffect(() => {
-    if (reduce || phrases.length === 0) return;
-    let timer: ReturnType<typeof setTimeout>;
-    let i = 0;
-    let n = phrases[0].length;
-    let erasing = true;
-    const tick = () => {
-      const phrase = phrases[i];
-      if (!erasing) {
-        n += 1;
-        setText(phrase.slice(0, n));
-        if (n < phrase.length) {
-          setBusy(true);
-          timer = setTimeout(tick, TYPE_MS);
-        } else {
-          setBusy(false);
-          erasing = true;
-          timer = setTimeout(tick, HOLD_MS);
-        }
-      } else {
-        n -= 1;
-        setBusy(true);
-        setText(phrase.slice(0, n));
-        if (n > 0) {
-          timer = setTimeout(tick, ERASE_MS);
-        } else {
-          erasing = false;
-          i = (i + 1) % phrases.length;
-          setBusy(false);
-          timer = setTimeout(tick, GAP_MS);
-        }
-      }
-    };
-    timer = setTimeout(tick, HOLD_MS);
-    return () => clearTimeout(timer);
-  }, [reduce, phrases]);
-
-  return (
-    <section className="hero">
-      <div className="wrap hero-grid">
-        <div>
-          <h1>
-            {dict.titleLead}{" "}
-            {/* Screen readers get one stable heading; the rotating words are visual only. */}
-            <span className="sr-only">{dict.phrases[0]}</span>
-            <span className="rotator" aria-hidden="true">
-              {/* Every phrase, invisible and stacked, so the box is always as
-                  tall as the longest one and the page never jumps. */}
-              <span className="rot-sizer">
-                {phrases.map((p) => (
-                  <span key={p}>{p}</span>
-                ))}
-              </span>
-              {reduce ? (
-                <span className="rot-text">{phrases[0]}</span>
-              ) : (
-                <span className="rot-text">
-                  {text}
-                  <i className={`rot-caret${busy ? " busy" : ""}`} />
-                </span>
-              )}
-            </span>
-          </h1>
-          <p>{dict.body}</p>
-          <div className="ctas">
-            <Link className="btn btn-solid" href={ppiHref}>
-              {dict.ctaPrimary}
-            </Link>
-            <Link className="btn btn-line" href={storyHref}>
-              {dict.ctaSecondary}
-            </Link>
-          </div>
-        </div>
-        <figure className="hero-photo">
-          <Image
-            src="/images/home/hero-berkeley-team.webp"
-            alt={dict.photoAlt}
-            width={1600}
-            height={1287}
-            sizes="(max-width: 960px) calc(100vw - 40px), 600px"
-            preload
-          />
-        </figure>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/home/Pillars.tsx b/components/sections/home/Pillars.tsx
deleted file mode 100644
index 618c3ab..0000000
--- a/components/sections/home/Pillars.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Link from "next/link";
-import type { HomePageDict } from "@/lib/i18n/dictionary";
-
-export function Pillars({
-  dict,
-  ppiHref,
-  fraudHref,
-}: {
-  dict: HomePageDict["pillars"];
-  ppiHref: string;
-  fraudHref: string;
-}) {
-  const [inspection, fraud] = dict.items;
-  return (
-    <section>
-      <div className="wrap">
-        <div className="intro">
-          <h2 className="h2">{dict.title}</h2>
-          <p className="lede">{dict.body}</p>
-        </div>
-        <div className="grid2 mt48">
-          <Link className="card link-card" href={ppiHref}>
-            <h3>{inspection.title}</h3>
-            <p>{inspection.body}</p>
-          </Link>
-          <Link className="card link-card" href={fraudHref}>
-            <h3>{fraud.title}</h3>
-            <p>{fraud.body}</p>
-          </Link>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/home/PpiExplainer.tsx b/components/sections/home/PpiExplainer.tsx
deleted file mode 100644
index 2531dce..0000000
--- a/components/sections/home/PpiExplainer.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Link from "next/link";
-import type { HomePageDict } from "@/lib/i18n/dictionary";
-import { Rich } from "../shared/Rich";
-
-// Explains what a pre-purchase inspection is, so the hero's
-// "Inspection Guide" button makes sense to first-time buyers, then
-// closes with why VINdicated makes this knowledge free.
-export function PpiExplainer({
-  dict,
-  knowledge,
-  ppiHref,
-  whereHref,
-  fraudHref,
-}: {
-  dict: HomePageDict["ppi"];
-  knowledge: HomePageDict["publicKnowledge"];
-  ppiHref: string;
-  whereHref: string;
-  fraudHref: string;
-}) {
-  return (
-    <section className="ppi" id="ppi">
-      <div className="wrap what">
-        <h2 className="h2">{dict.title}</h2>
-        <div>
-          <p className="lede">
-            <Rich text={dict.body} />
-          </p>
-          <div className="offer">
-            {dict.items.map((item) => (
-              <div key={item.title}>
-                <h3>{item.title}</h3>
-                <p>{item.body}</p>
-              </div>
-            ))}
-          </div>
-          <div className="ctas">
-            <Link className="btn btn-solid" href={ppiHref}>
-              {dict.primary}
-            </Link>
-            <Link className="btn btn-line" href={whereHref}>
-              {dict.secondary}
-            </Link>
-          </div>
-        </div>
-        <hr className="ppi-rule" />
-        <h3 className="ppi-sub">{knowledge.title}</h3>
-        <div>
-          <p className="lede">
-            <Rich text={knowledge.body} />
-          </p>
-          <div className="ctas">
-            <Link className="btn btn-line" href={fraudHref}>
-              {knowledge.cta}
-            </Link>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/research/ProjectCard.tsx b/components/sections/research/ProjectCard.tsx
deleted file mode 100644
index c74bd61..0000000
--- a/components/sections/research/ProjectCard.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import Link from "next/link";
-import type { ResearchPageDict } from "@/lib/i18n/dictionary";
-import { applyHref, type ProjectMeta } from "./projects";
-
-type ProjectCopy =
-  ResearchPageDict["tracks"]["app"]["projects"][number];
-
-export function ProjectCard({
-  copy,
-  meta,
-  dict,
-  joinHref,
-}: {
-  copy: ProjectCopy;
-  meta: ProjectMeta;
-  dict: ResearchPageDict;
-  joinHref: string;
-}) {
-  return (
-    <article className="card proj">
-      {meta.chapter && (
-        <p className="proj-chapter">{dict.chapters[meta.chapter]}</p>
-      )}
-      <h3>{copy.name}</h3>
-      <p className="proj-desc">{copy.desc}</p>
-      <dl className="proj-meta">
-        <div>
-          <dt>{dict.skillsLabel}</dt>
-          <dd>{copy.skills.join(", ")}</dd>
-        </div>
-        <div>
-          <dt>{dict.membersLabel}</dt>
-          <dd>{copy.members}</dd>
-        </div>
-      </dl>
-      <Link className="btn btn-line proj-btn" href={applyHref(joinHref, meta)}>
-        {copy.join}
-      </Link>
-    </article>
-  );
-}
diff --git a/components/sections/research/TrackNav.tsx b/components/sections/research/TrackNav.tsx
deleted file mode 100644
index d520346..0000000
--- a/components/sections/research/TrackNav.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import type { TrackKey } from "./projects";
-
-// Sticky pill nav that highlights the track currently under the header.
-export function TrackNav({
-  label,
-  items,
-}: {
-  label: string;
-  items: { key: TrackKey; title: string; count: number }[];
-}) {
-  const [current, setCurrent] = useState<TrackKey>(items[0].key);
-  const rowRef = useRef<HTMLDivElement>(null);
-
-  // On narrow screens the pills overflow sideways; keep the active one
-  // visible without moving the page itself.
-  useEffect(() => {
-    const row = rowRef.current;
-    const pill = row?.querySelector<HTMLElement>("a.on");
-    if (!row || !pill) return;
-    const left = pill.offsetLeft - row.clientWidth / 2 + pill.offsetWidth / 2;
-    row.scrollTo({ left, behavior: "smooth" });
-  }, [current]);
-
-  useEffect(() => {
-    let ticking = false;
-    const spy = () => {
-      ticking = false;
-      let cur = items[0].key;
-      for (const { key } of items) {
-        const el = document.getElementById(key);
-        if (el && el.getBoundingClientRect().top < 200) cur = key;
-      }
-      setCurrent(cur);
-    };
-    const onScroll = () => {
-      if (!ticking) {
-        ticking = true;
-        requestAnimationFrame(spy);
-      }
-    };
-    spy();
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
-  }, [items]);
-
-  return (
-    <nav className="track-nav" aria-label={label}>
-      <div className="wrap" ref={rowRef}>
-        {items.map((t) => (
-          <a
-            key={t.key}
-            href={`#${t.key}`}
-            className={current === t.key ? "on" : undefined}
-            aria-current={current === t.key ? "true" : undefined}
-          >
-            {t.title} <b>{t.count}</b>
-          </a>
-        ))}
-      </div>
-    </nav>
-  );
-}
diff --git a/components/sections/RightsPhoneDemo.tsx b/lib/rights-laws.ts
similarity index 50%
rename from components/sections/RightsPhoneDemo.tsx
rename to lib/rights-laws.ts
index a2c5de4..cb6f88c 100644
--- a/components/sections/RightsPhoneDemo.tsx
+++ b/lib/rights-laws.ts
@@ -1,58 +1,7 @@
-"use client";
+// Car-buying laws shown on /rights. Moved out of the old phone demo so the
+// page can list them as plain text.
 
-import { useState, useRef, useEffect } from "react";
-
-// ── State name matching (ported from the prototype) ──────────
-const US_STATE_NAMES = [
-  "Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut",
-  "Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa",
-  "Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan",
-  "Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire",
-  "New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio",
-  "Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota",
-  "Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia",
-  "Wisconsin","Wyoming",
-];
-
-function levenshtein(a: string, b: string): number {
-  const m = a.length, n = b.length;
-  const dp: number[][] = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
-  for (let i = 0; i <= m; i++) dp[i][0] = i;
-  for (let j = 0; j <= n; j++) dp[0][j] = j;
-  for (let i = 1; i <= m; i++) {
-    for (let j = 1; j <= n; j++) {
-      dp[i][j] = a[i - 1] === b[j - 1]
-        ? dp[i - 1][j - 1]
-        : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
-    }
-  }
-  return dp[m][n];
-}
-
-function capitalizeWords(s: string): string {
-  return s.replace(/\w\S*/g, (t) => t.charAt(0).toUpperCase() + t.slice(1).toLowerCase());
-}
-
-function resolveState(raw: string): string | null {
-  const v = raw.trim();
-  if (!v) return null;
-  const lower = v.toLowerCase();
-  if (lower === "ca" || lower === "calif" || lower === "calif.") return "California";
-  if (lower === "tx" || lower === "tex" || lower === "tex.") return "Texas";
-
-  let best: string | null = null;
-  let bestDist = Infinity;
-  for (const name of US_STATE_NAMES) {
-    const d = levenshtein(lower, name.toLowerCase());
-    if (d < bestDist) { bestDist = d; best = name; }
-  }
-  const threshold = Math.max(1, Math.floor((best?.length ?? 0) * 0.25));
-  if (best && bestDist <= threshold) return best;
-  return capitalizeWords(v);
-}
-
-// ── Law data ───────────────────────────────────────────────
-type Law = {
+export type Law = {
   tag: string;
   title: string;
   citation: string;
@@ -61,7 +10,7 @@ type Law = {
   escalation: string;
 };
 
-const federalLaws: Law[] = [
+export const FEDERAL_LAWS: Law[] = [
   { tag: "TILA", title: "Truth in Lending Act", citation: "15 U.S.C. § 1601",
     plain: "The dealer must show you the full true cost of the loan before you sign anything: the APR, the finance charge, and the total of all payments.",
     script: "Show me the APR, the finance charge, and the total of all payments, right now, before I sign anything.",
@@ -84,12 +33,19 @@ const federalLaws: Law[] = [
     escalation: "If the explanation doesn't add up, you can sue for damages, and regulators can pursue civil penalties against the dealer." },
 ];
 
-const STATE_LAWS: Record<string, Law[]> = {
+// Applies everywhere: cars are carved out of the FTC Cooling-Off Rule.
+export const COOLING_OFF: Law = { tag: "FTC-COR", title: "No Automatic Right to Cancel", citation: "16 CFR Part 429, FTC Cooling-Off Rule",
+      plain: "The FTC's Cooling-Off Rule gives buyers three days to cancel certain purchases, but it explicitly excludes cars sold at a dealer's permanent location. Once you sign, the deal is final unless the dealer agrees in writing to something more.",
+      script: "Will you put a cancellation window into the contract, in writing, before I sign?",
+      escalation: "Don't assume a \u201Ccooling-off period\u201D exists by default. Federal law specifically carves cars out of it. If you want an exit, negotiate it into the contract before signing, not after." };
+
+// States we've researched in detail.
+export const STATE_LAWS: Record<string, Law[]> = {
   california: [
     { tag: "AB68-C", title: "2-Day Cancellation Option", citation: "Cal. Veh. Code § 11713.21",
       plain: "You can buy a 2-day right to cancel on a used car under $40,000, but you have to ask for it at the time of signing. It is not automatic.",
       script: "I'd like to purchase the 2-day contract cancellation option.",
-      escalation: "If it's not offered to you upfront, ask directly. Cost is roughly 1% of the price, plus a restocking fee if you actually use it." },
+      escalation: "If it's not offered to you upfront, ask directly. Cost is roughly 1% of the price, plus a restocking fee if you use it." },
     { tag: "AB68-R", title: "Interest Rate Markup Caps", citation: "Cal. Veh. Code § 11711",
       plain: "Dealers can only mark up your interest rate by a capped amount: 2% on loans over 60 months, 2.5% on shorter ones.",
       script: "I'm already pre-approved at this rate, you need to beat it, not just match it.",
@@ -99,7 +55,7 @@ const STATE_LAWS: Record<string, Law[]> = {
       script: "Show me my monthly payment with and without each add-on, itemized, in writing.",
       escalation: "\u201CIt's all one package\u201D is not legal in California. Ask for the line-by-line breakdown before you agree to anything." },
     { tag: "VC-11713", title: "Prohibited Dealer Practices", citation: "Cal. Veh. Code § 11713",
-      plain: "Dealers can't advertise cars they don't actually have, change agreed-upon terms after the fact, or hide a car's known history from you.",
+      plain: "Dealers can't advertise cars they don't have, change agreed-upon terms after the fact, or hide a car's known history from you.",
       script: "Is this exact price and condition still accurate right now, today?",
       escalation: "Bait-and-switch tactics under this code are a documented violation. Keep a copy of the original ad or listing as evidence." },
     { tag: "CCLRA", title: "Consumers Legal Remedies Act", citation: "Cal. Civ. Code § 1750",
@@ -193,7 +149,8 @@ const STATE_LAWS: Record<string, Law[]> = {
   ],
 };
 
-const STATE_DIRECTION: Record<string, string> = {
+// What a 50-state summary says about each other state's lemon law.
+export const STATE_DIRECTION: Record<string, string> = {
   alabama: "covers new vehicles only",
   arizona: "appears to extend some coverage to used vehicles",
   arkansas: "is focused on new vehicles, with notably strong salvage-title disclosure rules",
@@ -235,260 +192,3 @@ const STATE_DIRECTION: Record<string, string> = {
   "west virginia": "covers passenger vehicles and some trucks and vans",
   wyoming: "covers vehicles under 10,000 pounds sold or registered in the state",
 };
-
-function fallbackLaws(label: string): Law[] {
-  const key = label.toLowerCase();
-  const direction = STATE_DIRECTION[key];
-  const directionLine = direction
-    ? `Based on a 50-state legal summary, ${label}'s lemon law ${direction}.`
-    : `We have not yet researched ${label} specifically.`;
-
-  return [
-    { tag: "FTC-COR", title: "No Automatic Right to Cancel", citation: "16 CFR Part 429, FTC Cooling-Off Rule",
-      plain: "The FTC's Cooling-Off Rule gives buyers three days to cancel certain purchases, but it explicitly excludes cars sold at a dealer's permanent location. Once you sign, the deal is final unless the dealer agrees in writing to something more.",
-      script: "Will you put a cancellation window into the contract, in writing, before I sign?",
-      escalation: "Don't assume a \u201Ccooling-off period\u201D exists by default. Federal law specifically carves cars out of it. If you want an exit, negotiate it into the contract before signing, not after." },
-    { tag: "COMING-SOON", title: "State-Specific Laws Coming Soon", citation: "",
-      plain: `${directionLine} Exact statute section numbers have not been independently verified for ${label}, so treat this as a starting point, not legal advice. The five federal protections already apply to you regardless of state.`,
-      script: `Does ${label} have its own cooling-off period, interest rate cap, or add-on disclosure rule?`,
-      escalation: `Search "${label} lemon law" and "${label} used car dealer warranty" on your state Attorney General's website before you sign anything.` },
-  ];
-}
-
-// ── Component ────────────────────────────────────────────────
-type Screen = "entry" | "home" | "laws";
-type Category = "federal" | "state";
-
-export function RightsPhoneDemo() {
-  const [screen, setScreen] = useState<Screen>("entry");
-  const [stateInput, setStateInput] = useState("");
-  const [stateLabel, setStateLabel] = useState("");
-  const [activeCategory, setActiveCategory] = useState<Category>("federal");
-  const [currentLawIndex, setCurrentLawIndex] = useState(0);
-  const [revealed, setRevealed] = useState<Set<number>>(new Set());
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const sectionRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-
-  const resolvedKey = stateLabel.toLowerCase();
-  const stateLaws = stateLabel
-    ? (STATE_LAWS[resolvedKey] ?? fallbackLaws(stateLabel))
-    : [];
-  const stateLinkName = stateLabel ? `${stateLabel} Protections` : "State Protections";
-  const stateLinkMeta = !stateLabel
-    ? "Enter your state to see these"
-    : STATE_LAWS[resolvedKey]
-      ? `${stateLaws.length} laws \u00B7 applies to you`
-      : `What we have so far for ${stateLabel}`;
-  const homeSub = !stateLabel
-    ? "Pick one to start reading."
-    : `Showing what applies in ${stateLabel}.`;
-
-  const activeLaws = activeCategory === "federal" ? federalLaws : stateLaws;
-
-  function submitState() {
-    const resolved = resolveState(stateInput);
-    setStateLabel(resolved ?? "");
-    setScreen("home");
-  }
-
-  function skipState() {
-    setStateLabel("");
-    setScreen("home");
-  }
-
-  function openCategory(cat: Category) {
-    setActiveCategory(cat);
-    setCurrentLawIndex(0);
-    setRevealed(new Set());
-    setScreen("laws");
-  }
-
-  function jumpTo(i: number) {
-    sectionRefs.current[i]?.scrollIntoView({ behavior: "smooth", block: "start" });
-  }
-
-  useEffect(() => {
-    if (screen !== "laws" || !scrollRef.current) return;
-    if (observerRef.current) observerRef.current.disconnect();
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const idx = Number(entry.target.getAttribute("data-index"));
-          if (entry.isIntersecting) {
-            setRevealed((prev) => new Set(prev).add(idx));
-          }
-          if (entry.intersectionRatio > 0.5) {
-            setCurrentLawIndex(idx);
-          }
-        });
-      },
-      { root: scrollRef.current, threshold: [0.15, 0.5] }
-    );
-
-    sectionRefs.current.forEach((el) => el && observer.observe(el));
-    observerRef.current = observer;
-    return () => observer.disconnect();
-  }, [screen, activeLaws.length]);
-
-  return (
-    <div className="rpd-stage">
-      <style>{`
-        .rpd-stage { display: flex; flex-direction: column; align-items: center; width: 100%; }
-        .rpd-phone { width: min(340px, calc(100vw - 3rem)); aspect-ratio: 340 / 700; background: #040207; border-radius: 48px; padding: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 40px 90px -20px rgba(0,0,0,0.6); position: relative; }
-        .rpd-screen { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 36px; overflow: hidden; --rpd-ink:#16131d; --rpd-purple:#6d33c9; --rpd-vivid:#9630a6; --rpd-vivid-deep:#7a2685; --rpd-danger:#c23b32; --rpd-line:rgba(0,0,0,0.1); }
-        .rpd-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; background: #000; border-radius: 18px; z-index: 50; }
-        .rpd-home-indicator { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 110px; height: 4px; background: rgba(0,0,0,0.3); border-radius: 4px; z-index: 50; }
-        .rpd-stack { position: absolute; inset: 0; padding-top: 46px; }
-        .rpd-view { position: absolute; inset: 0; top: 46px; display: flex; flex-direction: column; background: #fff; }
-        .rpd-nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 8px; flex-shrink: 0; }
-        .rpd-back-btn { display: flex; align-items: center; gap: 3px; background: none; border: none; color: var(--rpd-vivid); font-size: 0.88rem; font-weight: 600; padding: 5px 3px; cursor: pointer; font-family: -apple-system, sans-serif; }
-        .rpd-logo { width: 24px; height: auto; }
-        .rpd-entry-wrap, .rpd-home-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 24px; overflow-y: auto; }
-        .rpd-entry-wrap img { margin-bottom: 16px; width: 32px; }
-        .rpd-entry-wrap h1 { font-family: Georgia, serif; font-size: 1.7rem; line-height: 1.1; font-weight: 600; margin: 0 0 8px; color: var(--rpd-ink); }
-        .rpd-entry-wrap p { font-size: 0.85rem; color: var(--rpd-purple); line-height: 1.5; margin: 0 0 22px; font-family: -apple-system, sans-serif; }
-        .rpd-entry-input { width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--rpd-line); color: var(--rpd-ink); font-family: Georgia, serif; font-size: 1.2rem; padding: 5px 2px 10px; outline: none; margin-bottom: 22px; }
-        .rpd-entry-input:focus { border-bottom-color: var(--rpd-vivid); }
-        .rpd-entry-btn { background: var(--rpd-vivid); color: #fff; border: none; border-radius: 12px; padding: 13px 0; font-size: 0.92rem; font-weight: 600; cursor: pointer; width: 100%; font-family: -apple-system, sans-serif; }
-        .rpd-entry-skip { text-align: center; margin-top: 14px; font-size: 0.8rem; color: var(--rpd-purple); background: none; border: none; cursor: pointer; font-family: -apple-system, sans-serif; }
-        .rpd-eyebrow { font-family: Arial, Helvetica, sans-serif; font-size: 0.66rem; color: var(--rpd-purple); display: block; margin-bottom: 8px; }
-        .rpd-home-wrap img { width: 30px; margin-bottom: 12px; }
-        .rpd-home-wrap h1 { font-family: Georgia, serif; font-size: 1.9rem; line-height: 1.06; margin: 0 0 6px; font-weight: 600; color: #9630a6; }
-        .rpd-home-wrap h1 em { font-style: italic; color: #9630a6; }
-        .rpd-home-sub { font-size: 0.82rem; color: var(--rpd-purple); line-height: 1.5; margin: 0 0 30px; font-family: -apple-system, sans-serif; }
-        .rpd-home-link { display: block; padding: 20px 0; border-top: 1px solid var(--rpd-line); cursor: pointer; background: none; border-left: none; border-right: none; border-bottom: none; width: 100%; text-align: left; font-family: -apple-system, sans-serif; }
-        .rpd-home-link:last-of-type { border-bottom: 1px solid var(--rpd-line); }
-        .rpd-home-row { display: flex; align-items: baseline; justify-content: space-between; }
-        .rpd-home-name { font-family: Georgia, serif; font-size: 1.25rem; font-weight: 600; color: var(--rpd-ink); }
-        .rpd-home-arrow { font-size: 1.1rem; color: var(--rpd-purple); }
-        .rpd-home-meta { font-size: 0.76rem; color: var(--rpd-purple); margin-top: 4px; }
-        .rpd-laws-wrap { display: flex; flex: 1; overflow: hidden; }
-        .rpd-laws-scroll { flex: 1; overflow-y: auto; padding: 4px 12px 60px 20px; }
-        .rpd-law-section { padding-top: 14px; padding-bottom: 32px; border-bottom: 1px solid var(--rpd-line); }
-        .rpd-law-section:last-child { border-bottom: none; }
-        .rpd-law-citation { font-size: 0.62rem; color: var(--rpd-purple); display: block; margin-bottom: 6px; font-family: -apple-system, sans-serif; }
-        .rpd-law-title { font-family: Georgia, serif; font-size: 1.45rem; line-height: 1.12; font-weight: 600; margin: 0 0 10px; color: var(--rpd-ink); }
-        .rpd-scroll-prompt { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--rpd-purple); margin-top: 6px; font-family: -apple-system, sans-serif; }
-        .rpd-law-content { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; font-family: -apple-system, sans-serif; }
-        .rpd-law-content.rpd-shown { opacity: 1; transform: translateY(0); }
-        .rpd-plain-text { font-size: 0.9rem; line-height: 1.55; color: var(--rpd-ink); margin: 0 0 18px; }
-        .rpd-rule { border: none; border-top: 1px solid var(--rpd-line); margin: 0 0 18px; }
-        .rpd-script-quote { display: flex; gap: 8px; margin-bottom: 18px; }
-        .rpd-script-quote .rpd-mark { font-family: Georgia, serif; font-size: 1.7rem; color: var(--rpd-purple); line-height: 1; margin-top: -3px; }
-        .rpd-script-quote p { font-family: Georgia, serif; font-style: italic; font-size: 0.95rem; line-height: 1.45; color: var(--rpd-ink); margin: 0; }
-        .rpd-escalation-text { font-size: 0.84rem; line-height: 1.5; color: var(--rpd-danger); }
-        .rpd-rail { width: 26px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 0; }
-        .rpd-rail button { background: none; border: none; color: #8a5fd6; font-size: 0.5rem; font-weight: 600; padding: 2px; cursor: pointer; line-height: 1; }
-        .rpd-rail button.rpd-current { color: var(--rpd-vivid); transform: scale(1.15); }
-      `}</style>
-
-      <div className="rpd-phone">
-        <div className="rpd-screen">
-          <div className="rpd-island" />
-          <div className="rpd-stack">
-
-            {screen === "entry" && (
-              <div className="rpd-view">
-                <div className="rpd-entry-wrap">
-                  <img src="/logo-mark.png" alt="VINdicated logo" />
-                  <h1>Where are you buying?</h1>
-                  <p>Your rights change depending on where you are. Tell us your state so we show you the protections that actually apply.</p>
-                  <input
-                    className="rpd-entry-input"
-                    placeholder="e.g. California"
-                    value={stateInput}
-                    onChange={(e) => setStateInput(e.target.value)}
-                  />
-                  <button className="rpd-entry-btn" onClick={submitState}>Continue</button>
-                  <button className="rpd-entry-skip" onClick={skipState}>Skip for now</button>
-                </div>
-              </div>
-            )}
-
-            {screen === "home" && (
-              <div className="rpd-view">
-                <div className="rpd-home-wrap">
-                  <img src="/logo-mark.png" alt="VINdicated logo" />
-                  <span className="rpd-eyebrow">getvindicated.org</span>
-                  <h1>Know Your<br /><em>Rights.</em></h1>
-                  <p className="rpd-home-sub">{homeSub}</p>
-
-                  <button className="rpd-home-link" onClick={() => openCategory("federal")}>
-                    <div className="rpd-home-row">
-                      <span className="rpd-home-name">Federal Protections</span>
-                      <span className="rpd-home-arrow">{"\u2192"}</span>
-                    </div>
-                    <div className="rpd-home-meta">5 laws \u00B7 apply nationwide</div>
-                  </button>
-
-                  <button className="rpd-home-link" onClick={() => openCategory("state")}>
-                    <div className="rpd-home-row">
-                      <span className="rpd-home-name">{stateLinkName}</span>
-                      <span className="rpd-home-arrow">{"\u2192"}</span>
-                    </div>
-                    <div className="rpd-home-meta">{stateLinkMeta}</div>
-                  </button>
-                </div>
-              </div>
-            )}
-
-            {screen === "laws" && (
-              <div className="rpd-view">
-                <div className="rpd-nav-bar">
-                  <button className="rpd-back-btn" onClick={() => setScreen("home")}>
-                    {"\u2190"} Home
-                  </button>
-                  <img className="rpd-logo" src="/logo-mark.png" alt="VINdicated logo" />
-                </div>
-                <div className="rpd-laws-wrap">
-                  <div className="rpd-laws-scroll" ref={scrollRef}>
-                    {activeLaws.map((law, i) => (
-                      <div
-                        key={law.tag}
-                        className="rpd-law-section"
-                        data-index={i}
-                        ref={(el) => { sectionRefs.current[i] = el; }}
-                      >
-                        {law.citation && <span className="rpd-law-citation">{law.citation}</span>}
-                        <h2 className="rpd-law-title">{law.title}</h2>
-                        {!revealed.has(i) && (
-                          <div className="rpd-scroll-prompt">scroll for the rundown {"\u2193"}</div>
-                        )}
-                        <div className={`rpd-law-content ${revealed.has(i) ? "rpd-shown" : ""}`}>
-                          <p className="rpd-plain-text">{law.plain}</p>
-                          <hr className="rpd-rule" />
-                          <div className="rpd-script-quote">
-                            <span className="rpd-mark">{"\u201C"}</span>
-                            <p>{law.script}{"\u201D"}</p>
-                          </div>
-                          <hr className="rpd-rule" />
-                          <p className="rpd-escalation-text">{law.escalation}</p>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                  <div className="rpd-rail">
-                    {activeLaws.map((law, i) => (
-                      <button
-                        key={law.tag}
-                        className={i === currentLawIndex ? "rpd-current" : ""}
-                        onClick={() => jumpTo(i)}
-                      >
-                        {law.tag.length > 6 ? law.tag.split("-")[0] : law.tag}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            )}
-
-          </div>
-          <div className="rpd-home-indicator" />
-        </div>
-      </div>
-    </div>
-  );
-}

From 2b9f2634a09df126f8b4625212c035624f7dd067 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Oct 2026 23:45:15 +0000
Subject: [PATCH 2/2] Header: plain language picker, purple only for the active
 page

The boxed nav (968a5bf) is already gone in this branch. This removes the
last boxed piece, the bordered language button, and stops nav, dropdown
and language links from turning purple on hover; only the current page's
link is purple. Hover still underlines.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
---
 app/redesign-overrides.css | 11 +++++++----
 app/redesign.css           |  5 +++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/redesign-overrides.css b/app/redesign-overrides.css
index eb96284..165e5c8 100644
--- a/app/redesign-overrides.css
+++ b/app/redesign-overrides.css
@@ -53,12 +53,13 @@
   font-size: 0.92rem;
   color: var(--ink);
   background: transparent;
-  border: 1px solid var(--line);
-  padding: 8px 14px;
+  border: 0;
+  padding: 8px 4px;
   cursor: pointer;
 }
 .rd-hdr .lang > button:hover {
-  border-color: var(--purple);
+  text-decoration: underline;
+  text-underline-offset: 4px;
 }
 .rd-hdr .lang ul {
   position: absolute;
@@ -89,10 +90,12 @@
 }
 .rd-hdr .lang li button:hover,
 .rd-hdr .lang li button[aria-selected="true"] {
-  color: var(--purple);
   text-decoration: underline;
   text-underline-offset: 4px;
 }
+.rd-hdr .lang li button[aria-selected="true"] {
+  color: var(--purple);
+}
 .rd-hdr .lang li button[aria-selected="true"] {
   font-weight: 700;
 }
diff --git a/app/redesign.css b/app/redesign.css
index 719eb8f..f71ee68 100644
--- a/app/redesign.css
+++ b/app/redesign.css
@@ -82,11 +82,12 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .links{display:flex;gap:6px;align-items:center;font-weight:600;font-size:.98rem;list-style:none;margin:0;padding:0}
 .rd .links>li{position:relative}
 .rd .links>li>a{display:block;padding:9px 14px}
-.rd .links>li>a:hover,.rd .links>li>a.active{color:var(--purple);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
+.rd .links>li>a:hover,.rd .links>li>a.active{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
+.rd .links>li>a.active{color:var(--purple)}
 .rd .drop{position:absolute;top:100%;left:0;min-width:230px;padding:10px;background:#fff;border:1px solid var(--line);display:none;flex-direction:column}
 .rd .links>li:hover .drop,.rd .links>li:focus-within .drop{display:flex}
 .rd .drop a{padding:10px 12px}
-.rd .drop a:hover{color:var(--purple);text-decoration:underline;text-underline-offset:4px}
+.rd .drop a:hover{text-decoration:underline;text-underline-offset:4px}
 .rd .links .btn{margin-left:10px;padding:11px 22px}
 .rd .burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}
 @media (max-width:980px){