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 e3af1d3..7c45d20 100644
--- a/app/redesign-overrides.css
+++ b/app/redesign-overrides.css
@@ -61,12 +61,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;
@@ -97,10 +98,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 f867c75..a77e319 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){
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>
-  );
-}