From 07b52eb1d4075031e8f4638783d3f17e04815cd3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Oct 2026 20:08:17 +0000
Subject: [PATCH 1/2] Restore the public site's design as of 38feb50, keeping
 the typed hero

Undoes the public-site design changes from 4a03384, f9eecc5, fde5282,
1f10831, 3cb93ce, 968a5bf, 54520f8 (#105) and b7f6fd7 (#96) by restoring
the 38feb50 version of each public-site file: pages under app/[locale],
redesign.css, redesign-overrides.css, components/sections, lib/fonts.ts,
lib/i18n/dictionary.ts, the news images and the dealer map page. Files
those commits added (app/minimal.css, lib/rights-laws.ts, PpiSteps.tsx)
are removed. Rounded corners, hero overlay cards, the original section
order, the Price Is Right preview, game and build timeline, and the
original header and dividers are back.

Kept:
- The typewriter hero from 1f10831/3cb93ce, on the 38feb50 hero with its
  overlay cards.
- en.json is the 38feb50 file plus the non-design edits since: Pierce
  removed (5a02627), Rizwaan as Strategist (cabbe86), and the plain-
  language copy rewrite (989eae5) wherever its text still exists.
- Everything else unchanged from main: the board hub, lib/brevo.ts,
  proxy.ts, package files, lib/team.ts, lib/team-rank.ts and the other
  locale dictionaries.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/[locale]/about/page.tsx                   |  149 +--
 app/[locale]/documents/page.tsx               |    8 +-
 app/[locale]/fraud/page.tsx                   |   50 +-
 app/[locale]/inspection/page.tsx              |   18 +-
 app/[locale]/join/page.tsx                    |   92 +-
 app/[locale]/map/page.tsx                     |   60 +-
 app/[locale]/page.tsx                         |  158 +--
 app/[locale]/research/page.tsx                |  141 ++-
 app/[locale]/rights/page.tsx                  |  160 ++-
 app/[locale]/team/page.tsx                    |    3 +-
 app/minimal.css                               |  178 ---
 app/redesign-overrides.css                    |  924 +++------------
 app/redesign.css                              | 1036 +++++++++++++----
 .../sections/RightsPhoneDemo.tsx              |  332 +++++-
 components/sections/about/FounderStory.tsx    |   47 +
 components/sections/about/FounderVideo.tsx    |   58 +
 components/sections/about/MissionPillars.tsx  |   36 +
 components/sections/about/QuoteBand.tsx       |    2 +-
 components/sections/about/WhatWeProvide.tsx   |   52 +
 components/sections/about/ZoomSlideshow.tsx   |  127 ++
 components/sections/fraud/FlipCards.tsx       |   31 +
 components/sections/fraud/FourSquare.tsx      |   80 +-
 components/sections/fraud/YoyoScene.tsx       |    7 +-
 components/sections/home/AiScams.tsx          |  130 +++
 components/sections/home/CampusChapters.tsx   |   84 ++
 components/sections/home/EqualFooting.tsx     |   70 ++
 components/sections/home/FollowLinks.tsx      |   61 +
 components/sections/home/FounderStrikes.tsx   |   86 ++
 components/sections/home/FreeResources.tsx    |   37 +
 components/sections/home/HomeCta.tsx          |   22 +
 components/sections/home/HomeHero.tsx         |  157 +++
 .../sections/home/PhoneNotifications.tsx      |   60 +
 components/sections/home/Pillars.tsx          |   44 +
 .../sections/home/PriceIsRightPreview.tsx     |  104 ++
 components/sections/home/PublicKnowledge.tsx  |   36 +
 components/sections/home/ResearchSources.tsx  |   16 +
 components/sections/inspection/PpiDrive.tsx   |  147 +++
 components/sections/inspection/PpiSteps.tsx   |   24 -
 .../sections/research/BuildTimeline.tsx       |   38 +
 .../sections/research/PriceIsRightGame.tsx    |  441 +++++++
 components/sections/research/ProjectCard.tsx  |   71 ++
 components/sections/research/TrackNav.tsx     |   65 ++
 components/sections/research/projects.ts      |   25 +-
 components/sections/shared/CtaBand.tsx        |   59 +-
 components/sections/shared/PageHero.tsx       |    2 +-
 components/sections/shared/icons.tsx          |   37 +
 components/sections/team/TeamRoster.tsx       |   19 +-
 lib/fonts.ts                                  |   13 +-
 lib/i18n/dictionaries/en.json                 |  428 +++++--
 lib/i18n/dictionary.ts                        |   61 +-
 public/images/news/ai-dealer-scams.svg        |   10 +
 public/images/news/california-sb-766.svg      |    5 +
 public/images/news/dealer-warning-letters.svg |    3 +
 public/images/news/junk-fee-settlement.svg    |    6 +
 public/images/news/spoofed-dealer-sites.svg   |    7 +
 public/vindimap/index.html                    |   50 +-
 scripts/scope-prototype-css.py                |  113 ++
 57 files changed, 4456 insertions(+), 1824 deletions(-)
 delete mode 100644 app/minimal.css
 rename lib/rights-laws.ts => components/sections/RightsPhoneDemo.tsx (50%)
 create mode 100644 components/sections/about/FounderStory.tsx
 create mode 100644 components/sections/about/FounderVideo.tsx
 create mode 100644 components/sections/about/MissionPillars.tsx
 create mode 100644 components/sections/about/WhatWeProvide.tsx
 create mode 100644 components/sections/about/ZoomSlideshow.tsx
 create mode 100644 components/sections/fraud/FlipCards.tsx
 create mode 100644 components/sections/home/AiScams.tsx
 create mode 100644 components/sections/home/CampusChapters.tsx
 create mode 100644 components/sections/home/EqualFooting.tsx
 create mode 100644 components/sections/home/FollowLinks.tsx
 create mode 100644 components/sections/home/FounderStrikes.tsx
 create mode 100644 components/sections/home/FreeResources.tsx
 create mode 100644 components/sections/home/HomeCta.tsx
 create mode 100644 components/sections/home/HomeHero.tsx
 create mode 100644 components/sections/home/PhoneNotifications.tsx
 create mode 100644 components/sections/home/Pillars.tsx
 create mode 100644 components/sections/home/PriceIsRightPreview.tsx
 create mode 100644 components/sections/home/PublicKnowledge.tsx
 create mode 100644 components/sections/home/ResearchSources.tsx
 create mode 100644 components/sections/inspection/PpiDrive.tsx
 delete mode 100644 components/sections/inspection/PpiSteps.tsx
 create mode 100644 components/sections/research/BuildTimeline.tsx
 create mode 100644 components/sections/research/PriceIsRightGame.tsx
 create mode 100644 components/sections/research/ProjectCard.tsx
 create mode 100644 components/sections/research/TrackNav.tsx
 create mode 100644 public/images/news/ai-dealer-scams.svg
 create mode 100644 public/images/news/california-sb-766.svg
 create mode 100644 public/images/news/dealer-warning-letters.svg
 create mode 100644 public/images/news/junk-fee-settlement.svg
 create mode 100644 public/images/news/spoofed-dealer-sites.svg
 create mode 100644 scripts/scope-prototype-css.py

diff --git a/app/[locale]/about/page.tsx b/app/[locale]/about/page.tsx
index 3f8e9ad..2be9552 100644
--- a/app/[locale]/about/page.tsx
+++ b/app/[locale]/about/page.tsx
@@ -1,12 +1,14 @@
-import Link from "next/link";
+import { PageHero } from "@/components/sections/shared/PageHero";
+import { CtaBand, PeopleArt } from "@/components/sections/shared/CtaBand";
+import { ZoomSlideshow } from "@/components/sections/about/ZoomSlideshow";
+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 { 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,
@@ -25,121 +27,32 @@ 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 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 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>
-      </div>
+      </PageHero>
+      <ZoomSlideshow dict={dict.zoom} />
+      <MissionPillars dict={dict.mission} />
+      <FounderStory dict={dict.story} />
+      <FounderVideo dict={dict.video} />
+      <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") }}
+        art={<PeopleArt />}
+      />
     </div>
   );
 }
diff --git a/app/[locale]/documents/page.tsx b/app/[locale]/documents/page.tsx
index 4d42dc3..1a223fc 100644
--- a/app/[locale]/documents/page.tsx
+++ b/app/[locale]/documents/page.tsx
@@ -85,7 +85,7 @@ export default async function DocumentsPage({
 
       <section className="pt0" id="report">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.page1.title}</h2>
             <p className="lede">{d.page1.body}</p>
           </div>
@@ -95,7 +95,7 @@ export default async function DocumentsPage({
 
       <section className="band" id="report2">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.page2.title}</h2>
             <p className="lede">{d.page2.body}</p>
           </div>
@@ -105,7 +105,7 @@ export default async function DocumentsPage({
 
       <section id="buyers-guide">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.guide.title}</h2>
             <p className="lede">{d.guide.body}</p>
           </div>
@@ -135,7 +135,7 @@ export default async function DocumentsPage({
               ))}
             </div>
           </div>
-          <div className="grid3 key3 mt48">
+          <div className="grid3 key3 mt56">
             {d.guide.keys.map((k) => (
               <div className="card" key={k.title}>
                 <h4>{k.kicker}</h4>
diff --git a/app/[locale]/fraud/page.tsx b/app/[locale]/fraud/page.tsx
index 4966e7d..2d37881 100644
--- a/app/[locale]/fraud/page.tsx
+++ b/app/[locale]/fraud/page.tsx
@@ -9,6 +9,7 @@ import { YoyoScene } from "@/components/sections/fraud/YoyoScene";
 import { FourSquare } from "@/components/sections/fraud/FourSquare";
 import { FeeReceipt } from "@/components/sections/fraud/FeeReceipt";
 import { AprCalculator } from "@/components/sections/fraud/AprCalculator";
+import { FlipCards } from "@/components/sections/fraud/FlipCards";
 import { getDictionary } from "@/lib/i18n/get-dictionary";
 import { localizeHref, type Locale } from "@/lib/i18n/config";
 import { caveat } from "@/lib/fonts";
@@ -28,7 +29,7 @@ type LawCard = { tag: string; title: string; body: string; say: string };
 function Law({ card, className }: { card: LawCard; className?: string }) {
   return (
     <div className={`card${className ? ` ${className}` : ""}`}>
-      <p className="label">{card.tag}</p>
+      <span className="tag">{card.tag}</span>
       <h3>{card.title}</h3>
       <p>{card.body}</p>
       <div className="say">{card.say}</div>
@@ -60,7 +61,7 @@ export default async function FraudPage({
 
       <section className="pt0" id="pinkslip">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.pinkSlip.title}</h2>
             <p className="lede">{d.pinkSlip.body}</p>
           </div>
@@ -86,7 +87,7 @@ export default async function FraudPage({
 
       <section className="band" id="flags">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.flags.title}</h2>
             <p className="lede">{d.flags.body}</p>
           </div>
@@ -96,9 +97,9 @@ export default async function FraudPage({
 
       <YoyoScene dict={d.yoyo} />
 
-      <section id="foursquare">
+      <section className="band" id="foursquare">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.fourSquare.title}</h2>
             <p className="lede">{d.fourSquare.body}</p>
           </div>
@@ -108,7 +109,7 @@ export default async function FraudPage({
 
       <section id="receipt">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.receipt.title}</h2>
             <p className="lede">{d.receipt.body}</p>
           </div>
@@ -118,7 +119,7 @@ export default async function FraudPage({
 
       <section className="band" id="apr">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.apr.title}</h2>
             <p className="lede">{d.apr.body}</p>
           </div>
@@ -128,7 +129,7 @@ export default async function FraudPage({
 
       <section id="law">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.law.title}</h2>
             <p className="lede">{d.law.body}</p>
           </div>
@@ -162,21 +163,17 @@ export default async function FraudPage({
         </div>
       </section>
 
-      <section className="band" id="after">
-        <div className="wrap prose">
-          <h2 className="h2">{d.after.title}</h2>
-          <ol className="num-list">
-            {d.after.items.map((it) => (
-              <li key={it.front}>
-                <h3>{it.front}</h3>
-                <p>{it.back}</p>
-              </li>
-            ))}
-          </ol>
+      <section className="band">
+        <div className="wrap">
+          <div className="center">
+            <h2 className="h2">{d.after.title}</h2>
+            <p className="lede">{d.after.body}</p>
+          </div>
+          <FlipCards items={d.after.items} />
         </div>
       </section>
 
-      <section id="brochure">
+      <section className="pt0 brochure-section" id="brochure">
         <div className="wrap">
           <div className="bro">
             <div className="bro-cover">
@@ -189,9 +186,13 @@ export default async function FraudPage({
               />
             </div>
             <div>
+              <span className="tag">{d.brochure.tag}</span>
               <h2 className="h2">{d.brochure.title}</h2>
               <p className="lede">{d.brochure.body}</p>
-              <p className="bro-soon">{d.brochure.soon}</p>
+              <div className="bro-soon">
+                <span className="dot-live" aria-hidden="true" />
+                {d.brochure.soon}
+              </div>
             </div>
           </div>
         </div>
@@ -202,6 +203,13 @@ export default async function FraudPage({
         body={d.cta.body}
         primary={{ label: d.cta.primary, href: href("/documents") }}
         secondary={{ label: d.cta.secondary, href: href("/inspection") }}
+        art={
+          <svg viewBox="0 0 260 260" aria-hidden="true">
+            <circle cx="130" cy="130" r="120" fill="rgba(255,255,255,.12)" />
+            <path d="M130 50l70 30v50c0 45-30 75-70 90-40-15-70-45-70-90V80z" fill="#fff" />
+            <path d="M100 135l22 22 40-44" fill="none" stroke="#9533A5" strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        }
       />
     </div>
   );
diff --git a/app/[locale]/inspection/page.tsx b/app/[locale]/inspection/page.tsx
index c28ed0d..510f9b3 100644
--- a/app/[locale]/inspection/page.tsx
+++ b/app/[locale]/inspection/page.tsx
@@ -3,7 +3,7 @@ import { PageHero } from "@/components/sections/shared/PageHero";
 import { Rich } from "@/components/sections/shared/Rich";
 import { QuoteBand } from "@/components/sections/about/QuoteBand";
 import { EngineInspector } from "@/components/sections/inspection/EngineInspector";
-import { PpiSteps } from "@/components/sections/inspection/PpiSteps";
+import { PpiDrive } from "@/components/sections/inspection/PpiDrive";
 import { getDictionary } from "@/lib/i18n/get-dictionary";
 import type { Locale } from "@/lib/i18n/config";
 
@@ -59,7 +59,7 @@ export default async function InspectionPage({
 
       <section className="band" id="engine">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.engine.title}</h2>
             <p className="lede">{d.engine.body}</p>
           </div>
@@ -69,13 +69,13 @@ export default async function InspectionPage({
 
       <section id="where">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{d.where.title}</h2>
           </div>
-          <div className="grid2 where mt48">
+          <div className="grid2 where mt56">
             {d.where.cards.map((c, i) => (
-              <div className="card" key={c.title}>
-                {i === 1 && <p className="label">{d.where.recommended}</p>}
+              <div className={`card${i === 1 ? " where-rec" : ""}`} key={c.title}>
+                {i === 1 && <span className="tag">{d.where.recommended}</span>}
                 <h3>{c.title}</h3>
                 {c.paras.map((p, k) => (
                   <p key={k}>
@@ -126,9 +126,11 @@ export default async function InspectionPage({
         </div>
       </section>
 
-      <QuoteBand text={d.quote.text} cite={d.quote.cite} />
+      <div className="quote-pad">
+        <QuoteBand text={d.quote.text} cite={d.quote.cite} />
+      </div>
 
-      <PpiSteps dict={d.schedule} />
+      <PpiDrive dict={d.schedule} />
     </div>
   );
 }
diff --git a/app/[locale]/join/page.tsx b/app/[locale]/join/page.tsx
index 868f617..1ad38fd 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,48 +17,70 @@ export default async function JoinPage({
   const d = (await getDictionary(locale as Locale)).joinPage;
 
   return (
-    <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 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>
+      </PageHero>
 
-        <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>
+      <section className="pt0" id="chapters">
+        <div className="wrap">
+          <div className="center">
+            <h2 className="h2">{d.chapters.title}</h2>
           </div>
-        ))}
+          <div className="chapters">
+            {d.chapters.items.map((c) => (
+              <div className="card chapter" key={c.name}>
+                <span className="tag">{c.tag}</span>
+                <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>
 
-        <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 className="band">
+        <div className="wrap">
+          <div className="center">
+            <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>
 
-        <section id="apply">
-          <h2>{d.form.title}</h2>
+      <section id="apply">
+        <div className="wrap apply-wrap">
+          <h2 className="h2">{d.form.title}</h2>
           <ApplyForm dict={d} />
-        </section>
+        </div>
+      </section>
 
-        <section id="contact">
-          <h2>{d.contact.title}</h2>
-          <p>{d.contact.body}</p>
+      <section className="band" id="contact">
+        <div className="wrap apply-wrap">
+          <h2 className="h2">{d.contact.title}</h2>
+          <p className="lede mt18">{d.contact.body}</p>
           <ContactForm dict={d.contact} />
-        </section>
-      </div>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/app/[locale]/map/page.tsx b/app/[locale]/map/page.tsx
index cae2fde..63bdf61 100644
--- a/app/[locale]/map/page.tsx
+++ b/app/[locale]/map/page.tsx
@@ -3,6 +3,7 @@ import { MapGate } from "@/components/sections/map/MapGate";
 import { getDictionary } from "@/lib/i18n/get-dictionary";
 import { getRouteMetadata } from "@/lib/i18n/metadata";
 import { localizeHref, type Locale } from "@/lib/i18n/config";
+import { bitter } from "@/lib/fonts";
 
 // The satellite map is a standalone Leaflet page in public/vindimap (from
 // the redesign handoff). It's embedded here after the visitor accepts the
@@ -11,11 +12,11 @@ const MAP_SRC = "/vindimap/index.html";
 
 // Same order as mapPage.news.items.
 const NEWS = [
-  "https://www.thedrive.com/features/ai-car-dealer-scams-are-infesting-facebook-marketplace-and-theyre-working",
-  "https://consumer.ftc.gov/consumer-alerts/2026/09/scammers-are-spoofing-car-dealership-websites-what-you-need-know",
-  "https://www.hinshawlaw.com/en/insights/blogs/consumer-crossroads-where-financial-services-and-litigation-intersect/federal-and-state-regulators-continue-crackdown-on-junk-fees-with-dollar4-million-auto-dealer-settlement",
-  "https://pirg.org/articles/car-dealerships-nationwide-warned-to-stop-junk-fees-other-deceptive-tactics/",
-  "https://calmatters.org/politics/2025/12/california-new-law-buying-cars/",
+  { url: "https://www.thedrive.com/features/ai-car-dealer-scams-are-infesting-facebook-marketplace-and-theyre-working", img: "ai-dealer-scams" },
+  { url: "https://consumer.ftc.gov/consumer-alerts/2026/09/scammers-are-spoofing-car-dealership-websites-what-you-need-know", img: "spoofed-dealer-sites" },
+  { url: "https://www.hinshawlaw.com/en/insights/blogs/consumer-crossroads-where-financial-services-and-litigation-intersect/federal-and-state-regulators-continue-crackdown-on-junk-fees-with-dollar4-million-auto-dealer-settlement", img: "junk-fee-settlement" },
+  { url: "https://pirg.org/articles/car-dealerships-nationwide-warned-to-stop-junk-fees-other-deceptive-tactics/", img: "dealer-warning-letters" },
+  { url: "https://calmatters.org/politics/2025/12/california-new-law-buying-cars/", img: "california-sb-766" },
 ];
 
 export async function generateMetadata({
@@ -36,7 +37,7 @@ export default async function MapPage({
   const d = (await getDictionary(locale as Locale)).mapPage;
 
   return (
-    <div className="rd rd-page">
+    <div className={`rd rd-page ${bitter.variable}`}>
       <PageHero title={d.hero.title} body={d.hero.body} />
       <section className="pt0">
         <div className="wrap">
@@ -47,27 +48,36 @@ export default async function MapPage({
           />
         </div>
       </section>
-      <section id="news">
-        <div className="wrap prose">
-          <h2 className="h2">{d.news.title}</h2>
-          <p className="lede">{d.news.body}</p>
-          <ul className="news-list">
+      <section className="band" id="news">
+        <div className="wrap">
+          <div className="center">
+            <h2 className="h2">{d.news.title}</h2>
+            <p className="lede">{d.news.body}</p>
+          </div>
+          <div className="nw-grid">
             {d.news.items.map((n, i) => (
-              <li key={n.title}>
-                <h3>
-                  <a href={NEWS[i]} target="_blank" rel="noopener noreferrer">
-                    {n.title}
-                  </a>
-                </h3>
-                <p className="news-by">{n.byline}</p>
-                <p>{n.dek}</p>
-                <p>
-                  <b>{n.takeLabel}:</b> {n.take}
-                </p>
-              </li>
+              <a key={n.title} className="nw" href={NEWS[i].url} target="_blank" rel="noopener noreferrer">
+                <div className="nw-img">
+                  {/* Decorative illustration; plain <img> keeps the SVG crisp. */}
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src={`/images/news/${NEWS[i].img}.svg`} alt="" loading="lazy" />
+                  <span className="nw-credit">{d.news.credit}</span>
+                </div>
+                <div className="nw-body">
+                  <span className="nw-kicker">{n.kicker}</span>
+                  <h3>{n.title}</h3>
+                  <p className="nw-by">{n.byline}</p>
+                  <p className="nw-dek">{n.dek}</p>
+                  <div className="nw-take">
+                    <b>{n.takeLabel}</b>
+                    {n.take}
+                  </div>
+                  <span className="nw-go">{n.cta}</span>
+                </div>
+              </a>
             ))}
-          </ul>
-          <p className="ai-src">{d.news.footnote}</p>
+          </div>
+          <p className="ai-src news-note">{d.news.footnote}</p>
         </div>
       </section>
     </div>
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 4049d38..1cbf110 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,23 +1,23 @@
 import type { Metadata } from "next";
-import Link from "next/link";
-import { Rich } from "@/components/sections/shared/Rich";
+import { HomeHero } from "@/components/sections/home/HomeHero";
+import { ResearchSources } from "@/components/sections/home/ResearchSources";
+import { PublicKnowledge } from "@/components/sections/home/PublicKnowledge";
+import { EqualFooting } from "@/components/sections/home/EqualFooting";
+import { PriceIsRightPreview } from "@/components/sections/home/PriceIsRightPreview";
+import { CampusChapters } from "@/components/sections/home/CampusChapters";
+import { FollowLinks } from "@/components/sections/home/FollowLinks";
+import { AiScams } from "@/components/sections/home/AiScams";
+import { Pillars } from "@/components/sections/home/Pillars";
+import { FounderStrikes } from "@/components/sections/home/FounderStrikes";
+import { FreeResources } from "@/components/sections/home/FreeResources";
+import { HomeCta } from "@/components/sections/home/HomeCta";
 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,
@@ -61,117 +61,33 @@ 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 { hero, ppi, publicKnowledge, footing, chapters, follow, pillars, free } = home;
-  const [inspection, fraud] = pillars.items;
-
-  return (
-    <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>
-        ))}
+  const ppi = href("/inspection");
+  const fraud = href("/fraud");
+  const story = href("/about#story");
 
-        <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>
+  return (
+    <div className="rd rd-page">
+      <HomeHero dict={home.hero} ppiHref={ppi} storyHref={story} />
+      <ResearchSources dict={home.sources} />
+      <PublicKnowledge dict={home.publicKnowledge} ppiHref={ppi} fraudHref={fraud} />
+      <EqualFooting dict={home.footing} />
+      <PriceIsRightPreview
+        dict={home.preview}
+        locale={locale}
+        gameHref={href("/research#pir")}
+      />
+      <CampusChapters dict={home.chapters} joinHref={href("/join")} />
+      <FollowLinks dict={home.follow} />
+      <AiScams dict={home.ai} rightsHref={href("/fraud#law")} />
+      <Pillars dict={home.pillars} ppiHref={ppi} fraudHref={fraud} />
+      <FounderStrikes dict={home.strikes} storyHref={story} />
+      <FreeResources dict={home.free} />
+      <HomeCta
+        dict={home.cta}
+        ppiHref={ppi}
+        documentsHref={href("/documents")}
+      />
     </div>
   );
 }
diff --git a/app/[locale]/research/page.tsx b/app/[locale]/research/page.tsx
index 44c1213..c50818a 100644
--- a/app/[locale]/research/page.tsx
+++ b/app/[locale]/research/page.tsx
@@ -1,9 +1,14 @@
-import Link from "next/link";
-import { TRACKS, applyHref } from "@/components/sections/research/projects";
+import type { ReactNode } from "react";
+import { PageHero } from "@/components/sections/shared/PageHero";
+import { ChecklistArt, CtaBand } from "@/components/sections/shared/CtaBand";
+import { TrackNav } from "@/components/sections/research/TrackNav";
+import { ProjectCard } from "@/components/sections/research/ProjectCard";
+import { PriceIsRightGame } from "@/components/sections/research/PriceIsRightGame";
+import { BuildTimeline } from "@/components/sections/research/BuildTimeline";
+import { TRACKS, type TrackKey } 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,
@@ -14,6 +19,28 @@ export async function generateMetadata({
   return getRouteMetadata(locale, "research", "/research");
 }
 
+const TRACK_ICONS: Record<TrackKey, ReactNode> = {
+  app: (
+    <>
+      <rect x="7" y="2" width="10" height="20" rx="2" />
+      <path d="M11 18h2" />
+    </>
+  ),
+  data: <path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />,
+  research: (
+    <>
+      <circle cx="11" cy="11" r="6" />
+      <path d="M20 20l-4.5-4.5" />
+    </>
+  ),
+  outreach: (
+    <>
+      <path d="M3 11l14-6v14L3 13z" />
+      <path d="M7 13v5a2 2 0 0 0 4 0v-3" />
+    </>
+  ),
+};
+
 export default async function ResearchPage({
   params,
 }: {
@@ -24,57 +51,63 @@ export default async function ResearchPage({
   const joinHref = localizeHref(locale as Locale, "/join");
 
   return (
-    <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 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="track-head">
+                <div className="icon" aria-hidden="true">
+                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#9533A5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    {TRACK_ICONS[track.key]}
+                  </svg>
+                </div>
+                <div>
+                  <h2 className="h2">{copy.title}</h2>
+                  <p className="lede">{copy.body}</p>
+                </div>
+              </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>
+              {track.key === "data" && (
+                <>
+                  <PriceIsRightGame dict={d.game} locale={locale} />
+                  <BuildTimeline dict={d.timeline} />
+                </>
+              )}
+            </div>
+          </section>
+        );
+      })}
+      <CtaBand
+        title={d.cta.title}
+        body={d.cta.body}
+        primary={{ label: d.cta.button, href: `${joinHref}#apply` }}
+        art={<ChecklistArt />}
+      />
     </div>
   );
 }
diff --git a/app/[locale]/rights/page.tsx b/app/[locale]/rights/page.tsx
index 7de43f6..452c8bf 100644
--- a/app/[locale]/rights/page.tsx
+++ b/app/[locale]/rights/page.tsx
@@ -1,8 +1,12 @@
-import Link from "next/link";
+import {
+  PageHero,
+  FadeUp,
+  SectionTitle,
+  InfoBox,
+  Button,
+} from "@/components/ui";
+import { RightsPhoneDemo } from "@/components/sections/RightsPhoneDemo";
 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,
@@ -13,90 +17,76 @@ export async function generateMetadata({
   return getRouteMetadata(locale, "rights", "/rights");
 }
 
-const titleCase = (s: string) => s.replace(/\b\w/g, (c) => c.toUpperCase());
-
-function LawText({ law, heading: H }: { law: Law; heading: "h3" | "h4" }) {
+export default function RightsPage() {
   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>
-  );
-}
+    <>
+      <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."
+      />
 
-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" />
-        ))}
-
-        <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>
-        ))}
+      {/* 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 />
+    </div>
+  </section>
+</FadeUp>
 
-        <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>
+      {/* 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>
 
-        <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>
+          <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>
+    </>
   );
 }
diff --git a/app/[locale]/team/page.tsx b/app/[locale]/team/page.tsx
index 04b7992..cfdef46 100644
--- a/app/[locale]/team/page.tsx
+++ b/app/[locale]/team/page.tsx
@@ -1,5 +1,5 @@
 import { PageHero } from "@/components/sections/shared/PageHero";
-import { CtaBand } from "@/components/sections/shared/CtaBand";
+import { CtaBand, PeopleArt } from "@/components/sections/shared/CtaBand";
 import {
 	TeamRoster,
 	type RosterMember,
@@ -72,6 +72,7 @@ export default async function TeamPage({
 					title={d.cta.title}
 					body={d.cta.body}
 					primary={{ label: d.cta.button, href: localizeHref(locale as Locale, "/join") }}
+					art={<PeopleArt />}
 				/>
 			</div>
 		</div>
diff --git a/app/minimal.css b/app/minimal.css
deleted file mode 100644
index 27f6ba7..0000000
--- a/app/minimal.css
+++ /dev/null
@@ -1,178 +0,0 @@
-/*
- * 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 7c45d20..e8026fc 100644
--- a/app/redesign-overrides.css
+++ b/app/redesign-overrides.css
@@ -1,6 +1,7 @@
 /*
- * Next.js-specific adjustments and the plain layouts added after the
- * prototype. Base styles live in app/redesign.css.
+ * Next.js-specific adjustments on top of the generated app/redesign.css.
+ * Keep prototype styles in redesign.css (regenerate it with
+ * scripts/scope-prototype-css.py) and put anything hand-written here.
  */
 
 /* globals.css gives legacy headings Lora; the redesign uses one family. */
@@ -30,19 +31,12 @@
 }
 
 /* ---------- Header ---------- */
-/* A plain full-width bar with one thin line along the bottom. The nav is
-   75px + the 1px line = 76px, the height the sticky bars and panels
-   elsewhere (track nav, scroll tours, slideshow) and the mobile menu's
-   `top` assume. */
 .rd-hdr {
   z-index: 100;
-  background: #fff;
-  border-bottom: 1px solid var(--line);
-  padding: 0;
+  -webkit-backdrop-filter: blur(12px);
 }
 .rd-hdr .nav {
   gap: 16px;
-  height: 75px;
 }
 .rd-hdr .right {
   display: flex;
@@ -61,13 +55,13 @@
   font-size: 0.92rem;
   color: var(--ink);
   background: transparent;
-  border: 0;
-  padding: 8px 4px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 8px 14px;
   cursor: pointer;
 }
 .rd-hdr .lang > button:hover {
-  text-decoration: underline;
-  text-underline-offset: 4px;
+  background: var(--tint);
 }
 .rd-hdr .lang ul {
   position: absolute;
@@ -78,6 +72,8 @@
   padding: 8px;
   background: #fff;
   border: 1px solid var(--line);
+  border-radius: 16px;
+  box-shadow: 0 20px 40px -20px rgba(42, 15, 49, 0.3);
   z-index: 5;
 }
 [dir="rtl"] .rd-hdr .lang ul {
@@ -93,15 +89,13 @@
   color: var(--ink);
   background: none;
   border: 0;
+  border-radius: 10px;
   padding: 9px 12px;
   cursor: pointer;
 }
 .rd-hdr .lang li button:hover,
 .rd-hdr .lang li button[aria-selected="true"] {
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-.rd-hdr .lang li button[aria-selected="true"] {
+  background: var(--tint);
   color: var(--purple);
 }
 .rd-hdr .lang li button[aria-selected="true"] {
@@ -134,6 +128,7 @@
     display: flex;
     position: static;
     border: 0;
+    box-shadow: none;
     padding: 0 0 6px 14px;
     min-width: 0;
   }
@@ -141,248 +136,34 @@
     margin: 10px 0 0;
   }
 }
-[dir="rtl"] .rd-hdr .drop {
-  left: auto;
-  right: 0;
-}
-
-/* ---------- Shared ---------- */
-/* Section intros sit on the left, above whatever follows. */
-.rd .intro {
-  max-width: 760px;
-}
-.rd .intro .lede {
-  margin-top: 16px;
-}
-/* A single left-aligned reading column. */
-.rd .prose > * {
-  max-width: 840px;
-}
-.rd .prose > .lede {
-  margin-top: 16px;
-}
-.rd .split-head {
-  display: grid;
-  grid-template-columns: 0.85fr 1.15fr;
-  gap: 64px;
-  align-items: start;
-}
-.rd .split-head .lede {
-  margin-top: 16px;
-}
-@media (max-width: 860px) {
-  .rd .split-head {
-    grid-template-columns: 1fr;
-    gap: 32px;
-  }
-}
-.rd .inline-link {
-  color: var(--purple);
-  font-weight: 700;
-}
-.rd .inline-link:hover {
-  text-decoration: underline;
-}
-/* A small text label above a heading, such as a law's name. */
-.rd .label {
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: var(--purple-deep);
-  margin: 0 0 8px;
-}
-.rd .label.red {
-  color: var(--red);
-}
-/* Severity labels keep their color as a small square chip. */
-.rd .tag[class*="sev-"] {
-  padding: 3px 8px;
-}
-.rd .link-card {
-  display: block;
-  transition: border-color 0.2s;
-}
-.rd .link-card:hover {
-  border-color: var(--purple);
-}
-.rd .link-card:hover h3 {
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-.rd .link-card h3 {
-  font-size: 1.4rem;
-  margin-bottom: 10px;
-}
-.rd .link-card p {
-  line-height: 1.7;
-}
-/* Numbered steps: the number in the margin, then a heading and a line. */
-.rd .num-list {
-  list-style: none;
-  padding: 0;
-  margin-top: 32px;
-  counter-reset: n;
-}
-.rd .num-list li {
-  counter-increment: n;
-  display: grid;
-  grid-template-columns: 44px 1fr;
-  column-gap: 12px;
-  padding: 20px 0;
-  border-top: var(--divider);
-}
-.rd .num-list li::before {
-  content: counter(n);
-  grid-row: span 2;
-  font-weight: 700;
-  font-size: 1.4rem;
-  line-height: 1.2;
-  color: var(--purple);
-}
-.rd .num-list h3 {
-  font-size: 1.2rem;
-  line-height: 1.35;
-}
-.rd .num-list p {
-  margin-top: 6px;
-  line-height: 1.7;
-}
-.rd .prose .alert {
-  margin-top: 28px;
-}
-/* Closing call to action: heading, a line of text, a button. */
-.rd .cta .lede {
-  margin: 14px 0 28px;
-}
-.rd .quote blockquote {
-  margin: 0;
-}
-.rd .quote {
-  margin: 0;
-  max-width: 880px;
-}
-.rd .quote p {
-  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
-  font-weight: 700;
-  line-height: 1.4;
-}
-.rd .quote cite {
-  display: block;
-  margin-top: 14px;
-  font-style: normal;
-  font-weight: 600;
-  color: var(--purple-deep);
-}
-
 
 /* ---------- Home ---------- */
+.rd .hero-photo img {
+  height: auto;
+}
 .rd .strip h2 {
   font-size: 1rem;
   font-weight: 700;
+  letter-spacing: 0;
 }
 .rd .sources {
   list-style: none;
   padding: 0;
 }
-.rd .what .lede {
-  margin: 0 0 28px;
-}
-@media (max-width: 960px) {
-  .rd .what {
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-}
-/* Home: "You shouldn't pay more" — heading and the Unruh quote side by
-   side, then the three numbers as cards. No rule beside the quote. */
-.rd .footing-top {
-  display: grid;
-  grid-template-columns: 1.1fr 0.9fr;
-  gap: 56px;
-  align-items: start;
-}
-.rd .footing-top .lede {
-  margin-top: 18px;
-}
-.rd .footing-law {
-  margin: 0;
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: var(--radius-card);
-  padding: 28px 30px;
-  font-size: 0.98rem;
-  line-height: 1.65;
-}
-.rd .footing-law blockquote {
-  margin: 0;
-  font-style: italic;
-}
-.rd .footing-law cite {
-  display: block;
-  margin-top: 14px;
-  font-style: normal;
-  font-weight: 700;
-  color: var(--purple-deep);
-}
-.rd .stats {
-  list-style: none;
-  padding: 0;
-  margin: 56px 0 0;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-}
-.rd .stats li {
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: var(--radius-card);
-  padding: 32px 28px;
-}
-.rd .stats .big {
-  margin-bottom: 22px;
-}
-.rd .stats h3 {
-  font-size: 1.2rem;
-  line-height: 1.35;
-}
-.rd .stats p {
-  margin-top: 12px;
-  font-size: 1rem;
-  line-height: 1.7;
-}
-.rd .stats cite {
-  display: block;
-  margin-top: auto;
-  padding-top: 18px;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--purple-deep);
-}
-@media (max-width: 960px) {
-  .rd .footing-top {
-    grid-template-columns: 1fr;
-    gap: 32px;
-  }
-  .rd .stats {
-    grid-template-columns: 1fr;
-  }
-}
 .rd .pir-tags {
   list-style: none;
   padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 16px;
-  font-weight: 600;
-  font-size: 0.95rem;
 }
-.rd .pir-tags li.bad {
-  color: var(--red);
+.rd .pir-tags li {
+  background: var(--tint);
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-weight: 700;
+  font-size: 0.92rem;
+  line-height: 1.3;
 }
-.rd .pir-tags li.loc {
-  color: var(--purple);
+.rd .pv .h2 {
+  margin-top: 14px;
 }
 .rd .pv .lede {
   margin-top: 16px;
@@ -394,187 +175,80 @@
   width: auto;
   height: auto;
 }
-.rd .campus-grid {
-  margin-top: 48px;
-}
-.rd .campus-body h3 {
-  line-height: 1.3;
-}
-.rd .campus:hover .campus-go {
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-.rd .follow-list {
+.rd .aisteps {
   list-style: none;
   padding: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  column-gap: 32px;
-}
-.rd .follow-list a {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 18px 0;
-  border-top: var(--divider);
-}
-.rd .follow-list span {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--purple-deep);
-}
-.rd .follow-list b {
-  font-size: 1.1rem;
-}
-.rd .follow-list a:hover b {
-  color: var(--purple);
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-@media (max-width: 560px) {
-  .rd .follow-list {
-    grid-template-columns: 1fr;
-  }
-}
-.rd .tabs {
-  margin-top: 36px;
-}
-.rd .story-body p {
-  font-size: 1.05rem;
 }
-.rd .story-body .btn {
-  margin-top: 6px;
+.rd .ai-tips .ctas {
+  margin-top: 28px;
 }
 .rd .checks svg {
   width: 22px;
   height: 22px;
 }
-.rd .offer h4 {
-  font-size: 1.05rem;
-}
-
-/* ---------- About ---------- */
-.rd .photo-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24px;
-  margin-top: 40px;
-}
-.rd .photo-grid figure {
-  margin: 0;
-}
-.rd .photo-grid img {
+.rd .pcard {
   display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 3/2;
-  object-fit: cover;
+  text-align: start;
 }
-@media (max-width: 640px) {
-  .rd .photo-grid {
-    grid-template-columns: 1fr;
-  }
+.rd .pcard-line {
+  border: 1px solid var(--line);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
 }
-.rd .pillar h3 {
-  font-size: 1.5rem;
-  margin-bottom: 8px;
+.rd .pcard-line:hover {
+  border-color: var(--purple);
+  box-shadow: 0 24px 48px -28px rgba(94, 26, 107, 0.45);
 }
-.rd .pillar p {
-  font-size: 1.05rem;
-  line-height: 1.7;
+.rd .story-body .btn {
+  margin-top: 6px;
 }
-.rd .strike {
-  margin-top: 40px;
+
+/* ---------- Right-to-left locales ---------- */
+[dir="rtl"] .rd .campus-go svg,
+[dir="rtl"] .rd .arrow-flip {
+  transform: scaleX(-1);
 }
-.rd .strike h3 {
-  font-size: 1.45rem;
-  line-height: 1.3;
+[dir="rtl"] .rd .campus:hover .campus-go svg {
+  transform: scaleX(-1) translateX(4px);
 }
-.rd .strike-n {
-  color: var(--purple);
-  margin-right: 6px;
+[dir="rtl"] .rd .soc-go {
+  right: auto;
+  left: 20px;
 }
-.rd .strike-meta {
-  margin: 4px 0 10px;
-  font-weight: 600;
-  color: var(--purple-deep);
+
+/* ---------- Shared ---------- */
+.rd .inline-link {
+  color: var(--purple);
+  font-weight: 700;
 }
-.rd .strike p:last-child {
-  font-size: 1.1rem;
-  line-height: 1.8;
+.rd .inline-link:hover {
+  text-decoration: underline;
 }
-.rd .pull {
-  margin: 44px 0 0;
-  border-left: 0;
-  padding: 0;
+
+/* ---------- About ---------- */
+.rd .a-hero p {
+  margin-left: auto;
+  margin-right: auto;
 }
 .rd .fv-section {
   padding-top: 88px;
 }
-.rd .ai {
-  display: grid;
-  grid-template-columns: 1.1fr 0.9fr;
-  gap: 64px;
-  align-items: start;
-}
-.rd .ai .lede {
-  margin-top: 16px;
-}
-.rd .ai-side {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-.rd .ai-save h3 {
-  font-size: 1.4rem;
-  margin: 10px 0 8px;
-}
-.rd .ai-save p {
-  line-height: 1.7;
-  margin-bottom: 10px;
-}
-.rd .ai-tips h3 {
-  font-size: 1.4rem;
-  margin-bottom: 18px;
-}
-.rd .ai-tips .ctas {
-  margin-top: 24px;
-}
-@media (max-width: 900px) {
-  .rd .ai {
-    grid-template-columns: 1fr;
-    gap: 40px;
-  }
+.rd .pull {
+  margin-inline: 0;
 }
-.rd .def-list {
+.rd figure.quote-band {
   margin: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  column-gap: 32px;
-}
-.rd .def-list div {
-  padding: 18px 0;
-  border-top: var(--divider);
 }
-.rd .def-list dt {
-  font-weight: 700;
-  font-size: 1.15rem;
-}
-.rd .def-list dd {
-  margin: 4px 0 0;
-  line-height: 1.7;
-}
-@media (max-width: 560px) {
-  .rd .def-list {
-    grid-template-columns: 1fr;
-  }
+.rd .quote-band blockquote {
+  margin: 0;
 }
 
 /* ---------- Team ---------- */
 /* The campus filter toggles are buttons with aria-pressed, not tabs. */
 .rd .tabs button[aria-pressed="true"] {
-  color: var(--purple);
-  border-bottom-color: var(--purple);
+  background: var(--purple);
+  color: #fff;
 }
 .rd .avatar-img {
   width: 96px;
@@ -588,21 +262,25 @@
 }
 
 /* ---------- Projects ---------- */
-.rd section .intro + .projects {
-  margin-top: 40px;
+.rd .chips-sm {
+  list-style: none;
+  padding: 0;
 }
-.rd .proj-chapter {
+.rd .chips-sm li {
+  background: var(--tint);
+  color: var(--ink);
+  border-radius: 999px;
+  padding: 4px 12px;
   font-size: 0.9rem;
-  font-weight: 700;
-  color: var(--purple-deep);
+  font-weight: 600;
 }
-.rd .proj-meta dt {
-  font-size: 0.9rem;
-  font-weight: 700;
-  color: var(--purple-deep);
+.rd .pir-tags li.bad {
+  background: #fbe1df;
+  color: #7a1a14;
 }
-.rd .proj-meta dd {
-  margin: 2px 0 0;
+.rd .pir-tags li.loc {
+  background: var(--purple);
+  color: #fff;
 }
 .rd .pir-note {
   text-align: start;
@@ -630,6 +308,7 @@
   position: absolute;
   inset: 0;
   overflow: hidden;
+  border-radius: inherit;
 }
 .rd .insp-zoom img {
   height: 100%;
@@ -637,6 +316,7 @@
 @media (max-width: 900px) {
   .rd .insp-frame {
     background: none;
+    box-shadow: none;
   }
   .rd .insp-frame::before {
     display: none;
@@ -645,7 +325,9 @@
     position: relative;
     inset: auto;
     aspect-ratio: 3/2;
+    border-radius: 18px;
     background: #e9e9ee;
+    box-shadow: 0 30px 60px -30px rgba(42, 15, 49, 0.45);
   }
   .rd .insp-zoom,
   .rd .insp-hots {
@@ -657,6 +339,12 @@
 .rd .notlist b {
   display: block;
 }
+.rd .where-rec {
+  border: 2px solid var(--purple);
+}
+.rd .where-rec .tag {
+  margin-bottom: 12px;
+}
 .rd .dealers-title {
   font-size: 1.5rem;
 }
@@ -666,6 +354,9 @@
 .rd .acc-outro {
   margin-top: 12px;
 }
+.rd .quote-pad section {
+  padding-top: 88px;
+}
 .rd .mt18 {
   margin-top: 18px;
 }
@@ -678,18 +369,19 @@
 .rd .fs-pay s {
   font-family: var(--font-caveat), "Caveat", "Segoe Print", cursive;
 }
+.rd .nw h3,
+.rd .nw-dek {
+  font-family: var(--font-bitter), "Bitter", Georgia, serif;
+}
+.rd .flip {
+  display: block;
+  width: 100%;
+  text-align: start;
+}
+.rd .bro .h2,
 .rd .bro .lede {
   margin-top: 14px;
 }
-@media (max-width: 760px) {
-  .rd .bro {
-    grid-template-columns: 1fr;
-    gap: 28px;
-  }
-  .rd .bro-cover {
-    max-width: 240px;
-  }
-}
 .rd .fs .ctas,
 .rd .fs .say {
   margin-top: 20px;
@@ -700,50 +392,6 @@
 .rd .apr-bar-key .k2.red {
   background: var(--red);
 }
-.rd .law-notice {
-  margin: 0 0 20px;
-}
-.rd .flag-list {
-  list-style: none;
-  padding: 0;
-  margin-top: 40px;
-}
-.rd .flag-list > li {
-  padding: 32px 0;
-  border-top: var(--divider);
-}
-.rd .flag-list h3 {
-  font-size: 1.4rem;
-  margin-bottom: 18px;
-}
-.rd .flag-list dl {
-  margin: 0;
-  display: grid;
-  grid-template-columns: 1fr 1.3fr 1fr;
-  gap: 28px;
-}
-.rd .flag-list dt {
-  font-size: 0.9rem;
-  font-weight: 700;
-  color: var(--purple-deep);
-  margin-bottom: 6px;
-}
-.rd .flag-list dd {
-  margin: 0;
-  line-height: 1.7;
-}
-.rd .flag-list dd p + p {
-  margin-top: 10px;
-}
-.rd .flag-list q {
-  font-weight: 600;
-}
-@media (max-width: 900px) {
-  .rd .flag-list dl {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-}
 @media (max-width: 760px) {
   /* Put the contract card above the scene so the day badge can't cover it. */
   .rd .yoyo-stage {
@@ -761,6 +409,21 @@
     white-space: nowrap;
   }
 }
+@media (max-width: 560px) {
+  /* The hidden-term strip wraps to two lines here; give it room. */
+  .rd .fs-paper-wrap {
+    padding-bottom: 96px;
+  }
+  .rd .fs-hidden {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    transform: translateY(-96px);
+  }
+  .rd .fs-hidden.out {
+    transform: none;
+  }
+}
 
 /* ---------- Documents ---------- */
 .rd .guide-explorer {
@@ -779,16 +442,17 @@
 }
 
 /* ---------- Get Involved ---------- */
-.rd .apply-wrap > * {
-  max-width: 836px;
+.rd .apply-wrap {
+  max-width: 900px;
 }
 .rd ul.roles {
   list-style: none;
   padding: 0;
 }
 .rd .roles li {
-  border-top: var(--divider);
-  padding: 16px 0;
+  background: var(--bg);
+  border-radius: 18px;
+  padding: 22px;
 }
 .rd .roles li b {
   display: block;
@@ -817,11 +481,56 @@
 }
 
 /* ---------- Dealer Map ---------- */
+.rd .nw-img img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.rd .news-note {
+  margin-top: 22px;
+}
+.rd .vd-launch:focus-visible {
+  outline: 3px solid var(--purple);
+  outline-offset: 4px;
+}
+[dir="rtl"] .rd-hdr .drop {
+  left: auto;
+  right: 0;
+}
+.rd .law-notice {
+  margin: 0 0 20px;
+}
+
+/* Unruh Act quote under the Home stats heading. */
+.rd .footing-law {
+  max-width: 760px;
+  margin: 18px auto 0;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  text-align: center;
+}
+.rd .footing-law blockquote {
+  margin: 0;
+  font-style: italic;
+}
+.rd .footing-law cite {
+  display: block;
+  margin-top: 6px;
+  font-style: normal;
+  font-weight: 700;
+  color: #5e1a6b;
+}
+
+/* ---------- Dealer Map ---------- */
+/* Short disclaimer gate: same card as the prototype's VINdisclaimer, smaller. */
 .rd .vd-short {
   max-width: 680px;
+  margin: 0 auto;
 }
 .rd .vd-short .vd-title {
   font-size: clamp(1.9rem, 4vw, 2.6rem);
+  letter-spacing: -0.03em;
 }
 .rd .vd-short .vd-lede {
   font-size: 1.05rem;
@@ -855,7 +564,9 @@
   width: 100%;
   height: min(78vh, 760px);
   min-height: 520px;
-  border: 1px solid var(--line);
+  border: 4px solid var(--ink);
+  border-radius: 24px;
+  box-shadow: 10px 10px 0 var(--purple);
   background: #e9e9ee;
 }
 .rd .map-embed-links {
@@ -876,42 +587,11 @@
   .rd .map-embed iframe {
     height: 78vh;
     min-height: 480px;
+    border-width: 3px;
+    border-radius: 18px;
+    box-shadow: 6px 6px 0 var(--purple);
   }
 }
-.rd .news-list {
-  list-style: none;
-  padding: 0;
-  margin-top: 32px;
-}
-.rd .news-list li {
-  padding: 26px 0;
-  border-top: var(--divider);
-}
-.rd .news-list h3 {
-  font-size: 1.3rem;
-  line-height: 1.35;
-}
-.rd .news-list h3 a {
-  text-decoration: underline;
-  text-decoration-color: var(--line);
-  text-underline-offset: 4px;
-}
-.rd .news-list h3 a:hover {
-  color: var(--purple);
-  text-decoration-color: currentColor;
-}
-.rd .news-list p {
-  line-height: 1.7;
-}
-.rd .news-list .news-by {
-  margin: 6px 0 10px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--purple-deep);
-}
-.rd .news-list p + p {
-  margin-top: 8px;
-}
 
 /* Methods page: plain, text-first. */
 .rd .methods {
@@ -935,6 +615,7 @@
 }
 .rd .methods h2 {
   font-size: 1.5rem;
+  letter-spacing: -0.02em;
   margin-bottom: 12px;
 }
 .rd .methods p,
@@ -973,11 +654,12 @@
   gap: 12px;
 }
 .rd .methods-tiers div {
-  border-left: 3px solid var(--line);
-  padding: 4px 0 4px 16px;
+  background: var(--tint);
+  border-radius: 14px;
+  padding: 14px 18px;
 }
 .rd .methods-tiers dt {
-  font-weight: 700;
+  font-weight: 800;
 }
 .rd .methods-tiers dd {
   margin: 2px 0 0;
@@ -996,241 +678,3 @@
 .rd .methods-back-end {
   margin-top: 48px;
 }
-
-/* Slight corner radius on the flat design: boxes and buttons get 3px,
-   small tags 2px. Circles (dots, pins, play buttons) keep 50%. */
-.rd {
-  --radius-card: 3px;
-  --radius-btn: 3px;
-  --radius-tag: 2px;
-}
-.rd .card,
-.rd .cta,
-.rd .say,
-.rd details,
-.rd .campus,
-.rd .proj,
-.rd .bro,
-.rd .bro-cover img,
-.rd .flagbox,
-.rd .form-ok,
-.rd .plan-card,
-.rd .roles div,
-.rd .roles li,
-.rd .methods-tiers div,
-.rd .map-embed iframe,
-.rd .hero-photo img,
-.rd .bg-img,
-.rd .avatar,
-.rd .avatar-img,
-.rd .avatar-play,
-.rd .story-meta,
-.rd .fv-player,
-.rd .vbox-in,
-.rd .drop,
-.rd-hdr .lang ul,
-.rd .apr-controls,
-.rd .apr-results,
-.rd .apr-verdict,
-.rd .fs-chat,
-.rd .fs-total,
-.rd .yy-contract,
-.rd .insp-card,
-.rd .insp-done,
-.rd .insp-frame,
-.rd .insp-view,
-.rd .pir,
-.rd .pir-cmp div,
-.rd .pir-photo,
-.rd .pir-score,
-.rd .pir-start,
-.rd .pv-card,
-.rd .pv-photo,
-.rd .vd {
-  border-radius: var(--radius-card);
-}
-.rd .btn,
-.rd .watch,
-.rd .vd-go,
-.rd .drop a,
-.rd .links > li > a,
-.rd .track-nav a,
-.rd .fld input,
-.rd .fld select,
-.rd .fld textarea,
-.rd .tabs,
-.rd .tabs button,
-.rd .seg,
-.rd .seg button,
-.rd .stepper,
-.rd .insp-chips button,
-.rd .pv-opts button,
-.rd .rc-lines button,
-.rd .rc-lines li,
-.rd #pirState,
-.rd-hdr .lang > button,
-.rd-hdr .lang li button {
-  border-radius: var(--radius-btn);
-}
-.rd .tag,
-.rd .bro-soon,
-.rd .fv-len,
-.rd .tl-now,
-.rd .track-nav a b,
-.rd .yy-day {
-  border-radius: var(--radius-tag);
-}
-
-/* Home: pre-purchase inspection explainer. */
-.rd .ppi .offer {
-  margin-bottom: 32px;
-}
-.rd .ppi .offer h3 {
-  font-size: 1.05rem;
-  margin-bottom: 6px;
-}
-.rd .ppi-rule {
-  grid-column: 1 / -1;
-  border: 0;
-  border-top: var(--divider);
-  margin: 0;
-}
-.rd .ppi-sub {
-  font-size: clamp(1.5rem, 2.6vw, 2rem);
-  line-height: 1.2;
-}
-
-/* About: tighten the quote → "What we provide" → closing CTA run. */
-.rd #provide {
-  padding-top: 0;
-  padding-bottom: 64px;
-}
-.rd #provide + .cta {
-  padding-top: 64px;
-}
-
-/* ---------- Restored from 333659c: About zoom slideshow, scroll tours, chat red flags ---------- */
-.rd .a-hero .center{text-align:center}
-.rd .a-hero .center .lede{margin:18px auto 0}
-.rd .a-hero{padding-bottom:40px}
-.rd .a-hero h1{margin:0 auto}
-.rd .scroll-cue{width:26px;height:42px;border:2px solid var(--purple);border-radius:14px;margin:40px auto 0;position:relative}
-.rd .scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--purple);animation:rd-cue 1.6s infinite}
-@keyframes rd-cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
-.rd .zoom{height:280vh;padding:0;position:relative}
-.rd .zoom-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);height:calc(100vh - 76px);height:calc(100svh - 76px);overflow:hidden}
-.rd .zoom-frame{position:absolute;inset:0;--p:0;clip-path:inset(calc((1 - var(--p)) * 14%) calc((1 - var(--p)) * 22%) round calc((1 - var(--p)) * 36px));will-change:clip-path}
-.rd .zoom-imgs{position:absolute;inset:0;transform:scale(calc(1.18 - var(--p) * .18));will-change:transform}
-.rd .zoom-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
-.rd .zoom-imgs img.on{opacity:1;animation:rd-kb 6s ease-out forwards}
-@keyframes rd-kb{from{transform:scale(1.06)}to{transform:scale(1)}}
-.rd .zoom-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,15,49,0) 40%,rgba(42,15,49,.75) 100%);opacity:calc(var(--p) * 1.2)}
-.rd .zoom-copy{position:absolute;left:0;right:0;bottom:0;padding:0 max(32px,calc((100% - 1136px)/2)) 64px;color:#fff;opacity:clamp(0,calc((var(--p) - .6) * 3),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - .6) * 3),1)) * 30px))}
-.rd .zoom-copy h2{font-size:clamp(2.2rem,5vw,4rem)}
-.rd .zoom-copy p{margin-top:14px;font-size:1.15rem;max-width:540px;line-height:1.6}
-.rd .zoom-ctrl{position:absolute;right:max(32px,calc((100% - 1136px)/2));bottom:64px;display:flex;align-items:center;gap:12px;color:#fff;opacity:clamp(0,calc((var(--p) - .6) * 3),1)}
-.rd .zoom-count{font-weight:700;font-variant-numeric:tabular-nums}
-.rd .zoom-ctrl button{width:40px;height:40px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
-@media (max-width:760px){
-.rd .zoom-copy{padding:0 20px 96px}
-.rd .zoom-ctrl{right:20px;bottom:36px}
-}
-@media (prefers-reduced-motion:reduce){
-.rd .zoom{height:auto}
-.rd .zoom-sticky{position:relative;top:0;height:70vh}
-.rd .zoom-frame{--p:1!important}
-.rd .zoom-imgs img{transition:none}
-.rd .zoom-imgs img.on{animation:none}
-.rd .scroll-cue span{animation:none}
-}
-.rd .tour{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;margin-top:48px;align-items:start}
-.rd .tour-visual{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px);z-index:2}
-.rd .tour-frame{position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--tint);box-shadow:0 30px 60px -30px rgba(42,15,49,.45)}
-.rd .tour-zoom{position:relative;transform-origin:0 0;transition:transform .9s cubic-bezier(.65,0,.25,1);will-change:transform}
-.rd .tour-zoom>img{display:block;width:100%;height:auto;user-select:none}
-.rd .tour-zoom .spot{position:absolute;opacity:0;pointer-events:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--purple),0 0 0 200vmax rgba(42,15,49,.55);transition:left .9s cubic-bezier(.65,0,.25,1),top .9s cubic-bezier(.65,0,.25,1),width .9s cubic-bezier(.65,0,.25,1),height .9s cubic-bezier(.65,0,.25,1),opacity .5s,border-radius .5s}
-.rd .tour-zoom .spot.show{opacity:1}
-.rd .tour-hud{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none}
-.rd .tour-count{background:#fff;color:var(--ink);font-weight:800;border-radius:var(--radius-tag);padding:6px 14px;font-size:.92rem;font-variant-numeric:tabular-nums;box-shadow:0 6px 16px -8px rgba(42,15,49,.5)}
-.rd .tour-dots{display:flex;gap:6px;background:rgba(255,255,255,.9);border-radius:999px;padding:8px 10px}
-.rd .tour-dots i{width:8px;height:8px;border-radius:50%;background:var(--tint-2);transition:background .3s,transform .3s}
-.rd .tour-dots i.on{background:var(--purple);transform:scale(1.35)}
-.rd .tour-steps{display:flex;flex-direction:column}
-.rd .tour-step{min-height:78vh;display:flex;align-items:center;padding:6vh 0}
-.rd .tour-step:last-child{min-height:88vh}
-.rd .tour-intro{min-height:52vh;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
-.rd .tour-intro p{font-size:1.35rem;font-weight:700;line-height:1.5;max-width:420px}
-.rd .tour-arrow{font-size:2rem;color:var(--purple);animation:rd-bob 1.6s ease-in-out infinite}
-@keyframes rd-bob{50%{transform:translateY(8px)}}
-.rd .tour-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-card);padding:32px;opacity:.25;transform:translateX(24px) scale(.97);transition:opacity .5s,transform .5s,box-shadow .5s}
-.rd .band .tour-card{border-color:transparent}
-.rd .tour-step.on .tour-card{opacity:1;transform:none;box-shadow:0 24px 48px -30px rgba(94,26,107,.45)}
-.rd .tour-card h3{font-size:1.6rem;margin:12px 0}
-.rd .tour-card p{line-height:1.75}
-.rd .tour-card .sub{font-weight:700;margin-bottom:10px;color:var(--purple-deep)}
-.rd .tour-card .steps{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;line-height:1.65}
-.rd .tour-doc .tour-frame{max-width:560px;margin:0 auto}
-.rd .doc-mock.tour-zoom{border:0;box-shadow:none;border-radius:0;transition:transform .9s cubic-bezier(.65,0,.25,1)}
-@media (max-width:900px){
-.rd .tour{grid-template-columns:1fr;gap:0}
-.rd .tour-visual{top:calc(env(safe-area-inset-top,0px) + 76px);background:var(--bg);padding:10px 0 14px;box-shadow:0 14px 16px -12px rgba(42,15,49,.18)}
-.rd .band .tour-visual{background:var(--tint)}
-.rd .tour-frame{max-height:42vh;width:auto;margin:0 auto}
-.rd .tour-doc .tour-frame,.rd .tour-frame[style*="1040/1212"]{width:calc(42vh * 1040 / 1212);max-width:100%}
-.rd .tour-step{min-height:70vh}
-.rd .tour-card{padding:24px;transform:translateY(20px)}
-}
-@media (prefers-reduced-motion:reduce){
-.rd .tour-zoom,.rd .tour-zoom .spot,.rd .tour-card{transition:none}
-.rd .tour-arrow{animation:none}
-}
-.rd .chat-phone{width:min(360px,100%);margin:0 auto;border-radius:40px;background:var(--ink);padding:12px;box-shadow:0 30px 60px -24px rgba(94,26,107,.5)}
-.rd .chat-top{display:flex;align-items:center;gap:12px;background:#fff;border-radius:28px 28px 0 0;padding:18px 18px 14px;border-bottom:var(--divider)}
-.rd .chat-top b{display:block;line-height:1.2}
-.rd .chat-top span:not(.chat-av){font-size:.88rem;font-weight:600;color:var(--purple-deep)}
-.rd .chat-av{width:38px;height:38px;border-radius:50%;background:var(--tint-2);color:var(--purple-deep);display:grid;place-items:center;font-weight:800}
-.rd .chat-body{background:#fbf6fc;border-radius:0 0 28px 28px;min-height:420px;padding:18px 14px;display:flex;flex-direction:column;gap:10px}
-.rd .chat-note{align-self:center;font-size:.85rem;font-weight:700;color:var(--purple-deep);background:var(--tint-2);border-radius:999px;padding:4px 12px}
-.rd .chat-body .bub{max-width:84%;padding:12px 15px;border-radius:20px;line-height:1.5;font-size:.98rem;animation:rd-pop .35s cubic-bezier(.2,.9,.3,1.3) both}
-.rd .chat-body .bub.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
-.rd .chat-body .bub.me{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:6px;font-weight:600}
-.rd .chat-body .bub.flagchip{align-self:center;background:#fbe1df;color:#7a1a14;font-weight:700;font-size:.9rem;border-radius:12px;max-width:100%}
-.rd .chat-body .bub.flagchip b{margin-right:6px}
-@keyframes rd-pop{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
-.rd .chat-body .typing{display:inline-flex;gap:4px;padding:4px 2px}
-.rd .chat-body .typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;animation:rd-blink 1s infinite}
-.rd .chat-body .typing i:nth-child(2){animation-delay:.15s}
-.rd .chat-body .typing i:nth-child(3){animation-delay:.3s}
-@keyframes rd-blink{50%{opacity:1;transform:translateY(-3px)}}
-@media (max-width:900px){
-.rd .chat-body{min-height:210px;max-height:240px;overflow:hidden;justify-content:flex-end;padding:12px}
-.rd .chat-top{padding:12px 14px 10px}
-.rd .chat-phone{border-radius:30px;padding:8px}
-.rd .chat-body .bub{font-size:.9rem;padding:9px 12px}
-.rd .tour-chat .tour-visual{padding-bottom:10px}
-.rd .chat-phone{width:min(340px,100%)}
-}
-@media (prefers-reduced-motion:reduce){
-.rd .chat-body .bub{animation:none}
-.rd .chat-body .typing i{animation:none}
-}
-.rd .tour-card{opacity:.4}
-
-/* A section with no top padding that follows a tinted band (or the
-   header strip) gets its top padding back, so headings never sit right
-   against the edge above them. */
-.rd .band + section.pt0,
-.rd .strip + section.pt0 {
-  padding-top: 104px;
-}
-@media (max-width: 768px) {
-  .rd .band + section.pt0,
-  .rd .strip + section.pt0 {
-    padding-top: 72px;
-  }
-}
-@media (max-width: 640px) {
-  .rd-hdr .right {
-    gap: 6px;
-  }
-}
diff --git a/app/redesign.css b/app/redesign.css
index a77e319..c66d8c4 100644
--- a/app/redesign.css
+++ b/app/redesign.css
@@ -1,8 +1,6 @@
 /*
- * Site styles, scoped under .rd. Started as the redesign prototype's CSS
- * and now edited by hand: flat, square corners, no shadows, no gradients,
- * no looping animation.
- * Next.js-specific fixes live in app/redesign-overrides.css.
+ * GENERATED by scripts/scope-prototype-css.py from the redesign prototype.
+ * Do not edit by hand: put adjustments in app/redesign-overrides.css.
  */
 
 /* Pages that use the redesign get a white canvas and no grain overlay. */
@@ -17,21 +15,19 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
   --purple-dark:#7d2a8b;
   --purple-deep:#5e1a6b;
   --ink:#2a0f31;
-  --tint:#f5f4f2;
-  --band:#f5f4f2;
+  --tint:#f6ecf8;
   --tint-2:#ecd6f0;
   --bg:#ffffff;
   --line:#e5cfe9;
-  --divider:3px solid var(--purple-deep);
   --red:#b3261e;
   --amber:#8a5a00;
   --green:#1d6b3a;
-  --font:var(--font-jakarta),"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
+  --font:var(--font-jakarta),"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
 .rd *,.rd *::before,.rd *::after{box-sizing:inherit}
 .rd{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
 .rd a{color:inherit;text-decoration:none}
-.rd a:focus-visible,.rd button:focus-visible,.rd select:focus-visible,.rd input:focus-visible,.rd textarea:focus-visible,.rd summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
-.rd h1,.rd h2,.rd h3,.rd h4{margin:0;font-weight:700;letter-spacing:normal;line-height:1.15}
+.rd a:focus-visible,.rd button:focus-visible,.rd select:focus-visible,.rd input:focus-visible,.rd textarea:focus-visible,.rd summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:8px}
+.rd h1,.rd h2,.rd h3,.rd h4{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.1}
 .rd p{margin:0}
 .rd img{max-width:100%}
 .rd .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@@ -43,19 +39,27 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd section{padding:72px 0}
 }
 .rd .pt0{padding-top:0}
-.rd .btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;font-weight:700;font-size:1rem;border:2px solid var(--purple);transition:background .2s,color .2s;cursor:pointer;font-family:inherit}
+.rd .btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;border-radius:999px;font-weight:700;font-size:1rem;border:2px solid var(--purple);transition:background .2s,color .2s;cursor:pointer;font-family:inherit}
 .rd .btn-solid{background:var(--purple);color:#fff}
 .rd .btn-solid:hover{background:var(--purple-dark);border-color:var(--purple-dark)}
 .rd .btn-line{color:var(--purple-deep);background:transparent}
-.rd .btn-line:hover{border-color:var(--purple-dark);color:var(--purple-dark)}
-
+.rd .btn-line:hover{background:var(--tint)}
+.rd .btn-white{background:#fff;color:var(--purple);border-color:#fff}
+.rd .btn-white:hover{background:var(--tint)}
+.rd .btn-ghost-white{border-color:#fff;color:#fff;background:transparent}
+.rd .btn-ghost-white:hover{background:rgba(255,255,255,.12)}
 .rd .ctas{display:flex;gap:14px;flex-wrap:wrap}
 .rd .h2{font-size:clamp(2rem,4vw,3rem)}
 .rd .h2 span,.rd .phero h1 span{color:inherit}
 .rd .lede{font-size:1.15rem;line-height:1.7;max-width:660px}
-.rd .band{background:var(--band)}
-
-.rd .card{background:var(--bg);border:1px solid var(--line);padding:32px}
+.rd .center{text-align:center}
+.rd .center .lede{margin:18px auto 0}
+.rd .band{background:var(--tint)}
+.rd .ph{display:flex;align-items:flex-end;border-radius:24px;overflow:hidden;background:
+  radial-gradient(circle at 25% 25%,rgba(255,255,255,.35),transparent 50%),
+  linear-gradient(140deg,#b75cc6,#5e1a6b);color:#fff}
+.rd .ph span{padding:18px 22px;font-weight:600;line-height:1.45}
+.rd .card{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:32px}
 @media (max-width:640px){
 .rd .card{padding:24px}
 }
@@ -70,41 +74,41 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .mt48{margin-top:48px}
 .rd .mt56{margin-top:56px}
 .rd .mt24{margin-top:24px}
-
-.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 .icon{width:60px;height:60px;border-radius:18px;background:var(--tint-2);display:grid;place-items:center;margin-bottom:22px}
+.rd .tag{display:inline-block;font-size:.85rem;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--tint-2);color:var(--purple-deep)}
+.rd .say{margin-top:16px;background:var(--tint);border-radius:14px;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:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
 .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{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;letter-spacing:-.02em}
+.rd .mark{width:36px;height:36px;border-radius:11px;background:var(--purple);display:grid;place-items:center}
 .rd .logo-img{height:46px;width:auto;display:block}
 .rd-ftr .logo-img{height:56px}
 .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{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>a{display:block;padding:9px 14px;border-radius:999px}
+.rd .links>li>a:hover,.rd .links>li>a.active{color:var(--purple);background:var(--tint)}
+.rd .drop{position:absolute;top:100%;left:0;min-width:230px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 40px -20px rgba(42,15,49,.3);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{text-decoration:underline;text-underline-offset:4px}
+.rd .drop a{padding:10px 12px;border-radius:10px}
+.rd .drop a:hover{background:var(--tint);color:var(--purple)}
 .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){
 .rd .links{display:none}
 .rd .burger{display:block}
-.rd-hdr.open .links{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:76px;left:0;right:0;background:#fff;padding:14px 20px 24px;border-bottom:var(--divider);max-height:calc(100vh - 76px);overflow:auto}
-.rd-hdr.open .drop{display:flex;position:static;border:0;padding:0 0 6px 14px}
+.rd-hdr.open .links{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:76px;left:0;right:0;background:#fff;padding:14px 20px 24px;border-bottom:1px solid var(--line);max-height:calc(100vh - 76px);overflow:auto}
+.rd-hdr.open .drop{display:flex;position:static;border:0;box-shadow:none;padding:0 0 6px 14px}
 .rd .links .btn{margin:10px 0 0}
 }
-.rd .phero{padding:88px 0 64px}
+.rd .phero{padding:96px 0 88px;background:linear-gradient(180deg,var(--tint) 0%,var(--bg) 100%)}
 .rd .phero h1{font-size:clamp(2.6rem,5.4vw,4.2rem);max-width:900px}
 .rd .phero p{margin-top:24px;font-size:1.2rem;max-width:660px;line-height:1.7}
 .rd .phero .ctas{margin-top:32px}
 @media (max-width:768px){
 .rd .phero{padding:64px 0 56px}
 }
-.rd .hero{padding:80px 0 88px}
+.rd .hero{padding:88px 0 96px;background:linear-gradient(180deg,var(--tint) 0%,var(--bg) 100%);overflow:hidden}
 .rd .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
 @media (max-width:960px){
 .rd .hero-grid{grid-template-columns:1fr}
@@ -118,28 +122,58 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .rot-caret.busy{animation:none}
 @keyframes rd-caret{50%{opacity:0}}
 .rd .hero p{margin:26px 0 34px;font-size:1.2rem;max-width:540px}
-
-.rd .strip{padding:40px 0;border-block:var(--divider)}
+.rd .hero-art{width:100%;height:auto;max-width:600px;justify-self:center}
+.rd .hero-art .hb-card{animation:rd-hb-float 6s ease-in-out infinite;transform-box:fill-box}
+.rd .hero-art .hb-c2{animation-delay:-2s}
+.rd .hero-art .hb-c3{animation-delay:-4s}
+@keyframes rd-hb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
+@media (prefers-reduced-motion:reduce){
+.rd .hero-art .hb-card{animation:none}
+}
+.rd .strip{padding:40px 0;border-block:1px solid var(--line)}
 .rd .strip-in{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:space-between}
-.rd .sources{display:flex;gap:36px;flex-wrap:wrap;font-weight:700;font-size:1.05rem;color:var(--purple-deep)}
-.rd .what{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
+.rd .strip h4{font-size:1rem;font-weight:700;letter-spacing:0}
+.rd .sources{display:flex;gap:36px;flex-wrap:wrap;font-weight:800;font-size:1.05rem;color:var(--purple-deep)}
+.rd .what{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
 @media (max-width:960px){
 .rd .what{grid-template-columns:1fr;gap:48px}
 }
-
-.rd .big{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;color:var(--purple);line-height:1}
-
-.rd .tabs{display:flex;border-bottom:var(--divider);gap:4px;flex-wrap:wrap}
-.rd .tabs button{border:0;border-bottom:3px solid transparent;margin-bottom:-3px;background:transparent;font:inherit;font-weight:700;color:var(--ink);padding:12px 18px;cursor:pointer}
-.rd .tabs button[aria-selected="true"]{color:var(--purple);border-bottom-color:var(--purple)}
-.rd .story{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;margin-top:40px}
+.rd .what .lede{margin:22px 0 32px}
+.rd .phone-stage{display:flex;justify-content:center;padding:20px 0}
+.rd .phone{width:280px;aspect-ratio:9/18;border-radius:44px;background:var(--ink);padding:12px;box-shadow:0 30px 60px -20px rgba(94,26,107,.45)}
+.rd .screen{height:100%;border-radius:34px;background:linear-gradient(170deg,#c67bd3,#6d2279);padding:56px 14px 14px;display:flex;flex-direction:column;gap:10px}
+.rd .clock{color:#fff;text-align:center;font-weight:700;font-size:3rem;letter-spacing:-.03em;margin-bottom:18px}
+.rd .notif{background:rgba(255,255,255,.95);color:#2a0f31;border-radius:18px;padding:12px 14px;font-size:.86rem;line-height:1.4;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
+.rd .notif.show{opacity:1;transform:none}
+.rd .notif b{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:3px}
+.rd .notif b i{font-style:normal;font-weight:500}
+.rd .rows{display:flex;flex-direction:column;gap:72px;margin-top:72px}
+.rd .row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
+.rd .row:nth-child(even) .row-art{order:2}
+@media (max-width:860px){
+.rd .row{grid-template-columns:1fr;gap:28px}
+.rd .row:nth-child(even) .row-art{order:0}
+}
+.rd .row-art{background:var(--tint);border-radius:28px;aspect-ratio:4/3;display:grid;place-items:center;padding:28px}
+.rd .row-art svg{width:100%;max-width:340px;height:auto}
+.rd .big{font-size:clamp(3rem,6vw,4.6rem);font-weight:800;color:var(--purple);letter-spacing:-.04em;line-height:1}
+.rd .row h3{font-size:1.5rem;margin:14px 0}
+.rd .row p{font-size:1.1rem;line-height:1.75}
+.rd .row cite{display:block;margin-top:14px;font-style:normal;font-weight:600;color:var(--purple-deep)}
+.rd .pcard{background:var(--bg);border-radius:24px;padding:36px 30px}
+.rd .pcard h3{font-size:1.5rem;margin-bottom:12px}
+.rd .pcard p{font-size:1.05rem;line-height:1.7}
+.rd .tabs{display:inline-flex;background:var(--tint);border-radius:999px;padding:6px;gap:4px;flex-wrap:wrap;justify-content:center}
+.rd .tabs button{border:0;background:transparent;font:inherit;font-weight:700;color:var(--ink);padding:11px 22px;border-radius:999px;cursor:pointer}
+.rd .tabs button[aria-selected="true"]{background:var(--purple);color:#fff}
+.rd .story{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;margin-top:48px;text-align:left}
 @media (max-width:900px){
 .rd .story{grid-template-columns:1fr;gap:28px}
 }
-.rd .story-meta{border-top:3px solid var(--purple);padding-top:20px}
-.rd .story-meta .n{font-size:3rem;font-weight:700;line-height:1;color:var(--purple)}
-.rd .story-meta h3{font-size:1.6rem}
-.rd .story-meta p{margin-top:10px;font-weight:600;color:var(--purple-deep)}
+.rd .story-meta{background:var(--purple);color:#fff;border-radius:28px;padding:36px}
+.rd .story-meta .n{font-size:4rem;font-weight:800;line-height:1;letter-spacing:-.04em}
+.rd .story-meta h3{font-size:1.8rem;margin-top:14px}
+.rd .story-meta p{margin-top:12px;font-weight:600}
 .rd .story-body p{font-size:1.1rem;line-height:1.8;margin-bottom:16px}
 .rd .pull{margin-top:24px;border-left:4px solid var(--purple);padding:6px 0 6px 22px;font-size:1.2rem;font-weight:700;line-height:1.55}
 .rd .pull cite{display:block;font-style:normal;font-weight:600;font-size:1rem;margin-top:10px;color:var(--purple-deep)}
@@ -149,36 +183,166 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .plan{grid-template-columns:1fr;gap:36px}
 }
 .rd .plan .lede{margin-top:18px}
-.rd .plan-card{border:1px solid var(--line);padding:40px;background:var(--bg)}
+.rd .plan-card{border:2px solid var(--purple);border-radius:28px;padding:40px;background:var(--bg)}
 @media (max-width:640px){
 .rd .plan-card{padding:28px}
 }
-.rd .plan-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;padding-bottom:22px;border-bottom:var(--divider);margin-bottom:24px}
+.rd .plan-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:24px}
 .rd .plan-head h3{font-size:1.6rem}
-.rd .price{font-size:2.4rem;font-weight:700;color:var(--purple)}
+.rd .price{font-size:2.4rem;font-weight:800;color:var(--purple);letter-spacing:-.03em}
 .rd .checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
 @media (max-width:640px){
 .rd .checks{grid-template-columns:1fr}
 }
 .rd .checks li{display:flex;gap:12px;font-weight:600;line-height:1.45}
 .rd .checks svg{flex:0 0 22px;margin-top:1px}
-.rd .offer{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin-top:28px;padding-top:24px;border-top:var(--divider)}
+.rd .offer{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
 @media (max-width:640px){
 .rd .offer{grid-template-columns:1fr}
 }
-.rd .offer h4{font-size:1.05rem;margin-bottom:6px}
+.rd .offer div{background:var(--tint);border-radius:18px;padding:20px}
+.rd .offer h4{font-size:1.05rem;letter-spacing:-.01em;margin-bottom:6px}
 .rd .offer p{font-size:.98rem;line-height:1.6}
-.rd .cta{border-top:var(--divider)}
+.rd .cta{background:var(--purple);color:#fff;border-radius:36px;padding:72px 64px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
 @media (max-width:860px){
+.rd .cta{grid-template-columns:1fr;padding:48px 28px}
 }
 .rd .cta h2{font-size:clamp(2rem,3.6vw,2.8rem)}
-.rd .cta p{margin:16px 0 28px}
-
-.rd .ai-src{margin-top:24px;font-weight:600;color:var(--purple-deep);font-size:.95rem}
-
+.rd .cta p{margin:18px 0 30px;font-size:1.15rem;max-width:560px}
+.rd .cta svg{width:100%;max-width:260px;justify-self:center}
+.rd .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
+@media (max-width:900px){
+.rd .split{grid-template-columns:1fr;gap:36px}
+}
+.rd .split .ph{aspect-ratio:5/4}
+.rd .split p{margin:18px 0;font-size:1.1rem;line-height:1.75}
+.rd .chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
+.rd .chips span{background:var(--tint);border-radius:999px;padding:8px 16px;font-weight:700;font-size:.95rem}
+.rd .why-done{margin-top:56px;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.02em;text-align:center}
+.rd .why-done strong{color:var(--purple)}
+.rd .mgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;margin-top:56px}
+@media (max-width:960px){
+.rd .mgrid{grid-template-columns:1fr;gap:36px}
+}
+.rd .mgrid .ph{aspect-ratio:618/1080;max-height:640px}
+@media (max-width:960px){
+.rd .mgrid .ph{aspect-ratio:4/3}
+}
+.rd .mlist{display:flex;flex-direction:column;gap:20px}
+.rd .mitem{display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:start;background:var(--bg);border-radius:24px;padding:28px}
+.rd .mitem .icon{margin:0}
+.rd .mitem h3{font-size:1.5rem;margin-bottom:8px}
+.rd .timeline{position:relative;max-width:860px;margin:56px auto 0;display:flex;flex-direction:column;gap:28px}
+.rd .tl{display:grid;grid-template-columns:88px 1fr;gap:28px}
+@media (max-width:640px){
+.rd .tl{grid-template-columns:1fr;gap:14px}
+}
+.rd .tl-n{width:88px;height:88px;border-radius:24px;background:var(--purple);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.8rem}
+.rd .tl .card h3{font-size:1.6rem;margin-bottom:14px}
+.rd .tl .card p{font-size:1.05rem;line-height:1.8;margin-bottom:12px}
+.rd .quote-band{background:var(--purple-deep);color:#fff;border-radius:36px;padding:72px 64px;text-align:center}
+@media (max-width:768px){
+.rd .quote-band{padding:48px 28px}
+}
+.rd .quote-band p{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.35;max-width:880px;margin:0 auto}
+.rd .quote-band cite{display:block;margin-top:22px;font-style:normal;font-weight:600}
+.rd .carousel{position:relative;border-radius:24px;overflow:hidden}
+.rd .slides{display:flex;transition:transform .6s ease}
+.rd .slides .ph{flex:0 0 100%;height:clamp(300px,42vw,520px);border-radius:0}
+.rd .slides img{flex:0 0 100%;width:100%;height:clamp(300px,46vw,560px);object-fit:cover;object-position:center 55%;display:block}
+.rd .slides.berk img{object-position:center 72%}
+.rd .mphoto{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 70%;border-radius:24px;display:block}
+.rd .dots{position:absolute;bottom:18px;right:20px;display:flex;gap:8px}
+.rd .dots button{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer}
+.rd .dots button[aria-current="true"]{background:#fff}
+.rd .video{aspect-ratio:16/9;align-items:center;justify-content:center;flex-direction:column;text-align:center}
+.rd .play{width:68px;height:68px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-bottom:6px}
+.rd .aisteps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
+@media (max-width:1000px){
+.rd .aisteps{grid-template-columns:1fr 1fr}
+}
+@media (max-width:560px){
+.rd .aisteps{grid-template-columns:1fr}
+}
+.rd .aistep{background:var(--bg);border-radius:24px;padding:18px 18px 28px}
+.rd .aistep-art{background:var(--tint);border-radius:18px;aspect-ratio:24/17;display:grid;place-items:center;margin-bottom:22px}
+.rd .aistep-art svg{width:100%;height:auto}
+.rd .aistep h3{font-size:1.2rem;padding:0 8px;margin-bottom:8px;letter-spacing:-.015em}
+.rd .aistep p{padding:0 8px;line-height:1.6;font-size:.98rem}
+.rd .ai-src{text-align:center;margin-top:24px;font-weight:600;color:var(--purple-deep);font-size:.95rem}
+.rd .ai-bottom{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;margin-top:48px;align-items:stretch}
+@media (max-width:900px){
+.rd .ai-bottom{grid-template-columns:1fr}
+}
+.rd .ai-save{background:var(--bg);border-radius:28px;padding:40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
+.rd .ai-save h3{font-size:1.5rem}
+.rd .ai-save p{line-height:1.7;flex:1}
+.rd .ai-tips h3{font-size:1.6rem}
 .rd .checks.one{grid-template-columns:1fr}
 .rd .checks.one li{font-weight:500}
-
+.rd .a-hero{padding-bottom:40px}
+.rd .a-hero h1{margin:0 auto}
+.rd .scroll-cue{width:26px;height:42px;border:2px solid var(--purple);border-radius:14px;margin:40px auto 0;position:relative}
+.rd .scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--purple);animation:rd-cue 1.6s infinite}
+@keyframes rd-cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
+.rd .zoom{height:280vh;padding:0;position:relative}
+.rd .zoom-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);height:calc(100vh - 76px);height:calc(100svh - 76px);overflow:hidden}
+.rd .zoom-frame{position:absolute;inset:0;--p:0;clip-path:inset(calc((1 - var(--p)) * 14%) calc((1 - var(--p)) * 22%) round calc((1 - var(--p)) * 36px));will-change:clip-path}
+.rd .zoom-imgs{position:absolute;inset:0;transform:scale(calc(1.18 - var(--p) * .18));will-change:transform}
+.rd .zoom-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
+.rd .zoom-imgs img.on{opacity:1;animation:rd-kb 6s ease-out forwards}
+@keyframes rd-kb{from{transform:scale(1.06)}to{transform:scale(1)}}
+.rd .zoom-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,15,49,0) 40%,rgba(42,15,49,.75) 100%);opacity:calc(var(--p) * 1.2)}
+.rd .zoom-copy{position:absolute;left:0;right:0;bottom:0;padding:0 max(32px,calc((100% - 1136px)/2)) 64px;color:#fff;opacity:clamp(0,calc((var(--p) - .6) * 3),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - .6) * 3),1)) * 30px))}
+.rd .zoom-copy h2{font-size:clamp(2.2rem,5vw,4rem)}
+.rd .zoom-copy p{margin-top:14px;font-size:1.15rem;max-width:540px;line-height:1.6}
+.rd .zoom-ctrl{position:absolute;right:max(32px,calc((100% - 1136px)/2));bottom:64px;display:flex;align-items:center;gap:12px;color:#fff;opacity:clamp(0,calc((var(--p) - .6) * 3),1)}
+.rd .zoom-count{font-weight:700;font-variant-numeric:tabular-nums}
+.rd .zoom-ctrl button{width:40px;height:40px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
+@media (max-width:760px){
+.rd .zoom-copy{padding:0 20px 96px}
+.rd .zoom-ctrl{right:20px;bottom:36px}
+}
+@media (prefers-reduced-motion:reduce){
+.rd .zoom{height:auto}
+.rd .zoom-sticky{position:relative;top:0;height:70vh}
+.rd .zoom-frame{--p:1!important}
+.rd .zoom-imgs img{transition:none}
+.rd .zoom-imgs img.on{animation:none}
+.rd .scroll-cue span{animation:none}
+}
+.rd .pillar-lg{padding:8px 4px}
+.rd .pillar-lg h3{font-size:1.7rem;margin-bottom:10px}
+.rd .pillar-lg p{font-size:1.08rem;line-height:1.7}
+.rd .founder{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
+@media (max-width:900px){
+.rd .founder{grid-template-columns:1fr;gap:36px}
+}
+.rd .founder-side{position:sticky;top:120px}
+@media (max-width:900px){
+.rd .founder-side{position:static}
+}
+.rd .founder-side .lede{margin-top:18px}
+.rd .strikes{display:flex;flex-direction:column;gap:20px}
+.rd .strike-card{background:var(--bg);border-radius:24px;padding:32px;opacity:.35;transform:translateY(24px);transition:opacity .6s,transform .6s}
+.rd .strike-card.in{opacity:1;transform:none}
+@media (prefers-reduced-motion:reduce){
+.rd .strike-card{opacity:1;transform:none;transition:none}
+}
+.rd .strike-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
+.rd .strike-n{font-size:2.6rem;font-weight:800;color:var(--purple);letter-spacing:-.04em;line-height:1}
+.rd .strike-card h3{font-size:1.5rem;margin-bottom:10px}
+.rd .strike-card p{font-size:1.05rem;line-height:1.75}
+.rd .provide4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
+@media (max-width:1000px){
+.rd .provide4{grid-template-columns:1fr 1fr}
+}
+@media (max-width:560px){
+.rd .provide4{grid-template-columns:1fr}
+}
+.rd .provide4 .pcard{padding:30px 26px}
+.rd .provide4 .pcard h3{font-size:1.3rem}
+.rd .provide4 .pcard p{font-size:1rem}
 .rd .filters{margin-top:36px}
 .rd .team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
 @media (max-width:1000px){
@@ -188,24 +352,52 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .team{grid-template-columns:1fr}
 }
 .rd .member{display:flex;flex-direction:column;gap:14px}
-.rd .avatar{width:84px;height:84px;background:var(--tint-2);color:var(--purple-deep);display:grid;place-items:center;font-weight:700;font-size:1.6rem}
-.rd .member h3{font-size:1.3rem}
+.rd .avatar{width:84px;height:84px;border-radius:24px;background:var(--tint-2);color:var(--purple-deep);display:grid;place-items:center;font-weight:800;font-size:1.6rem}
+.rd .member h3{font-size:1.3rem;letter-spacing:-.015em}
 .rd .member .role{font-weight:700;color:var(--purple)}
 .rd .member .school{font-weight:600;font-size:.95rem}
 .rd .member p.bio{font-size:1rem;line-height:1.65}
 .rd .member button.more{align-self:flex-start;background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--purple);cursor:pointer}
 .rd .member .ln{font-weight:700;color:var(--purple);font-size:.95rem}
-
+.rd .study{display:grid;grid-template-columns:260px 1fr;gap:40px}
+@media (max-width:860px){
+.rd .study{grid-template-columns:1fr;gap:20px}
+}
+.rd .study-meta{display:flex;flex-direction:column;gap:10px;font-weight:600}
+.rd .study-meta .n{font-size:3.4rem;font-weight:800;color:var(--purple);letter-spacing:-.04em;line-height:1}
+.rd .study h3{font-size:1.6rem;margin-bottom:14px}
+.rd .study p{font-size:1.05rem;line-height:1.8;margin-bottom:14px}
+.rd .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
+.rd .statset{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
+@media (max-width:760px){
+.rd .statset{grid-template-columns:1fr}
+}
+.rd .statset .card{padding:28px}
+.rd .statset .big{font-size:clamp(2.4rem,4vw,3.2rem)}
+.rd .statset p{margin-top:12px;line-height:1.6}
+.rd .cites .card h4{font-size:1rem;letter-spacing:0;color:var(--purple);margin-bottom:10px}
+.rd .cites .card p{line-height:1.7}
+.rd .cites .card p+p{margin-top:10px}
 .rd .projects{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
 @media (max-width:1000px){
 .rd .projects{grid-template-columns:1fr;max-width:640px;margin:0 auto}
 }
-
-.rd .proj{display:flex;flex-direction:column;gap:14px}
+.rd .proj{display:flex;flex-direction:column;gap:16px;background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:32px;transition:border-color .2s,box-shadow .2s}
+.rd .proj:hover{border-color:var(--purple);box-shadow:0 24px 48px -28px rgba(94,26,107,.45)}
+.rd .proj-head{display:flex;justify-content:space-between;align-items:flex-start}
+.rd .proj-head .icon{margin:0}
 .rd .proj h3{font-size:1.6rem}
 .rd .proj-desc{line-height:1.7;flex:1}
-.rd .proj-meta{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:var(--divider);margin:0}
-
+.rd .proj-meta{display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
+.rd .proj-row{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;color:var(--purple-deep)}
+.rd .proj-row svg{margin-top:3px}
+.rd .proj-row b{color:var(--ink)}
+.rd .chips-sm{display:flex;flex-wrap:wrap;gap:6px}
+.rd .chips-sm span{background:var(--tint);color:var(--ink);border-radius:999px;padding:4px 12px;font-size:.9rem;font-weight:600}
+.rd .seats{display:flex;gap:4px;margin-top:8px}
+.rd .seats i{width:14px;height:14px;border-radius:50%;background:var(--tint-2)}
+.rd .seats i.f{background:var(--purple)}
+.rd .seats i.r{background:#c98fd4}
 .rd .proj-btn{margin-top:6px;align-self:stretch}
 .rd .notlist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
 @media (max-width:760px){
@@ -217,11 +409,19 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:960px){
 .rd .explorer{grid-template-columns:1fr}
 }
-
+.rd .stage{position:relative;border-radius:24px;overflow:hidden;background:var(--tint);border:1px solid var(--line)}
+.rd .stage svg{display:block;width:100%;height:auto}
+.rd .pin{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;border:3px solid #fff;background:var(--purple);color:#fff;font-weight:800;font-size:.95rem;cursor:pointer;box-shadow:0 6px 16px -4px rgba(42,15,49,.5);font-family:inherit}
+.rd .pin[aria-pressed="true"]{background:var(--ink);transform:translate(-50%,-50%) scale(1.15)}
+.rd .panel{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:32px;min-height:320px}
+.rd .panel h3{font-size:1.5rem;margin:12px 0}
+.rd .panel p{line-height:1.75}
+.rd .panel .empty{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;min-height:250px;font-weight:600;font-size:1.1rem}
 .rd .sev-easy{background:#e3f3e8;color:var(--green)}
 .rd .sev-watch{background:#fbefd5;color:var(--amber)}
 .rd .sev-red{background:#fbe1df;color:var(--red)}
 .rd .sev-know{background:var(--tint-2);color:var(--purple-deep)}
+.rd .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
 .rd .where .card h3{font-size:1.35rem;margin-bottom:12px}
 .rd .where .card p{line-height:1.7}
 .rd .where .card p+p{margin-top:10px}
@@ -229,24 +429,64 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:760px){
 .rd .brands{grid-template-columns:1fr 1fr}
 }
-.rd .brands a{border:1px solid var(--line);padding:22px;font-weight:700;font-size:1.1rem;text-align:center;background:var(--bg);transition:border-color .2s,color .2s}
+.rd .brands a{border:1px solid var(--line);border-radius:18px;padding:22px;font-weight:800;font-size:1.1rem;text-align:center;background:var(--bg);transition:border-color .2s,color .2s}
 .rd .brands a:hover{border-color:var(--purple);color:var(--purple)}
 .rd .acc{display:flex;flex-direction:column;gap:14px;margin-top:48px;max-width:900px}
-.rd details{background:var(--bg);border:1px solid var(--line);padding:0 28px}
-.rd summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;font-weight:700;font-size:1.2rem}
+.rd details{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:0 28px}
+.rd summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;font-weight:800;font-size:1.2rem;letter-spacing:-.015em}
 .rd summary::-webkit-details-marker{display:none}
 .rd summary::after{content:"+";font-size:1.6rem;font-weight:500;color:var(--purple);line-height:1}
 .rd details[open] summary::after{content:"–"}
 .rd details .body{padding:0 0 26px;line-height:1.75}
 .rd details ul{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
-
-.rd .alert{margin-top:32px;border-left:4px solid var(--purple);background:var(--band);padding:22px 26px;line-height:1.7}
+.rd .road{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:56px;position:relative}
+.rd .road::before{content:"";position:absolute;top:28px;left:8%;right:8%;height:6px;background:repeating-linear-gradient(90deg,var(--purple) 0 22px,transparent 22px 36px);border-radius:3px}
+.rd .stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;padding:0 6px}
+.rd .stop .dot{width:62px;height:62px;border-radius:50%;background:#fff;border:4px solid var(--purple);display:grid;place-items:center;font-weight:800;font-size:1.2rem;color:var(--purple);transition:background .2s,color .2s}
+.rd .stop[aria-pressed="true"] .dot{background:var(--purple);color:#fff}
+.rd .stop b{font-size:.98rem;line-height:1.35}
+@media (max-width:860px){
+.rd .road{grid-template-columns:1fr;gap:14px}
+.rd .road::before{display:none}
+.rd .stop{flex-direction:row;text-align:left}
+.rd .stop .dot{flex:0 0 52px;width:52px;height:52px}
+}
+.rd .road-panel{margin-top:32px;max-width:760px;margin-left:auto;margin-right:auto}
+.rd .alert{margin-top:32px;border-left:4px solid var(--purple);background:var(--tint);border-radius:0 18px 18px 0;padding:22px 26px;line-height:1.7}
 .rd .alert b{display:block;margin-bottom:4px}
-
+.rd .flags{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
+.rd .flags button{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 20px 10px 10px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
+.rd .flags button span{width:32px;height:32px;border-radius:50%;background:var(--tint-2);color:var(--purple);display:grid;place-items:center;font-weight:800}
+.rd .flags button[aria-pressed="true"]{border-color:var(--purple);background:var(--purple);color:#fff}
+.rd .flags button[aria-pressed="true"] span{background:#fff}
+.rd .flag-panel{margin-top:24px}
 .rd .law-h{font-size:1.6rem;margin:56px 0 20px}
 .rd .law .card h3{font-size:1.3rem;margin:12px 0}
 .rd .law .card p{line-height:1.7}
-
+.rd .fields{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
+.rd .fields button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
+.rd .fields button[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
+.rd .title-doc{position:relative;background:#fbeef3;border:2px solid #e3b6c7;border-radius:12px;padding:22px;font-size:.8rem;line-height:1.4;color:#4a1d2e}
+.rd .title-doc .zone{display:block;width:100%;text-align:left;border:2px dashed transparent;border-radius:8px;padding:10px;background:none;font:inherit;color:inherit;cursor:pointer;margin-bottom:6px}
+.rd .title-doc .zone:hover,.rd .title-doc .zone[aria-pressed="true"]{border-color:var(--purple);background:rgba(149,51,165,.08)}
+.rd .title-doc .zone b{display:block;font-size:.72rem;letter-spacing:.02em;margin-bottom:4px}
+.rd .title-doc .hd{text-align:center;font-weight:800;font-size:1rem;margin-bottom:10px;letter-spacing:.02em}
+.rd .line-fake{height:8px;border-radius:4px;background:#e8c3d2;margin:4px 0}
+.rd .flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
+@media (max-width:860px){
+.rd .flip-grid{grid-template-columns:1fr}
+}
+.rd .flip{perspective:1000px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;min-height:220px}
+.rd .flip-in{position:relative;height:100%;min-height:220px;transition:transform .6s;transform-style:preserve-3d}
+.rd .flip[aria-pressed="true"] .flip-in{transform:rotateY(180deg)}
+.rd .face{position:absolute;inset:0;border-radius:24px;padding:28px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between}
+.rd .front{background:var(--purple);color:#fff}
+.rd .front .n{font-size:3rem;font-weight:800;line-height:1}
+.rd .front b{font-size:1.3rem;line-height:1.3}
+.rd .back{background:#fff;border:2px solid var(--purple);transform:rotateY(180deg);justify-content:center;font-size:1.05rem;line-height:1.7}
+@media (prefers-reduced-motion:reduce){
+.rd .flip-in{transition:none}
+}
 .rd .rc-legend{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:32px;font-weight:600}
 .rd .rc-legend span{display:flex;align-items:center;gap:8px}
 .rd .dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:0 0 12px}
@@ -258,19 +498,20 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:900px){
 .rd .rc-grid{grid-template-columns:1fr}
 }
-.rd .receipt{background:#fff;border:1px solid var(--line);padding:28px 26px 30px;position:relative}
+.rd .receipt{background:#fff;border:1px solid var(--line);border-radius:8px 8px 0 0;padding:28px 26px 30px;position:relative;box-shadow:0 24px 48px -30px rgba(42,15,49,.4);
+  -webkit-mask:radial-gradient(circle 9px at 50% 100%,transparent 98%,#000) 0 0/22px 100% repeat-x;mask:radial-gradient(circle 9px at 50% 100%,transparent 98%,#000) 0 0/22px 100% repeat-x;padding-bottom:44px}
 .rd .rc-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;padding-bottom:16px;border-bottom:2px dashed var(--line);margin-bottom:8px}
-.rd .rc-head b{font-size:1.3rem}
+.rd .rc-head b{font-size:1.3rem;letter-spacing:-.02em}
 .rd .rc-head span{font-weight:600;font-size:.92rem;color:var(--purple-deep)}
 .rd .rc-lines{list-style:none;margin:0;padding:0}
-.rd .rc-lines button{width:100%;display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center;padding:12px 10px;margin:0 -10px;width:calc(100% + 20px);border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
+.rd .rc-lines button{width:100%;display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center;padding:12px 10px;margin:0 -10px;width:calc(100% + 20px);border:0;background:none;border-radius:10px;font:inherit;color:var(--ink);text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
 .rd .rc-lines button:hover{background:var(--tint)}
 .rd .rc-lines button[aria-pressed="true"]{background:var(--tint-2)}
 .rd .rc-lines .amt{font-weight:700}
 .rd .rc-lines li.gone button{opacity:.4}
 .rd .rc-lines li.gone .nm,.rd .rc-lines li.gone .amt{text-decoration:line-through}
 .rd .rc-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px dashed var(--line);margin-top:10px;padding-top:16px;font-size:1.15rem;font-variant-numeric:tabular-nums}
-.rd .rc-total b{font-size:1.6rem}
+.rd .rc-total b{font-size:1.6rem;letter-spacing:-.02em}
 .rd .rc-toggle{display:flex;gap:10px;align-items:center;margin-top:18px;font-weight:600;cursor:pointer}
 .rd .rc-toggle input{width:20px;height:20px;accent-color:var(--purple)}
 .rd .rc-save{margin-top:12px;font-weight:700;color:var(--green)}
@@ -283,21 +524,21 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:960px){
 .rd .apr{grid-template-columns:1fr}
 }
-.rd .apr-controls,.rd .apr-results{background:var(--bg);border:1px solid var(--line);padding:36px}
+.rd .apr-controls,.rd .apr-results{background:var(--bg);border-radius:28px;padding:36px}
 @media (max-width:640px){
 .rd .apr-controls,.rd .apr-results{padding:26px}
 }
 .rd .apr-label{display:block;font-weight:700;font-size:.95rem;margin-bottom:8px}
-.rd .apr-rate span{font-size:clamp(3rem,6vw,4.4rem);font-weight:700;color:var(--purple);line-height:1;font-variant-numeric:tabular-nums}
+.rd .apr-rate span{font-size:clamp(3rem,6vw,4.4rem);font-weight:800;letter-spacing:-.04em;color:var(--purple);line-height:1;font-variant-numeric:tabular-nums}
 .rd .apr-rate.over span{color:var(--red)}
 .rd .apr-track-wrap{position:relative;margin:26px 0 8px;padding-bottom:44px}
-.rd #aprRate{-webkit-appearance:none;appearance:none;width:100%;height:12px;background:linear-gradient(90deg,var(--purple) var(--fill,15%),var(--tint-2) var(--fill,15%));outline:none;margin:0}
-.rd #aprRate::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--purple);cursor:grab}
+.rd #aprRate{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--purple) var(--fill,15%),var(--tint-2) var(--fill,15%));outline:none;margin:0}
+.rd #aprRate::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--purple);cursor:grab;box-shadow:0 4px 12px -2px rgba(42,15,49,.4)}
 .rd #aprRate::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--purple);cursor:grab}
 .rd #aprRate:focus-visible{outline:3px solid var(--purple);outline-offset:6px}
 .rd .apr-marks{position:absolute;left:15px;right:15px;top:0;height:100%;pointer-events:none}
 .rd .mk{position:absolute;top:-6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
-.rd .mk i{width:3px;height:24px}
+.rd .mk i{width:3px;height:24px;border-radius:2px}
 .rd .mk em{font-style:normal;font-size:.78rem;font-weight:700;white-space:nowrap;margin-top:4px}
 .rd .mk-buy i{background:var(--ink)}
 .rd .mk-buy em{color:var(--ink)}
@@ -310,34 +551,43 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:640px){
 .rd .apr-row{grid-template-columns:1fr}
 }
-.rd .seg{display:inline-flex;background:var(--tint);padding:4px;gap:2px;flex-wrap:nowrap}
-.rd .seg button{border:0;background:none;font:inherit;font-weight:700;padding:9px 13px;cursor:pointer;color:var(--ink);font-size:.92rem;white-space:nowrap}
+.rd .seg{display:inline-flex;background:var(--tint);border-radius:999px;padding:4px;gap:2px;flex-wrap:nowrap}
+.rd .seg button{border:0;background:none;font:inherit;font-weight:700;padding:9px 13px;border-radius:999px;cursor:pointer;color:var(--ink);font-size:.92rem;white-space:nowrap}
 .rd .seg button[aria-checked="true"]{background:var(--purple);color:#fff}
-.rd .stepper{display:inline-flex;align-items:center;gap:4px;background:var(--tint);padding:4px}
-.rd .stepper button{width:36px;height:36px;border-radius:50%;border:0;background:#fff;font:inherit;font-weight:700;font-size:1.2rem;cursor:pointer;color:var(--purple)}
-.rd .stepper input{width:56px;border:0;background:none;font:inherit;font-weight:700;text-align:right;color:var(--ink);font-size:1.05rem;-moz-appearance:textfield}
+.rd .stepper{display:inline-flex;align-items:center;gap:4px;background:var(--tint);border-radius:999px;padding:4px}
+.rd .stepper button{width:36px;height:36px;border-radius:50%;border:0;background:#fff;font:inherit;font-weight:800;font-size:1.2rem;cursor:pointer;color:var(--purple)}
+.rd .stepper input{width:56px;border:0;background:none;font:inherit;font-weight:800;text-align:right;color:var(--ink);font-size:1.05rem;-moz-appearance:textfield}
 .rd .stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
-.rd .stepper span{font-weight:700;margin-right:8px}
+.rd .stepper span{font-weight:800;margin-right:8px}
 .rd .apr-hint{margin-top:18px;font-weight:600}
-.rd .apr-big b{display:block;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
-.rd .apr-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;padding-top:22px;border-top:var(--divider)}
-.rd .apr-split b{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}
-.rd .apr-bar{display:flex;height:18px;overflow:hidden;margin-top:26px;background:var(--tint)}
+.rd .apr-big b{display:block;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
+.rd .apr-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
+.rd .apr-split b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
+.rd .apr-bar{display:flex;height:18px;border-radius:9px;overflow:hidden;margin-top:26px;background:var(--tint)}
 .rd .apr-bar i{display:block;height:100%;transition:width .25s}
 .rd #barP{background:var(--ink)}
 .rd #barI{background:var(--purple)}
 .rd .apr-bar-key{display:flex;gap:18px;margin-top:10px;font-weight:600;font-size:.92rem}
 .rd .apr-bar-key span{display:flex;align-items:center;gap:6px}
-.rd .apr-bar-key i{width:12px;height:12px;display:inline-block}
+.rd .apr-bar-key i{width:12px;height:12px;border-radius:3px;display:inline-block}
 .rd .apr-bar-key .k1{background:var(--ink)}
 .rd .apr-bar-key .k2{background:var(--purple)}
-.rd .apr-verdict{margin-top:24px;padding:16px 18px;font-weight:600;line-height:1.55;background:var(--tint)}
+.rd .apr-verdict{margin-top:24px;border-radius:16px;padding:16px 18px;font-weight:600;line-height:1.55;background:var(--tint)}
 .rd .apr-verdict.bad{background:#fbe1df;color:#7a1a14}
 .rd .apr-verdict.ok{background:#e3f3e8;color:#14512b}
 @media (prefers-reduced-motion:reduce){
 .rd .apr-bar i{transition:none}
 }
-
+.rd .doc-mock{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;font-size:.85rem;line-height:1.45;box-shadow:0 20px 40px -24px rgba(42,15,49,.3)}
+.rd .doc-mock .dh{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:16px;font-weight:800;font-size:1rem}
+.rd .doc-block{position:relative;border:1px solid var(--line);border-radius:10px;padding:14px 14px 14px 52px;margin-bottom:10px;min-height:56px}
+.rd .doc-block .pin{position:absolute;left:10px;top:12px;transform:none;width:30px;height:30px;font-size:.85rem;border-width:2px}
+.rd .doc-block .pin[aria-pressed="true"]{transform:scale(1.1)}
+.rd .doc-block b{display:block;margin-bottom:4px}
+.rd .bg-form{background:#fff;border:2px solid var(--ink);border-radius:6px;padding:24px;font-size:.85rem;line-height:1.45}
+.rd .bg-form .t{text-align:center;font-weight:800;font-size:1.4rem;letter-spacing:.04em;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:14px}
+.rd .box{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--ink);padding:10px;margin-bottom:8px}
+.rd .box i{flex:0 0 16px;height:16px;border:2px solid var(--ink);margin-top:2px}
 .rd .key3 .card h4{font-size:1rem;letter-spacing:0;color:var(--purple);margin-bottom:8px}
 .rd .key3 .card h3{font-size:1.3rem;margin-bottom:10px}
 .rd .key3 .card p{line-height:1.7}
@@ -348,7 +598,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .chapter h3{font-size:1.5rem;margin:14px 0 4px}
 .rd .chapter .u{font-weight:600}
 .rd .chapter p.d{margin:16px 0;line-height:1.7}
-.rd .chapter .leads{font-size:.98rem;line-height:1.6;padding-top:16px;border-top:var(--divider)}
+.rd .chapter .leads{font-size:.98rem;line-height:1.6;padding-top:16px;border-top:1px solid var(--line)}
 .rd .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
 @media (max-width:860px){
 .rd .roles{grid-template-columns:1fr 1fr}
@@ -356,7 +606,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:520px){
 .rd .roles{grid-template-columns:1fr}
 }
-.rd .roles div{background:var(--bg);padding:22px}
+.rd .roles div{background:var(--bg);border-radius:18px;padding:22px}
 .rd .roles b{display:block;font-size:1.1rem;margin-bottom:4px}
 .rd form.apply{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
 @media (max-width:760px){
@@ -365,48 +615,161 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .fld{display:flex;flex-direction:column;gap:8px}
 .rd .fld.full{grid-column:1/-1}
 .rd .fld label,.rd .fld legend{font-weight:700}
-.rd .fld input,.rd .fld select,.rd .fld textarea{font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);padding:13px 16px}
+.rd .fld input,.rd .fld select,.rd .fld textarea{font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:13px 16px}
 .rd .fld input:focus,.rd .fld select:focus,.rd .fld textarea:focus{border-color:var(--purple);outline:none}
 .rd .fld textarea{min-height:130px;resize:vertical}
 .rd fieldset.fld{border:0;padding:0;margin:0}
 .rd .radios{display:flex;gap:18px}
 .rd .radios label{font-weight:600;display:flex;gap:8px;align-items:center}
 .rd .form-note{grid-column:1/-1;font-weight:600;line-height:1.6}
-.rd .form-ok{grid-column:1/-1;background:#e3f3e8;color:var(--green);padding:16px 18px;font-weight:700}
+.rd .form-ok{grid-column:1/-1;background:#e3f3e8;color:var(--green);border-radius:14px;padding:16px 18px;font-weight:700}
 .rd .campus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:56px}
 @media (max-width:720px){
 .rd .campus-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:12px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
 .rd .campus{scroll-snap-align:start}
 }
-.rd .campus{display:flex;flex-direction:column;gap:22px;padding:14px 14px 26px;background:var(--bg);border:1px solid var(--line);transition:border-color .2s}
-.rd .campus:hover{border-color:var(--purple)}
-.rd .campus-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--band)}
+.rd .campus{display:flex;flex-direction:column;gap:22px;border-radius:24px;padding:14px 14px 26px;background:var(--bg);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
+.rd .campus:hover{border-color:var(--purple);box-shadow:0 24px 48px -28px rgba(94,26,107,.45)}
+.rd .campus-img{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:999px 999px 16px 16px;background:linear-gradient(180deg,#e9d3ee 0%,#f6ecf8 62%,#fbf6fc 100%)}
 .rd .campus-img img{position:absolute;display:block}
 .rd .campus-img.royce img{left:50%;bottom:0;height:60%;width:auto;max-width:none;transform:translateX(-43%)}
 .rd .campus-img.tower img{left:50%;bottom:0;height:96%;width:auto;max-width:none;transform:translateX(-50%)}
 .rd .campus-img.photo img{inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 60%}
 .rd .campus-body{padding:0 12px;display:flex;flex-direction:column;gap:10px;flex:1}
+.rd .campus-body .tag{align-self:flex-start}
 .rd .campus-body h3{font-size:clamp(1.2rem,1.9vw,1.45rem)}
 .rd .campus-body p{line-height:1.6;flex:1;font-size:.98rem}
 .rd .campus-go{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--purple);margin-top:4px}
-.rd .avatar-img{width:96px;height:96px;object-fit:cover;display:block}
+.rd .campus-go svg{transition:transform .2s}
+.rd .campus:hover .campus-go svg{transform:translateX(4px)}
+@media (prefers-reduced-motion:reduce){
+.rd .campus-go svg{transition:none}
+}
+.rd .avatar-img{width:96px;height:96px;border-radius:24px;object-fit:cover;display:block}
 .rd .socials{display:flex;gap:14px;flex-wrap:wrap}
 .rd .team{margin-top:40px}
-
-.rd .flagbox{margin-top:16px;padding:14px 16px;font-weight:600;line-height:1.6}
-
-.rd .bg-img{width:100%;height:auto;border:1px solid var(--line);display:block}
+.rd .panel .sub{font-weight:700;margin-bottom:10px;color:var(--purple-deep)}
+.rd .panel .steps{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;line-height:1.65}
+.rd .flagbox{margin-top:16px;border-radius:14px;padding:14px 16px;font-weight:600;line-height:1.6}
+.rd .stage .pin{width:32px;height:32px;font-size:.9rem}
+.rd .pin.sevpin-easy{background:#1d6b3a}
+.rd .pin.sevpin-watch{background:#a36a00}
+.rd .pin.sevpin-red{background:#b3261e}
+.rd .pin.sevpin-know{background:#9533A5}
+.rd .stage .pin[aria-pressed="true"]{outline:3px solid #fff;outline-offset:2px}
+.rd .title-real{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 24px 48px -28px rgba(42,15,49,.45)}
+.rd .title-real img{display:block;width:100%;height:auto}
+.rd .title-real .zone{position:absolute;border:2px dashed rgba(149,51,165,.85);background:rgba(149,51,165,.10);border-radius:6px;cursor:pointer;padding:0;transition:background .2s}
+.rd .title-real .zone.danger{border-color:rgba(179,38,30,.85);background:rgba(179,38,30,.08)}
+.rd .title-real .zone:hover,.rd .title-real .zone[aria-pressed="true"]{background:rgba(149,51,165,.28)}
+.rd .title-real .zone.danger:hover,.rd .title-real .zone.danger[aria-pressed="true"]{background:rgba(179,38,30,.25)}
+.rd .bg-img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(42,15,49,.3);display:block}
 .rd details .say{margin-top:14px}
-
-.rd .bub{max-width:84%;padding:12px 15px;line-height:1.5;font-size:.98rem}
-.rd .bub.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:0}
-.rd .bub.me{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:0;font-weight:600}
-.rd .bub.flagchip{align-self:center;background:#fbe1df;color:#7a1a14;font-weight:700;font-size:.9rem;max-width:100%}
+.rd .team .card.member{border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b}
+.rd .team .avatar-img,.rd .team .avatar{border:3px solid #a53ab8}
+@media (prefers-reduced-motion:reduce){
+.rd .team .card.member{transition:none}
+.rd .team .card.member:hover{transform:none}
+}
+.rd .tour{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;margin-top:48px;align-items:start}
+.rd .tour-visual{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px);z-index:2}
+.rd .tour-frame{position:relative;overflow:hidden;border-radius:24px;background:var(--tint);box-shadow:0 30px 60px -30px rgba(42,15,49,.45)}
+.rd .tour-zoom{position:relative;transform-origin:0 0;transition:transform .9s cubic-bezier(.65,0,.25,1);will-change:transform}
+.rd .tour-zoom>img{display:block;width:100%;height:auto;user-select:none}
+.rd .spot{position:absolute;opacity:0;pointer-events:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--purple),0 0 0 200vmax rgba(42,15,49,.55);transition:left .9s cubic-bezier(.65,0,.25,1),top .9s cubic-bezier(.65,0,.25,1),width .9s cubic-bezier(.65,0,.25,1),height .9s cubic-bezier(.65,0,.25,1),opacity .5s,border-radius .5s}
+.rd .spot.show{opacity:1}
+.rd .tour-hud{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none}
+.rd .tour-count{background:#fff;color:var(--ink);font-weight:800;border-radius:999px;padding:6px 14px;font-size:.92rem;font-variant-numeric:tabular-nums;box-shadow:0 6px 16px -8px rgba(42,15,49,.5)}
+.rd .tour-dots{display:flex;gap:6px;background:rgba(255,255,255,.9);border-radius:999px;padding:8px 10px}
+.rd .tour-dots i{width:8px;height:8px;border-radius:50%;background:var(--tint-2);transition:background .3s,transform .3s}
+.rd .tour-dots i.on{background:var(--purple);transform:scale(1.35)}
+.rd .tour-steps{display:flex;flex-direction:column}
+.rd .tour-step{min-height:78vh;display:flex;align-items:center;padding:6vh 0}
+.rd .tour-step:last-child{min-height:88vh}
+.rd .tour-intro{min-height:52vh;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
+.rd .tour-intro p{font-size:1.35rem;font-weight:700;line-height:1.5;max-width:420px}
+.rd .tour-arrow{font-size:2rem;color:var(--purple);animation:rd-bob 1.6s ease-in-out infinite}
+@keyframes rd-bob{50%{transform:translateY(8px)}}
+.rd .tour-card{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:32px;opacity:.25;transform:translateX(24px) scale(.97);transition:opacity .5s,transform .5s,box-shadow .5s}
+.rd .band .tour-card{border-color:transparent}
+.rd .tour-step.on .tour-card{opacity:1;transform:none;box-shadow:0 24px 48px -30px rgba(94,26,107,.45)}
+.rd .tour-card h3{font-size:1.6rem;margin:12px 0}
+.rd .tour-card p{line-height:1.75}
+.rd .tour-card .sub{font-weight:700;margin-bottom:10px;color:var(--purple-deep)}
+.rd .tour-card .steps{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;line-height:1.65}
+.rd .tour-doc .tour-frame{max-width:560px;margin:0 auto}
+.rd .doc-mock.tour-zoom{border:0;box-shadow:none;border-radius:0;transition:transform .9s cubic-bezier(.65,0,.25,1)}
+.rd .doc-block .pin-n{position:absolute;left:10px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--purple);color:#fff;font-weight:800;font-size:.85rem;display:grid;place-items:center}
+@media (max-width:900px){
+.rd .tour{grid-template-columns:1fr;gap:0}
+.rd .tour-visual{top:calc(env(safe-area-inset-top,0px) + 76px);background:var(--bg);padding:10px 0 14px;box-shadow:0 14px 16px -12px rgba(42,15,49,.18)}
+.rd .band .tour-visual{background:var(--tint)}
+.rd .tour-frame{max-height:42vh;width:auto;margin:0 auto}
+.rd .tour-doc .tour-frame,.rd .tour-frame[style*="1040/1212"]{width:calc(42vh * 1040 / 1212);max-width:100%}
+.rd .tour-step{min-height:70vh}
+.rd .tour-card{padding:24px;transform:translateY(20px)}
+}
+@media (prefers-reduced-motion:reduce){
+.rd .tour-zoom,.rd .spot,.rd .tour-card{transition:none}
+.rd .tour-arrow{animation:none}
+}
+.rd .chat-phone{width:min(360px,100%);margin:0 auto;border-radius:40px;background:var(--ink);padding:12px;box-shadow:0 30px 60px -24px rgba(94,26,107,.5)}
+.rd .chat-top{display:flex;align-items:center;gap:12px;background:#fff;border-radius:28px 28px 0 0;padding:18px 18px 14px;border-bottom:1px solid var(--line)}
+.rd .chat-top b{display:block;line-height:1.2}
+.rd .chat-top span:not(.chat-av){font-size:.88rem;font-weight:600;color:var(--purple-deep)}
+.rd .chat-av{width:38px;height:38px;border-radius:50%;background:var(--tint-2);color:var(--purple-deep);display:grid;place-items:center;font-weight:800}
+.rd .chat-body{background:#fbf6fc;border-radius:0 0 28px 28px;min-height:420px;padding:18px 14px;display:flex;flex-direction:column;gap:10px}
+.rd .chat-note{align-self:center;font-size:.85rem;font-weight:700;color:var(--purple-deep);background:var(--tint-2);border-radius:999px;padding:4px 12px}
+.rd .bub{max-width:84%;padding:12px 15px;border-radius:20px;line-height:1.5;font-size:.98rem;animation:rd-pop .35s cubic-bezier(.2,.9,.3,1.3) both}
+.rd .bub.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
+.rd .bub.me{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:6px;font-weight:600}
+.rd .bub.flagchip{align-self:center;background:#fbe1df;color:#7a1a14;font-weight:700;font-size:.9rem;border-radius:12px;max-width:100%}
 .rd .bub.flagchip b{margin-right:6px}
-
+@keyframes rd-pop{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
+.rd .typing{display:inline-flex;gap:4px;padding:4px 2px}
+.rd .typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;animation:rd-blink 1s infinite}
+.rd .typing i:nth-child(2){animation-delay:.15s}
+.rd .typing i:nth-child(3){animation-delay:.3s}
+@keyframes rd-blink{50%{opacity:1;transform:translateY(-3px)}}
+@media (max-width:900px){
+.rd .chat-body{min-height:210px;max-height:240px;overflow:hidden;justify-content:flex-end;padding:12px}
+.rd .chat-top{padding:12px 14px 10px}
+.rd .chat-phone{border-radius:30px;padding:8px}
+.rd .bub{font-size:.9rem;padding:9px 12px}
+.rd .tour-chat .tour-visual{padding-bottom:10px}
+.rd .chat-phone{width:min(340px,100%)}
+}
+@media (prefers-reduced-motion:reduce){
+.rd .bub{animation:none}
+.rd .typing i{animation:none}
+}
+.rd .drive{height:420vh;padding:0}
+.rd .drive-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);height:calc(100vh - 76px);height:calc(100svh - 76px);display:flex;align-items:center}
+.rd .drive-sticky .wrap{width:100%}
+.rd .drive-stage{position:relative;margin-top:28px}
+.rd .drive-road{width:100%;height:auto;aspect-ratio:1200/260;display:block;overflow:visible}
+.rd .dstop circle{transition:fill .3s}
+.rd .dstop.on circle{fill:#9533A5}
+.rd .dstop.on text{fill:#fff}
+.rd .drive-card{max-width:640px;margin:22px auto 0;background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:26px 28px;text-align:left;box-shadow:0 24px 48px -30px rgba(94,26,107,.45)}
+.rd .drive-card h3{font-size:1.45rem;margin:10px 0 8px}
+.rd .drive-card p{line-height:1.7}
+.rd .drive-card.pop{opacity:0;transform:translateY(16px) scale(.97)}
+.rd .drive-card.pop.in{opacity:1;transform:none;transition:opacity .45s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
+.rd .drive-alert{max-width:640px;margin:18px auto 0}
+@media (max-width:760px){
+.rd .drive-road{aspect-ratio:1200/360}
+.rd .drive-card{padding:20px}
+.rd .drive-alert{display:none}
+}
+@media (prefers-reduced-motion:reduce){
+.rd .drive{height:auto}
+.rd .drive-sticky{position:static;height:auto;padding:72px 0}
+.rd .drive-card.pop{opacity:1;transform:none}
+}
 .rd .rc-wrap{max-width:640px;margin:40px auto 0}
-.rd .rc-lines li{}
-.rd .rc-lines .rc-note{display:grid;grid-template-rows:0fr}
+.rd .rc-lines li{border-radius:10px}
+.rd .rc-lines .rc-note{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
 .rd .rc-lines .rc-note>div{overflow:hidden;padding:0 10px}
 .rd .rc-lines li.open .rc-note{grid-template-rows:1fr}
 .rd .rc-lines li.open .rc-note>div{padding:6px 10px 16px}
@@ -419,142 +782,180 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 }
 .rd .insp-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px}
 .rd .insp-progress{display:flex;align-items:center;gap:14px;font-weight:700;flex:1;min-width:240px}
-.rd .insp-meter{flex:1;max-width:320px;height:12px;background:var(--bg);overflow:hidden}
-.rd .insp-meter i{display:block;height:100%;width:0;background:var(--purple);transition:width .5s cubic-bezier(.2,.9,.3,1)}
+.rd .insp-meter{flex:1;max-width:320px;height:12px;border-radius:6px;background:var(--bg);overflow:hidden}
+.rd .insp-meter i{display:block;height:100%;width:0;background:var(--purple);border-radius:6px;transition:width .5s cubic-bezier(.2,.9,.3,1)}
 .rd .insp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
-.rd .insp-chips button{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--bg);padding:8px 14px 8px 10px;font:inherit;font-weight:700;font-size:.92rem;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
+.rd .insp-chips button{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 14px 8px 10px;font:inherit;font-weight:700;font-size:.92rem;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
 .rd .insp-chips button:hover{border-color:var(--purple)}
 .rd .insp-chips .ck{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:background .2s,border-color .2s}
 .rd .insp-chips button.done .ck{background:var(--green);border-color:var(--green)}
 .rd .insp-chips button.done .ck::after{content:"";width:8px;height:4px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
 .rd .insp-chips button.cur{border-color:var(--purple);background:var(--tint-2)}
 .rd .insp{margin-top:22px}
-.rd .insp-frame{position:relative;overflow:hidden;aspect-ratio:3/2;background:#e9e9ee}
-.rd .insp-zoom{position:absolute;inset:0;transform-origin:0 0;transition:transform .8s cubic-bezier(.65,0,.25,1)}
+.rd .insp-frame{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:3/2;background:#e9e9ee;box-shadow:0 30px 60px -30px rgba(42,15,49,.45)}
+.rd .insp-zoom{position:absolute;inset:0;transform-origin:0 0;transition:transform .8s cubic-bezier(.65,0,.25,1);will-change:transform}
 .rd .insp-zoom img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
 .rd .insp-hots{position:absolute;inset:0;transition:opacity .3s}
 .rd .insp-frame.zoomed .insp-hots{opacity:0;pointer-events:none}
-.rd .spot{position:absolute;opacity:0;pointer-events:none;outline:3px solid var(--purple);box-shadow:0 0 0 200vmax rgba(42,15,49,.55);transition:left .8s cubic-bezier(.65,0,.25,1),top .8s cubic-bezier(.65,0,.25,1),width .8s cubic-bezier(.65,0,.25,1),height .8s cubic-bezier(.65,0,.25,1),opacity .3s}
-.rd .spot.show{opacity:1}
 .rd .hot{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;--c:var(--purple)}
 .rd .hot.sevpin-easy{--c:#1d6b3a}
 .rd .hot.sevpin-watch{--c:#a36a00}
 .rd .hot.sevpin-red{--c:#b3261e}
 .rd .hot.sevpin-know{--c:#9533A5}
-.rd .hot-dot{position:absolute;inset:12px;border-radius:50%;background:var(--c);border:3px solid #fff}
+.rd .hot-dot{position:absolute;inset:12px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.35)}
+.rd .hot-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--c);animation:rd-ring 2s ease-out infinite}
 .rd .hot.done .hot-dot{background:var(--green)}
 .rd .hot.done .hot-dot::after{content:"";position:absolute;left:5px;top:5px;width:8px;height:4px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
-.rd .hot-tip{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-weight:700;font-size:.85rem;padding:6px 10px;opacity:0;pointer-events:none}
-.rd .hot:hover .hot-tip,.rd .hot:focus-visible .hot-tip{opacity:1}
-.rd .insp-card{position:absolute;top:16px;bottom:16px;width:min(44%,440px);background:#fff;border:1px solid var(--line);padding:26px 26px 20px;overflow:auto;opacity:0;pointer-events:none}
-.rd .insp-card[data-side="right"]{right:16px}
-.rd .insp-card[data-side="left"]{left:16px}
-.rd .insp-card.in{opacity:1;pointer-events:auto}
+.rd .hot.done .hot-ring{animation:none;opacity:0}
+@keyframes rd-ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
+.rd .hot-tip{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%,6px);white-space:nowrap;background:var(--ink);color:#fff;font-weight:700;font-size:.85rem;padding:6px 10px;border-radius:8px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
+.rd .hot:hover .hot-tip,.rd .hot:focus-visible .hot-tip{opacity:1;transform:translate(-50%,0)}
+.rd .insp-card{position:absolute;top:16px;bottom:16px;width:min(44%,440px);background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-radius:20px;padding:26px 26px 20px;overflow:auto;box-shadow:0 30px 60px -20px rgba(42,15,49,.55);opacity:0;transition:opacity .45s .25s,transform .45s .25s cubic-bezier(.2,.9,.3,1.1)}
+.rd .insp-card[data-side="right"]{right:16px;transform:translateX(30px)}
+.rd .insp-card[data-side="left"]{left:16px;transform:translateX(-30px)}
+.rd .insp-card.in{opacity:1;transform:none}
 .rd .insp-card h3{font-size:1.55rem;margin:10px 0 6px}
 .rd .insp-card .sub{font-weight:700;color:var(--purple-deep);margin-bottom:8px}
 .rd .insp-card p{line-height:1.65}
 .rd .insp-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--tint);font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink)}
-.rd .how{font-weight:700;margin-top:16px}
+.rd .how{font-weight:800;margin-top:16px}
 .rd .todo{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
 .rd .todo label{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;cursor:pointer;line-height:1.55}
 .rd .todo input{width:20px;height:20px;margin-top:2px;accent-color:var(--green)}
 .rd .todo input:checked+span{text-decoration:line-through;text-decoration-color:rgba(42,15,49,.4)}
-.rd .insp-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;position:sticky;bottom:-20px;background:#fff;padding:14px 0 4px}
+.rd .insp-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;position:sticky;bottom:-20px;background:linear-gradient(transparent,#fff 30%);padding:14px 0 4px}
 .rd .insp-nav .btn{padding:12px 20px}
 .rd .insp-nav .btn[disabled]{opacity:.35;cursor:default}
-.rd .insp-done{margin-top:22px;background:#e3f3e8;color:#14512b;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-weight:600;line-height:1.55}
+.rd .insp-done{margin-top:22px;background:#e3f3e8;color:#14512b;border-radius:18px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-weight:600;line-height:1.55}
 @media (max-width:900px){
 .rd .insp-frame{overflow:visible;aspect-ratio:auto}
 .rd .insp-frame::before{content:"";display:block;aspect-ratio:3/2}
 .rd .insp-zoom,.rd .insp-hots{bottom:auto;height:0;padding-bottom:66.67%}
-.rd .insp-frame{overflow:visible;aspect-ratio:auto}
-
-.rd .insp-card{position:relative;top:auto;bottom:auto;left:auto!important;right:auto!important;width:auto;margin-top:14px;max-height:none}
+.rd .insp-frame{border-radius:18px}
+.rd .insp-zoomwrap{}
+.rd .insp-card{position:relative;top:auto;bottom:auto;left:auto!important;right:auto!important;width:auto;margin-top:14px;transform:translateY(20px)!important;max-height:none}
+.rd .insp-card.in{transform:none!important}
 .rd .hot{width:36px;height:36px}
 .rd .hot-dot{inset:9px}
 }
 @media (prefers-reduced-motion:reduce){
-.rd .insp-zoom,.rd .spot,.rd .insp-meter i{transition:none}
+.rd .insp-zoom,.rd .insp-card,.rd .insp-meter i{transition:none}
+.rd .hot-ring{animation:none}
 }
-
+.rd .tour-card{opacity:.4}
 .rd .fv{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center}
 @media (max-width:900px){
 .rd .fv{grid-template-columns:1fr;gap:24px}
 }
-.rd .fv-player{position:relative;overflow:hidden;background:var(--ink);aspect-ratio:16/9}
+.rd .fv-player{position:relative;border-radius:28px;overflow:hidden;background:var(--ink);box-shadow:0 30px 60px -28px rgba(42,15,49,.5);aspect-ratio:16/9}
 .rd .fv-player video{display:block;width:100%;height:100%;object-fit:cover}
-.rd .fv-play{position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:transparent;display:grid;place-items:center;color:#fff}
-.rd .fv-btn{width:88px;height:88px;border-radius:50%;background:var(--purple);display:grid;place-items:center}
+.rd .fv-play{position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:linear-gradient(180deg,transparent 55%,rgba(42,15,49,.55));display:grid;place-items:center;color:#fff}
+.rd .fv-btn{width:88px;height:88px;border-radius:50%;background:var(--purple);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.28);transition:transform .2s,box-shadow .2s}
 .rd .fv-btn svg{margin-left:4px}
-.rd .fv-len{position:absolute;right:18px;bottom:16px;background:rgba(42,15,49,.7);padding:5px 12px;font-weight:700;font-size:.9rem}
+.rd .fv-play:hover .fv-btn{transform:scale(1.07);box-shadow:0 0 0 14px rgba(255,255,255,.32)}
+.rd .fv-len{position:absolute;right:18px;bottom:16px;background:rgba(42,15,49,.7);border-radius:999px;padding:5px 12px;font-weight:700;font-size:.9rem}
 .rd .fv-player.playing .fv-play{display:none}
 .rd .fv-text .lede{margin-top:16px}
 .rd .fv-who{margin-top:24px;padding-left:16px;border-left:4px solid var(--purple);line-height:1.5}
 .rd .fv-who b{display:block;font-size:1.1rem}
-.rd .avatar-play{position:relative;border:0;padding:0;background:none;cursor:pointer;align-self:flex-start}
-.rd .ap-badge{position:absolute;right:-8px;bottom:-8px;width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;border:3px solid #fff}
+@media (prefers-reduced-motion:reduce){
+.rd .fv-btn{transition:none}
+}
+.rd .avatar-play{position:relative;border:0;padding:0;background:none;cursor:pointer;align-self:flex-start;border-radius:24px}
+.rd .avatar-play .avatar-img{transition:transform .2s}
+@keyframes rd-ring2{0%{transform:scale(.96);opacity:.9}100%{transform:scale(1.12);opacity:0}}
+.rd .ap-badge{position:absolute;right:-8px;bottom:-8px;width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 4px 10px rgba(42,15,49,.3)}
 .rd .ap-badge svg{margin-left:2px}
 .rd .member.has-video .bio{cursor:pointer}
-.rd .watch{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;border:0;background:var(--purple);color:#fff;font:inherit;font-weight:700;padding:9px 16px 9px 9px;cursor:pointer;transition:background .2s}
+.rd .watch{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;border:0;background:var(--purple);color:#fff;font:inherit;font-weight:700;border-radius:999px;padding:9px 16px 9px 9px;cursor:pointer;transition:background .2s}
 .rd .watch:hover{background:var(--purple-dark)}
 .rd .w-ico{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--purple);display:grid;place-items:center}
 .rd .w-ico svg{margin-left:2px}
 .rd .w-len{font-weight:600;opacity:.9;font-variant-numeric:tabular-nums}
 .rd .vbox{border:0;padding:0;background:transparent;max-width:min(960px,92vw);width:100%;overflow:visible}
-.rd .vbox::backdrop{background:rgba(42,15,49,.72)}
-.rd .vbox-in{position:relative;background:var(--ink);overflow:hidden}
+.rd .vbox::backdrop{background:rgba(42,15,49,.72);backdrop-filter:blur(4px)}
+.rd .vbox-in{position:relative;background:var(--ink);border-radius:24px;overflow:hidden;transform:scale(.92) translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.2,.9,.3,1.15),opacity .25s}
+.rd .vbox.in .vbox-in{transform:none;opacity:1}
 .rd .vbox video{display:block;width:100%;aspect-ratio:16/9;background:#000}
 .rd .vbox-cap{color:#fff;padding:16px 20px;line-height:1.5}
 .rd .vbox-cap b{display:block;font-size:1.1rem}
 .rd .vbox-x{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}
 @media (prefers-reduced-motion:reduce){
+.rd .avatar-play::before{animation:none}
+.rd .vbox-in{transition:none}
 }
-
-.rd .track-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:20;background:rgba(255,255,255,.95);border-bottom:var(--divider)}
+.rd .ig{display:grid;grid-template-columns:1fr minmax(300px,440px);gap:56px;align-items:center}
+@media (max-width:900px){
+.rd .ig{grid-template-columns:1fr;gap:28px}
+}
+.rd .ig-card{display:block;background:#fff;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;border-radius:24px;overflow:hidden;transition:transform .15s,box-shadow .15s}
+.rd .ig-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #7d2a8b}
+.rd .ig-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
+.rd .ig-top b{display:block;line-height:1.2}
+.rd .ig-top span{font-size:.9rem;font-weight:600;color:var(--purple-deep)}
+.rd .ig-av{width:40px;height:40px;object-fit:contain;border-radius:50%;background:var(--tint);padding:4px}
+.rd .ig-mark{margin-left:auto;color:var(--purple)}
+.rd .ig-media{aspect-ratio:1/1;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 55%),linear-gradient(140deg,#b75cc6,#5e1a6b);display:grid;place-items:center}
+.rd .ig-open{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--purple-deep);font-weight:800;border-radius:999px;padding:12px 20px}
+.rd .ig-foot{padding:14px 16px;font-weight:600;font-size:.95rem}
+@media (prefers-reduced-motion:reduce){
+.rd .ig-card{transition:none}
+.rd .ig-card:hover{transform:none}
+}
+.rd .track-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
 .rd .track-nav .wrap{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
-.rd .track-nav a{white-space:nowrap;font-weight:700;padding:9px 16px;display:inline-flex;gap:8px;align-items:center;transition:background .2s,color .2s}
-.rd .track-nav a b{font-size:.8rem;background:var(--tint-2);color:var(--purple-deep);padding:2px 8px}
+.rd .track-nav a{white-space:nowrap;font-weight:700;padding:9px 16px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;transition:background .2s,color .2s}
+.rd .track-nav a b{font-size:.8rem;background:var(--tint-2);color:var(--purple-deep);border-radius:999px;padding:2px 8px}
 .rd .track-nav a.on{background:var(--purple);color:#fff}
 .rd .track-nav a.on b{background:#fff}
-
+.rd .track-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:40px}
+.rd .track-head .icon{margin:0;flex:0 0 60px}
+.rd .track-head .lede{margin-top:10px}
 .rd .projects-2{grid-template-columns:repeat(2,1fr)}
 @media (max-width:1000px){
 .rd .projects-2{grid-template-columns:1fr}
 }
+.rd .proj{border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b}
+.rd .proj:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #7d2a8b}
 .rd .band .proj{background:#fff}
-.rd .pir{margin-top:56px;background:#fff;padding:36px;border:1px solid var(--line)}
+.rd .pir{margin-top:56px;background:#fff;border-radius:28px;padding:36px;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b}
 @media (max-width:640px){
 .rd .pir{padding:22px}
 }
 .rd .pir-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}
 .rd .pir-head h3{font-size:1.9rem;margin:10px 0 6px}
-.rd .pir-score{background:var(--ink);color:#fff;padding:12px 20px;text-align:center;min-width:120px}
+.rd .pir-score{background:var(--ink);color:#fff;border-radius:18px;padding:12px 20px;text-align:center;min-width:120px}
 .rd .pir-score span{display:block;font-weight:600;font-size:.85rem}
 .rd .pir-score b{font-size:1.8rem;font-variant-numeric:tabular-nums}
 .rd .pir-game{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;align-items:start}
 @media (max-width:900px){
 .rd .pir-game{grid-template-columns:1fr}
 }
-.rd .pir-photo{background:#fff;border:1px solid var(--line);display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;padding:20px}
+.rd .pir-photo{background:linear-gradient(180deg,#f6ecf8,#fff);border-radius:20px;padding:24px 20px 10px}
+.rd .pir-photo svg{width:100%;height:auto;display:block}
 .rd .pir-round{font-weight:700;color:var(--purple-deep);font-size:.92rem;display:block;margin-top:16px}
-.rd .pir-info h4{font-size:1.5rem;margin:4px 0 12px}
+.rd .pir-info h4{font-size:1.5rem;letter-spacing:-.02em;margin:4px 0 12px}
 .rd .pir-tags{display:flex;flex-wrap:wrap;gap:8px}
-.rd .pir-label{font-weight:700;display:block}
-.rd .pir-val{font-size:clamp(2.6rem,5vw,3.4rem);font-weight:700;color:var(--purple);font-variant-numeric:tabular-nums;margin:6px 0 14px}
-.rd #pirSlider{-webkit-appearance:none;appearance:none;width:100%;height:12px;background:linear-gradient(90deg,var(--purple) var(--fill,32%),var(--tint-2) var(--fill,32%))}
+.rd .pir-tags span{background:var(--tint);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.92rem}
+.rd .pir-tags span.bad{background:#fbe1df;color:#7a1a14}
+.rd .pir-label{font-weight:800;display:block}
+.rd .pir-val{font-size:clamp(2.6rem,5vw,3.4rem);font-weight:800;color:var(--purple);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:6px 0 14px}
+.rd #pirSlider{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--purple) var(--fill,32%),var(--tint-2) var(--fill,32%))}
 .rd #pirSlider::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--purple);cursor:grab}
 .rd #pirSlider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--purple)}
 .rd .pir-scale{display:flex;justify-content:space-between;font-weight:600;font-size:.88rem;margin:8px 0 22px}
 .rd .pir-cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
-.rd .pir-cmp div{background:var(--tint);padding:12px}
+.rd .pir-cmp div{background:var(--tint);border-radius:14px;padding:12px}
 .rd .pir-cmp span{display:block;font-weight:600;font-size:.85rem}
 .rd .pir-cmp b{font-size:1.25rem;font-variant-numeric:tabular-nums}
 .rd .pir-cmp b.fair{color:var(--purple)}
-.rd .pir-verdict{font-weight:700;font-size:1.15rem;margin:16px 0 14px}
+.rd .pir-verdict{font-weight:800;font-size:1.15rem;margin:16px 0 14px}
 .rd .pir-verdict.over{color:var(--red)}
 .rd .pir-break{list-style:none;margin:8px 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
-.rd .pir-break li{display:grid;grid-template-columns:1fr 90px 82px;gap:10px;align-items:center;font-size:.95rem}
-.rd .pir-break i{height:12px;width:var(--w)}
+.rd .pir-break li{display:grid;grid-template-columns:1fr 90px 82px;gap:10px;align-items:center;font-size:.95rem;opacity:0;transform:translateY(8px);transition:opacity .4s var(--d),transform .4s var(--d)}
+.rd .pir-reveal.go .pir-break li{opacity:1;transform:none}
+.rd .pir-break i{height:12px;border-radius:6px;width:0;transition:width .7s calc(var(--d) + 150ms) cubic-bezier(.2,.9,.3,1)}
+.rd .pir-reveal.go .pir-break i{width:var(--w)}
 .rd .pir-break i.base{background:var(--ink)}
 .rd .pir-break i.pos{background:var(--green)}
 .rd .pir-break i.neg{background:var(--red)}
@@ -566,71 +967,99 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .plan-tl h3{font-size:1.6rem}
 .rd .plan-tl>p{margin-top:6px}
 .rd .tl6{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;position:relative}
-.rd .tl6::before{content:"";position:absolute;left:0;right:0;top:15px;height:4px;background:var(--tint-2)}
+.rd .tl6::before{content:"";position:absolute;left:0;right:0;top:15px;height:4px;background:var(--tint-2);border-radius:2px}
 .rd .tl6 li{position:relative;padding-top:40px}
 .rd .tl6 li::before{content:"";position:absolute;top:4px;left:0;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--tint-2)}
 .rd .tl6 li.past::before{background:var(--purple);border-color:var(--purple)}
-.rd .tl6 li.now::before{border-color:var(--purple);background:#fff}
-.rd .tl-w{display:block;font-weight:700}
+.rd .tl6 li.now::before{border-color:var(--purple);background:#fff;box-shadow:0 0 0 6px rgba(149,51,165,.2)}
+.rd .tl-w{display:block;font-weight:800}
 .rd .tl-d{display:block;font-weight:600;font-size:.9rem;color:var(--purple-deep)}
 .rd .tl6 p{margin-top:8px;font-size:.95rem;line-height:1.55}
-.rd .tl-now{display:inline-block;margin-top:10px;background:var(--purple);color:#fff;font-weight:700;font-size:.8rem;padding:4px 10px}
+.rd .tl-now{display:inline-block;margin-top:10px;background:var(--purple);color:#fff;font-weight:700;font-size:.8rem;border-radius:999px;padding:4px 10px}
 @media (max-width:900px){
 .rd .tl6{grid-template-columns:1fr;gap:18px}
 .rd .tl6::before{left:11px;right:auto;top:0;bottom:0;width:4px;height:auto}
 .rd .tl6 li{padding:0 0 0 44px}
 .rd .tl6 li::before{top:0}
 }
-.rd .pir-start{margin-top:28px;background:var(--tint);padding:28px}
+@media (prefers-reduced-motion:reduce){
+.rd .pir-break li,.rd .pir-break i{transition:none}
+}
+.rd .pir-start{margin-top:28px;background:var(--tint);border-radius:20px;padding:28px}
 .rd .pir-start p{margin:8px 0 18px;line-height:1.6;max-width:560px}
 .rd .pir-start-row{display:flex;gap:12px;flex-wrap:wrap}
-.rd #pirState{font:inherit;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--line);padding:13px 16px;min-width:240px}
+.rd #pirState{font:inherit;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;min-width:240px}
 .rd #pirState:focus{outline:3px solid var(--purple);outline-offset:2px}
-.rd #pirGo[disabled]{opacity:.45;cursor:default}
-.rd .pir-photo{background:#fff;border:1px solid var(--line);display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;padding:20px}
-.rd .pir-photo img{max-width:92%;max-height:88%;object-fit:contain}
+.rd .pir-go[disabled],.rd #pirGo[disabled]{opacity:.45;cursor:default}
+.rd .pir-photo{background:#fff!important;border:1px solid var(--line);display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden}
+.rd .pir-photo img{max-width:92%;max-height:88%;object-fit:contain;opacity:0;transform:translateX(40px);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1)}
+.rd .pir-photo img.in{opacity:1;transform:none}
+.rd .pir-tags span.loc{background:var(--purple);color:#fff}
 .rd .pir-change{margin-top:12px;border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--purple);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
 .rd .pir-break li.state{padding-top:10px;border-top:1px dashed var(--line)}
 .rd .pir-break i.zero{background:var(--tint-2)}
 @media (prefers-reduced-motion:reduce){
+.rd .pir-photo img{transition:none;opacity:1;transform:none}
 }
-
+.rd .pv-tag{background:var(--ink);color:#fff}
 .rd .pv{display:grid;grid-template-columns:1fr minmax(320px,480px);gap:56px;align-items:center}
 @media (max-width:900px){
 .rd .pv{grid-template-columns:1fr;gap:28px}
 }
-.rd .pv-card{background:#fff;border:1px solid var(--line);padding:22px}
-.rd .pv-photo{border:1px solid var(--line);aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:#fff}
+.rd .pv-card{background:#fff;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;border-radius:24px;padding:22px}
+.rd .pv-photo{border-radius:16px;border:1px solid var(--line);aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:#fff}
 .rd .pv-photo img{max-width:90%;max-height:88%;object-fit:contain}
 .rd .pv-card h3{font-size:1.35rem;margin:16px 0 10px}
-.rd .pv-q{font-weight:700;margin:18px 0 10px}
+.rd .pv-q{font-weight:800;margin:18px 0 10px}
 .rd .pv-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
-.rd .pv-opts button{font:inherit;font-weight:700;font-size:1.1rem;padding:14px 8px;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:border-color .2s;font-variant-numeric:tabular-nums}
-.rd .pv-opts button:hover:not(:disabled){border-color:var(--purple)}
+.rd .pv-opts button{font:inherit;font-weight:800;font-size:1.1rem;padding:14px 8px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,transform .15s;font-variant-numeric:tabular-nums}
+.rd .pv-opts button:hover:not(:disabled){border-color:var(--purple);transform:translateY(-2px)}
 .rd .pv-opts button:disabled{cursor:default}
 .rd .pv-opts button.right{background:#e3f3e8;border-color:var(--green);color:#14512b}
 .rd .pv-opts button.wrong{background:#fbe1df;border-color:var(--red);color:#7a1a14}
-.rd .pv-out{margin-top:14px;line-height:1.6}
-.rd .pv-out a{color:var(--purple);font-weight:700}
+.rd .pv-out{margin-top:14px;line-height:1.6;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
+.rd .pv-out.in{opacity:1;transform:none}
+.rd .pv-out a{color:var(--purple);font-weight:800}
 @media (prefers-reduced-motion:reduce){
 .rd .pv-out,.rd .pv-opts button{transition:none}
 }
-
+.rd .socials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
+@media (max-width:1000px){
+.rd .socials-grid{grid-template-columns:1fr 1fr}
+}
+@media (max-width:560px){
+.rd .socials-grid{grid-template-columns:1fr}
+}
+.rd .soc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;border-radius:22px;padding:20px;transition:transform .15s,box-shadow .15s}
+.rd .soc:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #7d2a8b}
+.rd .soc-ic{flex:none;width:52px;height:52px;border-radius:16px;background:var(--tint-2);color:var(--purple);display:grid;place-items:center}
+.rd .soc-txt{min-width:0}
+.rd .soc-pf{display:block;font-weight:700;font-size:.9rem;color:var(--purple-deep)}
+.rd .soc-txt b{display:block;font-size:1.12rem;white-space:nowrap}
+.rd .soc-go{position:absolute;top:22px;right:20px;color:var(--purple);transition:transform .2s}
+.rd .soc:hover .soc-go{transform:translate(2px,-2px)}
+@media (prefers-reduced-motion:reduce){
+.rd .soc,.rd .soc-go{transition:none}
+.rd .soc:hover{transform:none}
+}
 .rd .yoyo{height:380vh;padding:0}
 .rd .yoyo-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);height:calc(100vh - 76px);height:calc(100svh - 76px);display:flex;align-items:center}
 .rd .yoyo-sticky .wrap{width:100%}
 .rd .yoyo-stage{position:relative;margin-top:24px}
 .rd .yoyo-svg{width:100%;height:auto;display:block;overflow:visible}
-
-.rd .yy-day{position:absolute;top:4%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:700;padding:6px 14px;font-variant-numeric:tabular-nums}
-.rd .yy-contract{position:absolute;top:0;left:2%;padding:12px 16px;display:flex;flex-direction:column;gap:2px;border:2px solid;background:#fff}
+.rd #yyPhone.ring{animation:rd-ring3 .35s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
+@keyframes rd-ring3{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
+.rd .yy-day{position:absolute;top:4%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:800;border-radius:999px;padding:8px 18px;font-variant-numeric:tabular-nums}
+.rd .yy-contract{position:absolute;top:0;left:2%;border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;border:3px solid;box-shadow:5px 5px 0 currentColor;background:#fff;transition:transform .35s;animation:rd-flip .5s ease}
 .rd .yy-contract.ok{color:#1d6b3a}
 .rd .yy-contract.bad{color:#b3261e}
 .rd .yy-contract span{font-weight:700;font-size:.85rem}
 .rd .yy-contract b{font-size:1.4rem;color:var(--ink)}
-.rd .yy-contract em{font-style:normal;font-weight:700}
+.rd .yy-contract em{font-style:normal;font-weight:800}
+@keyframes rd-flip{from{transform:rotateY(90deg)}to{transform:none}}
 .rd .yy-caption{max-width:680px;margin:18px auto 0;text-align:center;min-height:96px}
 .rd .yy-caption p{margin-top:10px;font-size:1.2rem;font-weight:700;line-height:1.5}
+.rd .yy-caption.in{animation:rd-pop .4s cubic-bezier(.2,.9,.3,1.2)}
 @media (max-width:760px){
 .rd .yy-contract{position:static;margin:0 auto 10px;width:max-content}
 .rd .yy-day{top:auto;bottom:-6px}
@@ -639,29 +1068,32 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (prefers-reduced-motion:reduce){
 .rd .yoyo{height:auto}
 .rd .yoyo-sticky{position:static;height:auto;padding:72px 0}
-
+.rd #yyPhone.ring{animation:none}
 }
 .rd .fs{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
 @media (max-width:900px){
 .rd .fs{grid-template-columns:1fr;gap:28px}
 }
-.rd .fs-paper-wrap{position:relative}
-.rd .fs-paper{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#fff}
+.rd .fs-paper-wrap{position:relative;padding-bottom:70px}
+.rd .fs-paper{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;background:#fffdf7;border-radius:6px;box-shadow:0 24px 48px -26px rgba(42,15,49,.45);transform:rotate(-1.5deg);background-image:repeating-linear-gradient(transparent 0 31px,#e7dff0 31px 32px)}
 .rd .fs-cell{position:relative;padding:28px 22px 34px;min-height:150px;border:2px solid #2a0f31;margin:-1px}
 .rd .fs-cell span{display:block;font-weight:700;font-size:.95rem}
 .rd .fs-cell b{display:block;font-family:"Caveat","Segoe Print","Comic Sans MS",cursive;font-size:2.6rem;font-weight:700;color:#1b3a8a;margin-top:10px;line-height:1}
 .rd .fs-pay{background:rgba(149,51,165,.08)}
-
-.rd .fs-pay s{position:absolute;right:18px;top:26px;font-family:"Caveat","Segoe Print",cursive;font-size:1.6rem;color:#b3261e;opacity:.6}
-.rd .fs-hidden{margin:0 10%;background:#b3261e;color:#fff;padding:16px 20px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
+.rd .fs-pay b.pop{animation:rd-pop .45s cubic-bezier(.2,.9,.3,1.3)}
+.rd .fs-pay s{position:absolute;right:18px;top:26px;font-family:"Caveat","Segoe Print",cursive;font-size:1.6rem;color:#b3261e;opacity:0}
+.rd .fs-pay s.go{animation:rd-strike .9s ease forwards}
+@keyframes rd-strike{0%{opacity:1;transform:none}100%{opacity:.55;transform:translateY(-4px) rotate(-6deg)}}
+.rd .fs-hidden{position:absolute;left:10%;right:10%;bottom:0;z-index:1;background:#b3261e;color:#fff;border-radius:0 0 16px 16px;padding:16px 20px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;transform:translateY(-70px);opacity:0;transition:transform .6s cubic-bezier(.2,.9,.3,1.1),opacity .4s}
+.rd .fs-hidden.out{transform:none;opacity:1}
 .rd .fs-hidden span{font-weight:700;font-size:.9rem}
 .rd .fs-hidden b{font-size:1.5rem;font-variant-numeric:tabular-nums}
-
-.rd .fs-chat{background:#fff;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:250px;max-height:320px;overflow:auto;border:1px solid var(--line)}
-.rd .fs-total{margin-top:18px;background:#fff;border:1px solid var(--line);padding:18px 20px}
+.rd .fs-hidden.bump b{animation:rd-pop .45s cubic-bezier(.2,.9,.3,1.3)}
+.rd .fs-chat{background:#fff;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:250px;max-height:320px;overflow:auto;border:1px solid var(--line)}
+.rd .fs-total{margin-top:18px;background:#fff;border-radius:18px;padding:18px 20px}
 .rd .fs-total-row{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
 .rd .fs-total-row b{font-size:1.6rem;font-variant-numeric:tabular-nums}
-.rd .fs-bar{display:flex;height:16px;overflow:hidden;background:var(--tint);margin-top:12px}
+.rd .fs-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--tint);margin-top:12px}
 .rd .fs-bar i{display:block;height:100%;transition:width .6s cubic-bezier(.2,.9,.3,1)}
 .rd #fsBarP{background:var(--ink)}
 .rd #fsBarI{background:var(--red)}
@@ -669,32 +1101,216 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (prefers-reduced-motion:reduce){
 .rd .fs-hidden,.rd .fs-bar i{transition:none}
 }
-.rd .bro{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:56px;align-items:center}
+.rd .bro{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:56px;align-items:center;background:var(--tint);border-radius:32px;padding:44px}
 @media (max-width:760px){
 .rd .bro{grid-template-columns:1fr;padding:28px;gap:28px}
 }
 .rd .bro-cover{perspective:900px}
-.rd .bro-cover img{width:100%;height:auto;display:block;border:1px solid var(--line)}
-.rd .bro-soon{margin-top:18px;font-weight:700}
-
+.rd .bro-cover img{width:100%;border-radius:10px;display:block;box-shadow:12px 18px 40px -12px rgba(42,15,49,.5);transform:rotateY(-14deg) rotateZ(-2deg);transition:transform .5s}
+.rd .bro-cover:hover img{transform:rotateY(0) rotateZ(0)}
+.rd .bro-soon{margin-top:22px;display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:10px 18px;font-weight:700}
+.rd .dot-live{width:10px;height:10px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 0 rgba(149,51,165,.5);animation:rd-live 1.6s infinite}
+@keyframes rd-live{70%{box-shadow:0 0 0 10px rgba(149,51,165,0)}100%{box-shadow:0 0 0 0 rgba(149,51,165,0)}}
+@media (prefers-reduced-motion:reduce){
+.rd .dot-live{animation:none}
+.rd .bro-cover img{transition:none}
+}
 .rd .vbox.portrait{max-width:min(400px,92vw)}
 .rd .vbox.portrait video{aspect-ratio:9/16;max-height:78vh;object-fit:cover}
-
-.rd .vd{background:#fff;border:1px solid var(--line);padding:clamp(24px,4vw,44px)}
-
-.rd .vd-title{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1}
+.rd .t-flagged{--tc:#b3261e}
+.rd .t-caution{--tc:#b07a00}
+.rd .t-clear{--tc:#1d6b3a}
+.rd .t-all{--tc:var(--purple)}
+.rd .dm-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
+.rd .dm-chips{display:flex;gap:8px;flex-wrap:wrap}
+.rd .dm-chips button{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--ink)}
+.rd .dm-chips button i,.rd .dm-list i,.rd .dm-key i{width:12px;height:12px;border-radius:50%;background:var(--tc);display:inline-block;flex:none}
+.rd .dm-chips button b{font-size:.82rem;background:var(--tint);border-radius:999px;padding:1px 8px}
+.rd .dm-chips button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
+.rd .dm-chips button[aria-pressed="true"] b{background:rgba(255,255,255,.2)}
+.rd .dm-search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:0 16px;background:#fff;min-width:260px}
+.rd .dm-search input{border:0;outline:0;font:inherit;padding:11px 0;width:100%;background:none;color:var(--ink)}
+.rd .dm-search:focus-within{border-color:var(--purple)}
+.rd .dm{display:grid;grid-template-columns:1fr 340px;gap:20px;margin-top:20px}
+@media (max-width:960px){
+.rd .dm{grid-template-columns:1fr}
+}
+.rd .dm-map{position:relative;border-radius:24px;overflow:hidden;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;background:#faf6fb;touch-action:none;height:clamp(420px,62vh,640px)}
+.rd .dm-map svg{display:block;width:100%;height:100%;cursor:grab}
+.rd .dm-map.grab svg{cursor:grabbing}
+.rd .dm-city{font:800 17px "Plus Jakarta Sans",sans-serif;fill:#5e1a6b;opacity:.55;pointer-events:none;letter-spacing:.02em}
+.rd .dm-city.sea{fill:#5b7fa8;font-style:italic;font-weight:700}
+.rd .dm-pin{cursor:pointer;outline:none}
+.rd .dm-pin .dot{fill:var(--tc);stroke:#fff;stroke-width:2.5;transition:r .2s}
+.rd .dm-pin .ring{fill:none;stroke:var(--tc);stroke-width:2;opacity:0}
+.rd .dm-map.live .dm-pin .ring{animation:rd-dmring 2.2s ease-out infinite var(--d)}
+@keyframes rd-dmring{0%{r:7;opacity:.9}100%{r:22;opacity:0}}
+.rd .dm-pin{opacity:0;transition:opacity .4s}
+.rd .dm-map.live .dm-pin{opacity:1;animation:rd-dmdrop .6s cubic-bezier(.2,.9,.3,1.4) both var(--d)}
+@keyframes rd-dmdrop{from{opacity:0;translate:0 -30px}to{opacity:1;translate:0 0}}
+.rd .dm-pin:hover .dot,.rd .dm-pin:focus-visible .dot,.rd .dm-pin.sel .dot{r:10;stroke:var(--ink)}
+.rd .dm-pin.dim{opacity:.12!important;pointer-events:none}
+.rd .dm-tip{position:absolute;transform:translate(-50%,-100%);background:var(--ink);color:#fff;font-weight:700;font-size:.85rem;padding:6px 10px;border-radius:8px;pointer-events:none;white-space:nowrap}
+.rd .dm-pop{position:absolute;width:min(340px,calc(100% - 20px));max-height:calc(100% - 20px);overflow:auto;background:#fff;border-radius:18px;padding:20px;box-shadow:0 24px 48px -16px rgba(42,15,49,.5);border:1px solid var(--line);opacity:0;transform:scale(.94);transition:opacity .3s,transform .3s cubic-bezier(.2,.9,.3,1.2)}
+.rd .dm-pop.in{opacity:1;transform:none}
+.rd .dm-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:0;background:var(--tint);font-size:1.3rem;cursor:pointer;color:var(--ink)}
+.rd .dm-badge{display:inline-block;font-weight:800;font-size:.82rem;color:#fff;background:var(--tc);border-radius:999px;padding:4px 12px}
+.rd .dm-pop h3{font-size:1.25rem;margin:10px 30px 4px 0;letter-spacing:-.015em}
+.rd .dm-addr{font-size:.92rem;line-height:1.45}
+.rd .dm-rev{display:flex;align-items:center;gap:5px;margin-top:14px;flex-wrap:wrap}
+.rd .dm-rev i{width:16px;height:16px;border-radius:4px;background:#e3f3e8}
+.rd .dm-rev i.bad{background:#b3261e}
+.rd .dm-rev span{margin-left:6px;font-size:.92rem}
+.rd .dm-h{font-weight:800;margin-top:16px;font-size:.95rem}
+.rd .dm-cats{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
+.rd .dm-cats li{background:var(--tint);border-radius:10px;padding:8px 12px;font-size:.92rem}
+.rd .dm-cat-top{display:flex;justify-content:space-between;gap:10px;font-weight:600}
+.rd .dm-cats q{display:block;margin-top:6px;padding-left:10px;border-left:3px solid var(--tc);font-style:italic;line-height:1.5;font-size:.9rem}
+.rd .dm-cats q::before{content:"“"}
+.rd .dm-cats q::after{content:"”"}
+.rd .dm-attr{margin-top:8px;font-size:.82rem;font-weight:600;color:var(--purple-deep)}
+.rd .dm-ok{margin-top:14px;font-weight:600;color:#14512b}
+.rd .dm-link{display:inline-block;margin-top:16px;font-weight:800;color:var(--purple)}
+.rd .dm-ctrl{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px}
+.rd .dm-ctrl button{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;font-size:1.3rem;font-weight:700;cursor:pointer;color:var(--ink);box-shadow:0 4px 10px -4px rgba(42,15,49,.3)}
+.rd .dm-note{position:absolute;left:14px;bottom:12px;background:rgba(255,255,255,.9);border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600}
+.rd .dm-side{display:flex;flex-direction:column;min-height:0;height:clamp(420px,62vh,640px);background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden}
+@media (max-width:960px){
+.rd .dm-side{height:360px}
+}
+.rd .dm-count{padding:16px 18px;font-weight:800;border-bottom:1px solid var(--line)}
+.rd .dm-list{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}
+.rd .dm-list button{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;border:0;background:none;padding:10px 12px;border-radius:12px;font:inherit;color:var(--ink);cursor:pointer}
+.rd .dm-list i{margin-top:5px}
+.rd .dm-list b{display:block;font-size:.98rem}
+.rd .dm-list em{font-style:normal;font-size:.86rem;color:var(--purple-deep);font-weight:600}
+.rd .dm-list button:hover{background:var(--tint)}
+.rd .dm-list li.sel button{background:var(--tint-2)}
+.rd .dm-empty{padding:18px;font-weight:600}
+.rd .dm-key{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
+@media (max-width:760px){
+.rd .dm-key{grid-template-columns:1fr}
+}
+.rd .dm-key div{display:grid;grid-template-columns:14px 1fr;gap:4px 10px;align-items:center;background:var(--tint);border-radius:16px;padding:14px 16px}
+.rd .dm-key span{grid-column:2;font-size:.94rem;line-height:1.5}
+@media (prefers-reduced-motion:reduce){
+.rd .dm-map.live .dm-pin{animation:none;opacity:1}
+.rd .dm-pin{opacity:1}
+.rd .dm-map.live .dm-pin .ring{animation:none}
+.rd .dm-pop{transition:none}
+}
+.rd .dm-sat{display:flex;align-items:center;gap:16px;background:var(--ink);color:#fff;border-radius:20px;padding:16px 20px;margin-bottom:20px;transition:transform .15s}
+.rd .dm-sat:hover{transform:translateY(-2px)}
+.rd .dm-sat-ic{width:44px;height:44px;border-radius:14px;background:var(--purple);display:grid;place-items:center;flex:none}
+.rd .dm-sat b{display:block;font-size:1.05rem}
+.rd .dm-sat em{font-style:normal;font-size:.92rem;opacity:.9}
+.rd .dm-sat-go{margin-left:auto;font-size:1.4rem;font-weight:800}
+.rd .dm-cats-key{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px}
+.rd .dm-cats-key h3{font-size:1.4rem}
+.rd .dm-cats-key>p{margin-top:8px;line-height:1.6;max-width:760px}
+.rd .dm-cats-key ol{list-style:none;counter-reset:c;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
+@media (max-width:760px){
+.rd .dm-cats-key ol{grid-template-columns:1fr}
+}
+.rd .dm-cats-key li{display:grid;grid-template-columns:34px 1fr;gap:2px 12px;counter-increment:c}
+.rd .dm-cats-key li::before{content:counter(c);grid-row:span 2;width:34px;height:34px;border-radius:10px;background:var(--tint-2);color:var(--purple-deep);display:grid;place-items:center;font-weight:800}
+.rd .dm-cats-key li span{font-size:.94rem;line-height:1.5}
+.rd .vd{background:#fff;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--purple);border-radius:28px;padding:clamp(24px,4vw,52px)}
+.rd .vd-head{border-bottom:3px solid var(--ink);padding-bottom:24px;margin-bottom:28px}
+.rd .vd-title{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.04em;line-height:1}
 .rd .vd-lede{margin-top:14px;font-size:1.2rem;font-weight:600;line-height:1.6;max-width:720px}
-
-.rd .vd-accept{margin-top:28px;border-top:var(--divider);padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
+.rd .vd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
+@media (max-width:820px){
+.rd .vd-grid{grid-template-columns:1fr}
+}
+.rd .vd-item{background:var(--tint);border-radius:18px;padding:22px 22px 20px;position:relative}
+.rd .vd-item:first-child{grid-column:1/-1;background:var(--ink);color:#fff}
+.rd .vd-item:first-child .vd-n{background:var(--purple);color:#fff}
+.rd .vd-n{display:inline-block;font-weight:800;font-size:.85rem;background:#fff;color:var(--purple-deep);border-radius:999px;padding:3px 10px;margin-bottom:10px;font-variant-numeric:tabular-nums}
+.rd .vd-item h3{font-size:1.2rem;margin-bottom:8px;letter-spacing:-.015em}
+.rd .vd-item:first-child h3{font-size:1.6rem}
+.rd .vd-item p{line-height:1.65}
+.rd .vd-sub{font-size:clamp(2rem,4vw,2.8rem);margin:44px 0 20px}
+.rd .vd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
+@media (max-width:980px){
+.rd .vd-steps{grid-template-columns:1fr 1fr}
+}
+@media (max-width:560px){
+.rd .vd-steps{grid-template-columns:1fr}
+}
+.rd .vd-steps li{border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;border-radius:20px;padding:22px;background:#fff}
+.rd .vd-sn{width:42px;height:42px;border-radius:12px;background:var(--purple);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem;margin-bottom:14px}
+.rd .vd-steps h3{font-size:1.3rem;margin-bottom:8px}
+.rd .vd-steps p{line-height:1.6;font-size:.98rem}
+.rd .vd .dm-cats-key{margin-top:28px;border:0;background:var(--tint)}
+.rd .vd-fine{margin-top:18px;font-weight:600;font-size:.92rem;color:var(--purple-deep)}
+.rd .vd-accept{margin-top:32px;border-top:3px solid var(--ink);padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
 .rd .vd-check{display:flex;gap:14px;align-items:flex-start;max-width:720px;cursor:pointer;font-weight:700;line-height:1.55;font-size:1.05rem}
 .rd .vd-check input{width:26px;height:26px;margin-top:1px;accent-color:var(--purple);flex:none}
-.rd .vd-go{font:inherit;font-weight:700;font-size:1.1rem;border:0;padding:16px 30px;background:var(--purple);color:#fff;cursor:pointer;transition:background .2s,opacity .2s}
+.rd .vd-go{font:inherit;font-weight:800;font-size:1.1rem;border:0;border-radius:999px;padding:16px 30px;background:var(--purple);color:#fff;cursor:pointer;transition:background .2s,opacity .2s}
 .rd .vd-go:hover:not(:disabled){background:var(--purple-dark)}
 .rd .vd-go:disabled{opacity:.35;cursor:not-allowed}
-
-.rd .hero-photo{margin:0;justify-self:center;width:100%;max-width:600px}
-.rd .hero-photo img{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:cover;object-position:40% 60%}
-
+.rd .vd.done{opacity:.55}
+.rd .vd-launch{display:flex;align-items:center;gap:18px;background:var(--ink);color:#fff;border-radius:24px;padding:22px 26px;margin-top:28px;box-shadow:8px 8px 0 var(--purple)}
+.rd .vd-launch.in{animation:rd-pop .5s cubic-bezier(.2,.9,.3,1.3)}
+.rd .vd-launch-ic{width:56px;height:56px;border-radius:16px;background:var(--purple);display:grid;place-items:center;flex:none}
+.rd .vd-launch b{display:block;font-size:1.35rem}
+.rd .vd-launch em{font-style:normal;opacity:.9}
+.rd .vd-launch-go{margin-left:auto;font-size:1.8rem;font-weight:800}
+.rd .nw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
+@media (max-width:640px){
+.rd .nw-grid{grid-template-columns:1fr}
+}
+.rd .nw{display:flex;flex-direction:column;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 18px 40px -26px rgba(42,15,49,.45);transition:transform .2s,box-shadow .2s}
+.rd .nw:hover{transform:translateY(-3px);box-shadow:0 1px 0 var(--line),0 26px 50px -24px rgba(42,15,49,.5)}
+.rd .nw:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
+.rd .nw-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#2a0f31}
+.rd .nw-img svg{display:block;width:100%;height:100%}
+.rd .nw-credit{position:absolute;left:0;bottom:0;background:#1b1b1b;color:#fff;font-size:.75rem;font-style:italic;padding:5px 10px}
+.rd .nw-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
+.rd .nw-kicker{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#c2410c}
+.rd .nw h3{font-family:"Bitter",Georgia,serif;font-weight:700;font-size:1.45rem;line-height:1.2;letter-spacing:-.01em}
+.rd .nw-by{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
+.rd .nw-dek{font-family:"Bitter",Georgia,serif;font-weight:400;font-size:1.02rem;line-height:1.6;flex:1}
+.rd .nw-take{margin-top:6px;background:var(--tint);border-radius:12px;padding:12px 14px;line-height:1.55;font-weight:600}
+.rd .nw-take b{display:block;font-size:.8rem;color:var(--purple);margin-bottom:2px;text-transform:uppercase;letter-spacing:.06em}
+.rd .nw-go{margin-top:6px;font-weight:800;color:var(--purple)}
+.rd .nw:first-child{grid-column:1/-1;flex-direction:row}
+.rd .nw:first-child .nw-img{flex:0 0 56%;aspect-ratio:auto;min-height:360px}
+.rd .nw:first-child h3{font-size:2.2rem}
+.rd .nw:first-child .nw-dek{font-size:1.15rem}
+@media (max-width:900px){
+.rd .nw:first-child{flex-direction:column}
+.rd .nw:first-child .nw-img{flex:none;aspect-ratio:16/9;min-height:0}
+.rd .nw:first-child h3{font-size:1.7rem}
+}
+@media (prefers-reduced-motion:reduce){
+.rd .nw{transition:none}
+.rd .nw:hover{transform:none}
+}
+.rd .hero-photo{position:relative;margin:0;justify-self:center;width:100%;max-width:600px;padding:28px 0 36px}
+.rd .hero-photo img{display:block;width:100%;aspect-ratio:6/5;object-fit:cover;object-position:40% 60%;border-radius:28px;border:3px solid #a53ab8;box-shadow:8px 8px 0 #7d2a8b}
+.rd .hp-card{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:11px 16px 11px 11px;box-shadow:0 16px 32px -14px rgba(42,15,49,.45);animation:rd-hb-float 6s ease-in-out infinite}
+.rd .hp-card b{display:block;font-size:.95rem;line-height:1.2}
+.rd .hp-card em{display:block;font-style:normal;font-size:.82rem;font-weight:600;color:var(--purple-deep)}
+.rd .hp-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none}
+.rd .hp-ic.ok{background:#e3f3e8;color:#1d6b3a}
+.rd .hp-ic.bad{background:#fbe1df;color:#b3261e;font-size:1.1rem}
+.rd .hp-ic.pur{background:var(--purple);color:#fff}
+.rd .hp-c1{left:-28px;bottom:14%}
+.rd .hp-c2{right:-18px;top:0;animation-delay:-2s}
+.rd .hp-c3{right:-18px;bottom:6px;animation-delay:-4s}
+@media (max-width:960px){
+.rd .hp-c1{left:-6px}
+.rd .hp-c2{right:-6px}
+.rd .hp-c3{right:-6px}
+}
+@media (max-width:520px){
+.rd .hp-c1{display:none}
+}
+@media (prefers-reduced-motion:reduce){
+.rd .hp-card{animation:none}
+}
 .rd-ftr{background:var(--ink);color:#fff;padding:80px 0 40px}
 .rd .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
 @media (max-width:900px){
@@ -708,4 +1324,6 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd-ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
 .rd-ftr ul a:hover{color:#e0b3e8}
 .rd .fbot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
-
+@media (prefers-reduced-motion:reduce){
+.rd .notif{opacity:1;transform:none}
+}
diff --git a/lib/rights-laws.ts b/components/sections/RightsPhoneDemo.tsx
similarity index 50%
rename from lib/rights-laws.ts
rename to components/sections/RightsPhoneDemo.tsx
index cb6f88c..a2c5de4 100644
--- a/lib/rights-laws.ts
+++ b/components/sections/RightsPhoneDemo.tsx
@@ -1,7 +1,58 @@
-// Car-buying laws shown on /rights. Moved out of the old phone demo so the
-// page can list them as plain text.
+"use client";
 
-export type Law = {
+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 = {
   tag: string;
   title: string;
   citation: string;
@@ -10,7 +61,7 @@ export type Law = {
   escalation: string;
 };
 
-export const FEDERAL_LAWS: Law[] = [
+const federalLaws: 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.",
@@ -33,19 +84,12 @@ export const FEDERAL_LAWS: Law[] = [
     escalation: "If the explanation doesn't add up, you can sue for damages, and regulators can pursue civil penalties against the dealer." },
 ];
 
-// 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[]> = {
+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 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 actually 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.",
@@ -55,7 +99,7 @@ export 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 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 actually 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",
@@ -149,8 +193,7 @@ export const STATE_LAWS: Record<string, Law[]> = {
   ],
 };
 
-// What a 50-state summary says about each other state's lemon law.
-export const STATE_DIRECTION: Record<string, string> = {
+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",
@@ -192,3 +235,260 @@ export 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>
+  );
+}
diff --git a/components/sections/about/FounderStory.tsx b/components/sections/about/FounderStory.tsx
new file mode 100644
index 0000000..40257cc
--- /dev/null
+++ b/components/sections/about/FounderStory.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import type { AboutPageDict } from "@/lib/i18n/dictionary";
+import { useInView } from "../shared/useInView";
+
+// Sticky intro on the left, strike cards that fade in as they scroll past.
+export function FounderStory({ dict }: { dict: AboutPageDict["story"] }) {
+  return (
+    <section className="band" id="story">
+      <div className="wrap founder">
+        <div className="founder-side">
+          <h2 className="h2">{dict.title}</h2>
+          <p className="lede">{dict.body}</p>
+          <blockquote className="pull">
+            {dict.quote}
+            <cite>{dict.quoteCite}</cite>
+          </blockquote>
+        </div>
+        <div className="strikes">
+          {dict.strikes.map((s) => (
+            <StrikeCard key={s.n} strike={s} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function StrikeCard({
+  strike,
+}: {
+  strike: AboutPageDict["story"]["strikes"][number];
+}) {
+  const [ref, inView] = useInView<HTMLElement>(0.35);
+  return (
+    <article ref={ref} className={`strike-card${inView ? " in" : ""}`}>
+      <div className="strike-top">
+        <span className="strike-n" aria-hidden="true">
+          {strike.n}
+        </span>
+        <span className="tag">{strike.tag}</span>
+      </div>
+      <h3>{strike.title}</h3>
+      <p>{strike.body}</p>
+    </article>
+  );
+}
diff --git a/components/sections/about/FounderVideo.tsx b/components/sections/about/FounderVideo.tsx
new file mode 100644
index 0000000..33c283d
--- /dev/null
+++ b/components/sections/about/FounderVideo.tsx
@@ -0,0 +1,58 @@
+"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
new file mode 100644
index 0000000..cab02e0
--- /dev/null
+++ b/components/sections/about/MissionPillars.tsx
@@ -0,0 +1,36 @@
+import type { AboutPageDict } from "@/lib/i18n/dictionary";
+
+const ICONS = [
+  <path key="book" d="M4 5h6a3 3 0 0 1 3 3v12a2 2 0 0 0-2-2H4zM20 5h-6a3 3 0 0 0-3 3v12a2 2 0 0 1 2-2h7z" />,
+  <g key="shield">
+    <path d="M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6z" />
+    <path d="M9 12l2 2 4-4" />
+  </g>,
+  <path key="bars" d="M4 20V10M10 20V4M16 20v-7M22 20H2" />,
+];
+
+export function MissionPillars({ dict }: { dict: AboutPageDict["mission"] }) {
+  return (
+    <section id="mission">
+      <div className="wrap">
+        <div className="center">
+          <h2 className="h2">{dict.title}</h2>
+          <p className="lede">{dict.body}</p>
+        </div>
+        <div className="grid3 mt56">
+          {dict.items.map((item, i) => (
+            <div className="pillar-lg" key={item.title}>
+              <div className="icon" aria-hidden="true">
+                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#9533A5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  {ICONS[i]}
+                </svg>
+              </div>
+              <h3>{item.title}</h3>
+              <p>{item.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/about/QuoteBand.tsx b/components/sections/about/QuoteBand.tsx
index 66247ea..83a8713 100644
--- a/components/sections/about/QuoteBand.tsx
+++ b/components/sections/about/QuoteBand.tsx
@@ -2,7 +2,7 @@ export function QuoteBand({ text, cite }: { text: string; cite: string }) {
   return (
     <section>
       <div className="wrap">
-        <figure className="quote">
+        <figure className="quote-band">
           <blockquote>
             <p>{text}</p>
           </blockquote>
diff --git a/components/sections/about/WhatWeProvide.tsx b/components/sections/about/WhatWeProvide.tsx
new file mode 100644
index 0000000..e8e381e
--- /dev/null
+++ b/components/sections/about/WhatWeProvide.tsx
@@ -0,0 +1,52 @@
+import Link from "next/link";
+import type { AboutPageDict } from "@/lib/i18n/dictionary";
+
+const ICONS = [
+  <path key="people" d="M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M17 11a3 3 0 1 0 0-6M21 20c0-2.6-1.6-4.8-4-5.6" />,
+  <path key="doc" d="M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5" />,
+  <path key="wrench" d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z" />,
+  <path key="bars" d="M4 20V10M10 20V4M16 20v-7M22 20H2" />,
+];
+
+export function WhatWeProvide({
+  dict,
+  projectsHref,
+}: {
+  dict: AboutPageDict["provide"];
+  projectsHref: string;
+}) {
+  const last = dict.items.length - 1;
+  return (
+    <section className="band" id="provide">
+      <div className="wrap">
+        <div className="center">
+          <h2 className="h2">{dict.title}</h2>
+          <p className="lede">{dict.body}</p>
+        </div>
+        <div className="provide4 mt56">
+          {dict.items.map((item, i) => (
+            <div className="pcard" key={item.title}>
+              <div className="icon" aria-hidden="true">
+                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#9533A5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  {ICONS[i]}
+                </svg>
+              </div>
+              <h3>{item.title}</h3>
+              <p>
+                {item.body}
+                {i === last && (
+                  <>
+                    {" "}
+                    <Link className="inline-link" href={projectsHref}>
+                      {dict.projectsLink}
+                    </Link>
+                  </>
+                )}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/about/ZoomSlideshow.tsx b/components/sections/about/ZoomSlideshow.tsx
new file mode 100644
index 0000000..c84f66c
--- /dev/null
+++ b/components/sections/about/ZoomSlideshow.tsx
@@ -0,0 +1,127 @@
+"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/fraud/FlipCards.tsx b/components/sections/fraud/FlipCards.tsx
new file mode 100644
index 0000000..9430ccc
--- /dev/null
+++ b/components/sections/fraud/FlipCards.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useState } from "react";
+import type { FraudPageDict } from "@/lib/i18n/dictionary";
+
+export function FlipCards({ items }: { items: FraudPageDict["after"]["items"] }) {
+  const [flipped, setFlipped] = useState<boolean[]>(items.map(() => false));
+  return (
+    <div className="flip-grid">
+      {items.map((it, i) => (
+        <button
+          key={it.front}
+          type="button"
+          className="flip"
+          aria-pressed={flipped[i]}
+          onClick={() => setFlipped((f) => f.map((v, k) => (k === i ? !v : v)))}
+        >
+          <div className="flip-in">
+            <div className="face front" aria-hidden={flipped[i]}>
+              <span className="n">{i + 1}</span>
+              <b>{it.front}</b>
+            </div>
+            <div className="face back" aria-hidden={!flipped[i]}>
+              {it.back}
+            </div>
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/components/sections/fraud/FourSquare.tsx b/components/sections/fraud/FourSquare.tsx
index 36b8625..1a18ee2 100644
--- a/components/sections/fraud/FourSquare.tsx
+++ b/components/sections/fraud/FourSquare.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import type { FraudPageDict } from "@/lib/i18n/dictionary";
+import { usePrefersReducedMotion } from "../shared/usePrefersReducedMotion";
 import { formatMoney } from "./money";
 
 type Dict = FraudPageDict["fourSquare"];
@@ -17,24 +18,73 @@ const BAR_MAX = 26000;
 const WHO = ["them", "me", "them", "me", "them", "flagchip"] as const;
 
 export function FourSquare({ dict, locale }: { dict: Dict; locale: string }) {
+  const reduce = usePrefersReducedMotion();
   const [step, setStep] = useState(0);
+  const [prev, setPrev] = useState<number | null>(null);
   const [shown, setShown] = useState(1);
+  const [bump, setBump] = useState(0);
+  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const rootRef = useRef<HTMLDivElement>(null);
   const chatRef = useRef<HTMLDivElement>(null);
+  const stepRef = useRef(0);
+  stepRef.current = step;
   const money = (n: number) => formatMoney(n, locale);
   const last = STEPS.length - 1;
 
-  // Each ask adds the buyer's line and the dealer's answer to the chat.
+  const clear = () => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+  };
+
   const ask = () => {
-    if (step >= last) return;
-    setStep(step + 1);
-    setShown(step + 1 === last ? dict.lines.length : shown + 2);
+    const s = stepRef.current;
+    if (s >= last) return;
+    setShown((v) => v + 1);
+    timers.current.push(
+      setTimeout(() => {
+        setPrev(s);
+        setStep(s + 1);
+        setShown((v) => (s + 1 === last ? dict.lines.length : v + 1));
+        setBump((b) => b + 1);
+      }, reduce ? 0 : 700),
+    );
+  };
+
+  const autoplay = () => {
+    if (reduce) return;
+    timers.current.push(setTimeout(ask, 1200));
+    timers.current.push(setTimeout(ask, 3400));
   };
 
   const reset = () => {
+    clear();
+    stepRef.current = 0;
     setStep(0);
+    setPrev(null);
     setShown(1);
   };
 
+  // Play once when it first scrolls into view.
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      (es) => {
+        if (es.some((e) => e.isIntersecting)) {
+          io.disconnect();
+          autoplay();
+        }
+      },
+      { threshold: 0.5 },
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      clear();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     const c = chatRef.current;
     if (c) c.scrollTop = c.scrollHeight;
@@ -42,7 +92,7 @@ export function FourSquare({ dict, locale }: { dict: Dict; locale: string }) {
 
   const st = STEPS[step];
   return (
-    <div className="fs mt48">
+    <div className="fs mt56" ref={rootRef}>
       <div className="fs-paper-wrap">
         <div className="fs-paper" role="group" aria-label={dict.sheetLabel}>
           <div className="fs-cell">
@@ -59,11 +109,15 @@ export function FourSquare({ dict, locale }: { dict: Dict; locale: string }) {
           </div>
           <div className="fs-cell fs-pay">
             <span>{dict.monthly}</span>
-            <b>{money(st.pay)}</b>
-            {step > 0 && <s>{money(STEPS[step - 1].pay)}</s>}
+            <b key={`p${bump}`} className={prev !== null ? "pop" : undefined}>
+              {money(st.pay)}
+            </b>
+            <s key={`o${bump}`} className={prev !== null ? "go" : undefined}>
+              {prev !== null ? money(STEPS[prev].pay) : ""}
+            </s>
           </div>
         </div>
-        <div className="fs-hidden" hidden={step === 0}>
+        <div key={`t${bump}`} className={`fs-hidden${step > 0 ? " out bump" : ""}`}>
           <span>{dict.hidden}</span>
           <b>{dict.months.replace("{n}", String(st.n))}</b>
         </div>
@@ -102,14 +156,20 @@ export function FourSquare({ dict, locale }: { dict: Dict; locale: string }) {
             id="fsAsk"
             className="btn btn-solid"
             disabled={step >= last}
-            onClick={ask}
+            onClick={() => {
+              clear();
+              ask();
+            }}
           >
             {dict.ask}
           </button>
           <button
             type="button"
             className="btn btn-line"
-            onClick={reset}
+            onClick={() => {
+              reset();
+              autoplay();
+            }}
           >
             {dict.replay}
           </button>
diff --git a/components/sections/fraud/YoyoScene.tsx b/components/sections/fraud/YoyoScene.tsx
index 8c4ac4a..d3a9c44 100644
--- a/components/sections/fraud/YoyoScene.tsx
+++ b/components/sections/fraud/YoyoScene.tsx
@@ -12,7 +12,7 @@ const Y = 324;
 const ease = (t: number) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2);
 const clamp = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v));
 
-// Scroll-driven: the car drives home, the phone appears, and the dealer
+// Scroll-driven: the car drives home, the phone rings, and the dealer
 // reels it back in on a string.
 export function YoyoScene({ dict }: { dict: Dict }) {
   const reduce = usePrefersReducedMotion();
@@ -44,6 +44,7 @@ export function YoyoScene({ dict }: { dict: Dict }) {
       car.setAttribute("transform", `translate(${x},${Y + wob})`);
       const ringing = p > 0.4 && p < 0.62;
       phone.setAttribute("opacity", ringing ? "1" : "0");
+      phone.classList.toggle("ring", ringing);
       str.setAttribute("opacity", p > 0.45 && p < 0.8 ? "1" : "0");
       const sag = p < 0.5 ? 40 : 10;
       str.setAttribute("d", `M310 300 Q ${(310 + x - 88) / 2} ${300 + sag} ${x - 88} ${Y - 6}`);
@@ -74,7 +75,7 @@ export function YoyoScene({ dict }: { dict: Dict }) {
     <section id="yoyo" className="yoyo" ref={sectionRef} aria-label={dict.label}>
       <div className="yoyo-sticky">
         <div className="wrap">
-          <div className="intro">
+          <div className="center">
             <h2 className="h2">{dict.title}</h2>
             <p className="lede">{dict.body}</p>
           </div>
@@ -148,7 +149,7 @@ export function YoyoScene({ dict }: { dict: Dict }) {
 
 function Caption({ tag, text }: { tag: string; text: string }) {
   return (
-    <div className="yy-caption" aria-hidden="true">
+    <div className="yy-caption in" aria-hidden="true">
       <span className="tag">{tag}</span>
       <p>{text}</p>
     </div>
diff --git a/components/sections/home/AiScams.tsx b/components/sections/home/AiScams.tsx
new file mode 100644
index 0000000..79af065
--- /dev/null
+++ b/components/sections/home/AiScams.tsx
@@ -0,0 +1,130 @@
+import Link from "next/link";
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+import { CheckIcon } from "../shared/icons";
+
+const FONT = "Plus Jakarta Sans,sans-serif";
+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: HomePageDict["ai"];
+  rightsHref: string;
+}) {
+  const a = dict.art;
+  const art = [
+    <svg key="listing" viewBox="0 0 240 170" aria-hidden="true">
+      <rect x="70" y="12" width="100" height="150" rx="16" fill="#2a0f31" />
+      <rect x="77" y="22" width="86" height="132" rx="10" fill="#fff" />
+      <rect x="84" y="30" width="72" height="46" rx="6" fill="#ecd6f0" />
+      <path d="M92 66c0-6 4-9 10-10l8-2 7-7c2-2 5-3 8-3h12c3 0 5 1 7 3l6 7 6 1c4 1 6 4 6 7v4H92z" fill="#9533A5" />
+      <rect x="84" y="84" width="46" height="8" rx="4" fill="#2a0f31" />
+      <rect x="84" y="98" width="30" height="8" rx="4" fill="#9533A5" />
+      <rect x="84" y="114" width="64" height="6" rx="3" fill="#e5cfe9" />
+      <rect x="84" y="126" width="52" height="6" rx="3" fill="#e5cfe9" />
+      <rect x="150" y="96" width="60" height="22" rx="11" fill="#9533A5" />
+      <text x="180" y="111" textAnchor="middle" fontFamily={FONT} fontWeight="800" fontSize="11" fill="#fff">
+        {a.boosted}
+      </text>
+    </svg>,
+    <svg key="license" viewBox="0 0 240 170" aria-hidden="true">
+      <rect x="40" y="20" width="160" height="130" rx="10" fill="#fff" stroke="#2a0f31" strokeWidth="3" />
+      <rect x="40" y="20" width="160" height="26" rx="10" fill="#9533A5" />
+      <rect x="40" y="36" width="160" height="10" fill="#9533A5" />
+      <text x="120" y="38" textAnchor="middle" fontFamily={FONT} fontWeight="800" fontSize="11" fill="#fff">
+        {a.license}
+      </text>
+      <text x="60" y="72" fontFamily={FONT} fontWeight="800" fontSize="13" fill="#2a0f31">
+        {a.dealerName}
+      </text>
+      <text x="146" y="72" fontFamily={FONT} fontWeight="800" fontSize="13" fill="#b9a2bf">
+        {a.dealerDropped}
+      </text>
+      <path d="M144 67h24" stroke="#9533A5" strokeWidth="3" />
+      <rect x="60" y="86" width="100" height="6" rx="3" fill="#e5cfe9" />
+      <rect x="60" y="98" width="80" height="6" rx="3" fill="#e5cfe9" />
+      <circle cx="170" cy="120" r="16" fill="none" stroke="#9533A5" strokeWidth="3" />
+      <path d="M163 120l5 5 9-10" fill="none" stroke="#9533A5" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>,
+    <svg key="loan" viewBox="0 0 240 170" aria-hidden="true">
+      <rect x="24" y="44" width="192" height="82" rx="18" fill="#fff" stroke="#e5cfe9" strokeWidth="2" />
+      <rect x="40" y="62" width="40" height="40" rx="12" fill="#9533A5" />
+      <path d="M50 90h20M52 84v-10M60 84v-10M68 84v-10M48 74l12-7 12 7" stroke="#fff" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+      <text x="92" y="78" fontFamily={FONT} fontWeight="800" fontSize="12" fill="#2a0f31">
+        {a.loanFunded}
+      </text>
+      <text x="92" y="98" fontFamily={FONT} fontWeight="800" fontSize="20" fill="#9533A5">
+        {a.loanAmount}
+      </text>
+      <text x="200" y="76" textAnchor="end" fontFamily={FONT} fontWeight="500" fontSize="10" fill="#5e1a6b">
+        {a.now}
+      </text>
+    </svg>,
+    <svg key="delivery" viewBox="0 0 240 170" aria-hidden="true">
+      <rect x="24" y="18" width="192" height="134" rx="16" fill="#fff" stroke="#e5cfe9" strokeWidth="2" />
+      <path d="M44 124c30-10 40-60 80-60s40 30 72-24" fill="none" stroke="#9533A5" strokeWidth="4" strokeDasharray="2 9" strokeLinecap="round" />
+      <circle cx="44" cy="124" r="7" fill="#2a0f31" />
+      <path d="M196 22c-12 0-20 9-20 20 0 15 20 32 20 32s20-17 20-32c0-11-8-20-20-20z" fill="#9533A5" />
+      <circle cx="196" cy="42" r="7" fill="#fff" />
+      <rect x="120" y="116" width="78" height="22" rx="11" fill="#ecd6f0" />
+      <text x="159" y="131" textAnchor="middle" fontFamily={FONT} fontWeight="800" fontSize="11" fill="#5e1a6b">
+        {a.delivered}
+      </text>
+    </svg>,
+  ];
+
+  return (
+    <section className="band" id="ai">
+      <div className="wrap">
+        <div className="center">
+          <h2 className="h2">{dict.title}</h2>
+          <p className="lede">{dict.body}</p>
+        </div>
+        <ol className="aisteps mt56">
+          {dict.steps.map((s, i) => (
+            <li className="aistep" key={s.title}>
+              <div className="aistep-art">{art[i]}</div>
+              <h3>{s.title}</h3>
+              <p>{s.body}</p>
+            </li>
+          ))}
+        </ol>
+        <p className="ai-src">{dict.source}</p>
+        <div className="ai-bottom">
+          <div className="ai-save">
+            <div className="big">{dict.saveStat}</div>
+            <h3>{dict.saveTitle}</h3>
+            <p>{dict.saveBody}</p>
+            <Link className="btn btn-line" href={rightsHref}>
+              {dict.saveCta}
+            </Link>
+          </div>
+          <div className="plan-card ai-tips">
+            <div className="plan-head">
+              <h3>{dict.tipsTitle}</h3>
+            </div>
+            <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/home/CampusChapters.tsx b/components/sections/home/CampusChapters.tsx
new file mode 100644
index 0000000..3bda8a5
--- /dev/null
+++ b/components/sections/home/CampusChapters.tsx
@@ -0,0 +1,84 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+import { ArrowRightIcon } from "../shared/icons";
+
+// Arched frames echo the arches of Royce Hall and the Campanile.
+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="center">
+          <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} <ArrowRightIcon />
+                  </span>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/home/EqualFooting.tsx b/components/sections/home/EqualFooting.tsx
new file mode 100644
index 0000000..162924c
--- /dev/null
+++ b/components/sections/home/EqualFooting.tsx
@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+
+const FONT = "Plus Jakarta Sans,sans-serif";
+
+export function EqualFooting({ dict }: { dict: HomePageDict["footing"] }) {
+  const art: ReactNode[] = [
+    <svg key="quotes" viewBox="0 0 340 250" aria-hidden="true">
+      <rect x="30" y="130" width="100" height="90" rx="10" fill="#d9b8df" />
+      <rect x="190" y="50" width="100" height="170" rx="10" fill="#9533A5" />
+      <path d="M20 222h300" stroke="#2a0f31" strokeWidth="4" strokeLinecap="round" />
+      <text x="80" y="118" textAnchor="middle" fontFamily={FONT} fontWeight="800" fontSize="20" fill="#2a0f31">
+        {dict.quoteA}
+      </text>
+      <text x="240" y="38" textAnchor="middle" fontFamily={FONT} fontWeight="800" fontSize="20" fill="#2a0f31">
+        {dict.quoteB}
+      </text>
+    </svg>,
+    <svg key="listing" viewBox="0 0 340 250" aria-hidden="true">
+      <rect x="50" y="30" width="240" height="160" rx="14" fill="#fff" stroke="#2a0f31" strokeWidth="4" />
+      <rect x="50" y="30" width="240" height="30" rx="14" fill="#2a0f31" />
+      <rect x="50" y="46" width="240" height="14" fill="#2a0f31" />
+      <rect x="72" y="80" width="110" height="80" rx="8" fill="#ecd6f0" stroke="#9533A5" strokeWidth="3" strokeDasharray="8 6" />
+      <path d="M200 88h70M200 108h56M200 128h64" stroke="#2a0f31" strokeWidth="6" strokeLinecap="round" />
+      <circle cx="258" cy="190" r="34" fill="#9533A5" />
+      <text x="258" y="202" textAnchor="middle" fontFamily={FONT} fontWeight="800" fontSize="34" fill="#fff">
+        !
+      </text>
+    </svg>,
+    <svg key="clock" viewBox="0 0 340 250" aria-hidden="true">
+      <circle cx="170" cy="125" r="92" fill="#fff" stroke="#2a0f31" strokeWidth="4" />
+      <path d="M170 125V58" stroke="#2a0f31" strokeWidth="6" strokeLinecap="round" />
+      <path d="M170 125l44 26" stroke="#9533A5" strokeWidth="6" strokeLinecap="round" />
+      <path d="M170 33a92 92 0 0 1 80 46" fill="none" stroke="#9533A5" strokeWidth="12" strokeLinecap="round" />
+      <circle cx="170" cy="125" r="8" fill="#2a0f31" />
+    </svg>,
+  ];
+
+  return (
+    <section className="pt0">
+      <div className="wrap">
+        <div className="center">
+          <h2 className="h2">{dict.title}</h2>
+          <figure className="footing-law">
+            <blockquote>
+              <p>{dict.quote}</p>
+            </blockquote>
+            <figcaption>
+              <cite>{dict.quoteCite}</cite>
+            </figcaption>
+          </figure>
+          <p className="lede">{dict.body}</p>
+        </div>
+        <div className="rows">
+          {dict.rows.map((row, i) => (
+            <div className="row" key={row.stat}>
+              <div className="row-art">{art[i]}</div>
+              <div>
+                <div className="big">{row.stat}</div>
+                <h3>{row.title}</h3>
+                <p>{row.body}</p>
+                <cite>{row.cite}</cite>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/home/FollowLinks.tsx b/components/sections/home/FollowLinks.tsx
new file mode 100644
index 0000000..42861a6
--- /dev/null
+++ b/components/sections/home/FollowLinks.tsx
@@ -0,0 +1,61 @@
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+import { SOCIAL_URLS } from "@/lib/social";
+import { ArrowUpRightIcon } from "../shared/icons";
+
+const LINKS = [
+  { url: SOCIAL_URLS.linkedin, kind: "linkedin" },
+  { url: SOCIAL_URLS.instagramUcla, kind: "instagram" },
+  { url: SOCIAL_URLS.instagramBerkeley, kind: "instagram" },
+  { url: SOCIAL_URLS.instagramUcsc, kind: "instagram" },
+] as const;
+
+export function FollowLinks({ dict }: { dict: HomePageDict["follow"] }) {
+  return (
+    <section className="pt0" id="social">
+      <div className="wrap">
+        <div className="center">
+          <h2 className="h2">{dict.title}</h2>
+          <p className="lede">{dict.body}</p>
+        </div>
+        <div className="socials-grid">
+          {LINKS.map((l, i) => (
+            <a
+              key={l.url}
+              className="soc"
+              href={l.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="soc-ic" aria-hidden="true">
+                {l.kind === "linkedin" ? <LinkedInIcon /> : <InstagramIcon />}
+              </span>
+              <span className="soc-txt">
+                <span className="soc-pf">{dict.links[i].platform}</span>
+                <b>{dict.links[i].handle}</b>
+              </span>
+              <ArrowUpRightIcon className="soc-go" />
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function LinkedInIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zM9.5 9.5h3.8v1.6h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.1c0-1.22-.02-2.78-1.7-2.78-1.7 0-1.96 1.33-1.96 2.7V21h-4z" />
+    </svg>
+  );
+}
+
+function InstagramIcon() {
+  return (
+    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="3" y="3" width="18" height="18" rx="5" />
+      <circle cx="12" cy="12" r="4" />
+      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
+    </svg>
+  );
+}
diff --git a/components/sections/home/FounderStrikes.tsx b/components/sections/home/FounderStrikes.tsx
new file mode 100644
index 0000000..aa931a1
--- /dev/null
+++ b/components/sections/home/FounderStrikes.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { useRef, useState, type KeyboardEvent } from "react";
+import Link from "next/link";
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+
+export function FounderStrikes({
+  dict,
+  storyHref,
+}: {
+  dict: HomePageDict["strikes"];
+  storyHref: string;
+}) {
+  const [active, setActive] = useState(0);
+  const tabs = useRef<(HTMLButtonElement | null)[]>([]);
+  const count = dict.items.length;
+
+  function onKeyDown(e: KeyboardEvent<HTMLButtonElement>, i: number) {
+    let next: number | null = null;
+    if (e.key === "ArrowRight") next = (i + 1) % count;
+    else if (e.key === "ArrowLeft") next = (i + count - 1) % count;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = count - 1;
+    if (next === null) return;
+    e.preventDefault();
+    setActive(next);
+    tabs.current[next]?.focus();
+  }
+
+  return (
+    <section>
+      <div className="wrap center">
+        <h2 className="h2">{dict.title}</h2>
+        <p className="lede">{dict.body}</p>
+        <div className="tabs mt48" role="tablist" aria-label={dict.tabsLabel}>
+          {dict.items.map((s, i) => (
+            <button
+              key={s.n}
+              ref={(el) => {
+                tabs.current[i] = el;
+              }}
+              type="button"
+              role="tab"
+              id={`strike-tab-${i}`}
+              aria-controls={`strike-panel-${i}`}
+              aria-selected={active === i}
+              tabIndex={active === i ? 0 : -1}
+              onClick={() => setActive(i)}
+              onKeyDown={(e) => onKeyDown(e, i)}
+            >
+              {dict.tab.replace("{n}", s.n)}
+            </button>
+          ))}
+        </div>
+        {dict.items.map((s, i) => (
+          <div
+            key={s.n}
+            role="tabpanel"
+            id={`strike-panel-${i}`}
+            aria-labelledby={`strike-tab-${i}`}
+            className="story"
+            hidden={active !== i}
+          >
+            <div className="story-meta">
+              <div className="n" aria-hidden="true">
+                {s.n}
+              </div>
+              <h3>{s.title}</h3>
+              <p>{s.meta}</p>
+            </div>
+            <div className="story-body">
+              {s.paras.map((p) => (
+                <p key={p}>{p}</p>
+              ))}
+              {i === count - 1 && (
+                <Link className="btn btn-line" href={storyHref}>
+                  {dict.readMore}
+                </Link>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/home/FreeResources.tsx b/components/sections/home/FreeResources.tsx
new file mode 100644
index 0000000..3a9fc52
--- /dev/null
+++ b/components/sections/home/FreeResources.tsx
@@ -0,0 +1,37 @@
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+import { CheckIcon } from "../shared/icons";
+
+export function FreeResources({ dict }: { dict: HomePageDict["free"] }) {
+  return (
+    <section className="band" 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/HomeCta.tsx b/components/sections/home/HomeCta.tsx
new file mode 100644
index 0000000..78237b6
--- /dev/null
+++ b/components/sections/home/HomeCta.tsx
@@ -0,0 +1,22 @@
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+import { ChecklistArt, CtaBand } from "../shared/CtaBand";
+
+export function HomeCta({
+  dict,
+  ppiHref,
+  documentsHref,
+}: {
+  dict: HomePageDict["cta"];
+  ppiHref: string;
+  documentsHref: string;
+}) {
+  return (
+    <CtaBand
+      title={dict.title}
+      body={dict.body}
+      primary={{ label: dict.primary, href: ppiHref }}
+      secondary={{ label: dict.secondary, href: documentsHref }}
+      art={<ChecklistArt />}
+    />
+  );
+}
diff --git a/components/sections/home/HomeHero.tsx b/components/sections/home/HomeHero.tsx
new file mode 100644
index 0000000..bd49cd8
--- /dev/null
+++ b/components/sections/home/HomeHero.tsx
@@ -0,0 +1,157 @@
+"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
+          />
+          <HeroCard className="hp-c1" tone="ok" card={dict.cards[0]} />
+          <HeroCard className="hp-c2" tone="bad" card={dict.cards[1]} />
+          <HeroCard className="hp-c3" tone="pur" card={dict.cards[2]} />
+        </figure>
+      </div>
+    </section>
+  );
+}
+
+function HeroCard({
+  className,
+  tone,
+  card,
+}: {
+  className: string;
+  tone: "ok" | "bad" | "pur";
+  card: { title: string; body: string };
+}) {
+  return (
+    <div className={`hp-card ${className}`}>
+      <span className={`hp-ic ${tone}`} aria-hidden="true">
+        {tone === "bad" ? (
+          "!"
+        ) : (
+          <svg
+            width={tone === "ok" ? 16 : 14}
+            height={tone === "ok" ? 16 : 14}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 12l5 5 9-10" />
+          </svg>
+        )}
+      </span>
+      <span>
+        <b>{card.title}</b>
+        <em>{card.body}</em>
+      </span>
+    </div>
+  );
+}
diff --git a/components/sections/home/PhoneNotifications.tsx b/components/sections/home/PhoneNotifications.tsx
new file mode 100644
index 0000000..6d362ba
--- /dev/null
+++ b/components/sections/home/PhoneNotifications.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+import { usePrefersReducedMotion } from "../shared/usePrefersReducedMotion";
+
+// A phone lock screen whose notifications slide in one by one the first
+// time it scrolls into view.
+export function PhoneNotifications({
+  dict,
+}: {
+  dict: HomePageDict["publicKnowledge"];
+}) {
+  const reduce = usePrefersReducedMotion();
+  const phoneRef = useRef<HTMLDivElement>(null);
+  const [shown, setShown] = useState(0);
+
+  useEffect(() => {
+    if (reduce) return;
+    const el = phoneRef.current;
+    if (!el) return;
+    const timers: ReturnType<typeof setTimeout>[] = [];
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((e) => e.isIntersecting)) return;
+        io.disconnect();
+        dict.notifs.forEach((_, i) =>
+          timers.push(setTimeout(() => setShown(i + 1), 300 + i * 700)),
+        );
+      },
+      { threshold: 0.4 },
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      timers.forEach(clearTimeout);
+    };
+  }, [reduce, dict.notifs]);
+
+  return (
+    <div className="phone-stage" role="img" aria-label={dict.phoneLabel}>
+      <div className="phone" ref={phoneRef}>
+        <div className="screen">
+          <div className="clock">{dict.clock}</div>
+          {dict.notifs.map((n, i) => (
+            <div
+              key={n.time}
+              className={`notif${reduce || i < shown ? " show" : ""}`}
+            >
+              <b>
+                {dict.appName} <i>{n.time}</i>
+              </b>
+              {n.body}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/sections/home/Pillars.tsx b/components/sections/home/Pillars.tsx
new file mode 100644
index 0000000..19bc6cb
--- /dev/null
+++ b/components/sections/home/Pillars.tsx
@@ -0,0 +1,44 @@
+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 center">
+        <h2 className="h2">{dict.title}</h2>
+        <p className="lede">{dict.body}</p>
+        <div className="grid2 mt56">
+          <Link className="pcard pcard-line" href={ppiHref}>
+            <div className="icon" aria-hidden="true">
+              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#9533A5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="11" cy="11" r="7" />
+                <path d="M21 21l-5-5M8 11l2 2 4-4" />
+              </svg>
+            </div>
+            <h3>{inspection.title}</h3>
+            <p>{inspection.body}</p>
+          </Link>
+          <Link className="pcard pcard-line" href={fraudHref}>
+            <div className="icon" aria-hidden="true">
+              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#9533A5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6z" />
+                <path d="M12 8v4M12 16h.01" />
+              </svg>
+            </div>
+            <h3>{fraud.title}</h3>
+            <p>{fraud.body}</p>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/home/PriceIsRightPreview.tsx b/components/sections/home/PriceIsRightPreview.tsx
new file mode 100644
index 0000000..a22a2ce
--- /dev/null
+++ b/components/sections/home/PriceIsRightPreview.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+
+// Illustrative numbers until the real pricing pipeline is live.
+const OPTIONS = [12400, 15900, 19800];
+const FAIR = 15900;
+
+export function PriceIsRightPreview({
+  dict,
+  locale,
+  gameHref,
+}: {
+  dict: HomePageDict["preview"];
+  locale: string;
+  gameHref: string;
+}) {
+  const [picked, setPicked] = useState<number | null>(null);
+  const money = (n: number) =>
+    new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }).format(n);
+
+  const verdict =
+    picked === null
+      ? null
+      : picked === FAIR
+        ? dict.right
+        : picked > FAIR
+          ? dict.over.replace("{amount}", money(picked - FAIR))
+          : dict.low;
+
+  return (
+    <section className="band" id="pir-preview">
+      <div className="wrap pv">
+        <div>
+          <span className="tag pv-tag">{dict.tag}</span>
+          <h2 className="h2">{dict.title}</h2>
+          <p className="lede">{dict.body}</p>
+          <Link className="btn btn-line" href={gameHref}>
+            {dict.cta}
+          </Link>
+        </div>
+        <div className="pv-card">
+          <div className="pv-photo">
+            <Image
+              src="/images/cars/2018-honda-civic.webp"
+              alt={dict.carAlt}
+              width={618}
+              height={462}
+              sizes="(max-width: 900px) 80vw, 400px"
+            />
+          </div>
+          <h3>{dict.carName}</h3>
+          <ul className="pir-tags">
+            {dict.carTags.map((t) => (
+              <li key={t}>{t}</li>
+            ))}
+          </ul>
+          <p className="pv-q" id="pv-q">
+            {dict.question}
+          </p>
+          <div className="pv-opts" role="group" aria-labelledby="pv-q">
+            {OPTIONS.map((v) => {
+              const state =
+                picked === null
+                  ? undefined
+                  : v === FAIR
+                    ? "right"
+                    : v === picked
+                      ? "wrong"
+                      : undefined;
+              return (
+                <button
+                  key={v}
+                  type="button"
+                  className={state}
+                  disabled={picked !== null}
+                  aria-pressed={picked === v}
+                  onClick={() => setPicked(v)}
+                >
+                  {money(v)}
+                </button>
+              );
+            })}
+          </div>
+          <div className={`pv-out${verdict ? " in" : ""}`} aria-live="polite">
+            {verdict && (
+              <>
+                <b>{verdict}</b> {dict.breakdown}{" "}
+                <Link href={gameHref}>{dict.playAll}</Link>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/home/PublicKnowledge.tsx b/components/sections/home/PublicKnowledge.tsx
new file mode 100644
index 0000000..b1c8953
--- /dev/null
+++ b/components/sections/home/PublicKnowledge.tsx
@@ -0,0 +1,36 @@
+import Link from "next/link";
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+import { PhoneNotifications } from "./PhoneNotifications";
+import { Rich } from "../shared/Rich";
+
+export function PublicKnowledge({
+  dict,
+  ppiHref,
+  fraudHref,
+}: {
+  dict: HomePageDict["publicKnowledge"];
+  ppiHref: string;
+  fraudHref: string;
+}) {
+  return (
+    <section>
+      <div className="wrap what">
+        <div>
+          <h2 className="h2">{dict.title}</h2>
+          <p className="lede">
+            <Rich text={dict.body} />
+          </p>
+          <div className="ctas">
+            <Link className="btn btn-solid" href={ppiHref}>
+              {dict.ctaPrimary}
+            </Link>
+            <Link className="btn btn-line" href={fraudHref}>
+              {dict.ctaSecondary}
+            </Link>
+          </div>
+        </div>
+        <PhoneNotifications dict={dict} />
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/home/ResearchSources.tsx b/components/sections/home/ResearchSources.tsx
new file mode 100644
index 0000000..d06c736
--- /dev/null
+++ b/components/sections/home/ResearchSources.tsx
@@ -0,0 +1,16 @@
+import type { HomePageDict } from "@/lib/i18n/dictionary";
+
+export function ResearchSources({ dict }: { dict: HomePageDict["sources"] }) {
+  return (
+    <div className="strip">
+      <div className="wrap strip-in">
+        <h2>{dict.heading}</h2>
+        <ul className="sources">
+          {dict.items.map((s) => (
+            <li key={s}>{s}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/components/sections/inspection/PpiDrive.tsx b/components/sections/inspection/PpiDrive.tsx
new file mode 100644
index 0000000..16de747
--- /dev/null
+++ b/components/sections/inspection/PpiDrive.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { InspectionPageDict } from "@/lib/i18n/dictionary";
+import { Rich } from "../shared/Rich";
+import { usePrefersReducedMotion } from "../shared/usePrefersReducedMotion";
+
+type Dict = InspectionPageDict["schedule"];
+
+const ROAD =
+  "M20 190 C 180 190, 220 70, 400 70 S 620 200, 800 190 S 1020 70, 1180 80";
+
+// A car drives along a winding road as you scroll, stopping at each step.
+export function PpiDrive({ dict }: { dict: Dict }) {
+  const reduce = usePrefersReducedMotion();
+  const sectionRef = useRef<HTMLElement>(null);
+  const pathRef = useRef<SVGPathElement>(null);
+  const carRef = useRef<SVGGElement>(null);
+  const [stopPoints, setStopPoints] = useState<{ x: number; y: number }[]>([]);
+  const [step, setStep] = useState(-1);
+  const [pop, setPop] = useState(false);
+  const count = dict.stops.length;
+
+  useEffect(() => {
+    const path = pathRef.current;
+    const section = sectionRef.current;
+    const car = carRef.current;
+    if (!path || !section || !car) return;
+    const L = path.getTotalLength();
+    const marks = dict.stops.map((_, i) => 0.08 + i * (0.84 / (count - 1)));
+    setStopPoints(
+      marks.map((m) => {
+        const p = path.getPointAtLength(m * L);
+        return { x: p.x, y: p.y };
+      }),
+    );
+
+    let ticking = false;
+    const update = () => {
+      ticking = false;
+      const r = section.getBoundingClientRect();
+      const total = r.height - window.innerHeight;
+      const p = reduce ? 1 : Math.min(1, Math.max(0, -r.top / total));
+      const t = Math.min(0.999, p);
+      const a = path.getPointAtLength(t * L);
+      const b = path.getPointAtLength(Math.min(L, t * L + 2));
+      const ang = (Math.atan2(b.y - a.y, b.x - a.x) * 180) / Math.PI;
+      car.setAttribute("transform", `translate(${a.x},${a.y}) rotate(${ang})`);
+      let i = -1;
+      marks.forEach((m, k) => {
+        if (t >= m - 0.02) i = k;
+      });
+      setStep(i);
+    };
+    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, count, dict.stops]);
+
+  // Replay the pop-in each time the car reaches a new stop.
+  useEffect(() => {
+    if (step < 0) return;
+    setPop(false);
+    const r = requestAnimationFrame(() => requestAnimationFrame(() => setPop(true)));
+    return () => cancelAnimationFrame(r);
+  }, [step]);
+
+  const stop = step >= 0 ? dict.stops[step] : null;
+
+  return (
+    <section id="schedule" className="drive" ref={sectionRef} aria-label={dict.label}>
+      <div className="drive-sticky">
+        <div className="wrap">
+          <div className="center">
+            <h2 className="h2">{dict.title}</h2>
+            <p className="lede">{dict.body}</p>
+          </div>
+          <div className="drive-stage">
+            <svg className="drive-road" viewBox="0 0 1200 260" preserveAspectRatio="none" aria-hidden="true">
+              <path ref={pathRef} d={ROAD} fill="none" stroke="#2a0f31" strokeWidth="44" strokeLinecap="round" />
+              <path d={ROAD} fill="none" stroke="#fff" strokeWidth="4" strokeDasharray="18 16" strokeLinecap="round" opacity=".85" />
+              <g>
+                {stopPoints.map((p, i) => (
+                  <g key={i} className={`dstop${i <= step ? " on" : ""}`} transform={`translate(${p.x},${p.y})`}>
+                    <circle r="20" fill="#fff" stroke="#9533A5" strokeWidth="5" />
+                    <text y="7" textAnchor="middle" fontFamily="Plus Jakarta Sans,sans-serif" fontWeight="800" fontSize="20" fill="#9533A5">
+                      {i + 1}
+                    </text>
+                  </g>
+                ))}
+              </g>
+              <g ref={carRef}>
+                <rect x="-26" y="-13" width="52" height="26" rx="10" fill="#9533A5" />
+                <rect x="-4" y="-10" width="16" height="20" rx="4" fill="#ecd6f0" />
+                <rect x="-22" y="-16" width="12" height="6" rx="3" fill="#2a0f31" />
+                <rect x="10" y="-16" width="12" height="6" rx="3" fill="#2a0f31" />
+                <rect x="-22" y="10" width="12" height="6" rx="3" fill="#2a0f31" />
+                <rect x="10" y="10" width="12" height="6" rx="3" fill="#2a0f31" />
+                <circle cx="26" cy="-7" r="3" fill="#ffe08a" />
+                <circle cx="26" cy="7" r="3" fill="#ffe08a" />
+              </g>
+            </svg>
+            <div className={`drive-card${stop ? ` pop${pop ? " in" : ""}` : ""}`} aria-hidden="true">
+              {stop ? (
+                <>
+                  <span className="tag">
+                    {dict.stop.replace("{n}", String(step + 1)).replace("{total}", String(count))}
+                  </span>
+                  <h3>{stop.title}</h3>
+                  <p>{stop.body}</p>
+                </>
+              ) : (
+                <>
+                  <span className="tag">{dict.introTag}</span>
+                  <h3>{dict.introTitle}</h3>
+                  <p>{dict.introBody}</p>
+                </>
+              )}
+            </div>
+          </div>
+          <div className="alert drive-alert">
+            <b>{dict.alertTitle}</b>
+            <Rich text={dict.alert} />
+          </div>
+        </div>
+      </div>
+      {/* The steps as a plain list for screen readers and no-JS readers. */}
+      <ol className="sr-only">
+        {dict.stops.map((s) => (
+          <li key={s.title}>
+            {s.title} {s.body}
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
diff --git a/components/sections/inspection/PpiSteps.tsx b/components/sections/inspection/PpiSteps.tsx
deleted file mode 100644
index 2a49b4b..0000000
--- a/components/sections/inspection/PpiSteps.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { InspectionPageDict } from "@/lib/i18n/dictionary";
-import { Rich } from "../shared/Rich";
-
-export function PpiSteps({ dict }: { dict: InspectionPageDict["schedule"] }) {
-  return (
-    <section id="schedule">
-      <div className="wrap prose">
-        <h2 className="h2">{dict.title}</h2>
-        <ol className="num-list">
-          {dict.stops.map((s) => (
-            <li key={s.title}>
-              <h3>{s.title}</h3>
-              <p>{s.body}</p>
-            </li>
-          ))}
-        </ol>
-        <div className="alert">
-          <b>{dict.alertTitle}</b>
-          <Rich text={dict.alert} />
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/sections/research/BuildTimeline.tsx b/components/sections/research/BuildTimeline.tsx
new file mode 100644
index 0000000..a6715bd
--- /dev/null
+++ b/components/sections/research/BuildTimeline.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { ResearchPageDict } from "@/lib/i18n/dictionary";
+
+// Week 1 starts Monday, September 28, 2026.
+const START = new Date(2026, 8, 28);
+const WEEK_MS = 7 * 864e5;
+
+export function BuildTimeline({ dict }: { dict: ResearchPageDict["timeline"] }) {
+  // Computed after mount: the page is prerendered, so the server doesn't
+  // know today's date.
+  const [week, setWeek] = useState<number | null>(null);
+  useEffect(() => {
+    setWeek(Math.floor((Date.now() - START.getTime()) / WEEK_MS));
+  }, []);
+
+  return (
+    <div className="plan-tl">
+      <h3>{dict.title}</h3>
+      <p>{dict.body}</p>
+      <ol className="tl6">
+        {dict.weeks.map(([date, text], i) => {
+          const state =
+            week === null ? undefined : i < week ? "past" : i === week ? "now" : undefined;
+          return (
+            <li key={date} className={state} aria-current={state === "now" ? "step" : undefined}>
+              <span className="tl-w">{dict.week.replace("{n}", String(i + 1))}</span>
+              <span className="tl-d">{date}</span>
+              <p>{text}</p>
+              {state === "now" && <span className="tl-now">{dict.now}</span>}
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}
diff --git a/components/sections/research/PriceIsRightGame.tsx b/components/sections/research/PriceIsRightGame.tsx
new file mode 100644
index 0000000..2f9b8a2
--- /dev/null
+++ b/components/sections/research/PriceIsRightGame.tsx
@@ -0,0 +1,441 @@
+"use client";
+
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+import Image from "next/image";
+import type { ResearchPageDict } from "@/lib/i18n/dictionary";
+
+type GameDict = ResearchPageDict["game"];
+type Region = keyof GameDict["regions"];
+type StateCode = keyof GameDict["states"];
+
+// Illustrative numbers until the real pricing pipeline is live.
+const ROUNDS = [
+  {
+    img: "/images/cars/2018-honda-civic.webp",
+    width: 618,
+    height: 462,
+    type: "sedan",
+    bad: [] as number[],
+    parts: [15200, 400, 300],
+  },
+  {
+    img: "/images/cars/2015-ford-f150.webp",
+    width: 1000,
+    height: 439,
+    type: "truck",
+    bad: [1],
+    parts: [19000, -2800, -2200, -500],
+  },
+  {
+    img: "/images/cars/2020-toyota-camry.webp",
+    width: 864,
+    height: 477,
+    type: "sedan",
+    bad: [1],
+    parts: [21500, 500, -6500, -200],
+  },
+] as const;
+
+const REGION_ADJUST: Record<Region, { sedan: number; truck: number }> = {
+  west: { sedan: 0.03, truck: -0.02 },
+  mountain: { sedan: 0, truck: 0.04 },
+  southwest: { sedan: -0.01, truck: 0.05 },
+  midwest: { sedan: -0.02, truck: 0.02 },
+  south: { sedan: -0.01, truck: 0.03 },
+  northeast: { sedan: 0.01, truck: 0 },
+};
+
+const STATE_REGION: Record<StateCode, Region> = {
+  AL: "south", AK: "west", AZ: "southwest", AR: "south", CA: "west",
+  CO: "mountain", CT: "northeast", DE: "northeast", DC: "northeast",
+  FL: "south", GA: "south", HI: "west", ID: "mountain", IL: "midwest",
+  IN: "midwest", IA: "midwest", KS: "midwest", KY: "south", LA: "south",
+  ME: "northeast", MD: "northeast", MA: "northeast", MI: "midwest",
+  MN: "midwest", MS: "south", MO: "midwest", MT: "mountain",
+  NE: "midwest", NV: "mountain", NH: "northeast", NJ: "northeast",
+  NM: "southwest", NY: "northeast", NC: "south", ND: "midwest",
+  OH: "midwest", OK: "southwest", OR: "west", PA: "northeast",
+  RI: "northeast", SC: "south", SD: "midwest", TN: "south",
+  TX: "southwest", UT: "mountain", VT: "northeast", VA: "south",
+  WA: "west", WV: "south", WI: "midwest", WY: "mountain",
+};
+
+const MIN = 3000;
+const MAX = 40000;
+const START_GUESS = 15000;
+
+type Phase = "start" | "guess" | "reveal" | "done";
+type Result = {
+  guess: number;
+  fair: number;
+  points: number;
+  parts: [string, number][];
+};
+
+export function PriceIsRightGame({
+  dict,
+  locale,
+}: {
+  dict: GameDict;
+  locale: string;
+}) {
+  const [state, setState] = useState<StateCode | "">("");
+  const [phase, setPhase] = useState<Phase>("start");
+  const [round, setRound] = useState(0);
+  const [guess, setGuess] = useState(START_GUESS);
+  const [score, setScore] = useState(0);
+  const [result, setResult] = useState<Result | null>(null);
+  const [animate, setAnimate] = useState(false);
+  const selectRef = useRef<HTMLSelectElement>(null);
+  const focusRef = useRef<HTMLElement | null>(null);
+
+  const money = (n: number) =>
+    new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }).format(Math.round(n));
+  const compact = (n: number) =>
+    new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: "USD",
+      notation: "compact",
+    }).format(n);
+  const fill = (s: string, vars: Record<string, string | number>) =>
+    Object.entries(vars).reduce((t, [k, v]) => t.replace(`{${k}}`, String(v)), s);
+
+  const stateName = state ? dict.states[state] : "";
+  const sortedStates = (Object.keys(dict.states) as StateCode[]).sort((a, b) =>
+    dict.states[a].localeCompare(dict.states[b], locale),
+  );
+
+  // Move focus to the new content after each phase change.
+  useEffect(() => {
+    focusRef.current?.focus();
+  }, [phase, round]);
+
+  useEffect(() => {
+    if (phase !== "reveal") return setAnimate(false);
+    const r = requestAnimationFrame(() =>
+      requestAnimationFrame(() => setAnimate(true)),
+    );
+    return () => cancelAnimationFrame(r);
+  }, [phase, round]);
+
+  function partsFor(i: number): [string, number][] {
+    const r = ROUNDS[i];
+    const labels = dict.rounds[i].parts;
+    const parts: [string, number][] = r.parts.map((v, k) => [labels[k], v]);
+    if (!state) return parts;
+    const region = STATE_REGION[state];
+    const base = r.parts.reduce<number>((s, v) => s + v, 0);
+    const adj = Math.round((base * REGION_ADJUST[region][r.type]) / 50) * 50;
+    return [
+      ...parts,
+      [fill(dict.stateAdjust, { state: stateName, note: dict.regions[region] }), adj],
+    ];
+  }
+
+  function startGame() {
+    setRound(0);
+    setScore(0);
+    setGuess(START_GUESS);
+    setPhase("guess");
+  }
+
+  function lockIn() {
+    const parts = partsFor(round);
+    const fair = parts.reduce((s, p) => s + p[1], 0);
+    const pct = Math.abs(guess - fair) / fair;
+    const points =
+      Math.max(0, Math.round(1000 * (1 - pct * 2))) + (pct <= 0.05 ? 250 : 0);
+    setScore((s) => s + points);
+    setResult({ guess, fair, points, parts });
+    setPhase("reveal");
+  }
+
+  function next() {
+    if (round < ROUNDS.length - 1) {
+      setRound(round + 1);
+      setGuess(START_GUESS);
+      setPhase("guess");
+    } else {
+      setPhase("done");
+    }
+  }
+
+  function changeState() {
+    setPhase("start");
+    requestAnimationFrame(() => selectRef.current?.focus());
+  }
+
+  const car = ROUNDS[round];
+  const carCopy = dict.rounds[round];
+
+  return (
+    <div className="pir" id="pir">
+      <div className="pir-head">
+        <div>
+          <span className="tag pv-tag">{dict.tag}</span>
+          <h3>{dict.title}</h3>
+          <p>{dict.body}</p>
+        </div>
+        <div className="pir-score" aria-live="polite">
+          <span>{dict.score}</span>
+          <b>{score.toLocaleString(locale)}</b>
+        </div>
+      </div>
+
+      {phase === "start" && (
+        <div className="pir-start">
+          <label htmlFor="pirState" className="pir-label">
+            {dict.stateLabel}
+          </label>
+          <p>{dict.stateBody}</p>
+          <div className="pir-start-row">
+            <select
+              id="pirState"
+              ref={selectRef}
+              value={state}
+              onChange={(e) => setState(e.target.value as StateCode | "")}
+            >
+              <option value="">{dict.statePlaceholder}</option>
+              {sortedStates.map((code) => (
+                <option key={code} value={code}>
+                  {dict.states[code]}
+                </option>
+              ))}
+            </select>
+            <button
+              type="button"
+              id="pirGo"
+              className="btn btn-solid"
+              disabled={!state}
+              onClick={startGame}
+            >
+              {dict.start}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {phase !== "start" && (
+        <div className="pir-game">
+          {phase !== "done" && (
+            <div className="pir-car">
+              <div className="pir-photo">
+                <CarPhoto
+                  key={car.img}
+                  src={car.img}
+                  alt={carCopy.alt}
+                  width={car.width}
+                  height={car.height}
+                />
+              </div>
+              <div className="pir-info">
+                <span className="pir-round">
+                  {fill(dict.round, { n: round + 1, total: ROUNDS.length })}
+                </span>
+                <h4
+                  tabIndex={-1}
+                  ref={(el) => {
+                    if (phase === "guess") focusRef.current = el;
+                  }}
+                >
+                  {carCopy.name}
+                </h4>
+                <ul className="pir-tags">
+                  {carCopy.tags.map((t, i) => (
+                    <li key={t} className={(car.bad as readonly number[]).includes(i) ? "bad" : undefined}>
+                      {t}
+                    </li>
+                  ))}
+                  <li className="loc">{stateName}</li>
+                </ul>
+                <button type="button" className="pir-change" onClick={changeState}>
+                  {dict.changeState}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {phase === "guess" && (
+            <div className="pir-guess">
+              <label htmlFor="pirSlider" className="pir-label">
+                {dict.guessLabel}
+              </label>
+              <div className="pir-val" aria-hidden="true">
+                {money(guess)}
+              </div>
+              <input
+                type="range"
+                id="pirSlider"
+                min={MIN}
+                max={MAX}
+                step={250}
+                value={guess}
+                aria-valuetext={money(guess)}
+                style={{ "--fill": `${((guess - MIN) / (MAX - MIN)) * 100}%` } as CSSProperties}
+                onChange={(e) => setGuess(+e.target.value)}
+              />
+              <div className="pir-scale" aria-hidden="true">
+                <span>{compact(MIN)}</span>
+                <span>{compact(MAX)}</span>
+              </div>
+              <button type="button" className="btn btn-solid" onClick={lockIn}>
+                {dict.lockIn}
+              </button>
+            </div>
+          )}
+
+          {phase === "reveal" && result && (
+            <Reveal
+              dict={dict}
+              result={result}
+              stateCode={state as StateCode}
+              tip={carCopy.tip}
+              money={money}
+              animate={animate}
+              last={round === ROUNDS.length - 1}
+              onNext={next}
+              focusRef={focusRef}
+            />
+          )}
+
+          {phase === "done" && (
+            <div className="pir-reveal">
+              <div className="pir-end">
+                <span className="tag">{fill(dict.done, { state: stateName })}</span>
+                <h4 tabIndex={-1} ref={(el) => { focusRef.current = el; }}>
+                  {fill(dict.points, { points: score.toLocaleString(locale) })}
+                </h4>
+                <p>{dict.doneBody}</p>
+                <div className="ctas">
+                  <button type="button" className="btn btn-solid" onClick={startGame}>
+                    {dict.again}
+                  </button>
+                  <button type="button" className="btn btn-line" onClick={changeState}>
+                    {dict.otherState}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      <p className="ai-src pir-note">{dict.disclaimer}</p>
+    </div>
+  );
+}
+
+function Reveal({
+  dict,
+  result,
+  stateCode,
+  tip,
+  money,
+  animate,
+  last,
+  onNext,
+  focusRef,
+}: {
+  dict: GameDict;
+  result: Result;
+  stateCode: StateCode;
+  tip: string;
+  money: (n: number) => string;
+  animate: boolean;
+  last: boolean;
+  onNext: () => void;
+  focusRef: React.MutableRefObject<HTMLElement | null>;
+}) {
+  const { guess, fair, points, parts } = result;
+  const diff = guess - fair;
+  const pct = Math.abs(diff) / fair;
+  const verdict =
+    pct <= 0.05
+      ? dict.nailed
+      : diff > 0
+        ? dict.over.replace("{amount}", money(diff))
+        : dict.under.replace("{amount}", money(-diff));
+  const max = Math.max(...parts.slice(1).map((p) => Math.abs(p[1])), 1);
+  const signed = (v: number, i: number) =>
+    i === 0 ? money(v) : v === 0 ? money(0) : `${v > 0 ? "+" : "−"}${money(Math.abs(v))}`;
+
+  return (
+    <div className={`pir-reveal${animate ? " go" : ""}`}>
+      <div className="pir-cmp">
+        <div>
+          <span>{dict.compareGuess}</span>
+          <b>{money(guess)}</b>
+        </div>
+        <div>
+          <span>{dict.compareFair.replace("{state}", stateCode)}</span>
+          <b className="fair">{money(fair)}</b>
+        </div>
+        <div>
+          <span>{dict.comparePoints}</span>
+          <b>+{points.toLocaleString()}</b>
+        </div>
+      </div>
+      <p
+        className={`pir-verdict${diff > 0 && pct > 0.05 ? " over" : ""}`}
+        tabIndex={-1}
+        ref={(el) => {
+          focusRef.current = el;
+        }}
+      >
+        {verdict}
+      </p>
+      <p className="pir-label">{dict.why}</p>
+      <ul className="pir-break">
+        {parts.map(([label, v], i) => (
+          <li
+            key={label}
+            className={i === parts.length - 1 ? "state" : undefined}
+            style={{ "--d": `${i * 120}ms` } as CSSProperties}
+          >
+            <span>{label}</span>
+            <i
+              className={i === 0 ? "base" : v < 0 ? "neg" : v > 0 ? "pos" : "zero"}
+              style={{ "--w": `${i === 0 ? 100 : Math.max(6, (Math.abs(v) / max) * 100)}%` } as CSSProperties}
+              aria-hidden="true"
+            />
+            <b>{signed(v, i)}</b>
+          </li>
+        ))}
+      </ul>
+      <div className="say">{dict.tip.replace("{tip}", tip)}</div>
+      <button type="button" className="btn btn-solid" onClick={onNext}>
+        {last ? dict.seeScore : dict.next}
+      </button>
+    </div>
+  );
+}
+
+// Slides the car in from the side each time a new round mounts it.
+function CarPhoto({
+  alt,
+  ...props
+}: {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+}) {
+  const [shown, setShown] = useState(false);
+  useEffect(() => {
+    const r = requestAnimationFrame(() =>
+      requestAnimationFrame(() => setShown(true)),
+    );
+    return () => cancelAnimationFrame(r);
+  }, []);
+  return (
+    <Image
+      {...props}
+      alt={alt}
+      className={shown ? "in" : undefined}
+      sizes="(max-width: 760px) 90vw, 420px"
+    />
+  );
+}
diff --git a/components/sections/research/ProjectCard.tsx b/components/sections/research/ProjectCard.tsx
new file mode 100644
index 0000000..f62660d
--- /dev/null
+++ b/components/sections/research/ProjectCard.tsx
@@ -0,0 +1,71 @@
+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="proj">
+      <div className="proj-head">
+        {meta.chapter ? (
+          <span className="tag">{dict.chapters[meta.chapter]}</span>
+        ) : (
+          <span />
+        )}
+        <span className="tag sev-easy">{dict.status}</span>
+      </div>
+      <h3>{copy.name}</h3>
+      <p className="proj-desc">{copy.desc}</p>
+      <div className="proj-meta">
+        <div className="proj-row">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" role="img" aria-label={dict.skillsLabel}>
+            <path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z" />
+          </svg>
+          <ul className="chips-sm">
+            {copy.skills.map((s) => (
+              <li key={s}>{s}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="proj-row">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" role="img" aria-label={dict.membersLabel}>
+            <circle cx="9" cy="8" r="3" />
+            <path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M17 11a3 3 0 1 0 0-6M21 20c0-2.6-1.6-4.8-4-5.6" />
+          </svg>
+          <div>
+            <b>{copy.members}</b>
+            <div className="seats" aria-hidden="true">
+              {Array.from({ length: 10 }, (_, i) => (
+                <i
+                  key={i}
+                  className={
+                    i < meta.filled
+                      ? "f"
+                      : i < meta.filled + meta.range
+                        ? "r"
+                        : undefined
+                  }
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      <Link className="btn btn-solid proj-btn" href={applyHref(joinHref, meta)}>
+        {copy.join}
+      </Link>
+    </article>
+  );
+}
diff --git a/components/sections/research/TrackNav.tsx b/components/sections/research/TrackNav.tsx
new file mode 100644
index 0000000..d520346
--- /dev/null
+++ b/components/sections/research/TrackNav.tsx
@@ -0,0 +1,65 @@
+"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/research/projects.ts b/components/sections/research/projects.ts
index 7d37a11..2ea6942 100644
--- a/components/sections/research/projects.ts
+++ b/components/sections/research/projects.ts
@@ -15,38 +15,41 @@ export type RoleKey =
 export type ProjectMeta = {
   chapter?: ChapterKey;
   role: RoleKey;
+  // Seats shown as dots: `filled` guaranteed, `range` more possible, out of 10.
+  filled: number;
+  range: number;
 };
 
 export const TRACKS: { key: TrackKey; projects: ProjectMeta[] }[] = [
   {
     key: "app",
     projects: [
-      { role: "software" },
-      { role: "software" },
+      { role: "software", filled: 2, range: 2 },
+      { role: "software", filled: 2, range: 2 },
     ],
   },
   {
     key: "data",
     projects: [
-      { role: "data" },
-      { chapter: "berkeley", role: "data" },
-      { chapter: "berkeley", role: "data" },
+      { role: "data", filled: 5, range: 0 },
+      { chapter: "berkeley", role: "data", filled: 5, range: 0 },
+      { chapter: "berkeley", role: "data", filled: 5, range: 0 },
     ],
   },
   {
     key: "research",
     projects: [
-      { chapter: "ucla", role: "research" },
-      { chapter: "ucla", role: "research" },
-      { chapter: "ucla", role: "legal" },
+      { chapter: "ucla", role: "research", filled: 4, range: 2 },
+      { chapter: "ucla", role: "research", filled: 4, range: 2 },
+      { chapter: "ucla", role: "legal", filled: 6, range: 4 },
     ],
   },
   {
     key: "outreach",
     projects: [
-      { role: "design" },
-      { role: "outreach" },
-      { role: "outreach" },
+      { role: "design", filled: 2, range: 1 },
+      { role: "outreach", filled: 2, range: 1 },
+      { role: "outreach", filled: 3, range: 2 },
     ],
   },
 ];
diff --git a/components/sections/shared/CtaBand.tsx b/components/sections/shared/CtaBand.tsx
index 30b7d9f..238ee39 100644
--- a/components/sections/shared/CtaBand.tsx
+++ b/components/sections/shared/CtaBand.tsx
@@ -1,36 +1,67 @@
+import type { ReactNode } from "react";
 import Link from "next/link";
 
 type CtaLink = { label: string; href: string };
 
-// The closing call to action on most pages: a heading, a line of text,
-// and a button or two.
+// The purple call-to-action card that closes most redesigned pages.
 export function CtaBand({
   title,
   body,
   primary,
   secondary,
+  art,
 }: {
   title: string;
   body: string;
   primary: CtaLink;
   secondary?: CtaLink;
+  art: ReactNode;
 }) {
   return (
-    <section className="cta">
+    <section>
       <div className="wrap">
-        <h2 className="h2">{title}</h2>
-        <p className="lede">{body}</p>
-        <div className="ctas">
-          <Link className="btn btn-solid" href={primary.href}>
-            {primary.label}
-          </Link>
-          {secondary && (
-            <Link className="btn btn-line" href={secondary.href}>
-              {secondary.label}
-            </Link>
-          )}
+        <div className="cta">
+          <div>
+            <h2>{title}</h2>
+            <p>{body}</p>
+            <div className="ctas">
+              <Link className="btn btn-white" href={primary.href}>
+                {primary.label}
+              </Link>
+              {secondary && (
+                <Link className="btn btn-ghost-white" href={secondary.href}>
+                  {secondary.label}
+                </Link>
+              )}
+            </div>
+          </div>
+          {art}
         </div>
       </div>
     </section>
   );
 }
+
+export function ChecklistArt() {
+  return (
+    <svg viewBox="0 0 260 260" aria-hidden="true">
+      <circle cx="130" cy="130" r="120" fill="rgba(255,255,255,.12)" />
+      <rect x="70" y="40" width="120" height="170" rx="14" fill="#fff" />
+      <rect x="100" y="30" width="60" height="22" rx="8" fill="#2a0f31" />
+      <path d="M92 88l10 10 18-20M92 128l10 10 18-20M92 168l10 10 18-20" stroke="#9533A5" strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M132 92h38M132 132h38M132 172h26" stroke="#2a0f31" strokeWidth="6" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function PeopleArt() {
+  return (
+    <svg viewBox="0 0 260 260" aria-hidden="true">
+      <circle cx="130" cy="130" r="120" fill="rgba(255,255,255,.12)" />
+      <circle cx="90" cy="110" r="28" fill="#fff" />
+      <circle cx="170" cy="110" r="28" fill="#ecd6f0" />
+      <path d="M40 200c0-30 22-50 50-50s50 20 50 50z" fill="#fff" />
+      <path d="M120 200c0-30 22-50 50-50s50 20 50 50z" fill="#ecd6f0" />
+    </svg>
+  );
+}
diff --git a/components/sections/shared/PageHero.tsx b/components/sections/shared/PageHero.tsx
index 47c138a..1bbf579 100644
--- a/components/sections/shared/PageHero.tsx
+++ b/components/sections/shared/PageHero.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-// The title block at the top of every inner page.
+// The tinted hero at the top of every inner page.
 export function PageHero({
   title,
   body,
diff --git a/components/sections/shared/icons.tsx b/components/sections/shared/icons.tsx
index 721921d..9d306c1 100644
--- a/components/sections/shared/icons.tsx
+++ b/components/sections/shared/icons.tsx
@@ -17,3 +17,40 @@ export function CheckIcon({ size = 22 }: { size?: number }) {
     </svg>
   );
 }
+
+export function ArrowRightIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M5 12h14M13 6l6 6-6 6" />
+    </svg>
+  );
+}
+
+export function ArrowUpRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M7 17L17 7M9 7h8v8" />
+    </svg>
+  );
+}
diff --git a/components/sections/team/TeamRoster.tsx b/components/sections/team/TeamRoster.tsx
index 03097b1..446b995 100644
--- a/components/sections/team/TeamRoster.tsx
+++ b/components/sections/team/TeamRoster.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import type { Chapter, Social, TeamVideo } from "@/lib/team";
 import type { TeamPageDict } from "@/lib/i18n/dictionary";
+import { usePrefersReducedMotion } from "../shared/usePrefersReducedMotion";
 
 export type RosterMember = {
   name: string;
@@ -54,7 +55,7 @@ export function TeamRoster({
 
   return (
     <>
-      <div className="intro">
+      <div className="center">
         <div className="tabs filters" role="group" aria-label={dict.filterLabel}>
           {FILTERS.map((f) => (
             <button
@@ -195,27 +196,37 @@ function VideoDialog({
   dict: TeamPageDict;
   onClose: () => void;
 }) {
+  const reduce = usePrefersReducedMotion();
   const dialogRef = useRef<HTMLDialogElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     const d = dialogRef.current;
     if (!d || !member) return;
     d.showModal();
+    const raf = requestAnimationFrame(() => setOpen(true));
     videoRef.current?.play().catch(() => {});
+    return () => cancelAnimationFrame(raf);
   }, [member]);
 
   function close() {
     videoRef.current?.pause();
-    dialogRef.current?.close();
-    onClose();
+    setOpen(false);
+    setTimeout(
+      () => {
+        dialogRef.current?.close();
+        onClose();
+      },
+      reduce ? 0 : 220,
+    );
   }
 
   const v = member?.video;
   return (
     <dialog
       ref={dialogRef}
-      className={`vbox${v?.portrait ? " portrait" : ""}`}
+      className={`vbox${v?.portrait ? " portrait" : ""}${open ? " in" : ""}`}
       aria-label={dict.dialogLabel}
       onCancel={(e) => {
         e.preventDefault();
diff --git a/lib/fonts.ts b/lib/fonts.ts
index a4e9a0a..dd6b04c 100644
--- a/lib/fonts.ts
+++ b/lib/fonts.ts
@@ -1,7 +1,7 @@
-import { Caveat } from "next/font/google";
+import { Bitter, Caveat } from "next/font/google";
 
-// Accent font used by a single section. Apply `.variable` on the page
-// wrapper that needs it so other pages don't load it.
+// Accent fonts used by a single section each. Apply `.variable` on the
+// page wrapper that needs them so other pages don't load them.
 
 // Handwriting on the four-square worksheet (Fraud page).
 export const caveat = Caveat({
@@ -11,3 +11,10 @@ export const caveat = Caveat({
   display: "swap",
 });
 
+// Newspaper-style headlines on the Dealer Map news cards.
+export const bitter = Bitter({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  variable: "--font-bitter",
+  display: "swap",
+});
diff --git a/lib/i18n/dictionaries/en.json b/lib/i18n/dictionaries/en.json
index 2a3d169..56054a4 100644
--- a/lib/i18n/dictionaries/en.json
+++ b/lib/i18n/dictionaries/en.json
@@ -198,9 +198,23 @@
         "walk away."
       ],
       "body": "Most people buy a car without basic car knowledge. Putting that much money into something without knowing what it's worth can be financially devastating. So we explain it all in plain language, for free.",
-      "ctaPrimary": "Get the Inspection Guide",
+      "ctaPrimary": "Get the PPI Guide",
       "ctaSecondary": "Our story",
-      "photoAlt": "VINdicated's UC Berkeley chapter together on the lawn in front of Doe Library, with the Campanile behind them"
+      "photoAlt": "VINdicated's UC Berkeley chapter together on the lawn in front of Doe Library, with the Campanile behind them",
+      "cards": [
+        {
+          "title": "Inspection passed",
+          "body": "Independent mechanic"
+        },
+        {
+          "title": "Red flag spotted",
+          "body": "Seller wants a wire transfer"
+        },
+        {
+          "title": "APR 6.9%",
+          "body": "Within CA limit"
+        }
+      ]
     },
     "sources": {
       "heading": "Our numbers come from",
@@ -219,13 +233,33 @@
         },
         "."
       ],
-      "cta": "See common scams"
+      "ctaPrimary": "Start the inspection guide",
+      "ctaSecondary": "See common scams",
+      "phoneLabel": "Example of VINdicated flagging dealer red flags on a phone",
+      "clock": "2:14",
+      "appName": "VINdicated",
+      "notifs": [
+        {
+          "time": "now",
+          "body": "Red flag: this dealer's site only takes wire transfers up front. Ask to see the car in person first."
+        },
+        {
+          "time": "2 min ago",
+          "body": "Red flag: a financing contract on a cash deal. Don't sign until you know how it's voided."
+        },
+        {
+          "time": "5 min ago",
+          "body": "Checklist done. Ask for the service records before you negotiate."
+        }
+      ]
     },
     "footing": {
       "title": "You shouldn't pay more because of who you are. In California, it's illegal.",
       "quote": "“All persons within the jurisdiction of this state are free and equal, and no matter what their sex, race, color, religion, ancestry, national origin… are entitled to the full and equal accommodations, advantages, facilities, privileges, or services in all business establishments of every kind whatsoever.”",
       "quoteCite": "Unruh Civil Rights Act, Cal. Civ. Code § 51",
       "body": "Studies show dealers quote different prices to different people. Scammers also have better tools now.",
+      "quoteA": "Quote A",
+      "quoteB": "Quote B",
       "rows": [
         {
           "stat": "$1,100",
@@ -247,6 +281,26 @@
         }
       ]
     },
+    "preview": {
+      "tag": "Preview",
+      "title": "Guess what a used car is worth.",
+      "body": "Our UC Berkeley team is building Price Is Right, a game that trains your eye for a good deal. Here's a taste.",
+      "cta": "Play the full preview",
+      "carAlt": "Gray 2018 Honda Civic sedan",
+      "carName": "2018 Honda Civic LX",
+      "carTags": [
+        "72,000 miles",
+        "Clean title",
+        "1 owner"
+      ],
+      "question": "What's a fair price?",
+      "optionsLabel": "Price options",
+      "right": "Nailed it.",
+      "over": "You'd overpay by {amount}.",
+      "low": "Too low.",
+      "breakdown": "Base value $15,200, plus $400 for low miles and $300 for one owner.",
+      "playAll": "Play all three cars →"
+    },
     "chapters": {
       "title": "Find us on campus.",
       "body": "We have chapters at UCLA, UC Berkeley, and UC Santa Cruz. Find yours and come to a meeting.",
@@ -296,6 +350,53 @@
         }
       ]
     },
+    "ai": {
+      "title": "Scammers are using AI now, too.",
+      "body": "Fake dealer websites, listing photos, and paperwork are getting easier to make. This is what happened to one buyer in September.",
+      "steps": [
+        {
+          "title": "The listing looked normal",
+          "body": "A fairly priced SUV shows up on Facebook Marketplace, boosted to reach more buyers."
+        },
+        {
+          "title": "The dealer was a copy",
+          "body": "Scammers clone a real dealership down to the paperwork, dropping a single word from its name."
+        },
+        {
+          "title": "The bank paid the fake dealer",
+          "body": "A major lender approves the loan and wires $36,240 to the fake dealer."
+        },
+        {
+          "title": "The truck never came",
+          "body": "A spoofed tracker shows the car crossing the country. It \"arrives\" at an empty street."
+        }
+      ],
+      "art": {
+        "boosted": "Boosted",
+        "license": "DEALER LICENSE",
+        "dealerName": "Route Motor",
+        "dealerDropped": "Co.",
+        "loanFunded": "Loan funded",
+        "loanAmount": "$36,240",
+        "now": "now",
+        "delivered": "Delivered?"
+      },
+      "source": "Based on reporting by Caleb Jacobs in The Drive, September 2026.",
+      "saveStat": "$0",
+      "saveTitle": "He didn't have to repay the loan.",
+      "saveBody": "Because he'd saved every message and document, the buyer used the FTC Holder Rule to get out of the loan. Most people don't know that rule exists.",
+      "saveCta": "Learn your rights",
+      "tipsTitle": "Before you pay anyone",
+      "tips": [
+        "Search the dealer's name with \"scam,\" \"review,\" or \"complaint.\"",
+        "Don't trust a dealer just because its reviews are good. A fake site can borrow a real dealer's reviews.",
+        "Ask to see the car and the lot in person. If they refuse, walk away.",
+        "Too far to visit? Send a mobile inspector. A real seller won't mind.",
+        "Never pay up front by wire transfer only."
+      ],
+      "ftcCta": "Read the FTC alert",
+      "reportCta": "Report a scam"
+    },
     "pillars": {
       "title": "Start with these two guides.",
       "body": "Free guides you can pull up at the dealership.",
@@ -379,35 +480,11 @@
         }
       ]
     },
-    "ppi": {
-      "title": "Buying a used car? Get a PPI first.",
-      "body": [
-        "A ",
-        {
-          "b": "pre-purchase inspection (PPI)"
-        },
-        " is when you pay an independent mechanic, not the seller or the dealership, to check a car before you buy it. They find the problems a test drive won't show you."
-      ],
-      "items": [
-        {
-          "title": "What they check",
-          "body": "The engine, transmission, brakes, suspension, and frame, plus leaks, rust, and signs of past accidents."
-        },
-        {
-          "title": "What it costs",
-          "body": "Usually $100–$200, and some AAA locations do it free or discounted for members. One hidden problem can cost you thousands."
-        },
-        {
-          "title": "Where to go",
-          "body": "A mechanic you trust, a mobile inspection service, or a dealership for that car's brand that isn't the one selling it."
-        },
-        {
-          "title": "What you get",
-          "body": "A written report you can use to negotiate the price down, or a good reason to walk away."
-        }
-      ],
-      "primary": "Read the PPI Guide",
-      "secondary": "Where to get one"
+    "cta": {
+      "title": "Buying a car soon?",
+      "body": "Start with the inspection guide, then read up on common dealer tricks.",
+      "primary": "Get the PPI Guide",
+      "secondary": "Decode your documents"
     }
   },
   "about": {
@@ -698,24 +775,6 @@
         "A VINdicated volunteer pointing to the UCLA display board"
       ]
     },
-    "photos": {
-      "title": "Our chapters",
-      "body": "Students at UCLA, UC Berkeley, and UC Santa Cruz who table, teach, and run research on car buying.",
-      "items": [
-        {
-          "alt": "VINdicated volunteers tabling on the UC Berkeley campus beside a VINdicated banner"
-        },
-        {
-          "alt": "Two VINdicated volunteers holding a VINdicated sign at UC Berkeley"
-        },
-        {
-          "alt": "VINdicated volunteers at their UCLA tabling booth on a sunny activities day"
-        },
-        {
-          "alt": "A VINdicated volunteer sharing free car-buying resources with a student at UCLA"
-        }
-      ]
-    },
     "mission": {
       "title": "Educate. Empower. Vindicate.",
       "body": "Our motto, and the order we work in.",
@@ -769,43 +828,6 @@
       "name": "Rana Darwich",
       "role": "Founder & President, VINdicated"
     },
-    "ai": {
-      "title": "Scammers are using AI now, too.",
-      "body": "Fake dealer websites, listing photos, and paperwork are getting easier to make. This is what happened to one buyer in September.",
-      "steps": [
-        {
-          "title": "The listing looked normal",
-          "body": "A fairly priced SUV shows up on Facebook Marketplace, boosted to reach more buyers."
-        },
-        {
-          "title": "The dealer was a copy",
-          "body": "Scammers clone a real dealership down to the paperwork, dropping a single word from its name."
-        },
-        {
-          "title": "The bank paid the fake dealer",
-          "body": "A major lender approves the loan and wires $36,240 to the fake dealer."
-        },
-        {
-          "title": "The truck never came",
-          "body": "A spoofed tracker shows the car crossing the country. It \"arrives\" at an empty street."
-        }
-      ],
-      "source": "Based on reporting by Caleb Jacobs in The Drive, September 2026.",
-      "saveStat": "$0",
-      "saveTitle": "He didn't have to repay the loan.",
-      "saveBody": "Because he'd saved every message and document, the buyer used the FTC Holder Rule to get out of the loan. Most people don't know that rule exists.",
-      "saveCta": "Learn your rights",
-      "tipsTitle": "Before you pay anyone",
-      "tips": [
-        "Search the dealer's name with \"scam,\" \"review,\" or \"complaint.\"",
-        "Don't trust a dealer just because its reviews are good. A fake site can borrow a real dealer's reviews.",
-        "Ask to see the car and the lot in person. If they refuse, walk away.",
-        "Too far to visit? Send a mobile inspector. A real seller won't mind.",
-        "Never pay up front by wire transfer only."
-      ],
-      "ftcCta": "Read the FTC alert",
-      "reportCta": "Report a scam"
-    },
     "quote": {
       "text": "Everyone gets taken advantage of at some point. We want you to notice when it's happening.",
       "cite": "The idea behind VINdicated"
@@ -877,6 +899,7 @@
       "body": "Students across our chapters are building apps, crunching data, doing research, and making content that helps people buy, finance, and fix cars without getting taken advantage of."
     },
     "navLabel": "Project teams",
+    "status": "Now forming",
     "skillsLabel": "Skills",
     "membersLabel": "Team size",
     "chapters": {
@@ -1025,6 +1048,179 @@
         ]
       }
     },
+    "game": {
+      "tag": "Preview · UC Berkeley",
+      "title": "Try Price Is Right.",
+      "body": "Guess what this car should cost. Then see what pushed the price up or down.",
+      "score": "Score",
+      "stateLabel": "First, where are you buying?",
+      "stateBody": "Used-car prices shift from state to state. Pick yours and we'll adjust every fair price to match.",
+      "statePlaceholder": "Choose a state",
+      "start": "Start game",
+      "round": "Round {n} of {total}",
+      "changeState": "Change state",
+      "guessLabel": "Your guess",
+      "lockIn": "Lock in my guess",
+      "compareGuess": "Your guess",
+      "compareFair": "Fair price in {state}",
+      "comparePoints": "Points",
+      "nailed": "Nailed it.",
+      "over": "You'd have overpaid by {amount}.",
+      "under": "You guessed {amount} under.",
+      "why": "Why this price",
+      "tip": "Tip: {tip}",
+      "next": "Next car →",
+      "seeScore": "See my score",
+      "done": "Session complete · {state}",
+      "points": "{points} points",
+      "doneBody": "Mileage, title status, accidents, owners, and even your state all move the price. Now you know what to look for before you make an offer.",
+      "again": "Play again",
+      "otherState": "Try another state",
+      "stateAdjust": "{state} market, {note}",
+      "disclaimer": "Preview: sample rounds with illustrative prices and state adjustments. The full game launches after the November 6 demo and pulls fair prices from live listing data.",
+      "regions": {
+        "west": "where commuter sedans are in demand",
+        "mountain": "where trucks hold value for snow and towing",
+        "southwest": "where trucks sell high",
+        "midwest": "where road salt means more rust risk",
+        "south": "with steady truck demand",
+        "northeast": "where city buyers favor sedans"
+      },
+      "rounds": [
+        {
+          "name": "2018 Honda Civic LX",
+          "alt": "Gray 2018 Honda Civic sedan",
+          "tags": [
+            "72,000 miles",
+            "Clean title",
+            "1 owner"
+          ],
+          "parts": [
+            "Base value for this model and year",
+            "Low miles for its age",
+            "One owner"
+          ],
+          "tip": "One owner and a full service history are worth paying a little more for."
+        },
+        {
+          "name": "2015 Ford F-150 XL",
+          "alt": "White 2015 Ford F-150 pickup truck",
+          "tags": [
+            "138,000 miles",
+            "Accident reported",
+            "3 owners"
+          ],
+          "parts": [
+            "Base value for this model and year",
+            "High mileage",
+            "Accident on the history report",
+            "Three owners"
+          ],
+          "tip": "An accident on the report should always lower the price, even if the truck looks perfect."
+        },
+        {
+          "name": "2020 Toyota Camry LE",
+          "alt": "Black 2020 Toyota Camry sedan",
+          "tags": [
+            "41,000 miles",
+            "Rebuilt title",
+            "2 owners"
+          ],
+          "parts": [
+            "Base value for this model and year",
+            "Low miles",
+            "Rebuilt title",
+            "Two owners"
+          ],
+          "tip": "Rebuilt titles usually sell for 20 to 40% less. If the asking price doesn't reflect that, walk away."
+        }
+      ],
+      "states": {
+        "AL": "Alabama",
+        "AK": "Alaska",
+        "AZ": "Arizona",
+        "AR": "Arkansas",
+        "CA": "California",
+        "CO": "Colorado",
+        "CT": "Connecticut",
+        "DE": "Delaware",
+        "DC": "District of Columbia",
+        "FL": "Florida",
+        "GA": "Georgia",
+        "HI": "Hawaii",
+        "ID": "Idaho",
+        "IL": "Illinois",
+        "IN": "Indiana",
+        "IA": "Iowa",
+        "KS": "Kansas",
+        "KY": "Kentucky",
+        "LA": "Louisiana",
+        "ME": "Maine",
+        "MD": "Maryland",
+        "MA": "Massachusetts",
+        "MI": "Michigan",
+        "MN": "Minnesota",
+        "MS": "Mississippi",
+        "MO": "Missouri",
+        "MT": "Montana",
+        "NE": "Nebraska",
+        "NV": "Nevada",
+        "NH": "New Hampshire",
+        "NJ": "New Jersey",
+        "NM": "New Mexico",
+        "NY": "New York",
+        "NC": "North Carolina",
+        "ND": "North Dakota",
+        "OH": "Ohio",
+        "OK": "Oklahoma",
+        "OR": "Oregon",
+        "PA": "Pennsylvania",
+        "RI": "Rhode Island",
+        "SC": "South Carolina",
+        "SD": "South Dakota",
+        "TN": "Tennessee",
+        "TX": "Texas",
+        "UT": "Utah",
+        "VT": "Vermont",
+        "VA": "Virginia",
+        "WA": "Washington",
+        "WV": "West Virginia",
+        "WI": "Wisconsin",
+        "WY": "Wyoming"
+      }
+    },
+    "timeline": {
+      "title": "The six-week build",
+      "body": "Price Is Right goes from empty repo to final demo by November 6.",
+      "week": "Week {n}",
+      "now": "We're here",
+      "weeks": [
+        [
+          "Sep 28",
+          "Set up the repo, database, and app skeleton."
+        ],
+        [
+          "Oct 5",
+          "Choose data sources and pipeline tools; start building screens."
+        ],
+        [
+          "Oct 12",
+          "Finish the data pipeline and connect it to the app."
+        ],
+        [
+          "Oct 19",
+          "Build guessing, scoring, and the price reveal; fix bugs."
+        ],
+        [
+          "Oct 26",
+          "Finish the car-price part of the app."
+        ],
+        [
+          "Nov 2",
+          "Test end to end, fix bugs, final demo Nov 6."
+        ]
+      ]
+    },
     "cta": {
       "title": "No experience? That's fine.",
       "body": "You'll learn the tools on the team. What matters is curiosity and a few hours a week.",
@@ -1069,7 +1265,7 @@
     },
     "engine": {
       "title": "Inspect it yourself.",
-      "body": "Tap any marked part, or start a guided inspection. We'll zoom in, walk you through the check, and keep score as you go.",
+      "body": "Tap any glowing part, or start a guided inspection. We'll zoom in, walk you through the check, and keep score as you go.",
       "progress": "{n} of {total} checked",
       "start": "Start guided inspection",
       "imageAlt": "Illustrated engine bay with labeled parts including the fuse box, intake air tube, brake fluid reservoir, spark plugs, battery, coolant reservoir, radiator, and fan",
@@ -1395,7 +1591,13 @@
       "cite": "Rana Darwich, VINdicated Founder"
     },
     "schedule": {
+      "label": "How to schedule a PPI",
       "title": "How to schedule a PPI.",
+      "body": "Keep scrolling. The car stops at each step.",
+      "introTag": "6 stops",
+      "introTitle": "Start your engine.",
+      "introBody": "Scroll to drive.",
+      "stop": "Stop {n} of {total}",
       "stops": [
         {
           "title": "Find your inspector first.",
@@ -1438,13 +1640,9 @@
       "ctaPrimary": "See the red flags",
       "ctaSecondary": "Know your rights"
     },
-    "tour": {
-      "countIntro": "{total} stops",
-      "countStep": "{n} / {total}"
-    },
     "pinkSlip": {
       "title": "This document is your only proof you own the car.",
-      "body": "A California Certificate of Title, the \"pink slip,\" is the legal document that proves ownership.",
+      "body": "A California Certificate of Title, the \"pink slip,\" is the legal document that proves ownership. Scroll to walk through it one section at a time.",
       "imageAlt": "Sample California Certificate of Title",
       "intro": "Six boxes decide whether the car is really yours. Scroll to spotlight each one.",
       "items": [
@@ -1486,6 +1684,10 @@
         }
       ]
     },
+    "tour": {
+      "countIntro": "{total} stops",
+      "countStep": "{n} / {total}"
+    },
     "flags": {
       "title": "Car purchasing red flags.",
       "body": "Six things dealers say, and exactly how to answer. Scroll to play each conversation.",
@@ -1805,6 +2007,7 @@
     },
     "after": {
       "title": "What to do after a scam.",
+      "body": "Select a card to flip it.",
       "items": [
         {
           "front": "Document everything immediately.",
@@ -1822,6 +2025,7 @@
     },
     "brochure": {
       "coverAlt": "Cover of the VINdicated brochure",
+      "tag": "Take it with you",
       "title": "The VINdicated brochure.",
       "body": "The VIN, the yo-yo scam, the four-square trap, dealer add-ons, and your legal rights, folded into one handout. We bring it to tabling and school visits.",
       "soon": "New edition coming soon as a free download."
@@ -1840,19 +2044,19 @@
       "ctaPrimary": "Read a history report",
       "ctaSecondary": "Read the Buyers Guide"
     },
-    "tour": {
-      "countIntro": "{total} stops",
-      "countStep": "{n} / {total}"
-    },
     "severity": {
       "easy": "Easy to check",
       "watch": "Watch carefully",
       "red": "Serious red flag",
       "know": "Need to know"
     },
+    "tour": {
+      "countIntro": "{total} stops",
+      "countStep": "{n} / {total}"
+    },
     "page1": {
       "title": "How to read a Carfax, page one.",
-      "body": "Mileage and VIN, accident history, reliability, and recent service.",
+      "body": "Mileage and VIN, accident history, reliability, and recent service. Scroll to walk through each section and what it means for the price.",
       "imageAlt": "Page one of a sample Carfax vehicle history report for a 2013 Honda Accord",
       "intro": "Scroll and each section of the report lights up.",
       "items": [
@@ -1890,7 +2094,7 @@
     },
     "page2": {
       "title": "How to read a Carfax, page two.",
-      "body": "Title brands, the history grid, and the ownership table. This is where the biggest problems show up.",
+      "body": "Title brands, the history grid, and the ownership table. This is where the biggest problems show up. Scroll to walk through them.",
       "imageAlt": "Page two of a sample Carfax vehicle history report showing the history grid, title history, and ownership table",
       "intro": "Now the serious history. Keep scrolling.",
       "items": [
@@ -1994,18 +2198,21 @@
       "leadsLabel": "Leads:",
       "items": [
         {
+          "tag": "UCLA",
           "name": "UCLA Chapter",
           "school": "University of California, Los Angeles",
           "focus": "Built the interactive dealership risk map and leads VINdicated's core consumer research and data infrastructure.",
           "leads": "Fiona Wangsawidjaja, President · William Prawira, Internal Vice President"
         },
         {
+          "tag": "UC Berkeley",
           "name": "UC Berkeley Chapter",
           "school": "University of California, Berkeley",
           "focus": "Currently building out its membership. Focused on consumer education and outreach.",
           "leads": "Rana Darwich, President · Noirit Ghosh Choudhuri, Internal Vice President · Halima Cherif Hminat, External Vice President"
         },
         {
+          "tag": "UC Santa Cruz",
           "name": "UC Santa Cruz Chapter",
           "school": "University of California, Santa Cruz",
           "focus": "Focused on algorithmic discrimination and AI bias in car sales.",
@@ -2093,44 +2300,55 @@
     "news": {
       "title": "Learn from others.",
       "body": "Real stories of buyers who got taken advantage of, and what regulators are doing about it. Each one links to the original reporting.",
+      "credit": "Illustration: VINdicated",
       "items": [
         {
+          "kicker": "AI scams",
           "title": "AI Car Dealer Scams Are Infesting Facebook Marketplace",
           "byline": "By Caleb Jacobs / The Drive / Sept. 18, 2026",
           "dek": "A California photographer financed a 4Runner from a Marketplace listing posted by a near-perfect clone of a real Texas dealer, with fake paperwork, a fake GPS tracker, and a synthetic driver's voice. The truck never arrived.",
           "takeLabel": "The lesson",
-          "take": "A valid VIN and a lender's approval don't prove a car exists. See it in person or send an inspector."
+          "take": "A valid VIN and a lender's approval don't prove a car exists. See it in person or send an inspector.",
+          "cta": "Read the full story at The Drive →"
         },
         {
+          "kicker": "Consumer alert",
           "title": "Scammers are spoofing car dealership websites",
           "byline": "By BCP Staff / Federal Trade Commission / Sept. 1, 2026",
           "dek": "The FTC warns that scammers are copying real dealers' websites, often with AI, down to the logos, listings, and fake testimonials, then taking payment for cars buyers never receive.",
           "takeLabel": "The lesson",
-          "take": "Search the dealer's name with “scam” or “complaint,” and walk away from wire-transfer-only deals."
+          "take": "Search the dealer's name with “scam” or “complaint,” and walk away from wire-transfer-only deals.",
+          "cta": "Read the full story at Federal Trade Commission →"
         },
         {
+          "kicker": "Enforcement",
           "title": "Regulators crack down on junk fees with a $4 million dealer settlement",
           "byline": "Hinshaw & Culbertson / Aug. 2026",
           "dek": "The FTC and Connecticut's attorney general settled with a Nissan dealership accused of misleading buyers about prices and charging for add-ons and fees they never agreed to. The money goes back to consumers.",
           "takeLabel": "The lesson",
-          "take": "Read every line of the contract. Charges you didn't agree to can be challenged, and regulators do act."
+          "take": "Read every line of the contract. Charges you didn't agree to can be challenged, and regulators do act.",
+          "cta": "Read the full story at Hinshaw & Culbertson →"
         },
         {
+          "kicker": "Enforcement",
           "title": "Car dealerships nationwide warned to stop junk fees",
           "byline": "PIRG",
           "dek": "Regulators sent letters to 97 auto groups, which own hundreds of dealerships, saying advertised prices must include mandatory fees and dealers can't require their own financing to get the advertised price.",
           "takeLabel": "The lesson",
-          "take": "The advertised price should be a price you can pay. Ask for the out-the-door number in writing."
+          "take": "The advertised price should be a price you can pay. Ask for the out-the-door number in writing.",
+          "cta": "Read the full story at PIRG →"
         },
         {
+          "kicker": "New law",
           "title": "California's new law for car buyers",
           "byline": "CalMatters / Dec. 2025",
           "dek": "SB 766, written by Santa Monica's state senator, gives many used-car buyers a three-day right to return the car, requires dealers to show a full price up front, and bans charging for add-ons that don't benefit you.",
           "takeLabel": "The lesson",
-          "take": "If you buy a used car in California after October 1, 2026, you may have three days to change your mind."
+          "take": "If you buy a used car in California after October 1, 2026, you may have three days to change your mind.",
+          "cta": "Read the full story at CalMatters →"
         }
       ],
-      "footnote": "Headlines belong to their publications. Summaries by VINdicated. Stories link to outside publications, which we don't control."
+      "footnote": "Headlines belong to their publications. Summaries and illustrations by VINdicated. Stories link to outside publications, which we don't control."
     }
   },
   "mapMethods": {
diff --git a/lib/i18n/dictionary.ts b/lib/i18n/dictionary.ts
index eaed612..6a1874b 100644
--- a/lib/i18n/dictionary.ts
+++ b/lib/i18n/dictionary.ts
@@ -60,13 +60,19 @@ export type HomePageDict = {
 		ctaPrimary: string;
 		ctaSecondary: string;
 		photoAlt: string;
+		cards: TitleBody[];
 	};
 	sources: { heading: string; items: string[] };
 	publicKnowledge: {
 		title: string;
 		// Rich text: plain strings plus { b } for the bold phrase.
 		body: RichText;
-		cta: string;
+		ctaPrimary: string;
+		ctaSecondary: string;
+		phoneLabel: string;
+		clock: string;
+		appName: string;
+		notifs: { time: string; body: string }[];
 	};
 	footing: {
 		title: string;
@@ -74,8 +80,27 @@ export type HomePageDict = {
 		quote: string;
 		quoteCite: string;
 		body: string;
+		quoteA: string;
+		quoteB: string;
 		rows: { stat: string; title: string; body: string; cite: string }[];
 	};
+	preview: {
+		tag: string;
+		title: string;
+		body: string;
+		cta: string;
+		carAlt: string;
+		carName: string;
+		carTags: string[];
+		question: string;
+		optionsLabel: string;
+		right: string;
+		// "{amount}" is replaced with the formatted dollar difference.
+		over: string;
+		low: string;
+		breakdown: string;
+		playAll: string;
+	};
 	chapters: {
 		title: string;
 		body: string;
@@ -86,6 +111,30 @@ export type HomePageDict = {
 		body: string;
 		links: { platform: string; handle: string }[];
 	};
+	ai: {
+		title: string;
+		body: string;
+		steps: TitleBody[];
+		art: {
+			boosted: string;
+			license: string;
+			dealerName: string;
+			dealerDropped: string;
+			loanFunded: string;
+			loanAmount: string;
+			now: string;
+			delivered: string;
+		};
+		source: string;
+		saveStat: string;
+		saveTitle: string;
+		saveBody: string;
+		saveCta: string;
+		tipsTitle: string;
+		tips: string[];
+		ftcCta: string;
+		reportCta: string;
+	};
 	pillars: { title: string; body: string; items: TitleBody[] };
 	strikes: {
 		title: string;
@@ -104,15 +153,7 @@ export type HomePageDict = {
 		checks: string[];
 		offers: TitleBody[];
 	};
-	// Pre-purchase inspection explainer near the top of the home page.
-	ppi: {
-		title: string;
-		// Rich text: plain strings plus { b } for the bold phrase.
-		body: RichText;
-		items: TitleBody[];
-		primary: string;
-		secondary: string;
-	};
+	cta: { title: string; body: string; primary: string; secondary: string };
 };
 
 export type AboutTextSegment = { text: string; bold?: boolean };
diff --git a/public/images/news/ai-dealer-scams.svg b/public/images/news/ai-dealer-scams.svg
new file mode 100644
index 0000000..acff76b
--- /dev/null
+++ b/public/images/news/ai-dealer-scams.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360"><rect width="640" height="360" fill="#2a0f31"/>
+<g opacity=".18" stroke="#c77dd4" stroke-width="1"><path d="M0 0H640"/><path d="M0 24H640"/><path d="M0 48H640"/><path d="M0 72H640"/><path d="M0 96H640"/><path d="M0 120H640"/><path d="M0 144H640"/><path d="M0 168H640"/><path d="M0 192H640"/><path d="M0 216H640"/><path d="M0 240H640"/><path d="M0 264H640"/><path d="M0 288H640"/><path d="M0 312H640"/><path d="M0 336H640"/></g>
+<rect x="210" y="40" width="220" height="300" rx="28" fill="#140a18" stroke="#c77dd4" stroke-width="3"/>
+<rect x="224" y="58" width="192" height="120" rx="12" fill="#3a1644"/>
+<path d="M250 150c0-10 5-16 14-18l24-5 18-18c4-4 9-6 15-6h40c6 0 11 2 15 6l16 17 20 4c8 2 12 7 12 15v7H250z" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="7 6"/>
+<text x="320" y="210" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="38" fill="#fff">$36,240</text>
+<text x="320" y="238" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="700" font-size="15" fill="#c77dd4">SENT TO A DEALER THAT DIDN'T EXIST</text>
+<rect x="244" y="262" width="152" height="40" rx="20" fill="#b3261e"/><text x="320" y="288" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="16" fill="#fff">Delivered?</text>
+<circle cx="120" cy="250" r="8" fill="#9533A5"/><path d="M120 250C170 180 150 110 210 110" stroke="#9533A5" stroke-width="4" fill="none" stroke-dasharray="3 9" stroke-linecap="round"/>
+<path d="M520 90c-14 0-24 10-24 24 0 18 24 38 24 38s24-20 24-38c0-14-10-24-24-24z" fill="#b3261e"/><circle cx="520" cy="114" r="8" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/images/news/california-sb-766.svg b/public/images/news/california-sb-766.svg
new file mode 100644
index 0000000..7762c76
--- /dev/null
+++ b/public/images/news/california-sb-766.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360"><rect width="640" height="360" fill="#f6ecf8"/>
+<g transform="translate(90 60)"><rect width="200" height="220" rx="20" fill="#fff" stroke="#2a0f31" stroke-width="4"/><rect width="200" height="60" rx="20" fill="#9533A5"/><rect y="40" width="200" height="20" fill="#9533A5"/>
+<text x="100" y="42" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="24" fill="#fff">OCT</text><text x="100" y="170" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="110" fill="#2a0f31">1</text></g>
+<g transform="translate(350 110)"><rect x="0" y="0" width="56" height="56" rx="14" fill="#1d6b3a"/><text x="28" y="37" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="24" fill="#fff">1</text><rect x="70" y="0" width="56" height="56" rx="14" fill="#1d6b3a"/><text x="98" y="37" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="24" fill="#fff">2</text><rect x="140" y="0" width="56" height="56" rx="14" fill="#1d6b3a"/><text x="168" y="37" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="24" fill="#fff">3</text>
+<text x="96" y="110" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="22" fill="#2a0f31">days to return</text><text x="96" y="138" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="700" font-size="16" fill="#5e1a6b">many used cars</text></g></svg>
\ No newline at end of file
diff --git a/public/images/news/dealer-warning-letters.svg b/public/images/news/dealer-warning-letters.svg
new file mode 100644
index 0000000..b18c94f
--- /dev/null
+++ b/public/images/news/dealer-warning-letters.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360"><rect width="640" height="360" fill="#fff"/>
+<g><rect x="40" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M40 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="76" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M76 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="112" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M112 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="148" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M148 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="184" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M184 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="220" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M220 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="256" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M256 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="292" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M292 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="328" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M328 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="364" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M364 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="400" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M400 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="436" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M436 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="472" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M472 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="508" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M508 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="544" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M544 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="580" y="40" width="28" height="20" rx="3" fill="#9533A5"/><path d="M580 40l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="40" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M40 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="76" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M76 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="112" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M112 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="148" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M148 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="184" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M184 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="220" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M220 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="256" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M256 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="292" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M292 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="328" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M328 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="364" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M364 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="400" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M400 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="436" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M436 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="472" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M472 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="508" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M508 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="544" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M544 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="580" y="84" width="28" height="20" rx="3" fill="#9533A5"/><path d="M580 84l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="40" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M40 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="76" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M76 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="112" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M112 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="148" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M148 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="184" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M184 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="220" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M220 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="256" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M256 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="292" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M292 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="328" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M328 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="364" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M364 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="400" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M400 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="436" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M436 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="472" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M472 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="508" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M508 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="544" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M544 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="580" y="128" width="28" height="20" rx="3" fill="#9533A5"/><path d="M580 128l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="40" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M40 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="76" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M76 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="112" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M112 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="148" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M148 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="184" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M184 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="220" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M220 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="256" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M256 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="292" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M292 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="328" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M328 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="364" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M364 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="400" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M400 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="436" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M436 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="472" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M472 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="508" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M508 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="544" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M544 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="580" y="172" width="28" height="20" rx="3" fill="#9533A5"/><path d="M580 172l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="40" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M40 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="76" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M76 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="112" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M112 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="148" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M148 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="184" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M184 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="220" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M220 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="256" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M256 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="292" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M292 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="328" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M328 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="364" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M364 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="400" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M400 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="436" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M436 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="472" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M472 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="508" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M508 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="544" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M544 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="580" y="216" width="28" height="20" rx="3" fill="#9533A5"/><path d="M580 216l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="40" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M40 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="76" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M76 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="112" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M112 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="148" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M148 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="184" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M184 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="220" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M220 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="256" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M256 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="292" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M292 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="328" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M328 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="364" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M364 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="400" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M400 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="436" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M436 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="472" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M472 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="508" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M508 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="544" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M544 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="580" y="260" width="28" height="20" rx="3" fill="#9533A5"/><path d="M580 260l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="40" y="304" width="28" height="20" rx="3" fill="#9533A5"/><path d="M40 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="76" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M76 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="112" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M112 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="148" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M148 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="184" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M184 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="220" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M220 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="256" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M256 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="292" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M292 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="328" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M328 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="364" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M364 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="400" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M400 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="436" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M436 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="472" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M472 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="508" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M508 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="544" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M544 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/><rect x="580" y="304" width="28" height="20" rx="3" fill="#ecd6f0"/><path d="M580 304l14 10 14-10" fill="none" stroke="#fff" stroke-width="2"/></g>
+<rect x="280" y="306" width="330" height="40" rx="20" fill="#2a0f31"/><text x="445" y="332" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="18" fill="#fff">97 warning letters</text></svg>
\ No newline at end of file
diff --git a/public/images/news/junk-fee-settlement.svg b/public/images/news/junk-fee-settlement.svg
new file mode 100644
index 0000000..8ff3504
--- /dev/null
+++ b/public/images/news/junk-fee-settlement.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360"><rect width="640" height="360" fill="#9533A5"/>
+<g opacity=".15" fill="#fff"><circle cx="20" cy="20" r="3"/><circle cx="20" cy="60" r="3"/><circle cx="20" cy="100" r="3"/><circle cx="20" cy="140" r="3"/><circle cx="20" cy="180" r="3"/><circle cx="20" cy="220" r="3"/><circle cx="20" cy="260" r="3"/><circle cx="20" cy="300" r="3"/><circle cx="20" cy="340" r="3"/><circle cx="60" cy="20" r="3"/><circle cx="60" cy="60" r="3"/><circle cx="60" cy="100" r="3"/><circle cx="60" cy="140" r="3"/><circle cx="60" cy="180" r="3"/><circle cx="60" cy="220" r="3"/><circle cx="60" cy="260" r="3"/><circle cx="60" cy="300" r="3"/><circle cx="60" cy="340" r="3"/><circle cx="100" cy="20" r="3"/><circle cx="100" cy="60" r="3"/><circle cx="100" cy="100" r="3"/><circle cx="100" cy="140" r="3"/><circle cx="100" cy="180" r="3"/><circle cx="100" cy="220" r="3"/><circle cx="100" cy="260" r="3"/><circle cx="100" cy="300" r="3"/><circle cx="100" cy="340" r="3"/><circle cx="140" cy="20" r="3"/><circle cx="140" cy="60" r="3"/><circle cx="140" cy="100" r="3"/><circle cx="140" cy="140" r="3"/><circle cx="140" cy="180" r="3"/><circle cx="140" cy="220" r="3"/><circle cx="140" cy="260" r="3"/><circle cx="140" cy="300" r="3"/><circle cx="140" cy="340" r="3"/><circle cx="180" cy="20" r="3"/><circle cx="180" cy="60" r="3"/><circle cx="180" cy="100" r="3"/><circle cx="180" cy="140" r="3"/><circle cx="180" cy="180" r="3"/><circle cx="180" cy="220" r="3"/><circle cx="180" cy="260" r="3"/><circle cx="180" cy="300" r="3"/><circle cx="180" cy="340" r="3"/><circle cx="220" cy="20" r="3"/><circle cx="220" cy="60" r="3"/><circle cx="220" cy="100" r="3"/><circle cx="220" cy="140" r="3"/><circle cx="220" cy="180" r="3"/><circle cx="220" cy="220" r="3"/><circle cx="220" cy="260" r="3"/><circle cx="220" cy="300" r="3"/><circle cx="220" cy="340" r="3"/><circle cx="260" cy="20" r="3"/><circle cx="260" cy="60" r="3"/><circle cx="260" cy="100" r="3"/><circle cx="260" cy="140" r="3"/><circle cx="260" cy="180" r="3"/><circle cx="260" cy="220" r="3"/><circle cx="260" cy="260" r="3"/><circle cx="260" cy="300" r="3"/><circle cx="260" cy="340" r="3"/><circle cx="300" cy="20" r="3"/><circle cx="300" cy="60" r="3"/><circle cx="300" cy="100" r="3"/><circle cx="300" cy="140" r="3"/><circle cx="300" cy="180" r="3"/><circle cx="300" cy="220" r="3"/><circle cx="300" cy="260" r="3"/><circle cx="300" cy="300" r="3"/><circle cx="300" cy="340" r="3"/><circle cx="340" cy="20" r="3"/><circle cx="340" cy="60" r="3"/><circle cx="340" cy="100" r="3"/><circle cx="340" cy="140" r="3"/><circle cx="340" cy="180" r="3"/><circle cx="340" cy="220" r="3"/><circle cx="340" cy="260" r="3"/><circle cx="340" cy="300" r="3"/><circle cx="340" cy="340" r="3"/><circle cx="380" cy="20" r="3"/><circle cx="380" cy="60" r="3"/><circle cx="380" cy="100" r="3"/><circle cx="380" cy="140" r="3"/><circle cx="380" cy="180" r="3"/><circle cx="380" cy="220" r="3"/><circle cx="380" cy="260" r="3"/><circle cx="380" cy="300" r="3"/><circle cx="380" cy="340" r="3"/><circle cx="420" cy="20" r="3"/><circle cx="420" cy="60" r="3"/><circle cx="420" cy="100" r="3"/><circle cx="420" cy="140" r="3"/><circle cx="420" cy="180" r="3"/><circle cx="420" cy="220" r="3"/><circle cx="420" cy="260" r="3"/><circle cx="420" cy="300" r="3"/><circle cx="420" cy="340" r="3"/><circle cx="460" cy="20" r="3"/><circle cx="460" cy="60" r="3"/><circle cx="460" cy="100" r="3"/><circle cx="460" cy="140" r="3"/><circle cx="460" cy="180" r="3"/><circle cx="460" cy="220" r="3"/><circle cx="460" cy="260" r="3"/><circle cx="460" cy="300" r="3"/><circle cx="460" cy="340" r="3"/><circle cx="500" cy="20" r="3"/><circle cx="500" cy="60" r="3"/><circle cx="500" cy="100" r="3"/><circle cx="500" cy="140" r="3"/><circle cx="500" cy="180" r="3"/><circle cx="500" cy="220" r="3"/><circle cx="500" cy="260" r="3"/><circle cx="500" cy="300" r="3"/><circle cx="500" cy="340" r="3"/><circle cx="540" cy="20" r="3"/><circle cx="540" cy="60" r="3"/><circle cx="540" cy="100" r="3"/><circle cx="540" cy="140" r="3"/><circle cx="540" cy="180" r="3"/><circle cx="540" cy="220" r="3"/><circle cx="540" cy="260" r="3"/><circle cx="540" cy="300" r="3"/><circle cx="540" cy="340" r="3"/><circle cx="580" cy="20" r="3"/><circle cx="580" cy="60" r="3"/><circle cx="580" cy="100" r="3"/><circle cx="580" cy="140" r="3"/><circle cx="580" cy="180" r="3"/><circle cx="580" cy="220" r="3"/><circle cx="580" cy="260" r="3"/><circle cx="580" cy="300" r="3"/><circle cx="580" cy="340" r="3"/><circle cx="620" cy="20" r="3"/><circle cx="620" cy="60" r="3"/><circle cx="620" cy="100" r="3"/><circle cx="620" cy="140" r="3"/><circle cx="620" cy="180" r="3"/><circle cx="620" cy="220" r="3"/><circle cx="620" cy="260" r="3"/><circle cx="620" cy="300" r="3"/><circle cx="620" cy="340" r="3"/></g>
+<g transform="translate(160 80) rotate(-30 80 60)"><rect x="0" y="30" width="170" height="60" rx="14" fill="#fff"/><rect x="70" y="90" width="30" height="130" rx="10" fill="#fff"/></g>
+<rect x="110" y="270" width="200" height="30" rx="8" fill="#2a0f31"/>
+<text x="470" y="185" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="96" fill="#fff">$4M</text>
+<text x="470" y="225" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="700" font-size="18" fill="#fff">BACK TO CONSUMERS</text></svg>
\ No newline at end of file
diff --git a/public/images/news/spoofed-dealer-sites.svg b/public/images/news/spoofed-dealer-sites.svg
new file mode 100644
index 0000000..d857fea
--- /dev/null
+++ b/public/images/news/spoofed-dealer-sites.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360"><rect width="640" height="360" fill="#ecd6f0"/>
+<g transform="translate(70 70)"><rect width="250" height="190" rx="14" fill="#fff" stroke="#2a0f31" stroke-width="3"/><rect width="250" height="30" rx="14" fill="#2a0f31"/><rect y="16" width="250" height="14" fill="#2a0f31"/>
+<circle cx="18" cy="15" r="5" fill="#fff"/><circle cx="34" cy="15" r="5" fill="#fff"/><text x="125" y="72" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="20" fill="#2a0f31">Real Dealer Co.</text>
+<rect x="24" y="92" width="92" height="64" rx="8" fill="#ecd6f0"/><rect x="134" y="92" width="92" height="64" rx="8" fill="#ecd6f0"/><text x="125" y="180" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="700" font-size="13" fill="#1d6b3a">REAL</text></g>
+<g transform="translate(320 90)"><rect width="250" height="190" rx="14" fill="#fff" stroke="#b3261e" stroke-width="3" stroke-dasharray="10 6"/><rect width="250" height="30" rx="14" fill="#b3261e"/><rect y="16" width="250" height="14" fill="#b3261e"/>
+<circle cx="18" cy="15" r="5" fill="#fff"/><circle cx="34" cy="15" r="5" fill="#fff"/><text x="125" y="72" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="800" font-size="20" fill="#2a0f31">Real Dealer</text>
+<rect x="24" y="92" width="92" height="64" rx="8" fill="#fbe1df"/><rect x="134" y="92" width="92" height="64" rx="8" fill="#fbe1df"/><text x="125" y="180" text-anchor="middle" font-family="Plus Jakarta Sans,sans-serif" font-weight="700" font-size="13" fill="#b3261e">CLONE</text></g></svg>
\ No newline at end of file
diff --git a/public/vindimap/index.html b/public/vindimap/index.html
index f76956c..9aff14c 100644
--- a/public/vindimap/index.html
+++ b/public/vindimap/index.html
@@ -15,24 +15,24 @@
 @media (max-width:860px){.app{grid-template-columns:1fr;grid-template-rows:58dvh 1fr}.side{order:2}}
 .side{display:flex;flex-direction:column;min-height:0;background:#fff;border-right:1px solid var(--line)}
 .head{padding:20px 20px 14px;border-bottom:1px solid var(--line)}
-.head h1{margin:0;font-size:1.35rem}
+.head h1{margin:0;font-size:1.35rem;letter-spacing:-.02em}
 .head p{margin:6px 0 0;font-size:.92rem;line-height:1.5}
-.src{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.8rem;font-weight:700;background:var(--tint);border-radius:0;padding:4px 10px}
+.src{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.8rem;font-weight:700;background:var(--tint);border-radius:999px;padding:4px 10px}
 .src i{width:8px;height:8px;border-radius:50%;background:var(--amber)}
 .src.live i{background:var(--green)}
 .tools{padding:14px 16px 10px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
 .chips{display:flex;gap:6px;flex-wrap:wrap}
-.chips button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;font-size:.88rem;border:1.5px solid var(--line);background:#fff;border-radius:0;padding:7px 12px;cursor:pointer;color:var(--ink)}
-.chips button b{font-size:.78rem;background:var(--tint);border-radius:0;padding:1px 7px}
+.chips button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;font-size:.88rem;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;cursor:pointer;color:var(--ink)}
+.chips button b{font-size:.78rem;background:var(--tint);border-radius:999px;padding:1px 7px}
 .chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
 .chips button[aria-pressed="true"] b{background:rgba(255,255,255,.2)}
 .dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none;background:var(--tc)}
 .t-flagged{--tc:var(--red)}.t-caution{--tc:var(--amber)}.t-clear{--tc:var(--green)}.t-all{--tc:var(--purple)}
-.search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:0;padding:0 14px}
+.search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:0 14px}
 .search:focus-within{border-color:var(--purple)}
 .search input{border:0;outline:0;font:inherit;padding:10px 0;width:100%;background:none;color:var(--ink)}
 .list{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}
-.list button{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;border:0;background:none;padding:10px 12px;border-radius:0;font:inherit;color:var(--ink);cursor:pointer}
+.list button{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;border:0;background:none;padding:10px 12px;border-radius:12px;font:inherit;color:var(--ink);cursor:pointer}
 .list .dot{margin-top:5px}
 .list b{display:block}
 .list em{font-style:normal;font-size:.85rem;font-weight:600;color:var(--deep)}
@@ -40,49 +40,53 @@
 .list li.sel button{background:var(--tint2)}
 .foot{padding:12px 16px;border-top:1px solid var(--line);font-size:.8rem;line-height:1.5}
 #map{position:relative;min-height:0;background:#1b1b1b}
-.layers{position:absolute;z-index:500;top:14px;left:50%;transform:translateX(-50%);display:flex;background:#fff;border-radius:0;padding:4px;border:1px solid var(--line)}
-.layers button{font:inherit;font-weight:700;border:0;background:none;border-radius:0;padding:8px 16px;cursor:pointer;color:var(--ink)}
+.layers{position:absolute;z-index:500;top:14px;left:50%;transform:translateX(-50%);display:flex;background:#fff;border-radius:999px;padding:4px;box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
+.layers button{font:inherit;font-weight:800;border:0;background:none;border-radius:999px;padding:8px 16px;cursor:pointer;color:var(--ink)}
 .layers button[aria-pressed="true"]{background:var(--purple);color:#fff}
-.fit{position:absolute;z-index:500;right:14px;bottom:28px;font:inherit;font-weight:700;border:1px solid var(--line);background:#fff;border-radius:0;padding:10px 16px;cursor:pointer;color:var(--ink)}
-.pin{width:18px;height:18px;border-radius:50%;background:var(--tc);border:3px solid #fff;transition:transform .2s}
+.fit{position:absolute;z-index:500;right:14px;bottom:28px;font:inherit;font-weight:800;border:0;background:#fff;border-radius:999px;padding:10px 16px;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.45);color:var(--ink)}
+.pin{width:18px;height:18px;border-radius:50%;background:var(--tc);border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.45);transition:transform .2s}
 .pin.sel{transform:scale(1.5);border-color:var(--ink)}
-.pin-wrap.t-flagged::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red)}
+.pin-wrap{animation:drop .6s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:var(--d)}
+@keyframes drop{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
+.pin-wrap.t-flagged::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);animation:ring 2.2s ease-out infinite}
+@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
 .pin-wrap.dim{opacity:.15;pointer-events:none}
-.leaflet-popup-content-wrapper{border-radius:0;border:1px solid var(--line);box-shadow:none}
+.leaflet-popup-content-wrapper{border-radius:18px;box-shadow:0 20px 40px -12px rgba(0,0,0,.5)}
 .leaflet-popup-content{margin:18px 20px;font-family:var(--font);color:var(--ink);width:300px!important;max-height:60vh;overflow:auto}
-.badge{display:inline-block;font-weight:700;font-size:.8rem;color:#fff;background:var(--tc);border-radius:0;padding:3px 11px}
-.pc h3{margin:8px 0 4px;font-size:1.15rem}
+.badge{display:inline-block;font-weight:800;font-size:.8rem;color:#fff;background:var(--tc);border-radius:999px;padding:3px 11px}
+.pc h3{margin:8px 0 4px;font-size:1.15rem;letter-spacing:-.015em}
 .pc .addr{margin:0;font-size:.88rem;line-height:1.45}
 .rev{display:flex;align-items:center;gap:4px;margin-top:12px;flex-wrap:wrap}
-.rev i{width:15px;height:15px;border-radius:0;background:#d9efe0}
+.rev i{width:15px;height:15px;border-radius:4px;background:#d9efe0}
 .rev i.bad{background:var(--red)}
 .rev span{margin-left:6px;font-size:.88rem}
 .cats{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
-.cats li{background:var(--tint);border-radius:0;padding:7px 10px;font-size:.88rem}
+.cats li{background:var(--tint);border-radius:9px;padding:7px 10px;font-size:.88rem}
 .ct{display:flex;justify-content:space-between;gap:10px;font-weight:600}
 .cats q{display:block;margin-top:5px;padding-left:9px;border-left:3px solid var(--tc);font-style:italic;line-height:1.45}
 .cats q::before{content:"“"}.cats q::after{content:"”"}
 .attr{margin:8px 0 0;font-size:.8rem;font-weight:600;color:var(--deep)}
-.h{font-weight:700;margin:14px 0 0;font-size:.9rem}
+.h{font-weight:800;margin:14px 0 0;font-size:.9rem}
 .ok{margin:12px 0 0;font-weight:600;color:#14512b}
-.go{display:inline-block;margin-top:14px;font-weight:700;color:var(--purple)!important;text-decoration:none}
+.go{display:inline-block;margin-top:14px;font-weight:800;color:var(--purple)!important;text-decoration:none}
+@media (prefers-reduced-motion:reduce){.pin-wrap{animation:none}.pin-wrap.t-flagged::after{animation:none}}
 
 /* Short disclaimer gate. Acceptance is shared with getvindicated.org/map
    through sessionStorage ("vd-ack") when both are served from the same site. */
-.gate{position:fixed;inset:0;z-index:2000;overflow:auto;background:rgba(42,15,49,.72);padding:clamp(12px,4vw,48px);display:flex;align-items:center;justify-content:center}
+.gate{position:fixed;inset:0;z-index:2000;overflow:auto;background:rgba(42,15,49,.72);backdrop-filter:blur(6px);padding:clamp(12px,4vw,48px);display:flex;align-items:center;justify-content:center}
 .gate[hidden]{display:none}
-.vd{max-width:640px;width:100%;margin:auto;background:#fff;border:1px solid var(--line);border-radius:0;padding:clamp(22px,4vw,40px)}
-.vd-title{margin:0;font-size:clamp(1.9rem,4vw,2.5rem);line-height:1.05}
+.vd{max-width:640px;width:100%;margin:auto;background:#fff;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--purple);border-radius:28px;padding:clamp(22px,4vw,40px)}
+.vd-title{margin:0;font-size:clamp(1.9rem,4vw,2.5rem);letter-spacing:-.03em;line-height:1.05}
 .vd-lede{margin:14px 0 0;font-size:1.02rem;line-height:1.65}
 .vd-accept{margin-top:22px;border-top:3px solid var(--ink);padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
 .vd-check{display:flex;gap:12px;align-items:flex-start;max-width:420px;cursor:pointer;font-weight:700;line-height:1.5;font-size:.98rem}
 .vd-check input{width:24px;height:24px;margin-top:1px;accent-color:var(--purple);flex:none}
-.vd-go{font:inherit;font-weight:700;font-size:1.05rem;border:0;border-radius:0;padding:14px 26px;background:var(--purple);color:#fff;cursor:pointer}
+.vd-go{font:inherit;font-weight:800;font-size:1.05rem;border:0;border-radius:999px;padding:14px 26px;background:var(--purple);color:#fff;cursor:pointer}
 .vd-go:disabled{opacity:.35;cursor:not-allowed}
 .vd-methods{display:inline-block;margin-top:16px;font-weight:700;color:var(--purple);text-decoration:none}
 .vd-methods:hover{text-decoration:underline}
 .vd-title:focus{outline:none}
-.info-btn{position:absolute;z-index:500;right:14px;top:14px;font:inherit;font-weight:700;border:1px solid var(--line);background:#fff;border-radius:0;padding:9px 14px;cursor:pointer;color:var(--ink)}
+.info-btn{position:absolute;z-index:500;right:14px;top:14px;font:inherit;font-weight:800;border:0;background:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.45);color:var(--ink)}
 /* Narrow screens: drop "About this map" below the Satellite/Map switch. */
 @media (max-width:560px){.info-btn{top:62px;right:10px}}
 </style>
diff --git a/scripts/scope-prototype-css.py b/scripts/scope-prototype-css.py
new file mode 100644
index 0000000..61907f0
--- /dev/null
+++ b/scripts/scope-prototype-css.py
@@ -0,0 +1,113 @@
+#!/usr/bin/env python3
+"""Generate app/redesign.css from the redesign prototype's <style> block.
+
+Usage:
+  python3 scripts/scope-prototype-css.py redesign-handoff/prototype/vindicated-redesign.html > app/redesign.css
+
+Every selector is scoped under `.rd` so the legacy dark pages are
+unaffected (`header`/`footer` map to `.rd-hdr`/`.rd-ftr`, `:root`/`body`
+map to `.rd`), and every @keyframes name is prefixed with `rd-` so it
+can't collide with the ones in globals.css. Hand-written adjustments go
+in app/redesign-overrides.css, never in the generated file.
+"""
+import re
+import sys
+
+HEADER = """/*
+ * GENERATED by scripts/scope-prototype-css.py from the redesign prototype.
+ * Do not edit by hand: put adjustments in app/redesign-overrides.css.
+ */
+
+/* Pages that use the redesign get a white canvas and no grain overlay. */
+body:has(.rd-page){background:#fff;color:#2a0f31}
+body:has(.rd-page)::after{display:none}
+html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
+@media (prefers-reduced-motion:reduce){html:has(.rd-page){scroll-behavior:auto}}
+"""
+
+
+def split_top(s):
+    parts, depth, cur = [], 0, ""
+    for ch in s:
+        if ch in "([":
+            depth += 1
+        elif ch in ")]":
+            depth -= 1
+        if ch == "," and depth == 0:
+            parts.append(cur)
+            cur = ""
+        else:
+            cur += ch
+    parts.append(cur)
+    return parts
+
+
+def scope_selector(sel):
+    sel = sel.strip()
+    if sel in (":root", "body"):
+        return ".rd"
+    if sel == "html":
+        return None
+    m = re.match(r"^(header|footer)\b(.*)$", sel)
+    if m:
+        return (".rd-hdr" if m.group(1) == "header" else ".rd-ftr") + m.group(2)
+    return ".rd " + sel
+
+
+def main(path):
+    html = open(path, encoding="utf-8").read()
+    css = re.search(r"<style>(.*?)</style>", html, re.S).group(1)
+    css = re.sub(r"/\*.*?\*/", "", css, flags=re.S)
+    keyframes = set(re.findall(r"@keyframes\s+([\w-]+)", css))
+
+    def rename_animations(body):
+        def fix(m):
+            val = m.group(2)
+            for k in keyframes:
+                val = re.sub(r"(?<![\w-])" + re.escape(k) + r"(?![\w-])", "rd-" + k, val)
+            return m.group(1) + val
+
+        return re.sub(r"(animation(?:-name)?\s*:)([^;}]*)", fix, body)
+
+    def clean_root(body):
+        # The prototype pads :root for the iOS safe area; .rd is on several
+        # elements here, so drop that padding.
+        return re.sub(r"\s*padding-(top|bottom):env\(safe-area-inset-\w+,0px\);", "", body)
+
+    def parse(block):
+        out, i = [], 0
+        while True:
+            j = block.find("{", i)
+            if j < 0:
+                break
+            head = block[i:j].strip()
+            depth, k = 1, j + 1
+            while depth:
+                if block[k] == "{":
+                    depth += 1
+                elif block[k] == "}":
+                    depth -= 1
+                k += 1
+            inner = block[j + 1 : k - 1].strip()
+            if head.startswith("@keyframes"):
+                out.append("@keyframes rd-%s{%s}" % (head.split()[1], inner))
+            elif head.startswith(("@media", "@supports")):
+                sub = parse(inner)
+                if sub:
+                    out.append(head + "{\n" + sub + "\n}")
+            else:
+                sels = [s for s in (scope_selector(x) for x in split_top(head)) if s]
+                if sels:
+                    body = rename_animations(inner)
+                    if ".rd" in sels and len(sels) == 1:
+                        body = clean_root(body)
+                        body = body.replace('--font:"Plus Jakarta Sans"', '--font:var(--font-jakarta),"Plus Jakarta Sans"')
+                    out.append(",".join(sels) + "{" + body + "}")
+            i = k
+        return "\n".join(out)
+
+    sys.stdout.write(HEADER + "\n" + parse(css) + "\n")
+
+
+if __name__ == "__main__":
+    main(sys.argv[1])

From e9faecc718759173a5f5bb2ad8a993ff276799c5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Oct 2026 20:14:39 +0000
Subject: [PATCH 2/2] Site: no hero overlay cards, no offset "pop" shadows, no
 thin gray dividers

On top of the 38feb50 restore:
- Hero: the three floating cards over the photo are gone (the typed
  heading stays).
- The solid offset shadow (the "pop", e.g. 8px 8px 0 #7d2a8b) is removed
  everywhere on the public site: hero photo, team cards, Instagram cards,
  project cards, Price Is Right card and steps, social links, contract
  graphic, dealer map and map embed, along with the hover nudge that went
  with it. Outlines stay.
- Thin gray divider lines are removed: above and below the sources strip,
  under the plan header, above project details, the APR split and chapter
  leads, under the research track nav and the map count. Lines that are
  part of illustrations (phone chat, receipt, contract mockups) and the
  header's bottom line stay.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/redesign-overrides.css            |  2 -
 app/redesign.css                      | 65 +++++++++------------------
 components/sections/home/HomeHero.tsx | 40 -----------------
 3 files changed, 20 insertions(+), 87 deletions(-)

diff --git a/app/redesign-overrides.css b/app/redesign-overrides.css
index e8026fc..3fd3281 100644
--- a/app/redesign-overrides.css
+++ b/app/redesign-overrides.css
@@ -566,7 +566,6 @@
   min-height: 520px;
   border: 4px solid var(--ink);
   border-radius: 24px;
-  box-shadow: 10px 10px 0 var(--purple);
   background: #e9e9ee;
 }
 .rd .map-embed-links {
@@ -589,7 +588,6 @@
     min-height: 480px;
     border-width: 3px;
     border-radius: 18px;
-    box-shadow: 6px 6px 0 var(--purple);
   }
 }
 
diff --git a/app/redesign.css b/app/redesign.css
index c66d8c4..5553cb6 100644
--- a/app/redesign.css
+++ b/app/redesign.css
@@ -130,7 +130,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (prefers-reduced-motion:reduce){
 .rd .hero-art .hb-card{animation:none}
 }
-.rd .strip{padding:40px 0;border-block:1px solid var(--line)}
+.rd .strip{padding:40px 0}
 .rd .strip-in{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:space-between}
 .rd .strip h4{font-size:1rem;font-weight:700;letter-spacing:0}
 .rd .sources{display:flex;gap:36px;flex-wrap:wrap;font-weight:800;font-size:1.05rem;color:var(--purple-deep)}
@@ -187,7 +187,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:640px){
 .rd .plan-card{padding:28px}
 }
-.rd .plan-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:24px}
+.rd .plan-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;padding-bottom:22px;margin-bottom:24px}
 .rd .plan-head h3{font-size:1.6rem}
 .rd .price{font-size:2.4rem;font-weight:800;color:var(--purple);letter-spacing:-.03em}
 .rd .checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
@@ -383,12 +383,12 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .projects{grid-template-columns:1fr;max-width:640px;margin:0 auto}
 }
 .rd .proj{display:flex;flex-direction:column;gap:16px;background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:32px;transition:border-color .2s,box-shadow .2s}
-.rd .proj:hover{border-color:var(--purple);box-shadow:0 24px 48px -28px rgba(94,26,107,.45)}
+.rd .proj:hover{border-color:var(--purple)}
 .rd .proj-head{display:flex;justify-content:space-between;align-items:flex-start}
 .rd .proj-head .icon{margin:0}
 .rd .proj h3{font-size:1.6rem}
 .rd .proj-desc{line-height:1.7;flex:1}
-.rd .proj-meta{display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
+.rd .proj-meta{display:flex;flex-direction:column;gap:14px;padding-top:18px}
 .rd .proj-row{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;color:var(--purple-deep)}
 .rd .proj-row svg{margin-top:3px}
 .rd .proj-row b{color:var(--ink)}
@@ -561,7 +561,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .stepper span{font-weight:800;margin-right:8px}
 .rd .apr-hint{margin-top:18px;font-weight:600}
 .rd .apr-big b{display:block;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
-.rd .apr-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
+.rd .apr-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;padding-top:22px}
 .rd .apr-split b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
 .rd .apr-bar{display:flex;height:18px;border-radius:9px;overflow:hidden;margin-top:26px;background:var(--tint)}
 .rd .apr-bar i{display:block;height:100%;transition:width .25s}
@@ -598,7 +598,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .chapter h3{font-size:1.5rem;margin:14px 0 4px}
 .rd .chapter .u{font-weight:600}
 .rd .chapter p.d{margin:16px 0;line-height:1.7}
-.rd .chapter .leads{font-size:.98rem;line-height:1.6;padding-top:16px;border-top:1px solid var(--line)}
+.rd .chapter .leads{font-size:.98rem;line-height:1.6;padding-top:16px}
 .rd .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
 @media (max-width:860px){
 .rd .roles{grid-template-columns:1fr 1fr}
@@ -665,7 +665,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .title-real .zone.danger:hover,.rd .title-real .zone.danger[aria-pressed="true"]{background:rgba(179,38,30,.25)}
 .rd .bg-img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(42,15,49,.3);display:block}
 .rd details .say{margin-top:14px}
-.rd .team .card.member{border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b}
+.rd .team .card.member{border:3px solid #a53ab8}
 .rd .team .avatar-img,.rd .team .avatar{border:3px solid #a53ab8}
 @media (prefers-reduced-motion:reduce){
 .rd .team .card.member{transition:none}
@@ -832,7 +832,6 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .insp-frame::before{content:"";display:block;aspect-ratio:3/2}
 .rd .insp-zoom,.rd .insp-hots{bottom:auto;height:0;padding-bottom:66.67%}
 .rd .insp-frame{border-radius:18px}
-.rd .insp-zoomwrap{}
 .rd .insp-card{position:relative;top:auto;bottom:auto;left:auto!important;right:auto!important;width:auto;margin-top:14px;transform:translateY(20px)!important;max-height:none}
 .rd .insp-card.in{transform:none!important}
 .rd .hot{width:36px;height:36px}
@@ -888,8 +887,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:900px){
 .rd .ig{grid-template-columns:1fr;gap:28px}
 }
-.rd .ig-card{display:block;background:#fff;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;border-radius:24px;overflow:hidden;transition:transform .15s,box-shadow .15s}
-.rd .ig-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #7d2a8b}
+.rd .ig-card{display:block;background:#fff;border:3px solid #a53ab8;border-radius:24px;overflow:hidden;transition:transform .15s,box-shadow .15s}
 .rd .ig-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
 .rd .ig-top b{display:block;line-height:1.2}
 .rd .ig-top span{font-size:.9rem;font-weight:600;color:var(--purple-deep)}
@@ -902,7 +900,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .ig-card{transition:none}
 .rd .ig-card:hover{transform:none}
 }
-.rd .track-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
+.rd .track-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(10px)}
 .rd .track-nav .wrap{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
 .rd .track-nav a{white-space:nowrap;font-weight:700;padding:9px 16px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;transition:background .2s,color .2s}
 .rd .track-nav a b{font-size:.8rem;background:var(--tint-2);color:var(--purple-deep);border-radius:999px;padding:2px 8px}
@@ -915,10 +913,9 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:1000px){
 .rd .projects-2{grid-template-columns:1fr}
 }
-.rd .proj{border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b}
-.rd .proj:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #7d2a8b}
+.rd .proj{border:3px solid #a53ab8}
 .rd .band .proj{background:#fff}
-.rd .pir{margin-top:56px;background:#fff;border-radius:28px;padding:36px;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b}
+.rd .pir{margin-top:56px;background:#fff;border-radius:28px;padding:36px;border:3px solid #a53ab8}
 @media (max-width:640px){
 .rd .pir{padding:22px}
 }
@@ -1006,7 +1003,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:900px){
 .rd .pv{grid-template-columns:1fr;gap:28px}
 }
-.rd .pv-card{background:#fff;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;border-radius:24px;padding:22px}
+.rd .pv-card{background:#fff;border:3px solid #a53ab8;border-radius:24px;padding:22px}
 .rd .pv-photo{border-radius:16px;border:1px solid var(--line);aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:#fff}
 .rd .pv-photo img{max-width:90%;max-height:88%;object-fit:contain}
 .rd .pv-card h3{font-size:1.35rem;margin:16px 0 10px}
@@ -1030,8 +1027,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:560px){
 .rd .socials-grid{grid-template-columns:1fr}
 }
-.rd .soc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;border-radius:22px;padding:20px;transition:transform .15s,box-shadow .15s}
-.rd .soc:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #7d2a8b}
+.rd .soc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;border:3px solid #a53ab8;border-radius:22px;padding:20px;transition:transform .15s,box-shadow .15s}
 .rd .soc-ic{flex:none;width:52px;height:52px;border-radius:16px;background:var(--tint-2);color:var(--purple);display:grid;place-items:center}
 .rd .soc-txt{min-width:0}
 .rd .soc-pf{display:block;font-weight:700;font-size:.9rem;color:var(--purple-deep)}
@@ -1050,7 +1046,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd #yyPhone.ring{animation:rd-ring3 .35s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
 @keyframes rd-ring3{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
 .rd .yy-day{position:absolute;top:4%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:800;border-radius:999px;padding:8px 18px;font-variant-numeric:tabular-nums}
-.rd .yy-contract{position:absolute;top:0;left:2%;border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;border:3px solid;box-shadow:5px 5px 0 currentColor;background:#fff;transition:transform .35s;animation:rd-flip .5s ease}
+.rd .yy-contract{position:absolute;top:0;left:2%;border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;border:3px solid;background:#fff;transition:transform .35s;animation:rd-flip .5s ease}
 .rd .yy-contract.ok{color:#1d6b3a}
 .rd .yy-contract.bad{color:#b3261e}
 .rd .yy-contract span{font-weight:700;font-size:.85rem}
@@ -1135,7 +1131,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:960px){
 .rd .dm{grid-template-columns:1fr}
 }
-.rd .dm-map{position:relative;border-radius:24px;overflow:hidden;border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;background:#faf6fb;touch-action:none;height:clamp(420px,62vh,640px)}
+.rd .dm-map{position:relative;border-radius:24px;overflow:hidden;border:3px solid #a53ab8;background:#faf6fb;touch-action:none;height:clamp(420px,62vh,640px)}
 .rd .dm-map svg{display:block;width:100%;height:100%;cursor:grab}
 .rd .dm-map.grab svg{cursor:grabbing}
 .rd .dm-city{font:800 17px "Plus Jakarta Sans",sans-serif;fill:#5e1a6b;opacity:.55;pointer-events:none;letter-spacing:.02em}
@@ -1178,7 +1174,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:960px){
 .rd .dm-side{height:360px}
 }
-.rd .dm-count{padding:16px 18px;font-weight:800;border-bottom:1px solid var(--line)}
+.rd .dm-count{padding:16px 18px;font-weight:800}
 .rd .dm-list{list-style:none;margin:0;padding:6px;overflow:auto;flex:1}
 .rd .dm-list button{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;border:0;background:none;padding:10px 12px;border-radius:12px;font:inherit;color:var(--ink);cursor:pointer}
 .rd .dm-list i{margin-top:5px}
@@ -1215,7 +1211,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .dm-cats-key li{display:grid;grid-template-columns:34px 1fr;gap:2px 12px;counter-increment:c}
 .rd .dm-cats-key li::before{content:counter(c);grid-row:span 2;width:34px;height:34px;border-radius:10px;background:var(--tint-2);color:var(--purple-deep);display:grid;place-items:center;font-weight:800}
 .rd .dm-cats-key li span{font-size:.94rem;line-height:1.5}
-.rd .vd{background:#fff;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--purple);border-radius:28px;padding:clamp(24px,4vw,52px)}
+.rd .vd{background:#fff;border:4px solid var(--ink);border-radius:28px;padding:clamp(24px,4vw,52px)}
 .rd .vd-head{border-bottom:3px solid var(--ink);padding-bottom:24px;margin-bottom:28px}
 .rd .vd-title{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.04em;line-height:1}
 .rd .vd-lede{margin-top:14px;font-size:1.2rem;font-weight:600;line-height:1.6;max-width:720px}
@@ -1238,7 +1234,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 @media (max-width:560px){
 .rd .vd-steps{grid-template-columns:1fr}
 }
-.rd .vd-steps li{border:3px solid #a53ab8;box-shadow:6px 6px 0 #7d2a8b;border-radius:20px;padding:22px;background:#fff}
+.rd .vd-steps li{border:3px solid #a53ab8;border-radius:20px;padding:22px;background:#fff}
 .rd .vd-sn{width:42px;height:42px;border-radius:12px;background:var(--purple);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem;margin-bottom:14px}
 .rd .vd-steps h3{font-size:1.3rem;margin-bottom:8px}
 .rd .vd-steps p{line-height:1.6;font-size:.98rem}
@@ -1251,7 +1247,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .vd-go:hover:not(:disabled){background:var(--purple-dark)}
 .rd .vd-go:disabled{opacity:.35;cursor:not-allowed}
 .rd .vd.done{opacity:.55}
-.rd .vd-launch{display:flex;align-items:center;gap:18px;background:var(--ink);color:#fff;border-radius:24px;padding:22px 26px;margin-top:28px;box-shadow:8px 8px 0 var(--purple)}
+.rd .vd-launch{display:flex;align-items:center;gap:18px;background:var(--ink);color:#fff;border-radius:24px;padding:22px 26px;margin-top:28px}
 .rd .vd-launch.in{animation:rd-pop .5s cubic-bezier(.2,.9,.3,1.3)}
 .rd .vd-launch-ic{width:56px;height:56px;border-radius:16px;background:var(--purple);display:grid;place-items:center;flex:none}
 .rd .vd-launch b{display:block;font-size:1.35rem}
@@ -1289,28 +1285,7 @@ html:has(.rd-page){scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-
 .rd .nw:hover{transform:none}
 }
 .rd .hero-photo{position:relative;margin:0;justify-self:center;width:100%;max-width:600px;padding:28px 0 36px}
-.rd .hero-photo img{display:block;width:100%;aspect-ratio:6/5;object-fit:cover;object-position:40% 60%;border-radius:28px;border:3px solid #a53ab8;box-shadow:8px 8px 0 #7d2a8b}
-.rd .hp-card{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:11px 16px 11px 11px;box-shadow:0 16px 32px -14px rgba(42,15,49,.45);animation:rd-hb-float 6s ease-in-out infinite}
-.rd .hp-card b{display:block;font-size:.95rem;line-height:1.2}
-.rd .hp-card em{display:block;font-style:normal;font-size:.82rem;font-weight:600;color:var(--purple-deep)}
-.rd .hp-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none}
-.rd .hp-ic.ok{background:#e3f3e8;color:#1d6b3a}
-.rd .hp-ic.bad{background:#fbe1df;color:#b3261e;font-size:1.1rem}
-.rd .hp-ic.pur{background:var(--purple);color:#fff}
-.rd .hp-c1{left:-28px;bottom:14%}
-.rd .hp-c2{right:-18px;top:0;animation-delay:-2s}
-.rd .hp-c3{right:-18px;bottom:6px;animation-delay:-4s}
-@media (max-width:960px){
-.rd .hp-c1{left:-6px}
-.rd .hp-c2{right:-6px}
-.rd .hp-c3{right:-6px}
-}
-@media (max-width:520px){
-.rd .hp-c1{display:none}
-}
-@media (prefers-reduced-motion:reduce){
-.rd .hp-card{animation:none}
-}
+.rd .hero-photo img{display:block;width:100%;aspect-ratio:6/5;object-fit:cover;object-position:40% 60%;border-radius:28px;border:3px solid #a53ab8}
 .rd-ftr{background:var(--ink);color:#fff;padding:80px 0 40px}
 .rd .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
 @media (max-width:900px){
diff --git a/components/sections/home/HomeHero.tsx b/components/sections/home/HomeHero.tsx
index bd49cd8..a34c802 100644
--- a/components/sections/home/HomeHero.tsx
+++ b/components/sections/home/HomeHero.tsx
@@ -110,48 +110,8 @@ export function HomeHero({
             sizes="(max-width: 960px) calc(100vw - 40px), 600px"
             preload
           />
-          <HeroCard className="hp-c1" tone="ok" card={dict.cards[0]} />
-          <HeroCard className="hp-c2" tone="bad" card={dict.cards[1]} />
-          <HeroCard className="hp-c3" tone="pur" card={dict.cards[2]} />
         </figure>
       </div>
     </section>
   );
 }
-
-function HeroCard({
-  className,
-  tone,
-  card,
-}: {
-  className: string;
-  tone: "ok" | "bad" | "pur";
-  card: { title: string; body: string };
-}) {
-  return (
-    <div className={`hp-card ${className}`}>
-      <span className={`hp-ic ${tone}`} aria-hidden="true">
-        {tone === "bad" ? (
-          "!"
-        ) : (
-          <svg
-            width={tone === "ok" ? 16 : 14}
-            height={tone === "ok" ? 16 : 14}
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="3"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M5 12l5 5 9-10" />
-          </svg>
-        )}
-      </span>
-      <span>
-        <b>{card.title}</b>
-        <em>{card.body}</em>
-      </span>
-    </div>
-  );
-}