diff --git a/frontend/e2e/landing-drag-field.spec.ts b/frontend/e2e/landing-drag-field.spec.ts
new file mode 100644
index 00000000..c0db5c7b
--- /dev/null
+++ b/frontend/e2e/landing-drag-field.spec.ts
@@ -0,0 +1,383 @@
+/**
+ * The landing page's draggable course clusters must read as part of the page.
+ *
+ * Promoted from a real regression: the clusters were a layer floating over the
+ * site rather than in it. Four symptoms, all pinned here because unit tests
+ * in jsdom can only assert the geometry the fixture itself supplies — whether
+ * a real browser's layout, sticky positioning and compositor agree is only
+ * answerable here.
+ *
+ *   1. a cluster inside a pinned act drifted up to 150px against the scroll;
+ *   2. the sim kept integrating while the page scrolled, so every node
+ *      wandered 20-50px of its own accord under a moving page;
+ *   3. nodes were clamped to their svg's viewBox, walling the drag ~900px
+ *      sideways and ~1600px up/down of the cluster's home;
+ *   4. the field's sticky box was a different height from its act's stage, so
+ *      it released a full viewport later — 882px of the copy scrolling away
+ *      while the clusters stayed welded to the top of the screen. That one
+ *      survived the first three fixes and every test written for them,
+ *      because they all measured a cluster against its own field rather than
+ *      against the page.
+ *
+ * Public surface: no auth, no DB. `test` comes from @playwright/test rather
+ * than support/fixtures precisely because there is no row to reset — the
+ * fixtures' per-test TRUNCATE would be pure cost here. The storageState the
+ * project config injects is dropped for the same reason: this is what a
+ * signed-out visitor sees.
+ *
+ * The field is hidden below 1024px by a media query in globals.css, so every
+ * test here pins a desktop viewport.
+ */
+import { expect, test, type Page } from "@playwright/test";
+
+test.use({ storageState: { cookies: [], origins: [] }, viewport: { width: 1440, height: 900 } });
+
+/**
+ * The envelope a placed node's breathing stays inside — `PLACED_SWAY` is a
+ * third of the free amplitude. Wide enough for the sway, far short of the
+ * distance that would mean it had wandered off the spot it was left on.
+ */
+const SWAY_PX = 12;
+
+/** Where a ring sits on screen, and what the page is doing underneath it. */
+interface Probe {
+  x: number;
+  y: number;
+  scrollY: number;
+}
+
+/** Settle the landing: the intro overlay, the hero cascade, and the first
+ *  frames of the sim all have to be behind us before anything is measured. */
+async function openLanding(page: Page): Promise<number> {
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await expect(page.locator("[data-dragnode]").first()).toBeAttached({ timeout: 15_000 });
+  await page.waitForTimeout(2_500);
+  return page.evaluate(() => document.documentElement.scrollHeight);
+}
+
+/**
+ * The cluster the drag journeys use: id 4, in the static `faq` section.
+ *
+ * Named rather than discovered. Picking "whatever ring is on screen" looks
+ * more robust and is the opposite: the idle breathing drift moves nodes
+ * ~20px, which is enough to change which of them clears a visibility filter,
+ * so the journey grabs a different node from run to run and fails for reasons
+ * that have nothing to do with the code.
+ *
+ * `faq` specifically, because these journeys need room on all four sides.
+ * The `cta` clusters sit ~120px above the end of the document, so there is
+ * nothing left to autoscroll into and a 300px scroll assertion cannot be met.
+ */
+const CLUSTER = "4";
+/** A satellite, not the course puck: the link spring pulls hardest on these. */
+const SATELLITE = 1;
+
+/** Scroll the named cluster to a fixed place in the viewport. */
+async function centreCluster(page: Page, id = CLUSTER): Promise<void> {
+  const found = await page.evaluate((cid) => {
+    const cluster = document.querySelector(`[data-dragnode="${cid}"]`);
+    if (!cluster) return false;
+    window.scrollBy(0, cluster.getBoundingClientRect().top - 380);
+    return true;
+  }, id);
+  expect(found, `cluster ${id} should exist`).toBe(true);
+  await page.waitForTimeout(700);
+}
+
+/**
+ * Tag one ring of the named cluster and return its centre.
+ *
+ * Preference order starting at `index`, but only a ring that HIT-TESTS TO
+ * ITSELF is taken. The rings of a cluster sit within a few px of each other
+ * and the later-painted one wins: tagging ring 1 while the pointer actually
+ * grabs ring 3 produces a test that watches the wrong node get towed along by
+ * the link force, and reads that as the drag failing.
+ */
+async function ringOf(page: Page, index = SATELLITE, id = CLUSTER): Promise<Probe> {
+  const found = await page.evaluate(({ cid, i }) => {
+    const rings = Array.from(document.querySelectorAll(`[data-dragnode="${cid}"] [data-sim]`));
+    const order = [rings[i], ...rings].filter(Boolean);
+    for (const ring of order) {
+      const b = ring.getBoundingClientRect();
+      const x = b.left + b.width / 2;
+      const y = b.top + b.height / 2;
+      if (document.elementFromPoint(x, y) !== ring) continue;
+      ring.setAttribute("data-e2e-probe", "1");
+      return { x, y, scrollY: window.scrollY };
+    }
+    return null;
+  }, { cid: id, i: index });
+  expect(found, `cluster ${id} should expose a grabbable ring`).not.toBeNull();
+  expect(found!.y, "the ring should be well inside the viewport").toBeGreaterThan(120);
+  expect(found!.y).toBeLessThan(780);
+  return found!;
+}
+
+async function probe(page: Page): Promise<Probe> {
+  return page.evaluate(() => {
+    const b = document.querySelector("[data-e2e-probe]")!.getBoundingClientRect();
+    return { x: b.left + b.width / 2, y: b.top + b.height / 2, scrollY: window.scrollY };
+  });
+}
+
+test("nodes do not move of their own accord while the page scrolls", async ({ page }) => {
+  const height = await openLanding(page);
+
+  // Sample every frame, in the page, so the measurement never depends on
+  // round-trip timing. Each ring is measured against ITS OWN cluster, which
+  // separates "the sim moved it" from "the section it belongs to is sticky".
+  for (const fraction of [0.5, 0.8, 0.9]) {
+    await page.evaluate((y) => window.scrollTo(0, y), Math.round(height * fraction));
+    await page.waitForTimeout(700);
+
+    await page.evaluate(() => {
+      (window as never as { __frames: unknown[] }).__frames = [];
+      const w = window as never as { __frames: unknown[]; __raf: number };
+      const tick = () => {
+        const rings: Array<{ k: string; dx: number; dy: number }> = [];
+        document.querySelectorAll("[data-dragnode]").forEach((cluster) => {
+          const cb = cluster.getBoundingClientRect();
+          cluster.querySelectorAll("[data-sim]").forEach((r, i) => {
+            const b = r.getBoundingClientRect();
+            if (b.top > -600 && b.top < window.innerHeight + 600) {
+              rings.push({
+                k: `${cluster.getAttribute("data-dragnode")}:${i}`,
+                dx: b.left - cb.left, dy: b.top - cb.top,
+              });
+            }
+          });
+        });
+        w.__frames.push({ y: window.scrollY, rings });
+        w.__raf = requestAnimationFrame(tick);
+      };
+      w.__raf = requestAnimationFrame(tick);
+    });
+
+    for (let i = 0; i < 30; i++) await page.mouse.wheel(0, 40);
+
+    const result = await page.evaluate(() => {
+      const w = window as never as {
+        __frames: Array<{ y: number; rings: Array<{ k: string; dx: number; dy: number }> }>;
+        __raf: number;
+      };
+      cancelAnimationFrame(w.__raf);
+      // Path length, not frame-to-frame delta. The wander this catches is
+      // ~0.15px per frame and only becomes visible by accumulating -- a
+      // per-frame threshold loose enough to survive one noisy sample is
+      // loose enough to miss the whole regression.
+      const travelled = new Map<string, number>();
+      let compared = 0;
+      for (let i = 1; i < w.__frames.length; i++) {
+        if (w.__frames[i].y === w.__frames[i - 1].y) continue; // page was still
+        const now = Object.fromEntries(w.__frames[i].rings.map((r) => [r.k, r]));
+        for (const before of w.__frames[i - 1].rings) {
+          const after = now[before.k];
+          if (!after) continue;
+          const step = Math.hypot(after.dx - before.dx, after.dy - before.dy);
+          travelled.set(before.k, (travelled.get(before.k) ?? 0) + step);
+          compared++;
+        }
+      }
+      return {
+        worst: Math.max(0, ...travelled.values()),
+        compared,
+        scrolled: w.__frames.at(-1)!.y - w.__frames[0].y,
+      };
+    });
+
+    expect(result.scrolled, "the page should actually have scrolled").toBeGreaterThan(200);
+    expect(result.compared, "rings should have been on screen to compare").toBeGreaterThan(20);
+    // Welded: a node's offset within its own cluster is frozen while the page
+    // moves, so it travels nowhere at all. This was tens of px before the fix.
+    expect(result.worst).toBeLessThan(2);
+  }
+});
+
+test("a cluster holds still against its act, through the pin and the release", async ({ page }) => {
+  await openLanding(page);
+
+  // act-tutor is a 340vh section holding one sticky stage; clusters 2 and 3
+  // live in it. Walk the whole act, including the point where the stage stops
+  // sticking -- which is exactly where the field used to part company with
+  // the copy, having been given a sticky box of a different height.
+  const act = await page.evaluate(() => {
+    const section = document.getElementById("act-tutor")!;
+    return { top: section.offsetTop, height: section.offsetHeight };
+  });
+
+  await page.evaluate((y) => window.scrollTo(0, y), act.top - 200);
+  await page.waitForTimeout(700);
+
+  await page.evaluate(() => {
+    const w = window as never as { __act: unknown[]; __raf: number };
+    w.__act = [];
+    const section = document.getElementById("act-tutor")!;
+    // The stage is the sticky child carrying the COPY, identified by the act's
+    // heading. Identifying it as "the sticky child without clusters in it"
+    // silently resolves to the drag field once the sim has re-homed the
+    // clusters into its overlay — which turns this whole journey into a
+    // comparison of the cluster against its own anchor, i.e. zero by
+    // construction, passing against the very markup it exists to catch.
+    const stage = Array.from(section.children).find(
+      (el) => getComputedStyle(el).position === "sticky"
+        && !el.classList.contains("drag-field")
+        && !el.querySelector(".drag-field")
+        && el.querySelector("h2"),
+    );
+    if (!stage) throw new Error("act-tutor has no sticky stage carrying an h2");
+    const tick = () => {
+      const rows: Array<{ k: string; d: number }> = [];
+      for (const id of ["2", "3"]) {
+        const cluster = document.querySelector(`[data-dragnode="${id}"]`);
+        if (!cluster) continue;
+        const b = cluster.getBoundingClientRect();
+        if (b.top < -2500 || b.top > window.innerHeight + 2500) continue;
+        rows.push({ k: id, d: b.top - stage.getBoundingClientRect().top });
+      }
+      w.__act.push({ y: window.scrollY, rows });
+      w.__raf = requestAnimationFrame(tick);
+    };
+    w.__raf = requestAnimationFrame(tick);
+  });
+
+  // Enough ticks to cross the whole act and come out the far side.
+  const ticks = Math.ceil((act.height + 600) / 60);
+  for (let i = 0; i < ticks; i++) await page.mouse.wheel(0, 60);
+  await page.waitForTimeout(200);
+
+  const result = await page.evaluate(() => {
+    const w = window as never as {
+      __act: Array<{ y: number; rows: Array<{ k: string; d: number }> }>;
+      __raf: number;
+    };
+    cancelAnimationFrame(w.__raf);
+    const seen = new Map<string, number[]>();
+    for (const frame of w.__act) {
+      for (const row of frame.rows) {
+        if (!seen.has(row.k)) seen.set(row.k, []);
+        seen.get(row.k)!.push(row.d);
+      }
+    }
+    const spreads = [...seen.entries()].map(([k, ds]) => ({
+      k, samples: ds.length, spread: Math.max(...ds) - Math.min(...ds),
+    }));
+    return {
+      spreads,
+      scrolled: w.__act.at(-1)!.y - w.__act[0].y,
+    };
+  });
+
+  expect(result.scrolled, "should have crossed the whole act").toBeGreaterThan(act.height * 0.7);
+  expect(result.spreads.length, "both act-tutor clusters should have been seen").toBe(2);
+  for (const { k, samples, spread } of result.spreads) {
+    expect(samples, `cluster ${k} should have been sampled`).toBeGreaterThan(30);
+    // Welded to the act: the cluster's offset from the stage never changes,
+    // whether the stage is pinned or scrolling away. This was 882px.
+    expect(spread, `cluster ${k} drifted from its act's stage`).toBeLessThan(2);
+  }
+});
+
+test("a held node reaches the far edge of the viewport", async ({ page }) => {
+  await openLanding(page);
+  await centreCluster(page);
+  const ring = await ringOf(page, 0);
+
+  // Toward whichever edge is further away. Clusters sit near one margin or
+  // the other, so a fixed direction measures the short trip half the time.
+  const width = page.viewportSize()!.width;
+  const target = ring.x < width / 2 ? width - 6 : 6;
+
+  await page.mouse.move(ring.x, ring.y);
+  await page.mouse.down();
+  await page.mouse.move(target, ring.y, { steps: 30 });
+  await page.waitForTimeout(200);
+
+  const at = await probe(page);
+  // The old viewBox clamp walled this ~900px from the cluster's home, well
+  // short of the far edge on a 1440px viewport.
+  expect(Math.abs(ring.x - at.x)).toBeGreaterThan(1000);
+  expect(Math.abs(at.x - target)).toBeLessThan(60);
+  await page.mouse.up();
+});
+
+test("a held node can be carried down the document and back up", async ({ page }) => {
+  await openLanding(page);
+  await centreCluster(page);
+  const ring = await ringOf(page, 0);
+  await page.mouse.move(ring.x, ring.y);
+  await page.mouse.down();
+
+  // Held in the bottom band, the page scrolls under the node — which is what
+  // lets it leave its own section at all.
+  await page.mouse.move(ring.x, 885);
+  await page.waitForTimeout(1_500);
+  const down = await probe(page);
+  expect(down.scrollY - ring.scrollY).toBeGreaterThan(300);
+  expect(down.y, "still under the cursor, not lost off screen").toBeGreaterThan(700);
+
+  await page.mouse.move(ring.x, 15);
+  await page.waitForTimeout(1_500);
+  const up = await probe(page);
+  expect(up.scrollY).toBeLessThan(down.scrollY - 300);
+  expect(up.y).toBeLessThan(200);
+
+  // Parked away from the bands, the page must sit still.
+  await page.mouse.move(ring.x, 450);
+  const parked = await probe(page);
+  await page.waitForTimeout(900);
+  expect((await probe(page)).scrollY).toBe(parked.scrollY);
+  await page.mouse.up();
+});
+
+test("a dropped node stays where it was put, and scrolls with the page", async ({ page }) => {
+  await openLanding(page);
+  await centreCluster(page);
+  const ring = await ringOf(page);
+  await page.mouse.move(ring.x, ring.y);
+  await page.mouse.down();
+  await page.mouse.move(400, 300, { steps: 20 });
+  await page.mouse.up();
+
+  const dropped = await probe(page);
+  await page.waitForTimeout(4_000);
+  const settled = await probe(page);
+  // Inside its sway, not frozen on the spot: a placed node keeps a third of
+  // the breathing drift, so it lives where it was left rather than dying
+  // there. SWAY_PX is the envelope that buys.
+  expect(Math.hypot(settled.x - dropped.x, settled.y - dropped.y)).toBeLessThan(SWAY_PX);
+
+  // Placed, not detached: it belongs to the page and moves with it.
+  await page.evaluate(() => window.scrollBy(0, 300));
+  await page.waitForTimeout(600);
+  const scrolled = await probe(page);
+  expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - 300)))
+    .toBeLessThan(SWAY_PX);
+});
+
+test("a short drag stays put instead of crawling home", async ({ page }) => {
+  // There is no rejoin radius any more. A drop within 70px of a node's home
+  // used to re-float it, so most drags — which are short — crept back to
+  // where they started: 14px of travel still climbing 4s after a 40px drag,
+  // against 0px for a 90px one. Every drop places the node now.
+  await openLanding(page);
+  await centreCluster(page);
+  const ring = await ringOf(page);
+
+  await page.mouse.move(ring.x, ring.y);
+  await page.mouse.down();
+  await page.mouse.move(ring.x + 34, ring.y - 22, { steps: 15 });
+  await page.mouse.up();
+  await page.waitForTimeout(500);
+
+  const dropped = await probe(page);
+  // Short enough that the old radius would have reeled it in, and it moved.
+  const moved = Math.hypot(dropped.x - ring.x, dropped.y - ring.y);
+  expect(moved).toBeLessThan(70);
+  expect(moved).toBeGreaterThan(2);
+
+  // Past a full breathing period: still there, still breathing. Dead still
+  // was the other bug — a dropped node used to stop moving entirely.
+  await page.waitForTimeout(5_000);
+  const later = await probe(page);
+  expect(Math.hypot(later.x - dropped.x, later.y - dropped.y)).toBeLessThan(SWAY_PX);
+});
diff --git a/frontend/e2e/landing-graph.spec.ts b/frontend/e2e/landing-graph.spec.ts
deleted file mode 100644
index 53e33cd4..00000000
--- a/frontend/e2e/landing-graph.spec.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Journey — the landing page's interactive knowledge graph (#344).
- *
- * The graph is the page's whole argument, so this pins that it renders, that
- * picking a course swaps it, and that engaging with it recedes the
- * instructional copy. Test mode (NEXT_PUBLIC_TEST_MODE=1, baked into the
- * Playwright profile build) parks the helical assembly animation, so every
- * assertion below runs against the fully laid-out frame — no waiting on
- * requestAnimationFrame.
- *
- * Selectors: testids from the component
- * (src/components/marketing/graph/KnowledgeGraphDemo.tsx) — `landing-graph`
- * for the section, `landing-graph-chip-<courseId>` for the course picker,
- * `landing-graph-node-<nodeId>` for graph nodes, `landing-graph-copy` for the
- * instructional heading block, `landing-graph-blurb` for the hover blurb.
- * Course/node ids and the `ma-vectors` blurb text are seeded fixture data
- * (src/components/marketing/graph/courseGraphs.ts) — `cs210` is the default
- * (first) course, `ma242` the second. `AssemblingGraph` is keyed by
- * `graph.id`, so switching courses remounts it and the previous course's
- * node elements leave the DOM entirely — asserted below via `toHaveCount(0)`
- * rather than a visibility check.
- */
-import { expect, test } from './support/fixtures';
-
-test('landing graph renders, swaps by course, and fades its copy on engagement', async ({ page }) => {
-  await page.goto('/');
-
-  const section = page.getByTestId('landing-graph');
-  await section.scrollIntoViewIfNeeded();
-  await expect(section).toBeVisible();
-
-  // Parked frame: the first course's root node is laid out and visible.
-  await expect(page.getByTestId('landing-graph-node-cs-root')).toBeVisible();
-
-  // Picking another course swaps the graph.
-  await page.getByTestId('landing-graph-chip-ma242').click();
-  await expect(page.getByTestId('landing-graph-node-ma-root')).toBeVisible();
-  await expect(page.getByTestId('landing-graph-node-cs-root')).toHaveCount(0);
-
-  // Engaging recedes the copy.
-  const copy = page.getByTestId('landing-graph-copy');
-  await expect(copy).toHaveAttribute('data-engaged', 'false');
-  await page.getByTestId('landing-graph-node-ma-vectors').hover();
-  await expect(copy).toHaveAttribute('data-engaged', 'true');
-  await expect(page.getByTestId('landing-graph-blurb')).toContainText('Span, basis');
-});
-
-/**
- * #344 review #3 — the demo shipped with a single 900×560 viewBox at every
- * width. Playwright's default 1280×720 viewport cannot see the consequence,
- * which is why the journey above passed: at a 390px phone the section's content
- * box is ~332px, so the SVG rendered at a uniform 0.38 scale — 4.6 CSS px
- * concept labels and a 213px-tall smudge, on the device most marketing traffic
- * arrives on. The component now swaps to a phone view below the mobile
- * breakpoint, whose frame is fitted to its content (`-32 40 429 230`, #344
- * visual 3): 0.77 scale ⇒ 12.4 CSS px labels, 23.2px dots, 178px tall. The
- * first two clear the bars below by 1.4px and 3.2px. The bracket is still
- * two-sided — a bigger ring keeps labels off their neighbours, a smaller frame
- * keeps the type legible — but the upward fan put its two deep arms 90° apart
- * and symmetric about the vertical, which widened the window: the first two
- * margins were 0.2px and 0.9px under the downward tree. See `MOBILE_VIEW` in
- * `layout.ts`.
- *
- * THE HEIGHT BAR MOVED 260 → 170, and it is not a legibility bar being lowered.
- * `viewBox` is fitted to the entry SWEEP, not to the settled drawing, or the
- * assembly gets clipped mid-flight (#344 review #4). While `helixEntry` turned
- * 1.5 times, that sweep was nearly a disc and the frame nearly square, so this
- * phone frame was 273px tall around a drawing 156px tall — 118px of empty paper
- * that the ">260px" bar was, in effect, asserting. The entry is a quarter turn
- * now: the frame is 178px, the DRAWING inside it is 161px — bigger than before —
- * and the honest version of this bar (the drawing's rendered height, not the
- * frame's) lives in `layout.test.ts`, where the settled extents can be measured
- * exactly rather than inferred from a bounding rect.
- *
- * Asserting in CSS pixels — what a visitor's eye actually gets — rather than on
- * the viewBox attribute, so a different fix that reaches the same legibility
- * still passes.
- */
-test('the graph stays legible at a 390px phone viewport (#344)', async ({ page }) => {
-  await page.setViewportSize({ width: 390, height: 844 });
-  await page.goto('/');
-
-  const section = page.getByTestId('landing-graph');
-  await section.scrollIntoViewIfNeeded();
-  await expect(page.getByTestId('landing-graph-node-cs-root')).toBeVisible();
-
-  const metrics = await page.getByTestId('landing-graph-svg').evaluate((el) => {
-    const svg = el as unknown as SVGSVGElement;
-    const rect = svg.getBoundingClientRect();
-    const label = svg.querySelector('text')!;
-    // A non-root node — the small dots are what actually got unreadable.
-    const dot = svg.querySelector<SVGCircleElement>(
-      '[data-testid="landing-graph-node-cs-arrays"] circle',
-    )!;
-    // The SVG is width:100%, so every user unit renders at this scale.
-    const scale = rect.width / svg.viewBox.baseVal.width;
-    return {
-      heightPx: rect.height,
-      labelPx: parseFloat(getComputedStyle(label).fontSize) * scale,
-      dotDiameterPx: 2 * dot.r.baseVal.value * scale,
-    };
-  });
-
-  expect(metrics.labelPx, 'concept labels in CSS px').toBeGreaterThanOrEqual(11);
-  expect(metrics.dotDiameterPx, 'non-root node diameter in CSS px').toBeGreaterThanOrEqual(20);
-  expect(metrics.heightPx, 'rendered graph height in CSS px').toBeGreaterThan(170);
-});
-
-test('the deleted scroll section is gone and the CTA still routes', async ({ page }) => {
-  await page.goto('/');
-  await expect(page.locator('#how-it-works')).toHaveCount(0);
-  await expect(page.locator('#features')).toHaveCount(0);
-  await expect(page.getByTestId('signin-trigger')).toBeVisible();
-});
diff --git a/frontend/e2e/public-seo.spec.ts b/frontend/e2e/public-seo.spec.ts
index 64afed5d..3d5cf59f 100644
--- a/frontend/e2e/public-seo.spec.ts
+++ b/frontend/e2e/public-seo.spec.ts
@@ -57,34 +57,44 @@ test("landing page ships social cards and a canonical URL (#169)", async ({ requ
 });
 
 /**
- * The actual SSR guard (#344 review #5).
+ * The actual SSR guard (#344 review #5, retargeted for the v5 landing).
  *
  * The assertions above were previously described as "the guard on not breaking
  * SSR", but they aren't: og:image / twitter:card / canonical are emitted by the
- * Metadata API whether or not any component server-renders. The landing page
- * mounts `KnowledgeGraphDemo` through `next/dynamic` with SSR left ON, and
- * `ssr: false` is the first thing anyone will reach for the moment a hydration
- * warning appears there — it would leave every other spec green while silently
- * dropping the section's copy out of the crawled HTML, which is the entire
- * reason that component carries the `usePrefersReducedMotion` machinery.
- * `landing-graph.spec.ts` runs post-hydration and cannot see the difference.
+ * Metadata API whether or not any component server-renders.
  *
- * So assert on the RAW response body, before any JS runs. With `ssr: false`
- * the dynamic import renders only its loading placeholder (an empty
- * `<section id="knowledge-graph">`), and every assertion below fails.
+ * This test originally guarded `KnowledgeGraphDemo`, mounted through
+ * `next/dynamic`, against someone reaching for `ssr: false` the moment a
+ * hydration warning appeared — which would leave every other spec green while
+ * silently dropping the section's copy out of the crawled HTML. The v5 landing
+ * replaced that component, but the failure mode is unchanged and is in fact
+ * sharper: v5 is a client component whose visuals are canvas and WebGL, so
+ * essentially all of its crawlable payload is the prose asserted below. Wrap
+ * the page (or the hero) in a `ssr: false` dynamic import and this is the only
+ * spec that notices.
+ *
+ * Assert on the RAW response body, before any JS runs. Note what is NOT
+ * asserted: the wordmark and tagline are empty on the server because they
+ * scramble in on the client, so `aria-label` on the h1 carries the accessible
+ * name and is checked here in its place.
  */
-test("the knowledge-graph section is in the server-rendered HTML (#344)", async ({ request }) => {
+test("the landing page's copy is in the server-rendered HTML (#344)", async ({ request }) => {
   const res = await request.get("/");
   expect(res.status()).toBe(200);
   const html = await res.text();
 
-  expect(html, "graph section markup must be server-rendered").toContain(
-    'data-testid="landing-graph"',
-  );
-  expect(html, "the section's copy must be crawlable").toContain(
-    "Pick a course. Watch it grow.",
+  // the wordmark scrambles in client-side, so only its accessible name is server-rendered
+  expect(html, "the wordmark's accessible name must survive SSR").toContain('aria-label="Sapling"');
+
+  expect(html, "the lede is the page's primary SEO payload").toContain(
+    "Sapling reads your whole course",
   );
-  // Concept labels are the section's actual SEO payload.
-  expect(html).toContain('data-testid="landing-graph-node-cs-root"');
-  expect(html).toContain("Recursion");
+  expect(html).toContain("It works from your own coursework, not the open web");
+
+  // the three key columns state what the product does
+  expect(html).toContain("Ingest");
+  expect(html).toContain("Recall");
+  expect(html).toContain("Every concept linked to the ones it rests on");
+
+  expect(html, "the beta offer must be crawlable").toContain("Free through beta.");
 });
diff --git a/frontend/eslint-suppressions.json b/frontend/eslint-suppressions.json
index b2c77bdc..7ec1fbc6 100644
--- a/frontend/eslint-suppressions.json
+++ b/frontend/eslint-suppressions.json
@@ -1,15 +1,4 @@
 {
-  "src/app/(public)/page.tsx": {
-    "@next/next/no-html-link-for-pages": {
-      "count": 1
-    },
-    "prefer-const": {
-      "count": 2
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "src/components/CustomSelect.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
@@ -165,4 +154,4 @@
       "count": 1
     }
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/public/journal-ai-homework.png b/frontend/public/journal-ai-homework.png
new file mode 100644
index 00000000..a4cc939a
Binary files /dev/null and b/frontend/public/journal-ai-homework.png differ
diff --git a/frontend/public/journal-founding.png b/frontend/public/journal-founding.png
new file mode 100644
index 00000000..de503017
Binary files /dev/null and b/frontend/public/journal-founding.png differ
diff --git a/frontend/public/kofi-symbol.png b/frontend/public/kofi-symbol.png
new file mode 100644
index 00000000..98eb3ec9
Binary files /dev/null and b/frontend/public/kofi-symbol.png differ
diff --git a/frontend/src/app/(public)/about/page.tsx b/frontend/src/app/(public)/about/page.tsx
index 5bd299cf..38d882b9 100644
--- a/frontend/src/app/(public)/about/page.tsx
+++ b/frontend/src/app/(public)/about/page.tsx
@@ -1,319 +1,108 @@
-import type { Metadata } from "next";
-import Link from "next/link";
+import type { Metadata } from 'next';
+import { CompanionShell } from '@/components/companion/CompanionShell';
+import { ABOUT_AWARDS, ABOUT_DIFFERENTIATORS } from '@/lib/landing/companionContent';
+
+/**
+ * About Sapling.
+ *
+ * Ported from `About Sapling.dc.html`. This page predates the design import
+ * and the import was built from it — its script header reads "copy taken
+ * verbatim from frontend/src/app/(public)/about/page.tsx" — so the prose here
+ * is unchanged. What the port replaces is the chrome: the page used to carry
+ * its own 52px bar (maxWidth 1280, hard border-bottom, a lone "Back to home"
+ * link) and its own footer, neither of which matched any other public page.
+ *
+ * Unlike its siblings this page has no eyebrow above the h1; the source goes
+ * straight to the title.
+ */
 
 export const metadata: Metadata = {
-  title: "About",
+  title: 'About',
   description:
-    "The story behind Sapling: a student-built AI study partner from Boston University, recognized for reimagining how students learn through conversation and a living knowledge graph.",
-  alternates: { canonical: "/about" },
+    'The story behind Sapling: a student-built AI study partner from Boston University, recognized for reimagining how students learn through conversation and a living knowledge graph.',
+  alternates: { canonical: '/about' },
 };
 
-const FOOTER_LINKS = [
-  { label: "Home", href: "/" },
-  { label: "About", href: "/about" },
-  { label: "Careers", href: "/careers" },
-  { label: "Terms of Service", href: "/terms" },
-  { label: "Privacy Policy", href: "/privacy" },
-];
-
-const differentiators = [
-  "Your knowledge graph is yours. It updates in real time based on your actual performance, not just what you've clicked through.",
-  "Three distinct teaching modes mean you're never locked into one way of learning.",
-  "Study rooms let you learn alongside classmates and see how your mastery compares, anonymously and collaboratively.",
-  "Everything from syllabus tracking to exam study guides is powered by Gemini, so the busywork of getting organized is handled for you.",
-];
+const MONO = "'JetBrains Mono',monospace";
+const SERIF = "'Spectral',Georgia,serif";
+const DISPLAY = "'Playfair Display',Georgia,serif";
 
-const awards = [
-  {
-    title: "Best AI Tutor in Education",
-    org: "Boston University Civic Hacks 2026 · BU Spark! & Wheelock College of Education",
-    body: "Recognized among competing teams at BU's annual civic hackathon for building the most impactful AI-driven learning experience. Sapling was awarded for its approach to personalized, student-centered tutoring, bridging the gap between artificial intelligence and meaningful education.",
-  },
-  {
-    title: "Code & Tell Winner",
-    org: "BU Spark!",
-    body: "Selected by BU Spark! as a standout project at their Code & Tell showcase, where student builders present real-world applications to faculty, mentors, and industry judges. Sapling was chosen for its technical depth and its vision for the future of how students learn.",
-  },
-];
+/** Body copy shares one type ramp; only the stagger delay changes. */
+const PROSE: React.CSSProperties = {
+  margin: 0, fontFamily: SERIF, fontWeight: 400, fontSize: 16,
+  lineHeight: 1.6, color: '#3f3b31',
+};
 
 export default function AboutPage() {
   return (
-    <div
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        background: "var(--bg)",
-        color: "var(--text)",
-      }}
-    >
-      <header
-        style={{
-          borderBottom: "1px solid var(--border)",
-          background: "var(--bg-topbar)",
-          position: "sticky",
-          top: 0,
-          zIndex: 50,
-        }}
-      >
-        <div
-          style={{
-            maxWidth: 1280,
-            margin: "0 auto",
-            padding: "0 24px",
-            height: 52,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}
-        >
-          <Link
-            href="/"
-            style={{ display: "flex", alignItems: "center", gap: 6, textDecoration: "none" }}
-          >
-            <img
-              src="/sapling-icon.svg"
-              alt="Sapling"
-              style={{ width: 26, height: 26, flexShrink: 0, position: "relative", top: -2 }}
-            />
-            <span
-              style={{
-                fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif",
-                fontWeight: 700,
-                fontSize: 20,
-                color: "var(--brand-forest)",
-                letterSpacing: "-0.02em",
-                lineHeight: 1.1,
-              }}
-            >
-              Sapling
-            </span>
-          </Link>
-          <Link
-            href="/"
-            style={{ fontSize: 13, color: "var(--text-muted)", textDecoration: "none" }}
-          >
-            ← Back to home
-          </Link>
-        </div>
-      </header>
-
-      <div
-        style={{
-          flex: 1,
-          width: "100%",
-          maxWidth: 880,
-          margin: "0 auto",
-          padding: "64px 32px",
-        }}
-      >
-        <h1
-          className="h-serif fade-up anim-d1"
-          style={{ fontSize: 48, marginBottom: 32, color: "var(--text)" }}
-        >
+    <CompanionShell current="/about">
+      <div style={{ flex: 1, minWidth: 0, width: '100%', maxWidth: 880, margin: '0 auto', padding: '64px 32px', boxSizing: 'border-box' }}>
+        <h1 style={{ margin: '0 0 32px', fontFamily: DISPLAY, fontWeight: 500, fontSize: 48, lineHeight: 1.15, letterSpacing: '-0.015em', color: '#1a1814', animation: 'fadeUp 700ms ease both' }}>
           About Sapling
         </h1>
 
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: 24,
-          }}
-        >
-          <p
-            className="body-serif fade-up anim-d2"
-            style={{ fontSize: 16, color: "var(--text-dim)" }}
-          >
-            <strong style={{ color: "var(--text)", fontWeight: 600 }}>Sapling</strong>{" "}
-            is an AI-powered study companion built by students, for students. We believe that
-            learning shouldn&apos;t be passive. It should adapt to you, challenge you, and show you
-            exactly where you stand.
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+          <p style={{ ...PROSE, animation: 'fadeUp 700ms ease 80ms both' }}>
+            <strong style={{ color: '#1a1814', fontWeight: 600 }}>Sapling</strong> is an
+            AI-powered study companion built by students, for students. We believe that learning
+            shouldn&#8217;t be passive. It should adapt to you, challenge you, and show you exactly
+            where you stand.
           </p>
 
-          <p
-            className="body-serif fade-up anim-d3"
-            style={{ fontSize: 16, color: "var(--text-dim)" }}
-          >
+          <p style={{ ...PROSE, animation: 'fadeUp 700ms ease 140ms both' }}>
             At its core, Sapling maps your understanding as a live knowledge graph that grows with
             every session, quiz, and document you interact with. Paired with an AI tutor that can
-            reason with you Socratically, explain concepts directly, or flip the table and have
-            you teach back, Sapling meets you wherever you are in your learning journey.
+            reason with you Socratically, explain concepts directly, or flip the table and have you
+            teach back, Sapling meets you wherever you are in your learning journey.
           </p>
 
-          <p
-            className="body-serif fade-up anim-d4"
-            style={{ fontSize: 16, color: "var(--text-dim)" }}
-          >
+          <p style={{ ...PROSE, animation: 'fadeUp 700ms ease 200ms both' }}>
             Sapling was born out of a hackathon and built by a team of four students who were
-            frustrated with static study tools that don&apos;t actually know what you know. We wanted
-            something that feels less like a flashcard app and more like a study partner who&apos;s
-            always prepared.
+            frustrated with static study tools that don&#8217;t actually know what you know. We
+            wanted something that feels less like a flashcard app and more like a study partner
+            who&#8217;s always prepared.
           </p>
 
-          <div className="fade-up anim-d5">
-            <p
-              style={{
-                fontFamily: "var(--font-sans)",
-                fontSize: 15,
-                fontWeight: 600,
-                color: "var(--text)",
-                marginBottom: 12,
-              }}
-            >
+          <div style={{ animation: 'fadeUp 700ms ease 260ms both' }}>
+            <p style={{ margin: '0 0 12px', fontSize: 15, fontWeight: 600, color: '#1a1814' }}>
               What makes Sapling different:
             </p>
-            <ul
-              style={{
-                listStyle: "none",
-                padding: 0,
-                display: "flex",
-                flexDirection: "column",
-                gap: 8,
-              }}
-            >
-              {differentiators.map((item, i) => (
-                <li
-                  key={i}
-                  className="body-serif"
-                  style={{
-                    display: "flex",
-                    gap: 12,
-                    fontSize: 15,
-                    color: "var(--text-dim)",
-                  }}
-                >
-                  <span style={{ color: "var(--accent)", marginTop: 2 }}>•</span>
-                  <span>{item}</span>
+            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {ABOUT_DIFFERENTIATORS.map((d) => (
+                <li key={d} style={{ display: 'flex', gap: 12, fontFamily: SERIF, fontSize: 15, lineHeight: 1.6, color: '#3f3b31' }}>
+                  <span style={{ color: '#2D8F5C', marginTop: 2, flex: '0 0 auto' }}>&#8226;</span>
+                  <span>{d}</span>
                 </li>
               ))}
             </ul>
           </div>
 
-          <p
-            className="body-serif fade-up anim-d6"
-            style={{ fontSize: 16, color: "var(--text-dim)" }}
-          >
-            Sapling is actively developed and we&apos;re always building. If something&apos;s broken or
-            you have an idea, there&apos;s a feedback button in the navbar and we actually read those.
+          <p style={{ ...PROSE, animation: 'fadeUp 700ms ease 320ms both' }}>
+            Sapling is actively developed and we&#8217;re always building. If something&#8217;s
+            broken or you have an idea, there&#8217;s a feedback button in the navbar and we
+            actually read those.
           </p>
         </div>
 
         <div style={{ marginTop: 56 }}>
-          <p
-            className="label-micro fade-up anim-d7"
-            style={{ color: "var(--accent)", marginBottom: 24 }}
-          >
+          <p style={{ margin: '0 0 24px', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2D8F5C', animation: 'fadeUp 700ms ease 380ms both' }}>
             Recognition
           </p>
-          <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
-            {awards.map((award, i) => (
-              <div
-                key={award.title}
-                className="fade-up"
-                style={{ animationDelay: `${Math.min(560 + i * 80, 720)}ms` }}
-              >
-                <p
-                  style={{
-                    fontFamily: "var(--font-sans)",
-                    fontSize: 16,
-                    fontWeight: 600,
-                    color: "var(--text)",
-                  }}
-                >
-                  {award.title}
-                </p>
-                <p
-                  style={{
-                    fontFamily: "var(--font-sans)",
-                    fontSize: 12,
-                    fontWeight: 500,
-                    color: "var(--accent)",
-                    marginTop: 2,
-                  }}
-                >
-                  {award.org}
-                </p>
-                <p
-                  className="body-serif"
-                  style={{
-                    fontSize: 14,
-                    color: "var(--text-dim)",
-                    marginTop: 8,
-                  }}
-                >
-                  {award.body}
-                </p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+            {ABOUT_AWARDS.map((a) => (
+              <div key={a.title} style={{ animation: 'fadeUp 700ms ease both', animationDelay: a.delay }}>
+                <p style={{ margin: 0, fontSize: 16, fontWeight: 600, color: '#1a1814' }}>{a.title}</p>
+                <p style={{ margin: '2px 0 0', fontSize: 12, fontWeight: 500, color: '#2D8F5C' }}>{a.org}</p>
+                <p style={{ margin: '8px 0 0', fontFamily: SERIF, fontSize: 14, lineHeight: 1.6, color: '#3f3b31' }}>{a.body}</p>
               </div>
             ))}
           </div>
         </div>
 
-        <div
-          style={{
-            marginTop: 48,
-            paddingTop: 32,
-            borderTop: "1px solid var(--border)",
-            fontSize: 13,
-            color: "var(--text-muted)",
-          }}
-        >
-          Built by Andres Lopez, Jack He, Luke Cooper, and Jose Gael Cruz-Lopez © 2026
+        <div style={{ marginTop: 48, paddingTop: 32, borderTop: '1px solid rgba(42,39,31,0.10)', fontSize: 13, color: '#6f6857' }}>
+          Built by Andres Lopez, Jack He, Luke Cooper, and Jose Gael Cruz-Lopez &#169; 2026
         </div>
       </div>
-
-      <footer
-        style={{
-          borderTop: "1px solid var(--border)",
-          background: "var(--bg-subtle)",
-          padding: "48px 32px",
-        }}
-      >
-        <div
-          style={{
-            maxWidth: 1280,
-            margin: "0 auto",
-            display: "flex",
-            flexWrap: "wrap",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: 24,
-          }}
-        >
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-            <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 20, height: 20 }} />
-            <span style={{ fontSize: 14, color: "var(--text-muted)" }}>Sapling · © 2026</span>
-          </div>
-          <div style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
-            {FOOTER_LINKS.map(({ label, href }) => (
-              <Link
-                key={label}
-                href={href}
-                style={{
-                  fontSize: 14,
-                  color: "var(--text-muted)",
-                  textDecoration: "none",
-                }}
-              >
-                {label}
-              </Link>
-            ))}
-          </div>
-        </div>
-        <div
-          style={{
-            maxWidth: 1280,
-            margin: "32px auto 0",
-            paddingTop: 24,
-            borderTop: "1px solid var(--border)",
-            textAlign: "center",
-          }}
-        >
-          <p style={{ fontSize: 12, color: "var(--text-muted)" }}>
-            © 2026 Andres Lopez, Jack He, Luke Cooper, and Jose Gael Cruz-Lopez. All Rights Reserved.
-          </p>
-        </div>
-      </footer>
-    </div>
+    </CompanionShell>
   );
 }
diff --git a/frontend/src/app/(public)/faq/page.tsx b/frontend/src/app/(public)/faq/page.tsx
new file mode 100644
index 00000000..2fb1802b
--- /dev/null
+++ b/frontend/src/app/(public)/faq/page.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+/**
+ * FAQ.
+ *
+ * Ported from `FAQ.dc.html`. Three labelled groups of questions over a
+ * two-button call-out.
+ *
+ * Distinct from the landing page's FAQ section, which is one flat list. Only
+ * one question is open at a time and the index spans all three groups, so the
+ * counter is resolved up front — the source increments it inside its render
+ * loop, which in React mutates during render.
+ */
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { CompanionShell } from '@/components/companion/CompanionShell';
+import { FAQ_GROUPS } from '@/lib/landing/companionContent';
+
+const MONO = "'JetBrains Mono',monospace";
+const SERIF = "'Spectral',Georgia,serif";
+const DISPLAY = "'Playfair Display',Georgia,serif";
+
+/** Groups paired with a running index across ALL groups, computed once. */
+const INDEXED = (() => {
+  let n = -1;
+  return FAQ_GROUPS.map((g) => ({
+    label: g.label,
+    items: g.items.map((item) => ({ ...item, i: (n += 1) })),
+  }));
+})();
+
+export default function FaqPage() {
+  const [open, setOpen] = useState(0);
+
+  return (
+    <CompanionShell current="/faq">
+      <div style={{ flex: 1, minWidth: 0, width: '100%', maxWidth: 880, margin: '0 auto', padding: '64px 32px', boxSizing: 'border-box' }}>
+        <span style={{ display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6f6857', animation: 'fadeUp 600ms ease both' }}>
+          Straight answers
+        </span>
+        <h1 style={{ margin: '14px 0 0', fontFamily: DISPLAY, fontWeight: 500, fontSize: 48, lineHeight: 1.15, letterSpacing: '-0.015em', animation: 'fadeUp 700ms ease 60ms both' }}>
+          Questions we get
+        </h1>
+        <p style={{ margin: '24px 0 0', fontFamily: SERIF, fontSize: 16, lineHeight: 1.6, color: '#3f3b31', maxWidth: '62ch', animation: 'fadeUp 700ms ease 140ms both' }}>
+          The honest version, including the ones that are uncomfortable for us. If your question is
+          not here, it is worth asking us directly.
+        </p>
+
+        <div style={{ marginTop: 44, display: 'flex', flexDirection: 'column', gap: 34 }}>
+          {INDEXED.map((g) => (
+            <section key={g.label}>
+              <span style={{ display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2D8F5C', marginBottom: 6 }}>
+                {g.label}
+              </span>
+              {g.items.map((item) => {
+                const isOpen = open === item.i;
+                return (
+                  <div key={item.q} style={{ borderBottom: '1px solid rgba(42,39,31,0.10)' }}>
+                    <button
+                      data-faq={item.i}
+                      onClick={() => setOpen(isOpen ? -1 : item.i)}
+                      aria-expanded={isOpen}
+                      type="button"
+                      style={{ width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '20px 0', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 22 }}
+                    >
+                      <span style={{ fontSize: 16, fontWeight: 600, lineHeight: 1.45, color: '#1a1814', letterSpacing: '-0.01em' }}>{item.q}</span>
+                      <span
+                        style={{
+                          flex: '0 0 auto', width: 22, height: 22, marginTop: 1, borderRadius: 99,
+                          border: `1px solid ${isOpen ? '#1B6C42' : 'rgba(42,39,31,0.16)'}`,
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                          // the plus rotates into a cross and fills in when open
+                          transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
+                          background: isOpen ? '#1B6C42' : 'transparent',
+                          color: isOpen ? '#faf8f3' : '#6f6857',
+                          transition: 'all 260ms cubic-bezier(0.22,1,0.36,1)',
+                        }}
+                      >
+                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+                          <path d="M12 5v14M5 12h14" />
+                        </svg>
+                      </span>
+                    </button>
+                    <div style={{ overflow: 'hidden', transition: 'max-height 380ms cubic-bezier(0.22,1,0.36,1), opacity 300ms ease', maxHeight: isOpen ? 420 : 0, opacity: isOpen ? 1 : 0 }}>
+                      <p style={{ margin: '0 0 20px', paddingRight: 44, fontFamily: SERIF, fontSize: 15.5, lineHeight: 1.7, color: '#3f3b31' }}>
+                        {item.a}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </section>
+          ))}
+        </div>
+
+        <div style={{ marginTop: 52, borderRadius: 18, background: '#faf8f3', border: '1px solid rgba(42,39,31,0.10)', padding: 'clamp(26px,4vw,40px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
+          <div style={{ maxWidth: '44ch' }}>
+            <span style={{ display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2D8F5C' }}>
+              Still curious
+            </span>
+            <p style={{ margin: '10px 0 0', fontFamily: SERIF, fontSize: 15.5, lineHeight: 1.65, color: '#3f3b31' }}>
+              Definitions for the terms above live in the Wiki. Everything else, ask us in the beta
+              and one of the four of us will answer.
+            </p>
+          </div>
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+            <Link href="/wiki" style={{ border: '1px solid rgba(42,39,31,0.16)', borderRadius: 8, padding: '13px 20px', fontSize: 14.5, fontWeight: 600, color: '#1a1814', background: '#faf8f3', whiteSpace: 'nowrap' }}>
+              Read the Wiki
+            </Link>
+            <Link href="/#newsletter" className="cp-cta" style={{ background: '#1B6C42', color: '#fff', borderRadius: 8, padding: '13px 22px', fontSize: 14.5, fontWeight: 600, whiteSpace: 'nowrap' }}>
+              Join the beta
+            </Link>
+          </div>
+        </div>
+      </div>
+    </CompanionShell>
+  );
+}
diff --git a/frontend/src/app/(public)/gallery/page.tsx b/frontend/src/app/(public)/gallery/page.tsx
new file mode 100644
index 00000000..9972a50a
--- /dev/null
+++ b/frontend/src/app/(public)/gallery/page.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+/**
+ * Gallery.
+ *
+ * Ported from `Gallery.dc.html`. A filterable grid of `<figure>` tiles, each
+ * a 16/10 frame with its route badged over the top-left corner and a caption
+ * pairing the screen's title with its group.
+ *
+ * Tiles stagger in: `animation-delay` steps 50ms per tile and caps at 400ms,
+ * so a filter that returns twelve results still settles quickly.
+ *
+ * The frames are empty. The source fills them with its `image-slot` drop
+ * zone ("Drop a screenshot of …"), which is an authoring affordance rather
+ * than page content, and the import ships no screenshots. The route badge
+ * stays, so each tile still says what it is.
+ */
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { CompanionShell } from '@/components/companion/CompanionShell';
+import { GALLERY_FILTERS, GALLERY_SHOTS } from '@/lib/landing/companionContent';
+
+const MONO = "'JetBrains Mono',monospace";
+const SERIF = "'Spectral',Georgia,serif";
+const DISPLAY = "'Playfair Display',Georgia,serif";
+
+export default function GalleryPage() {
+  const [filter, setFilter] = useState('all');
+  const shots = GALLERY_SHOTS.filter((s) => filter === 'all' || s.cat === filter);
+
+  return (
+    <CompanionShell current="/gallery">
+      <div style={{ flex: 1, minWidth: 0, width: '100%', maxWidth: 1180, margin: '0 auto', padding: '64px 32px', boxSizing: 'border-box' }}>
+        <span style={{ display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6f6857', animation: 'fadeUp 600ms ease both' }}>
+          Inside the product
+        </span>
+        <h1 style={{ margin: '14px 0 0', fontFamily: DISPLAY, fontWeight: 500, fontSize: 48, lineHeight: 1.15, letterSpacing: '-0.015em', animation: 'fadeUp 700ms ease 60ms both' }}>
+          Gallery
+        </h1>
+        <p style={{ margin: '24px 0 0', fontFamily: SERIF, fontSize: 16, lineHeight: 1.6, color: '#3f3b31', maxWidth: '62ch', animation: 'fadeUp 700ms ease 140ms both' }}>
+          Every screen in Sapling, as it actually looks. One course, one semester, and the same
+          graph behind all of it.
+        </p>
+
+        <div style={{ marginTop: 34, display: 'flex', gap: 8, flexWrap: 'wrap', animation: 'fadeUp 700ms ease 200ms both' }}>
+          {GALLERY_FILTERS.map((f) => {
+            const on = f.key === filter;
+            return (
+              <button
+                key={f.key}
+                onClick={() => setFilter(f.key)}
+                type="button"
+                aria-pressed={on}
+                style={{
+                  padding: '8px 15px', borderRadius: 99, cursor: 'pointer',
+                  fontFamily: "'DM Sans',sans-serif", fontSize: 13, fontWeight: 500,
+                  transition: 'all 200ms',
+                  border: `1px solid ${on ? '#1B6C42' : 'rgba(42,39,31,0.16)'}`,
+                  background: on ? '#1B6C42' : 'transparent',
+                  color: on ? '#faf8f3' : '#6f6857',
+                }}
+              >
+                {f.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <div style={{ marginTop: 26, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px,1fr))', gap: 22 }}>
+          {shots.map((s, i) => (
+            <figure
+              key={s.slot}
+              style={{
+                margin: 0, display: 'flex', flexDirection: 'column', gap: 12,
+                animation: 'fadeUp 600ms ease both',
+                // capped so a large filter result still settles quickly
+                animationDelay: `${Math.min(i * 50, 400)}ms`,
+              }}
+            >
+              <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', borderRadius: 14, overflow: 'hidden', background: '#ebe6dc', border: '1px solid rgba(42,39,31,0.10)', boxShadow: '0 10px 28px -16px rgba(26,24,20,0.45)' }}>
+                <span style={{ position: 'absolute', left: 10, top: 10, padding: '4px 9px', borderRadius: 6, background: 'rgba(250,248,243,0.9)', backdropFilter: 'blur(4px)', fontFamily: MONO, fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#3f3b31' }}>
+                  {s.route}
+                </span>
+              </div>
+              <figcaption style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+                <span style={{ display: 'flex', alignItems: 'baseline', gap: 9 }}>
+                  <span style={{ fontSize: 15, fontWeight: 600, color: '#1a1814', letterSpacing: '-0.01em' }}>{s.title}</span>
+                  <span style={{ fontFamily: MONO, fontSize: 9, lineHeight: 1, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2D8F5C' }}>{s.group}</span>
+                </span>
+                <span style={{ fontFamily: SERIF, fontSize: 14, lineHeight: 1.6, color: '#3f3b31' }}>{s.body}</span>
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+
+        <div style={{ marginTop: 52, borderRadius: 18, background: '#faf8f3', border: '1px solid rgba(42,39,31,0.10)', padding: 'clamp(26px,4vw,40px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
+          <div style={{ maxWidth: '46ch' }}>
+            <span style={{ display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2D8F5C' }}>
+              Rather try it than look at it
+            </span>
+            <p style={{ margin: '10px 0 0', fontFamily: SERIF, fontSize: 15.5, lineHeight: 1.65, color: '#3f3b31' }}>
+              Every screen here is playable on the home page. Open any tool in the toolkit and it
+              runs a real scenario.
+            </p>
+          </div>
+          <Link href="/#gallery" className="cp-cta" style={{ background: '#1B6C42', color: '#fff', borderRadius: 8, padding: '13px 24px', fontSize: 14.5, fontWeight: 600, whiteSpace: 'nowrap' }}>
+            Open the toolkit
+          </Link>
+        </div>
+      </div>
+    </CompanionShell>
+  );
+}
diff --git a/frontend/src/app/(public)/news/page.tsx b/frontend/src/app/(public)/news/page.tsx
new file mode 100644
index 00000000..0f3d0e17
--- /dev/null
+++ b/frontend/src/app/(public)/news/page.tsx
@@ -0,0 +1,220 @@
+'use client';
+
+/**
+ * News.
+ *
+ * Ported from `News.dc.html`. A responsive card grid over a combined
+ * search-and-filter bar, closing on a Journal call-out.
+ *
+ * The filter is a real listbox rather than a row of pills — the source packs
+ * the query field, a clear button and the category menu into one rounded
+ * control, and the menu marks its active option with a check.
+ *
+ * Posts without artwork show a plain tinted panel. The source fills those
+ * with its `image-slot` authoring component (a drag-to-fill drop zone), which
+ * has no place in the shipped page; the import carries images for two of the
+ * six posts.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { CompanionShell } from '@/components/companion/CompanionShell';
+import { NEWS_FILTERS, NEWS_POSTS } from '@/lib/landing/companionContent';
+
+const MONO = "'JetBrains Mono',monospace";
+const SERIF = "'Spectral',Georgia,serif";
+const DISPLAY = "'Playfair Display',Georgia,serif";
+
+/** The two posts the import ships artwork for. */
+const ART: Record<string, string> = {
+  'assets/journal-founding.png': '/journal-founding.png',
+  'assets/journal-ai-homework.png': '/journal-ai-homework.png',
+};
+
+export default function NewsPage() {
+  const [query, setQuery] = useState('');
+  const [filter, setFilter] = useState('all');
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // close the category menu on an outside click, like the source's away handler
+  useEffect(() => {
+    const away = (e: PointerEvent) => {
+      if (!menuRef.current?.contains(e.target as Node)) setMenuOpen(false);
+    };
+    document.addEventListener('pointerdown', away);
+    return () => document.removeEventListener('pointerdown', away);
+  }, []);
+
+  const q = query.trim().toLowerCase();
+  const posts = NEWS_POSTS.filter((p) => {
+    if (filter !== 'all' && p.cat !== filter) return false;
+    if (!q) return true;
+    return `${p.title} ${p.excerpt} ${p.tag}`.toLowerCase().includes(q);
+  });
+
+  const activeLabel = NEWS_FILTERS.find((f) => f.key === filter)?.label ?? 'All articles';
+
+  return (
+    <CompanionShell current="/news">
+      <div style={{ flex: 1, minWidth: 0, width: '100%', maxWidth: 1240, margin: '0 auto', padding: '64px 32px', boxSizing: 'border-box' }}>
+        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
+          <div>
+            <span style={{ display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6f6857', animation: 'fadeUp 600ms ease both' }}>
+              Notes from the build
+            </span>
+            <h1 style={{ margin: '14px 0 0', fontFamily: DISPLAY, fontWeight: 500, fontSize: 48, lineHeight: 1.15, letterSpacing: '-0.015em', animation: 'fadeUp 700ms ease 60ms both' }}>
+              News
+            </h1>
+          </div>
+          <Link
+            href="/#newsletter"
+            className="cp-navlink"
+            style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#1B6C42', paddingBottom: 4, borderBottom: '1px solid rgba(27,108,66,0.35)' }}
+          >
+            Subscribe →
+          </Link>
+        </div>
+
+        <p style={{ margin: '20px 0 0', fontFamily: SERIF, fontSize: 16, lineHeight: 1.6, color: '#3f3b31', maxWidth: '62ch', animation: 'fadeUp 700ms ease 140ms both' }}>
+          Releases, decisions, and what we are learning about learning. One letter a month while we
+          build.
+        </p>
+
+        {/* one control: query, clear, divider, category listbox */}
+        <div style={{ position: 'relative', zIndex: 30, marginTop: 30, display: 'flex', alignItems: 'center', gap: 10, maxWidth: 560, padding: '6px 6px 6px 14px', borderRadius: 10, border: '1px solid rgba(42,39,31,0.16)', background: '#faf8f3' }}>
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#6f6857" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+            <circle cx="11" cy="11" r="8" /><path d="M21 21l-4.3-4.3" />
+          </svg>
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search posts"
+            aria-label="Search posts"
+            style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent', fontFamily: "'DM Sans',sans-serif", fontSize: 14, color: '#1a1814' }}
+          />
+          {query && (
+            <button
+              onClick={() => setQuery('')}
+              type="button"
+              aria-label="Clear search"
+              style={{ flex: '0 0 auto', width: 20, height: 20, borderRadius: 99, border: 'none', background: 'rgba(42,39,31,0.10)', color: '#6f6857', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            >
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </button>
+          )}
+          <span aria-hidden="true" style={{ flex: '0 0 auto', width: 1, height: 22, background: 'rgba(42,39,31,0.14)' }} />
+
+          <div ref={menuRef} style={{ flex: '0 0 auto', position: 'relative' }}>
+            <button
+              onClick={() => setMenuOpen((o) => !o)}
+              type="button"
+              aria-haspopup="listbox"
+              aria-expanded={menuOpen}
+              style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 8, border: 'none', background: 'transparent', fontFamily: "'DM Sans',sans-serif", fontSize: 13.5, fontWeight: 500, color: '#1a1814', cursor: 'pointer', whiteSpace: 'nowrap' }}
+            >
+              {activeLabel}
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#6f6857" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, transition: 'transform 220ms', transform: menuOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}>
+                <path d="M6 9l6 6 6-6" />
+              </svg>
+            </button>
+
+            <div
+              role="listbox"
+              style={{
+                position: 'absolute', right: 0, top: 'calc(100% + 10px)', minWidth: '100%',
+                width: 'max-content', zIndex: 40, borderRadius: 12, background: '#faf8f3',
+                border: '1px solid rgba(42,39,31,0.12)', boxShadow: '0 16px 38px -18px rgba(26,24,20,0.4)',
+                padding: 6, display: menuOpen ? 'flex' : 'none', flexDirection: 'column', gap: 1,
+              }}
+            >
+              {NEWS_FILTERS.map((f) => (
+                <button
+                  key={f.key}
+                  onClick={() => { setFilter(f.key); setMenuOpen(false); }}
+                  type="button"
+                  role="option"
+                  aria-selected={f.key === filter}
+                  className="cp-menuitem"
+                  style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, width: '100%', textAlign: 'left', padding: '9px 12px', borderRadius: 8, border: 'none', background: 'transparent', fontFamily: "'DM Sans',sans-serif", fontSize: 13.5, color: f.key === filter ? '#1a1814' : '#6f6857', fontWeight: f.key === filter ? 600 : 500, cursor: 'pointer' }}
+                >
+                  {f.label}
+                  {f.key === filter && (
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#1B6C42" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+                      <path d="M20 6L9 17l-5-5" />
+                    </svg>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {posts.length === 0 && (
+          <div style={{ marginTop: 44, padding: '44px 0', borderTop: '1px solid rgba(42,39,31,0.10)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, textAlign: 'center' }}>
+            <span style={{ fontFamily: DISPLAY, fontWeight: 500, fontSize: 22, letterSpacing: '-0.015em', color: '#1a1814' }}>
+              Nothing matches &ldquo;{query}&rdquo;
+            </span>
+            <span style={{ fontFamily: SERIF, fontSize: 15, lineHeight: 1.6, color: '#3f3b31' }}>
+              Try a different word, or clear the filters.
+            </span>
+            <button
+              onClick={() => { setQuery(''); setFilter('all'); }}
+              type="button"
+              style={{ marginTop: 10, padding: '11px 20px', borderRadius: 8, border: '1px solid rgba(42,39,31,0.16)', background: '#faf8f3', fontFamily: "'DM Sans',sans-serif", fontSize: 13.5, color: '#1a1814', cursor: 'pointer' }}
+            >
+              Clear filters
+            </button>
+          </div>
+        )}
+
+        <div style={{ marginTop: 26, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(330px,1fr))', gap: 26 }}>
+          {posts.map((p) => {
+            const art = ART[p.src];
+            return (
+              <Link
+                key={p.title}
+                href="/#newsletter"
+                className="cp-newscard"
+                style={{ display: 'flex', flexDirection: 'column', borderRadius: 16, overflow: 'hidden', background: '#faf8f3', border: '1px solid rgba(42,39,31,0.10)', color: 'inherit', transition: 'border-color 220ms, transform 220ms' }}
+              >
+                <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: '#ebe6dc', borderBottom: '1px solid rgba(42,39,31,0.08)' }}>
+                  {art && <Image src={art} alt="" fill sizes="(max-width: 900px) 100vw, 33vw" style={{ objectFit: 'cover' }} />}
+                </div>
+                <div style={{ padding: '20px 22px 24px', display: 'flex', flexDirection: 'column', gap: 11 }}>
+                  <span style={{ display: 'flex', alignItems: 'center', gap: 12, lineHeight: 1 }}>
+                    <span style={{ fontFamily: MONO, fontSize: 10, lineHeight: 1, letterSpacing: '0.06em', color: '#6f6857' }}>{p.date}</span>
+                    <span style={{ fontFamily: MONO, fontSize: 10, lineHeight: 1, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2D8F5C' }}>{p.tag}</span>
+                  </span>
+                  <h2 style={{ margin: 0, fontFamily: DISPLAY, fontWeight: 500, fontSize: 21, lineHeight: 1.24, letterSpacing: '-0.015em', color: '#1a1814' }}>{p.title}</h2>
+                  <p style={{ margin: 0, fontFamily: SERIF, fontSize: 14.5, lineHeight: 1.62, color: '#3f3b31' }}>{p.excerpt}</p>
+                  <span style={{ marginTop: 5, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, lineHeight: 1 }}>
+                    <span style={{ fontSize: 13, fontWeight: 600, lineHeight: 1, color: '#1B6C42' }}>Read article →</span>
+                    <span style={{ fontFamily: MONO, fontSize: 10, lineHeight: 1, letterSpacing: '0.14em', color: '#6f6857' }}>{p.time}</span>
+                  </span>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+
+        <div style={{ marginTop: 52, borderRadius: 18, background: '#faf8f3', border: '1px solid rgba(42,39,31,0.10)', padding: 'clamp(26px,4vw,40px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
+          <div style={{ maxWidth: '46ch' }}>
+            <span style={{ display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2D8F5C' }}>
+              The Sapling Journal
+            </span>
+            <p style={{ margin: '10px 0 0', fontFamily: SERIF, fontSize: 15.5, lineHeight: 1.65, color: '#3f3b31' }}>
+              One letter a month, written by the four of us. First issue lands with the beta.
+            </p>
+          </div>
+          <Link href="/#newsletter" className="cp-cta" style={{ background: '#1B6C42', color: '#fff', borderRadius: 8, padding: '13px 24px', fontSize: 14.5, fontWeight: 600, whiteSpace: 'nowrap' }}>
+            Get the Journal
+          </Link>
+        </div>
+      </div>
+    </CompanionShell>
+  );
+}
diff --git a/frontend/src/app/(public)/page.tsx b/frontend/src/app/(public)/page.tsx
index dc89e83f..2ae9ba6a 100644
--- a/frontend/src/app/(public)/page.tsx
+++ b/frontend/src/app/(public)/page.tsx
@@ -1,877 +1,171 @@
 'use client';
 
-import { useEffect, useState, useRef, useCallback } from 'react';
-import dynamic from 'next/dynamic';
-import { useRouter } from 'next/navigation';
-import { useUser } from '@/context/UserContext';
-import { useScrollLock } from '@/lib/useScrollLock';
-import { Users, PenSquare } from 'lucide-react';
+/**
+ * The Sapling landing page.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. This is the page at `/` — it
+ * replaced the previous marketing landing outright rather than sitting
+ * beside it.
+ *
+ * Sections land incrementally; the engine drives whatever is mounted.
+ */
+
+import { useState } from 'react';
 import SignInModal from '@/components/marketing/SignInModal';
-import { HeroCard } from '@/components/marketing/HeroCard';
-import FeatureBand from '@/components/marketing/FeatureBand';
-import SurfaceBento from '@/components/marketing/SurfaceBento';
-import { FEATURE_BANDS } from '@/components/marketing/featureBands';
-import { BRAND_FOREST } from '@/lib/brand';
-import { Button } from "@/components/ui";
-import { IS_TEST_MODE, random, now } from '@/lib/testMode';
-
-const KnowledgeGraphDemo = dynamic(
-  () => import('@/components/marketing/graph/KnowledgeGraphDemo'),
-  {
-    // Placeholder height approximates the section's resolved height so nothing
-    // below shifts while the chunk loads. MEASURED, not guessed: the section
-    // resolves to 990px at every desktop width once it wears its product
-    // chrome (#344 step 3) — the `80vh` this carried was 27–40% short of that
-    // even before, and a viewport-relative value cannot track a section whose
-    // height is set by a fixed-width inspector rail.
-    loading: () => <section id="knowledge-graph" className="landing-section relative" style={{ minHeight: '990px' }} />,
-  },
-);
-
-const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000';
-
-const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_";
-
-// Hand-tuned atmospheric orb palettes, hardcoded because they feed canvas
-// fillStyle where CSS var() doesn't resolve. #3e6f8a mirrors --info in
-// globals.css — the muted blue chosen to de-neon the old #3B82F6 (#106).
-const CLUSTER_COLORS = ['#9CA3AF', '#D97706', '#3e6f8a', '#8A63D2', '#14B8A6', '#EF4444'];
-const CLUSTER_SEEDS_BG = [10.0, 11.3, 12.6, 13.9, 15.2, 16.5];
-const CLUSTER_INIT_POS = [
-  { ox: -222, oy: -29, oz:  15 },
-  { ox: -161, oy: -59, oz: -20 },
-  { ox:  -81, oy: -42, oz:  30 },
-  { ox:  -67, oy:  17, oz:   0 },
-  { ox: -168, oy:  59, oz:  20 },
-  { ox: -229, oy:   8, oz: -30 },
-];
-
-/* The globals.css `prefers-reduced-motion` block only neutralizes CSS
-   animations and transitions. The hero's canvas and card RAF loops are JS and
-   have to opt out themselves, or a reduced-motion visitor keeps paying for a
-   60fps render they asked not to see. */
-const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+import { ActGraph, RiseBand } from '@/components/landing-v5/ActGraph';
+import { ActIngest } from '@/components/landing-v5/ActIngest';
+import { BetaModal } from '@/components/landing-v5/BetaModal';
+import { ActTutor } from '@/components/landing-v5/ActTutor';
+import { FinalCta, SectionNav, SiteFooter } from '@/components/landing-v5/Closing';
+import { Faq } from '@/components/landing-v5/Faq';
+import { FeatureLab } from '@/components/landing-v5/FeatureLab';
+import { Journal } from '@/components/landing-v5/Journal';
+import { Gallery } from '@/components/landing-v5/Gallery';
+import { Hero } from '@/components/landing-v5/Hero';
+import { IntroOverlay } from '@/components/landing-v5/IntroOverlay';
+import { Navbar } from '@/components/landing-v5/Navbar';
+import { NAV_DARK, NAV_LIGHT, useNavDark } from '@/components/landing-v5/navTheme';
+import { useLanding } from '@/components/landing/useLanding';
 
 export default function LandingPage() {
-  const router = useRouter();
-  const { userReady, isAuthenticated } = useUser();
-
-  const [heroMounted, setHeroMounted] = useState(false);
-  const [heroText1, setHeroText1] = useState('');
-  const [heroText2, setHeroText2] = useState('');
+  const {
+    rootRef, ambientCanvasRef, navRef, heroCanvasRef, glCanvasRef, heroContentRef,
+    actCanvasRef, cinemaRef, ingestSceneRef, ingestStageRef, carouselRef, trackARef, trackBRef,
+    state, set, actions,
+  } = useLanding({ loadCounter: true });
+
+  // Carried over from the page this replaced: the nav's Sign In still opens
+  // the real OAuth modal rather than scrolling somewhere.
   const [signInOpen, setSignInOpen] = useState(false);
-  const [signInError, setSignInError] = useState<string | null>(null);
-  const [betaModalOpen, setBetaModalOpen] = useState(false);
-  const [betaModalClosing, setBetaModalClosing] = useState(false);
-  const [betaEmail, setBetaEmail] = useState('');
-  const [betaEmailError, setBetaEmailError] = useState('');
-  const [betaSubmitted, setBetaSubmitted] = useState(false);
-  const [betaEverSubmitted, setBetaEverSubmitted] = useState(false);
-  const [betaSubmitting, setBetaSubmitting] = useState(false);
-  const closeModal = useCallback(() => {
-    setBetaModalClosing(true);
-    setTimeout(() => {
-      setBetaModalOpen(false);
-      setBetaModalClosing(false);
-      setBetaSubmitted(false);
-      setBetaEmail('');
-      setBetaEmailError('');
-    }, 200);
-  }, []);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const heroContentRef = useRef<HTMLDivElement>(null);
-  const floatingCardsRef = useRef<HTMLDivElement>(null);
-  const navRef = useRef<HTMLElement>(null);
-  const ambientGlowRef = useRef<HTMLDivElement>(null);
-  const parallaxYRef = useRef(0);
-  const mouseRef = useRef({ x: 0, y: 0 });
-
-  useEffect(() => {
-    if (betaSubmitted) {
-      const t = setTimeout(() => closeModal(), 3200);
-      return () => clearTimeout(t);
-    }
-  }, [betaSubmitted, closeModal]);
-  // Pre-auth there is no app shell, so <body> is the real scroll container and
-  // useScrollLock resolves to it.
-  useScrollLock(betaModalOpen);
-
-  // Always start at the top of the landing page so the intro sequence plays
-  // in order. Without this, browser scroll restoration on reload / hot
-  // reload can drop the user mid-section past the hero.
-  useEffect(() => {
-    if (typeof window !== 'undefined' && 'scrollRestoration' in window.history) {
-      window.history.scrollRestoration = 'manual';
-    }
-    window.scrollTo({ top: 0, behavior: 'instant' });
-  }, []);
-
-  // If we landed here from an auth callback error or middleware redirect,
-  // surface the message in the sign-in modal and clean the param from the URL.
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const params = new URLSearchParams(window.location.search);
-    const err = params.get('error');
-    if (!err) return;
-    setSignInError(err);
-    setSignInOpen(true);
-    params.delete('error');
-    const qs = params.toString();
-    const next = window.location.pathname + (qs ? `?${qs}` : '');
-    window.history.replaceState({}, '', next);
-  }, []);
-
-  const scrambleText = useCallback((setter: (v: string) => void, final: string, duration: number) => {
-    const start = Date.now();
-    const interval = setInterval(() => {
-      const progress = (Date.now() - start) / duration;
-      if (progress >= 1) { setter(final); clearInterval(interval); return; }
-      setter(final.split('').map((ch, idx) => {
-        if (ch === ' ' || ch === '\n') return ch;
-        if (progress > idx / final.length) return ch;
-        return SCRAMBLE_CHARS[Math.floor(Math.random() * SCRAMBLE_CHARS.length)];
-      }).join(''));
-    }, 30);
-    return () => clearInterval(interval);
-  }, []);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setHeroMounted(true);
-      scrambleText(setHeroText1, 'Sapling', 1000);
-      setTimeout(() => scrambleText(setHeroText2, 'Grow Your Knowledge', 1200), 200);
-    }, 300);
-    return () => clearTimeout(timeout);
-  }, [scrambleText]);
-
-  // 3D Canvas graph
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d', { alpha: true });
-    if (!ctx) return;
-
-    let width = 0, height = 0;
-    let rotAngle = 0;
-    let animId = 0;
-
-    const reduceMotion = window.matchMedia(REDUCED_MOTION_QUERY);
-    // Test mode parks the loop on its single deterministic frame, same
-    // as prefers-reduced-motion.
-    let animating = !IS_TEST_MODE && !reduceMotion.matches;
-
-    // #3e6f8a mirrors --info (globals.css); literal because canvas can't resolve var().
-    const palette = [
-      { c: '#8A63D2', w: 0.24 }, { c: '#3e6f8a', w: 0.24 },
-      { c: '#D97706', w: 0.20 }, { c: '#14B8A6', w: 0.15 },
-      { c: '#9CA3AF', w: 0.10 }, { c: '#D1D5DB', w: 0.07 },
-    ];
-    function randColor() {
-      let r = random(), s = 0;
-      for (const p of palette) { s += p.w; if (r <= s) return p.c; }
-      return palette[0].c;
-    }
-
-    const clusters = [
-      { x: -600, y: -250, z: 80 },  { x: -350, y: -100, z: -120 },
-      { x: -100, y: -300, z: 200 }, { x: 150, y: -150, z: -80 },
-      { x: 400, y: -250, z: 150 },  { x: 600, y: -100, z: -50 },
-      { x: -500, y: 100, z: -150 }, { x: -200, y: 200, z: 100 },
-      { x: 50, y: 150, z: -200 },   { x: 300, y: 250, z: 120 },
-      { x: 550, y: 150, z: -100 },  { x: -400, y: 350, z: 60 },
-      { x: 0, y: 0, z: 0 },         { x: 200, y: -50, z: -150 },
-    ];
-    const spread = 280;
-    const bgNodes = Array.from({ length: 220 }, () => {
-      const cl = clusters[Math.floor(random() * clusters.length)];
-      return {
-        ox: cl.x + (random() - 0.5) * spread,
-        oy: cl.y + (random() - 0.5) * spread,
-        oz: cl.z + (random() - 0.5) * spread,
-        color: randColor(),
-        radius: 1 + random() * 4,
-        seed: random() * 100,
-        clusterIndex: undefined as number | undefined,
-      };
-    });
-    const clusterNodes = CLUSTER_INIT_POS.map((pos, i) => ({
-      ox: pos.ox, oy: pos.oy, oz: pos.oz,
-      color: CLUSTER_COLORS[i],
-      radius: 2.5 + random() * 1.5,
-      seed: CLUSTER_SEEDS_BG[i],
-      clusterIndex: i as number | undefined,
-    }));
-    const nodes = [...bgNodes, ...clusterNodes];
-
-    function resize() {
-      width = window.innerWidth;
-      height = window.innerHeight;
-      canvas!.width = width * devicePixelRatio;
-      canvas!.height = height * devicePixelRatio;
-      ctx!.scale(devicePixelRatio, devicePixelRatio);
-      // Resizing clears the backing store. With the loop parked there's no
-      // next frame to repaint it, so repaint the static one here.
-      if (!animating) draw();
-    }
-    window.addEventListener('resize', resize);
-    resize();
-
-    function draw() {
-      if (!ctx) return;
-      ctx.clearRect(0, 0, width, height);
-      rotAngle += 0.0008;
-      const fl = 1000, cx = width / 2, cy = height / 2, t = now() * 0.001;
-      const mx = mouseRef.current.x, my = mouseRef.current.y;
-
-      const proj = nodes.map(n => {
-        const ny = n.oy + Math.sin(t * 0.4 + n.seed) * 15;
-        let x = n.ox * Math.cos(rotAngle) - n.oz * Math.sin(rotAngle);
-        let z = n.oz * Math.cos(rotAngle) + n.ox * Math.sin(rotAngle);
-        x -= mx * (z + fl) * 0.02;
-        const y2 = ny - my * (z + fl) * 0.02;
-        const sc = fl / (fl + z);
-        return { x: x * sc + cx, y: y2 * sc + cy - parallaxYRef.current, z, sc, n };
-      }).sort((a, b) => b.z - a.z);
-
-      ctx.globalCompositeOperation = 'source-over';
-      ctx.lineWidth = 0.5;
-      // The pair walk itself is unavoidable (links depend on projected
-      // positions, which change every frame), but almost every pair fails the
-      // distance test — so make failing cheap: hoist the per-node threshold
-      // out of the inner loop, reject on |dx|/|dy| before multiplying, and
-      // compare squared distances so the sqrt only runs for pairs that
-      // actually draw a link.
-      for (let i = 0; i < proj.length; i++) {
-        const p1 = proj[i];
-        const maxD = 70 * p1.sc;
-        const maxD2 = maxD * maxD;
-        const aScale = 0.15 * Math.min(1, p1.sc);
-        for (let j = i + 1; j < proj.length; j++) {
-          const p2 = proj[j];
-          const dx = p1.x - p2.x;
-          if (dx > maxD || dx < -maxD) continue;
-          const dy = p1.y - p2.y;
-          if (dy > maxD || dy < -maxD) continue;
-          const d2 = dx * dx + dy * dy;
-          if (d2 < maxD2) {
-            const a = (1 - Math.sqrt(d2) / maxD) * aScale;
-            if (a > 0.002) {
-              ctx.strokeStyle = `rgba(156,163,175,${a})`;
-              ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
-            }
-          }
-        }
-      }
-
-      proj.forEach(p => {
-        if (p.z > -fl) {
-          const breathe = 0.92 + 0.08 * Math.sin(t * 0.6 + p.n.seed);
-          const fogA = p.z > 500 ? Math.max(0, 1 - (p.z - 500) / 500) : 1;
-          const r = p.n.radius * p.sc * breathe;
-          if (r > 0.1) {
-            ctx.globalAlpha = fogA;
-            ctx.beginPath(); ctx.arc(p.x, p.y, r, 0, Math.PI * 2); ctx.fillStyle = p.n.color; ctx.fill();
-          }
-        }
-      });
-      ctx.globalAlpha = 1;
-
-      if (animating) animId = requestAnimationFrame(draw);
-    }
-
-    // Toggling the OS preference mid-session either parks the loop on a
-    // static frame or restarts it; `draw` self-schedules only when animating.
-    const onMotionPrefChange = () => {
-      const next = !IS_TEST_MODE && !reduceMotion.matches;
-      if (next === animating) return;
-      animating = next;
-      cancelAnimationFrame(animId);
-      draw();
-    };
-    reduceMotion.addEventListener('change', onMotionPrefChange);
-
-    draw();
-    return () => {
-      window.removeEventListener('resize', resize);
-      reduceMotion.removeEventListener('change', onMotionPrefChange);
-      cancelAnimationFrame(animId);
-    };
-  }, []);
-
-  // Mouse + scroll
-  useEffect(() => {
-    const onMouse = (e: MouseEvent) => {
-      mouseRef.current = { x: (e.clientX / window.innerWidth - 0.5) * 2, y: (e.clientY / window.innerHeight - 0.5) * 2 };
-    };
-    let lastSy = window.scrollY;
-
-    const updateNavChrome = (sy: number) => {
-      const nav = navRef.current;
-      if (!nav) return;
-      const scrollingDown = sy > lastSy;
-      const pastHero = sy > window.innerHeight * 0.5;
-      nav.style.transform = scrollingDown && pastHero ? 'translateY(-100%)' : 'translateY(0)';
-      nav.classList.remove('shadow-sm');
-      nav.style.background = 'transparent';
-      nav.style.backdropFilter = 'none';
-      nav.style.setProperty('-webkit-backdrop-filter', 'none');
-      nav.style.borderBottomColor = 'transparent';
-    };
-
-    const updateAmbientGlow = (sy: number) => {
-      const glow = ambientGlowRef.current;
-      if (!glow) return;
-      const progress = Math.min(1, Math.max(0, (sy - 20) / 260));
-      const eased = progress * progress;
-      glow.style.opacity = eased.toString();
-    };
+  // Added by request. The design scrolls both beta CTAs down to the
+  // newsletter section instead; they open this dialog now.
+  const [betaOpen, setBetaOpen] = useState(false);
 
-    const applyScroll = () => {
-      const sy = window.scrollY;
-      if (heroContentRef.current && sy < window.innerHeight) {
-        heroContentRef.current.style.transform = `translateY(${sy * -0.3}px)`;
-        parallaxYRef.current = sy * 0.1;
-      }
-      updateNavChrome(sy);
-      updateAmbientGlow(sy);
-      lastSy = sy;
-    };
-
-    // Scroll fires far more often than the compositor paints, and each call
-    // writes inline styles on three elements. Coalesce to one write per frame.
-    let queued = 0;
-    const onScroll = () => {
-      if (queued) return;
-      queued = requestAnimationFrame(() => { queued = 0; applyScroll(); });
-    };
-
-    document.addEventListener('mousemove', onMouse, { passive: true });
-    window.addEventListener('scroll', onScroll, { passive: true });
-    applyScroll();
-    return () => {
-      document.removeEventListener('mousemove', onMouse);
-      window.removeEventListener('scroll', onScroll);
-      cancelAnimationFrame(queued);
-    };
-  }, []);
-
-  // Floating cards parallax
-  useEffect(() => {
-    // The cards are static markup, so resolve the NodeList and parse their
-    // dataset floats once instead of re-doing both 60 times a second.
-    const cards = Array.from(
-      floatingCardsRef.current?.querySelectorAll<HTMLElement>('.floating-card') ?? [],
-    ).map(el => ({
-      el,
-      baseRot: parseFloat(el.dataset.baseRot || '0'),
-      dur: parseFloat(el.dataset.floatDur || '5000'),
-      delay: parseFloat(el.dataset.floatDelay || '0'),
-    }));
-    if (cards.length === 0) return;
-
-    const reduceMotion = window.matchMedia(REDUCED_MOTION_QUERY);
-    let animId = 0;
-    let animating = !IS_TEST_MODE && !reduceMotion.matches;
-
-    function paint() {
-      const t = Date.now();
-      const mx = mouseRef.current.x, my = mouseRef.current.y;
-      // Reduced motion keeps the cards' resting tilt but drops the drift,
-      // the mouse tilt and the scroll parallax.
-      const rx = animating ? -my * 5 : 0;
-      const ry = animating ? mx * 5 : 0;
-      const par = animating ? window.scrollY * -0.3 : 0;
-      for (const { el, baseRot, dur, delay } of cards) {
-        const floatY = animating ? Math.sin((t - delay) / dur * Math.PI * 2) * -8 : 0;
-        el.style.transform = `perspective(1000px) translateY(${floatY + par}px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${baseRot}deg)`;
-      }
-      if (animating) animId = requestAnimationFrame(paint);
-    }
-
-    const onMotionPrefChange = () => {
-      const next = !IS_TEST_MODE && !reduceMotion.matches;
-      if (next === animating) return;
-      animating = next;
-      cancelAnimationFrame(animId);
-      paint();
-    };
-    reduceMotion.addEventListener('change', onMotionPrefChange);
-
-    paint();
-    return () => {
-      reduceMotion.removeEventListener('change', onMotionPrefChange);
-      cancelAnimationFrame(animId);
-    };
-  }, []);
-
-  // Intersection observer for fade-ups
-  useEffect(() => {
-    const obs = new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          entry.target.classList.remove('opacity-0', 'translate-y-[30px]');
-          obs.unobserve(entry.target);
-        }
-      });
-    }, { threshold: 0.2 });
-    document.querySelectorAll('.landing-fade-up').forEach(el => {
-      el.classList.add('opacity-0', 'translate-y-[30px]', 'transition-all', 'duration-700', 'ease-out');
-      obs.observe(el);
-    });
-    return () => obs.disconnect();
-  }, []);
-
-  // ── Onboarding entry ──────────────────────────────────────────────
-  // The signup flow lives at /onboarding (screens/Onboarding). Unauthenticated
-  // visitors sign in first; SignInModal routes them onward based on
-  // onboarding_completed.
-  function startOnboarding() {
-    if (!userReady) return;
-    if (!isAuthenticated) {
-      setSignInError(null);
-      setSignInOpen(true);
-      return;
-    }
-    router.push('/onboarding');
-  }
+  // The source builds this table then pins it to light with `wantDark = false`.
+  // Driven for real here — see navTheme.ts.
+  const navTheme = useNavDark() ? NAV_DARK : NAV_LIGHT;
 
   return (
-    <div className="landing-page antialiased" style={{ fontFamily: "var(--font-inter), sans-serif", color: 'var(--text, #1a1a1a)', background: 'transparent' }}>
-      <div ref={ambientGlowRef} className="landing-ambient-glow" />
-
-      {/* ═══ Initial load intro overlay ═══ */}
-      <div
-        className="landing-intro-overlay"
-        style={{
-          opacity: heroMounted ? 0 : 1,
-          pointerEvents: heroMounted ? 'none' as const : 'auto' as const,
-        }}
-      >
-        <div className="landing-intro-orbit">
-          <div className="landing-intro-orbit-ring">
-            <div className="landing-intro-orbit-node landing-intro-orbit-node--green" />
-            <div className="landing-intro-orbit-node landing-intro-orbit-node--amber" />
-            <div className="landing-intro-orbit-node landing-intro-orbit-node--blue" />
-            <div className="landing-intro-orbit-node landing-intro-orbit-node--purple" />
-          </div>
-          <div className="text-center">
-            <div className="font-playfair text-3xl sm:text-4xl font-semibold text-[var(--brand-forest)]">
-              Sapling
-            </div>
-            <div className="mt-2 text-xs sm:text-sm font-jetbrains tracking-[0.2em] uppercase text-[var(--text-dim)]">
-              Growing your knowledge
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* ═══ Navbar ═══ */}
-      <nav
-        ref={navRef}
-        className="fixed top-0 w-full z-50 border-b border-solid px-6 py-4"
+    <div
+      ref={rootRef}
+      className="landing-dc landing-v5"
+      style={{
+        fontFamily: "'DM Sans',system-ui,sans-serif", color: '#12201A', fontSize: 14,
+        lineHeight: 1.6, backgroundColor: '#f0f4f2',
+        backgroundImage:
+          'radial-gradient(ellipse 100% 60% at 50% -10%, rgba(255,255,255,0.55) 0%, transparent 50%), radial-gradient(ellipse 80% 50% at 100% 40%, rgba(255,255,255,0.2) 0%, transparent 45%)',
+        minHeight: '100vh', overflowX: 'clip',
+      }}
+    >
+      {/* ambient constellation, behind everything */}
+      <canvas
+        ref={ambientCanvasRef}
+        aria-hidden="true"
         style={{
-          background: 'rgba(255,255,255,0)',
-          borderBottomColor: 'transparent',
-          opacity: heroMounted ? 1 : 0,
-          transform: heroMounted ? 'translateY(0)' : 'translateY(-30px)',
-          transition: 'opacity 800ms cubic-bezier(0.22,1,0.36,1), transform 800ms cubic-bezier(0.22,1,0.36,1)',
+          position: 'fixed', inset: 0, zIndex: -1, width: '100%', height: '100%',
+          pointerEvents: 'none',
         }}
-      >
-        <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
-          <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
-            <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
-            <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: 'var(--brand-forest)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
-          </button>
-          <div className="flex items-center">
-            <button data-testid="signin-trigger" onClick={() => { setSignInError(null); setSignInOpen(true); }} className="text-[var(--text-dim)] hover:text-[var(--text)] font-medium text-sm tracking-wide transition-all duration-300 mr-6 hidden sm:block">Sign In</button>
-            <Button variant="primary" size="lg" style={{ padding: '6px 14px' }} onClick={startOnboarding}>
-              Get Started
-            </Button>
-          </div>
-        </div>
-      </nav>
+      />
 
-      {/* ═══ Hero Section ═══ */}
-      <section className="relative min-h-screen flex items-center justify-center">
-        <div aria-hidden className="absolute inset-0 pointer-events-none z-0">
-          <div className="sapling-mesh-blob sapling-mesh-blob--1" />
-          <div className="sapling-mesh-blob sapling-mesh-blob--2" />
-        </div>
-        <canvas ref={canvasRef} className="absolute inset-0 z-0 w-full h-full pointer-events-auto opacity-100" />
+      <IntroOverlay
+        heroMounted={state.heroMounted}
+        introGone={state.introGone}
+        loadPct={state.loadPct}
+      />
 
-        {/* Floating Glass Accent Cards */}
-        <div ref={floatingCardsRef} className="absolute inset-0 z-10 hidden lg:block pointer-events-none">
-          <div
-            className="floating-card absolute w-52 liquid-glass rounded-2xl p-5"
-            style={{ position: 'absolute', top: '24%', right: '12%', opacity: heroMounted ? 1 : 0, transition: 'opacity 0.6s ease 1.0s' }}
-            data-base-rot="4" data-float-delay="1000" data-float-dur="6000"
-          >
-            {/*
-              Canonical knowledge-status tokens (globals.css:80-89), not literals
-              (#344 visual 1b). These four swatches and the knowledge-graph
-              section's node colours are one viewport apart on the same page, so
-              they have to be the same palette — and it has to be the palette the
-              signed-in product actually uses. Colours only; nothing else in the
-              hero moves.
-            */}
-            <div className="flex flex-col gap-3">
-              <div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-[var(--state-mastery)]" /><span className="text-xs text-[var(--text-dim)] uppercase tracking-wide">Mastered</span></div>
-              <div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-[var(--state-progress)]" /><span className="text-xs text-[var(--text-dim)] uppercase tracking-wide">Learning</span></div>
-              <div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-[var(--state-struggle)]" /><span className="text-xs text-[var(--text-dim)] uppercase tracking-wide">Struggling</span></div>
-              <div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-[var(--state-neutral)]" /><span className="text-xs text-[var(--text-dim)] uppercase tracking-wide">Unexplored</span></div>
-            </div>
-          </div>
+      <Navbar
+        navRef={navRef}
+        heroMounted={state.heroMounted}
+        exploring={state.exploring}
+        navMenuOpen={state.navMenuOpen}
+        theme={navTheme}
+        onToggleMenu={() => set.setNavMenuOpen(!state.navMenuOpen)}
+        onCloseMenu={() => set.setNavMenuOpen(false)}
+        onLogoClick={actions.scrollTop}
+        onSignIn={() => setSignInOpen(true)}
+        onGetStarted={() => actions.scrollToId('cta')}
+      />
 
-          <div
-            className="floating-card absolute w-44 liquid-glass rounded-2xl p-4 flex flex-col gap-2"
-            style={{ position: 'absolute', bottom: '34%', left: '14%', opacity: heroMounted ? 1 : 0, transition: 'opacity 0.6s ease 1.2s' }}
-            data-base-rot="-6" data-float-delay="500" data-float-dur="4500"
-          >
-            <div className="liquid-glass-subtle rounded-xl py-2 flex items-center justify-center gap-2">
-              <PenSquare className="text-[var(--text-dim)] w-4 h-4" strokeWidth={1.5} />
-              <span className="text-xs text-[var(--text-dim)]">Quick Quiz</span>
-            </div>
-            <div className="liquid-glass-subtle rounded-xl py-2 flex items-center justify-center gap-2">
-              <Users className="text-[var(--text-dim)] w-4 h-4" strokeWidth={1.5} />
-              <span className="text-xs text-[var(--text-dim)]">Study Room</span>
-            </div>
-          </div>
-        </div>
+      <SignInModal open={signInOpen} onClose={() => setSignInOpen(false)} />
+
+      <BetaModal
+        open={betaOpen}
+        email={state.email}
+        subscribed={state.subscribed}
+        subscribing={state.subscribing}
+        error={state.subscribeError}
+        onEmail={set.setEmail}
+        onSubscribe={actions.subscribe}
+        onClose={() => setBetaOpen(false)}
+      />
 
-        {/* Hero Content */}
-        <div ref={heroContentRef} className="relative z-20 flex flex-col items-center text-center max-w-4xl px-6">
-          <h1 style={{
-            opacity: heroMounted ? 1 : 0,
-            transform: heroMounted ? 'translateY(0)' : 'translateY(25px)',
-            transition: 'all 700ms cubic-bezier(0.22,1,0.36,1) 300ms',
-          }} className="font-playfair text-5xl sm:text-7xl md:text-8xl lg:text-[10rem] font-semibold leading-[1.15] tracking-tight pb-8 px-4 text-[var(--brand-forest)]">
-            <span>{heroText1 || '\u00A0'}</span>
-          </h1>
+      <Hero
+        heroCanvasRef={heroCanvasRef}
+        glCanvasRef={glCanvasRef}
+        heroContentRef={heroContentRef}
+        heroText0={state.heroText0}
+        heroText1={state.heroText1}
+        onBeta={() => setBetaOpen(true)}
+        onSeeHow={() => actions.scrollToId('gallery')}
+      />
 
-          <p style={{
-            opacity: heroMounted ? 1 : 0,
-            transform: heroMounted ? 'translateY(0)' : 'translateY(25px)',
-            transition: 'all 700ms cubic-bezier(0.22,1,0.36,1) 500ms',
-          }} className="font-playfair text-2xl sm:text-3xl md:text-4xl text-[var(--text-dim)] max-w-xl mx-auto mt-2 leading-relaxed tracking-tight font-medium">
-            {heroText2 || '\u00A0'}
-          </p>
+      {/* ═══ Descent band ═══ */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'relative', height: '38vh',
+          background:
+            'linear-gradient(180deg, #F0F4F2 0%, #E4EEE7 10%, #CFE2D5 22%, #A8C9B5 34%, #74A288 46%, #46765C 58%, #2A5A40 68%, #143725 78%, #0A2417 87%, #081F14 94%, #081F14 100%)',
+        }}
+      />
 
-          <div style={{
-            opacity: heroMounted ? 1 : 0,
-            transform: heroMounted ? 'translateY(0)' : 'translateY(25px)',
-            transition: 'all 700ms cubic-bezier(0.22,1,0.36,1) 700ms',
-          }} className="flex flex-col items-center gap-4 mt-10">
-            <div style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
-              <Button
-                variant="primary"
-                size="xl"
-                onClick={() => { setBetaModalOpen(true); if (betaEverSubmitted) setBetaSubmitted(true); }}
-              >
-                Sign up for Beta Testing
-              </Button>
-            </div>
-          </div>
-        </div>
+      <ActGraph
+        actCanvasRef={actCanvasRef}
+        cinemaRef={cinemaRef}
+        graph={state.graph}
+        exploring={state.exploring}
+        expNode={state.expNode}
+        onSelectNode={set.setExpNode}
+        onExitExplore={actions.exitExplore}
+        onQuiz={() => { actions.exitExplore(); setTimeout(() => actions.openGal(0, null), 260); }}
+        onLearn={() => { actions.exitExplore(); setTimeout(() => actions.openGal(2, null), 260); }}
+      />
 
-        {/* Scroll Indicator */}
-        <div style={{ opacity: heroMounted ? 1 : 0, transition: 'opacity 1s ease 1.2s' }} className="absolute bottom-8 left-1/2 landing-animate-float-indicator flex flex-col items-center">
-          <div className="w-px h-14 landing-divider-v" />
-          <span className="font-jetbrains text-xs tracking-[0.4em] text-[var(--text-dim)] opacity-70 mt-3">SEE WHAT&apos;S INSIDE</span>
-        </div>
-      </section>
+      <RiseBand />
 
-      <div>
-        <KnowledgeGraphDemo />
+      <ActIngest ingestSceneRef={ingestSceneRef} ingestStageRef={ingestStageRef} />
 
-        {/* ═══ Feature bands + bento ═══
-            One arc — material in → practice → retention — with the bento of
-            built surfaces re-energising the middle. Band 3 is the closing
-            claim, so it (not a grid tile) hands off to the CTA; content and
-            side-alternation live in components/marketing/featureBands.tsx. */}
-        <FeatureBand {...FEATURE_BANDS[0]} />
-        <FeatureBand {...FEATURE_BANDS[1]} />
-        <SurfaceBento />
-        <FeatureBand {...FEATURE_BANDS[2]} />
+      <ActTutor carouselRef={carouselRef} tutorMode={state.tutorMode} onSetMode={set.setTutorMode} />
 
-        {/* ═══ Final CTA ═══ */}
-        <section className="landing-section py-32 relative text-center z-10">
-          {/* Soft green wash in the section's upper body.
-              This used to start at full strength on the very top edge, because
-              it was blending DOWN out of HowItWorks' dark-green scroll tint.
-              That section is gone, so a tint that starts at 0.08 on the
-              boundary now fades in from flat paper and reads as a hard seam.
-              Peak it below the edge and start from transparent instead. */}
-          <div
-            aria-hidden
-            className="pointer-events-none absolute left-0 right-0 z-0"
-            style={{
-              top: 0,
-              height: 'clamp(240px, 42vh, 480px)',
-              background:
-                'linear-gradient(to bottom, rgba(20,83,45,0) 0%, rgba(20,83,45,0.05) 35%, rgba(20,83,45,0) 100%)',
-            }}
-          />
-          <div aria-hidden className="absolute inset-0 pointer-events-none z-0">
-            <div className="sapling-mesh-blob sapling-mesh-blob--1" style={{ top: '0%', right: '-15%', left: 'auto', opacity: 0.38, width: '38vw', height: '38vw' }} />
-            <div className="sapling-mesh-blob sapling-mesh-blob--2" style={{ bottom: '0%', left: '-12%', opacity: 0.28, width: '32vw', height: '32vw' }} />
-          </div>
-          <div className="relative z-10 max-w-3xl mx-auto px-6 landing-fade-up">
-            <h2 className="font-playfair text-5xl md:text-7xl font-semibold text-[var(--text)] tracking-tight leading-[1.05]">
-              Ready to <br /> Start <span className="text-[var(--brand-forest)] pr-2">Growing?</span>
-            </h2>
-            <p className="text-[var(--text-dim)] text-lg mt-6 font-light">Join students who learn smarter, not harder.</p>
-            <div className="mt-10 flex flex-col items-center">
-              <Button variant="primary" size="xl" onClick={startOnboarding}>
-                Get Started
-              </Button>
-            </div>
-          </div>
-        </section>
+      <Gallery trackARef={trackARef} trackBRef={trackBRef} onOpen={actions.openGal} />
 
-        {/* ═══ Footer ═══ */}
-        <footer className="landing-section border-t border-white/35 py-12 px-8 relative z-10">
-          <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
-            <div className="flex items-center gap-2">
-              <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '20px', height: '20px' }} />
-              <span className="text-sm font-light tracking-wide text-[var(--text-dim)]">Sapling · © 2026</span>
-            </div>
-            <div className="flex flex-wrap justify-center gap-6">
-              <a href="/about" className="text-[var(--text-dim)] hover:text-[var(--text)] text-sm transition-colors">About</a>
-              <a href="/careers" className="text-[var(--text-dim)] hover:text-[var(--text)] text-sm transition-colors">Careers</a>
-              <a href="/terms" className="text-[var(--text-dim)] hover:text-[var(--text)] text-sm transition-colors">Terms of Service</a>
-              <a href="/privacy" className="text-[var(--text-dim)] hover:text-[var(--text)] text-sm transition-colors">Privacy Policy</a>
-            </div>
-          </div>
-          <div className="max-w-7xl mx-auto mt-8 pt-6 border-t border-white/25 text-center">
-            <p className="text-xs text-[var(--text-dim)] opacity-75 font-light tracking-wide">
-              © 2026 Andres Lopez, Jack He, Luke Cooper, and Jose Gael Cruz-Lopez. All Rights Reserved.
-            </p>
-          </div>
-        </footer>
-      </div>
+      <Faq openFaq={state.openFaq} onToggle={set.setOpenFaq} />
 
-      {/* ═══ Beta / Newsletter Panel ═══ */}
-      {betaModalOpen && betaSubmitted && (
-        <div
-          className={`fixed inset-0 z-[100] flex items-center justify-center p-4 ${betaModalClosing ? 'modal-backdrop-out' : 'modal-backdrop-in'}`}
-          style={{ background: 'rgba(12,18,26,0.45)' }}
-          onClick={closeModal}
-        >
-          <HeroCard
-            className={betaModalClosing ? 'modal-card-out' : 'modal-card-in'}
-            style={{ padding: '40px 52px', textAlign: 'center' }}
-            onClick={e => e.stopPropagation()}
-          >
-            <h2 style={{ margin: 0, fontFamily: "var(--font-playfair), 'Playfair Display', Georgia, serif", fontSize: 32, lineHeight: 1.1, fontWeight: 600, letterSpacing: '-0.02em', color: '#1a1a1a' }}>
-              You&apos;re on the <span style={{ fontStyle: 'italic', color: 'var(--brand-forest)' }}>tree.</span>
-            </h2>
-            <p style={{ margin: '10px 0 0', fontSize: 17, color: '#4b5563', fontStyle: 'italic' }}>
-              See you in the inbox - The Team
-            </p>
-          </HeroCard>
-        </div>
-      )}
-      {betaModalOpen && !betaSubmitted && (
-        <div
-          className={`fixed inset-0 z-[100] flex items-center justify-center p-4 ${betaModalClosing ? 'modal-backdrop-out' : 'modal-backdrop-in'}`}
-          style={{ background: 'rgba(12,18,26,0.65)' }}
-          onClick={() => { if (!betaSubmitting) closeModal(); }}
-        >
-          <HeroCard
-            className={`relative w-full ${betaModalClosing ? 'modal-card-out' : 'modal-card-in'}`}
-            style={{
-              maxWidth: 'min(1040px, 94vw)',
-              width: '100%',
-              display: 'grid',
-              gridTemplateColumns: '1fr 1px 1fr',
-              minHeight: 560,
-              maxHeight: 'calc(100vh - 48px)',
-              overflow: 'hidden',
-            }}
-            onClick={e => e.stopPropagation()}
-            role="dialog"
-            aria-modal="true"
-            aria-label="Beta access and newsletter signup"
-          >
-            {/* Close */}
-            <button
-              onClick={closeModal}
-              aria-label="Close dialog"
-              style={{
-                position: 'absolute', top: 18, right: 18, zIndex: 10,
-                width: 32, height: 32, borderRadius: 16,
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                color: '#4b5563', fontSize: 20, lineHeight: 1,
-                background: 'none', border: 'none', cursor: 'pointer',
-                transition: 'background 0.15s',
-              }}
-              onMouseEnter={e => (e.currentTarget.style.background = 'rgba(107,114,128,0.1)')}
-              onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
-            >×</button>
+      <Journal
+        email={state.email}
+        subscribed={state.subscribed}
+        subscribing={state.subscribing}
+        error={state.subscribeError}
+        onEmail={set.setEmail}
+        onSubscribe={actions.subscribe}
+      />
 
-            {/* ── Left: brand + perks panel ── */}
-            <div className="hero-surface" style={{
-              padding: '36px 36px 32px',
-              display: 'flex', flexDirection: 'column', gap: 22,
-            }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                <img src="/sapling-icon.svg" alt="Sapling" style={{ width: 22, height: 22 }} />
-                <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
-              </div>
-              <div>
-                <div style={{ fontFamily: "var(--font-jetbrains), 'JetBrains Mono', monospace", fontSize: 10.5, color: '#6b7280', letterSpacing: '0.22em', marginBottom: 14, textTransform: 'uppercase', fontWeight: 600 }}>Early access</div>
-                <h2 style={{ margin: 0, fontFamily: "var(--font-playfair), 'Playfair Display', Georgia, serif", fontSize: 44, lineHeight: 1.05, fontWeight: 700, color: '#1a1a1a', letterSpacing: '-0.02em' }}>
-                  Learn early.<br /><span style={{ fontStyle: 'italic', fontWeight: 800, color: 'var(--brand-forest)', fontFamily: "var(--font-playfair), 'Playfair Display', Georgia, serif" }}>Grow</span> with us.
-                </h2>
-                <p style={{ margin: '14px 0 0', fontSize: 13.5, lineHeight: 1.55, color: '#4b5563', maxWidth: 360 }}>
-                  Sapling is being built alongside the students who&apos;ll use it most. Join early and help shape what it becomes.
-                </p>
-              </div>
-              <div style={{ height: '1px', flexShrink: 0, background: 'rgba(107,114,128,0.15)' }} />
-              <div>
-                <h3 style={{ margin: '0 0 12px', fontFamily: "var(--font-playfair), 'Playfair Display', Georgia, serif", fontSize: 22, fontWeight: 700, color: '#1a1a1a', letterSpacing: '-0.02em' }}>
-                  Beta Tester Role
-                </h3>
-                <div className="rounded-xl px-4 py-3 flex items-center gap-3" style={{ background: '#EBE6DC', border: '1px solid #D6D1C6' }}>
-                  <div className="w-11 h-11 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: '#374151', fontSize: '13px', fontWeight: 700, color: '#fff', fontFamily: "var(--font-dm-sans), 'DM Sans', sans-serif", letterSpacing: '0.02em' }}>
-                    AK
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <span style={{ fontSize: '14px', fontWeight: 700, color: '#111827', fontFamily: "var(--font-dm-sans), 'DM Sans', sans-serif" }}>Alex Kim</span>
-                      <span className="font-jetbrains" style={{
-                        display: 'inline-flex', alignItems: 'center',
-                        padding: '3px 10px', borderRadius: '9999px',
-                        fontSize: '10px', fontWeight: 500,
-                        letterSpacing: '0.1em', textTransform: 'uppercase',
-                        background: 'rgba(212,175,55,0.08)', color: '#C9A227',
-                        border: '1.5px solid rgba(212,175,55,0.55)',
-                      }}>
-                        Beta Tester
-                      </span>
-                    </div>
-                    <span style={{ fontSize: '11px', color: '#9CA3AF', fontFamily: "var(--font-dm-sans), 'DM Sans', sans-serif" }}>@alexkim</span>
-                  </div>
-                </div>
-                <p style={{ margin: '10px 2px 0', fontSize: 12.5, color: '#6b7280', lineHeight: 1.5, fontStyle: 'italic' }}>
-                  The first mark on your profile. A permanent record of showing up early.
-                </p>
-              </div>
-            </div>
+      <FinalCta onGetStarted={() => setBetaOpen(true)} />
 
-            {/* ── Column divider ── */}
-            <div style={{ background: 'rgba(107,114,128,0.15)', alignSelf: 'stretch' }} />
+      <SiteFooter />
 
-            {/* ── Right: newsletter form ── */}
-            <div className="hero-surface" style={{ padding: '44px 42px 36px', display: 'flex', flexDirection: 'column' }}>
-              <div style={{ fontFamily: "var(--font-jetbrains), 'JetBrains Mono', monospace", fontSize: 10, color: '#D97706', letterSpacing: '0.3em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 10 }}>
-                ● Issue 001 dropping soon
-              </div>
-              <h1 style={{ margin: 0, fontFamily: "var(--font-playfair), 'Playfair Display', Georgia, serif", fontSize: 48, lineHeight: 1.05, fontWeight: 600, letterSpacing: '-0.025em', color: '#1a1a1a' }}>
-                Join the<br />
-                <span style={{ fontStyle: 'italic', fontWeight: 800, color: 'var(--brand-forest)', fontFamily: "var(--font-playfair), 'Playfair Display', Georgia, serif" }}>Newsletter</span>
-              </h1>
-              <p style={{ margin: '14px 0 0', fontSize: 15, color: '#4b5563', lineHeight: 1.5 }}>
-                Hear fun stories from students like you.
-              </p>
-              <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
-                {([
-                  { dot: BRAND_FOREST, title: 'New features, first.', body: 'Every study mode, knowledge tool, and capability before anyone else sees it.' },
-                  { dot: '#D97706', title: 'Real notes from the team.', body: "What we're figuring out as we build. Honest, occasional, and worth opening." },
-                  { dot: '#8A63D2', title: 'Your input shapes what we build.', body: 'Early polls, roadmap previews, and a direct line to the people building it.' },
-                ] as Array<{ dot: string; title: string; body: string }>).map(({ dot, title, body }) => (
-                  <div key={title} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12, alignItems: 'start' }}>
-                    <div style={{ width: 8, height: 8, borderRadius: '50%', background: dot, boxShadow: `0 0 8px ${dot}55`, marginTop: 8, flexShrink: 0 }} />
-                    <div>
-                      <div style={{ fontSize: 14.5, fontWeight: 600, color: '#1a1a1a', marginBottom: 2, letterSpacing: '-0.005em' }}>{title}</div>
-                      <div style={{ fontSize: 12.5, color: '#4b5563', lineHeight: 1.5 }}>{body}</div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-              <form
-                onSubmit={async e => {
-                  e.preventDefault();
-                  const trimmed = betaEmail.trim();
-                  if (!trimmed) { setBetaEmailError('Enter a valid email (e.g. you@example.com)'); return; }
-                  const [local, domain] = trimmed.split('@');
-                  if (!local || !domain || !domain.includes('.')) {
-                    setBetaEmailError('Enter a valid email (e.g. you@example.com)');
-                    return;
-                  }
-                  setBetaEmailError('');
-                  setBetaSubmitting(true);
-                  try {
-                    await fetch(`${API_URL}/api/newsletter/subscribe`, {
-                      method: 'POST',
-                      headers: { 'Content-Type': 'application/json' },
-                      body: JSON.stringify({ email: betaEmail.trim() }),
-                    });
-                  } catch {
-                    // fail silently — still show success
-                  }
-                  setBetaSubmitting(false);
-                  setBetaSubmitted(true);
-                  setBetaEverSubmitted(true);
-                }}
-                style={{ marginTop: 'auto', paddingTop: 28 }}
-              >
-                <div style={{ position: 'relative', marginBottom: 10 }}>
-                  <input
-                    type="text"
-                    aria-label="Email address"
-                    placeholder="you@example.com"
-                    value={betaEmail}
-                    onChange={e => { setBetaEmail(e.target.value); setBetaEmailError(''); }}
-                    style={{
-                      width: '100%', padding: '14px 16px', fontSize: 14,
-                      background: 'rgba(255,255,255,0.6)',
-                      border: '1.5px solid rgba(107,114,128,0.25)',
-                      borderRadius: 10,
-                      transition: 'border-color 0.15s, box-shadow 0.15s',
-                      fontFamily: "var(--font-dm-sans), 'DM Sans', sans-serif",
-                      color: '#1a1a1a', boxSizing: 'border-box',
-                    }}
-                    onFocus={e => { e.target.style.borderColor = 'var(--brand-forest)'; e.target.style.boxShadow = '0 0 0 3px rgba(27,108,66,0.12)'; }}
-                    onBlur={e => { e.target.style.borderColor = 'rgba(107,114,128,0.25)'; e.target.style.boxShadow = 'none'; }}
-                  />
-                  {betaEmailError && (
-                    <p style={{ margin: '6px 0 0', fontSize: 11.5, color: '#dc2626', fontFamily: "var(--font-dm-sans), 'DM Sans', sans-serif" }}>
-                      {betaEmailError}
-                    </p>
-                  )}
-                </div>
-                <button
-                  type="submit"
-                  disabled={betaSubmitting}
-                  style={{
-                    width: '100%', padding: '14px 16px', borderRadius: 10,
-                    background: betaSubmitting ? '#4b5563' : 'var(--brand-forest)', color: '#fff',
-                    fontSize: 14, fontWeight: 600, letterSpacing: '0.02em',
-                    boxShadow: '0 8px 24px rgba(27,108,66,0.3)',
-                    border: 'none', cursor: betaSubmitting ? 'default' : 'pointer',
-                    transition: 'all 0.18s', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
-                    fontFamily: "var(--font-dm-sans), 'DM Sans', sans-serif",
-                  }}
-                  onMouseEnter={e => { if (!betaSubmitting) e.currentTarget.style.background = 'var(--brand-forest-hover)'; }}
-                  onMouseLeave={e => { if (!betaSubmitting) e.currentTarget.style.background = 'var(--brand-forest)'; }}
-                >
-                  {betaSubmitting ? 'Planting your node…' : <>Sign Me Up <span style={{ opacity: 0.7 }}>→</span></>}
-                </button>
-                <p style={{ margin: '12px 0 0', fontSize: 11.5, color: '#6b7280', textAlign: 'center', lineHeight: 1.5 }}>
-                  By joining the newsletter, you&apos;ll also be added to the beta waitlist.
-                </p>
-              </form>
-            </div>
-          </HeroCard>
-        </div>
-      )}
+      <SectionNav
+        open={state.jumpOpen}
+        onToggle={() => set.setJumpOpen(!state.jumpOpen)}
+        onJump={actions.scrollToId}
+        onTop={actions.scrollTop}
+      />
 
-      {/* ═══ Sign-in modal ═══ */}
-      <SignInModal
-        open={signInOpen}
-        onClose={() => { setSignInOpen(false); setSignInError(null); }}
-        errorCode={signInError}
+      <FeatureLab
+        index={state.galIdx}
+        panelRef={actions.registerPanel}
+        onClose={actions.closeGal}
+        onPick={(i) => actions.openGal(i, null)}
       />
     </div>
   );
diff --git a/frontend/src/app/(public)/team/page.tsx b/frontend/src/app/(public)/team/page.tsx
new file mode 100644
index 00000000..e90683fb
--- /dev/null
+++ b/frontend/src/app/(public)/team/page.tsx
@@ -0,0 +1,91 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { CompanionShell } from '@/components/companion/CompanionShell';
+import { TEAM_MEMBERS, TEAM_WAYS } from '@/lib/landing/companionContent';
+
+/**
+ * Meet the team.
+ *
+ * Ported from `Meet the Team.dc.html`. Square portrait tiles over a "How we
+ * work" list, closing on a byline and a beta link. The source's awards block
+ * is dropped here — /about already carries it, and one copy is enough.
+ *
+ * Portrait frames are empty: the source fills them with its `image-slot`
+ * drop zone ("Drop a photo of …"), an authoring affordance, and the import
+ * ships no photographs of the team.
+ */
+
+export const metadata: Metadata = {
+  title: 'Meet the team',
+  description:
+    'A small team out of Boston University who got tired of study tools that did not know what they were studying.',
+};
+
+const MONO = "'JetBrains Mono',monospace";
+const SERIF = "'Spectral',Georgia,serif";
+const DISPLAY = "'Playfair Display',Georgia,serif";
+
+const EYEBROW: React.CSSProperties = {
+  display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em',
+  textTransform: 'uppercase', color: '#2D8F5C',
+};
+
+export default function TeamPage() {
+  return (
+    <CompanionShell current="/team">
+      <div style={{ flex: 1, minWidth: 0, width: '100%', maxWidth: 880, margin: '0 auto', padding: '64px 32px', boxSizing: 'border-box', position: 'relative' }}>
+        {/* two motes drifting at the page edges */}
+        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
+          <span style={{ position: 'absolute', right: '-2%', top: '8%', width: 8, height: 8, borderRadius: 99, background: '#2D8F5C', opacity: 0.28, animation: 'nodeDrift 14s ease-in-out -3s infinite' }} />
+          <span style={{ position: 'absolute', left: '-3%', top: '46%', width: 6, height: 6, borderRadius: 99, background: '#1B6C42', opacity: 0.22, animation: 'nodeDrift 17s ease-in-out -8s infinite' }} />
+        </div>
+
+        <span style={{ display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6f6857', animation: 'fadeUp 600ms ease both' }}>
+          The people
+        </span>
+        <h1 style={{ margin: '14px 0 0', fontFamily: DISPLAY, fontWeight: 500, fontSize: 48, lineHeight: 1.15, letterSpacing: '-0.015em', color: '#1a1814', animation: 'fadeUp 700ms ease 60ms both' }}>
+          Meet the team
+        </h1>
+        <p style={{ margin: '24px 0 0', fontFamily: SERIF, fontWeight: 400, fontSize: 16, lineHeight: 1.6, color: '#3f3b31', maxWidth: '62ch', animation: 'fadeUp 700ms ease 140ms both' }}>
+          A small team out of Boston University who got tired of study tools that did not know what
+          they were studying. We build Sapling between problem sets, and we use it for our own
+          classes first.
+        </p>
+
+        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px,1fr))', gap: 20 }}>
+          {TEAM_MEMBERS.map((m) => (
+            <div key={m.name} style={{ display: 'flex', flexDirection: 'column', gap: 14, animation: 'fadeUp 700ms ease both', animationDelay: m.delay }}>
+              <div style={{ position: 'relative', width: '100%', aspectRatio: '1 / 1', borderRadius: 14, overflow: 'hidden', background: '#ebe6dc', border: '1px solid rgba(42,39,31,0.10)' }} />
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+                <span style={{ fontSize: 15.5, fontWeight: 600, color: '#1a1814', letterSpacing: '-0.01em' }}>{m.name}</span>
+                <span style={{ fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2D8F5C' }}>{m.role}</span>
+                <span style={{ fontFamily: SERIF, fontSize: 14, lineHeight: 1.6, color: '#3f3b31' }}>{m.body}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div style={{ marginTop: 56, paddingTop: 32, borderTop: '1px solid rgba(42,39,31,0.10)' }}>
+          <span style={EYEBROW}>How we work</span>
+          <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
+            {TEAM_WAYS.map((w) => (
+              <div key={w} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
+                <span style={{ color: '#2D8F5C', marginTop: 2, flex: '0 0 auto' }}>&bull;</span>
+                <span style={{ fontFamily: SERIF, fontSize: 15, lineHeight: 1.6, color: '#3f3b31' }}>{w}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div style={{ marginTop: 48, paddingTop: 32, borderTop: '1px solid rgba(42,39,31,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18, flexWrap: 'wrap' }}>
+          <span style={{ fontSize: 13, color: '#6f6857' }}>
+            Built by Andres Lopez, Jack He, Luke Cooper, and Jose Gael Cruz-Lopez © 2026
+          </span>
+          <Link href="/#newsletter" style={{ fontSize: 13, fontWeight: 600, color: '#1B6C42' }}>
+            Join the beta →
+          </Link>
+        </div>
+      </div>
+    </CompanionShell>
+  );
+}
diff --git a/frontend/src/app/(public)/wiki/page.tsx b/frontend/src/app/(public)/wiki/page.tsx
new file mode 100644
index 00000000..9a88d63f
--- /dev/null
+++ b/frontend/src/app/(public)/wiki/page.tsx
@@ -0,0 +1,197 @@
+import type { Metadata } from 'next';
+import { CompanionShell } from '@/components/companion/CompanionShell';
+import {
+  WIKI_DATA_FACTS, WIKI_GRAPH_TERMS, WIKI_LETTERS, WIKI_MODES,
+  WIKI_PIPELINE, WIKI_RATINGS, WIKI_TIERS, WIKI_TOC,
+} from '@/lib/landing/companionContent';
+
+/**
+ * Wiki.
+ *
+ * Ported from `Wiki.dc.html`. A sticky contents rail beside seven definition
+ * sections, each laid out for what it holds: two-column term/definition rows
+ * for the graph and tutor modes, a four-column row with a tier swatch for
+ * mastery, cards for the review intervals, a numbered list for ingestion, and
+ * chips for the grade bands.
+ */
+
+export const metadata: Metadata = {
+  title: 'Wiki',
+  description:
+    'Exact definitions for the terms and numbers Sapling puts on screen. Every value here is the one the product actually uses.',
+};
+
+const MONO = "'JetBrains Mono',monospace";
+const SERIF = "'Spectral',Georgia,serif";
+const DISPLAY = "'Playfair Display',Georgia,serif";
+
+const H2: React.CSSProperties = {
+  margin: 0, fontFamily: DISPLAY, fontWeight: 500, fontSize: 26,
+  lineHeight: 1.2, letterSpacing: '-0.015em', scrollMarginTop: 84,
+};
+const LEDE: React.CSSProperties = {
+  margin: '12px 0 0', fontFamily: SERIF, fontSize: 15, lineHeight: 1.6,
+  color: '#3f3b31', maxWidth: '64ch',
+};
+/** Definition text, shared by every row style below. */
+const DEF: React.CSSProperties = { fontFamily: SERIF, fontSize: 14.5, lineHeight: 1.6, color: '#3f3b31' };
+/** The hairline that separates rows within a section. */
+const ROW_TOP = '1px solid rgba(42,39,31,0.08)';
+
+/** `dot`/`tone` come from the source as CSS declaration strings. */
+function cssColor(decl: string): string {
+  return decl.replace(/^(background|color):/, '').replace(/;$/, '').trim();
+}
+
+export default function WikiPage() {
+  return (
+    <CompanionShell current="/wiki">
+      <div style={{ flex: 1, minWidth: 0, width: '100%', maxWidth: 1060, margin: '0 auto', padding: '64px 32px', boxSizing: 'border-box' }}>
+        <span style={{ display: 'block', fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6f6857', animation: 'fadeUp 600ms ease both' }}>
+          Reference
+        </span>
+        <h1 style={{ margin: '14px 0 0', fontFamily: DISPLAY, fontWeight: 500, fontSize: 48, lineHeight: 1.15, letterSpacing: '-0.015em', animation: 'fadeUp 700ms ease 60ms both' }}>
+          Wiki
+        </h1>
+        <p style={{ margin: '24px 0 0', fontFamily: SERIF, fontSize: 16, lineHeight: 1.6, color: '#3f3b31', maxWidth: '62ch', animation: 'fadeUp 700ms ease 140ms both' }}>
+          Exact definitions for the terms and numbers Sapling puts on screen. Every value here is
+          the one the product actually uses.
+        </p>
+
+        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: 'minmax(0,190px) minmax(0,1fr)', gap: 'clamp(24px,4vw,56px)', alignItems: 'start' }}>
+          <aside style={{ position: 'sticky', top: 84, display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <span style={{ fontFamily: MONO, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6f6857', marginBottom: 8 }}>
+              Contents
+            </span>
+            {WIKI_TOC.map((t) => (
+              <a key={t.href} href={t.href} className="cp-navlink" style={{ fontSize: 13.5, color: '#6f6857', padding: '5px 0' }}>
+                {t.title}
+              </a>
+            ))}
+          </aside>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 52 }}>
+            <section id="graph">
+              <h2 style={H2}>Knowledge graph</h2>
+              <p style={LEDE}>
+                One node per concept in a course, joined by an edge when learning one depends on the
+                other. Nodes are positioned by unit, so the shape of the graph is the shape of the
+                syllabus.
+              </p>
+              <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
+                {WIKI_GRAPH_TERMS.map((g) => (
+                  <div key={g.term} style={{ display: 'grid', gridTemplateColumns: 'minmax(0,140px) minmax(0,1fr)', gap: 18, padding: '12px 0', borderTop: ROW_TOP }}>
+                    <span style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '0.06em', color: '#1B6C42' }}>{g.term}</span>
+                    <span style={DEF}>{g.def}</span>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section id="mastery">
+              <h2 style={H2}>Mastery tiers</h2>
+              <p style={LEDE}>
+                Every node carries a mastery score from 0 to 1, drawn as a ring around it. The score
+                moves on demonstrated understanding, not time spent.
+              </p>
+              <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 0 }}>
+                {WIKI_TIERS.map((t) => (
+                  <div key={t.name} style={{ display: 'grid', gridTemplateColumns: '12px minmax(0,104px) minmax(0,86px) minmax(0,1fr)', gap: 14, alignItems: 'baseline', padding: '13px 0', borderTop: ROW_TOP }}>
+                    <span style={{ width: 10, height: 10, borderRadius: 99, background: cssColor(t.dot) }} />
+                    <span style={{ fontSize: 14, fontWeight: 600, color: '#1a1814' }}>{t.name}</span>
+                    <span style={{ fontFamily: MONO, fontSize: 11, lineHeight: 1.5, color: '#6f6857', whiteSpace: 'nowrap' }}>{t.range}</span>
+                    <span style={DEF}>{t.meaning}</span>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section id="review">
+              <h2 style={H2}>Spaced review</h2>
+              <p style={LEDE}>
+                After each card you rate your recall, and that rating sets when the card comes back.
+                Rating a card also writes to the mastery score of the concept it tests.
+              </p>
+              <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px,1fr))', gap: 12 }}>
+                {WIKI_RATINGS.map((r) => (
+                  <div key={r.label} style={{ border: '1px solid rgba(42,39,31,0.10)', borderRadius: 12, padding: 16, background: '#faf8f3', display: 'flex', flexDirection: 'column', gap: 6 }}>
+                    <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <span style={{ fontSize: 14.5, fontWeight: 600, color: '#1a1814' }}>{r.label}</span>
+                      <span style={{ fontFamily: MONO, fontSize: 10, color: '#6f6857' }}>KEY {r.key}</span>
+                    </span>
+                    <span style={{ fontFamily: MONO, fontSize: 12, color: cssColor(r.tone) }}>next in {r.due}</span>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section id="tutor">
+              <h2 style={H2}>Tutor modes</h2>
+              <p style={LEDE}>
+                Three ways to work the same concept. All three are grounded in documents you
+                uploaded, and none of them will hand over an answer.
+              </p>
+              <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 0 }}>
+                {WIKI_MODES.map((m) => (
+                  <div key={m.name} style={{ display: 'grid', gridTemplateColumns: 'minmax(0,120px) minmax(0,1fr)', gap: 18, padding: '13px 0', borderTop: ROW_TOP }}>
+                    <span style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#1B6C42' }}>{m.name}</span>
+                    <span style={DEF}>{m.def}</span>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section id="ingestion">
+              <h2 style={H2}>Ingestion</h2>
+              <p style={LEDE}>
+                What happens to a file after you drop it in. Each step is visible in the product, so
+                you can always see why a concept or a date exists.
+              </p>
+              <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 12 }}>
+                {WIKI_PIPELINE.map((p) => (
+                  <div key={p.num} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
+                    <span style={{ fontFamily: MONO, fontSize: 10, letterSpacing: '0.16em', color: '#2D8F5C', paddingTop: 4, flex: '0 0 auto' }}>{p.num}</span>
+                    <span style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                      <span style={{ fontSize: 14.5, fontWeight: 600, color: '#1a1814' }}>{p.title}</span>
+                      <span style={{ ...DEF, maxWidth: '60ch' }}>{p.body}</span>
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            <section id="grades">
+              <h2 style={H2}>Grade scale</h2>
+              <p style={LEDE}>
+                Category weights come from your syllabus, and every score rolls into one weighted
+                number. These are the letter bands it maps onto.
+              </p>
+              <div style={{ marginTop: 18, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                {WIKI_LETTERS.map((l) => (
+                  <span key={l.letter} style={{ display: 'flex', alignItems: 'baseline', gap: 7, padding: '7px 12px', borderRadius: 8, background: '#faf8f3', border: '1px solid rgba(42,39,31,0.10)' }}>
+                    <b style={{ fontSize: 13, fontWeight: 600, color: '#1a1814' }}>{l.letter}</b>
+                    <span style={{ fontFamily: MONO, fontSize: 11, color: '#6f6857' }}>{l.min}</span>
+                  </span>
+                ))}
+              </div>
+            </section>
+
+            <section id="privacy">
+              <h2 style={H2}>Your data</h2>
+              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
+                {WIKI_DATA_FACTS.map((d) => (
+                  <div key={d} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#2D8F5C" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3 }}>
+                      <path d="M20 6L9 17l-5-5" />
+                    </svg>
+                    <span style={{ ...DEF, maxWidth: '62ch' }}>{d}</span>
+                  </div>
+                ))}
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </CompanionShell>
+  );
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 0c6bc7a2..4044eb61 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1871,3 +1871,241 @@ input[type="reset"]:disabled {
   border-radius: var(--r-full);
   background: var(--grade);
 }
+
+/* ══════════════════════════════════════════════════════════════════
+   LANDING (design-component ports) — shared foundation
+   Ported from the `Sapling Landing *.dc.html` design components.
+
+   Scoped to .landing-dc, worn by every ported landing route (/v4, /v5),
+   so these sit alongside the existing .landing-page surface above rather
+   than replacing it in-place.
+
+   Fonts reuse the app's next/font variables: DM Sans, Spectral, Playfair
+   Display and JetBrains Mono are exactly the four families the source
+   pulls from Google Fonts, so no extra webfont request is needed.
+
+   prefers-reduced-motion is deliberately NOT repeated here — the global
+   block near the top of this file already collapses animation and
+   transition durations to 0.01ms, a superset of the source's rule.
+   ══════════════════════════════════════════════════════════════════ */
+
+.landing-dc {
+  /* Core palette, literal source values.
+     These are NOT the app's brand tokens and must not be consolidated into
+     them: #0C5638 / #0E9E5A are their own scale, distinct from
+     --brand-forest (#1B6C42) / --brand-forest-bright (#2D8F5C). */
+  --ld-deep:       #0C5638;
+  --ld-bright:     #0E9E5A;
+  --ld-mid:        #4FA574;
+  --ld-pale:       #8FD9A8;
+  --ld-coral:      #E27A63;
+  --ld-ink:        #12201A;
+  --ld-muted:      #61726A;
+  --ld-page:       #f0f4f2;
+  --ld-stage:      #081F14;
+  --ld-stage-deep: #061710;
+
+  /* Mastery tiers — mirrored by XTIER in lib/landing/course.ts.
+     --ld-tier-unexplored is byte-identical to --state-neutral today but is
+     kept literal for the same reason --fallback-muted is: distinct concept,
+     so a future neutral-state change can't silently move a landing tier. */
+  --ld-tier-mastered:   #0E9E5A;
+  --ld-tier-learning:   #4FA574;
+  --ld-tier-struggling: #E27A63;
+  --ld-tier-unexplored: #9a9a9a;
+
+  /* The source uses Spectral for the wordmark + display serif and Playfair
+     as the secondary serif — the reverse of the app's --font-display /
+     --font-serif roles, so bind to the concrete families, not the roles. */
+  --ld-font-sans:    var(--font-dm-sans), 'DM Sans', system-ui, sans-serif;
+  --ld-font-display: var(--font-spectral), 'Spectral', georgia, serif;
+  --ld-font-serif:   var(--font-playfair), 'Playfair Display', georgia, serif;
+  --ld-font-mono:    var(--font-jetbrains), 'JetBrains Mono', ui-monospace, monospace;
+
+  background: var(--ld-page);
+  color: var(--ld-ink);
+  font-family: var(--ld-font-sans);
+  overflow-x: clip;
+}
+
+.landing-dc a       { color: var(--ld-deep); text-decoration: none; }
+.landing-dc a:hover { color: var(--ld-bright); }
+
+/* Three responsive rules carry the whole layout. */
+@media (max-width: 1023px) {
+  .landing-dc .floating-card { display: none !important; }
+  .landing-dc .drag-field    { display: none !important; }
+}
+@media (max-width: 1180px) {
+  .landing-dc .nav-tabs    { display: none !important; }
+  .landing-dc .nav-compact { display: flex !important; }
+}
+
+.landing-dc ::-webkit-scrollbar       { width: 6px; }
+.landing-dc ::-webkit-scrollbar-track { background: var(--ld-page); }
+.landing-dc ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
+.landing-dc .gal-rail                     { scrollbar-width: none; }
+.landing-dc .gal-rail::-webkit-scrollbar  { display: none; }
+
+/* ── Intro lockup ──────────────────────────────────────────────────
+   A hand-tuned causal sequence, 2.4s, played once with `both`. The stem
+   passes each joint before that part grows; the leaves then settle under
+   their own weight. The per-keyframe animation-timing-function
+   declarations ARE the effect — collapsing them onto one shared curve
+   destroys it. Do not "simplify" these.
+   ────────────────────────────────────────────────────────────────── */
+@keyframes s1Stem   { 0%,15% { stroke-dashoffset:27; } 34%,100% { stroke-dashoffset:0; } }
+@keyframes s1LeafLo {
+  0%,27% { transform:scale(0.05) rotate(9deg);  opacity:0; animation-timing-function:cubic-bezier(0.16,0.9,0.3,1); }
+  36%    { transform:scale(1.03) rotate(5deg);  opacity:1; animation-timing-function:cubic-bezier(0.5,0,0.85,0.3); }
+  42%    { transform:scale(1) rotate(-4.5deg);  opacity:1; animation-timing-function:cubic-bezier(0.4,0,0.6,1); }
+  46%    { transform:scale(1) rotate(-0.4deg);  opacity:1; animation-timing-function:cubic-bezier(0.4,0,0.6,1); }
+  51%,100% { transform:scale(1) rotate(-2.4deg); opacity:1; } }
+@keyframes s1LeafHi {
+  0%,33% { transform:scale(0.05) rotate(-9deg); opacity:0; animation-timing-function:cubic-bezier(0.16,0.9,0.3,1); }
+  42%    { transform:scale(1.03) rotate(-5deg); opacity:1; animation-timing-function:cubic-bezier(0.5,0,0.85,0.3); }
+  48%    { transform:scale(1) rotate(5.4deg);   opacity:1; animation-timing-function:cubic-bezier(0.4,0,0.6,1); }
+  52%    { transform:scale(1) rotate(0.8deg);   opacity:1; animation-timing-function:cubic-bezier(0.4,0,0.6,1); }
+  57%,100% { transform:scale(1) rotate(3.2deg); opacity:1; } }
+@keyframes s1Bud    { 0%,29% { transform:scale(0); } 35%,100% { transform:scale(1); } }
+@keyframes s1Word   { 0%,2%  { opacity:0; transform:translateY(8px); } 14%,100% { opacity:1; transform:translateY(0); } }
+@keyframes s1Rule   { 0%,60% { transform:scaleX(0); } 74%,100% { transform:scaleX(1); } }
+
+/* ── Ambient / hero ────────────────────────────────────────────────── */
+@keyframes saplingBlob { 0% { transform:translate(0,0) scale(1); } 33% { transform:translate(30px,-50px) scale(1.1); } 66% { transform:translate(-20px,20px) scale(0.9); } 100% { transform:translate(0,0) scale(1); } }
+@keyframes introOrbit { to { transform:rotate(360deg); } }
+@keyframes floatIndicator { 0%,100% { transform:translateY(0) translateX(-50%); } 50% { transform:translateY(6px) translateX(-50%); } }
+@keyframes betaGlow { 0%,100% { box-shadow:0 0 0 0 rgba(14,158,90,0), 0 4px 20px rgba(14,158,90,0.15); } 50% { box-shadow:0 0 0 5px rgba(14,158,90,0.45), 0 4px 28px rgba(14,158,90,0.3); } }
+@keyframes nodeFloatA { 0%,100% { transform:translate(0,0); } 33% { transform:translate(16px,-24px); } 66% { transform:translate(-12px,14px); } }
+@keyframes nodeFloatB { 0%,100% { transform:translate(0,0); } 40% { transform:translate(-18px,18px); } 75% { transform:translate(10px,-12px); } }
+
+/* ── Gallery card miniatures ───────────────────────────────────────── */
+@keyframes popHold { 0% { opacity:0; transform:translateY(-10px) scale(0.94); } 6% { opacity:1; transform:translateY(0) scale(1); } 86% { opacity:1; } 96% { opacity:0; } 100% { opacity:0; } }
+@keyframes chipSwapA { 0%,42% { opacity:1; transform:translateY(0); } 50%,92% { opacity:0; transform:translateY(-8px); } 100% { opacity:1; transform:translateY(0); } }
+@keyframes chipSwapB { 0%,42% { opacity:0; transform:translateY(8px); } 50%,92% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(8px); } }
+@keyframes flipLoop { 0%,38% { transform:rotateY(0deg); } 50%,88% { transform:rotateY(180deg); } 100% { transform:rotateY(360deg); } }
+@keyframes lineReveal { 0% { clip-path:inset(0 100% 0 0); } 12% { clip-path:inset(0 -4px 0 0); } 90% { clip-path:inset(0 -4px 0 0); } 100% { clip-path:inset(0 100% 0 0); } }
+@keyframes underSweep { 0%,8% { transform:scaleX(0); } 18% { transform:scaleX(1); } 88% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
+@keyframes barGrow { 0% { transform:scaleY(0.08); } 14% { transform:scaleY(1); } 86% { transform:scaleY(1); } 100% { transform:scaleY(0.08); } }
+@keyframes coverRise { 0% { transform:translateY(46px) rotate(-1deg); opacity:0; } 16% { transform:translateY(0) rotate(-1deg); opacity:1; } 84% { transform:translateY(0) rotate(-1deg); opacity:1; } 100% { transform:translateY(46px) rotate(-1deg); opacity:0; } }
+@keyframes ringDraw { 0% { stroke-dashoffset:100; } 30%,85% { stroke-dashoffset:8.8; } 100% { stroke-dashoffset:100; } }
+@keyframes gaugeFloat { 0%,100% { transform:translateY(0); } 30% { transform:translateY(-52px); } 65% { transform:translateY(20px); } }
+@keyframes answerTick { 0%,55% { box-shadow:0 0 0 0 rgba(14,158,90,0); } 62% { box-shadow:0 0 0 7px rgba(14,158,90,0.22); } 72%,100% { box-shadow:0 0 0 0 rgba(14,158,90,0); } }
+@keyframes waveBar { 0%,100% { transform:scaleY(0.25); } 50% { transform:scaleY(1); } }
+@keyframes gaugeMini { 0%,100% { transform:translate(-50%,0); } 30% { transform:translate(-50%,-32px); } 65% { transform:translate(-50%,12px); } }
+@keyframes coverMini { 0% { transform:translateY(30px); opacity:0; } 16% { transform:translateY(0); opacity:1; } 84% { transform:translateY(0); opacity:1; } 100% { transform:translateY(30px); opacity:0; } }
+@keyframes cursorMini { 0%,100% { transform:translate(0,0); } 30% { transform:translate(22px,-14px); } 70% { transform:translate(-16px,10px); } }
+@keyframes cardFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
+@keyframes scanSweep { 0% { transform:translateY(-14px); opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { transform:translateY(212px); opacity:0; } }
+@keyframes ocrBlink { 0%,100% { opacity:0.35; } 50% { opacity:1; } }
+@keyframes panelFade { from { opacity:0; } to { opacity:1; } }
+@keyframes fillX { 0% { transform:scaleX(0); } 18% { transform:scaleX(1); } 86% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
+@keyframes typingDot { 0%,60%,100% { opacity:0.25; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
+@keyframes ringPop { 0% { opacity:0; r:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { opacity:0; } }
+@keyframes cursorDrift { 0%,100% { transform:translate(0,0); } 30% { transform:translate(38px,-22px); } 70% { transform:translate(-26px,16px); } }
+
+/* ── Hover states ──────────────────────────────────────────────────
+   The source expresses these with a `style-hover` attribute, which is a
+   design-canvas construct with no inline equivalent in React. Same values,
+   moved into real CSS.
+   ────────────────────────────────────────────────────────────────── */
+.landing-dc .ld-navlink:hover      { color: var(--ld-ink); }
+.landing-dc .ld-btn-solid:hover    { filter: brightness(1.12); }
+.landing-dc .ld-btn-ghost:hover    { border-color: var(--ld-deep); color: var(--ld-deep); }
+.landing-dc .ld-navmenu-item:hover { background: rgba(12,86,56,0.07); color: var(--ld-ink); }
+.landing-dc .ld-kofi:hover {
+  color: var(--ld-ink);
+  border-color: #FF5E1A;  /* Ko-fi brand orange — not part of the Sapling palette */
+  background: #FFF3EC;
+}
+
+/* ── Landing v5 additions ──────────────────────────────────────────
+   Ported from `Sapling Landing v5.dc.html`. The v5 hero is a ground-up
+   rebuild, not a v4 tweak: the wordmark is Playfair 600 in brand forest
+   (not Archivo 800 in ink), it arrives via a character scramble rather
+   than a wipe, and the DOM `.floating-card` rig is replaced by a WebGL
+   scene. Everything above this comment is shared with v4.
+   ────────────────────────────────────────────────────────────────── */
+
+/* The cascade that walks the hero in, ~1.9s–3.4s after mount. */
+@keyframes heroRise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
+/* Scroll cue, 2.2s loop. */
+@keyframes cueDrop  { 0%,100% { transform:translateY(0); opacity:0.55; } 50% { transform:translateY(5px); opacity:1; } }
+/* heroWipe and heroChar are defined by the source but never referenced by
+   its markup — the wordmark scrambles instead. Kept out deliberately;
+   see components/landing-v5/Hero.tsx. */
+
+/* v5 hero responsive rules. The bottom band collapses before the mid row,
+   and the two height rules trim the top padding on short viewports. */
+@media (max-width: 1180px) {
+  .landing-v5 .hero-bottom   { grid-template-columns:1fr !important; gap:20px !important; }
+  .landing-v5 .hero-info     { justify-self:start !important; }
+  .landing-v5 .hero-cue      { justify-self:start !important; align-items:flex-start !important; }
+  .landing-v5 .hero-scrollcue { display:none !important; }
+}
+@media (max-width: 860px) {
+  .landing-v5 .hero-mid { grid-template-columns:1fr !important; justify-items:start !important; gap:24px !important; }
+}
+@media (max-width: 820px) {
+  .landing-v5 .hero-keys { flex-direction:column !important; gap:14px !important; }
+  .landing-v5 .hero-info { max-width:none !important; }
+  .landing-v5 .hero-lede { max-width:38ch !important; }
+}
+@media (max-height: 800px) {
+  .landing-v5 .hero-grid    { padding-top:96px !important; gap:14px !important; }
+  .landing-v5 .hero-info p  { font-size:12.5px !important; }
+}
+@media (max-height: 680px) {
+  .landing-v5 .hero-grid   { padding-top:84px !important; }
+  .landing-v5 .hero-keys p { display:none !important; }
+}
+
+/* v5 hover states (the source's `style-hover` attribute has no inline
+   React equivalent). The Ko-fi pill differs from v4: v5 tints the
+   background rather than swapping it to a solid cream. */
+.landing-v5 .ld-kofi:hover      { border-color:#FF5E1A; background:rgba(255,94,26,0.14); }
+.landing-v5 .ld-ghost:hover     { border-color:#0C5638; color:#0C5638; }
+
+/* Gallery + feature lab hover states. */
+.landing-v5 .ld-galcard:hover  { transform: translateY(-5px); }
+.landing-v5 .ld-labclose:hover { background: #12201A; color: #FDFCF9; }
+.landing-v5 .ld-post:hover      { border-color: rgba(18,32,26,0.16); }
+.landing-v5 .ld-jumpitem:hover  { background: rgba(12,86,56,0.07); color: #12201A; }
+.landing-v5 .ld-jumppill:hover  { opacity: 0.75; }
+.landing-v5 .ld-emailinput:focus { border-color: #0C5638; box-shadow: 0 0 0 3px rgba(12,86,56,0.12); }
+
+/* ── Companion pages (About, Team, Wiki, Gallery, News, FAQ) ───────
+   Ported from the sibling design components. These sit on the WARM
+   paper palette, not the landing's cool one — that difference is
+   intentional and matches the app's existing public pages.
+   ────────────────────────────────────────────────────────────────── */
+@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
+
+.cp-navlink:hover  { color: #1a1814; }
+.cp-menuitem:hover { background: rgba(27,108,66,0.07); color: #1a1814; }
+.cp-kofi:hover     { border-color: #FF5E1A; background: #FFF3EC; }
+.cp-cta:hover      { filter: brightness(1.12); }
+
+/* ── Feature-lab demos ─────────────────────────────────────────────
+   Ported from `FeatureLab.dc.html`. `labIn` is its entrance, `labSpin`
+   the busy rings, `labDot` the typing indicator. `labFlash` is defined
+   by the source but never referenced by its markup — not ported.
+   ────────────────────────────────────────────────────────────────── */
+@keyframes labIn   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
+@keyframes labSpin { to { transform:rotate(360deg); } }
+@keyframes labDot  { 0%,60%,100% { opacity:0.25; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
+
+.landing-v5 .ld-labprimary:hover { background: #0C5638; }
+.landing-v5 .ld-labrate:hover    { transform: translateY(-2px); }
+.landing-v5 .ld-labaction:hover  { background: #E6F2E8; }
+.landing-v5 .ld-labrecent:hover  { border-color: #0E9E5A; }
+.landing-v5 .ld-labsend:hover    { background: #0E9E5A; }
+.landing-v5 .ld-labupload:hover  { background: #DCE7DE; }
+.landing-v5 .ld-labreply:hover   { border-color: #0E9E5A; background: #E6F2E8; }
+.cp-newscard:hover { border-color: rgba(42,39,31,0.22); transform: translateY(-3px); }
+@keyframes nodeDrift { 0%,100% { transform:translate(0,0); } 50% { transform:translate(10px,-13px); } }
+
+/* Beta modal — recovered from the previous landing page. */
+.ld-betaclose:hover  { background: rgba(107,114,128,0.1); }
+.ld-betasubmit:hover:not(:disabled) { background: var(--brand-forest-hover) !important; }
+.ld-betainput:focus  { border-color: var(--brand-forest); box-shadow: 0 0 0 3px rgba(27,108,66,0.12); outline: none; }
diff --git a/frontend/src/components/companion/CompanionShell.tsx b/frontend/src/components/companion/CompanionShell.tsx
new file mode 100644
index 00000000..f3b3a866
--- /dev/null
+++ b/frontend/src/components/companion/CompanionShell.tsx
@@ -0,0 +1,172 @@
+'use client';
+
+/**
+ * The chrome shared by the six companion pages (About, Team, Wiki, Gallery,
+ * News, FAQ).
+ *
+ * Ported from the sibling `.dc.html` files in the design import. All six
+ * repeat the same sticky header and footer verbatim; only the middle
+ * changes, so it lives here once.
+ *
+ * Note these pages use the WARM paper palette (#f4f1ea / #1a1814 / #1B6C42),
+ * not the landing page's cool one. That is deliberate in the design and
+ * matches the app's existing public pages — do not "unify" them.
+ */
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+const SANS = "'DM Sans',system-ui,sans-serif";
+
+/** Page order as it appears in the nav. `/` is Home. */
+export const COMPANION_NAV = [
+  { label: 'Home', href: '/' },
+  { label: 'About', href: '/about' },
+  { label: 'Team', href: '/team' },
+  { label: 'Wiki', href: '/wiki' },
+  { label: 'Gallery', href: '/gallery' },
+  { label: 'News', href: '/news' },
+  { label: 'FAQ', href: '/faq' },
+];
+
+const GITHUB_URL = 'https://github.com/SaplingLearn/Sapling';
+const KOFI_URL = 'https://ko-fi.com/saplinglearn';
+
+const TAB: React.CSSProperties = {
+  fontFamily: SANS, fontSize: 13.5, letterSpacing: '0.02em',
+  transition: 'color 300ms', whiteSpace: 'nowrap',
+};
+
+const FOOTER_LINK: React.CSSProperties = { fontSize: 14, color: '#6f6857' };
+
+export function CompanionShell({
+  current,
+  children,
+}: {
+  /** href of the page being rendered, so its tab can claim aria-current. */
+  current: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', background: '#f4f1ea', color: '#1a1814', fontFamily: SANS }}>
+      {/* Geometry here is locked to the landing navbar: same horizontal
+          padding, same 16px/16px vertical padding, same 92px masked scrim.
+          The companion sources inset their bar to `min(1320px,92%)`, which
+          lands it ~32px further in than the landing bar and 18px taller — so
+          the mark visibly jumped when you navigated off `/`. Full-bleed wins;
+          if you change `max(4.2vw,22px)` here, change it in Navbar.tsx and the
+          hero grid too. Only the palette stays warm. */}
+      <header style={{ position: 'sticky', top: 0, zIndex: 50, padding: '16px max(4.2vw,22px)', pointerEvents: 'none' }}>
+        <div
+          aria-hidden="true"
+          style={{
+            position: 'absolute', left: 0, right: 0, top: 0, height: 92,
+            backdropFilter: 'blur(9px)', WebkitBackdropFilter: 'blur(9px)',
+            // gradient + mask ramps are the ones from `About Sapling.dc.html`,
+            // the most developed of the companion scrims — the others stop at a
+            // bare two-stop fade.
+            background:
+              'linear-gradient(180deg, #f4f1ea 0%, #f4f1ea 44%, rgba(244,241,234,0.82) 66%, rgba(244,241,234,0.45) 82%, rgba(244,241,234,0) 100%)',
+            maskImage:
+              'linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,0.78) 66%, rgba(0,0,0,0.42) 82%, rgba(0,0,0,0) 100%)',
+            WebkitMaskImage:
+              'linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,0.78) 66%, rgba(0,0,0,0.42) 82%, rgba(0,0,0,0) 100%)',
+          }}
+        />
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, position: 'relative', pointerEvents: 'auto' }}>
+          <Link href="/" style={{ display: 'flex', alignItems: 'center', gap: 4, flex: '0 0 auto' }}>
+            <Image src="/sapling-icon.svg" alt="" width={26} height={26} style={{ flexShrink: 0, position: 'relative', top: -2 }} />
+            <span style={{ fontFamily: "'Spectral',Georgia,serif", fontWeight: 700, fontSize: 20, color: '#1B6C42', letterSpacing: '-0.02em', lineHeight: 1.1 }}>
+              Sapling
+            </span>
+          </Link>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'nowrap', minWidth: 0 }}>
+            {/* below 1180px the tab row is swapped for this native disclosure */}
+            <details className="nav-compact" style={{ display: 'none', position: 'relative', flex: '0 0 auto' }}>
+              <summary style={{ display: 'flex', alignItems: 'center', gap: 7, cursor: 'pointer', listStyle: 'none', color: '#6f6857', fontFamily: SANS, fontWeight: 500, fontSize: 13.5 }}>
+                Pages
+                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+                  <path d="M6 9l6 6 6-6" />
+                </svg>
+              </summary>
+              <div style={{ position: 'absolute', top: 'calc(100% + 12px)', right: 0, minWidth: 172, padding: 6, display: 'flex', flexDirection: 'column', gap: 1, background: '#faf8f3', border: '1px solid rgba(42,39,31,0.12)', borderRadius: 12, boxShadow: '0 16px 38px -18px rgba(26,24,20,0.4)' }}>
+                {COMPANION_NAV.map((n) => (
+                  <Link
+                    key={n.href}
+                    href={n.href}
+                    aria-current={n.href === current ? 'page' : undefined}
+                    className="cp-menuitem"
+                    style={{ padding: '7px 11px', borderRadius: 7, fontFamily: SANS, fontSize: 13.5, fontWeight: n.href === current ? 600 : 500, color: n.href === current ? '#1a1814' : '#6f6857', transition: 'all 200ms' }}
+                  >
+                    {n.label}
+                  </Link>
+                ))}
+              </div>
+            </details>
+
+            <div className="nav-tabs" style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'nowrap' }}>
+              {COMPANION_NAV.map((n) => (
+                <Link
+                  key={n.href}
+                  href={n.href}
+                  aria-current={n.href === current ? 'page' : undefined}
+                  className="cp-navlink"
+                  style={{ ...TAB, color: n.href === current ? '#1a1814' : '#6f6857', fontWeight: n.href === current ? 600 : 500 }}
+                >
+                  {n.label}
+                </Link>
+              ))}
+              <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" title="Sapling on GitHub" className="cp-navlink" style={{ ...TAB, display: 'flex', alignItems: 'center', gap: 7, color: '#6f6857', fontWeight: 500 }}>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ flexShrink: 0 }}>
+                  <path d="M12 .5C5.73.5.75 5.48.75 11.75c0 4.99 3.24 9.22 7.73 10.71.57.1.78-.25.78-.55v-1.93c-3.14.68-3.81-1.51-3.81-1.51-.51-1.3-1.25-1.65-1.25-1.65-1.03-.7.08-.69.08-.69 1.13.08 1.72 1.16 1.72 1.16 1 1.72 2.63 1.22 3.27.93.1-.72.39-1.22.71-1.5-2.5-.29-5.14-1.25-5.14-5.58 0-1.23.44-2.24 1.16-3.03-.12-.28-.5-1.43.11-2.98 0 0 .95-.3 3.1 1.16a10.7 10.7 0 0 1 5.64 0c2.15-1.46 3.09-1.16 3.09-1.16.62 1.55.23 2.7.12 2.98.72.79 1.16 1.8 1.16 3.03 0 4.34-2.65 5.29-5.16 5.57.41.35.77 1.04.77 2.1v3.11c0 .3.2.66.79.55a11.26 11.26 0 0 0 7.72-10.71C23.25 5.48 18.27.5 12 .5z" />
+                </svg>
+                GitHub
+              </a>
+              <a href={KOFI_URL} target="_blank" rel="noopener noreferrer" title="Support Sapling on Ko-fi" className="cp-kofi" style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '6px 13px 6px 10px', borderRadius: 99, border: '1px solid rgba(42,39,31,0.14)', background: '#faf8f3', color: '#1a1814', fontFamily: SANS, fontWeight: 600, fontSize: 13, transition: 'all 220ms' }}>
+                <Image src="/kofi-symbol.png" alt="" width={17} height={17} style={{ objectFit: 'contain' }} />
+                Support us
+              </a>
+            </div>
+
+            <span aria-hidden="true" style={{ width: 1, height: 16, background: 'rgba(42,39,31,0.16)', flex: '0 0 auto' }} />
+            <Link href="/?signin=1" className="cp-navlink" style={{ ...TAB, color: '#6f6857', fontWeight: 500 }}>Sign In</Link>
+            <Link
+              href="/#newsletter"
+              className="cp-cta"
+              style={{ background: '#1B6C42', color: '#fff', borderRadius: 6, padding: '8px 16px', fontFamily: SANS, fontWeight: 600, fontSize: 13.5, whiteSpace: 'nowrap', transition: 'filter 200ms' }}
+            >
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      {children}
+
+      <footer style={{ borderTop: '1px solid rgba(42,39,31,0.10)', background: '#faf8f3', padding: '48px 32px', boxSizing: 'border-box' }}>
+        <div style={{ maxWidth: 1280, margin: '0 auto', boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <Image src="/sapling-icon.svg" alt="Sapling" width={20} height={20} />
+            <span style={{ fontSize: 14, color: '#6f6857' }}>Sapling · © 2026</span>
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24 }}>
+            {COMPANION_NAV.map((n) => (
+              <Link key={n.href} href={n.href} className="cp-navlink" style={{ fontSize: 14, color: '#6f6857' }}>{n.label}</Link>
+            ))}
+            <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" className="cp-navlink" style={FOOTER_LINK}>GitHub</a>
+            <a href={KOFI_URL} target="_blank" rel="noopener noreferrer" className="cp-navlink" style={FOOTER_LINK}>Ko-fi</a>
+            {/* The design's companion footer stops at the nav links. These three
+                are ours: /about used to be the only page linking them, so
+                folding it into this shell would otherwise orphan /careers
+                outright and leave the legal pages unreachable from any
+                companion page. */}
+            <Link href="/careers" className="cp-navlink" style={FOOTER_LINK}>Careers</Link>
+            <Link href="/terms" className="cp-navlink" style={FOOTER_LINK}>Terms of Service</Link>
+            <Link href="/privacy" className="cp-navlink" style={FOOTER_LINK}>Privacy Policy</Link>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/ActGraph.tsx b/frontend/src/components/landing-v5/ActGraph.tsx
new file mode 100644
index 00000000..5ee1a052
--- /dev/null
+++ b/frontend/src/components/landing-v5/ActGraph.tsx
@@ -0,0 +1,360 @@
+'use client';
+
+/**
+ * Act I — the knowledge graph, as scroll cinema.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. A 460vh section whose inner
+ * sticky 100vh stage holds a canvas the engine draws the graph into. Four
+ * captions cross-fade across the scroll; clicking the canvas swaps the whole
+ * act into an orbitable explore mode with a concept inspector.
+ *
+ * The canvas is the only thing that moves per frame, and the engine owns it.
+ * Everything here is either static chrome or React state that changes at
+ * human speed.
+ */
+
+import {
+  COURSE, XTIER, XTIER_LABEL, XTIER_ORDER, nodeUses,
+  type MasteryTier,
+} from '@/lib/landing/course';
+import type { BuiltGraph } from '@/lib/landing/engine/graph';
+
+const CAP_LABEL = "The graph";
+
+/** The four caption stages, in scroll order. */
+const CAPTIONS = [
+  {
+    eyebrow: null,
+    head: <>A hundred names you don&rsquo;t know <em style={{ color: '#8FD9A8' }}>yet.</em></>,
+    body: "Every concept in your course becomes a node. Right now, they're strangers.",
+  },
+  {
+    eyebrow: CAP_LABEL,
+    head: <>You study. They <em style={{ color: '#8FD9A8' }}>connect.</em></>,
+    body: 'Every quiz, note, and card you touch draws an edge. Structure appears.',
+  },
+  {
+    eyebrow: CAP_LABEL,
+    head: <>Mastery is the <em style={{ color: '#8FD9A8' }}>color.</em></>,
+    body: null,
+  },
+];
+
+/** The glow plate behind each caption, so copy stays legible over the graph. */
+const CAP_SCRIM: React.CSSProperties = {
+  position: 'absolute', left: -58, right: -72, top: -46, bottom: -46,
+  pointerEvents: 'none',
+  background:
+    'radial-gradient(ellipse 62% 58% at 38% 50%, rgba(4,18,12,0.82) 0%, rgba(4,18,12,0.66) 45%, rgba(4,18,12,0.28) 72%, rgba(4,18,12,0) 100%)',
+  filter: 'blur(18px)',
+};
+
+const CAP_BOX: React.CSSProperties = {
+  position: 'absolute', left: 'max(6vw,32px)', top: '50%',
+  transform: 'translateY(-50%)', zIndex: 4, maxWidth: '34ch',
+  opacity: 0, pointerEvents: 'none',
+};
+
+const EYEBROW: React.CSSProperties = {
+  position: 'relative', display: 'inline-block',
+  fontFamily: "'JetBrains Mono',monospace", fontSize: 10.5,
+  letterSpacing: '0.34em', color: '#8FD9A8', textTransform: 'uppercase',
+  textShadow: '0 1px 10px rgba(4,18,12,0.9)',
+};
+
+const CAP_H2: React.CSSProperties = {
+  position: 'relative', margin: '18px 0 0', fontFamily: "'Playfair Display',serif",
+  fontSize: 'clamp(2.4rem,4.6vw,4rem)', fontWeight: 600, lineHeight: 1.06,
+  letterSpacing: '-0.02em', color: '#F6F8F4',
+  textShadow: '0 2px 26px rgba(4,18,12,0.85)',
+};
+
+const CAP_P: React.CSSProperties = {
+  position: 'relative', margin: '16px 0 0', color: '#B9D9C4',
+  fontSize: 15.5, lineHeight: 1.7, textShadow: '0 1px 14px rgba(4,18,12,0.9)',
+};
+
+const MONO_TINY: React.CSSProperties = {
+  fontFamily: "'JetBrains Mono',monospace", fontSize: 8.5,
+  letterSpacing: '0.22em', color: '#7E9689',
+};
+
+/** Four blurred blobs that read as out-of-focus foliage at the frame edges. */
+const FOLIAGE = [
+  { style: { left: '-16%', top: '-12%', width: '46vw', height: '40vw', borderRadius: '48% 62% 55% 45%', background: 'radial-gradient(ellipse at 30% 30%, rgba(5,22,14,0.95), rgba(5,22,14,0) 68%)', filter: 'blur(34px)' } },
+  { style: { right: '-18%', top: '-8%', width: '44vw', height: '38vw', borderRadius: '55% 45% 60% 50%', background: 'radial-gradient(ellipse at 70% 30%, rgba(4,18,12,0.92), rgba(4,18,12,0) 68%)', filter: 'blur(38px)' } },
+  { style: { left: '-14%', bottom: '-14%', width: '44vw', height: '40vw', borderRadius: '60% 50% 45% 62%', background: 'radial-gradient(ellipse at 35% 60%, rgba(4,18,12,0.95), rgba(4,18,12,0) 68%)', filter: 'blur(36px)' } },
+  { style: { right: '-15%', bottom: '-12%', width: '46vw', height: '42vw', borderRadius: '50% 60% 52% 48%', background: 'radial-gradient(ellipse at 65% 62%, rgba(5,22,14,0.92), rgba(5,22,14,0) 68%)', filter: 'blur(40px)' } },
+];
+
+export function ActGraph({
+  actCanvasRef,
+  cinemaRef,
+  graph,
+  exploring,
+  expNode,
+  onSelectNode,
+  onExitExplore,
+  onQuiz,
+  onLearn,
+}: {
+  actCanvasRef: React.RefObject<HTMLCanvasElement | null>;
+  cinemaRef: React.RefObject<HTMLDivElement | null>;
+  /** Null until the engine has mounted and published its instance. */
+  graph: BuiltGraph | null;
+  exploring: boolean;
+  expNode: number | null;
+  onSelectNode: (i: number | null) => void;
+  onExitExplore: () => void;
+  onQuiz: () => void;
+  onLearn: () => void;
+}) {
+  const nodes = graph?.nodes ?? [];
+  // node 0 is the course itself, so it doesn't count toward the tally
+  const counts = XTIER_ORDER.reduce((acc, t) => {
+    acc[t] = nodes.filter((n, i) => i > 0 && n.tier === t).length;
+    return acc;
+  }, {} as Record<MasteryTier, number>);
+
+  const node = expNode !== null && nodes[expNode] ? nodes[expNode] : null;
+  const neighbours = node && graph ? [...new Set(graph.adj[expNode!] ?? [])] : [];
+
+  return (
+    <section
+      id="act-graph"
+      data-act="1"
+      style={{ height: '460vh', position: 'relative' }}
+    >
+      <div
+        style={{
+          position: 'sticky', top: 0, height: '100vh', overflow: 'hidden',
+          // the first two gradients feather the top and bottom edges so the act
+          // dissolves into the light sections rather than butting against them
+          background:
+            'linear-gradient(180deg, #081F14 0%, rgba(8,31,20,0.7) 6%, rgba(8,31,20,0) 16%), linear-gradient(0deg, #061710 0%, rgba(6,23,16,0.7) 5%, rgba(6,23,16,0) 14%), radial-gradient(ellipse 90% 80% at 50% 42%, #0E2C1D 0%, #081F14 62%, #061710 100%)',
+        }}
+      >
+        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 3 }}>
+          {FOLIAGE.map((f, i) => (
+            <span key={i} style={{ position: 'absolute', ...f.style } as React.CSSProperties} />
+          ))}
+        </div>
+
+        <canvas
+          ref={actCanvasRef}
+          style={{
+            position: 'absolute', inset: 0, zIndex: 1, width: '100%', height: '100%',
+            cursor: 'grab', touchAction: 'none',
+          }}
+        />
+
+        {/* captions — the engine cross-fades these by scroll progress */}
+        <div
+          ref={cinemaRef}
+          style={{ position: 'absolute', inset: 0, zIndex: 4, pointerEvents: 'none', transition: 'opacity 520ms ease' }}
+        >
+          {CAPTIONS.map((c, i) => (
+            <div key={i} data-cap={i} style={CAP_BOX}>
+              <span aria-hidden="true" style={CAP_SCRIM} />
+              {c.eyebrow && <span style={EYEBROW}>{c.eyebrow}</span>}
+              <h2 style={CAP_H2}>{c.head}</h2>
+              {c.body && <p style={CAP_P}>{c.body}</p>}
+              {/* the mastery legend rides along with caption 2 */}
+              {i === 2 && (
+                <div style={{ position: 'relative', marginTop: 20, display: 'flex', flexDirection: 'column', gap: 10 }}>
+                  {XTIER_ORDER.map((t) => (
+                    <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                      <span
+                        style={{
+                          width: 9, height: 9, borderRadius: 99, background: XTIER[t],
+                          // only the mastered dot glows
+                          boxShadow: t === 'mastered' ? '0 0 10px rgba(14,158,90,0.6)' : undefined,
+                        }}
+                      />
+                      <span
+                        style={{
+                          fontFamily: "'JetBrains Mono',monospace", fontSize: 11,
+                          letterSpacing: '0.14em',
+                          color: t === 'mastered' ? '#E6F2E8' : '#B9D9C4',
+                        }}
+                      >
+                        {XTIER_LABEL[t].toUpperCase()}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+
+          {/* the closing caption sits low and centred rather than left-aligned */}
+          <div data-cap="3" style={{ position: 'absolute', left: 0, right: 0, bottom: '9vh', zIndex: 4, textAlign: 'center', opacity: 0, pointerEvents: 'none' }}>
+            <span
+              aria-hidden="true"
+              style={{
+                position: 'absolute', left: '50%', top: -52, bottom: -52,
+                width: 'min(1080px,92vw)', transform: 'translateX(-50%)', pointerEvents: 'none',
+                background: 'radial-gradient(ellipse 54% 62% at 50% 50%, rgba(4,18,12,0.82) 0%, rgba(4,18,12,0.66) 45%, rgba(4,18,12,0.28) 72%, rgba(4,18,12,0) 100%)',
+                filter: 'blur(18px)',
+              }}
+            />
+            <h2
+              style={{
+                position: 'relative', margin: 0, fontFamily: "'Playfair Display',serif",
+                fontSize: 'clamp(3rem,7vw,6.4rem)', fontWeight: 600, lineHeight: 1.02,
+                letterSpacing: '-0.025em', color: '#F6F8F4', textShadow: '0 3px 34px rgba(4,18,12,0.85)',
+              }}
+            >
+              See what you <em style={{ color: '#8FD9A8' }}>know.</em>
+            </h2>
+            <p style={{ position: 'relative', margin: '14px 0 0', color: '#B9D9C4', fontSize: 16, textShadow: '0 1px 14px rgba(4,18,12,0.9)' }}>
+              Your whole semester, one living map, updated as you learn.
+            </p>
+            <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 18, fontFamily: "'JetBrains Mono',monospace", fontSize: 10.5, letterSpacing: '0.22em', color: '#8FD9A8' }}>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#8FD9A8" strokeWidth="2" strokeLinecap="round">
+                <path d="M5 9l-3 3 3 3" /><path d="M9 5l3-3 3 3" /><path d="M15 19l-3 3-3-3" />
+                <path d="M19 9l3 3-3 3" /><path d="M2 12h20" /><path d="M12 2v20" />
+              </svg>
+              DRAG TO ORBIT · CLICK TO EXPLORE
+            </span>
+          </div>
+
+          {/* stage rail — the engine lights the tick matching the live caption */}
+          <div aria-hidden="true" style={{ position: 'absolute', right: 'max(4vw,24px)', top: '50%', transform: 'translateY(-50%)', zIndex: 4, display: 'flex', flexDirection: 'column', gap: 14 }}>
+            {[0, 1, 2, 3].map((i) => (
+              <span key={i} data-tick={i} style={{ width: 5, height: 26, borderRadius: 99, background: 'rgba(230,242,232,0.2)', transition: 'background 300ms' }} />
+            ))}
+          </div>
+        </div>
+
+        {/* ── explore HUD ── */}
+        {exploring && (
+          <div style={{ position: 'absolute', inset: 0, zIndex: 6, pointerEvents: 'none', animation: 'panelFade 420ms ease 520ms both' }}>
+            <div style={{ position: 'absolute', left: 'max(3vw,20px)', top: 24, display: 'flex', flexDirection: 'column', gap: 4 }}>
+              <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, letterSpacing: '0.28em', color: '#8FD9A8' }}>{COURSE.code}</span>
+              <span style={{ fontFamily: "'Playfair Display',serif", fontSize: 21, fontWeight: 600, color: '#F6F8F4' }}>{COURSE.name}</span>
+            </div>
+
+            <div style={{ position: 'absolute', left: 'max(3vw,20px)', bottom: 26, display: 'flex', flexDirection: 'column', gap: 9, padding: '14px 16px', borderRadius: 14, background: 'rgba(6,23,16,0.66)', border: '1px solid rgba(143,217,168,0.18)', backdropFilter: 'blur(10px)', pointerEvents: 'auto' }}>
+              <span style={{ ...MONO_TINY, letterSpacing: '0.24em' }}>
+                {COURSE.term} · {Math.max(0, nodes.length - 1)} CONCEPTS MAPPED
+              </span>
+              {XTIER_ORDER.map((t) => (
+                <span key={t} style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 11.5, color: '#B9D9C4' }}>
+                  <span style={{ width: 9, height: 9, borderRadius: 99, flex: '0 0 auto', background: XTIER[t] }} />
+                  {XTIER_LABEL[t]}
+                  <b style={{ marginLeft: 'auto', fontFamily: "'JetBrains Mono',monospace", fontSize: 10, fontWeight: 400, color: '#7E9689' }}>{counts[t]}</b>
+                </span>
+              ))}
+            </div>
+
+            <span style={{ position: 'absolute', left: '50%', bottom: 26, transform: 'translateX(-50%)', fontFamily: "'JetBrains Mono',monospace", fontSize: 9, letterSpacing: '0.22em', color: '#5F7A6C' }}>
+              DRAG TO ORBIT · SCROLL TO ZOOM · CLICK A CONCEPT
+            </span>
+
+            {node && (
+              <div style={{ position: 'absolute', right: 'max(3vw,20px)', top: 78, bottom: 70, width: 'min(340px,32vw)', overflow: 'auto', padding: '22px 22px 20px', borderRadius: 18, background: 'rgba(6,23,16,0.82)', border: '1px solid rgba(143,217,168,0.22)', backdropFilter: 'blur(14px)', pointerEvents: 'auto', animation: 'panelFade 300ms ease both' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
+                  <span style={{ width: 10, height: 10, borderRadius: 99, flex: '0 0 auto', background: XTIER[node.tier] }} />
+                  <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 8.5, letterSpacing: '0.24em', color: XTIER[node.tier] }}>
+                    {XTIER_LABEL[node.tier].toUpperCase()}
+                  </span>
+                  <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 8, letterSpacing: '0.16em', color: '#5F7A6C' }}>
+                    {node.root
+                      ? 'COURSE'
+                      : node.hub
+                        ? `UNIT · ${COURSE.code}`
+                        : `${COURSE.code} · ${COURSE.topics[node.topic!].label.toUpperCase()}`}
+                  </span>
+                  <button
+                    onClick={() => onSelectNode(null)}
+                    aria-label="Close concept"
+                    type="button"
+                    style={{ marginLeft: 'auto', width: 24, height: 24, borderRadius: 99, border: '1px solid rgba(143,217,168,0.22)', background: 'transparent', color: '#B9D9C4', cursor: 'pointer', fontSize: 13, lineHeight: 1 }}
+                  >
+                    ×
+                  </button>
+                </div>
+                <h4 style={{ margin: '12px 0 0', fontFamily: "'Playfair Display',serif", fontSize: 26, fontWeight: 600, lineHeight: 1.15, color: '#F6F8F4' }}>{node.label}</h4>
+                <p style={{ margin: '8px 0 0', fontSize: 13, lineHeight: 1.65, color: '#B9D9C4' }}>{node.blurb}</p>
+
+                <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
+                  <span style={{ flex: 1, height: 6, borderRadius: 99, background: 'rgba(230,242,232,0.12)', overflow: 'hidden' }}>
+                    <span style={{ display: 'block', height: '100%', borderRadius: 99, transition: 'width 420ms cubic-bezier(0.22,1,0.36,1)', width: `${Math.round(node.mastery * 100)}%`, background: XTIER[node.tier] }} />
+                  </span>
+                  <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, color: '#F6F8F4' }}>{Math.round(node.mastery * 100)}%</span>
+                </div>
+                <span style={{ display: 'block', marginTop: 5, ...MONO_TINY, letterSpacing: '0.16em', color: '#5F7A6C' }}>
+                  MASTERY SCORE · UPDATED AFTER EVERY SESSION
+                </span>
+
+                <span style={{ display: 'block', marginTop: 18, ...MONO_TINY }}>
+                  {neighbours.length} CONNECTED {neighbours.length === 1 ? 'CONCEPT' : 'CONCEPTS'}
+                </span>
+                <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+                  {neighbours.map((j) => (
+                    <button
+                      key={j}
+                      onClick={() => onSelectNode(j)}
+                      type="button"
+                      className="ld-expchip"
+                      style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 11px', borderRadius: 99, border: '1px solid rgba(143,217,168,0.2)', background: 'rgba(230,242,232,0.05)', color: '#E6F2E8', fontFamily: "'DM Sans',sans-serif", fontSize: 11.5, cursor: 'pointer', transition: 'all 200ms' }}
+                    >
+                      <span style={{ width: 7, height: 7, borderRadius: 99, background: XTIER[nodes[j].tier] }} />
+                      {nodes[j].label}
+                    </button>
+                  ))}
+                </div>
+
+                <span style={{ display: 'block', marginTop: 18, ...MONO_TINY }}>WHAT SAPLING DOES WITH THIS NODE</span>
+                <div style={{ marginTop: 9, display: 'flex', flexDirection: 'column', gap: 10 }}>
+                  {nodeUses(node, neighbours.length).map((u, i) => (
+                    <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 3, paddingLeft: 11, borderLeft: '2px solid rgba(143,217,168,0.28)' }}>
+                      <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 8.5, letterSpacing: '0.16em', color: '#8FD9A8' }}>{u.tag}</span>
+                      <span style={{ fontSize: 12, lineHeight: 1.6, color: '#B9D9C4' }}>{u.text}</span>
+                    </div>
+                  ))}
+                </div>
+
+                <div style={{ marginTop: 18, display: 'flex', gap: 8 }}>
+                  <button onClick={onQuiz} type="button" className="ld-expquiz" style={{ flex: 1, padding: '10px 12px', borderRadius: 9, border: 'none', background: '#0E9E5A', color: '#061710', fontFamily: "'DM Sans',sans-serif", fontSize: 12.5, fontWeight: 600, cursor: 'pointer', transition: 'background 200ms' }}>
+                    Quiz me on this
+                  </button>
+                  <button onClick={onLearn} type="button" className="ld-explearn" style={{ flex: 1, padding: '10px 12px', borderRadius: 9, border: '1px solid rgba(143,217,168,0.3)', background: 'transparent', color: '#E6F2E8', fontFamily: "'DM Sans',sans-serif", fontSize: 12.5, cursor: 'pointer', transition: 'background 200ms' }}>
+                    Ask the tutor
+                  </button>
+                </div>
+                <span style={{ display: 'block', marginTop: 9, ...MONO_TINY, letterSpacing: '0.1em', color: '#5F7A6C' }}>
+                  /learn?topic={encodeURIComponent(node.label)}&amp;mode=socratic
+                </span>
+              </div>
+            )}
+
+            <button
+              onClick={onExitExplore}
+              type="button"
+              className="ld-exitexplore"
+              style={{ position: 'absolute', right: 'max(3vw,20px)', top: 26, display: 'flex', alignItems: 'center', gap: 8, padding: '9px 16px', borderRadius: 99, border: '1px solid rgba(143,217,168,0.28)', background: 'rgba(6,23,16,0.7)', color: '#B9D9C4', fontFamily: "'JetBrains Mono',monospace", fontSize: 9.5, letterSpacing: '0.2em', cursor: 'pointer', pointerEvents: 'auto', transition: 'all 220ms' }}
+            >
+              ✕ EXIT EXPLORE
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+/** The band that lifts back out of the dark act into the light sections. */
+export function RiseBand() {
+  return (
+    <div
+      aria-hidden="true"
+      style={{
+        position: 'relative', height: '34vh',
+        background:
+          'linear-gradient(180deg, #061710 0%, #0E2C1D 8%, #235139 20%, #46765C 34%, #74A288 48%, #A8C9B5 62%, #CFE2D5 76%, #E4EEE7 89%, #F0F4F2 100%)',
+      }}
+    />
+  );
+}
diff --git a/frontend/src/components/landing-v5/ActIngest.tsx b/frontend/src/components/landing-v5/ActIngest.tsx
new file mode 100644
index 00000000..0c42f62e
--- /dev/null
+++ b/frontend/src/components/landing-v5/ActIngest.tsx
@@ -0,0 +1,289 @@
+'use client';
+
+/**
+ * Act II — ingest.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. A 320vh section pinned to a
+ * sticky 100vh stage: a syllabus document on the left, four destination
+ * tiles on the right, and twelve concept chips that fly from a line of the
+ * document to the tile that consumes it as scroll advances.
+ *
+ * Every moving part is engine-driven through data attributes, which is why
+ * this file is almost entirely static markup:
+ *
+ *   [data-ingest-fit]   the stage's scale, fitted to the viewport
+ *   [data-ingest-doc]   the document's tilt
+ *   [data-docline]      per-line opacity, dimmed once its chip has left
+ *   [data-chip]         the flight, positioned from measured line/tile rects
+ *   [data-tilecount]    the +N counter on each destination
+ *   [data-depth]        parallax on the decorative node field
+ *
+ * The measure pass reads those rects; nothing here reads layout itself.
+ */
+
+import { DragField } from './DragField';
+
+/** Syllabus lines. The bold span is the concept a chip carries away. */
+const DOC_LINES: [string, string, string][] = [
+  ['Wk 1 · ', 'Binary search trees', ': insert, search'],
+  ['Wk 2 · ', 'Big-O notation', ': growth rates'],
+  ['', 'Midterm · Oct 14', ': in class, Ch. 1 to 6'],
+  ['Wk 4 · ', 'Recursion', ': base cases, stack depth'],
+  ['Wk 5 · ', 'Hash maps', ': collisions, load factor'],
+  ['Wk 6 · ', 'Graph traversal', ': BFS, DFS'],
+  ['', 'PS 3 · due Fri', ' 11:59pm, Gradescope'],
+  ['Wk 8 · ', 'Dynamic programming', ': memo tables'],
+  ['Wk 9 · ', 'Heaps', ' and priority queues'],
+  ['Wk 10 · ', 'Memoization', ' vs tabulation'],
+  ['', 'Final · Dec 9', ': cumulative, 3 hrs'],
+  ['Wk 12 · ', "Dijkstra's algorithm", ': shortest paths'],
+];
+
+/** label, destination tile, source line. Tile 0 (the graph) gets the dark chip. */
+const CHIPS: [string, number, number][] = [
+  ['Binary search trees', 0, 0],
+  ['Big-O notation', 1, 1],
+  ['Midterm · Oct 14', 2, 2],
+  ['Recursion', 3, 3],
+  ['Hash maps', 0, 4],
+  ['Graph traversal', 1, 5],
+  ['PS 3 · due Fri', 2, 6],
+  ['Dynamic programming', 0, 7],
+  ['Heaps', 3, 8],
+  ['Memoization', 1, 9],
+  ['Final · Dec 9', 2, 10],
+  ["Dijkstra's algorithm", 3, 11],
+];
+
+/** Decorative float field. `d` is the parallax depth the engine reads. */
+const MOTES: { d: number; s: React.CSSProperties }[] = [
+  { d: 0.25, s: { right: '7.6%', top: '28.1%', width: 5.1, height: 5.1, background: '#8FD9A8', opacity: 0.51, animation: 'nodeFloatB 14.9s ease-in-out -11.9s infinite' } },
+  { d: 0.37, s: { right: '5.0%', top: '67.2%', width: 7.3, height: 7.3, background: '#0E9E5A', opacity: 0.46, animation: 'nodeFloatB 16s ease-in-out -10.6s infinite' } },
+  { d: 0.47, s: { right: 6, top: '50.1%', width: 4.9, height: 4.9, background: '#6FBF8F', opacity: 0.41, animation: 'nodeFloatB 11.1s ease-in-out -4.1s infinite' } },
+  { d: 0.20, s: { right: '27.6%', top: '91.8%', width: 6.4, height: 6.4, background: '#6FBF8F', opacity: 0.39, animation: 'nodeFloatA 14s ease-in-out -10.4s infinite' } },
+  { d: 0.28, s: { right: '12.4%', top: '53.8%', width: 10.8, height: 10.8, background: '#6FBF8F', opacity: 0.48, boxShadow: '0 0 26px #6FBF8F66', animation: 'nodeFloatA 19.3s ease-in-out -4.9s infinite' } },
+  { d: 0.23, s: { left: '7.0%', top: '92.2%', width: 6.2, height: 6.2, background: '#6FBF8F', opacity: 0.47, animation: 'nodeFloatA 9.6s ease-in-out -3.7s infinite' } },
+  { d: 0.28, s: { right: '2.8%', top: '46.4%', width: 6.5, height: 6.5, background: '#6FBF8F', opacity: 0.43, animation: 'nodeFloatA 19.9s ease-in-out -15.7s infinite' } },
+  { d: 0.38, s: { left: '11.1%', top: '93.8%', width: 9.4, height: 9.4, background: '#6FBF8F', opacity: 0.47, boxShadow: '0 0 23px #6FBF8F66', animation: 'nodeFloatB 19.3s ease-in-out -14.1s infinite' } },
+  { d: 0.32, s: { right: '5.1%', top: '15.3%', width: 4.2, height: 4.2, background: '#6FBF8F', opacity: 0.42, animation: 'nodeFloatA 12.7s ease-in-out -2.7s infinite' } },
+  { d: 0.29, s: { left: '3.0%', top: '80.8%', width: 7.4, height: 7.4, background: '#6FBF8F', opacity: 0.35, animation: 'nodeFloatB 11.5s ease-in-out -0.8s infinite' } },
+  { d: 0.37, s: { right: '12.4%', top: '63.0%', width: 6.6, height: 6.6, background: '#8FD9A8', opacity: 0.52, animation: 'nodeFloatB 16.2s ease-in-out -2.7s infinite' } },
+  { d: 0.18, s: { left: '2.9%', top: '45.0%', width: 10.9, height: 10.9, background: '#6FBF8F', opacity: 0.37, boxShadow: '0 0 26px #6FBF8F66', animation: 'nodeFloatB 10.9s ease-in-out -8.4s infinite' } },
+  { d: 0.36, s: { left: '44.0%', top: '4.5%', width: 5, height: 5, background: '#8FD9A8', opacity: 0.57, animation: 'nodeFloatB 12.6s ease-in-out -4.8s infinite' } },
+  { d: 0.35, s: { left: '11.2%', top: '43.9%', width: 8.8, height: 8.8, background: '#6FBF8F', opacity: 0.4, boxShadow: '0 0 21px #6FBF8F66', animation: 'nodeFloatA 15.2s ease-in-out -13.9s infinite' } },
+];
+
+const MONO: React.CSSProperties = { fontFamily: "'JetBrains Mono',monospace" };
+const TILE: React.CSSProperties = {
+  background: '#FDFCF9', border: '1px solid #E8E5DA', borderRadius: 16,
+  padding: '14px 15px', minHeight: 150, position: 'relative', overflow: 'hidden',
+  display: 'flex', flexDirection: 'column', gap: 9,
+  transition: 'transform 220ms ease, box-shadow 220ms ease',
+};
+const TILE_LABEL: React.CSSProperties = { ...MONO, fontSize: 9, letterSpacing: '0.24em', color: '#0C5638' };
+const TILE_COUNT: React.CSSProperties = { fontFamily: "'Playfair Display',serif", fontSize: 21, fontWeight: 600, lineHeight: 1, color: '#12201A' };
+/** Underline that marks a concept inside the document. */
+const MARK: React.CSSProperties = { fontWeight: 600, color: '#33443B', boxShadow: 'inset 0 -4px 0 rgba(14,158,90,0.18)' };
+
+function TileHead({ label, i }: { label: string; i: number }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
+      <span style={TILE_LABEL}>{label}</span>
+      <div data-tilecount={i} style={TILE_COUNT}>+0</div>
+    </div>
+  );
+}
+
+export function ActIngest({
+  ingestSceneRef,
+  ingestStageRef,
+}: {
+  ingestSceneRef: React.RefObject<HTMLDivElement | null>;
+  ingestStageRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  return (
+    <section id="act-ingest" data-act="2" style={{ height: '320vh', position: 'relative' }}>
+      {/* holds no clusters, but the element has to exist — see DragField */}
+      <DragField section="act-ingest" />
+
+      <div style={{ position: 'sticky', top: 0, height: '100vh', overflow: 'hidden', display: 'flex', alignItems: 'center' }}>
+        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 0 }}>
+          {MOTES.map((m, i) => (
+            <span key={i} data-depth={m.d} style={{ position: 'absolute', borderRadius: 99, ...m.s }} />
+          ))}
+        </div>
+
+        <div ref={ingestSceneRef} style={{ position: 'relative', maxWidth: 1180, width: '100%', margin: '0 auto', padding: '0 24px', display: 'flex', flexDirection: 'column', gap: 26 }}>
+          <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', alignItems: 'stretch', gap: 20 }}>
+            <div>
+              <span style={{ ...MONO, fontSize: 10.5, letterSpacing: '0.34em', color: '#0C5638', textTransform: 'uppercase' }}>Ingest</span>
+              <h2 style={{ margin: '14px 0 0', fontFamily: "'Playfair Display',serif", fontSize: 'clamp(2.2rem,4.2vw,3.5rem)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-0.02em', color: '#12201A' }}>
+                Drop in the whole <em style={{ color: '#0C5638' }}>course.</em>
+              </h2>
+            </div>
+            <div style={{ width: '100%', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,520px)', gap: '14px clamp(28px,5vw,72px)', alignItems: 'start' }}>
+              <p style={{ margin: 0, maxWidth: '44ch', color: '#61726A', fontSize: 14.5, lineHeight: 1.68 }}>
+                Ask ChatGPT for practice and you get generic exercises off the internet, then an
+                empty box again. It forgets. Sapling works only from{' '}
+                <em style={{ fontStyle: 'normal', color: '#12201A', fontWeight: 600 }}>your class&rsquo;s</em>{' '}
+                material: your professor&rsquo;s slides, the syllabus, lecture notes.
+              </p>
+              <p style={{ margin: 0, maxWidth: '52ch', color: '#61726A', fontSize: 14.5, lineHeight: 1.68 }}>
+                And every student who adds their documents makes the AI understand the course
+                better. One person&rsquo;s lecture notes fill a gap in another&rsquo;s slides, so the model
+                learns what this professor actually emphasizes, how they word questions, which
+                concepts they keep returning to. The more your class contributes, the sharper the
+                context gets for everyone in it.
+              </p>
+            </div>
+          </div>
+
+          <div ref={ingestStageRef} style={{ position: 'relative', flex: '0 0 auto', height: 'min(376px, 44vh)' }}>
+            <div
+              data-ingest-fit="1"
+              style={{
+                position: 'absolute', left: 0, right: 0, top: 0, height: 376,
+                transformOrigin: 'top left', display: 'grid',
+                gridTemplateColumns: 'minmax(0,1fr) minmax(0,520px)',
+                gap: 'clamp(28px,5vw,72px)', alignItems: 'stretch',
+              }}
+            >
+              {/* ── the document ── */}
+              <div
+                data-ingest-doc="1"
+                data-tilt="1"
+                style={{ position: 'relative', height: '100%', maxWidth: 340, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', background: '#FDFCF9', border: '1px solid #E8E5DA', borderRadius: 14, padding: '22px 22px 24px', boxShadow: '0 30px 80px rgba(18,32,26,0.16)' }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <span style={{ ...MONO, fontSize: 10, letterSpacing: '0.2em', color: '#61726A' }}>CS 112 · SYLLABUS.PDF</span>
+                  <span style={{ width: 8, height: 8, borderRadius: 99, background: '#0E9E5A' }} />
+                </div>
+                <div style={{ position: 'relative', flex: 1, minHeight: 0, marginTop: 14, overflow: 'hidden' }}>
+                  {/* OCR scan bar sweeping the page */}
+                  <span
+                    aria-hidden="true"
+                    style={{ position: 'absolute', left: -22, right: -22, height: 26, zIndex: 2, pointerEvents: 'none', background: 'linear-gradient(180deg, rgba(14,158,90,0) 0%, rgba(14,158,90,0.13) 60%, rgba(14,158,90,0.55) 96%, rgba(14,158,90,0) 100%)', animation: 'scanSweep 4.2s cubic-bezier(0.6,0,0.4,1) infinite' }}
+                  />
+                  {DOC_LINES.map(([pre, bold, post], i) => (
+                    <span
+                      key={i}
+                      data-docline={i}
+                      style={{ display: 'block', height: 17, lineHeight: '17px', fontSize: 8.5, color: '#8B9891', whiteSpace: 'nowrap', overflow: 'hidden', transition: 'opacity 200ms ease' }}
+                    >
+                      {pre}<b style={MARK}>{bold}</b>{post}
+                    </span>
+                  ))}
+                </div>
+                <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid #EBF1EC', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <span style={{ display: 'flex', alignItems: 'center', gap: 6, ...MONO, fontSize: 8, letterSpacing: '0.16em', color: '#0C5638' }}>
+                    <span style={{ width: 5, height: 5, borderRadius: 99, background: '#0E9E5A', animation: 'ocrBlink 1.4s ease-in-out infinite' }} />
+                    OCR · 4 PAGES
+                  </span>
+                  <span style={{ ...MONO, fontSize: 8, letterSpacing: '0.16em', color: '#9AA5A0' }}>12 CONCEPTS FOUND</span>
+                </div>
+              </div>
+
+              {/* ── destinations ── */}
+              <div style={{ position: 'relative', width: '100%', display: 'grid', gridTemplateColumns: '1fr 1fr', gridAutoRows: '1fr', gap: 16 }}>
+                <div data-ingest-tile="0" style={TILE}>
+                  <TileHead label="GRAPH" i={0} />
+                  <div aria-hidden="true" style={{ position: 'relative', flex: 1, borderRadius: 10, background: '#F6F8F4', border: '1px solid #EBF1EC', overflow: 'hidden' }}>
+                    <svg width="100%" height="100%" viewBox="0 0 230 84" preserveAspectRatio="xMidYMid meet">
+                      <line x1="115" y1="42" x2="52" y2="20" stroke="rgba(12,86,56,0.24)" />
+                      <line x1="115" y1="42" x2="44" y2="64" stroke="rgba(12,86,56,0.24)" />
+                      <line x1="115" y1="42" x2="186" y2="24" stroke="rgba(12,86,56,0.24)" />
+                      <line x1="115" y1="42" x2="176" y2="66" stroke="rgba(12,86,56,0.14)" />
+                      <circle cx="115" cy="42" r="8" fill="#0E9E5A" />
+                      <text x="115" y="45" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="6.5" fill="#FDFCF9">112</text>
+                      <circle cx="52" cy="20" r="4.5" fill="#4FA574" /><text x="52" y="12" textAnchor="middle" fontFamily="DM Sans" fontSize="7" fill="#8B9891">Trees</text>
+                      <circle cx="44" cy="64" r="4.5" fill="#4FA574" /><text x="44" y="78" textAnchor="middle" fontFamily="DM Sans" fontSize="7" fill="#8B9891">Hashing</text>
+                      <circle cx="186" cy="24" r="4.5" fill="#4FA574" /><text x="186" y="16" textAnchor="middle" fontFamily="DM Sans" fontSize="7" fill="#8B9891">Graphs</text>
+                      <circle cx="176" cy="66" r="4" fill="#C3CCC6" /><text x="176" y="79" textAnchor="middle" fontFamily="DM Sans" fontSize="7" fill="#9AA5A0">DP</text>
+                    </svg>
+                    <span style={{ position: 'absolute', left: 9, bottom: 6, ...MONO, fontSize: 7, letterSpacing: '0.14em', color: '#9AA5A0' }}>
+                      MASTERY 0%  ·  UNEXPLORED
+                    </span>
+                  </div>
+                </div>
+
+                <div data-ingest-tile="1" style={TILE}>
+                  <TileHead label="FLASHCARDS" i={1} />
+                  <div aria-hidden="true" style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
+                    <div style={{ flex: 1, borderRadius: 9, background: '#F6F8F4', border: '1px solid #E3EBE5', padding: '8px 10px', display: 'flex', flexDirection: 'column', gap: 3, justifyContent: 'center' }}>
+                      <span style={{ ...MONO, fontSize: 6.5, letterSpacing: '0.2em', color: '#9AA5A0' }}>FRONT · AUTO-GENERATED</span>
+                      <span style={{ fontFamily: "'Playfair Display',serif", fontSize: 11, fontWeight: 600, lineHeight: 1.25, color: '#12201A' }}>What does Big-O actually bound?</span>
+                    </div>
+                    <div style={{ display: 'flex', gap: 4 }}>
+                      {([['FORGOT', 'rgba(178,88,85,0.4)', 'rgba(178,88,85,0.08)', '#9c4b48'],
+                         ['HARD', 'rgba(200,155,94,0.4)', 'rgba(200,155,94,0.08)', '#8a6636'],
+                         ['EASY', 'rgba(58,125,78,0.4)', 'rgba(58,125,78,0.08)', '#2f6640']] as const).map(([t, bd, bg, fg]) => (
+                        <span key={t} style={{ flex: 1, textAlign: 'center', padding: '3px 0', borderRadius: 5, border: `1px solid ${bd}`, background: bg, ...MONO, fontSize: 6.5, color: fg }}>{t}</span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                <div data-ingest-tile="2" style={TILE}>
+                  <TileHead label="CALENDAR" i={2} />
+                  <div aria-hidden="true" style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, justifyContent: 'center' }}>
+                    {([['#b25855', 'OCT 14', 'Midterm · in class'],
+                       ['#0E9E5A', 'OCT 18', 'PS 3 · Gradescope'],
+                       ['#4FA574', 'DEC 09', 'Final · cumulative']] as const).map(([c, d, t]) => (
+                      <div key={d} style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '4px 7px', borderRadius: 6, background: '#F6F8F4', border: '1px solid #EBF1EC' }}>
+                        <span style={{ width: 3, height: 15, borderRadius: 2, background: c, flex: '0 0 auto' }} />
+                        <span style={{ ...MONO, fontSize: 6.5, letterSpacing: '0.1em', color: '#9AA5A0', flex: '0 0 auto' }}>{d}</span>
+                        <span style={{ fontSize: 8.5, color: '#33443B', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t}</span>
+                      </div>
+                    ))}
+                    <span style={{ ...MONO, fontSize: 6.5, letterSpacing: '0.14em', color: '#0C5638', paddingLeft: 2 }}>SYNCED TO GOOGLE CALENDAR</span>
+                  </div>
+                </div>
+
+                <div data-ingest-tile="3" style={TILE}>
+                  <TileHead label="QUIZ BANK" i={3} />
+                  <div aria-hidden="true" style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 5, justifyContent: 'center' }}>
+                    <span style={{ fontSize: 9, lineHeight: 1.35, color: '#12201A', fontWeight: 600 }}>Worst-case lookup in a hash map with chaining?</span>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+                      <span style={{ display: 'flex', gap: 5, padding: '3px 7px', borderRadius: 5, border: '1px solid #E3E0D5', background: '#F6F8F4', fontSize: 8, color: '#61726A' }}>
+                        <b style={{ ...MONO, fontSize: 7, fontWeight: 400, color: '#9AA5A0' }}>A.</b>O(1)
+                      </span>
+                      <span style={{ display: 'flex', gap: 5, padding: '3px 7px', borderRadius: 5, border: '1px solid #0E9E5A', background: '#E6F2E8', fontSize: 8, color: '#0C5638', fontWeight: 600 }}>
+                        <b style={{ ...MONO, fontSize: 7, fontWeight: 400, color: '#0E9E5A' }}>B.</b>O(n)
+                      </span>
+                    </div>
+                    <span style={{ ...MONO, fontSize: 6.5, letterSpacing: '0.14em', color: '#9AA5A0' }}>DIFFICULTY ADAPTS TO YOUR ANSWERS</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* ── flying concept chips ── */}
+              {CHIPS.map(([label, dest, line], i) => {
+                const dark = dest === 0;
+                return (
+                  <span
+                    key={i}
+                    data-chip={i}
+                    data-dest={dest}
+                    data-line={line}
+                    style={{
+                      position: 'absolute', left: 0, top: 0, zIndex: 5, opacity: 0,
+                      padding: '6px 12px', borderRadius: 99,
+                      background: dark ? '#0C5638' : '#FDFCF9',
+                      border: dark ? undefined : '1px solid #DCE7DE',
+                      color: dark ? '#E6F2E8' : '#33443B',
+                      ...MONO, fontSize: 10.5, letterSpacing: '0.08em', whiteSpace: 'nowrap',
+                      boxShadow: dark ? '0 8px 24px rgba(12,86,56,0.3)' : '0 8px 24px rgba(18,32,26,0.12)',
+                      willChange: 'transform',
+                    }}
+                  >
+                    {label}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/landing-v5/ActTutor.tsx b/frontend/src/components/landing-v5/ActTutor.tsx
new file mode 100644
index 00000000..e0c0d33c
--- /dev/null
+++ b/frontend/src/components/landing-v5/ActTutor.tsx
@@ -0,0 +1,303 @@
+'use client';
+
+/**
+ * Act III — the tutor.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. 340vh pinned to a sticky stage.
+ * Three tutor panels sit on the faces of a triangular prism —
+ * `rotateY(0|120|240deg) translateZ(310px)` inside a `preserve-3d` carousel —
+ * and the engine spins it as scroll advances, cross-fading the matching
+ * caption on the left. Past the act, the pills take over and the carousel
+ * becomes clickable.
+ *
+ * Engine hooks: `carouselRef` for the spin, `[data-tcap]` for the captions,
+ * `[data-tutor-pills]` for the handover, `[data-panel]` for per-face depth
+ * cueing, `[data-depth]` for the motes.
+ */
+
+import { DragField } from './DragField';
+
+const MONO: React.CSSProperties = { fontFamily: "'JetBrains Mono',monospace" };
+
+const CAPTIONS = [
+  ['SOCRATIC', 'Never hands you the answer. It asks the question that gets you there yourself.'],
+  ['EXPOSITORY', 'Explains it straight: structured, sourced from your materials, at your level.'],
+  ['TEACHBACK', 'Flips the desk. You explain, and Sapling names exactly where it breaks down.'],
+];
+
+const MOTES: { d: number; s: React.CSSProperties }[] = [
+  { d: 0.47, s: { right: '28.6%', top: '4.2%', width: 6.9, height: 6.9, background: '#6FBF8F', opacity: 0.46, animation: 'nodeFloatA 12.1s ease-in-out -9s infinite' } },
+  { d: 0.41, s: { right: '8.9%', top: '56.6%', width: 8.8, height: 8.8, background: '#0E9E5A', opacity: 0.59, boxShadow: '0 0 21px #0E9E5A66', animation: 'nodeFloatB 13.1s ease-in-out -2.1s infinite' } },
+  { d: 0.33, s: { right: '8.0%', top: '2.8%', width: 7, height: 7, background: '#0E9E5A', opacity: 0.56, animation: 'nodeFloatB 17.5s ease-in-out -17.2s infinite' } },
+  { d: 0.17, s: { right: '12.1%', top: '64.7%', width: 10.5, height: 10.5, background: '#4FA574', opacity: 0.39, boxShadow: '0 0 25px #4FA57466', animation: 'nodeFloatA 10s ease-in-out -8.9s infinite' } },
+  { d: 0.40, s: { left: '13.5%', top: '94.8%', width: 6.7, height: 6.7, background: '#4FA574', opacity: 0.56, animation: 'nodeFloatA 15.1s ease-in-out -17.3s infinite' } },
+  { d: 0.21, s: { right: '43.6%', top: '5.2%', width: 5.7, height: 5.7, background: '#6FBF8F', opacity: 0.53, animation: 'nodeFloatB 18.1s ease-in-out -5.2s infinite' } },
+  { d: 0.37, s: { right: '10.0%', top: '92.0%', width: 8.1, height: 8.1, background: '#0E9E5A', opacity: 0.58, boxShadow: '0 0 19px #0E9E5A66', animation: 'nodeFloatA 17.8s ease-in-out -16.5s infinite' } },
+  { d: 0.22, s: { left: '5.1%', top: '51.6%', width: 4.7, height: 4.7, background: '#8FD9A8', opacity: 0.51, animation: 'nodeFloatB 15.6s ease-in-out -1.7s infinite' } },
+  { d: 0.46, s: { left: '5.1%', top: '17.7%', width: 7.9, height: 7.9, background: '#2E7D52', opacity: 0.41, boxShadow: '0 0 19px #2E7D5266', animation: 'nodeFloatA 17s ease-in-out -10.1s infinite' } },
+  { d: 0.47, s: { left: '35.5%', top: '4.3%', width: 6.5, height: 6.5, background: '#0E9E5A', opacity: 0.56, animation: 'nodeFloatB 14.5s ease-in-out -9.6s infinite' } },
+];
+
+/** Common to all three faces of the prism. */
+const FACE: React.CSSProperties = {
+  position: 'absolute', inset: 0, backfaceVisibility: 'hidden',
+  borderRadius: 22, padding: 20, boxSizing: 'border-box', overflow: 'hidden',
+};
+
+/** Viewer distance, and how far each face stands off the prism's axis. */
+const PERSPECTIVE = 1600;
+const RADIUS = 310;
+/**
+ * How much the perspective blows the faces up, and the correction for it.
+ *
+ * A face sitting `RADIUS` closer to the viewer than the prism's origin is
+ * drawn `MAG` times larger than its CSS box — but the compositor rasterises
+ * the layer at its CSS size and scales the bitmap up afterwards, so every
+ * glyph on these three cards was being resampled 24% larger than it was ever
+ * drawn. Pushing the prism back by `RADIUS` lands the front face exactly on
+ * the perspective origin plane, where the magnification is 1 and the raster
+ * is 1:1; `zoom` then scales the whole subtree — box, type and the faces'
+ * own translateZ alike — back to the size it occupied before, at full
+ * resolution. Measured edge acuity on the front face nearly doubles, and the
+ * card's on-screen rect is unchanged at 533x620.
+ */
+const MAG = PERSPECTIVE / (PERSPECTIVE - RADIUS);
+
+const PILL_ON = '#0C5638';
+const PILL_ON_FG = '#FDFCF9';
+
+export function ActTutor({
+  carouselRef,
+  tutorMode,
+  onSetMode,
+}: {
+  carouselRef: React.RefObject<HTMLDivElement | null>;
+  tutorMode: number;
+  onSetMode: (i: number) => void;
+}) {
+  return (
+    <section id="act-tutor" data-act="3" style={{ height: '340vh', position: 'relative' }}>
+      <DragField section="act-tutor" />
+
+      <div
+        style={{
+          position: 'sticky', top: 0, height: '100vh', overflow: 'hidden',
+          display: 'flex', alignItems: 'center',
+          background: 'linear-gradient(180deg, rgba(230,242,232,0) 0%, rgba(230,242,232,0.6) 30%, rgba(230,242,232,0.6) 70%, rgba(230,242,232,0) 100%)',
+        }}
+      >
+        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 0 }}>
+          {MOTES.map((m, i) => (
+            <span key={i} data-depth={m.d} style={{ position: 'absolute', borderRadius: 99, ...m.s }} />
+          ))}
+        </div>
+
+        <div style={{ maxWidth: 1220, width: '100%', margin: '0 auto', padding: '0 24px', display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 32, alignItems: 'center' }}>
+          <div style={{ position: 'relative', zIndex: 2 }}>
+            <span style={{ ...MONO, fontSize: 10.5, letterSpacing: '0.34em', color: '#0C5638', textTransform: 'uppercase' }}>AI tutor</span>
+            <h2 style={{ margin: '16px 0 0', fontFamily: "'Playfair Display',serif", fontSize: 'clamp(2.4rem,4.8vw,4.2rem)', fontWeight: 600, lineHeight: 1.04, letterSpacing: '-0.02em', color: '#12201A' }}>
+              Three ways to learn this. Your <em style={{ color: '#0C5638' }}>pick.</em>
+            </h2>
+
+            <div style={{ position: 'relative', marginTop: 22, minHeight: 110 }}>
+              {CAPTIONS.map(([tag, body], i) => (
+                <div key={tag} data-tcap={i} style={{ position: 'absolute', inset: 0, opacity: 0 }}>
+                  <span style={{ ...MONO, fontSize: 10, letterSpacing: '0.28em', color: '#0C5638' }}>{tag}</span>
+                  <p style={{ margin: '8px 0 0', color: '#33443B', fontSize: 15.5, lineHeight: 1.7, maxWidth: '36ch' }}>{body}</p>
+                </div>
+              ))}
+            </div>
+
+            {/* the engine fades these in once the act's scroll is spent */}
+            <div data-tutor-pills="1" style={{ display: 'flex', gap: 8, marginTop: 8, opacity: 0, pointerEvents: 'none', transition: 'opacity 400ms ease' }}>
+              {CAPTIONS.map(([tag], i) => (
+                <button
+                  key={tag}
+                  onClick={() => onSetMode(i)}
+                  style={{
+                    border: '1px solid rgba(12,86,56,0.3)', borderRadius: 99, padding: '9px 18px',
+                    ...MONO, fontSize: 10.5, letterSpacing: '0.12em', cursor: 'pointer',
+                    background: tutorMode === i ? PILL_ON : 'transparent',
+                    color: tutorMode === i ? PILL_ON_FG : '#33443B',
+                    transition: 'all 250ms',
+                  }}
+                >
+                  {tag}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div style={{ perspective: PERSPECTIVE, height: 'min(66vh,560px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div style={{ zoom: MAG, transformStyle: 'preserve-3d', transform: `translateZ(${-RADIUS}px)` }}>
+            <div
+              ref={carouselRef}
+              style={{ position: 'relative', width: 'min(430px,44vw)', height: 'min(500px,60vh)', transformStyle: 'preserve-3d', willChange: 'transform' }}
+            >
+              {/* ── face 0 · Socratic ── */}
+              <div
+                data-panel="0"
+                data-socratic="1"
+                style={{ ...FACE, transform: `rotateY(0deg) translateZ(${RADIUS}px)`, background: '#FDFCF9', border: '1px solid #E8E5DA', boxShadow: '0 26px 54px -22px rgba(18,32,26,0.3)', display: 'grid', gridTemplateRows: 'auto minmax(0,1fr) auto', gap: 10 }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <span style={{ ...MONO, fontSize: 10, letterSpacing: '0.22em', color: '#0C5638' }}>SOCRATIC MODE</span>
+                  <span style={{ fontFamily: "'Playfair Display',serif", fontStyle: 'italic', fontSize: 22, color: '#0C5638' }}>?</span>
+                </div>
+                <div style={{ minHeight: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 5, overflow: 'hidden' }}>
+                  <div style={{ alignSelf: 'flex-start', maxWidth: '88%', background: '#E6F2E8', borderRadius: '14px 14px 14px 4px', padding: '8px 12px', fontSize: 12, lineHeight: 1.45, color: '#12201A' }}>
+                    Before rotations: what does the &ldquo;B&rdquo; in BST guarantee about a node&rsquo;s children?
+                  </div>
+                  <div style={{ alignSelf: 'flex-end', maxWidth: '80%', background: '#0C5638', color: '#E6F2E8', borderRadius: '14px 14px 4px 14px', padding: '8px 12px', fontSize: 12, lineHeight: 1.45 }}>
+                    left subtree smaller, right subtree bigger?
+                  </div>
+                  <div style={{ alignSelf: 'flex-start', maxWidth: '88%', background: '#E6F2E8', borderRadius: '14px 14px 14px 4px', padding: '8px 12px', fontSize: 12, lineHeight: 1.45, color: '#12201A' }}>
+                    Right. So what breaks if one side grows far taller?
+                  </div>
+                  <div style={{ alignSelf: 'flex-end', maxWidth: '80%', background: '#0C5638', color: '#E6F2E8', borderRadius: '14px 14px 4px 14px', padding: '8px 12px', fontSize: 12, lineHeight: 1.45 }}>
+                    lookup stops being logarithmic
+                  </div>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 5, borderTop: '1px solid #EBF1EC', paddingTop: 9 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <span style={{ ...MONO, fontSize: 8, letterSpacing: '0.18em', color: '#9AA5A0' }}>HINT LADDER</span>
+                    <span style={{ display: 'flex', gap: 4, marginLeft: 2 }}>
+                      {[true, true, false, false].map((on, i) => (
+                        <span key={i} style={{ width: 18, height: 3, borderRadius: 99, background: on ? '#0E9E5A' : '#DCE7DE' }} />
+                      ))}
+                    </span>
+                    <span style={{ marginLeft: 'auto', ...MONO, fontSize: 9, color: '#61726A' }}>2 / 4</span>
+                  </div>
+                  <span style={{ fontSize: 11, lineHeight: 1.5, color: '#8B9891' }}>It escalates only when you stall.</span>
+                </div>
+              </div>
+
+              {/* ── face 1 · Expository ── */}
+              <div
+                data-panel="1"
+                style={{ ...FACE, transform: `rotateY(120deg) translateZ(${RADIUS}px)`, background: '#F6F8F4', border: '1px solid #E8E5DA', boxShadow: '0 26px 54px -22px rgba(18,32,26,0.3)', display: 'grid', gridTemplateRows: 'auto auto auto minmax(0,1fr) auto auto', gap: 9 }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <span style={{ ...MONO, fontSize: 10, letterSpacing: '0.22em', color: '#0C5638' }}>EXPOSITORY MODE</span>
+                  <svg aria-hidden="true" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#0C5638" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M12 6.5C10.5 5 8.3 4.4 5 4.4c-.6 0-1 .4-1 1v11.4c0 .6.4 1 1 1 3.3 0 5.5.6 7 2.1" />
+                    <path d="M12 6.5c1.5-1.5 3.7-2.1 7-2.1.6 0 1 .4 1 1v11.4c0 .6-.4 1-1 1-3.3 0-5.5.6-7 2.1" />
+                    <path d="M12 6.5v13.4" />
+                  </svg>
+                </div>
+                <h3 style={{ margin: 0, fontFamily: "'Playfair Display',serif", fontSize: 18, fontWeight: 600, color: '#12201A' }}>AVL rotations, plainly.</h3>
+                <p style={{ margin: 0, fontSize: 12.5, lineHeight: 1.65, color: '#33443B' }}>
+                  Every node&rsquo;s <span style={{ background: '#E6F2E8', borderRadius: 4, padding: '0 3px', color: '#0C5638', fontWeight: 600 }}>balance factor</span> stays in {'{−1, 0, +1}'}. When an insert breaks that, one of four <span style={{ background: '#E6F2E8', borderRadius: 4, padding: '0 3px', color: '#0C5638', fontWeight: 600 }}>rotations</span> restores it in O(1).
+                </p>
+                <div style={{ minHeight: 0, display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 6, alignItems: 'stretch', background: '#FDFCF9', border: '1px solid #E8E5DA', borderRadius: 12, padding: '9px 10px', overflow: 'hidden' }}>
+                  <div style={{ minHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
+                    <svg aria-hidden="true" width="100%" height="100%" style={{ flex: 1, minHeight: 34 }} preserveAspectRatio="xMidYMid meet" viewBox="0 0 120 62">
+                      <line x1="82" y1="12" x2="52" y2="34" stroke="#DCE7DE" strokeWidth="1.5" />
+                      <line x1="52" y1="34" x2="26" y2="54" stroke="#DCE7DE" strokeWidth="1.5" />
+                      <circle cx="82" cy="12" r="9" fill="#E27A63" />
+                      <text x="82" y="15.5" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#FDFCF9">+2</text>
+                      <circle cx="52" cy="34" r="7" fill="#4FA574" />
+                      <circle cx="26" cy="54" r="6" fill="#8FD9A8" />
+                    </svg>
+                    <span style={{ ...MONO, fontSize: 7.5, letterSpacing: '0.14em', color: '#9c4b48' }}>LEFT-HEAVY</span>
+                  </div>
+                  <span style={{ alignSelf: 'center', ...MONO, fontSize: 11, color: '#0C5638' }}>→</span>
+                  <div style={{ minHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
+                    <svg aria-hidden="true" width="100%" height="100%" style={{ flex: 1, minHeight: 34 }} preserveAspectRatio="xMidYMid meet" viewBox="0 0 120 62">
+                      <line x1="60" y1="16" x2="34" y2="46" stroke="#4FA574" strokeWidth="1.5" />
+                      <line x1="60" y1="16" x2="88" y2="46" stroke="#4FA574" strokeWidth="1.5" />
+                      <circle cx="60" cy="16" r="9" fill="#0C5638" />
+                      <text x="60" y="19.5" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#E6F2E8">0</text>
+                      <circle cx="34" cy="46" r="7" fill="#4FA574" />
+                      <circle cx="88" cy="46" r="7" fill="#8FD9A8" />
+                    </svg>
+                    <span style={{ ...MONO, fontSize: 7.5, letterSpacing: '0.14em', color: '#0C5638' }}>AFTER LL ROTATE</span>
+                  </div>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+                  <span style={{ ...MONO, fontSize: 8, letterSpacing: '0.18em', color: '#9AA5A0' }}>FOUR CASES</span>
+                  {(['LL', 'LR', 'RL', 'RR'] as const).map((t) => {
+                    const on = t === 'LL';
+                    return (
+                      <span
+                        key={t}
+                        style={{ flex: 1, textAlign: 'center', padding: '4px 0', borderRadius: 6, ...MONO, fontSize: 8.5, letterSpacing: '0.1em', background: on ? '#E6F2E8' : '#FDFCF9', border: `1px solid ${on ? '#0E9E5A' : '#E8E5DA'}`, color: on ? '#0C5638' : '#8B9891' }}
+                      >
+                        {t}
+                      </span>
+                    );
+                  })}
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 5, borderTop: '1px solid #E3EBE5', paddingTop: 9 }}>
+                  <span style={{ ...MONO, fontSize: 8, letterSpacing: '0.2em', color: '#9AA5A0' }}>RETRIEVED FROM YOUR LIBRARY</span>
+                  <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
+                    <span style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 6, background: '#FDFCF9', border: '1px solid #DCE7DE', ...MONO, fontSize: 8.5, color: '#33443B' }}>
+                      <span style={{ width: 5, height: 5, borderRadius: 99, background: '#0E9E5A' }} />
+                      lecture-07.pdf<b style={{ fontWeight: 400, color: '#9AA5A0' }}>p. 12</b>
+                    </span>
+                    <span style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 6, background: '#FDFCF9', border: '1px solid #DCE7DE', ...MONO, fontSize: 8.5, color: '#33443B' }}>
+                      <span style={{ width: 5, height: 5, borderRadius: 99, background: '#0E9E5A' }} />
+                      notes-wk4.md
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* ── face 2 · TeachBack — the only dark face ── */}
+              <div
+                data-panel="2"
+                style={{ ...FACE, transform: `rotateY(240deg) translateZ(${RADIUS}px)`, background: 'linear-gradient(155deg,#153F2B 0%,#0D2B1E 58%,#081F14 100%)', border: '1px solid rgba(143,217,168,0.22)', boxShadow: '0 26px 54px -22px rgba(4,22,14,0.55)', padding: 18, display: 'grid', gridTemplateRows: 'auto auto auto minmax(0,1fr) auto', gap: 8 }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <span style={{ ...MONO, fontSize: 10, letterSpacing: '0.22em', color: '#8FD9A8' }}>TEACHBACK MODE</span>
+                  <svg aria-hidden="true" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#E27A63" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M12 3.5a3 3 0 0 1 3 3v4.5a3 3 0 0 1-6 0V6.5a3 3 0 0 1 3-3z" />
+                    <path d="M5.5 10.5v.8a6.5 6.5 0 0 0 13 0v-.8" />
+                    <path d="M12 17.8V21" />
+                  </svg>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                  <span style={{ display: 'flex', alignItems: 'flex-end', gap: 2.5, height: 26 }}>
+                    {([['#4FA574', '1.1s', '0s'], ['#8FD9A8', '1.3s', '-0.2s'], ['#0E9E5A', '0.9s', '-0.5s'],
+                       ['#8FD9A8', '1.2s', '-0.8s'], ['#4FA574', '1.0s', '-0.3s'], ['#0E9E5A', '1.4s', '-0.6s'],
+                       ['#8FD9A8', '1.1s', '-0.9s'], ['#4FA574', '1.25s', '-0.4s'], ['#0E9E5A', '0.95s', '-0.7s']] as const).map(([c, dur, delay], i) => (
+                      <span key={i} style={{ width: 3, height: '100%', borderRadius: 2, background: c, transformOrigin: 'bottom', animation: `waveBar ${dur} ease-in-out ${delay} infinite` }} />
+                    ))}
+                  </span>
+                  <span style={{ ...MONO, fontSize: 8.5, letterSpacing: '0.16em', color: '#8FD9A8' }}>RECORDING · 0:42</span>
+                </div>
+                <p style={{ margin: 0, fontSize: 12, lineHeight: 1.6, color: '#B9D9C4' }}>
+                  &ldquo;…so you <span style={{ color: '#E6F2E8' }}>rotate left when the right side gets too heavy</span>, and, um, <span style={{ background: 'rgba(226,122,99,0.16)', borderBottom: '1.5px solid #E27A63', borderRadius: 3, padding: '1px 3px', color: '#F6F8F4' }}>the parent just moves down</span> and it&rsquo;s balanced again…&rdquo;
+                </p>
+                <div style={{ minHeight: 0, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 3, overflow: 'hidden' }}>
+                  <span style={{ ...MONO, fontSize: 8, letterSpacing: '0.2em', color: '#5F7A6C', marginBottom: 2 }}>WHAT YOUR EXPLANATION COVERED</span>
+                  {([['#0E9E5A', 'Rotation direction', 'CORRECT'],
+                     ['#E27A63', 'Which node becomes root', 'MISSING'],
+                     ['#c89b5e', 'Subtree reattachment', 'VAGUE']] as const).map(([c, label, verdict]) => (
+                    <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <span style={{ width: 6, height: 6, borderRadius: 99, background: c, flex: '0 0 auto' }} />
+                      <span style={{ fontSize: 10.5, color: '#B9D9C4' }}>{label}</span>
+                      <span style={{ marginLeft: 'auto', ...MONO, fontSize: 8.5, letterSpacing: '0.14em', color: c }}>{verdict}</span>
+                    </div>
+                  ))}
+                </div>
+                <div style={{ background: 'rgba(226,122,99,0.12)', border: '1px solid rgba(226,122,99,0.4)', borderRadius: 12, padding: '8px 11px' }}>
+                  <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.2em', color: '#E27A63' }}>GAP FOUND</span>
+                  <p style={{ margin: '5px 0 0', fontSize: 11.5, lineHeight: 1.5, color: '#F6F8F4' }}>
+                    The right child becomes the new root, not the parent.
+                  </p>
+                  <div style={{ marginTop: 7, display: 'flex', alignItems: 'center', gap: 8 }}>
+                    {/* mastery goes DOWN — the gap is new information */}
+                    <span style={{ ...MONO, fontSize: 8, letterSpacing: '0.14em', color: '#B9D9C4' }}>MASTERY 24% → 19%</span>
+                    <span style={{ marginLeft: 'auto', ...MONO, fontSize: 8, letterSpacing: '0.14em', color: '#8FD9A8', whiteSpace: 'nowrap' }}>RE-EXPLAIN ↻</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/landing-v5/BetaModal.tsx b/frontend/src/components/landing-v5/BetaModal.tsx
new file mode 100644
index 00000000..c8897ee1
--- /dev/null
+++ b/frontend/src/components/landing-v5/BetaModal.tsx
@@ -0,0 +1,291 @@
+'use client';
+
+/**
+ * Beta access + newsletter dialog.
+ *
+ * This is the modal the previous landing page shipped — recovered rather than
+ * reinvented, so what runs here is what has been on staging: a two-column
+ * card, brand and beta-tester panel on the left, newsletter pitch and signup
+ * on the right.
+ *
+ * A departure from `Sapling Landing v5.dc.html`, which wires both beta CTAs
+ * to scroll down to the newsletter section instead. Requested.
+ *
+ * Not built on the shared `Dialog`: that caps at 760px (`size="xl"`) and this
+ * card is `min(1040px, 94vw)` with a two-column grid. The behaviour `Dialog`
+ * would have brought — scroll lock, Escape, focus move, `aria-modal` — is
+ * wired explicitly below instead.
+ *
+ * One behavioural change from the original: it POSTed and then showed success
+ * unconditionally, swallowing failures in an empty `catch`. Submission now
+ * goes through `useLanding`'s `subscribe`, which only reports success on a
+ * 2xx and surfaces a readable message otherwise.
+ */
+
+import { useEffect, useId, useRef, useState } from 'react';
+import Image from 'next/image';
+import { HeroCard } from '@/components/marketing/HeroCard';
+import { useScrollLock } from '@/lib/useScrollLock';
+
+const PLAYFAIR = "var(--font-playfair), 'Playfair Display', Georgia, serif";
+const SPECTRAL = "var(--font-spectral), 'Spectral', Georgia, serif";
+const JETBRAINS = "var(--font-jetbrains), 'JetBrains Mono', monospace";
+const DM = "var(--font-dm-sans), 'DM Sans', sans-serif";
+
+/** The three newsletter perks, each with its own accent dot. */
+const PERKS = [
+  { dot: '#1B6C42', title: 'New features, first.', body: 'Every study mode, knowledge tool, and capability before anyone else sees it.' },
+  { dot: '#D97706', title: 'Real notes from the team.', body: "What we're figuring out as we build. Honest, occasional, and worth opening." },
+  { dot: '#8A63D2', title: 'Your input shapes what we build.', body: 'Early polls, roadmap previews, and a direct line to the people building it.' },
+];
+
+export function BetaModal({
+  open,
+  email,
+  subscribed,
+  subscribing,
+  error,
+  onEmail,
+  onSubscribe,
+  onClose,
+}: {
+  open: boolean;
+  email: string;
+  subscribed: boolean;
+  subscribing: boolean;
+  error: string | null;
+  onEmail: (v: string) => void;
+  onSubscribe: () => void;
+  onClose: () => void;
+}) {
+  const [closing, setClosing] = useState(false);
+  const [localError, setLocalError] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const labelId = useId();
+
+  useScrollLock(open);
+
+  // play the exit animation before unmounting, and never close mid-request
+  const dismiss = () => {
+    if (subscribing) return;
+    setClosing(true);
+    setTimeout(() => { setClosing(false); setLocalError(''); onClose(); }, 200);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') dismiss(); };
+    document.addEventListener('keydown', onKey);
+    const t = setTimeout(() => inputRef.current?.focus(), 60);
+    return () => { document.removeEventListener('keydown', onKey); clearTimeout(t); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, subscribing]);
+
+  if (!open) return null;
+
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = email.trim();
+    const [local, domain] = trimmed.split('@');
+    if (!local || !domain || !domain.includes('.')) {
+      setLocalError('Enter a valid email (e.g. you@example.com)');
+      return;
+    }
+    setLocalError('');
+    onSubscribe();
+  };
+
+  // ── success ──
+  if (subscribed) {
+    return (
+      <div
+        className={`fixed inset-0 z-[100] flex items-center justify-center p-4 ${closing ? 'modal-backdrop-out' : 'modal-backdrop-in'}`}
+        style={{ background: 'rgba(12,18,26,0.45)' }}
+        onClick={dismiss}
+      >
+        <HeroCard
+          className={closing ? 'modal-card-out' : 'modal-card-in'}
+          style={{ padding: '40px 52px', textAlign: 'center' }}
+          onClick={(e) => e.stopPropagation()}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={labelId}
+        >
+          <h2 id={labelId} style={{ margin: 0, fontFamily: PLAYFAIR, fontSize: 32, lineHeight: 1.1, fontWeight: 600, letterSpacing: '-0.02em', color: '#1a1a1a' }}>
+            You&apos;re on the <span style={{ fontStyle: 'italic', color: 'var(--brand-forest)' }}>tree.</span>
+          </h2>
+          <p style={{ margin: '10px 0 0', fontSize: 17, color: '#4b5563', fontStyle: 'italic' }}>
+            See you in the inbox - The Team
+          </p>
+        </HeroCard>
+      </div>
+    );
+  }
+
+  // ── form ──
+  return (
+    <div
+      className={`fixed inset-0 z-[100] flex items-center justify-center p-4 ${closing ? 'modal-backdrop-out' : 'modal-backdrop-in'}`}
+      style={{ background: 'rgba(12,18,26,0.65)' }}
+      onClick={dismiss}
+    >
+      <HeroCard
+        className={`relative w-full ${closing ? 'modal-card-out' : 'modal-card-in'}`}
+        style={{
+          maxWidth: 'min(1040px, 94vw)', width: '100%',
+          display: 'grid', gridTemplateColumns: '1fr 1px 1fr',
+          minHeight: 560, maxHeight: 'calc(100vh - 48px)', overflow: 'hidden',
+        }}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={labelId}
+      >
+        <button
+          onClick={dismiss}
+          aria-label="Close dialog"
+          className="ld-betaclose"
+          style={{
+            position: 'absolute', top: 18, right: 18, zIndex: 10,
+            width: 32, height: 32, borderRadius: 16,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            color: '#4b5563', fontSize: 20, lineHeight: 1,
+            background: 'none', border: 'none', cursor: 'pointer',
+            transition: 'background 0.15s',
+          }}
+        >
+          ×
+        </button>
+
+        {/* ── left: brand + beta tester role ── */}
+        <div className="hero-surface" style={{ padding: '36px 36px 32px', display: 'flex', flexDirection: 'column', gap: 22 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <Image src="/sapling-icon.svg" alt="Sapling" width={22} height={22} />
+            <span style={{ fontFamily: SPECTRAL, fontWeight: 700, fontSize: 17, color: 'var(--brand-forest)', letterSpacing: '-0.02em' }}>Sapling</span>
+          </div>
+
+          <div>
+            <div style={{ fontFamily: JETBRAINS, fontSize: 10.5, color: '#6b7280', letterSpacing: '0.22em', marginBottom: 14, textTransform: 'uppercase', fontWeight: 600 }}>
+              Early access
+            </div>
+            <h2 style={{ margin: 0, fontFamily: PLAYFAIR, fontSize: 44, lineHeight: 1.05, fontWeight: 700, color: '#1a1a1a', letterSpacing: '-0.02em' }}>
+              Learn early.<br />
+              <span style={{ fontStyle: 'italic', fontWeight: 800, color: 'var(--brand-forest)', fontFamily: PLAYFAIR }}>Grow</span> with us.
+            </h2>
+            <p style={{ margin: '14px 0 0', fontSize: 13.5, lineHeight: 1.55, color: '#4b5563', maxWidth: 360 }}>
+              Sapling is being built alongside the students who&apos;ll use it most. Join early and
+              help shape what it becomes.
+            </p>
+          </div>
+
+          <div style={{ height: 1, flexShrink: 0, background: 'rgba(107,114,128,0.15)' }} />
+
+          <div>
+            <h3 style={{ margin: '0 0 12px', fontFamily: PLAYFAIR, fontSize: 22, fontWeight: 700, color: '#1a1a1a', letterSpacing: '-0.02em' }}>
+              Beta Tester Role
+            </h3>
+            <div className="rounded-xl px-4 py-3 flex items-center gap-3" style={{ background: '#EBE6DC', border: '1px solid #D6D1C6' }}>
+              <div className="w-11 h-11 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: '#374151', fontSize: 13, fontWeight: 700, color: '#fff', fontFamily: DM, letterSpacing: '0.02em' }}>
+                AK
+              </div>
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span style={{ fontSize: 14, fontWeight: 700, color: '#111827', fontFamily: DM }}>Alex Kim</span>
+                  <span
+                    style={{
+                      display: 'inline-flex', alignItems: 'center', padding: '3px 10px',
+                      borderRadius: 9999, fontSize: 10, fontWeight: 500, fontFamily: JETBRAINS,
+                      letterSpacing: '0.1em', textTransform: 'uppercase',
+                      background: 'rgba(212,175,55,0.08)', color: '#C9A227',
+                      border: '1.5px solid rgba(212,175,55,0.55)',
+                    }}
+                  >
+                    Beta Tester
+                  </span>
+                </div>
+                <span style={{ fontSize: 11, color: '#9CA3AF', fontFamily: DM }}>@alexkim</span>
+              </div>
+            </div>
+            <p style={{ margin: '10px 2px 0', fontSize: 12.5, color: '#6b7280', lineHeight: 1.5, fontStyle: 'italic' }}>
+              The first mark on your profile. A permanent record of showing up early.
+            </p>
+          </div>
+        </div>
+
+        <div style={{ background: 'rgba(107,114,128,0.15)', alignSelf: 'stretch' }} />
+
+        {/* ── right: newsletter ── */}
+        <div className="hero-surface" style={{ padding: '44px 42px 36px', display: 'flex', flexDirection: 'column' }}>
+          <div style={{ fontFamily: JETBRAINS, fontSize: 10, color: '#D97706', letterSpacing: '0.3em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 10 }}>
+            ● Issue 001 dropping soon
+          </div>
+          <h1 id={labelId} style={{ margin: 0, fontFamily: PLAYFAIR, fontSize: 48, lineHeight: 1.05, fontWeight: 600, letterSpacing: '-0.025em', color: '#1a1a1a' }}>
+            Join the<br />
+            <span style={{ fontStyle: 'italic', fontWeight: 800, color: 'var(--brand-forest)', fontFamily: PLAYFAIR }}>Newsletter</span>
+          </h1>
+          <p style={{ margin: '14px 0 0', fontSize: 15, color: '#4b5563', lineHeight: 1.5 }}>
+            Hear fun stories from students like you.
+          </p>
+
+          <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
+            {PERKS.map(({ dot, title, body }) => (
+              <div key={title} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12, alignItems: 'start' }}>
+                <div style={{ width: 8, height: 8, borderRadius: '50%', background: dot, boxShadow: `0 0 8px ${dot}55`, marginTop: 8, flexShrink: 0 }} />
+                <div>
+                  <div style={{ fontSize: 14.5, fontWeight: 600, color: '#1a1a1a', marginBottom: 2, letterSpacing: '-0.005em' }}>{title}</div>
+                  <div style={{ fontSize: 12.5, color: '#4b5563', lineHeight: 1.5 }}>{body}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <form onSubmit={submit} style={{ marginTop: 'auto', paddingTop: 28 }}>
+            <div style={{ position: 'relative', marginBottom: 10 }}>
+              <input
+                ref={inputRef}
+                type="text"
+                aria-label="Email address"
+                placeholder="you@example.com"
+                value={email}
+                disabled={subscribing}
+                onChange={(e) => { onEmail(e.target.value); setLocalError(''); }}
+                className="ld-betainput"
+                style={{
+                  width: '100%', padding: '14px 16px', fontSize: 14,
+                  background: 'rgba(255,255,255,0.6)',
+                  border: '1.5px solid rgba(107,114,128,0.25)', borderRadius: 10,
+                  transition: 'border-color 0.15s, box-shadow 0.15s',
+                  fontFamily: DM, color: '#1a1a1a', boxSizing: 'border-box',
+                }}
+              />
+              {(localError || error) && (
+                <p role="alert" style={{ margin: '6px 0 0', fontSize: 11.5, color: '#dc2626', fontFamily: DM }}>
+                  {localError || error}
+                </p>
+              )}
+            </div>
+            <button
+              type="submit"
+              disabled={subscribing}
+              className="ld-betasubmit"
+              style={{
+                width: '100%', padding: '14px 16px', borderRadius: 10,
+                background: subscribing ? '#4b5563' : 'var(--brand-forest)', color: '#fff',
+                fontSize: 14, fontWeight: 600, letterSpacing: '0.02em',
+                boxShadow: '0 8px 24px rgba(27,108,66,0.3)',
+                border: 'none', cursor: subscribing ? 'default' : 'pointer',
+                transition: 'all 0.18s', display: 'flex', alignItems: 'center',
+                justifyContent: 'center', gap: 8, fontFamily: DM,
+              }}
+            >
+              {subscribing ? 'Planting your node…' : <>Sign Me Up <span style={{ opacity: 0.7 }}>→</span></>}
+            </button>
+            <p style={{ margin: '12px 0 0', fontSize: 11.5, color: '#6b7280', textAlign: 'center', lineHeight: 1.5 }}>
+              By joining the newsletter, you&apos;ll also be added to the beta waitlist.
+            </p>
+          </form>
+        </div>
+      </HeroCard>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/Closing.tsx b/frontend/src/components/landing-v5/Closing.tsx
new file mode 100644
index 00000000..5e1e2c15
--- /dev/null
+++ b/frontend/src/components/landing-v5/Closing.tsx
@@ -0,0 +1,206 @@
+'use client';
+
+/**
+ * The final CTA, the footer, and the fixed section nav.
+ *
+ * Ported from `Sapling Landing v5.dc.html`.
+ *
+ * Note the CTA is heading + line + button, nothing more. The source's logic
+ * class still carries a whole "plant a concept" interaction — `plantVal`,
+ * `plantedCount`, `_plant()`, a localStorage-backed grove and a canvas ref —
+ * but no markup in the file references any of it, so it can never run. That
+ * is the fourth such dead branch in this file, after `wantDark = false`, the
+ * unreferenced `heroWipe`/`heroChar` keyframes, and the hero mode switcher.
+ * Not ported; recoverable from the source if it is ever wired up.
+ */
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { DragField } from './DragField';
+
+const MONO: React.CSSProperties = { fontFamily: "'JetBrains Mono',monospace" };
+
+const MOTES: { d: number; s: React.CSSProperties }[] = [
+  { d: 0.30, s: { left: '6.5%', top: '22%', width: 7.4, height: 7.4, background: '#4FA574', opacity: 0.44, animation: 'nodeFloatA 15s ease-in-out -6s infinite' } },
+  { d: 0.44, s: { right: '8.2%', top: '31%', width: 6.2, height: 6.2, background: '#8FD9A8', opacity: 0.5, animation: 'nodeFloatB 13s ease-in-out -3s infinite' } },
+  { d: 0.22, s: { right: '13.6%', top: '74%', width: 9.6, height: 9.6, background: '#0E9E5A', opacity: 0.4, boxShadow: '0 0 22px #0E9E5A66', animation: 'nodeFloatA 18s ease-in-out -11s infinite' } },
+  { d: 0.37, s: { left: '14.2%', top: '81%', width: 5.6, height: 5.6, background: '#6FBF8F', opacity: 0.46, animation: 'nodeFloatB 16s ease-in-out -8s infinite' } },
+];
+
+export function FinalCta({ onGetStarted }: { onGetStarted: () => void }) {
+  return (
+    <section id="cta" style={{ position: 'relative', padding: '130px 24px 120px', zIndex: 1 }}>
+      <DragField section="cta" />
+
+      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 0 }}>
+        {MOTES.map((m, i) => (
+          <span key={i} data-depth={m.d} style={{ position: 'absolute', borderRadius: 99, ...m.s }} />
+        ))}
+      </div>
+
+      {/* blooms, masked top and bottom so they don't band into the neighbours */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute', inset: '-14% 0', pointerEvents: 'none', zIndex: 0, overflow: 'hidden',
+          WebkitMaskImage: 'linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%)',
+          maskImage: 'linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%)',
+        }}
+      >
+        <div style={{ position: 'absolute', top: '8%', right: '-15%', width: '38vw', height: '38vw', borderRadius: '50%', filter: 'blur(64px)', opacity: 0.38, background: 'rgba(46,125,82,0.22)' }} />
+        <div style={{ position: 'absolute', bottom: '8%', left: '-12%', width: '32vw', height: '32vw', borderRadius: '50%', filter: 'blur(64px)', opacity: 0.28, background: 'rgba(43,140,150,0.2)' }} />
+      </div>
+
+      <div data-reveal="1" style={{ position: 'relative', zIndex: 1, maxWidth: 768, margin: '0 auto', textAlign: 'center' }}>
+        <h2 style={{ margin: 0, fontFamily: "'Playfair Display',serif", fontSize: 'clamp(2.8rem, 6vw, 4.6rem)', fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.05, color: '#12201A' }}>
+          Ready to <br /> Start <em style={{ color: '#0C5638', paddingRight: 8 }}>Growing?</em>
+        </h2>
+        <p style={{ margin: '24px 0 0', color: '#61726A', fontSize: 17, fontWeight: 400 }}>
+          Join students who learn smarter, not harder.
+        </p>
+        <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <button
+            onClick={onGetStarted}
+            className="ld-btn-solid"
+            style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#0C5638', color: '#fff', border: 'none', borderRadius: 6, padding: '14px 32px', fontFamily: "'DM Sans',sans-serif", fontWeight: 600, fontSize: 15.5, whiteSpace: 'nowrap', cursor: 'pointer', transition: 'filter 200ms' }}
+          >
+            Sign up for Beta Testing
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const FOOTER_LINKS = [
+  { label: 'About', href: '/about' },
+  { label: 'Team', href: '/team' },
+  { label: 'Wiki', href: '/wiki' },
+  { label: 'Gallery', href: '/gallery' },
+  { label: 'News', href: '/news' },
+  { label: 'FAQ', href: '/faq' },
+];
+
+const FOOTER_LINK: React.CSSProperties = { color: '#61726A', fontSize: 13.5, transition: 'color 300ms' };
+
+export function SiteFooter() {
+  return (
+    <footer style={{ borderTop: '1px solid rgba(18,32,26,0.08)', padding: '48px 32px 40px', position: 'relative', zIndex: 1 }}>
+      <div style={{ maxWidth: 1150, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Image src="/sapling-icon.svg" alt="Sapling" width={20} height={20} />
+          <span style={{ fontSize: 13.5, fontWeight: 300, letterSpacing: '0.02em', color: '#61726A' }}>Sapling · © 2026</span>
+        </div>
+        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
+          {FOOTER_LINKS.map((l) => (
+            <Link key={l.href} href={l.href} className="ld-navlink" style={FOOTER_LINK}>{l.label}</Link>
+          ))}
+          <a href="https://github.com/SaplingLearn/Sapling" target="_blank" rel="noopener noreferrer" className="ld-navlink" style={FOOTER_LINK}>GitHub</a>
+          <a href="https://ko-fi.com/saplinglearn" target="_blank" rel="noopener noreferrer" className="ld-navlink" style={FOOTER_LINK}>Ko-fi</a>
+          <Link href="/terms" className="ld-navlink" style={FOOTER_LINK}>Terms of Service</Link>
+          <Link href="/privacy" className="ld-navlink" style={FOOTER_LINK}>Privacy Policy</Link>
+        </div>
+      </div>
+      <div style={{ maxWidth: 1150, margin: '32px auto 0', paddingTop: 24, borderTop: '1px solid rgba(18,32,26,0.06)', textAlign: 'center' }}>
+        <p style={{ margin: 0, fontSize: 12, color: '#61726A', opacity: 0.75, fontWeight: 300, letterSpacing: '0.02em' }}>
+          © 2026 Andres Lopez, Jack He, Luke Cooper, and Jose Gael Cruz-Lopez. All Rights Reserved.
+        </p>
+      </div>
+    </footer>
+  );
+}
+
+/** The eight jump targets, in page order. `id` is empty for the top of page. */
+const SECTIONS = [
+  { id: '', label: 'Top', nav: 'hero-top' },
+  { id: 'act-graph', label: 'The graph', nav: 'act-graph' },
+  { id: 'act-ingest', label: 'Ingest', nav: 'act-ingest' },
+  { id: 'act-tutor', label: 'Tutor', nav: 'act-tutor' },
+  { id: 'gallery', label: 'Features', nav: 'gallery' },
+  { id: 'faq', label: 'FAQ', nav: 'faq' },
+  { id: 'newsletter', label: 'Journal', nav: 'newsletter' },
+  { id: 'cta', label: 'Get started', nav: 'cta' },
+];
+
+/**
+ * Reading-progress hairline plus the bottom-centre section jump.
+ *
+ * The engine writes the progress width, the active dot and the pill's label
+ * through `[data-stem]`, `[data-jumpdot]`, `[data-jumptick]` and
+ * `[data-jumplabel]`; React only owns whether the menu is open.
+ */
+export function SectionNav({
+  open,
+  onToggle,
+  onJump,
+  onTop,
+}: {
+  open: boolean;
+  onToggle: () => void;
+  onJump: (id: string) => void;
+  onTop: () => void;
+}) {
+  return (
+    <>
+      <div aria-hidden="true" style={{ position: 'fixed', left: 0, right: 0, top: 0, height: 2, zIndex: 58, pointerEvents: 'none' }}>
+        <span data-stem="1" style={{ display: 'block', height: '100%', width: '0%', background: 'linear-gradient(90deg,#0E9E5A,#0C5638)', boxShadow: '0 0 10px rgba(14,158,90,0.45)' }} />
+      </div>
+
+      <nav
+        className="sapling-nav"
+        aria-label="Page sections"
+        style={{ position: 'fixed', left: '50%', bottom: 22, transform: 'translateX(-50%)', zIndex: 56, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}
+      >
+        <div
+          role="menu"
+          style={{
+            minWidth: 190, padding: 6, borderRadius: 14,
+            background: 'rgba(253,252,249,0.82)', backdropFilter: 'blur(16px)',
+            border: '1px solid rgba(18,32,26,0.1)',
+            boxShadow: '0 16px 38px -18px rgba(18,32,26,0.4)',
+            display: open ? 'flex' : 'none', flexDirection: 'column', gap: 1,
+            transformOrigin: 'bottom center',
+            opacity: open ? 1 : 0,
+            transform: open ? 'scale(1)' : 'scale(0.96)',
+            transition: 'opacity 200ms ease, transform 240ms cubic-bezier(0.22,1,0.36,1)',
+          }}
+        >
+          {SECTIONS.map((sec, i) => (
+            <button
+              key={sec.nav}
+              data-secnav={sec.nav}
+              data-jump={i}
+              type="button"
+              onClick={() => (sec.id ? onJump(sec.id) : onTop())}
+              className="ld-jumpitem"
+              style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left', padding: '9px 12px', borderRadius: 9, border: 'none', background: 'none', cursor: 'pointer', fontFamily: "'DM Sans',sans-serif", fontSize: 13, color: '#33443B' }}
+            >
+              <span data-jumpdot="1" style={{ width: 5, height: 5, borderRadius: 99, flex: '0 0 auto', background: 'rgba(18,32,26,0.18)', transition: 'background 260ms, box-shadow 260ms' }} />
+              {sec.label}
+            </button>
+          ))}
+        </div>
+
+        <button
+          data-jumppill="1"
+          onClick={onToggle}
+          type="button"
+          aria-haspopup="menu"
+          aria-expanded={open}
+          title="Jump to a section"
+          className="ld-jumppill"
+          style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', borderRadius: 99, background: 'transparent', border: 'none', boxShadow: 'none', cursor: 'pointer', transition: 'opacity 260ms' }}
+        >
+          <span data-jumplabel="1" style={{ ...MONO, fontSize: 9.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#61726A', whiteSpace: 'nowrap', textShadow: '0 0 8px rgba(246,248,244,0.9)', transition: 'color 300ms, text-shadow 300ms' }}>
+            Top
+          </span>
+          <span aria-hidden="true" style={{ display: 'flex', alignItems: 'center', gap: 3, paddingRight: 4 }}>
+            {SECTIONS.map((_, i) => (
+              <span key={i} data-jumptick={i} style={{ width: 4, height: 4, borderRadius: 99, background: 'rgba(18,32,26,0.18)', transition: 'background 300ms, transform 300ms' }} />
+            ))}
+          </span>
+        </button>
+      </nav>
+    </>
+  );
+}
diff --git a/frontend/src/components/landing-v5/DragField.test.tsx b/frontend/src/components/landing-v5/DragField.test.tsx
new file mode 100644
index 00000000..e180a5a7
--- /dev/null
+++ b/frontend/src/components/landing-v5/DragField.test.tsx
@@ -0,0 +1,150 @@
+// @vitest-environment jsdom
+/**
+ * The pinned field's sticky box must match its act's stage.
+ *
+ * This is a coupling between two files that nothing else enforces, and
+ * getting it wrong is invisible in review: both shapes look like reasonable
+ * ways to pin a decorative layer. A `sticky; top:0; height:0` box and a
+ * `sticky; top:0; height:100vh` box pin identically — they only diverge on
+ * RELEASE, because a sticky element stops sticking once its containing
+ * block's bottom reaches its own height above the fold. Zero-height releases
+ * a full viewport later, so for the last 100vh of every act the copy scrolled
+ * away while the clusters stayed welded to the top of the screen. Measured at
+ * 882px of divergence through act-tutor before the fix.
+ *
+ * jsdom has no sticky positioning, so this asserts the geometry rather than
+ * the behaviour; e2e/landing-drag-field.spec.ts measures what it actually
+ * does in a browser. Both are needed — this one names the invariant, that one
+ * proves it holds.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { ActIngest } from './ActIngest';
+import { ActTutor } from './ActTutor';
+import { DragField } from './DragField';
+import { Faq } from './Faq';
+
+/** The act's stage: the sticky child of the section that carries the copy. */
+function stageOf(section: HTMLElement): HTMLElement {
+  const stage = Array.from(section.children).find(
+    (el) => el instanceof HTMLElement
+      && el.style.position === 'sticky'
+      && !el.querySelector('[data-dragnode]')
+      && !el.classList.contains('drag-field'),
+  );
+  expect(stage, 'every act should have a sticky stage').toBeTruthy();
+  return stage as HTMLElement;
+}
+
+function fieldOf(container: HTMLElement): HTMLElement {
+  const field = container.querySelector<HTMLElement>('.drag-field');
+  expect(field, 'every act should carry a drag field').toBeTruthy();
+  return field!;
+}
+
+const ACTS: Array<[name: string, render: () => HTMLElement]> = [
+  ['act-tutor', () => render(
+    <ActTutor carouselRef={React.createRef()} tutorMode={0} onSetMode={() => {}} />,
+  ).container],
+  ['act-ingest', () => render(
+    <ActIngest ingestSceneRef={React.createRef()} ingestStageRef={React.createRef()} />,
+  ).container],
+];
+
+describe.each(ACTS)('%s', (_name, renderAct) => {
+  it('pins its drag field on exactly the stage\'s sticky geometry', () => {
+    const container = renderAct();
+    const section = container.querySelector('section')!;
+    const stage = stageOf(section);
+    const field = fieldOf(container);
+
+    // Same three properties, same values. If the stage's height ever changes,
+    // this fails and the field has to follow it.
+    expect(field.style.position).toBe(stage.style.position);
+    expect(field.style.top).toBe(stage.style.top);
+    expect(field.style.height).toBe(stage.style.height);
+    expect(field.style.height).toBe('100vh');
+  });
+
+  it('keeps the field out of the act\'s flow', () => {
+    const container = renderAct();
+    const field = fieldOf(container);
+    const wrapper = field.parentElement!;
+
+    // A 100vh sticky box in flow would push the stage down by a viewport.
+    // The absolute wrapper is what buys the geometry without the shove.
+    expect(wrapper.style.position).toBe('absolute');
+    expect(wrapper.style.inset).toBe('0px');
+    expect(field.parentElement?.parentElement?.tagName).toBe('SECTION');
+  });
+
+  it('puts the field before the stage, under the copy', () => {
+    const container = renderAct();
+    const section = container.querySelector('section')!;
+    const wrapper = fieldOf(container).parentElement!;
+    expect(Array.from(section.children).indexOf(wrapper))
+      .toBeLessThan(Array.from(section.children).indexOf(stageOf(section)));
+  });
+});
+
+describe('static sections', () => {
+  it.each(['faq', 'newsletter', 'cta'] as const)(
+    'gives %s a plain absolute field, never the 100vh layer',
+    (section) => {
+      const { container } = render(<DragField section={section} />);
+      const field = fieldOf(container);
+      // An absolutely positioned 100vh child extends the document's
+      // scrollHeight, which on the last section is a viewport of dead scroll
+      // below the footer.
+      expect(field.style.position).toBe('absolute');
+      expect(field.style.inset).toBe('0px');
+      expect(field.style.height).toBe('');
+    },
+  );
+
+  it('welds faq\'s clusters to the copy that pins inside it', () => {
+    const { container } = render(<DragField section="faq" />);
+    // The section's own rect is the right box for PLACING these clusters and
+    // the wrong one for MOVING them: the question column pins 375px inside a
+    // section that never stops scrolling. Naming it is what closes the gap.
+    expect(fieldOf(container).dataset.dragTrack).toBe('[data-drag-anchor="faq"]');
+  });
+
+  it.each(['newsletter', 'cta'] as const)(
+    'leaves %s untracked, since nothing pins inside it',
+    (section) => {
+      const { container } = render(<DragField section={section} />);
+      expect(fieldOf(container).dataset.dragTrack).toBeUndefined();
+    },
+  );
+
+  it('finds exactly one sticky column behind faq\'s selector', () => {
+    // The coupling this file exists to catch, in its static-section form:
+    // DragField names a selector, Faq owns the element, and nothing else
+    // fails if the two drift apart.
+    const { container } = render(<Faq openFaq={-1} onToggle={() => {}} />);
+    const tracked = container.querySelectorAll<HTMLElement>('[data-drag-anchor="faq"]');
+    expect(tracked).toHaveLength(1);
+    expect(tracked[0].style.position).toBe('sticky');
+    // A static tracked element would make the whole mechanism a no-op.
+    expect(tracked[0].style.top).toBe('110px');
+  });
+
+  it('still hands every cluster to the sim', () => {
+    const { container } = render(<DragField section="faq" />);
+    const clusters = container.querySelectorAll('[data-dragnode]');
+    expect(clusters.length).toBeGreaterThan(0);
+    clusters.forEach((cluster) => {
+      // The bindings engine/sim.ts resolves by: rings, and a glow before and
+      // a label after each one.
+      const rings = cluster.querySelectorAll('[data-sim]');
+      expect(rings.length).toBeGreaterThan(0);
+      rings.forEach((ring) => {
+        expect(ring.previousElementSibling?.tagName).toBe('circle');
+        expect(ring.nextElementSibling?.tagName).toBe('text');
+      });
+    });
+  });
+});
diff --git a/frontend/src/components/landing-v5/DragField.tsx b/frontend/src/components/landing-v5/DragField.tsx
new file mode 100644
index 00000000..cde7ea7f
--- /dev/null
+++ b/frontend/src/components/landing-v5/DragField.tsx
@@ -0,0 +1,188 @@
+'use client';
+
+/**
+ * The draggable course-cluster field.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. Small course graphs float over the
+ * lower half of the page and can be grabbed and thrown; `engine/sim.ts` owns
+ * the physics and finds its targets through `[data-dragnode]`,
+ * `[data-dragpuck]` and `[data-sim]`.
+ *
+ * The field is decorative and must never add page height — see the two
+ * wrapper shapes on `DragField` below, which is the whole reason it takes a
+ * section rather than just rendering one box.
+ *
+ * `touch-action:none` on each cluster is also load-bearing: without it,
+ * dragging a node on a touch device scrolls the page instead.
+ *
+ * Hidden below 1023px by the `.drag-field` rule in globals.css.
+ */
+
+import { DRAG_CLUSTERS, type DragCluster } from '@/lib/landing/dragClusters';
+
+/**
+ * Every section that carries a field.
+ *
+ * Wider than `DragCluster['section']`: `act-ingest` has a field but no
+ * clusters in it, so it never appears in the data. It still needs the
+ * element, because `engine/sim.ts` discovers fields by class and the pinned
+ * shape is what keeps the act's motes off the page's height.
+ */
+export type FieldSection = DragCluster['section'] | 'act-ingest';
+
+function Cluster({ c }: { c: DragCluster }) {
+  return (
+    <span
+      data-dragnode={c.id}
+      style={{
+        position: 'absolute', ...c.pos,
+        pointerEvents: 'none', cursor: 'grab',
+        // must stay: otherwise a touch-drag scrolls the page
+        touchAction: 'none',
+        animation: c.anim, willChange: 'transform',
+      }}
+    >
+      <span data-dragpuck="1" style={{ display: 'block', willChange: 'transform' }}>
+        <svg
+          width={c.svg.w}
+          height={c.svg.h}
+          viewBox={c.svg.vb}
+          style={{
+            display: 'block', overflow: 'visible', pointerEvents: 'none',
+            // recentres the oversized box so the cluster sits where `pos` says
+            margin: '-1600px -900px',
+          }}
+        >
+          {c.lines.map((l, i) => (
+            <line
+              key={i} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2}
+              stroke="#6f6857" strokeOpacity="0.2" strokeWidth={l.w} strokeLinecap="round"
+            />
+          ))}
+          {/*
+            Flat, and strictly glow -> ring -> label per node. `engine/sim.ts`
+            finds a ring's halo via `previousElementSibling` and its caption via
+            `nextElementSibling`, so ANY wrapper element here (a <g>, a
+            fragment that renders one) breaks the binding and the sim throws on
+            a null label. Node 0 is the course puck, and its label is the
+            course code.
+          */}
+          {c.nodes.flatMap((n, i) => {
+            const label = i === 0
+              ? { text: c.code, x: c.codeAt[0], y: c.codeAt[1] }
+              : c.labels[i - 1];
+            return [
+              <circle
+                key={`glow-${i}`}
+                cx={n.cx} cy={n.cy} r={n.r + 8}
+                fill={c.color} opacity="0.15" style={{ filter: 'blur(3px)' }}
+              />,
+              <circle
+                key={`ring-${i}`}
+                data-ring="1" data-sim="1"
+                style={{ pointerEvents: 'auto', cursor: 'grab' }}
+                cx={n.cx} cy={n.cy} r={n.r}
+                fill={c.color} fillOpacity={n.fo}
+                stroke={c.color} strokeWidth={n.sw} strokeOpacity="0.75"
+              />,
+              label ? (
+                <text
+                  key={`label-${i}`}
+                  x={label.x} y={label.y} textAnchor="middle"
+                  fontFamily={i === 0 ? "'Playfair Display',Georgia,serif" : "'DM Sans',sans-serif"}
+                  fontSize={i === 0 ? '12.5' : '9'}
+                  fontWeight={i === 0 ? '600' : undefined}
+                  fill={i === 0 ? c.color : '#3f3b31'}
+                  opacity={i === 0 ? undefined : 0.85}
+                  style={{ pointerEvents: 'none', userSelect: 'none' }}
+                >
+                  {label.text}
+                </text>
+              ) : null,
+            ];
+          })}
+        </svg>
+      </span>
+    </span>
+  );
+}
+
+/**
+ * The field for one section.
+ *
+ * Two shapes, and using the wrong one adds page height:
+ *
+ * - **Pinned acts** (`act-ingest`, `act-tutor`) put the field inside an
+ *   `absolute; inset:0` box — out of flow, so it occupies no space in the
+ *   act — and make the field itself `sticky; top:0; height:100vh`.
+ * - **Static sections** (`faq`, `newsletter`, `cta`) use `absolute; inset:0`
+ *   and hold the clusters directly. They must NOT get the 100vh layer: an
+ *   absolutely positioned child still extends the document's scrollHeight,
+ *   so on the last section it left a viewport's worth of dead scroll below
+ *   the footer.
+ *
+ * **The `100vh` on the pinned shape is load-bearing, and it is not about
+ * size.** Every act is a `position:relative` section holding one
+ * `sticky; top:0; height:100vh` stage, and that height is what decides when
+ * the stage stops sticking: it releases once the section's bottom reaches a
+ * viewport-height above the fold. An earlier version of this component hung
+ * a `100vh` layer out of a `sticky; height:0` box instead. A zero-height
+ * sticky releases a whole viewport LATER, so for the last 100vh of every
+ * act the copy scrolled away while the clusters stayed welded to the top of
+ * the screen — measured at 882px of divergence through `act-tutor`. Matching
+ * the stage's geometry is what keeps the two moving as one, through the
+ * pin and through the release. If an act's stage ever stops being
+ * `sticky; top:0; height:100vh`, this has to follow it.
+ */
+const PINNED = new Set<FieldSection>(['act-ingest', 'act-tutor']);
+
+/**
+ * Static sections whose copy pins on its own, and the element it pins in.
+ *
+ * A static field gets the section's rect, which is the right box for placing
+ * clusters but says nothing about a child that sticks inside it. `faq` is
+ * exactly that case: the question column is `sticky; top:110`, so it holds
+ * still for `grid 733px - column 358px` = 375px while the section — and with
+ * it the field, and with it CS 112 and PH 150 — keeps scrolling. The clusters
+ * slid 374px out from under the words they belong to.
+ *
+ * Naming the copy here lets `engine/sim.ts` add back its travel, so the two
+ * move as one through the pin and the release. This is the static-section
+ * counterpart to `PINNED` above: that one matches a field to a stage it lives
+ * beside, this one matches clusters to copy that pins beneath them.
+ */
+const TRACKS: Partial<Record<FieldSection, string>> = {
+  faq: '[data-drag-anchor="faq"]',
+};
+
+export function DragField({ section }: { section: FieldSection }) {
+  const mine = DRAG_CLUSTERS.filter((c) => c.section === section);
+  const clusters = mine.map((c) => <Cluster key={c.id} c={c} />);
+
+  if (!PINNED.has(section)) {
+    return (
+      <div
+        className="drag-field"
+        aria-hidden="true"
+        data-drag-track={TRACKS[section]}
+        style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none', overflow: 'visible' }}
+      >
+        {clusters}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      aria-hidden="true"
+      style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none', overflow: 'visible' }}
+    >
+      <div
+        className="drag-field"
+        style={{ position: 'sticky', top: 0, height: '100vh', pointerEvents: 'none', overflow: 'visible' }}
+      >
+        {clusters}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/Faq.tsx b/frontend/src/components/landing-v5/Faq.tsx
new file mode 100644
index 00000000..5b174907
--- /dev/null
+++ b/frontend/src/components/landing-v5/Faq.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+/**
+ * FAQ — a sticky question on the left, an accordion on the right.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. The answer panels animate on
+ * `max-height` rather than `height:auto`, which is what the source does and
+ * why every answer shares one 300px ceiling: it keeps the transition
+ * interruptible without measuring.
+ */
+
+import { FAQS } from '@/lib/landing/content';
+import { DragField } from './DragField';
+
+const MONO: React.CSSProperties = { fontFamily: "'JetBrains Mono',monospace" };
+
+const MOTES: { d: number; s: React.CSSProperties }[] = [
+  { d: 0.25, s: { left: '7.4%', top: '8.0%', width: 6.1, height: 6.1, background: '#2E7D52', opacity: 0.39, animation: 'nodeFloatB 13s ease-in-out -4s infinite' } },
+  { d: 0.45, s: { right: '9.3%', top: '45.1%', width: 9.2, height: 9.2, background: '#6FBF8F', opacity: 0.46, boxShadow: '0 0 22px #6FBF8F66', animation: 'nodeFloatA 17s ease-in-out -9s infinite' } },
+  { d: 0.34, s: { right: '2.8%', top: '11.1%', width: 7.9, height: 7.9, background: '#2E7D52', opacity: 0.47, boxShadow: '0 0 19px #2E7D5266', animation: 'nodeFloatB 15s ease-in-out -6s infinite' } },
+  { d: 0.41, s: { right: '15.4%', top: '43.2%', width: 6.1, height: 6.1, background: '#8FD9A8', opacity: 0.59, animation: 'nodeFloatA 12s ease-in-out -2s infinite' } },
+  { d: 0.34, s: { right: '11.7%', top: '45.7%', width: 5, height: 5, background: '#0E9E5A', opacity: 0.49, animation: 'nodeFloatB 14s ease-in-out -8s infinite' } },
+  { d: 0.14, s: { right: '5.2%', top: '65.9%', width: 10.2, height: 10.2, background: '#2E7D52', opacity: 0.35, boxShadow: '0 0 24px #2E7D5266', animation: 'nodeFloatA 19s ease-in-out -11s infinite' } },
+  { d: 0.23, s: { left: '3.0%', top: '88.1%', width: 7.2, height: 7.2, background: '#4FA574', opacity: 0.54, animation: 'nodeFloatA 16s ease-in-out -13s infinite' } },
+  { d: 0.23, s: { right: '8.7%', top: '82.6%', width: 9, height: 9, background: '#6FBF8F', opacity: 0.59, boxShadow: '0 0 22px #6FBF8F66', animation: 'nodeFloatB 18s ease-in-out -5s infinite' } },
+  { d: 0.44, s: { right: '6.2%', top: '33.6%', width: 7.9, height: 7.9, background: '#0E9E5A', opacity: 0.52, boxShadow: '0 0 19px #0E9E5A66', animation: 'nodeFloatA 14s ease-in-out -10s infinite' } },
+  { d: 0.25, s: { left: '12.5%', top: '94.9%', width: 5.8, height: 5.8, background: '#4FA574', opacity: 0.42, animation: 'nodeFloatA 11s ease-in-out -3s infinite' } },
+  { d: 0.23, s: { left: '11.1%', top: '77.0%', width: 5.9, height: 5.9, background: '#8FD9A8', opacity: 0.46, animation: 'nodeFloatA 15s ease-in-out -7s infinite' } },
+];
+
+export function Faq({
+  openFaq,
+  onToggle,
+}: {
+  openFaq: number;
+  onToggle: (i: number) => void;
+}) {
+  return (
+    <section
+      id="faq"
+      style={{
+        position: 'relative', padding: '120px 24px', zIndex: 1,
+        background: 'linear-gradient(180deg, rgba(230,242,232,0) 0%, rgba(230,242,232,0.55) 18%, rgba(230,242,232,0.55) 82%, rgba(230,242,232,0) 100%)',
+      }}
+    >
+      <DragField section="faq" />
+
+      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 0 }}>
+        {MOTES.map((m, i) => (
+          <span key={i} data-depth={m.d} style={{ position: 'absolute', borderRadius: 99, ...m.s }} />
+        ))}
+      </div>
+
+      <div style={{ maxWidth: 1150, margin: '0 auto', display: 'grid', gridTemplateColumns: '4fr 7fr', gap: 72, alignItems: 'start' }}>
+        {/*
+          Sticky, so it holds while the accordion scrolls past — and named,
+          because `DragField`'s `TRACKS` welds CS 112 and PH 150 to this
+          column. If it stops being sticky, drop the entry there too.
+        */}
+        <div data-reveal="1" data-drag-anchor="faq" style={{ position: 'sticky', top: 110 }}>
+          <span style={{ ...MONO, fontSize: 11, letterSpacing: '0.32em', color: '#0C5638', textTransform: 'uppercase', fontWeight: 500 }}>
+            Honest answers
+          </span>
+          <h2 style={{ margin: '20px 0 0', fontFamily: "'Playfair Display',serif", fontSize: 'clamp(2.2rem, 4vw, 3.4rem)', fontWeight: 600, lineHeight: 1.06, letterSpacing: '-0.02em', color: '#12201A' }}>
+            &ldquo;Isn&rsquo;t AI just going to do it <em style={{ color: '#12201A' }}>for</em> me?&rdquo;
+          </h2>
+          <p style={{ margin: '20px 0 0', color: '#33443B', fontSize: 15, lineHeight: 1.75, maxWidth: '38ch' }}>
+            Fair question, and the one we get most. Sapling exists because we think AI should
+            deepen understanding, not replace it. Here&rsquo;s where we stand.
+          </p>
+          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center' }}>
+            <span style={{ ...MONO, fontSize: 10, letterSpacing: '0.3em', color: '#61726A', textTransform: 'uppercase' }}>
+              Still curious?{' '}
+              <a href="#faq" style={{ color: '#0C5638', textDecoration: 'underline' }}>Read the full FAQ</a>
+            </span>
+          </div>
+        </div>
+
+        <div data-reveal="1" style={{ borderTop: '1px solid rgba(18,32,26,0.12)' }}>
+          {FAQS.map((q, i) => {
+            const open = openFaq === i;
+            return (
+              <div key={q.q} style={{ borderBottom: '1px solid rgba(18,32,26,0.12)' }}>
+                <button
+                  onClick={() => onToggle(open ? -1 : i)}
+                  aria-expanded={open}
+                  style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', padding: '22px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, textAlign: 'left' }}
+                >
+                  <span style={{ fontFamily: "'Playfair Display',serif", fontSize: 19, fontWeight: 600, letterSpacing: '-0.01em', color: open ? '#0C5638' : '#12201A', transition: 'color 300ms' }}>
+                    {q.q}
+                  </span>
+                  <span
+                    style={{
+                      flexShrink: 0, width: 28, height: 28, borderRadius: 99,
+                      border: '1px solid rgba(18,32,26,0.18)', display: 'flex',
+                      alignItems: 'center', justifyContent: 'center',
+                      background: open ? '#E6F2E8' : 'transparent',
+                      // the plus rotates into a cross rather than swapping glyphs
+                      transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
+                      transition: 'transform 300ms cubic-bezier(0.22,1,0.36,1), background 300ms',
+                    }}
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#0C5638" strokeWidth="2" strokeLinecap="round">
+                      <path d="M12 5v14M5 12h14" />
+                    </svg>
+                  </span>
+                </button>
+                <div
+                  style={{
+                    // a shared ceiling, not a measured height — keeps the
+                    // transition interruptible without a layout read
+                    maxHeight: open ? 300 : 0,
+                    opacity: open ? 1 : 0,
+                    overflow: 'hidden',
+                    transition: 'max-height 450ms cubic-bezier(0.22,1,0.36,1), opacity 350ms ease',
+                  }}
+                >
+                  <p style={{ margin: 0, padding: '0 44px 24px 4px', color: '#33443B', fontSize: 14.5, lineHeight: 1.8 }}>
+                    {q.a}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/landing-v5/FeatureLab.tsx b/frontend/src/components/landing-v5/FeatureLab.tsx
new file mode 100644
index 00000000..8c5855d5
--- /dev/null
+++ b/frontend/src/components/landing-v5/FeatureLab.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+/**
+ * The feature lab — a gallery card expanded full-bleed.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. A scrim fades in over 420ms, then
+ * a cream panel expands from the clicked card's rect (the FLIP is run by
+ * `engine/flip.ts` through `registerPanel`), showing the feature's copy on the
+ * left and a live demo on the right, with a rail along the bottom for
+ * switching between the eight tools without closing.
+ *
+ * Escape and a scrim click both close it back down.
+ *
+ * The demo pane mounts the real interactive demo for the open tool — see
+ * lab/, ported from the `FeatureLab` design component the source pulls in
+ * through `<dc-import>`.
+ */
+
+import { GAL, LAB_KIND } from '@/lib/landing/content';
+import { FeatureLabDemo } from './lab';
+
+const MONO: React.CSSProperties = { fontFamily: "'JetBrains Mono',monospace" };
+
+export function FeatureLab({
+  index,
+  panelRef,
+  onClose,
+  onPick,
+}: {
+  /** Which gallery card is open, or -1 for closed. */
+  index: number;
+  panelRef: (el: HTMLDivElement | null) => void;
+  onClose: () => void;
+  onPick: (i: number) => void;
+}) {
+  if (index < 0) return null;
+  const g = GAL[index];
+  if (!g) return null;
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 80 }}>
+      <div
+        onClick={onClose}
+        style={{ position: 'absolute', inset: 0, background: 'rgba(8,31,20,0.62)', animation: 'panelFade 420ms ease both' }}
+      />
+
+      <div
+        ref={panelRef}
+        style={{ position: 'absolute', inset: 0, background: '#FDFCF9', overflow: 'hidden', display: 'flex', flexDirection: 'column', willChange: 'transform' }}
+      >
+        <div style={{ flex: 1, minHeight: 0, display: 'grid', gridTemplateColumns: 'minmax(320px,4fr) 7fr', animation: 'panelFade 420ms ease 160ms both' }}>
+          <div style={{ padding: 'clamp(28px,5vh,56px) clamp(28px,4vw,56px)', display: 'flex', flexDirection: 'column', borderRight: '1px solid #ECE9DE', overflow: 'auto' }}>
+            <span style={{ ...MONO, fontSize: 10.5, letterSpacing: '0.3em', color: '#0C5638', textTransform: 'uppercase' }}>
+              {g.num} · {g.kicker}
+            </span>
+            <h3 style={{ margin: '16px 0 0', fontFamily: "'Playfair Display',serif", fontSize: 'clamp(1.9rem,3.2vw,2.9rem)', fontWeight: 600, lineHeight: 1.06, letterSpacing: '-0.018em', color: '#12201A' }}>
+              {g.title}
+            </h3>
+            <p style={{ margin: '18px 0 0', color: '#33443B', fontSize: 15, lineHeight: 1.75, maxWidth: '44ch' }}>{g.desc}</p>
+
+            <div style={{ marginTop: 26, display: 'flex', flexDirection: 'column', gap: 14 }}>
+              {g.bullets.map((b, i) => (
+                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
+                  <span style={{ flexShrink: 0, width: 22, height: 22, borderRadius: 99, background: '#E6F2E8', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 }}>
+                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#0C5638" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M20 6L9 17l-5-5" />
+                    </svg>
+                  </span>
+                  <span style={{ fontSize: 14, lineHeight: 1.65, color: '#33443B' }}>{b.t}</span>
+                </div>
+              ))}
+            </div>
+
+          </div>
+
+          <div style={{ background: '#F1F4F0', padding: 'clamp(20px,3.4vh,40px) clamp(20px,2.6vw,44px)', display: 'flex', alignItems: 'center', justifyContent: 'center', minWidth: 0 }}>
+            <div style={{ position: 'relative', width: '100%', height: '100%', maxHeight: 660, borderRadius: 20, overflow: 'hidden', border: '1px solid #E2E6DF', background: '#FDFCF9', boxShadow: '0 30px 70px -30px rgba(18,32,26,0.32)' }}>
+              <div style={{ position: 'absolute', inset: 0 }}>
+                <FeatureLabDemo kind={LAB_KIND[g.kind]} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{ flex: '0 0 auto', borderTop: '1px solid #ECE9DE', background: '#F6F8F4', padding: '12px clamp(20px,3vw,40px)', display: 'flex', gap: 10, overflowX: 'auto', animation: 'panelFade 420ms ease 260ms both' }}
+        >
+          {GAL.map((r, i) => {
+            const on = i === index;
+            return (
+              <button
+                key={r.kind}
+                data-rail={i}
+                type="button"
+                onClick={() => onPick(i)}
+                className="ld-rail"
+                style={{
+                  flex: '0 0 auto', display: 'flex', flexDirection: 'column', gap: 2,
+                  textAlign: 'left', padding: '9px 15px', borderRadius: 11, cursor: 'pointer',
+                  fontFamily: "'DM Sans',sans-serif",
+                  transition: 'all 220ms cubic-bezier(0.22,1,0.36,1)',
+                  background: on ? '#0C5638' : '#FDFCF9',
+                  border: `1px solid ${on ? '#0C5638' : '#E8E5DA'}`,
+                  color: on ? '#FDFCF9' : '#33443B',
+                }}
+              >
+                <span style={{ ...MONO, fontSize: 8.5, letterSpacing: '0.22em', color: on ? 'rgba(253,252,249,0.7)' : '#9AA5A0' }}>
+                  {r.num}
+                </span>
+                <span style={{ fontSize: 12.5, fontWeight: 600, whiteSpace: 'nowrap' }}>{r.kicker}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        <button
+          onClick={onClose}
+          aria-label="Close"
+          className="ld-labclose"
+          style={{ position: 'absolute', top: 20, right: 20, width: 42, height: 42, borderRadius: 99, border: '1px solid rgba(18,32,26,0.12)', background: '#FDFCF9', color: '#12201A', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 250ms', zIndex: 3, animation: 'panelFade 420ms ease 240ms both' }}
+        >
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/Gallery.tsx b/frontend/src/components/landing-v5/Gallery.tsx
new file mode 100644
index 00000000..1d1b6dcb
--- /dev/null
+++ b/frontend/src/components/landing-v5/Gallery.tsx
@@ -0,0 +1,168 @@
+'use client';
+
+/**
+ * The gallery — two marquee rails of bespoke feature cards.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. Eight cards ride two tracks
+ * drifting in opposite directions; the engine's marquee controller owns the
+ * transform and the drag-to-scrub, and clicking a card opens the feature lab
+ * via a FLIP from the card's own rect.
+ *
+ * Each track lists its cards TWICE. That duplication is the loop: the marquee
+ * translates by exactly half the track width and wraps, so the second copy is
+ * already in place when the first scrolls out. Removing it leaves a visible
+ * gap on every cycle. The duplicates are `aria-hidden`, and only the first
+ * copy is reachable by keyboard.
+ *
+ * The card visuals live in galleryMinis.tsx, generated from the source.
+ */
+
+import { GALLERY_MINIS } from './galleryMinis';
+
+const MONO: React.CSSProperties = { fontFamily: "'JetBrains Mono',monospace" };
+
+/** Card copy, indexed by `data-tk`. Distinct from the lab panels' copy in content.ts. */
+const CARDS = [
+  { kicker: 'ADAPTIVE QUIZZES', title: <>Questions that <em style={{ color: '#0C5638', fontStyle: 'italic' }}>re-tune.</em></>, desc: 'Difficulty moves with every answer, and each result writes mastery back to your graph.' },
+  { kicker: 'SPACED REPETITION', title: <>Knows what to review, <em style={{ color: '#0C5638', fontStyle: 'italic' }}>and when.</em></>, desc: 'Forgot, Hard, Easy: ten minutes, a day, four days. Sapling schedules; you show up.' },
+  { kicker: 'NOTETAKER', title: <>Notes that <em style={{ color: '#0C5638', fontStyle: 'italic' }}>think.</em></>, desc: 'Write normally. Sapling summarizes, pulls the concepts, and links them to your graph.' },
+  { kicker: 'STUDY GUIDES', title: <>Built from your <em style={{ color: '#0C5638', fontStyle: 'italic' }}>gaps.</em></>, desc: 'Pick a course and an exam. The guide is assembled from your own library, weighted to weak concepts.' },
+  { kicker: 'STUDY ROOMS', title: <>Learn <em style={{ color: '#0C5638', fontStyle: 'italic' }}>together.</em></>, desc: 'Live rooms with chat and a side-by-side graph that shows exactly who knows what.' },
+  { kicker: 'GRADEBOOK', title: <>Know your <em style={{ color: '#0C5638', fontStyle: 'italic' }}>real grade.</em></>, desc: 'Syllabus weights become categories. Every score rolls into a live grade and letter.' },
+  { kicker: 'CALENDAR', title: <>A syllabus becomes a <em style={{ color: '#0C5638', fontStyle: 'italic' }}>semester.</em></>, desc: 'Upload once. Every exam, pset, and quiz is extracted, dated, and synced to Google Calendar.' },
+  { kicker: 'AI TUTOR', title: <>It asks. <em style={{ color: '#0C5638', fontStyle: 'italic' }}>You answer.</em></>, desc: 'Socratic, expository, or teachback. It never hands over the solution, it walks you to it.' },
+];
+
+/** Track A drifts right, track B drifts left. */
+const TRACK_A = [0, 1, 2, 3];
+const TRACK_B = [7, 6, 5, 4];
+
+const MOTES: { d: number; s: React.CSSProperties }[] = [
+  { d: 0.38, s: { right: '5.4%', top: '63.7%', width: 8, height: 8, background: '#4FA574', opacity: 0.58, boxShadow: '0 0 20px #4FA57466', animation: 'nodeFloatA 16s ease-in-out -6s infinite' } },
+  { d: 0.43, s: { left: '15.2%', top: '17.6%', width: 4.2, height: 4.2, background: '#6FBF8F', opacity: 0.4, animation: 'nodeFloatB 13s ease-in-out -3s infinite' } },
+  { d: 0.34, s: { left: '13.1%', top: '88.7%', width: 9.4, height: 9.4, background: '#8FD9A8', opacity: 0.46, boxShadow: '0 0 22px #8FD9A866', animation: 'nodeFloatA 18s ease-in-out -11s infinite' } },
+  { d: 0.40, s: { left: '12.4%', top: '50.2%', width: 10.9, height: 10.9, background: '#4FA574', opacity: 0.48, boxShadow: '0 0 26px #4FA57466', animation: 'nodeFloatB 15s ease-in-out -8s infinite' } },
+  { d: 0.27, s: { right: '9.2%', top: '65.0%', width: 7, height: 7, background: '#6FBF8F', opacity: 0.36, animation: 'nodeFloatA 12s ease-in-out -2s infinite' } },
+  { d: 0.45, s: { left: '5.4%', top: '81.7%', width: 9.3, height: 9.3, background: '#4FA574', opacity: 0.44, boxShadow: '0 0 23px #4FA57466', animation: 'nodeFloatB 17s ease-in-out -14s infinite' } },
+  { d: 0.42, s: { right: '41.3%', top: '6.1%', width: 5.8, height: 5.8, background: '#8FD9A8', opacity: 0.59, animation: 'nodeFloatA 14s ease-in-out -5s infinite' } },
+  { d: 0.47, s: { right: '7.9%', top: '59.7%', width: 6.4, height: 6.4, background: '#2E7D52', opacity: 0.53, animation: 'nodeFloatB 19s ease-in-out -9s infinite' } },
+  { d: 0.18, s: { left: '12.0%', top: '37.7%', width: 8, height: 8, background: '#0E9E5A', opacity: 0.53, boxShadow: '0 0 20px #0E9E5A66', animation: 'nodeFloatA 11s ease-in-out -7s infinite' } },
+  { d: 0.42, s: { left: '4.5%', top: '13.5%', width: 7, height: 7, background: '#8FD9A8', opacity: 0.48, animation: 'nodeFloatB 16s ease-in-out -12s infinite' } },
+  { d: 0.27, s: { right: '7.0%', top: '57.4%', width: 8, height: 8, background: '#2E7D52', opacity: 0.46, boxShadow: '0 0 20px #2E7D5266', animation: 'nodeFloatA 13s ease-in-out -4s infinite' } },
+];
+
+const CARD: React.CSSProperties = {
+  flex: '0 0 auto', width: 372, borderRadius: 20, background: '#FDFCF9',
+  border: '1px solid #E8E5DA', boxShadow: '0 6px 18px -6px rgba(18,32,26,0.14)',
+  padding: '12px 12px 18px', display: 'flex', flexDirection: 'column',
+  position: 'relative', overflow: 'hidden', cursor: 'pointer', userSelect: 'none',
+  transition: 'transform 320ms cubic-bezier(0.22,1,0.36,1)',
+};
+
+function Card({ i, ghost }: { i: number; ghost: boolean }) {
+  const c = CARDS[i];
+  return (
+    <article
+      data-tk={i}
+      aria-hidden={ghost || undefined}
+      style={CARD}
+      className="ld-galcard"
+    >
+      <div aria-hidden="true" style={{ position: 'relative', height: 166, borderRadius: 13, overflow: 'hidden', background: '#FDFCF9', border: '1px solid #EBF1EC' }}>
+        {GALLERY_MINIS[i]}
+      </div>
+      <div style={{ padding: '15px 12px 0', display: 'flex', flexDirection: 'column' }}>
+        <span style={{ ...MONO, fontSize: 9.5, letterSpacing: '0.28em', color: '#0C5638' }}>{c.kicker}</span>
+        <h3 style={{ margin: '10px 0 0', fontFamily: "'Playfair Display',serif", fontSize: 22, fontWeight: 600, lineHeight: 1.2, letterSpacing: '-0.015em', color: '#12201A' }}>
+          {c.title}
+        </h3>
+        <p style={{ margin: '9px 0 0', fontSize: 12.5, lineHeight: 1.6, color: '#61726A', maxWidth: '40ch', textWrap: 'pretty' }}>
+          {c.desc}
+        </p>
+      </div>
+    </article>
+  );
+}
+
+function Track({
+  trackRef, order, label, onOpen,
+}: {
+  trackRef: React.RefObject<HTMLDivElement | null>;
+  order: number[];
+  label: string;
+  onOpen: (i: number, el: HTMLElement | null) => void;
+}) {
+  return (
+    <div
+      ref={trackRef}
+      aria-label={label}
+      onClick={(e) => {
+        const card = (e.target as HTMLElement).closest<HTMLElement>('[data-tk]');
+        if (card) onOpen(Number(card.dataset.tk), card);
+      }}
+      style={{ display: 'flex', gap: 26, width: 'max-content', willChange: 'transform', cursor: 'grab', touchAction: 'pan-y' }}
+    >
+      {order.map((i) => <Card key={`a${i}`} i={i} ghost={false} />)}
+      {order.map((i) => <Card key={`b${i}`} i={i} ghost />)}
+    </div>
+  );
+}
+
+export function Gallery({
+  trackARef,
+  trackBRef,
+  onOpen,
+}: {
+  trackARef: React.RefObject<HTMLDivElement | null>;
+  trackBRef: React.RefObject<HTMLDivElement | null>;
+  onOpen: (i: number, el: HTMLElement | null) => void;
+}) {
+  return (
+    <section id="gallery" style={{ position: 'relative', padding: '16vh 0 10vh', zIndex: 1, isolation: 'isolate' }}>
+      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 0 }}>
+        {MOTES.map((m, i) => (
+          <span key={i} data-depth={m.d} style={{ position: 'absolute', borderRadius: 99, ...m.s }} />
+        ))}
+      </div>
+
+      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1220, margin: '0 auto', padding: '0 24px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
+        <div data-reveal="1">
+          <span style={{ ...MONO, fontSize: 11, letterSpacing: '0.32em', color: '#0C5638', textTransform: 'uppercase', fontWeight: 500 }}>
+            And much more
+          </span>
+          <h2 style={{ margin: '18px 0 0', fontFamily: "'Playfair Display',serif", fontSize: 'clamp(2.4rem,5vw,4.2rem)', fontWeight: 600, lineHeight: 1.04, letterSpacing: '-0.02em', color: '#12201A' }}>
+            The rest of the <em style={{ color: '#0C5638' }}>grove.</em>
+          </h2>
+          <p style={{ margin: '16px 0 0', color: '#61726A', fontSize: 15.5, lineHeight: 1.7, maxWidth: '52ch' }}>
+            Eight tools covering the whole arc of a course: quizzes and flashcards that test recall,
+            notes and study guides that turn your materials into something usable, a tutor that
+            talks you through what you missed, and a gradebook and calendar that keep the semester
+            honest. Each one writes back to the same graph.
+          </p>
+        </div>
+      </div>
+
+      <div style={{ position: 'relative', zIndex: 1, marginTop: 40 }}>
+        {/* the mask feathers both ends so cards enter and leave rather than pop */}
+        <div
+          style={{
+            position: 'relative', overflow: 'hidden', padding: '16px 0',
+            WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)',
+            maskImage: 'linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)',
+          }}
+        >
+          <Track trackRef={trackARef} order={TRACK_A} label="Sapling tools, drifting right" onOpen={onOpen} />
+        </div>
+        <div
+          style={{
+            position: 'relative', overflow: 'hidden', padding: '16px 0',
+            WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)',
+            maskImage: 'linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%)',
+          }}
+        >
+          <Track trackRef={trackBRef} order={TRACK_B} label="Sapling tools, drifting left" onOpen={onOpen} />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/landing-v5/Hero.tsx b/frontend/src/components/landing-v5/Hero.tsx
new file mode 100644
index 00000000..f359b8ee
--- /dev/null
+++ b/frontend/src/components/landing-v5/Hero.tsx
@@ -0,0 +1,278 @@
+'use client';
+
+/**
+ * The v5 title screen.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. This replaces the v4 hero
+ * outright — it is not a revision of it. The differences that matter:
+ *
+ * - The wordmark is Playfair Display 600 in brand forest (#0C5638), not
+ *   Archivo 800 in ink, and it arrives through a character scramble. The
+ *   source defines a `heroWipe` clip-path keyframe but never references it.
+ * - The v4 DOM `.floating-card` rig is gone, replaced by the WebGL scene
+ *   rendering into `glCanvasRef` behind this content.
+ * - Layout is a three-row grid (lockup / lede / bottom band) rather than a
+ *   centred flex column.
+ *
+ * The grid is `pointer-events:none` so the draggable WebGL scene underneath
+ * stays grabbable through the copy; the two interactive clusters opt back in.
+ *
+ * Entrance timing is a `heroRise` cascade of absolute CSS delays running
+ * 1.90s → 3.37s, i.e. starting as the 1.9s intro overlay clears. The values
+ * are irregular on purpose — they are hand-tuned, not a computed stagger.
+ */
+
+const KEYS = [
+  {
+    num: '01', title: 'Ingest', delay: '2.97s',
+    body: 'Your syllabus, slides and lecture notes in. A model that knows your course out.',
+  },
+  {
+    num: '02', title: 'Map', delay: '3.08s',
+    body: "Every concept linked to the ones it rests on, in your professor's own order.",
+  },
+  {
+    num: '03', title: 'Recall', delay: '3.19s',
+    body: 'Questions drawn from your material, returning right before you would forget.',
+  },
+];
+
+const RISE = 'heroRise 900ms cubic-bezier(0.22,1,0.36,1) both';
+
+export function Hero({
+  heroCanvasRef,
+  glCanvasRef,
+  heroContentRef,
+  heroText0,
+  heroText1,
+  /** Strength of the two wash layers that lift the copy off the scene, 0..1. */
+  wash = 1,
+  onBeta,
+  onSeeHow,
+}: {
+  heroCanvasRef: React.RefObject<HTMLCanvasElement | null>;
+  glCanvasRef: React.RefObject<HTMLCanvasElement | null>;
+  heroContentRef: React.RefObject<HTMLDivElement | null>;
+  heroText0: string;
+  heroText1: string;
+  wash?: number;
+  onBeta: () => void;
+  onSeeHow: () => void;
+}) {
+  const washOpacity = Math.max(0, Math.min(1, wash));
+
+  return (
+    <section style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden' }}>
+      {/* soft blooms. The right one is teal, not a mirror of the green left one. */}
+      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0, overflow: 'hidden' }}>
+        <div style={{ position: 'absolute', top: '-10%', left: '-10%', width: '50vw', height: '50vw', maxWidth: 900, maxHeight: 900, borderRadius: '50%', filter: 'blur(64px)', opacity: 0.7, background: 'rgba(46,125,82,0.22)' }} />
+        <div style={{ position: 'absolute', top: '20%', right: '-10%', width: '40vw', height: '40vw', maxWidth: 720, maxHeight: 720, borderRadius: '50%', filter: 'blur(64px)', opacity: 0.7, background: 'rgba(43,140,150,0.2)' }} />
+      </div>
+
+      {/* 2D constellation backdrop */}
+      <canvas ref={heroCanvasRef} aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 0, width: '100%', height: '100%', display: 'block', opacity: 0.88 }} />
+      {/* WebGL scene — panels, constellation, growth field. Draggable, so it
+          must claim its own touch handling rather than scrolling the page. */}
+      <canvas ref={glCanvasRef} aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 1, width: '100%', height: '100%', display: 'block', touchAction: 'none' }} />
+
+      {/* Two washes that pull the scene back under the copy.
+          These veil by screen position, not by element, so they hit whatever
+          panel drifts under them — originally the top-left radial sat almost
+          exactly on the knowledge-graph card and veiled it at ~35%, and the
+          bottom band caught the mastery card at ~20%. Both are now cut to the
+          point where every panel is under ~0.12 veil across its whole body.
+          The bottom band keeps a strong toe (below ~9% of the viewport) for
+          the 01/02/03 keys and the info box, but its ramp is pulled down from
+          50% to 33% so it clears the lowest panel entirely. */}
+      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none', opacity: washOpacity, background: 'radial-gradient(ellipse 88% 74% at 52% 48%, rgba(240,244,242,0) 0%, rgba(240,244,242,0.02) 74%, rgba(240,244,242,0.10) 100%)' }} />
+      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, zIndex: 3, pointerEvents: 'none', opacity: washOpacity, background: 'linear-gradient(0deg, rgba(240,244,242,0.62) 0%, rgba(240,244,242,0.34) 9%, rgba(240,244,242,0.06) 22%, rgba(240,244,242,0) 28%), radial-gradient(ellipse 44% 22% at 16% 17%, rgba(240,244,242,0.11) 0%, rgba(240,244,242,0.035) 52%, rgba(240,244,242,0) 76%), radial-gradient(ellipse 34% 20% at 80% 58%, rgba(240,244,242,0.17) 0%, rgba(240,244,242,0.055) 55%, rgba(240,244,242,0) 82%)' }} />
+      {/* fractal-noise grain, multiplied at 3.5% — kills banding in the blooms */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute', inset: 0, zIndex: 4, pointerEvents: 'none',
+          opacity: 0.035, mixBlendMode: 'multiply',
+          backgroundImage:
+            "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>\")",
+        }}
+      />
+
+      <div
+        ref={heroContentRef}
+        className="hero-grid"
+        style={{
+          position: 'relative', zIndex: 20, minHeight: '100vh', boxSizing: 'border-box',
+          display: 'grid', gridTemplateRows: 'auto 1fr auto', gap: 32,
+          // horizontal padding must stay equal to the navbar's
+          padding: 'min(13.5vh,120px) max(4.2vw,22px) 34px',
+          pointerEvents: 'none',
+        }}
+      >
+        {/* ── lockup ── */}
+        <div style={{ minWidth: 0 }}>
+          <div
+            style={{
+              // pulls the tagline up into the wordmark's cap space and indents
+              // it to the optical left edge of the S — both values are tied to
+              // the wordmark's own clamp, so they hold at every size
+              margin: '0 0 -0.78em calc(clamp(5rem,14.6vw,17.6rem) * 0.0485)',
+              animation: 'heroRise 800ms cubic-bezier(0.22,1,0.36,1) both',
+              animationDelay: '1.90s',
+            }}
+          >
+            <span
+              style={{
+                fontFamily: "'Playfair Display',serif", fontWeight: 600,
+                fontSize: 'clamp(17px,1.72vw,29px)', letterSpacing: '0.035em',
+                lineHeight: 1, color: '#33443B', display: 'inline-block',
+                // reserves the settled width so the scramble can't reflow the line
+                minWidth: '11.5em',
+              }}
+            >
+              {heroText0 || ' '}
+            </span>
+          </div>
+          <h1
+            aria-label="Sapling"
+            style={{
+              margin: 0, fontFamily: "'Playfair Display',serif", fontWeight: 600,
+              fontSize: 'clamp(5rem,14.6vw,17.6rem)', lineHeight: 0.92,
+              letterSpacing: '-0.02em', color: '#0C5638',
+              filter: 'drop-shadow(0 0 34px rgba(240,244,242,0.95)) drop-shadow(0 0 14px rgba(240,244,242,0.9))',
+            }}
+          >
+            {heroText1 || ' '}
+          </h1>
+        </div>
+
+        {/* ── lede row ── */}
+        <div
+          className="hero-mid"
+          style={{
+            display: 'grid', gridTemplateColumns: 'auto minmax(0,auto)',
+            alignItems: 'center', justifyContent: 'space-between', gap: 'min(4vw,56px)',
+          }}
+        >
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 13 }}>
+            <div
+              style={{
+                display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
+                pointerEvents: 'auto', animation: RISE, animationDelay: '2.84s',
+              }}
+            >
+              <button
+                onClick={onBeta}
+                className="ld-btn-solid"
+                style={{
+                  background: '#0C5638', color: '#fff', border: 'none', borderRadius: 6,
+                  padding: '15px 28px', fontFamily: "'DM Sans',sans-serif", fontWeight: 600,
+                  fontSize: 16, cursor: 'pointer',
+                  animation: 'betaGlow 2.2s ease-in-out infinite', transition: 'filter 200ms',
+                }}
+              >
+                Sign up for Beta Testing
+              </button>
+              <button
+                onClick={onSeeHow}
+                className="ld-ghost"
+                style={{
+                  background: 'rgba(253,252,249,0.82)', color: '#12201A',
+                  border: '1px solid rgba(18,32,26,0.16)', borderRadius: 6,
+                  padding: '15px 25px', fontFamily: "'DM Sans',sans-serif", fontWeight: 600,
+                  fontSize: 16, cursor: 'pointer', display: 'inline-flex',
+                  alignItems: 'center', gap: 9,
+                  backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
+                  transition: 'all 220ms',
+                }}
+              >
+                See how it works
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M5 12h14M13 6l6 6-6 6" />
+                </svg>
+              </button>
+            </div>
+            <p style={{ margin: 0, fontFamily: "'JetBrains Mono',monospace", fontSize: 10.5, letterSpacing: '0.15em', color: '#61726A', animation: RISE, animationDelay: '2.96s' }}>
+              * AVAILABLE EXCLUSIVELY TO BOSTON UNIVERSITY STUDENTS
+            </p>
+          </div>
+
+          <p
+            className="hero-lede"
+            style={{
+              margin: 0, maxWidth: '34ch', fontSize: 'clamp(16px,1.22vw,21px)',
+              lineHeight: 1.6, color: '#33443B', textWrap: 'pretty',
+              animation: RISE, animationDelay: '2.64s',
+            }}
+          >
+            Upload a syllabus. Sapling reads your whole course, maps what you already know, and
+            drills only what is slipping. It works from your own coursework, not the open web, and
+            the AI never hands over the answer.
+          </p>
+        </div>
+
+        {/* ── bottom band ── */}
+        <div
+          className="hero-bottom"
+          style={{
+            display: 'grid', gridTemplateColumns: 'minmax(0,1.35fr) auto minmax(0,0.95fr)',
+            alignItems: 'end', gap: 'min(3vw,44px)',
+          }}
+        >
+          <div className="hero-keys" style={{ display: 'flex', gap: 'min(2.8vw,42px)', minWidth: 0 }}>
+            {KEYS.map((k) => (
+              <div key={k.num} style={{ minWidth: 0, maxWidth: '26ch', animation: RISE, animationDelay: k.delay }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 7 }}>
+                  <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 10.5, letterSpacing: '0.24em', color: '#8B9A92' }}>
+                    {k.num}
+                  </span>
+                  <span style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, rgba(12,86,56,0.3), rgba(12,86,56,0))' }} />
+                </div>
+                <div style={{ fontFamily: "'Spectral',Georgia,serif", fontWeight: 700, fontSize: 'clamp(21px,1.78vw,29px)', letterSpacing: '-0.02em', color: '#12201A', lineHeight: 1.05 }}>
+                  {k.title}
+                </div>
+                <p style={{ margin: '8px 0 0', fontSize: 14, lineHeight: 1.55, color: '#61726A', textWrap: 'pretty' }}>
+                  {k.body}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div
+            className="hero-cue"
+            style={{
+              justifySelf: 'center', display: 'flex', flexDirection: 'column',
+              alignItems: 'center', gap: 11, paddingBottom: 4,
+              animation: 'heroRise 900ms ease both', animationDelay: '3.37s',
+            }}
+          >
+            <div className="hero-scrollcue" style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
+              <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 10.5, letterSpacing: '0.3em', color: '#61726A' }}>
+                SCROLL TO CONTINUE
+              </span>
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#61726A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ animation: 'cueDrop 2.2s ease-in-out infinite' }}>
+                <path d="M12 5v14M6 13l6 6 6-6" />
+              </svg>
+            </div>
+          </div>
+
+          <div
+            className="hero-info"
+            style={{
+              justifySelf: 'end', display: 'flex', maxWidth: 480, padding: '18px 20px',
+              border: '1px solid rgba(18,32,26,0.12)', borderRadius: 5,
+              background: 'rgba(253,252,249,0.7)',
+              backdropFilter: 'blur(9px)', WebkitBackdropFilter: 'blur(9px)',
+              animation: RISE, animationDelay: '3.22s',
+            }}
+          >
+            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.58, color: '#33443B', textWrap: 'pretty' }}>
+              Built by students who were tired of studying blind. Every answer cites the slide it
+              came from, so you can check the source yourself.{' '}
+              <span style={{ color: '#0C5638', fontWeight: 600 }}>Free through beta.</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/landing-v5/IntroOverlay.tsx b/frontend/src/components/landing-v5/IntroOverlay.tsx
new file mode 100644
index 00000000..37e4e3dd
--- /dev/null
+++ b/frontend/src/components/landing-v5/IntroOverlay.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+/**
+ * Loading overlay — the hand-tuned intro lockup.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. The sequence is causal and the
+ * ordering is the whole point: the wordmark sets context first, the stem
+ * draws upward, the bud pops the moment the stem tops out, then each leaf
+ * unfurls from the joint the stem has already passed, and the rule sweeps
+ * out last to close the lockup.
+ *
+ * All six animations are 2.4s with `both` fill and differ only in their
+ * keyframe offsets — see the s1* keyframes in globals.css, whose
+ * per-keyframe timing functions give the leaves their weight.
+ *
+ * v5 adds the LOADING readout under the rule. It is honest about being
+ * decorative: nothing is actually being measured, and the counter is
+ * driven by `useLanding`'s ragged +4..+12 tick rather than real progress.
+ */
+
+export function IntroOverlay({
+  heroMounted,
+  introGone,
+  loadPct,
+}: {
+  heroMounted: boolean;
+  introGone: boolean;
+  loadPct: number;
+}) {
+  return (
+    <div
+      aria-hidden="true"
+      style={{
+        position: 'fixed', inset: 0, zIndex: 60,
+        // dropped from the layout entirely once the fade has finished, so it
+        // can never intercept a pointer or cost a paint
+        display: introGone ? 'none' : 'flex',
+        alignItems: 'center', justifyContent: 'center',
+        backgroundColor: '#f0f4f2',
+        backgroundImage:
+          'radial-gradient(ellipse 100% 70% at 50% 30%, rgba(255,255,255,0.9) 0%, transparent 62%)',
+        transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1)',
+        opacity: heroMounted ? 0 : 1,
+        pointerEvents: heroMounted ? 'none' : 'auto',
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <svg width="86" height="86" viewBox="0 0 64 64" fill="none" style={{ display: 'block', overflow: 'visible' }}>
+          <path
+            d="M32 54 L32 28" stroke="#0C5638" strokeWidth="3.5" strokeLinecap="round"
+            strokeDasharray="27"
+            style={{ animation: 's1Stem 2.4s cubic-bezier(0.25,0.6,0.2,1) both' }}
+          />
+          <path
+            d="M32 38 C32 38 18 34 16 22 C16 22 30 20 32 38Z" fill="#0C5638"
+            style={{
+              transformBox: 'fill-box', transformOrigin: '100% 100%',
+              animation: 's1LeafLo 2.4s linear both',
+            }}
+          />
+          <path
+            d="M32 30 C32 30 46 24 50 12 C50 12 36 12 32 30Z" fill="#4FA574"
+            style={{
+              transformBox: 'fill-box', transformOrigin: '0% 100%',
+              animation: 's1LeafHi 2.4s linear both',
+            }}
+          />
+          <circle
+            cx="32" cy="26" r="2.5" fill="#0C5638"
+            style={{
+              transformBox: 'fill-box', transformOrigin: '50% 50%',
+              animation: 's1Bud 2.4s cubic-bezier(0.34,1.56,0.64,1) both',
+            }}
+          />
+        </svg>
+        <div
+          style={{
+            marginTop: 13, fontFamily: "'Spectral',Georgia,serif", fontWeight: 700,
+            fontSize: 33, letterSpacing: '-0.025em', color: '#0C5638', lineHeight: 1,
+            animation: 's1Word 2.4s cubic-bezier(0.22,1,0.36,1) both',
+          }}
+        >
+          Sapling
+        </div>
+        <div
+          style={{
+            marginTop: 12, width: 146, height: 1,
+            background: 'linear-gradient(90deg, rgba(12,86,56,0.55), rgba(79,165,116,0.25))',
+            transformOrigin: 'left center',
+            animation: 's1Rule 2.4s cubic-bezier(0.22,1,0.36,1) both',
+          }}
+        />
+        <div
+          style={{
+            marginTop: 14, display: 'flex', alignItems: 'baseline', gap: 9,
+            fontFamily: "'JetBrains Mono',monospace", fontSize: 10,
+            letterSpacing: '0.3em', color: '#9AA5A0',
+            animation: 's1Word 2.4s cubic-bezier(0.22,1,0.36,1) both',
+          }}
+        >
+          <span>LOADING</span>
+          {/* zero-padded to three digits so the lockup never reflows as it counts */}
+          <span style={{ color: '#61726A' }}>{String(Math.min(100, loadPct)).padStart(3, '0')}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/Journal.tsx b/frontend/src/components/landing-v5/Journal.tsx
new file mode 100644
index 00000000..19835750
--- /dev/null
+++ b/frontend/src/components/landing-v5/Journal.tsx
@@ -0,0 +1,219 @@
+'use client';
+
+/**
+ * Journal + newsletter.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. Three editorial cards over an
+ * email capture. Two cards carry a photo; the third renders a knowledge-graph
+ * illustration inline instead.
+ *
+ * The source uses its `image-slot` web component (a drag-to-fill authoring
+ * affordance) for the photos. Here they are `next/image` against the assets
+ * already in `public/`, keeping the source's 860/574 aspect so the card
+ * geometry is unchanged.
+ */
+
+import Image from 'next/image';
+import { POSTS, POST_META } from '@/lib/landing/content';
+import { DragField } from './DragField';
+
+const MONO: React.CSSProperties = { fontFamily: "'JetBrains Mono',monospace" };
+
+/** The inline graph illustration used by the third card. */
+function GraphThumb() {
+  return (
+    <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 80% 70% at 45% 45%, #123526 0%, #0B2418 60%, #071A11 100%)' }}>
+      <svg width="100%" height="100%" viewBox="0 0 243 158" preserveAspectRatio="xMidYMid slice">
+        <line x1="118" y1="76" x2="62" y2="44" stroke="rgba(143,217,168,0.28)" />
+        <line x1="118" y1="76" x2="54" y2="108" stroke="rgba(143,217,168,0.28)" />
+        <line x1="118" y1="76" x2="182" y2="50" stroke="rgba(143,217,168,0.28)" />
+        <line x1="118" y1="76" x2="176" y2="116" stroke="rgba(143,217,168,0.18)" />
+        <line x1="62" y1="44" x2="182" y2="50" stroke="rgba(143,217,168,0.1)" />
+        <line x1="54" y1="108" x2="176" y2="116" stroke="rgba(143,217,168,0.1)" />
+        {/* each node's ring arc is its mastery, drawn from 12 o'clock */}
+        <circle cx="118" cy="76" r="15" fill="none" stroke="rgba(230,242,232,0.14)" strokeWidth="2.6" />
+        <circle cx="118" cy="76" r="15" fill="none" stroke="#0E9E5A" strokeWidth="2.6" strokeLinecap="round" strokeDasharray="58 94" transform="rotate(-90 118 76)" />
+        <circle cx="118" cy="76" r="9" fill="#0E9E5A" />
+        <text x="118" y="79" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="7" fill="#061710">112</text>
+        <circle cx="62" cy="44" r="10" fill="none" stroke="rgba(230,242,232,0.14)" strokeWidth="2.2" />
+        <circle cx="62" cy="44" r="10" fill="none" stroke="#4FA574" strokeWidth="2.2" strokeLinecap="round" strokeDasharray="38 25" transform="rotate(-90 62 44)" />
+        <circle cx="62" cy="44" r="5.5" fill="#4FA574" />
+        <text x="62" y="26" textAnchor="middle" fontFamily="DM Sans" fontSize="7.5" fill="#8FA89A">Trees</text>
+        <circle cx="54" cy="108" r="10" fill="none" stroke="rgba(230,242,232,0.14)" strokeWidth="2.2" />
+        <circle cx="54" cy="108" r="10" fill="none" stroke="#0E9E5A" strokeWidth="2.2" strokeLinecap="round" strokeDasharray="55 8" transform="rotate(-90 54 108)" />
+        <circle cx="54" cy="108" r="5.5" fill="#0E9E5A" />
+        <text x="54" y="130" textAnchor="middle" fontFamily="DM Sans" fontSize="7.5" fill="#8FA89A">Sorting</text>
+        <circle cx="182" cy="50" r="10" fill="none" stroke="rgba(230,242,232,0.14)" strokeWidth="2.2" />
+        <circle cx="182" cy="50" r="10" fill="none" stroke="#E27A63" strokeWidth="2.2" strokeLinecap="round" strokeDasharray="16 47" transform="rotate(-90 182 50)" />
+        <circle cx="182" cy="50" r="5" fill="#E27A63" />
+        <text x="182" y="32" textAnchor="middle" fontFamily="DM Sans" fontSize="7.5" fill="#8FA89A">Recursion</text>
+        <circle cx="176" cy="116" r="9" fill="none" stroke="rgba(230,242,232,0.12)" strokeWidth="2" />
+        <circle cx="176" cy="116" r="4.5" fill="#9a9a9a" />
+        <text x="176" y="137" textAnchor="middle" fontFamily="DM Sans" fontSize="7.5" fill="#6C8377">DP</text>
+      </svg>
+      <span style={{ position: 'absolute', left: 11, top: 10, ...MONO, fontSize: 7.5, letterSpacing: '0.2em', color: '#8FD9A8' }}>
+        CS 112 · KNOWLEDGE GRAPH
+      </span>
+    </div>
+  );
+}
+
+export function Journal({
+  email,
+  subscribed,
+  subscribing,
+  error,
+  onEmail,
+  onSubscribe,
+}: {
+  email: string;
+  subscribed: boolean;
+  subscribing: boolean;
+  error: string | null;
+  onEmail: (v: string) => void;
+  onSubscribe: () => void;
+}) {
+  return (
+    <section id="newsletter" style={{ position: 'relative', padding: '120px 24px 100px', zIndex: 1 }}>
+      <DragField section="newsletter" />
+
+      <div style={{ maxWidth: 1150, margin: '0 auto' }}>
+        <div data-reveal="1" style={{ display: 'grid', gridTemplateColumns: '7fr 4fr', gap: 48, alignItems: 'end', marginBottom: 56 }}>
+          <div>
+            <span style={{ ...MONO, fontSize: 11, letterSpacing: '0.32em', color: '#0C5638', textTransform: 'uppercase', fontWeight: 500 }}>
+              The Sapling Journal
+            </span>
+            <h2 style={{ margin: '20px 0 0', fontFamily: "'Playfair Display',serif", fontSize: 'clamp(2.2rem, 4.4vw, 3.6rem)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-0.02em', color: '#12201A' }}>
+              The story of Sapling, <em style={{ color: '#0C5638' }}>as it grows.</em>
+            </h2>
+          </div>
+          <p style={{ margin: '0 0 6px', color: '#61726A', fontSize: 15, lineHeight: 1.7 }}>
+            Why we built it, where it&rsquo;s headed, and what we&rsquo;re learning about learning,
+            written by the four of us, once a month.
+          </p>
+        </div>
+
+        <div data-reveal="1" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
+          {POSTS.map((p, i) => {
+            const meta = POST_META[i] ?? POST_META[0];
+            return (
+              <div key={p.title} style={{ display: 'flex', animation: 'cardFloat 7.5s ease-in-out infinite both', animationDelay: meta.floatDelay }}>
+                <a
+                  href="#newsletter"
+                  className="ld-post"
+                  style={{ display: 'flex', flexDirection: 'column', width: '100%', background: '#FDFCF9', border: '1px solid rgba(18,32,26,0.09)', borderRadius: 16, padding: '14px 14px 20px', color: 'inherit' }}
+                >
+                  <div style={{ position: 'relative', width: '100%', borderRadius: 11, overflow: 'hidden', background: '#EEF1EC', aspectRatio: '860 / 574' }}>
+                    {meta.isGraph ? (
+                      <GraphThumb />
+                    ) : (
+                      <Image
+                        src={meta.src}
+                        alt=""
+                        fill
+                        sizes="(max-width: 900px) 100vw, 33vw"
+                        style={{ objectFit: 'cover' }}
+                      />
+                    )}
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 16, padding: '0 6px' }}>
+                    <span style={{ ...MONO, fontSize: 9.5, letterSpacing: '0.26em', color: '#0C5638', textTransform: 'uppercase' }}>{p.tag}</span>
+                    <span style={{ ...MONO, fontSize: 9.5, color: '#61726A' }}>{p.date}</span>
+                  </div>
+                  <h3 style={{ margin: '12px 6px 0', fontFamily: "'Playfair Display',serif", fontSize: 22, fontWeight: 600, lineHeight: 1.22, letterSpacing: '-0.01em' }}>
+                    {p.title}
+                  </h3>
+                  <p style={{ margin: '12px 6px 18px', color: '#61726A', fontSize: 13.5, lineHeight: 1.7, flex: 1 }}>{p.excerpt}</p>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 11, margin: '0 6px', paddingTop: 14, borderTop: '1px solid #EBF1EC' }}>
+                    <span style={{ ...MONO, fontSize: 10, letterSpacing: '0.2em', color: '#0C5638' }}>READ · {p.time}</span>
+                    <div aria-hidden="true" style={{ display: 'flex', alignItems: 'center', gap: 16, color: '#8B9891' }}>
+                      <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5 }}>
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                        </svg>
+                        {meta.comments}
+                      </span>
+                      <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5 }}>
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                          <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.2l7.7-7.7 1.1-1.1a5.5 5.5 0 0 0 0-7.8z" />
+                        </svg>
+                        {meta.likes}
+                      </span>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            );
+          })}
+        </div>
+
+        {/*
+          The newsletter panel's gradient is the shared hero surface. The
+          source inlines the literal, but #288 consolidated that exact value
+          behind `--surface-hero` / `.hero-surface` after it had drifted at
+          four of its five paste sites — and HeroCard.test.tsx fails the build
+          if the literal reappears anywhere under src/. Same pixels, one owner.
+        */}
+        <div
+          data-reveal="1"
+          className="hero-surface"
+          style={{
+            marginTop: 56,
+            border: '1px solid rgba(255,255,255,0.7)', borderRadius: 20,
+            padding: 'clamp(28px,4vw,44px)', display: 'flex', alignItems: 'center',
+            justifyContent: 'space-between', gap: 32, flexWrap: 'wrap',
+          }}
+        >
+          <div>
+            <h3 style={{ margin: 0, fontFamily: "'Playfair Display',serif", fontSize: 'clamp(1.5rem, 2.4vw, 2rem)', fontWeight: 600, letterSpacing: '-0.015em', color: '#12201A' }}>
+              Get the Journal, and a seat in the beta.
+            </h3>
+            <p style={{ margin: '10px 0 0', color: '#33443B', fontSize: 14, lineHeight: 1.7, maxWidth: '52ch' }}>
+              One letter a month while we build. First in the inbox, first on the tree when beta
+              invites go out. No spam. We&rsquo;re students too.
+            </p>
+          </div>
+
+          {subscribed ? (
+            <div style={{ textAlign: 'center', padding: '0 12px' }}>
+              <div style={{ fontFamily: "'Playfair Display',serif", fontSize: 24, fontWeight: 600, color: '#12201A' }}>
+                You&rsquo;re on the <em style={{ color: '#0C5638' }}>tree.</em>
+              </div>
+              <p style={{ margin: '6px 0 0', fontSize: 14, color: '#4b5563', fontStyle: 'italic' }}>
+                See you in the inbox · The Team
+              </p>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              <form onSubmit={(e) => { e.preventDefault(); onSubscribe(); }} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+                <input
+                  value={email}
+                  onChange={(e) => onEmail(e.target.value)}
+                  disabled={subscribing}
+                  type="email"
+                  placeholder="you@school.edu"
+                  aria-label="Email address"
+                  className="ld-emailinput"
+                  style={{ width: 250, background: '#fdfcf9', border: '1px solid rgba(18,32,26,0.14)', borderRadius: 6, padding: '13px 16px', fontFamily: "'DM Sans',sans-serif", fontSize: 14, color: '#12201A', outline: 'none' }}
+                />
+                <button
+                  type="submit"
+                  disabled={subscribing}
+                  className="ld-btn-solid"
+                  style={{ background: '#0C5638', color: '#fff', border: 'none', borderRadius: 6, padding: '13px 22px', fontFamily: "'DM Sans',sans-serif", fontWeight: 600, fontSize: 14, cursor: subscribing ? 'not-allowed' : 'pointer', opacity: subscribing ? 0.6 : 1, whiteSpace: 'nowrap', transition: 'filter 200ms, opacity 200ms' }}
+                >
+                  {subscribing ? 'Signing you up…' : 'Join the list'}
+                </button>
+              </form>
+              {error && (
+                <p role="alert" style={{ margin: 0, fontSize: 12.5, lineHeight: 1.5, color: '#9c4b48', maxWidth: 330 }}>
+                  {error}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/landing-v5/Navbar.tsx b/frontend/src/components/landing-v5/Navbar.tsx
new file mode 100644
index 00000000..1d112a2d
--- /dev/null
+++ b/frontend/src/components/landing-v5/Navbar.tsx
@@ -0,0 +1,239 @@
+'use client';
+
+/**
+ * Fixed navbar — full-bleed, with a blurred scrim and scroll-driven colour.
+ *
+ * Ported from `Sapling Landing v5.dc.html`. Two things separate it from the
+ * v4 bar it replaces:
+ *
+ * 1. No max-width wrapper. The horizontal padding is `max(4.2vw,22px)`,
+ *    which is *exactly* the hero grid's side padding — that equality is what
+ *    puts the leaf mark and the Get Started button on the wordmark's optical
+ *    edges. Change one and you must change the other.
+ * 2. Every colour comes from a theme object rather than a literal, so the bar
+ *    can invert over the dark acts. See navTheme.ts.
+ *
+ * The bar's show/hide transform is written directly to the node by the
+ * engine's scroll handler, not through React.
+ */
+
+import Image from 'next/image';
+import Link from 'next/link';
+import type { NavTheme } from './navTheme';
+
+/** Companion pages. The design ships these as sibling .dc.html files; here
+ *  they are app routes. Only Home exists as a section — the rest navigate. */
+const PAGES = [
+  { label: 'About', href: '/about' },
+  { label: 'Team', href: '/team' },
+  { label: 'Wiki', href: '/wiki' },
+  { label: 'Gallery', href: '/gallery' },
+  { label: 'News', href: '/news' },
+  { label: 'FAQ', href: '/faq' },
+];
+
+const GITHUB_URL = 'https://github.com/SaplingLearn/Sapling';
+const KOFI_URL = 'https://ko-fi.com/saplinglearn';
+
+const TAB: React.CSSProperties = {
+  fontFamily: "'DM Sans',sans-serif", fontWeight: 500, fontSize: 13.5,
+  letterSpacing: '0.02em', transition: 'color 400ms', whiteSpace: 'nowrap',
+};
+
+export function Navbar({
+  navRef,
+  heroMounted,
+  exploring,
+  navMenuOpen,
+  theme,
+  onToggleMenu,
+  onCloseMenu,
+  onLogoClick,
+  onSignIn,
+  onGetStarted,
+}: {
+  navRef: React.RefObject<HTMLElement | null>;
+  heroMounted: boolean;
+  exploring: boolean;
+  navMenuOpen: boolean;
+  theme: NavTheme;
+  onToggleMenu: () => void;
+  onCloseMenu: () => void;
+  onLogoClick: () => void;
+  onSignIn: () => void;
+  onGetStarted: () => void;
+}) {
+  return (
+    <nav
+      ref={navRef}
+      className="sapling-nav"
+      style={{
+        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
+        // must stay equal to the hero grid's horizontal padding
+        padding: '16px max(4.2vw,22px)',
+        opacity: exploring ? 0 : heroMounted ? 1 : 0,
+        pointerEvents: exploring ? 'none' : 'auto',
+        transform: heroMounted ? 'translateY(0)' : 'translateY(-30px)',
+        transition:
+          'opacity 800ms cubic-bezier(0.22,1,0.36,1), transform 400ms cubic-bezier(0.22,1,0.36,1)',
+      }}
+    >
+      {/* blurred band; masked so it dissolves rather than ending on a hard edge */}
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute', left: 0, right: 0, top: 0, height: 92,
+          pointerEvents: 'none',
+          backdropFilter: 'blur(9px)', WebkitBackdropFilter: 'blur(9px)',
+          background: theme.scrim, transition: 'background 600ms ease',
+          maskImage: 'linear-gradient(180deg, #000 0%, #000 44%, transparent 100%)',
+          WebkitMaskImage: 'linear-gradient(180deg, #000 0%, #000 44%, transparent 100%)',
+        }}
+      />
+
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
+        <button
+          onClick={onLogoClick}
+          style={{ display: 'flex', alignItems: 'center', gap: 4, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
+        >
+          <Image
+            src="/sapling-icon.svg" alt="" width={26} height={26} priority
+            style={{ position: 'relative', top: -2, filter: theme.iconFilter, transition: 'filter 500ms' }}
+          />
+          <span
+            style={{
+              fontFamily: "'Spectral',Georgia,serif", fontWeight: 700, fontSize: 20,
+              color: theme.logo, letterSpacing: '-0.02em', lineHeight: 1.1,
+              transition: 'color 500ms',
+            }}
+          >
+            Sapling
+          </span>
+        </button>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'nowrap', minWidth: 0 }}>
+          {/* compact trigger, swapped in for the tab row below 1180px */}
+          <button
+            onClick={onToggleMenu}
+            type="button"
+            className="nav-compact"
+            aria-haspopup="menu"
+            aria-expanded={navMenuOpen}
+            title="Pages"
+            style={{ ...TAB, display: 'none', alignItems: 'center', gap: 7, background: 'none', border: 'none', cursor: 'pointer', color: theme.ink, padding: 0 }}
+          >
+            Pages
+            <svg
+              width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
+              style={{ flexShrink: 0, transition: 'transform 240ms', transform: navMenuOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}
+            >
+              <path d="M6 9l6 6 6-6" />
+            </svg>
+          </button>
+
+          <div className="nav-tabs" style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'nowrap' }}>
+            {/* Home is the current page: it scrolls rather than navigating */}
+            <button
+              onClick={onLogoClick}
+              type="button"
+              aria-current="page"
+              style={{ ...TAB, fontWeight: 600, background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: theme.inkHi }}
+            >
+              Home
+            </button>
+            {PAGES.map((p) => (
+              <Link key={p.href} href={p.href} className="ld-navlink" style={{ ...TAB, color: theme.ink }}>
+                {p.label}
+              </Link>
+            ))}
+            <a
+              href={GITHUB_URL} target="_blank" rel="noopener noreferrer" title="Sapling on GitHub"
+              className="ld-navlink"
+              style={{ ...TAB, display: 'flex', alignItems: 'center', gap: 7, color: theme.ink }}
+            >
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ flexShrink: 0 }}>
+                <path d="M12 .5C5.73.5.75 5.48.75 11.75c0 4.99 3.24 9.22 7.73 10.71.57.1.78-.25.78-.55v-1.93c-3.14.68-3.81-1.51-3.81-1.51-.51-1.3-1.25-1.65-1.25-1.65-1.03-.7.08-.69.08-.69 1.13.08 1.72 1.16 1.72 1.16 1 1.72 2.63 1.22 3.27.93.1-.72.39-1.22.71-1.5-2.5-.29-5.14-1.25-5.14-5.58 0-1.23.44-2.24 1.16-3.03-.12-.28-.5-1.43.11-2.98 0 0 .95-.3 3.1 1.16a10.7 10.7 0 0 1 5.64 0c2.15-1.46 3.09-1.16 3.09-1.16.62 1.55.23 2.7.12 2.98.72.79 1.16 1.8 1.16 3.03 0 4.34-2.65 5.29-5.16 5.57.41.35.77 1.04.77 2.1v3.11c0 .3.2.66.79.55a11.26 11.26 0 0 0 7.72-10.71C23.25 5.48 18.27.5 12 .5z" />
+              </svg>
+              GitHub
+            </a>
+            <a
+              href={KOFI_URL} target="_blank" rel="noopener noreferrer" title="Support Sapling on Ko-fi"
+              className="ld-kofi"
+              style={{
+                display: 'flex', alignItems: 'center', gap: 7, padding: '6px 13px 6px 10px',
+                borderRadius: 99, border: `1px solid ${theme.pillBorder}`, background: theme.pillBg,
+                color: theme.pillFg, fontFamily: "'DM Sans',sans-serif", fontWeight: 600,
+                fontSize: 13, letterSpacing: '0.01em', transition: 'all 400ms',
+              }}
+            >
+              <Image src="/kofi-symbol.png" alt="" width={17} height={17} style={{ objectFit: 'contain' }} />
+              Support us
+            </a>
+          </div>
+
+          <span aria-hidden="true" style={{ width: 1, height: 16, background: theme.rule, flex: '0 0 auto', transition: 'background 500ms' }} />
+
+          <button
+            onClick={onSignIn}
+            className="ld-navlink"
+            style={{ ...TAB, background: 'none', border: 'none', cursor: 'pointer', color: theme.ink }}
+          >
+            Sign In
+          </button>
+          <button
+            onClick={onGetStarted}
+            style={{
+              background: theme.btnBg, color: theme.btnFg, border: 'none', borderRadius: 6,
+              padding: '8px 16px', fontFamily: "'DM Sans',sans-serif", fontWeight: 600,
+              fontSize: 13.5, cursor: 'pointer',
+              transition: 'filter 200ms, background 500ms, color 500ms',
+            }}
+            className="ld-btn-solid"
+          >
+            Get Started
+          </button>
+        </div>
+
+        {/* compact menu */}
+        <div
+          onClick={onCloseMenu}
+          className="nav-panel"
+          role="menu"
+          style={{
+            position: 'absolute', right: 0, top: 'calc(100% + 10px)', minWidth: 180, zIndex: 60,
+            padding: 6, borderRadius: 12, background: 'rgba(253,252,249,0.96)',
+            backdropFilter: 'blur(12px)', border: '1px solid rgba(18,32,26,0.1)',
+            boxShadow: '0 16px 38px -18px rgba(18,32,26,0.4)',
+            display: navMenuOpen ? 'flex' : 'none',
+            flexDirection: 'column', gap: 1, transformOrigin: 'top right',
+            opacity: navMenuOpen ? 1 : 0,
+            transform: navMenuOpen ? 'scale(1)' : 'scale(0.96)',
+            transition: 'opacity 200ms ease, transform 240ms cubic-bezier(0.22,1,0.36,1)',
+          }}
+        >
+          <button
+            onClick={onLogoClick}
+            type="button"
+            aria-current="page"
+            style={{
+              textAlign: 'left', border: 'none', cursor: 'pointer',
+              fontFamily: "'DM Sans',sans-serif", fontWeight: 600, padding: '9px 12px',
+              borderRadius: 8, fontSize: 13.5, color: '#12201A', background: 'rgba(12,86,56,0.07)',
+            }}
+          >
+            Home
+          </button>
+          {PAGES.map((p) => (
+            <Link
+              key={p.href} href={p.href} className="ld-navmenu-item"
+              style={{ padding: '9px 12px', borderRadius: 8, fontSize: 13.5, color: '#33443B' }}
+            >
+              {p.label}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/frontend/src/components/landing-v5/galleryMinis.tsx b/frontend/src/components/landing-v5/galleryMinis.tsx
new file mode 100644
index 00000000..40556de0
--- /dev/null
+++ b/frontend/src/components/landing-v5/galleryMinis.tsx
@@ -0,0 +1,32 @@
+/**
+ * The eight bespoke card miniatures in the gallery marquee.
+ *
+ * Mechanically converted from the design component's `<article data-tk>`
+ * blocks rather than retyped. Each is a dense, purely decorative animation
+ * -- scan sweeps, chip swaps, gauge floats, ring draws -- whose exact
+ * geometry and keyframe delays are the entire effect, and each is
+ * aria-hidden with no interactivity. Regenerate from the source rather
+ * than editing by hand; the keyframes themselves live in globals.css.
+ */
+
+import type { ReactNode } from 'react';
+
+export const GALLERY_MINIS: ReactNode[] = [
+  // card 0
+  <><div aria-hidden={'true'} style={{ position: 'relative', height: '166px', borderRadius: '13px', overflow: 'hidden', background: '#FDFCF9', border: '1px solid #EBF1EC' }}><div style={{ position: 'absolute', inset: '0', boxSizing: 'border-box', padding: '11px 15px', display: 'flex', flexDirection: 'column' }}><div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8.5px', letterSpacing: '0.16em', color: '#8B9891' }}>QUESTION 4 OF 8</span><span style={{ position: 'relative', width: '56px', height: '17px' }}><span style={{ position: 'absolute', inset: '0', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '99px', background: 'rgba(200,155,94,0.14)', border: '1px solid rgba(200,155,94,0.5)', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', letterSpacing: '0.1em', color: '#8a6636', animation: 'chipSwapA 9s ease-in-out infinite' }}>MEDIUM</span><span style={{ position: 'absolute', inset: '0', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '99px', background: 'rgba(178,88,85,0.13)', border: '1px solid rgba(178,88,85,0.5)', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', letterSpacing: '0.1em', color: '#9c4b48', animation: 'chipSwapB 9s ease-in-out infinite' }}>HARD</span></span></div><div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', background: '#b25855', flex: '0 0 auto' }}></span><span style={{ fontSize: '11px', fontWeight: '600', color: '#33443B' }}>Eigenvalues</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', color: '#9AA5A0', marginLeft: '2px' }}>MA 242</span></div><p style={{ margin: '6px 0 0', fontFamily: '\'Playfair Display\',serif', fontSize: '12.5px', lineHeight: '1.3', color: '#12201A' }}>If A v = λ v, what does λ tell you about what A does to v?</p><div style={{ marginTop: '7px', display: 'flex', flexDirection: 'column', gap: '4px' }}><span style={{ display: 'flex', gap: '7px', padding: '4px 9px', borderRadius: '7px', border: '1px solid #DCE7DE', background: '#F6F8F4', fontSize: '10px', color: '#61726A' }}><b style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '9px', color: '#9AA5A0', fontWeight: '400' }}>A.</b>The angle A rotates v through</span><span style={{ display: 'flex', gap: '7px', borderRadius: '7px', border: '1px solid #0E9E5A', background: '#E6F2E8', padding: '4px 9px', fontSize: '10px', color: '#0C5638', fontWeight: '600', animation: 'answerTick 9s ease-in-out infinite' }}><b style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '9px', color: '#0E9E5A', fontWeight: '400' }}>B.</b>The factor A scales v by</span></div><div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid #EBF1EC', paddingTop: '6px' }}><span style={{ fontSize: '9px', color: '#8B9891' }}>3 right in a row on this concept</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8.5px', color: '#c89b5e' }}>NEXT ↑ HARDER</span></div></div></div></>,
+  // card 1
+  <><div aria-hidden={'true'} style={{ position: 'relative', height: '166px', borderRadius: '13px', overflow: 'hidden', background: '#E6F2E8', border: '1px solid #EBF1EC' }}><div style={{ position: 'absolute', inset: '0', padding: '13px 15px', display: 'flex', flexDirection: 'column' }}><div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><span style={{ fontSize: '10px', color: '#61726A' }}>Card 7 of 12</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8.5px', letterSpacing: '0.1em', color: '#8B9891' }}>MA 242 · EIGENVALUES</span></div><span style={{ marginTop: '7px', height: '5px', borderRadius: '99px', background: '#E3EBE5', overflow: 'hidden' }}><span style={{ display: 'block', width: '58%', height: '100%', borderRadius: '99px', background: '#0E9E5A', transformOrigin: 'left', animation: 'fillX 11s ease-in-out infinite both' }}></span></span><div style={{ position: 'relative', flex: '1', marginTop: '9px', perspective: '900px' }}><div style={{ position: 'absolute', inset: '0', transformStyle: 'preserve-3d', animation: 'flipLoop 11s cubic-bezier(0.4,0,0.2,1) infinite' }}><div style={{ position: 'absolute', inset: '0', backfaceVisibility: 'hidden', borderRadius: '10px', background: '#FDFCF9', border: '1px solid #DCE7DE', boxShadow: '0 8px 20px rgba(18,32,26,0.07)', padding: '11px 13px', display: 'flex', flexDirection: 'column', gap: '5px', overflow: 'hidden' }}><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.22em', color: '#9AA5A0', flex: '0 0 auto' }}>FRONT</span><span style={{ fontFamily: '\'Playfair Display\',serif', fontSize: '12.5px', fontWeight: '600', color: '#12201A', lineHeight: '1.26', minHeight: 0 }}>What equation gives the eigenvalues of A?</span></div><div style={{ position: 'absolute', inset: '0', backfaceVisibility: 'hidden', transform: 'rotateY(180deg)', borderRadius: '10px', background: '#0C5638', boxShadow: '0 8px 20px rgba(12,86,56,0.24)', padding: '11px 13px', display: 'flex', flexDirection: 'column', gap: '5px', overflow: 'hidden' }}><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.22em', color: '#8FD9A8', flex: '0 0 auto' }}>BACK</span><span style={{ fontFamily: '\'Playfair Display\',serif', fontSize: '12px', fontWeight: '500', color: '#F6F8F4', lineHeight: '1.26', minHeight: 0 }}>det(A − λI) = 0, the λ that makes A − λI collapse.</span></div></div></div><div style={{ marginTop: '9px', display: 'flex', gap: '6px' }}><span style={{ flex: '1', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1px', padding: '5px 0', borderRadius: '7px', border: '1px solid #b2585566', background: '#b2585512' }}><span style={{ fontSize: '9.5px', color: '#33443B', fontWeight: '600' }}>Forgot <b style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', color: '#9AA5A0', fontWeight: '400' }}>1</b></span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', color: '#b25855' }}>10 min</span></span><span style={{ flex: '1', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1px', padding: '5px 0', borderRadius: '7px', border: '1px solid #c89b5e66', background: '#c89b5e12' }}><span style={{ fontSize: '9.5px', color: '#33443B', fontWeight: '600' }}>Hard <b style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', color: '#9AA5A0', fontWeight: '400' }}>2</b></span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', color: '#c89b5e' }}>1 day</span></span><span style={{ flex: '1', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1px', padding: '5px 0', borderRadius: '7px', border: '1px solid #3a7d4e66', background: '#3a7d4e12' }}><span style={{ fontSize: '9.5px', color: '#33443B', fontWeight: '600' }}>Easy <b style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', color: '#9AA5A0', fontWeight: '400' }}>3</b></span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', color: '#3a7d4e' }}>4 days</span></span></div></div></div></>,
+  // card 2
+  <><div aria-hidden={'true'} style={{ position: 'relative', height: '166px', borderRadius: '13px', overflow: 'hidden', background: '#FDFCF9', backgroundImage: 'repeating-linear-gradient(180deg, transparent 0px, transparent 19px, #EBF1EC 19px, #EBF1EC 20px)', border: '1px solid #EBF1EC' }}><div style={{ position: 'absolute', inset: '0', padding: '13px 15px', display: 'flex', flexDirection: 'column' }}><div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><span style={{ fontFamily: '\'Playfair Display\',serif', fontSize: '13px', fontWeight: '600', color: '#12201A' }}>Lecture 7 · Eigenvalues</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.14em', color: '#3a7d4e' }}>SAVED</span></div><div style={{ marginTop: '7px', width: '60%', fontFamily: '\'Playfair Display\',serif', fontSize: '11.5px', lineHeight: '20px', color: '#33443B' }}><div style={{ animation: 'lineReveal 12s ease-in-out 0s infinite both', whiteSpace: 'nowrap', overflow: 'hidden' }}>λ scales v, it never turns it.</div><div style={{ animation: 'lineReveal 12s ease-in-out 0.9s infinite both', whiteSpace: 'nowrap', overflow: 'hidden' }}>Solve <span style={{ position: 'relative', color: '#0C5638', fontWeight: '600' }}>det(A − λI) = 0<span style={{ position: 'absolute', left: '0', right: '0', bottom: '1px', height: '2px', background: '#0E9E5A', transformOrigin: 'left', animation: 'underSweep 12s ease-in-out 1.4s infinite both' }}></span></span> for λ,</div><div style={{ animation: 'lineReveal 12s ease-in-out 1.8s infinite both', whiteSpace: 'nowrap', overflow: 'hidden' }}>then null(A − λI) for the</div><div style={{ animation: 'lineReveal 12s ease-in-out 2.7s infinite both', whiteSpace: 'nowrap', overflow: 'hidden' }}><span style={{ position: 'relative', color: '#0C5638', fontWeight: '600' }}>eigenspace<span style={{ position: 'absolute', left: '0', right: '0', bottom: '1px', height: '2px', background: '#0E9E5A', transformOrigin: 'left', animation: 'underSweep 12s ease-in-out 3.2s infinite both' }}></span></span>.</div></div><div style={{ position: 'absolute', right: '14px', top: '36px', display: 'flex', flexDirection: 'column', gap: '6px', alignItems: 'flex-end' }}><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.16em', color: '#9AA5A0' }}>CONCEPTS EXTRACTED</span><span style={{ animation: 'popHold 12s ease-in-out 2s infinite both', display: 'flex', alignItems: 'center', gap: '5px', padding: '5px 9px', borderRadius: '99px', background: '#F6F8F4', border: '1px solid #DCE7DE', fontSize: '9px', color: '#33443B' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', background: '#b25855', flex: '0 0 auto' }}></span>Eigenvalues</span><span style={{ animation: 'popHold 12s ease-in-out 3.6s infinite both', display: 'flex', alignItems: 'center', gap: '5px', padding: '5px 9px', borderRadius: '99px', background: '#F6F8F4', border: '1px solid #DCE7DE', fontSize: '9px', color: '#33443B' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', background: '#c89b5e', flex: '0 0 auto' }}></span>Determinant</span><span style={{ animation: 'popHold 12s ease-in-out 5.2s infinite both', display: 'flex', alignItems: 'center', gap: '5px', padding: '5px 9px', borderRadius: '99px', background: '#F6F8F4', border: '1px solid #DCE7DE', fontSize: '9px', color: '#33443B' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', background: '#C3CCC6', flex: '0 0 auto' }}></span>Null space</span></div><div style={{ marginTop: 'auto', display: 'flex', gap: '5px' }}><span style={{ padding: '4px 8px', borderRadius: '6px', border: '1px solid #DCE7DE', background: '#FDFCF9', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.06em', color: '#61726A' }}>SUMMARIZE</span><span style={{ padding: '4px 8px', borderRadius: '6px', border: '1px solid #DCE7DE', background: '#FDFCF9', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.06em', color: '#61726A' }}>EXTRACT CONCEPTS</span><span style={{ padding: '4px 8px', borderRadius: '6px', border: '1px solid #DCE7DE', background: '#FDFCF9', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.06em', color: '#61726A' }}>GENERATE QUIZ</span></div></div></div></>,
+  // card 3
+  <><div aria-hidden={'true'} style={{ position: 'relative', height: '166px', borderRadius: '13px', overflow: 'hidden', background: '#FAF8F3', border: '1px solid #EBF1EC' }}><div style={{ position: 'absolute', inset: '0', padding: '13px 15px', display: 'flex', flexDirection: 'column' }}><div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}><span style={{ padding: '4px 9px', borderRadius: '6px', border: '1px solid #DCE7DE', background: '#FDFCF9', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', letterSpacing: '0.08em', color: '#33443B' }}>MA 242</span><span style={{ color: '#C3CCC6', fontSize: '9px' }}>→</span><span style={{ padding: '4px 9px', borderRadius: '6px', border: '1px solid #0E9E5A', background: '#E6F2E8', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', letterSpacing: '0.08em', color: '#0C5638' }}>MIDTERM 2 · OCT 24</span></div><div style={{ marginTop: '9px', flex: '1', borderRadius: '10px', background: '#FDFCF9', border: '1px solid #DCE7DE', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: '7px', overflow: 'hidden', boxShadow: '0 8px 20px rgba(18,32,26,0.05)' }}><div style={{ animation: 'popHold 10s ease-in-out 0.6s infinite both', display: 'flex', alignItems: 'flex-start', gap: '7px' }}><span style={{ marginTop: '4px' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', background: '#b25855', flex: '0 0 auto' }}></span></span><span style={{ display: 'flex', flexDirection: 'column' }}><span style={{ fontSize: '10.5px', fontWeight: '600', color: '#12201A' }}>Eigenvalues & eigenvectors</span><span style={{ fontSize: '9px', fontStyle: 'italic', color: '#8B9891' }}>You missed 4 of 6 here</span></span></div><div style={{ animation: 'popHold 10s ease-in-out 2.1s infinite both', display: 'flex', alignItems: 'flex-start', gap: '7px' }}><span style={{ marginTop: '4px' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', background: '#c89b5e', flex: '0 0 auto' }}></span></span><span style={{ display: 'flex', flexDirection: 'column' }}><span style={{ fontSize: '10.5px', fontWeight: '600', color: '#12201A' }}>Determinants</span><span style={{ fontSize: '9px', fontStyle: 'italic', color: '#8B9891' }}>Shaky on 3×3 expansion</span></span></div><div style={{ animation: 'popHold 10s ease-in-out 3.6s infinite both', display: 'flex', alignItems: 'flex-start', gap: '7px' }}><span style={{ marginTop: '4px' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', background: '#3a7d4e', flex: '0 0 auto' }}></span></span><span style={{ display: 'flex', flexDirection: 'column' }}><span style={{ fontSize: '10.5px', fontWeight: '600', color: '#12201A' }}>Vector spaces</span><span style={{ fontSize: '9px', fontStyle: 'italic', color: '#8B9891' }}>Solid, light review</span></span></div></div><div style={{ marginTop: '7px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><span style={{ fontSize: '9px', color: '#8B9891' }}>Built from 11 library docs</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', letterSpacing: '0.1em', color: '#0C5638' }}>REGENERATE</span></div></div></div></>,
+  // card 4
+  <><div aria-hidden={'true'} style={{ position: 'relative', height: '166px', borderRadius: '13px', overflow: 'hidden', background: '#E6F2E8', border: '1px solid #EBF1EC' }}><div style={{ position: 'absolute', inset: '0', padding: '12px 15px', display: 'flex', flexDirection: 'column' }}><div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><span style={{ fontSize: '10px', fontWeight: '600', color: '#12201A' }}>MA 242 Study Room</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.14em', color: '#8B9891' }}>CODE · 7QK2</span></div><div style={{ position: 'relative', flex: '1', marginTop: '4px' }}><svg width={'100%'} height={'100%'} viewBox={'0 0 330 92'} preserveAspectRatio={'xMidYMid meet'} style={{ position: 'absolute', inset: '0' }}><line x1={'46'} y1={'58'} x2={'86'} y2={'26'} stroke={'rgba(12,86,56,0.22)'}></line><line x1={'86'} y1={'26'} x2={'126'} y2={'54'} stroke={'rgba(12,86,56,0.22)'}></line><line x1={'46'} y1={'58'} x2={'84'} y2={'80'} stroke={'rgba(12,86,56,0.16)'}></line><circle cx={'46'} cy={'58'} r={'11'} fill={'none'} stroke={'#34d399'} strokeWidth={'2'} opacity={'0'} style={{ animation: 'popHold 10s ease-in-out 1.2s infinite both' }}></circle><circle cx={'86'} cy={'26'} r={'10'} fill={'none'} stroke={'#38bdf8'} strokeWidth={'2'} opacity={'0'} style={{ animation: 'popHold 10s ease-in-out 1.9s infinite both' }}></circle><circle cx={'126'} cy={'54'} r={'10'} fill={'none'} stroke={'#fb923c'} strokeWidth={'2'} opacity={'0'} style={{ animation: 'popHold 10s ease-in-out 2.6s infinite both' }}></circle><circle cx={'84'} cy={'80'} r={'9'} fill={'none'} stroke={'#f87171'} strokeWidth={'2'} opacity={'0'} style={{ animation: 'popHold 10s ease-in-out 3.3s infinite both' }}></circle><circle cx={'46'} cy={'58'} r={'6.5'} fill={'#3a7d4e'}></circle><circle cx={'86'} cy={'26'} r={'5.5'} fill={'#3a7d4e'}></circle><circle cx={'126'} cy={'54'} r={'5.5'} fill={'#C3CCC6'}></circle><circle cx={'84'} cy={'80'} r={'4.5'} fill={'#b25855'}></circle><line x1={'126'} y1={'54'} x2={'196'} y2={'48'} stroke={'rgba(14,158,90,0.45)'} strokeWidth={'1.3'} strokeDasharray={'4 5'}></line><line x1={'196'} y1={'48'} x2={'238'} y2={'22'} stroke={'rgba(12,86,56,0.22)'}></line><line x1={'238'} y1={'22'} x2={'280'} y2={'60'} stroke={'rgba(12,86,56,0.22)'}></line><line x1={'196'} y1={'48'} x2={'242'} y2={'82'} stroke={'rgba(12,86,56,0.16)'}></line><circle cx={'196'} cy={'48'} r={'6'} fill={'#c89b5e'}></circle><circle cx={'238'} cy={'22'} r={'5'} fill={'#3a7d4e'}></circle><circle cx={'280'} cy={'60'} r={'6'} fill={'#3a7d4e'}></circle><circle cx={'242'} cy={'82'} r={'4.5'} fill={'#C3CCC6'}></circle></svg><div style={{ position: 'absolute', left: '44%', top: '6%', display: 'flex', alignItems: 'center', animation: 'cursorMini 9s ease-in-out infinite' }}><svg width={'12'} height={'12'} viewBox={'0 0 24 24'} fill={'#0E9E5A'}><path d={'M4 2l16 8-7 2-2 7z'}></path></svg><span style={{ marginLeft: '6px', padding: '2px 7px', borderRadius: '99px', background: '#0E9E5A', color: '#FDFCF9', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px' }}>maya</span></div></div><div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid #EBF1EC', paddingTop: '6px' }}><div style={{ display: 'flex', gap: '8px' }}><span style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '8px', color: '#8B9891' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', border: '1.5px solid #38bdf8' }}></span>You</span><span style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '8px', color: '#8B9891' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', border: '1.5px solid #fb923c' }}></span>Them</span><span style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '8px', color: '#8B9891' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', border: '1.5px solid #34d399' }}></span>Both</span><span style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '8px', color: '#8B9891' }}><span style={{ width: '6px', height: '6px', borderRadius: '99px', border: '1.5px solid #f87171' }}></span>Neither</span></div><span style={{ display: 'flex', alignItems: 'center', gap: '3px', fontSize: '8.5px', color: '#8B9891' }}>maya is typing
+      <span style={{ width: '3px', height: '3px', borderRadius: '99px', background: '#8B9891', animation: 'typingDot 1.2s ease-in-out infinite' }}></span><span style={{ width: '3px', height: '3px', borderRadius: '99px', background: '#8B9891', animation: 'typingDot 1.2s ease-in-out 0.15s infinite' }}></span><span style={{ width: '3px', height: '3px', borderRadius: '99px', background: '#8B9891', animation: 'typingDot 1.2s ease-in-out 0.3s infinite' }}></span></span></div></div></div></>,
+  // card 5
+  <><div aria-hidden={'true'} style={{ position: 'relative', height: '166px', borderRadius: '13px', overflow: 'hidden', background: '#FDFCF9', border: '1px solid #EBF1EC' }}><div style={{ position: 'absolute', inset: '0', padding: '13px 15px', display: 'flex', flexDirection: 'column' }}><div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}><div style={{ display: 'flex', alignItems: 'baseline', gap: '8px' }}><span style={{ fontFamily: '\'Playfair Display\',serif', fontSize: '34px', fontWeight: '600', color: '#12201A', lineHeight: '1' }}>91.2</span><span style={{ padding: '3px 8px', borderRadius: '6px', background: '#E6F2E8', border: '1px solid #0E9E5A', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '9px', letterSpacing: '0.1em', color: '#0C5638' }}>A−</span></div><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', letterSpacing: '0.14em', color: '#8B9891' }}>MA 242 · SPRING 2026</span></div><div style={{ marginTop: '11px', display: 'flex', flexDirection: 'column', gap: '8px' }}><div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><span style={{ width: '52px', fontSize: '9.5px', color: '#33443B' }}>Psets</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', color: '#9AA5A0', width: '24px' }}>40%</span><span style={{ flex: '1', height: '6px', borderRadius: '99px', background: '#E3EBE5', overflow: 'hidden' }}><span style={{ display: 'block', width: '94%', height: '100%', background: '#0E9E5A', transformOrigin: 'left', animation: 'fillX 10s ease-in-out 0.3s infinite both' }}></span></span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8.5px', color: '#0C5638', width: '26px', textAlign: 'right' }}>94</span></div><div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><span style={{ width: '52px', fontSize: '9.5px', color: '#33443B' }}>Midterms</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', color: '#9AA5A0', width: '24px' }}>35%</span><span style={{ flex: '1', height: '6px', borderRadius: '99px', background: '#E3EBE5', overflow: 'hidden' }}><span style={{ display: 'block', width: '88%', height: '100%', background: '#0E9E5A', transformOrigin: 'left', animation: 'fillX 10s ease-in-out 0.8s infinite both' }}></span></span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8.5px', color: '#0C5638', width: '26px', textAlign: 'right' }}>88</span></div><div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><span style={{ width: '52px', fontSize: '9.5px', color: '#33443B' }}>Final</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', color: '#9AA5A0', width: '24px' }}>25%</span><span style={{ flex: '1', height: '6px', borderRadius: '99px', background: '#E3EBE5', overflow: 'hidden' }}><span style={{ display: 'block', width: '0%', height: '100%', background: 'transparent', transformOrigin: 'left', animation: 'fillX 10s ease-in-out 1.3s infinite both' }}></span></span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8.5px', color: '#C3CCC6', width: '26px', textAlign: 'right' }}>—</span></div></div><div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid #EBF1EC', paddingTop: '7px' }}><span style={{ fontSize: '9px', color: '#8B9891' }}>Weights read from your syllabus</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', letterSpacing: '0.1em', color: '#0C5638' }}>GRADESCOPE · SYNCED</span></div></div></div></>,
+  // card 6
+  <><div aria-hidden={'true'} style={{ position: 'relative', height: '166px', borderRadius: '13px', overflow: 'hidden', background: '#FDFCF9', border: '1px solid #EBF1EC' }}><div style={{ position: 'absolute', inset: '0', padding: '13px 15px', display: 'flex', flexDirection: 'column' }}><div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8.5px', letterSpacing: '0.18em', color: '#61726A' }}>OCTOBER · MONTH</span><span style={{ animation: 'popHold 11s ease-in-out 6s infinite both', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.1em', color: '#0C5638', background: '#E6F2E8', border: '1px solid #DCE7DE', borderRadius: '99px', padding: '3px 8px' }}>6 FOUND IN MA242_SYLLABUS.PDF</span></div><div style={{ marginTop: '9px', display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: '4px' }}><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4', position: 'relative' }}><span style={{ position: 'absolute', inset: '2px', borderRadius: '2px', background: '#0E9E5A', animation: 'popHold 11s ease-in-out 0.8s infinite both' }}></span></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4', position: 'relative' }}><span style={{ position: 'absolute', inset: '2px', borderRadius: '2px', background: '#4FA574', animation: 'popHold 11s ease-in-out 1.6s infinite both' }}></span></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4', position: 'relative' }}><span style={{ position: 'absolute', inset: '2px', borderRadius: '2px', background: '#b25855', animation: 'popHold 11s ease-in-out 2.4s infinite both' }}></span></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4', position: 'relative' }}><span style={{ position: 'absolute', inset: '2px', borderRadius: '2px', background: '#8FBFA3', animation: 'popHold 11s ease-in-out 3.2s infinite both' }}></span></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4', position: 'relative' }}><span style={{ position: 'absolute', inset: '2px', borderRadius: '2px', background: '#0E9E5A', animation: 'popHold 11s ease-in-out 4.0s infinite both' }}></span></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4', position: 'relative' }}><span style={{ position: 'absolute', inset: '2px', borderRadius: '2px', background: '#c89b5e', animation: 'popHold 11s ease-in-out 4.8s infinite both' }}></span></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span><span style={{ height: '17px', borderRadius: '4px', background: '#F6F8F4' }}></span></div><div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid #EBF1EC', paddingTop: '7px' }}><div style={{ display: 'flex', gap: '7px' }}><span style={{ display: 'flex', alignItems: 'center', gap: '3px', fontSize: '8px', color: '#8B9891' }}><span style={{ width: '6px', height: '6px', borderRadius: '2px', background: '#b25855' }}></span>Exam</span><span style={{ display: 'flex', alignItems: 'center', gap: '3px', fontSize: '8px', color: '#8B9891' }}><span style={{ width: '6px', height: '6px', borderRadius: '2px', background: '#0E9E5A' }}></span>Pset</span><span style={{ display: 'flex', alignItems: 'center', gap: '3px', fontSize: '8px', color: '#8B9891' }}><span style={{ width: '6px', height: '6px', borderRadius: '2px', background: '#4FA574' }}></span>Quiz</span><span style={{ display: 'flex', alignItems: 'center', gap: '3px', fontSize: '8px', color: '#8B9891' }}><span style={{ width: '6px', height: '6px', borderRadius: '2px', background: '#c89b5e' }}></span>Project</span></div><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', letterSpacing: '0.1em', color: '#0C5638' }}>SYNCED · 6</span></div></div></div></>,
+  // card 7
+  <><div aria-hidden={'true'} style={{ position: 'relative', height: '166px', borderRadius: '13px', overflow: 'hidden', background: '#FDFCF9', border: '1px solid #EBF1EC' }}><div style={{ position: 'absolute', inset: '0', boxSizing: 'border-box', padding: '11px 13px', display: 'flex', flexDirection: 'column', gap: '5px' }}><div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8.5px', letterSpacing: '0.2em', color: '#8B9891' }}>TUTOR</span><span style={{ fontFamily: '\'JetBrains Mono\',monospace', fontSize: '8px', color: '#9AA5A0' }}>SOCRATIC · EIGENVALUES</span></div><span style={{ alignSelf: 'flex-end', maxWidth: '78%', padding: '6px 10px', borderRadius: '12px 12px 3px 12px', background: '#0C5638', color: '#E6F2E8', fontSize: '9.5px', lineHeight: '1.5' }}>{"I don't get why an eigenvalue is allowed to be negative."}</span><span style={{ alignSelf: 'flex-start', display: 'flex', gap: '5px', maxWidth: '88%', animation: 'popHold 10s ease-in-out 0.9s infinite both' }}><span style={{ width: '16px', height: '16px', flex: '0 0 auto', borderRadius: '99px', background: '#E6F2E8', border: '1px solid #C3D8B3', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><svg viewBox={'0 0 16 16'} width={'9'} height={'9'} fill={'#0C5638'}><path d={'M8 0.9c.55 3.35 1.8 4.6 5.15 5.15C9.8 6.6 8.55 7.85 8 11.2 7.45 7.85 6.2 6.6 2.85 6.05 6.2 5.5 7.45 4.25 8 .9z'}></path></svg></span><span style={{ padding: '6px 10px', borderRadius: '12px 12px 12px 3px', background: '#F6F8F4', border: '1px solid #E3EBE5', fontSize: '9.5px', lineHeight: '1.5', color: '#12201A' }}>A negative λ flips v end-for-end while it scales it. Try A = [[−2,0],[0,1]] on v = (1,0). What comes back out?</span></span><span style={{ alignSelf: 'flex-end', maxWidth: '74%', padding: '6px 10px', borderRadius: '12px 12px 3px 12px', background: '#0C5638', color: '#E6F2E8', fontSize: '9.5px', lineHeight: '1.5', animation: 'popHold 10s ease-in-out 2.6s infinite both' }}>it points backwards. so λ = −2 flips and doubles it?</span><div style={{ marginTop: 'auto', display: 'flex', gap: '4px' }}><span style={{ padding: '3px 8px', borderRadius: '5px', border: '1px solid #E3E0D5', background: '#FDFCF9', fontSize: '8px', color: '#61726A' }}>Hint</span><span style={{ padding: '3px 8px', borderRadius: '5px', border: '1px solid #E3E0D5', background: '#FDFCF9', fontSize: '8px', color: '#61726A' }}>{"I'm confused"}</span><span style={{ padding: '3px 8px', borderRadius: '5px', border: '1px solid #E3E0D5', background: '#FDFCF9', fontSize: '8px', color: '#61726A' }}>Skip</span><span style={{ marginLeft: 'auto', fontFamily: '\'JetBrains Mono\',monospace', fontSize: '7.5px', letterSpacing: '0.12em', color: '#0C5638', alignSelf: 'center' }}>NEVER THE ANSWER</span></div></div></div></>,
+];
diff --git a/frontend/src/components/landing-v5/lab/CalendarDemo.tsx b/frontend/src/components/landing-v5/lab/CalendarDemo.tsx
new file mode 100644
index 00000000..b1b484f7
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/CalendarDemo.tsx
@@ -0,0 +1,153 @@
+'use client';
+
+/**
+ * Feature lab · calendar.
+ *
+ * Ported from the `isCal` branch of `FeatureLab.dc.html`. October 2026 with
+ * three existing items; upload the syllabus and six more appear, dated.
+ *
+ * That upload is the demo's whole argument — the month goes from sparse to
+ * full in one action, which is what "paste a syllabus, get a semester" means.
+ *
+ * The leading blanks come from the real weekday of 1 Oct 2026, computed once
+ * from a fixed date rather than `new Date()`, so the grid never shifts.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { MONO } from './LabShell';
+import { CAL_BASE, CAL_SYLLABUS, TYPE } from './labData';
+
+type View = 'month' | 'week' | 'day';
+const VIEWS: { key: View; label: string }[] = [
+  { key: 'month', label: 'Month' }, { key: 'week', label: 'Week' }, { key: 'day', label: 'Day' },
+];
+const DOWS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+/** Weekday 1 Oct 2026 falls on; month index 9 is October. */
+const LEAD_BLANKS = new Date(2026, 9, 1).getDay();
+
+export function CalendarDemo() {
+  const [view, setView] = useState<View>('month');
+  const [day, setDay] = useState(24);
+  const [uploaded, setUploaded] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+
+  const items = [...CAL_BASE, ...(uploaded ? CAL_SYLLABUS : [])];
+
+  const cells: { day: number | ''; chips: typeof items; blank: boolean }[] = [];
+  for (let i = 0; i < LEAD_BLANKS; i++) cells.push({ day: '', chips: [], blank: true });
+  for (let d = 1; d <= 31; d++) cells.push({ day: d, chips: items.filter((a) => a.day === d), blank: false });
+
+  const shown = view === 'month'
+    ? cells
+    : cells.filter((c) => !c.blank && (view === 'week' ? (c.day as number) >= 19 && (c.day as number) <= 25 : c.day === day));
+
+  const sideItems = items.filter((a) => a.day === day);
+
+  const upload = () => {
+    if (uploaded || uploading) return;
+    setUploading(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => { setUploading(false); setUploaded(true); }, 1100);
+  };
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 250px', minHeight: '100%', boxSizing: 'border-box' }}>
+      <div style={{ padding: '18px 22px', display: 'flex', flexDirection: 'column', gap: 12, borderRight: '1px solid #ECE9DE' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{ fontFamily: "'Playfair Display',serif", fontSize: 20, fontWeight: 600 }}>October 2026</span>
+          <div style={{ marginLeft: 'auto', display: 'flex', gap: 4, padding: 3, borderRadius: 9, background: '#F6F8F4', border: '1px solid #E3EBE5' }}>
+            {VIEWS.map((v) => {
+              const on = view === v.key;
+              return (
+                <button
+                  key={v.key}
+                  onClick={() => setView(v.key)}
+                  type="button"
+                  aria-pressed={on}
+                  style={{ padding: '6px 13px', borderRadius: 7, border: 'none', fontFamily: "'DM Sans',sans-serif", fontSize: 12, cursor: 'pointer', transition: 'all 180ms', background: on ? '#12201A' : 'transparent', color: on ? '#FDFCF9' : '#61726A', fontWeight: on ? 600 : 400 }}
+                >
+                  {v.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 5 }}>
+          {DOWS.map((d, i) => (
+            <span key={i} style={{ ...MONO, fontSize: 8.5, letterSpacing: '0.12em', color: '#9AA5A0', textAlign: 'center' }}>{d}</span>
+          ))}
+        </div>
+
+        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 5, alignContent: 'start' }}>
+          {shown.map((c, i) => {
+            const selected = c.day === day;
+            return (
+              <button
+                key={i}
+                onClick={() => { if (!c.blank) setDay(c.day as number); }}
+                type="button"
+                style={{
+                  position: 'relative', minHeight: 44, borderRadius: 8, padding: 5,
+                  display: 'flex', flexDirection: 'column', gap: 3, alignItems: 'flex-start',
+                  fontFamily: "'DM Sans',sans-serif", transition: 'all 160ms',
+                  ...(c.blank
+                    ? { background: 'transparent', border: 'none', cursor: 'default' }
+                    : {
+                        border: `1px solid ${selected ? '#0E9E5A' : '#EBF1EC'}`,
+                        background: selected ? '#E6F2E8' : '#FDFCF9',
+                        cursor: 'pointer',
+                      }),
+                }}
+              >
+                <span style={{ ...MONO, fontSize: 9, color: selected ? '#0C5638' : '#9AA5A0' }}>{c.day}</span>
+                {c.chips.map((ch, j) => (
+                  <span key={j} style={{ width: '100%', height: 5, borderRadius: 2, animation: 'labIn 300ms ease both', background: TYPE[ch.type as keyof typeof TYPE] }} />
+                ))}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div style={{ padding: '18px 16px', background: '#F6F8F4', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.18em', color: '#8B9891' }}>OCTOBER {day}</span>
+
+        {sideItems.map((a, i) => (
+          <div key={i} style={{ padding: '10px 12px', borderRadius: 10, background: '#FDFCF9', border: '1px solid #DCE7DE', display: 'flex', flexDirection: 'column', gap: 3, animation: 'labIn 280ms ease both' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
+              <span style={{ width: 8, height: 8, borderRadius: 2, flex: '0 0 auto', background: TYPE[a.type as keyof typeof TYPE] }} />
+              <span style={{ fontSize: 12.5, fontWeight: 600, color: '#12201A' }}>{a.title}</span>
+            </div>
+            <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.08em', color: '#8B9891' }}>
+              {a.course} · {a.type.toUpperCase()}
+            </span>
+          </div>
+        ))}
+
+        {sideItems.length === 0 && (
+          <span style={{ fontSize: 12, color: '#9AA5A0' }}>Nothing due. Click another day.</span>
+        )}
+
+        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <button
+            onClick={upload}
+            type="button"
+            className="ld-labupload"
+            style={{ padding: '10px 12px', borderRadius: 9, border: '1px dashed #0E9E5A', background: '#E6F2E8', ...MONO, fontSize: 9.5, letterSpacing: '0.1em', color: '#0C5638', cursor: 'pointer' }}
+          >
+            {uploading ? 'READING SYLLABUS…' : uploaded ? 'SYLLABUS APPLIED' : '+ UPLOAD MA242_SYLLABUS.PDF'}
+          </button>
+          <span style={{ fontSize: 11, lineHeight: 1.6, color: '#9AA5A0' }}>
+            {uploaded
+              ? '6 assignments extracted and synced to Google Calendar.'
+              : 'One upload fills the month — every pset, quiz, and exam, dated.'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/CardsDemo.tsx b/frontend/src/components/landing-v5/lab/CardsDemo.tsx
new file mode 100644
index 00000000..b8f9593e
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/CardsDemo.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+/**
+ * Feature lab · spaced repetition.
+ *
+ * Ported from the `isCards` branch of `FeatureLab.dc.html`. Click the card
+ * (or press space) to flip it, then rate 1/2/3 and the interval follows:
+ * 10 minutes, 1 day, 4 days.
+ *
+ * The keyboard shortcuts are part of the demo, not an accessibility
+ * afterthought — the real review surface is driven the same way, and the hint
+ * line says so.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { LAB_TIER, MONO } from './LabShell';
+import { DECK, RATE_DUE, RATE_LABEL, RATE_TONE } from './labData';
+
+type RateKey = '1' | '2' | '3';
+const RATES: RateKey[] = ['1', '2', '3'];
+
+export function CardsDemo() {
+  const [idx, setIdx] = useState(0);
+  const [flipped, setFlipped] = useState(false);
+  const [log, setLog] = useState<{ q: string; key: RateKey }[]>([]);
+
+  const done = idx >= DECK.length;
+  const card = DECK[Math.min(idx, DECK.length - 1)];
+
+  // Plain reads from the render closure, with the key listener re-bound on
+  // the values it depends on. Deciding inside a state updater (and firing a
+  // timeout from one) double-runs under StrictMode and drops the advance.
+  const flip = useCallback(() => {
+    if (idx < DECK.length) setFlipped((f) => !f);
+  }, [idx]);
+
+  const rate = useCallback((key: RateKey) => {
+    if (idx >= DECK.length || !flipped) return;
+    setLog((l) => [...l, { q: DECK[idx].q, key }]);
+    setFlipped(false);
+    // the card turns back before the next one arrives, so it reads as a deal
+    const t = setTimeout(() => setIdx((i) => i + 1), 300);
+    return () => clearTimeout(t);
+  }, [idx, flipped]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === ' ') { e.preventDefault(); flip(); }
+      else if (RATES.includes(e.key as RateKey)) rate(e.key as RateKey);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [flip, rate]);
+
+  return (
+    <div style={{ padding: '18px 26px 20px', display: 'flex', flexDirection: 'column', gap: 12, height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
+          <span style={{ width: 8, height: 8, borderRadius: 99, background: LAB_TIER.struggling }} />
+          <span style={{ fontSize: 14, fontWeight: 600, color: '#12201A' }}>Eigenvalues</span>
+          <span style={{ padding: '3px 8px', borderRadius: 6, background: '#F6F8F4', border: '1px solid #E3EBE5', ...MONO, fontSize: 9, letterSpacing: '0.1em', color: '#61726A' }}>MA 242</span>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+          <span style={{ ...MONO, fontSize: 9.5, letterSpacing: '0.12em', color: '#8B9891' }}>
+            DUE TODAY · {DECK.length - Math.min(idx, DECK.length)} LEFT
+          </span>
+          <span style={{ fontSize: 12.5, color: '#61726A' }}>
+            Card {done ? DECK.length : idx + 1} of {DECK.length}
+          </span>
+        </div>
+      </div>
+
+      <span style={{ flex: '0 0 auto', height: 5, borderRadius: 99, background: '#E3EBE5', overflow: 'hidden' }}>
+        <span style={{ display: 'block', height: '100%', borderRadius: 99, background: '#0E9E5A', transition: 'width 400ms cubic-bezier(0.22,1,0.36,1)', width: `${Math.round((Math.min(idx, DECK.length) / DECK.length) * 100)}%` }} />
+      </span>
+
+      {done ? (
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14, animation: 'labIn 320ms ease both' }}>
+          <span style={{ fontFamily: "'Playfair Display',serif", fontSize: 30, fontWeight: 600 }}>Deck complete</span>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 'min(340px,100%)' }}>
+            {log.map((l, i) => (
+              <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '9px 13px', borderRadius: 9, background: '#F6F8F4', border: '1px solid #E3EBE5' }}>
+                <span style={{ fontSize: 12.5, color: '#33443B', maxWidth: '60%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.q}</span>
+                <span style={{ ...MONO, fontSize: 10.5, color: RATE_TONE[l.key] }}>
+                  {RATE_LABEL[l.key].toUpperCase()} · {RATE_DUE[l.key]}
+                </span>
+              </div>
+            ))}
+          </div>
+          <button
+            onClick={() => { setIdx(0); setFlipped(false); setLog([]); }}
+            type="button"
+            style={{ marginTop: 4, padding: '10px 22px', borderRadius: 10, border: 'none', background: '#0C5638', color: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 13, fontWeight: 600, cursor: 'pointer' }}
+          >
+            Study again
+          </button>
+        </div>
+      ) : (
+        <>
+          <div onClick={flip} style={{ position: 'relative', flex: '1 1 auto', minHeight: 200, cursor: 'pointer' }}>
+            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', perspective: 1600 }}>
+              <div style={{ position: 'relative', width: '100%', maxWidth: 600, aspectRatio: '16 / 9', maxHeight: '100%', transformStyle: 'preserve-3d', transition: 'transform 560ms cubic-bezier(0.4,0,0.2,1)', transform: `rotateY(${flipped ? 180 : 0}deg)` }}>
+                <div style={{ position: 'absolute', inset: 0, backfaceVisibility: 'hidden', borderRadius: 18, background: '#FDFCF9', border: '1px solid #E3E0D5', boxShadow: '0 18px 40px -18px rgba(18,32,26,0.28)', padding: '30px 34px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', gap: 14 }}>
+                  <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.26em', color: '#9AA5A0' }}>FRONT</span>
+                  <span style={{ fontFamily: "'Playfair Display',serif", fontSize: 'clamp(20px,2.3vw,27px)', fontWeight: 600, lineHeight: 1.3, color: '#12201A' }}>{card.q}</span>
+                  <span style={{ position: 'absolute', bottom: 16, left: 0, right: 0, fontSize: 11.5, color: '#B4BEB8' }}>click to reveal</span>
+                </div>
+                <div style={{ position: 'absolute', inset: 0, backfaceVisibility: 'hidden', transform: 'rotateY(180deg)', borderRadius: 18, background: '#0C5638', border: '1px solid #0C5638', boxShadow: '0 18px 40px -18px rgba(12,86,56,0.5)', padding: '30px 34px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', gap: 14 }}>
+                  <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.26em', color: '#8FD9A8' }}>BACK</span>
+                  <span style={{ fontFamily: "'Playfair Display',serif", fontSize: 'clamp(18px,2.1vw,24px)', fontWeight: 500, lineHeight: 1.4, color: '#F6F8F4' }}>{card.a}</span>
+                  <span style={{ position: 'absolute', bottom: 16, left: 0, right: 0, ...MONO, fontSize: 9, letterSpacing: '0.14em', color: 'rgba(230,242,232,0.5)' }}>HOW DID THAT GO?</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
+            <div style={{ display: 'flex', gap: 10, width: '100%', maxWidth: 560, transition: 'opacity 250ms', opacity: flipped ? 1 : 0.35, pointerEvents: flipped ? 'auto' : 'none' }}>
+              {RATES.map((k) => (
+                <button
+                  key={k}
+                  onClick={() => rate(k)}
+                  type="button"
+                  className="ld-labrate"
+                  style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, padding: '11px 0', borderRadius: 11, fontFamily: "'DM Sans',sans-serif", cursor: 'pointer', transition: 'all 180ms', border: `1px solid ${RATE_TONE[k]}66`, background: `${RATE_TONE[k]}12` }}
+                >
+                  <span style={{ fontSize: 13.5, fontWeight: 600, color: RATE_TONE[k] }}>
+                    {RATE_LABEL[k]} <b style={{ ...MONO, fontSize: 10, color: '#9AA5A0', fontWeight: 400 }}>{k}</b>
+                  </span>
+                  <span style={{ ...MONO, fontSize: 10, color: `${RATE_TONE[k]}cc` }}>next in {RATE_DUE[k]}</span>
+                </button>
+              ))}
+            </div>
+            <span style={{ fontSize: 11.5, color: '#9AA5A0' }}>
+              {flipped ? 'Rate it: 1 Forgot, 2 Hard, 3 Easy' : 'Click the card or press space to reveal'}
+            </span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/GradesDemo.tsx b/frontend/src/components/landing-v5/lab/GradesDemo.tsx
new file mode 100644
index 00000000..1ab743c2
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/GradesDemo.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+/**
+ * Feature lab · gradebook.
+ *
+ * Ported from the `isGrades` branch of `FeatureLab.dc.html`. Every score is
+ * editable and the weighted grade and letter move as you type.
+ *
+ * The weighting only counts categories that have a score. `Final` carries 25%
+ * but has no rows yet, so it is excluded from the denominator rather than
+ * treated as a zero — otherwise the demo would open on an F.
+ */
+
+import { useState } from 'react';
+import { MONO } from './LabShell';
+import { GB_CATS, GB_ROWS, LETTERS } from './labData';
+
+export function GradesDemo() {
+  const [earned, setEarned] = useState<string[]>(GB_ROWS.map((r) => String(r.earned)));
+
+  // ── weighted grade ──
+  const byCat: Record<string, { e: number; p: number }> = {};
+  GB_ROWS.forEach((r, i) => {
+    const raw = parseFloat(earned[i]);
+    const v = isNaN(raw) ? 0 : Math.max(0, Math.min(raw, r.possible));
+    const b = (byCat[r.cat] ||= { e: 0, p: 0 });
+    b.e += v;
+    b.p += r.possible;
+  });
+
+  let num = 0;
+  let den = 0;
+  const cats = GB_CATS.map((c) => {
+    const b = byCat[c.key];
+    const pct = b && b.p ? (b.e / b.p) * 100 : null;
+    if (pct !== null) { num += pct * c.weight; den += c.weight; }
+    return { name: c.name, weight: `${Math.round(c.weight * 100)}%`, pct };
+  });
+  const grade = den ? num / den : 0;
+  // bands run high to low, so the first match is the letter
+  const letter = (LETTERS.find(([min]) => grade >= min) ?? LETTERS[LETTERS.length - 1])[1];
+
+  return (
+    <div style={{ padding: '20px 26px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: '100%', boxSizing: 'border-box' }}>
+      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
+          <span style={{ fontFamily: "'Playfair Display',serif", fontSize: 46, fontWeight: 600, lineHeight: 1, transition: 'color 300ms' }}>
+            {grade.toFixed(1)}
+          </span>
+          <span style={{ padding: '5px 12px', borderRadius: 8, background: '#E6F2E8', border: '1px solid #0E9E5A', ...MONO, fontSize: 13, letterSpacing: '0.1em', color: '#0C5638' }}>
+            {letter}
+          </span>
+        </div>
+        <span style={{ ...MONO, fontSize: 9.5, letterSpacing: '0.14em', color: '#8B9891' }}>MA 242 · SPRING 2026</span>
+      </div>
+
+      <span style={{ fontSize: 12, color: '#8B9891' }}>
+        Type a score to see the grade move — weights came from your syllabus.
+      </span>
+
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8, overflow: 'auto' }}>
+        {GB_ROWS.map((r, i) => {
+          const raw = parseFloat(earned[i]);
+          const pct = isNaN(raw) ? null : Math.round((raw / r.possible) * 100);
+          const pctColor = pct === null ? '#C3CCC6' : pct >= 90 ? '#0C5638' : pct >= 80 ? '#c89b5e' : '#b25855';
+          return (
+            <div key={r.title} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', borderRadius: 11, border: '1px solid #E8E5DA', background: '#FDFCF9' }}>
+              <span style={{ width: 9, height: 9, borderRadius: 3, flex: '0 0 auto', background: r.cat === 'PSETS' ? '#0E9E5A' : '#c89b5e' }} />
+              <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+                <span style={{ fontSize: 13, fontWeight: 600, color: '#12201A', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.title}</span>
+                <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.1em', color: '#8B9891' }}>{r.cat}</span>
+              </div>
+              <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
+                <input
+                  value={earned[i]}
+                  onChange={(e) => {
+                    const val = e.target.value.replace(/[^0-9.]/g, '');
+                    setEarned((arr) => arr.map((v, j) => (j === i ? val : v)));
+                  }}
+                  inputMode="decimal"
+                  aria-label={`Points earned, ${r.title}`}
+                  style={{ width: 56, padding: '7px 8px', borderRadius: 8, border: '1px solid #DCE7DE', background: '#F6F8F4', ...MONO, fontSize: 12.5, textAlign: 'right', color: '#12201A', outline: 'none' }}
+                />
+                <span style={{ ...MONO, fontSize: 12, color: '#9AA5A0' }}>/ {r.possible}</span>
+                <span style={{ width: 44, textAlign: 'right', ...MONO, fontSize: 12, color: pctColor }}>
+                  {pct === null ? '—' : `${pct}%`}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 7, borderTop: '1px solid #ECE9DE', paddingTop: 12 }}>
+        {cats.map((c) => (
+          <div key={c.name} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <span style={{ width: 74, fontSize: 12, color: '#33443B' }}>{c.name}</span>
+            <span style={{ ...MONO, fontSize: 10, color: '#9AA5A0', width: 30 }}>{c.weight}</span>
+            <span style={{ flex: 1, height: 7, borderRadius: 99, background: '#E3EBE5', overflow: 'hidden' }}>
+              <span style={{ display: 'block', height: '100%', background: '#0E9E5A', transition: 'width 400ms cubic-bezier(0.22,1,0.36,1)', width: `${c.pct === null ? 0 : Math.max(0, Math.min(100, c.pct))}%` }} />
+            </span>
+            <span style={{ width: 52, textAlign: 'right', ...MONO, fontSize: 11, color: '#0C5638' }}>
+              {c.pct === null ? 'not yet' : `${c.pct.toFixed(1)}%`}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/GuideDemo.tsx b/frontend/src/components/landing-v5/lab/GuideDemo.tsx
new file mode 100644
index 00000000..f9b43bdd
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/GuideDemo.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+/**
+ * Feature lab · study guides.
+ *
+ * Ported from the `isGuide` branch of `FeatureLab.dc.html`. Pick a course and
+ * an exam, generate, and the guide is assembled from that course's fixture —
+ * topics ordered by weight, heaviest on the concept you miss most.
+ *
+ * Changing either select drops back to the empty state on purpose: a guide
+ * built for one exam should not sit under another exam's heading.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { LAB_TIER, MONO } from './LabShell';
+import { GUIDES } from './labData';
+
+type Phase = 'empty' | 'loading' | 'guide';
+type CourseKey = keyof typeof GUIDES;
+
+const RECENT = [
+  { i: 0, exam: 'MA 242 · Midterm 1', meta: 'GENERATED SEP 28', course: 'MA 242' as CourseKey, pick: 'Midterm 1 · Sep 30' },
+  { i: 1, exam: 'CS 201 · Quiz 2', meta: 'GENERATED OCT 03', course: 'CS 201' as CourseKey, pick: 'Quiz 2 · Oct 03' },
+];
+
+const SELECT: React.CSSProperties = {
+  padding: '9px 12px', borderRadius: 9, border: '1px solid #DCE7DE', background: '#FDFCF9',
+  fontFamily: "'DM Sans',sans-serif", fontSize: 13, color: '#33443B', cursor: 'pointer',
+};
+
+export function GuideDemo() {
+  const [course, setCourse] = useState<CourseKey>('MA 242');
+  const [exam, setExam] = useState('Midterm 2 · Oct 24');
+  const [phase, setPhase] = useState<Phase>('empty');
+  const [stamp, setStamp] = useState('');
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+
+  const set = GUIDES[course] ?? GUIDES['MA 242'];
+
+  const generate = () => {
+    setPhase('loading');
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setPhase('guide');
+      setStamp('GENERATED ' + new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }).toUpperCase());
+    }, 900);
+  };
+
+  const openRecent = (r: (typeof RECENT)[number]) => {
+    setCourse(r.course);
+    setExam(r.pick);
+    setPhase('loading');
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => { setPhase('guide'); setStamp('FROM CACHE'); }, 500);
+  };
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 220px', minHeight: '100%', boxSizing: 'border-box' }}>
+      <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 12, borderRight: '1px solid #ECE9DE' }}>
+        <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+          <select
+            value={course}
+            onChange={(e) => {
+              const c = e.target.value as CourseKey;
+              setCourse(c);
+              setExam(GUIDES[c].exams[0]);
+              setPhase('empty');
+            }}
+            aria-label="Course"
+            style={SELECT}
+          >
+            {Object.keys(GUIDES).map((c) => <option key={c} value={c}>{c}</option>)}
+          </select>
+          <select
+            value={exam}
+            onChange={(e) => { setExam(e.target.value); setPhase('empty'); }}
+            aria-label="Exam"
+            style={SELECT}
+          >
+            {set.exams.map((e) => <option key={e} value={e}>{e}</option>)}
+          </select>
+          <button
+            onClick={generate}
+            type="button"
+            className="ld-labprimary"
+            style={{ marginLeft: 'auto', padding: '10px 18px', borderRadius: 9, border: 'none', background: '#12201A', color: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 13, fontWeight: 600, cursor: 'pointer' }}
+          >
+            {phase === 'guide' ? 'Regenerate' : 'Generate guide'}
+          </button>
+        </div>
+
+        {phase === 'loading' && (
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
+            <span style={{ width: 26, height: 26, borderRadius: 99, border: '3px solid #E3EBE5', borderTopColor: '#0E9E5A', animation: 'labSpin 700ms linear infinite' }} />
+            <span style={{ fontSize: 12.5, color: '#8B9891' }}>Reading your library — 11 documents…</span>
+          </div>
+        )}
+
+        {phase === 'guide' && (
+          <div style={{ flex: 1, overflow: 'auto', borderRadius: 12, border: '1px solid #E8E5DA', background: '#FDFCF9', padding: '18px 20px', animation: 'labIn 320ms ease both' }}>
+            <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.2em', color: '#8B9891' }}>{course.toUpperCase()} · STUDY GUIDE</span>
+            <h4 style={{ margin: '8px 0 0', fontFamily: "'Playfair Display',serif", fontSize: 20, fontWeight: 600 }}>{exam}</h4>
+            <p style={{ margin: '8px 0 0', fontSize: 13, lineHeight: 1.7, color: '#61726A' }}>{set.overview}</p>
+            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
+              {set.topics.map((t) => (
+                <div key={t.name}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <span style={{ width: 8, height: 8, borderRadius: 99, background: LAB_TIER[t.tier as keyof typeof LAB_TIER] }} />
+                    <span style={{ fontSize: 14, fontWeight: 600, color: '#12201A' }}>{t.name}</span>
+                    <span style={{ marginLeft: 'auto', ...MONO, fontSize: 9.5, color: '#8B9891' }}>{t.weight}</span>
+                  </div>
+                  <p style={{ margin: '4px 0 0 16px', fontSize: 12, fontStyle: 'italic', color: '#8B9891' }}>{t.importance}</p>
+                  <ul style={{ margin: '6px 0 0 16px', paddingLeft: 16, display: 'flex', flexDirection: 'column', gap: 3 }}>
+                    {t.bullets.map((b) => (
+                      <li key={b} style={{ fontSize: 12.5, lineHeight: 1.6, color: '#33443B' }}>{b}</li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+            <span style={{ display: 'block', marginTop: 16, ...MONO, fontSize: 9, letterSpacing: '0.14em', color: '#9AA5A0' }}>{stamp}</span>
+          </div>
+        )}
+
+        {phase === 'empty' && (
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, color: '#9AA5A0' }}>
+            <span style={{ fontSize: 14 }}>No guide yet</span>
+            <span style={{ fontSize: 12 }}>Pick a course and exam, then Generate Guide.</span>
+          </div>
+        )}
+      </div>
+
+      <div style={{ padding: '20px 16px', background: '#F6F8F4', display: 'flex', flexDirection: 'column', gap: 9 }}>
+        <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.18em', color: '#8B9891' }}>RECENT GUIDES</span>
+        {RECENT.map((r) => (
+          <button
+            key={r.i}
+            onClick={() => openRecent(r)}
+            type="button"
+            className="ld-labrecent"
+            style={{ textAlign: 'left', padding: '10px 12px', borderRadius: 10, border: '1px solid #DCE7DE', background: '#FDFCF9', cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 2, transition: 'all 180ms' }}
+          >
+            <span style={{ fontSize: 12.5, fontWeight: 600, color: '#12201A' }}>{r.exam}</span>
+            <span style={{ ...MONO, fontSize: 9, color: '#8B9891' }}>{r.meta}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/LabShell.tsx b/frontend/src/components/landing-v5/lab/LabShell.tsx
new file mode 100644
index 00000000..39d1f060
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/LabShell.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+/**
+ * The browser-chrome frame every feature-lab demo sits in.
+ *
+ * Ported from `FeatureLab.dc.html`: three dots, the fake route, and an
+ * INTERACTIVE badge, over a scrolling body. The badge is not decoration —
+ * these demos really do respond, which is what the panel's
+ * "TRY IT · THIS ONE ACTUALLY WORKS" line is promising.
+ */
+
+export const MONO: React.CSSProperties = { fontFamily: "'JetBrains Mono',monospace" };
+
+/** Lab-local tier swatches; see labData.ts for why they differ from the graph's. */
+export const LAB_TIER = {
+  mastered: '#3a7d4e', learning: '#c89b5e', struggling: '#b25855', unexplored: '#C3CCC6',
+} as const;
+
+export function LabShell({ route, children }: { route: string; children: React.ReactNode }) {
+  return (
+    <div style={{ width: '100%', height: '100%', overflow: 'hidden', fontFamily: "'DM Sans',sans-serif", color: '#12201A', background: '#FDFCF9', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ flex: '0 0 auto', height: 38, borderBottom: '1px solid #ECE9DE', background: '#F6F8F4', display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px' }}>
+        <span style={{ display: 'flex', gap: 5 }}>
+          {[0, 1, 2].map((i) => (
+            <span key={i} style={{ width: 8, height: 8, borderRadius: 99, background: '#E3E0D5' }} />
+          ))}
+        </span>
+        <span style={{ ...MONO, fontSize: 9.5, letterSpacing: '0.2em', color: '#8B9891' }}>{route}</span>
+        <span style={{ marginLeft: 'auto', ...MONO, fontSize: 9, letterSpacing: '0.18em', color: '#0C5638', background: '#E6F2E8', border: '1px solid #DCE7DE', borderRadius: 99, padding: '3px 9px' }}>
+          INTERACTIVE
+        </span>
+      </div>
+      <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>{children}</div>
+    </div>
+  );
+}
+
+/** Shared button styles the demos reuse. */
+export const PRIMARY_BTN: React.CSSProperties = {
+  padding: '11px 24px', borderRadius: 10, border: 'none', background: '#12201A',
+  color: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 13.5,
+  fontWeight: 600, cursor: 'pointer', transition: 'background 200ms',
+};
+
+export const GHOST_BTN: React.CSSProperties = {
+  padding: '10px 20px', borderRadius: 10, border: '1px solid #DCE7DE',
+  background: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 13,
+  color: '#33443B', cursor: 'pointer',
+};
+
+/** The segmented control used by the tutor and calendar demos. */
+export function Segmented<T extends string>({
+  options, value, onChange,
+}: {
+  options: readonly { key: T; label: string }[];
+  value: T;
+  onChange: (k: T) => void;
+}) {
+  return (
+    <div style={{ display: 'flex', gap: 2, padding: 3, borderRadius: 9, background: '#F6F8F4', border: '1px solid #E3EBE5' }}>
+      {options.map((o) => {
+        const on = o.key === value;
+        return (
+          <button
+            key={o.key}
+            onClick={() => onChange(o.key)}
+            type="button"
+            aria-pressed={on}
+            style={{
+              padding: '6px 13px', borderRadius: 7, border: 'none', cursor: 'pointer',
+              ...MONO, fontSize: 9.5, letterSpacing: '0.14em',
+              background: on ? '#12201A' : 'transparent',
+              color: on ? '#FDFCF9' : '#61726A',
+              fontWeight: on ? 600 : 400,
+              transition: 'all 200ms',
+            }}
+          >
+            {o.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/NotesDemo.tsx b/frontend/src/components/landing-v5/lab/NotesDemo.tsx
new file mode 100644
index 00000000..51ad04dd
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/NotesDemo.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+/**
+ * Feature lab · notetaker.
+ *
+ * Ported from the `isNotes` branch of `FeatureLab.dc.html`. Type in the note
+ * and the save indicator debounces to SAVED after 800ms; SUMMARIZE and
+ * EXTRACT CONCEPTS both run against whatever you actually typed.
+ *
+ * The extraction is regex over the body — deliberately so. It is a demo of
+ * the shape of the feature, and it stays honest by finding nothing when you
+ * clear the note rather than printing a canned list.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { LAB_TIER, MONO } from './LabShell';
+
+const INITIAL_TITLE = 'Lecture 7 — Eigenvalues';
+const INITIAL_BODY = [
+  'λ scales v, it never turns it.',
+  'Solve det(A − λI) = 0 for λ, then null(A − λI) for the eigenspace.',
+  'Repeated eigenvalues do not guarantee enough independent eigenvectors.',
+].join('\n');
+
+/** Concept matchers, in the order the source lists them. */
+const MATCHERS: { name: string; tier: keyof typeof LAB_TIER; hit: RegExp }[] = [
+  { name: 'Eigenvalues', tier: 'struggling', hit: /eigen|λ|\blambda\b/ },
+  { name: 'Determinant', tier: 'learning', hit: /det\(|determinant/ },
+  { name: 'Null space', tier: 'unexplored', hit: /null|kernel/ },
+  { name: 'Diagonalization', tier: 'unexplored', hit: /diagonal/ },
+  { name: 'Eigenvectors', tier: 'struggling', hit: /eigenvector|independent/ },
+];
+
+const ACTION_BTN: React.CSSProperties = {
+  padding: '9px 14px', borderRadius: 9, border: '1px solid #DCE7DE', background: '#FDFCF9',
+  ...MONO, fontSize: 9.5, letterSpacing: '0.1em', color: '#0C5638',
+  cursor: 'pointer', transition: 'all 180ms',
+};
+
+export function NotesDemo() {
+  const [title, setTitle] = useState(INITIAL_TITLE);
+  const [body, setBody] = useState(INITIAL_BODY);
+  const [saved, setSaved] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [concepts, setConcepts] = useState<{ name: string; tier: keyof typeof LAB_TIER }[]>([]);
+  const [summary, setSummary] = useState('');
+  const saveT = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (saveT.current) clearTimeout(saveT.current); }, []);
+
+  const touchSave = () => {
+    setSaved(false);
+    if (saveT.current) clearTimeout(saveT.current);
+    saveT.current = setTimeout(() => setSaved(true), 800);
+  };
+
+  const extract = () => {
+    if (busy) return;
+    setBusy(true);
+    setTimeout(() => {
+      const lower = body.toLowerCase();
+      const found = MATCHERS.filter((m) => m.hit.test(lower)).map((m) => ({ name: m.name, tier: m.tier }));
+      setConcepts(found.length ? found : [{ name: 'No concepts found', tier: 'unexplored' }]);
+      setBusy(false);
+    }, 700);
+  };
+
+  const summarize = () => {
+    if (busy) return;
+    setBusy(true);
+    setTimeout(() => {
+      const lines = body.split('\n').map((l) => l.trim()).filter(Boolean);
+      setSummary(
+        lines.length
+          ? `This note works through ${title.replace(/^[^—]*—\s*/, '').toLowerCase()} in ${lines.length} claims — the key one being: ${lines[0].replace(/\.$/, '')}.`
+          : 'Nothing to summarize yet — write a line or two first.',
+      );
+      setBusy(false);
+    }, 700);
+  };
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 240px', minHeight: '100%', boxSizing: 'border-box' }}>
+      <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 10, borderRight: '1px solid #ECE9DE' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <input
+            value={title}
+            onChange={(e) => { setTitle(e.target.value); touchSave(); }}
+            aria-label="Note title"
+            style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: "'Playfair Display',serif", fontSize: 22, fontWeight: 600, color: '#12201A', padding: 0 }}
+          />
+          <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.16em', whiteSpace: 'nowrap', color: saved ? '#3a7d4e' : '#9AA5A0' }}>
+            {saved ? 'SAVED' : 'SAVING…'}
+          </span>
+        </div>
+
+        <textarea
+          value={body}
+          onChange={(e) => { setBody(e.target.value); touchSave(); }}
+          aria-label="Note body"
+          spellCheck={false}
+          style={{ flex: 1, minHeight: 190, resize: 'none', border: '1px solid #E8E5DA', borderRadius: 12, background: '#FDFCF9', padding: '14px 16px', fontFamily: "'DM Sans',sans-serif", fontSize: 14, lineHeight: 1.8, color: '#33443B', outline: 'none' }}
+        />
+
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+          <button onClick={summarize} type="button" className="ld-labaction" style={ACTION_BTN}>SUMMARIZE</button>
+          <button onClick={extract} type="button" className="ld-labaction" style={ACTION_BTN}>EXTRACT CONCEPTS</button>
+          <button
+            onClick={() => setSummary('Lowest-mastery linked concept is Eigenvalues (41%) — /quiz?concept=eigenvalues would open next.')}
+            type="button"
+            className="ld-labaction"
+            style={ACTION_BTN}
+          >
+            GENERATE QUIZ
+          </button>
+        </div>
+
+        {summary && (
+          <div style={{ borderRadius: 11, background: '#F6F8F4', border: '1px solid #E3EBE5', padding: '13px 15px', animation: 'labIn 280ms ease both' }}>
+            <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.2em', color: '#8B9891' }}>SUMMARY</span>
+            <p style={{ margin: '6px 0 0', fontSize: 13, lineHeight: 1.65, color: '#33443B' }}>{summary}</p>
+          </div>
+        )}
+      </div>
+
+      <div style={{ padding: '20px 18px', background: '#F6F8F4', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.18em', color: '#8B9891' }}>LINKED CONCEPTS</span>
+        {busy && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 12, color: '#8B9891' }}>
+            <span style={{ width: 12, height: 12, borderRadius: 99, border: '2px solid #DCE7DE', borderTopColor: '#0E9E5A', animation: 'labSpin 700ms linear infinite' }} />
+            reading the note…
+          </span>
+        )}
+        {concepts.map((c) => (
+          <span key={c.name} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 11px', borderRadius: 99, background: '#FDFCF9', border: '1px solid #DCE7DE', fontSize: 12, color: '#33443B', animation: 'labIn 300ms ease both' }}>
+            <span style={{ width: 7, height: 7, borderRadius: 99, flex: '0 0 auto', background: LAB_TIER[c.tier] }} />
+            {c.name}
+          </span>
+        ))}
+        <span style={{ marginTop: 'auto', fontSize: 11, lineHeight: 1.6, color: '#9AA5A0' }}>
+          {concepts.length
+            ? `${concepts.length} concepts linked to your MA 242 graph.`
+            : 'Concepts you extract are linked to your graph, not just tagged on the note.'}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/QuizDemo.tsx b/frontend/src/components/landing-v5/lab/QuizDemo.tsx
new file mode 100644
index 00000000..3b30a203
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/QuizDemo.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+/**
+ * Feature lab · adaptive quiz.
+ *
+ * Ported from the `isQuiz` branch of `FeatureLab.dc.html`. Pick an option,
+ * submit, read the explanation, advance; three questions then a result card.
+ *
+ * The adaptivity is the point of the demo: difficulty is derived from the
+ * streak, not stored — first question MEDIUM, then HARD while you are on a
+ * run and EASY the moment you break it.
+ */
+
+import { useState } from 'react';
+import { LAB_TIER, MONO, PRIMARY_BTN } from './LabShell';
+import { QUESTIONS } from './labData';
+
+type Phase = 'active' | 'review' | 'results';
+
+export function QuizDemo() {
+  const [qi, setQi] = useState(0);
+  const [picked, setPicked] = useState<string | null>(null);
+  const [phase, setPhase] = useState<Phase>('active');
+  const [answers, setAnswers] = useState<boolean[]>([]);
+  const [streak, setStreak] = useState(0);
+
+  const q = QUESTIONS[Math.min(qi, QUESTIONS.length - 1)];
+  const reviewing = phase === 'review';
+  const done = phase === 'results';
+  const correctCount = answers.filter(Boolean).length;
+  const right = reviewing && q.options.some((o) => o.label === picked && 'correct' in o && o.correct);
+
+  const diff = qi === 0 ? 'MEDIUM' : streak > 0 ? 'HARD' : 'EASY';
+  const [diffBg, diffFg] =
+    diff === 'HARD' ? ['#b25855', '#9c4b48'] : diff === 'EASY' ? ['#3a7d4e', '#2f6640'] : ['#c89b5e', '#8a6636'];
+  const tier = correctCount >= 2 ? 'learning' : 'struggling';
+
+  const submit = () => {
+    if (reviewing) {
+      if (qi === QUESTIONS.length - 1) setPhase('results');
+      else { setQi(qi + 1); setPicked(null); setPhase('active'); }
+      return;
+    }
+    if (!picked) return;
+    const ok = q.options.some((o) => o.label === picked && 'correct' in o && o.correct);
+    setAnswers((a) => [...a, ok]);
+    setStreak(ok ? streak + 1 : 0);
+    setPhase('review');
+  };
+
+  const retake = () => { setQi(0); setPicked(null); setPhase('active'); setAnswers([]); setStreak(0); };
+
+  if (done) {
+    return (
+      <div style={{ padding: '22px 26px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: '100%', boxSizing: 'border-box' }}>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16, animation: 'labIn 320ms ease both' }}>
+          <span style={{ fontFamily: "'Playfair Display',serif", fontSize: 54, fontWeight: 600, lineHeight: 1 }}>
+            {correctCount} / {QUESTIONS.length}
+          </span>
+          <span style={{ ...MONO, fontSize: 11, letterSpacing: '0.2em', color: '#8B9891' }}>
+            {Math.round((correctCount / QUESTIONS.length) * 100)}% CORRECT
+          </span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '9px 16px', borderRadius: 99, background: '#E6F2E8', border: '1px solid #DCE7DE' }}>
+            <span style={{ fontSize: 13, color: '#33443B' }}>Eigenvalues mastery</span>
+            <span style={{ ...MONO, fontSize: 13, fontWeight: 700, color: '#0C5638' }}>
+              41% → {41 + correctCount * 7}%  (+{correctCount * 7})
+            </span>
+          </div>
+          <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
+            <button onClick={retake} type="button" style={{ padding: '10px 20px', borderRadius: 10, border: '1px solid #DCE7DE', background: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 13, color: '#33443B', cursor: 'pointer' }}>
+              Retake
+            </button>
+            <button onClick={retake} type="button" style={{ padding: '10px 20px', borderRadius: 10, border: 'none', background: '#0C5638', color: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
+              Learn weak areas
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: '22px 26px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: '100%', boxSizing: 'border-box' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style={{ ...MONO, fontSize: 10, letterSpacing: '0.18em', color: '#8B9891' }}>
+          QUESTION {Math.min(qi + 1, QUESTIONS.length)} OF {QUESTIONS.length}
+        </span>
+        <span style={{ padding: '4px 11px', borderRadius: 99, ...MONO, fontSize: 9.5, letterSpacing: '0.12em', border: `1px solid ${diffBg}`, background: `${diffBg}1f`, color: diffFg, transition: 'all 300ms' }}>
+          {diff}
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
+        <span style={{ width: 8, height: 8, borderRadius: 99, background: LAB_TIER[tier] }} />
+        <span style={{ fontSize: 13, fontWeight: 600, color: '#33443B' }}>Eigenvalues</span>
+        <span style={{ ...MONO, fontSize: 9.5, color: '#9AA5A0' }}>MA 242</span>
+        <span style={{ marginLeft: 'auto', ...MONO, fontSize: 9.5, color: '#8B9891' }}>
+          MASTERY {41 + correctCount * 7}%
+        </span>
+      </div>
+
+      <div>
+        <p style={{ margin: 0, fontFamily: "'Playfair Display',serif", fontSize: 20, lineHeight: 1.4, color: '#12201A' }}>{q.text}</p>
+        <div role="radiogroup" style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
+          {q.options.map((o) => {
+            const isPicked = o.label === picked;
+            const correct = 'correct' in o && o.correct;
+            let bd = '#E3E0D5', bg = '#FDFCF9', fg = '#33443B', mark = '', markCol = '';
+            if (reviewing && correct) { bd = '#0E9E5A'; bg = '#E6F2E8'; fg = '#0C5638'; mark = 'CORRECT'; markCol = '#0C5638'; }
+            else if (reviewing && isPicked) { bd = '#b25855'; bg = 'rgba(178,88,85,0.09)'; fg = '#9c4b48'; mark = 'YOUR PICK'; markCol = '#9c4b48'; }
+            else if (isPicked) { bd = '#0E9E5A'; bg = '#E6F2E8'; fg = '#0C5638'; }
+            return (
+              <button
+                key={o.label}
+                type="button"
+                onClick={() => { if (!reviewing) setPicked(o.label); }}
+                style={{ textAlign: 'left', display: 'flex', gap: 10, alignItems: 'flex-start', padding: '12px 14px', borderRadius: 10, fontFamily: "'DM Sans',sans-serif", fontSize: 14, transition: 'all 180ms', border: `1px solid ${bd}`, background: bg, color: fg, cursor: reviewing ? 'default' : 'pointer' }}
+              >
+                <span style={{ ...MONO, fontSize: 12, color: isPicked || (reviewing && correct) ? '#0E9E5A' : '#9AA5A0' }}>{o.label}.</span>
+                <span>{o.text}</span>
+                <span style={{ marginLeft: 'auto', ...MONO, fontSize: 11, letterSpacing: '0.14em', color: markCol }}>{mark}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {reviewing && (
+        <div style={{ borderRadius: 12, background: '#F6F8F4', border: '1px solid #E3EBE5', padding: '14px 16px', animation: 'labIn 300ms ease both' }}>
+          <span style={{ ...MONO, fontSize: 9.5, letterSpacing: '0.2em', color: right ? '#0C5638' : '#9c4b48' }}>
+            {right ? 'CORRECT' : 'NOT QUITE'}
+          </span>
+          <p style={{ margin: '7px 0 0', fontSize: 13.5, lineHeight: 1.65, color: '#33443B' }}>{q.explain}</p>
+        </div>
+      )}
+
+      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid #ECE9DE', paddingTop: 14 }}>
+        <span style={{ fontSize: 12, color: '#8B9891' }}>
+          {streak > 0 ? `${streak} right in a row — next question moves up` : 'Difficulty follows your last answer'}
+        </span>
+        <button onClick={submit} type="button" className="ld-labprimary" style={PRIMARY_BTN}>
+          {reviewing ? (qi === QUESTIONS.length - 1 ? 'See results' : 'Next question') : 'Submit answer'}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/RoomsDemo.tsx b/frontend/src/components/landing-v5/lab/RoomsDemo.tsx
new file mode 100644
index 00000000..d33f92e8
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/RoomsDemo.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+/**
+ * Feature lab · study rooms.
+ *
+ * Ported from the `isRooms` branch of `FeatureLab.dc.html`. A shared graph
+ * beside a live chat: swap partner and every node's ring recolours to show
+ * who has mastered what.
+ *
+ * The ring encodes the pair, not the person — you / them / both / neither —
+ * which is the whole argument for studying next to someone. Only `mastered`
+ * counts as knowing it, so the rank comparison is `>= 3`, not "better than".
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { LAB_TIER, MONO } from './LabShell';
+import { GRAPH_EDGES, GRAPH_NODES } from './labData';
+
+const RING = { you: '#38bdf8', them: '#fb923c', both: '#34d399', neither: '#f87171' } as const;
+const RANK = { unexplored: 0, struggling: 1, learning: 2, mastered: 3 } as const;
+const PARTNERS = ['maya', 'jack', 'priya'] as const;
+type Partner = (typeof PARTNERS)[number];
+
+const LEGEND: [keyof typeof RING, string][] = [
+  ['you', 'You know it'], ['them', 'They know it'], ['both', 'Both mastered'], ['neither', 'Neither yet'],
+];
+
+const NODE_BY_ID = Object.fromEntries(GRAPH_NODES.map((n) => [n.id, n]));
+
+export function RoomsDemo() {
+  const [partner, setPartner] = useState<Partner>('maya');
+  const [input, setInput] = useState('');
+  const [typing, setTyping] = useState(false);
+  const [msgs, setMsgs] = useState<{ who: string; text: string; mine: boolean }[]>([
+    { who: 'maya', text: 'stuck on AVL-style rotations for eigenbases — anyone?', mine: false },
+    { who: 'you', text: 'same. comparing graphs now', mine: true },
+  ]);
+  const typeT = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (typeT.current) clearTimeout(typeT.current); }, []);
+
+  const send = () => {
+    const t = input.trim();
+    if (!t) return;
+    setMsgs((m) => [...m, { who: 'you', text: t, mine: true }]);
+    setInput('');
+    setTyping(true);
+    if (typeT.current) clearTimeout(typeT.current);
+    typeT.current = setTimeout(() => {
+      const reply = `my ${partner.charAt(0).toUpperCase() + partner.slice(1)} graph has eigenvalues green — want me to quiz you on it?`;
+      setTyping(false);
+      setMsgs((m) => [...m, { who: partner, text: reply, mine: false }]);
+    }, 1600);
+  };
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', minHeight: '100%', boxSizing: 'border-box' }}>
+      <div style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 10, borderRight: '1px solid #ECE9DE' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <span style={{ fontSize: 14, fontWeight: 600 }}>MA 242 Study Room</span>
+          <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.14em', color: '#8B9891' }}>INVITE · 7QK2</span>
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ fontSize: 12, color: '#61726A' }}>Compare graphs with</span>
+          <select
+            value={partner}
+            onChange={(e) => setPartner(e.target.value as Partner)}
+            aria-label="Compare with"
+            style={{ padding: '7px 10px', borderRadius: 8, border: '1px solid #DCE7DE', background: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 12.5, color: '#33443B', cursor: 'pointer' }}
+          >
+            {PARTNERS.map((p) => <option key={p} value={p}>{p}</option>)}
+          </select>
+        </div>
+
+        <div style={{ flex: 1, minHeight: 180, borderRadius: 12, border: '1px solid #E8E5DA', background: '#FDFCF9', position: 'relative', overflow: 'hidden' }}>
+          <svg width="100%" height="100%" viewBox="0 0 420 220" preserveAspectRatio="xMidYMid meet">
+            {GRAPH_EDGES.map(([a, b]) => (
+              <line key={`${a}-${b}`} x1={NODE_BY_ID[a].x} y1={NODE_BY_ID[a].y} x2={NODE_BY_ID[b].x} y2={NODE_BY_ID[b].y} stroke="rgba(12,86,56,0.2)" strokeWidth="1" />
+            ))}
+            {GRAPH_NODES.map((n) => {
+              const mineOk = RANK[n.mine as keyof typeof RANK] >= 3;
+              const theirs = n.partner[partner] as keyof typeof RANK;
+              const theirOk = RANK[theirs] >= 3;
+              const key: keyof typeof RING = mineOk && theirOk ? 'both' : mineOk ? 'you' : theirOk ? 'them' : 'neither';
+              const r = n.id === 'eig' ? 11 : 9;
+              return (
+                <g key={n.id}>
+                  <circle cx={n.x} cy={n.y} r={r + 6} fill="none" stroke={RING[key]} strokeWidth="2" style={{ transition: 'stroke 400ms ease' }} />
+                  <circle cx={n.x} cy={n.y} r={r} fill={LAB_TIER[n.mine as keyof typeof LAB_TIER]} />
+                  <text x={n.x} y={n.y + r + 15} textAnchor="middle" fontFamily="DM Sans" fontSize="9" fill="#61726A">{n.name}</text>
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+
+        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+          {LEGEND.map(([k, label]) => (
+            <span key={k} style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 10.5, color: '#8B9891' }}>
+              <span style={{ width: 9, height: 9, borderRadius: 99, border: `2px solid ${RING[k]}` }} />
+              {label}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', background: '#F6F8F4' }}>
+        <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 9 }}>
+          {msgs.map((m, i) => (
+            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 2, animation: 'labIn 260ms ease both', alignItems: m.mine ? 'flex-end' : 'flex-start' }}>
+              <span style={{ ...MONO, fontSize: 8.5, letterSpacing: '0.1em', color: '#9AA5A0' }}>{m.mine ? 'you' : m.who}</span>
+              <span
+                style={{
+                  padding: '9px 12px', borderRadius: 13, fontSize: 12.5, lineHeight: 1.5, maxWidth: 230,
+                  ...(m.mine
+                    ? { background: '#0C5638', color: '#F6F8F4', borderBottomRightRadius: 4 }
+                    : { background: '#FDFCF9', border: '1px solid #DCE7DE', color: '#33443B', borderBottomLeftRadius: 4 }),
+                }}
+              >
+                {m.text}
+              </span>
+            </div>
+          ))}
+          {typing && (
+            <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: '#9AA5A0' }}>
+              {partner} is typing
+              {[0, 0.15, 0.3].map((d) => (
+                <span key={d} style={{ width: 4, height: 4, borderRadius: 99, background: '#9AA5A0', animation: `labDot 1.2s ease-in-out ${d}s infinite` }} />
+              ))}
+            </span>
+          )}
+        </div>
+
+        <div style={{ flex: '0 0 auto', borderTop: '1px solid #E3EBE5', padding: 10, display: 'flex', gap: 8 }}>
+          <input
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); send(); } }}
+            placeholder="Message the room…"
+            aria-label="Message"
+            style={{ flex: 1, minWidth: 0, padding: '9px 12px', borderRadius: 9, border: '1px solid #DCE7DE', background: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 12.5, color: '#33443B', outline: 'none' }}
+          />
+          <button onClick={send} type="button" className="ld-labsend" style={{ padding: '9px 15px', borderRadius: 9, border: 'none', background: '#0C5638', color: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 12.5, fontWeight: 600, cursor: 'pointer' }}>
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/TutorDemo.tsx b/frontend/src/components/landing-v5/lab/TutorDemo.tsx
new file mode 100644
index 00000000..2601524a
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/TutorDemo.tsx
@@ -0,0 +1,162 @@
+'use client';
+
+/**
+ * Feature lab · AI tutor.
+ *
+ * Ported from the `isTutor` branch of `FeatureLab.dc.html`. Three modes over
+ * the same concept, each a scripted branching exchange: pick a reply, the
+ * tutor thinks for 1.5s, then answers and advances a step.
+ *
+ * Every branch is authored — including the wrong ones, which is the point.
+ * Socratic answers a bad guess with a better question rather than the answer,
+ * and TeachBack names the step you skipped. Switching mode resets the thread,
+ * because the scripts do not share a position.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { MONO } from './LabShell';
+import { TUTOR } from './labData';
+
+type Mode = keyof typeof TUTOR;
+const MODES: Mode[] = ['socratic', 'expository', 'teachback'];
+
+interface Msg { text: string; isBot: boolean }
+
+export function TutorDemo() {
+  const [mode, setMode] = useState<Mode>('socratic');
+  const [step, setStep] = useState(0);
+  const [log, setLog] = useState<Msg[]>([]);
+  const [thinking, setThinking] = useState(false);
+  const [sources, setSources] = useState<readonly string[]>([]);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+
+  const T = TUTOR[mode];
+  const current = T.steps[step] ?? null;
+  const msgs: Msg[] = [{ text: T.open, isBot: true }, ...log];
+
+  const reset = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setStep(0); setLog([]); setThinking(false); setSources([]);
+  };
+
+  const switchMode = (m: Mode) => { setMode(m); reset(); };
+
+  const pick = (i: number) => {
+    if (thinking || !current) return;
+    const reply = current.replies[i];
+    if (!reply) return;
+    setLog((l) => [...l, { text: reply.text, isBot: false }]);
+    setThinking(true);
+    setSources([]);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setThinking(false);
+      setLog((l) => [...l, { text: reply.bot, isBot: true }]);
+      setStep((s) => s + 1);
+      setSources(('sources' in reply && reply.sources) || ('sources' in T && T.sources) || []);
+    }, 1500);
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100%', boxSizing: 'border-box' }}>
+      <div style={{ flex: '0 0 auto', padding: '14px 22px 12px', borderBottom: '1px solid #ECE9DE', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: 4, padding: 3, borderRadius: 9, background: '#F6F8F4', border: '1px solid #E3EBE5' }}>
+          {MODES.map((k) => {
+            const on = mode === k;
+            return (
+              <button
+                key={k}
+                onClick={() => switchMode(k)}
+                type="button"
+                aria-pressed={on}
+                style={{ padding: '7px 14px', borderRadius: 7, border: 'none', ...MONO, fontSize: 9.5, letterSpacing: '0.14em', cursor: 'pointer', transition: 'all 200ms', background: on ? '#12201A' : 'transparent', color: on ? '#FDFCF9' : '#61726A', fontWeight: on ? 600 : 400 }}
+              >
+                {TUTOR[k].label}
+              </button>
+            );
+          })}
+        </div>
+        <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 7 }}>
+          <span style={{ width: 7, height: 7, borderRadius: 99, background: T.tone }} />
+          <span style={{ ...MONO, fontSize: 9, letterSpacing: '0.14em', color: '#8B9891' }}>{T.topic}</span>
+        </span>
+      </div>
+
+      <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '16px 22px', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        <span style={{ fontSize: 12, color: '#8B9891' }}>{T.blurb}</span>
+
+        {msgs.map((m, i) => (
+          <div key={i} style={{ display: 'flex', gap: 9, animation: 'labIn 460ms cubic-bezier(0.22,1,0.36,1) both', justifyContent: m.isBot ? 'flex-start' : 'flex-end' }}>
+            {m.isBot && (
+              <span style={{ width: 26, height: 26, flex: '0 0 auto', borderRadius: 99, background: '#E6F2E8', border: '1px solid #C3D8B3', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <svg viewBox="0 0 16 16" width="12" height="12" fill="#0C5638">
+                  <path d="M8 0.9c.55 3.35 1.8 4.6 5.15 5.15C9.8 6.6 8.55 7.85 8 11.2 7.45 7.85 6.2 6.6 2.85 6.05 6.2 5.5 7.45 4.25 8 .9z" />
+                </svg>
+              </span>
+            )}
+            <span
+              style={{
+                padding: '11px 14px', fontSize: 13, lineHeight: 1.6, maxWidth: '74%',
+                ...(m.isBot
+                  ? { background: '#F6F8F4', border: '1px solid #E3EBE5', borderRadius: '14px 14px 14px 4px', color: '#12201A' }
+                  : { background: '#0C5638', color: '#E6F2E8', borderRadius: '14px 14px 4px 14px' }),
+              }}
+            >
+              {m.text}
+            </span>
+          </div>
+        ))}
+
+        {thinking && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: 5, paddingLeft: 35 }}>
+            {[0, 0.15, 0.3].map((d) => (
+              <span key={d} style={{ width: 5, height: 5, borderRadius: 99, background: '#9AA5A0', animation: `typingDot 1.2s ease-in-out ${d}s infinite` }} />
+            ))}
+          </span>
+        )}
+
+        {sources.length > 0 && !thinking && (
+          <div style={{ marginLeft: 35, display: 'flex', flexDirection: 'column', gap: 5 }}>
+            <span style={{ ...MONO, fontSize: 8.5, letterSpacing: '0.2em', color: '#9AA5A0' }}>GROUNDED IN YOUR UPLOADS</span>
+            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+              {sources.map((src) => (
+                <span key={src} style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 9px', borderRadius: 6, background: '#F6F8F4', border: '1px solid #DCE7DE', ...MONO, fontSize: 9, color: '#33443B' }}>
+                  <span style={{ width: 5, height: 5, borderRadius: 99, background: '#0E9E5A' }} />
+                  {src}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div style={{ flex: '0 0 auto', borderTop: '1px solid #ECE9DE', padding: '12px 22px 14px', display: 'flex', flexDirection: 'column', gap: 9 }}>
+        <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
+          {current && !thinking && current.replies.map((r, i) => (
+            <button
+              key={r.text}
+              onClick={() => pick(i)}
+              type="button"
+              className="ld-labreply"
+              style={{ padding: '8px 13px', borderRadius: 99, border: '1px solid #DCE7DE', background: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 12.5, color: '#33443B', cursor: 'pointer', transition: 'all 180ms' }}
+            >
+              {r.text}
+            </button>
+          ))}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <span style={{ ...MONO, fontSize: 8.5, letterSpacing: '0.14em', color: '#9AA5A0' }}>
+            {current
+              ? (mode === 'teachback' ? 'IT LISTENS FOR WHAT YOU SKIPPED' : 'IT NEVER HANDS OVER THE ANSWER')
+              : 'SESSION COMPLETE · MASTERY WRITTEN BACK TO YOUR GRAPH'}
+          </span>
+          <button onClick={reset} type="button" className="ld-labrecent" style={{ padding: '7px 14px', borderRadius: 8, border: '1px solid #DCE7DE', background: '#FDFCF9', fontFamily: "'DM Sans',sans-serif", fontSize: 12, color: '#61726A', cursor: 'pointer' }}>
+            Start over
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/index.tsx b/frontend/src/components/landing-v5/lab/index.tsx
new file mode 100644
index 00000000..4f726821
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/index.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+/**
+ * The eight feature-lab demos, keyed by `LabKind`.
+ *
+ * Ported from `FeatureLab.dc.html`, the separate design component the landing
+ * page mounts inside the lab's right pane via `<dc-import>`. The source is one
+ * class with ~20 state keys and eight `sc-if` branches; here each demo owns
+ * its own state, so switching tools through the rail unmounts one and mounts
+ * the next with a clean slate — which is what the source's shared-state
+ * version only appeared to do.
+ */
+
+import type { LabKind } from '@/lib/landing/content';
+import { CalendarDemo } from './CalendarDemo';
+import { CardsDemo } from './CardsDemo';
+import { GradesDemo } from './GradesDemo';
+import { GuideDemo } from './GuideDemo';
+import { LabShell } from './LabShell';
+import { NotesDemo } from './NotesDemo';
+import { QuizDemo } from './QuizDemo';
+import { RoomsDemo } from './RoomsDemo';
+import { TutorDemo } from './TutorDemo';
+
+/** The fake address shown in the demo's chrome, per tool. */
+const ROUTES: Record<LabKind, string> = {
+  quiz: 'sapling.app / learn — quiz',
+  cards: 'sapling.app / study — flashcards',
+  notes: 'sapling.app / notetaker',
+  guide: 'sapling.app / study — guide',
+  rooms: 'sapling.app / social',
+  grades: 'sapling.app / gradebook / MA 242',
+  calendar: 'sapling.app / calendar',
+  tutor: 'sapling.app / learn — tutor',
+};
+
+const DEMOS: Record<LabKind, () => React.JSX.Element> = {
+  quiz: QuizDemo,
+  cards: CardsDemo,
+  notes: NotesDemo,
+  guide: GuideDemo,
+  rooms: RoomsDemo,
+  grades: GradesDemo,
+  calendar: CalendarDemo,
+  tutor: TutorDemo,
+};
+
+export function FeatureLabDemo({ kind }: { kind: LabKind }) {
+  const Demo = DEMOS[kind] ?? QuizDemo;
+  return (
+    // keyed so switching tools remounts rather than carrying state across
+    <LabShell route={ROUTES[kind] ?? 'sapling.app'}>
+      <Demo key={kind} />
+    </LabShell>
+  );
+}
diff --git a/frontend/src/components/landing-v5/lab/labData.ts b/frontend/src/components/landing-v5/lab/labData.ts
new file mode 100644
index 00000000..e8e608b5
--- /dev/null
+++ b/frontend/src/components/landing-v5/lab/labData.ts
@@ -0,0 +1,180 @@
+/**
+ * Fixture data for the eight feature-lab demos.
+ *
+ * Lifted verbatim from `FeatureLab.dc.html`, the separate design component
+ * the landing page mounts inside the lab's right pane. Content and tuning
+ * values only -- the behaviour lives in the demo components beside this.
+ *
+ * TIER here is the lab's own swatch set: `unexplored` is #C3CCC6, lighter
+ * than the landing graph's #9a9a9a, because these sit on cream cards rather
+ * than the dark act ground.
+ */
+
+export const TIER = { mastered:'#3a7d4e', learning:'#c89b5e', struggling:'#b25855', unexplored:'#C3CCC6' };
+
+export const TYPE = { exam:'#b25855', project:'#c89b5e', homework:'#0E9E5A', quiz:'#4FA574', reading:'#8FBFA3' };
+
+export const QUESTIONS = [
+  { concept:'Eigenvalues', diff:'MEDIUM',
+    text:'If A v = λ v for some non-zero v, what does λ tell you about what A does to v?',
+    options:[
+      { label:'A', text:'The angle that A rotates v through' },
+      { label:'B', text:'The factor that A scales v by', correct:true },
+      { label:'C', text:'The determinant of A' },
+      { label:'D', text:'The rank of A' }],
+    explain:'λ is a pure scale factor along v. An eigenvector\u2019s direction is unchanged by A — only its length is.' },
+  { concept:'Eigenvalues', diff:'HARD',
+    text:'Which equation do you solve to find the eigenvalues of a square matrix A?',
+    options:[
+      { label:'A', text:'det(A \u2212 \u03bbI) = 0', correct:true },
+      { label:'B', text:'A \u2212 \u03bbI = 0' },
+      { label:'C', text:'det(A) = \u03bb' },
+      { label:'D', text:'A v = 0' }],
+    explain:'Non-zero solutions of (A \u2212 \u03bbI)v = 0 exist exactly when A \u2212 \u03bbI is singular — that is, when its determinant vanishes.' },
+  { concept:'Eigenvalues', diff:'HARD',
+    text:'A 3\u00d73 matrix has eigenvalues 2, 2 and 5. What is det(A)?',
+    options:[
+      { label:'A', text:'9' },
+      { label:'B', text:'20', correct:true },
+      { label:'C', text:'4' },
+      { label:'D', text:'Not determined by the eigenvalues' }],
+    explain:'The determinant is the product of the eigenvalues counted with multiplicity: 2 \u00b7 2 \u00b7 5 = 20.' },
+];
+
+export const DECK = [
+  { q:'What equation gives the eigenvalues of A?', a:'det(A \u2212 \u03bbI) = 0 — the \u03bb that makes A \u2212 \u03bbI collapse.' },
+  { q:'What is an eigenvector of A?', a:'A non-zero v whose direction A leaves alone: A v = \u03bb v.' },
+  { q:'What does the eigenspace of \u03bb consist of?', a:'null(A \u2212 \u03bbI) — every v scaled by that \u03bb, plus the zero vector.' },
+  { q:'When is a matrix diagonalizable?', a:'When its eigenvectors span the space — n independent eigenvectors for an n\u00d7n matrix.' },
+];
+
+export const RATE_DUE = { '1':'10 min', '2':'1 day', '3':'4 days' };
+
+export const RATE_TONE = { '1':'#b25855', '2':'#c89b5e', '3':'#3a7d4e' };
+
+export const RATE_LABEL = { '1':'Forgot', '2':'Hard', '3':'Easy' };
+
+export const GUIDES = {
+  'MA 242': {
+    exams:['Midterm 2 \u00b7 Oct 24', 'Final \u00b7 Dec 12'],
+    overview:'Built from 11 documents in your library. Weighted toward the concepts you have missed most in quizzes this month.',
+    topics:[
+      { name:'Eigenvalues & eigenvectors', tier:'struggling', weight:'42%', importance:'You missed 4 of 6 quiz questions here.',
+        bullets:['Solve det(A \u2212 \u03bbI) = 0 for \u03bb, then null(A \u2212 \u03bbI) for the eigenspace.','Trace = sum of eigenvalues; determinant = their product.','Repeated \u03bb does not guarantee enough independent eigenvectors.'] },
+      { name:'Determinants', tier:'learning', weight:'33%', importance:'Shaky on 3\u00d73 cofactor expansion.',
+        bullets:['Expand along the row or column with the most zeros.','Row swaps flip the sign; scaling a row scales det.','det(AB) = det(A)det(B).'] },
+      { name:'Vector spaces', tier:'mastered', weight:'25%', importance:'Solid — light review only.',
+        bullets:['Check closure under addition and scalar multiplication.','rank + nullity = number of columns.'] }],
+  },
+  'CS 201': {
+    exams:['Midterm 1 \u00b7 Oct 17', 'Final \u00b7 Dec 09'],
+    overview:'Built from 7 documents in your library, weighted to the tree material you keep missing.',
+    topics:[
+      { name:'Balanced trees', tier:'struggling', weight:'48%', importance:'Rotations are your weakest concept in this course.',
+        bullets:['Four rotation cases: LL, LR, RL, RR.','AVL re-balances on every insert; red-black amortizes.','Height stays O(log n) — that is the whole point.'] },
+      { name:'Hashing', tier:'learning', weight:'30%', importance:'Two misses on collision handling.',
+        bullets:['Good hash: uniform spread, cheap, deterministic.','Chaining vs open addressing trade space for locality.'] },
+      { name:'Complexity', tier:'mastered', weight:'22%', importance:'Consistently correct — skim it.',
+        bullets:['Amortized \u2260 average case.','Master theorem for divide-and-conquer recurrences.'] }],
+  },
+  'PY 105': {
+    exams:['Midterm 2 \u00b7 Oct 21', 'Final \u00b7 Dec 15'],
+    overview:'Built from 9 documents in your library, weighted to rotational dynamics.',
+    topics:[
+      { name:'Rotational dynamics', tier:'struggling', weight:'45%', importance:'Half your missed questions live here.',
+        bullets:['\u03c4 = I\u03b1 is Newton\u2019s second law for rotation.','Parallel-axis theorem shifts I off the centre of mass.'] },
+      { name:'Conservation laws', tier:'learning', weight:'32%', importance:'Momentum fine, energy accounting shaky.',
+        bullets:['Check whether the collision is elastic before assuming KE holds.'] },
+      { name:'Kinematics', tier:'mastered', weight:'23%', importance:'Solid.',
+        bullets:['Pick the equation that omits the quantity you neither know nor want.'] }],
+  },
+};
+
+export const GB_ROWS = [
+  { title:'Pset 1 — Row reduction', cat:'PSETS', earned:47, possible:50 },
+  { title:'Pset 2 — Determinants', cat:'PSETS', earned:44, possible:50 },
+  { title:'Pset 3 — Eigenvalues', cat:'PSETS', earned:41, possible:50 },
+  { title:'Midterm 1', cat:'MIDTERMS', earned:88, possible:100 },
+  { title:'Midterm 2', cat:'MIDTERMS', earned:91, possible:100 },
+];
+
+export const GB_CATS = [ { name:'Psets', key:'PSETS', weight:0.40 }, { name:'Midterms', key:'MIDTERMS', weight:0.35 }, { name:'Final', key:'FINAL', weight:0.25 } ];
+
+/** Grade bands, ordered high to low — the first match wins. */
+export const LETTERS: [number, string][] = [[93,'A'],[90,'A\u2212'],[87,'B+'],[83,'B'],[80,'B\u2212'],[77,'C+'],[73,'C'],[70,'C\u2212'],[60,'D'],[0,'F']];
+
+export const CAL_BASE = [
+  { day:6, type:'homework', title:'Pset 4 — Eigenvalues', course:'MA 242' },
+  { day:9, type:'quiz', title:'Quiz 3', course:'CS 201' },
+  { day:15, type:'reading', title:'Ch. 6 — Diagonalization', course:'MA 242' },
+];
+
+export const CAL_SYLLABUS = [
+  { day:2, type:'homework', title:'Pset 5 — Null spaces', course:'MA 242' },
+  { day:11, type:'project', title:'Lab report 2', course:'PY 105' },
+  { day:17, type:'reading', title:'Ch. 7 — Orthogonality', course:'MA 242' },
+  { day:20, type:'quiz', title:'Quiz 4', course:'MA 242' },
+  { day:24, type:'exam', title:'Midterm 2', course:'MA 242' },
+  { day:29, type:'homework', title:'Pset 6 — Least squares', course:'MA 242' },
+];
+
+export const GRAPH_NODES = [
+  { id:'vs', name:'Vector spaces', x:70, y:70, mine:'mastered', partner:{ maya:'mastered', jack:'learning', priya:'mastered' } },
+  { id:'det', name:'Determinants', x:150, y:150, mine:'learning', partner:{ maya:'mastered', jack:'struggling', priya:'learning' } },
+  { id:'eig', name:'Eigenvalues', x:230, y:64, mine:'struggling', partner:{ maya:'mastered', jack:'struggling', priya:'struggling' } },
+  { id:'diag', name:'Diagonalization', x:320, y:140, mine:'unexplored', partner:{ maya:'learning', jack:'unexplored', priya:'mastered' } },
+  { id:'orth', name:'Orthogonality', x:360, y:56, mine:'mastered', partner:{ maya:'unexplored', jack:'mastered', priya:'unexplored' } },
+];
+
+export const GRAPH_EDGES = [ ['vs','det'], ['det','eig'], ['vs','eig'], ['eig','diag'], ['diag','orth'] ];
+
+export const TUTOR = {
+  socratic: {
+    label:'SOCRATIC', topic:'AVL ROTATIONS', tone:'#0E9E5A',
+    blurb:'It never hands over the answer. Pick a reply and watch where it takes you.',
+    open:'Before we touch rotations: what does an AVL tree promise about the heights of a node\u2019s two subtrees?',
+    steps:[
+      { replies:[
+          { text:'They differ by at most one', bot:'Right. So when an insert makes them differ by two, the tree has to act. What is the cheapest thing it could change?' },
+          { text:'They\u2019re always equal', bot:'Close, but stricter than reality. Perfect balance would cost too much on every insert. What is the loosest rule that still keeps height O(log n)?' },
+          { text:'I don\u2019t know', bot:'Then start smaller. If a node\u2019s left subtree is height 5 and its right is height 1, does lookup still feel logarithmic to you?' }] },
+      { replies:[
+          { text:'Move one node up and one down', bot:'That is exactly a rotation. Now: after a left rotation, which node ends up as the new root of that subtree?' },
+          { text:'Rebuild the whole subtree', bot:'It would work, but think about cost. Rebuilding is linear. Rotations are constant. What is the smallest edit that fixes the height?' }] },
+      { replies:[
+          { text:'The right child', bot:'Correct, and the old root becomes its left child. You just derived the rotation without being told it. Mastery on AVL rotations moved 24% \u2192 41%.' },
+          { text:'The parent stays root', bot:'That is the most common wrong answer, and it is worth sitting with. If the parent stayed root, what would have changed about the heights?' }] },
+    ],
+  },
+  expository: {
+    label:'EXPOSITORY', topic:'AVL ROTATIONS', tone:'#4FA574',
+    blurb:'Straight explanation, assembled from your own uploads and shown with its sources.',
+    open:'An AVL tree keeps every node\u2019s balance factor in {\u22121, 0, +1}. When an insert pushes a node to \u00b12, exactly one of four rotations restores it in O(1): LL, LR, RL, RR.',
+    sources:['lecture-07.pdf p. 12', 'notes-wk4.md'],
+    steps:[
+      { replies:[
+          { text:'Show me the LL case', bot:'LL means the left child\u2019s left subtree is too tall. One right rotation: the left child rises to root, the old root becomes its right child, and the left child\u2019s right subtree reattaches as the old root\u2019s left.', sources:['lecture-07.pdf p. 13'] },
+          { text:'Why not just rebuild?', bot:'Rebuilding is O(n) per insert. Rotations touch three pointers, so they are O(1), and the height guarantee holds either way. Constant beats linear on every insert.', sources:['lecture-07.pdf p. 12'] },
+          { text:'How is this different from red-black?', bot:'AVL re-balances eagerly and stays more tightly balanced, so lookups are slightly faster. Red-black tolerates more skew and rotates less, so inserts are cheaper. Your syllabus compares them in week 5.', sources:['syllabus.pdf', 'notes-wk5.md'] }] },
+      { replies:[
+          { text:'Give me a worked example', bot:'Insert 30, 20, 10. After 10, node 30 has balance +2 with the skew on its left-left. Right-rotate at 30: 20 becomes root, 10 its left child, 30 its right. Heights are 1 and 1.', sources:['lecture-07.pdf p. 14'] },
+          { text:'Quiz me instead', bot:'Then open the quiz surface from the rail. It will draw questions targeted at this node, since AVL rotations is your lowest-mastery concept in Trees.' }] },
+    ],
+  },
+  teachback: {
+    label:'TEACHBACK', topic:'AVL ROTATIONS', tone:'#E27A63',
+    blurb:'You do the explaining. It listens for the part you skipped.',
+    open:'Explain a left rotation to me as if I have never seen one. I will tell you exactly where it breaks down.',
+    steps:[
+      { replies:[
+          { text:'The right side gets heavy, so the parent moves down', bot:'Direction is right, and you named the trigger correctly. But you skipped the part that matters: you said the parent moves down without saying what takes its place. Which node becomes the new root?' },
+          { text:'You rotate until it\u2019s balanced', bot:'That describes the goal, not the mechanism. A grader would not give credit. Walk me through the pointers: what happens to the root, the right child, and the right child\u2019s left subtree?' }] },
+      { replies:[
+          { text:'The right child becomes the root', bot:'Yes. One gap left: the right child already had a left subtree. Where does it go?' },
+          { text:'I\u2019m not sure', bot:'Then we found the real gap. The right child rises to root. Say that back to me and keep going.' }] },
+      { replies:[
+          { text:'It reattaches as the old root\u2019s right child', bot:'That is the complete explanation, and you got there yourself. Gaps closed: 2 of 2. Mastery on AVL rotations moved 24% \u2192 52%, higher than reading would have earned.' },
+          { text:'It gets discarded', bot:'It cannot be, that would lose keys. Every value in it sits between the old root and the new one, so it becomes the old root\u2019s right child. Worth re-explaining once more.' }] },
+    ],
+  },
+};
diff --git a/frontend/src/components/landing-v5/navTheme.ts b/frontend/src/components/landing-v5/navTheme.ts
new file mode 100644
index 00000000..ba92772a
--- /dev/null
+++ b/frontend/src/components/landing-v5/navTheme.ts
@@ -0,0 +1,112 @@
+'use client';
+
+/**
+ * The navbar's two colour states, and the scroll rule that picks between them.
+ *
+ * Every value here is lifted verbatim from `renderVals()` in
+ * `Sapling Landing v5.dc.html`, which builds the full two-theme table —
+ * and then never uses the dark half, because the scroll handler hardwires
+ * `const wantDark = false`.
+ *
+ * We wire it up. The page passes through two full-bleed dark acts; leaving
+ * the navbar in its light palette over them is plainly a stub rather than a
+ * design intent, and the design brief calls for the interpolation. The rule
+ * below is the one the dead code was shaped for: whichever section owns the
+ * vertical centre of the viewport decides the theme.
+ */
+
+import { useEffect, useState } from 'react';
+
+export interface NavTheme {
+  /** Resting link colour. */
+  ink: string;
+  /** Hover / current-page colour. */
+  inkHi: string;
+  logo: string;
+  /** CSS filter applied to the leaf mark, to lift it off a dark ground. */
+  iconFilter: string;
+  rule: string;
+  pillBorder: string;
+  pillBg: string;
+  pillFg: string;
+  btnBg: string;
+  btnFg: string;
+  /** The 92px blurred band behind the bar. */
+  scrim: string;
+}
+
+export const NAV_LIGHT: NavTheme = {
+  ink: '#61726A',
+  inkHi: '#12201A',
+  logo: '#0C5638',
+  iconFilter: 'none',
+  rule: 'rgba(18,32,26,0.14)',
+  pillBorder: 'rgba(18,32,26,0.14)',
+  pillBg: 'rgba(253,252,249,0.72)',
+  pillFg: '#12201A',
+  btnBg: '#0C5638',
+  btnFg: '#fff',
+  scrim:
+    'linear-gradient(180deg, rgba(240,244,242,0.94) 0%, rgba(240,244,242,0.5) 52%, rgba(240,244,242,0) 100%)',
+};
+
+export const NAV_DARK: NavTheme = {
+  ink: 'rgba(214,234,222,0.62)',
+  inkHi: '#F2FAF5',
+  logo: '#EAF3EC',
+  iconFilter: 'brightness(1.85) saturate(0.95)',
+  rule: 'rgba(214,234,222,0.2)',
+  pillBorder: 'rgba(214,234,222,0.2)',
+  pillBg: 'rgba(255,255,255,0.06)',
+  pillFg: '#EAF3EC',
+  btnBg: '#EAF3EC',
+  btnFg: '#07301E',
+  scrim:
+    'linear-gradient(180deg, rgba(6,23,16,0.88) 0%, rgba(6,23,16,0.42) 52%, rgba(6,23,16,0) 100%)',
+};
+
+/** The three sections that sit on the dark ground. */
+const DARK_SECTIONS = ['act-graph', 'act-ingest', 'act-tutor'];
+
+/**
+ * True while the viewport's vertical centre sits inside a dark act.
+ *
+ * Reads layout on scroll, but only `getBoundingClientRect()` on at most
+ * three elements and only when the flag would actually change — the
+ * transitions themselves are CSS, so there is no per-frame work here.
+ */
+export function useNavDark(enabled = true): boolean {
+  const [dark, setDark] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) return;
+    let raf = 0;
+
+    const read = () => {
+      raf = 0;
+      const mid = window.innerHeight / 2;
+      const inDark = DARK_SECTIONS.some((id) => {
+        const el = document.getElementById(id);
+        if (!el) return false;
+        const r = el.getBoundingClientRect();
+        return r.top <= mid && r.bottom >= mid;
+      });
+      setDark((prev) => (prev === inDark ? prev : inDark));
+    };
+
+    const onScroll = () => {
+      if (!raf) raf = requestAnimationFrame(read);
+    };
+
+    read();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [enabled]);
+
+  return dark;
+}
diff --git a/frontend/src/components/landing/useLanding.ts b/frontend/src/components/landing/useLanding.ts
new file mode 100644
index 00000000..853e8c1f
--- /dev/null
+++ b/frontend/src/components/landing/useLanding.ts
@@ -0,0 +1,663 @@
+'use client';
+
+/**
+ * The bridge between React and the imperative landing engine.
+ *
+ * Ported from the `Component` class in `Sapling Landing v4.dc.html`. React
+ * owns the discrete state (which card is open, which tutor mode, which FAQ);
+ * the engine owns everything that changes per frame and writes it straight to
+ * the DOM. The two meet here.
+ *
+ * State the engine needs to *read* is mirrored into refs, so the engine's
+ * getters never close over a stale render.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { humanizeError } from '@/lib/errorMessage';
+import { SCRAMBLE } from '@/lib/landing/content';
+import { LandingEngine } from '@/lib/landing/engine';
+import type { BuiltGraph } from '@/lib/landing/engine/graph';
+import { armFlip, flipClose, flipOpen } from '@/lib/landing/engine/flip';
+import {
+  beginExitExplore, beginExplore, pickNode, settleExitExplore,
+} from '@/lib/landing/engine/graphView';
+
+/** How long the intro overlay holds before the hero takes over. */
+const INTRO_MS = 1900;
+/** Explore exit transition length, after which the camera hands back. */
+const EXPLORE_OUT_MS = 720;
+const SCRAMBLE_TICK_MS = 30;
+
+/** One text slot scrambling into place during the intro cascade. */
+export interface ScrambleStep {
+  /** Which of the three hero text slots this step drives. */
+  slot: 0 | 1 | 2;
+  /** The string it settles on. */
+  text: string;
+  durationMs: number;
+  /** Offset from the moment the hero mounts. Defaults to 0. */
+  delayMs?: number;
+}
+
+/**
+ * v5's cascade — the tagline leads and the wordmark follows 260ms behind.
+ *
+ * This is the reverse of v4's order, and both durations are shorter. The
+ * v4 title screen it replaced has been deleted; the cascade stays a prop
+ * so the sequence is stated at the call site rather than buried here.
+ */
+const DEFAULT_CASCADE: ScrambleStep[] = [
+  { slot: 0, text: 'Grow Your Knowledge', durationMs: 760 },
+  { slot: 1, text: 'Sapling', durationMs: 1000, delayMs: 260 },
+];
+
+export interface LandingProps {
+  /** Parallax intensity, 0..2. */
+  parallax?: number;
+  fireflies?: boolean;
+  /** Bypass the intro entirely (0ms delay). */
+  skipIntro?: boolean;
+  /** The intro scramble cascade. Defaults to v5's. */
+  cascade?: ScrambleStep[];
+  /** Run the `LOADING 000→100` counter behind the intro overlay. */
+  loadCounter?: boolean;
+}
+
+export interface LandingRefs {
+  root: React.RefObject<HTMLDivElement | null>;
+  nav: React.RefObject<HTMLElement | null>;
+  heroContent: React.RefObject<HTMLDivElement | null>;
+  heroCanvas: React.RefObject<HTMLCanvasElement | null>;
+  /** The WebGL canvas the v5 hero's three.js scene renders into. */
+  glCanvas: React.RefObject<HTMLCanvasElement | null>;
+  actCanvas: React.RefObject<HTMLCanvasElement | null>;
+  ambientCanvas: React.RefObject<HTMLCanvasElement | null>;
+  plantCanvas: React.RefObject<HTMLCanvasElement | null>;
+  carousel: React.RefObject<HTMLDivElement | null>;
+  ingestScene: React.RefObject<HTMLDivElement | null>;
+  ingestStage: React.RefObject<HTMLDivElement | null>;
+  cinema: React.RefObject<HTMLDivElement | null>;
+  panel: React.RefObject<HTMLDivElement | null>;
+  trackA: React.RefObject<HTMLDivElement | null>;
+  trackB: React.RefObject<HTMLDivElement | null>;
+}
+
+export function useLanding(props: LandingProps) {
+  const {
+    parallax = 1, skipIntro = false,
+    cascade = DEFAULT_CASCADE, loadCounter = false,
+  } = props;
+
+  // ── discrete state ────────────────────────────────────────────────────
+  const [heroMounted, setHeroMounted] = useState(false);
+  const [heroText0, setHeroText0] = useState('');
+  const [heroText1, setHeroText1] = useState('');
+  const [heroText2, setHeroText2] = useState('');
+  /** Fake progress behind the intro overlay, 0..100. */
+  const [loadPct, setLoadPct] = useState(0);
+  /** True once the overlay has faded out and can leave the tree entirely. */
+  const [introGone, setIntroGone] = useState(false);
+  /**
+   * The engine's graph, published once it exists.
+   *
+   * Must be the engine's own instance, not a second `buildGraph()` — the
+   * builder seeds and shuffles with `Math.random`, so a separate call would
+   * produce different node ordering and the explore HUD would describe a
+   * different node than the one the canvas highlighted.
+   */
+  const [graph, setGraph] = useState<BuiltGraph | null>(null);
+  const [tutorMode, setTutorMode] = useState(0);
+  const [galIdx, setGalIdx] = useState(-1);
+  const [modalAnim, setModalAnim] = useState(false);
+  const [jumpOpen, setJumpOpen] = useState(false);
+  const [pastHero, setPastHero] = useState(false);
+  const [navMenuOpen, setNavMenuOpen] = useState(false);
+  const [exploring, setExploring] = useState(false);
+  const [expNode, setExpNode] = useState<number | null>(null);
+  const [openFaq, setOpenFaq] = useState(0);
+  const [email, setEmail] = useState('');
+  const [subscribed, setSubscribed] = useState(false);
+  /** In flight, so the form can disable rather than double-post. */
+  const [subscribing, setSubscribing] = useState(false);
+  /** Null unless the last attempt failed; shown next to the field. */
+  const [subscribeError, setSubscribeError] = useState<string | null>(null);
+  const [plantVal, setPlantVal] = useState('');
+  const [plantedCount, setPlantedCount] = useState(0);
+  const [jumpDown, setJumpDown] = useState(false);
+
+  // Declared individually rather than as an object: React's refs lint rule
+  // rejects `ref={obj.someRef}` in JSX, and flat refs read better at the call
+  // site anyway. They are grouped into `refs` below purely for the engine.
+  const rootRef = useRef<HTMLDivElement>(null);
+  const navRef = useRef<HTMLElement>(null);
+  const heroContentRef = useRef<HTMLDivElement>(null);
+  const heroCanvasRef = useRef<HTMLCanvasElement>(null);
+  const glCanvasRef = useRef<HTMLCanvasElement>(null);
+  const actCanvasRef = useRef<HTMLCanvasElement>(null);
+  const ambientCanvasRef = useRef<HTMLCanvasElement>(null);
+  const plantCanvasRef = useRef<HTMLCanvasElement>(null);
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const ingestSceneRef = useRef<HTMLDivElement>(null);
+  const ingestStageRef = useRef<HTMLDivElement>(null);
+  const cinemaRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const trackARef = useRef<HTMLDivElement>(null);
+  const trackBRef = useRef<HTMLDivElement>(null);
+
+  const refs: LandingRefs = {
+    root: rootRef, nav: navRef, heroContent: heroContentRef, heroCanvas: heroCanvasRef,
+    glCanvas: glCanvasRef,
+    actCanvas: actCanvasRef, ambientCanvas: ambientCanvasRef, plantCanvas: plantCanvasRef,
+    carousel: carouselRef, ingestScene: ingestSceneRef, ingestStage: ingestStageRef,
+    cinema: cinemaRef, panel: panelRef, trackA: trackARef, trackB: trackBRef,
+  };
+
+  // ── mirrors, so the engine never reads a stale render ─────────────────
+  const s = useRef({
+    exploring, expNode, tutorMode, jumpOpen, pastHero, jumpDown, galIdx, parallax,
+  });
+  s.current = { exploring, expNode, tutorMode, jumpOpen, pastHero, jumpDown, galIdx, parallax };
+
+  const expOut = useRef(false);
+  const mqDragged = useRef(false);
+  const flipRan = useRef(false);
+  const engineRef = useRef<LandingEngine | null>(null);
+
+  // ── engine lifecycle ──────────────────────────────────────────────────
+  useEffect(() => {
+    const engine = new LandingEngine(
+      {
+        get root() { return refs.root.current; },
+        get nav() { return refs.nav.current; },
+        get heroContent() { return refs.heroContent.current; },
+        get actCanvas() { return refs.actCanvas.current; },
+        get ambientCanvas() { return refs.ambientCanvas.current; },
+        get plantCanvas() { return refs.plantCanvas.current; },
+        get carousel() { return refs.carousel.current; },
+        get ingestScene() { return refs.ingestScene.current; },
+        get ingestStage() { return refs.ingestStage.current; },
+      },
+      {
+        getExploring: () => s.current.exploring,
+        getExpOut: () => expOut.current,
+        getExpNode: () => s.current.expNode,
+        getTutorMode: () => s.current.tutorMode,
+        setTutorMode: (v) => setTutorMode(v),
+        getJumpOpen: () => s.current.jumpOpen,
+        getPastHero: () => s.current.pastHero,
+        setPastHero: (v) => {
+          setPastHero(v);
+          if (!v) setJumpOpen(false);
+        },
+        getJumpDown: () => s.current.jumpDown,
+        setJumpDown: (v) => setJumpDown(v),
+        getParallax: () => s.current.parallax,
+        onOpenGallery: (i, el) => openGal(i, el),
+        setMarqueeDragged: (v) => { mqDragged.current = v; },
+      },
+    );
+    engineRef.current = engine;
+    setGraph(engine.graph);
+    engine.plant.restore(refs.plantCanvas.current);
+    setPlantedCount(engine.plant.labels.length);
+    engine.start();
+    engine.refitIngest();
+
+    const onResize = () => engine.refitIngest();
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+      engine.stop();
+      engineRef.current = null;
+      document.body.style.overflow = '';
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── hero canvas (own loop) ────────────────────────────────────────────
+  useEffect(() => {
+    const canvas = refs.heroCanvas.current;
+    const engine = engineRef.current;
+    if (!canvas || !engine) return;
+    let stopped: { stop(): void } | null = null;
+    // imported lazily so the module isn't pulled into the server bundle
+    import('@/lib/landing/engine/hero').then(({ startHeroCanvas }) => {
+      stopped = startHeroCanvas(canvas, () => engine.mouse, () => engine.parallaxY);
+    });
+    return () => stopped?.stop();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── hero WebGL panel rig (own loop) ───────────────────────────────────
+  useEffect(() => {
+    const canvas = refs.glCanvas.current;
+    const engine = engineRef.current;
+    if (!canvas || !engine) return;
+    let rig: { stop(): void } | null = null;
+    let cancelled = false;
+    // three.js is heavy and browser-only; keep it out of the server bundle
+    // and off the critical path
+    import('@/lib/landing/hero3d').then(({ startHeroRig }) => {
+      if (cancelled) return;
+      rig = startHeroRig(canvas, () => engine.mouse, () => engine.heroShiftPx);
+    });
+    return () => {
+      cancelled = true;
+      rig?.stop();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── mouse, nav auto-hide, escape ──────────────────────────────────────
+  useEffect(() => {
+    const onMouse = (e: MouseEvent) => {
+      const engine = engineRef.current;
+      if (engine) {
+        engine.mouse = {
+          x: (e.clientX / window.innerWidth - 0.5) * 2,
+          y: (e.clientY / window.innerHeight - 0.5) * 2,
+        };
+      }
+    };
+    document.addEventListener('mousemove', onMouse);
+
+    let lastSy = window.scrollY;
+    const onScroll = () => {
+      const sy = window.scrollY;
+      const nav = refs.nav.current;
+      if (nav) {
+        const down = sy > lastSy;
+        const past = sy > window.innerHeight * 0.5;
+        nav.style.transform = down && past ? 'translateY(-100%)' : 'translateY(0)';
+      }
+      lastSy = sy;
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      if (s.current.galIdx >= 0) closeGal();
+      else if (s.current.jumpOpen) setJumpOpen(false);
+    };
+    document.addEventListener('keydown', onKey);
+
+    const onAway = (e: PointerEvent) => {
+      const el = e.target as Element | null;
+      if (s.current.jumpOpen && !el?.closest?.('.sapling-nav')) setJumpOpen(false);
+      if (!el?.closest?.('.nav-panel, .nav-compact')) setNavMenuOpen(false);
+    };
+    document.addEventListener('pointerdown', onAway);
+
+    return () => {
+      document.removeEventListener('mousemove', onMouse);
+      window.removeEventListener('scroll', onScroll);
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('pointerdown', onAway);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── intro: overlay holds, then hero scrambles in ──────────────────────
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = [];
+    const intervals: ReturnType<typeof setInterval>[] = [];
+
+    const scramble = (set: (v: string) => void, final: string, duration: number) => {
+      const start = Date.now();
+      const iv = setInterval(() => {
+        const progress = (Date.now() - start) / duration;
+        if (progress >= 1) {
+          set(final);
+          clearInterval(iv);
+          return;
+        }
+        // characters lock in left-to-right as progress passes their index
+        set(
+          final
+            .split('')
+            .map((ch, idx) => {
+              if (ch === ' ') return ch;
+              if (progress > idx / final.length) return ch;
+              return SCRAMBLE[Math.floor(Math.random() * SCRAMBLE.length)];
+            })
+            .join(''),
+        );
+      }, SCRAMBLE_TICK_MS);
+      intervals.push(iv);
+    };
+
+    const setters = [setHeroText0, setHeroText1, setHeroText2];
+
+    timers.push(
+      setTimeout(() => {
+        setHeroMounted(true);
+        // the overlay fades over 700ms; drop it from the tree just after
+        timers.push(setTimeout(() => setIntroGone(true), 900));
+        cascade.forEach((step) => {
+          const run = () => scramble(setters[step.slot], step.text, step.durationMs);
+          if (step.delayMs) timers.push(setTimeout(run, step.delayMs));
+          else run();
+        });
+      }, skipIntro ? 0 : INTRO_MS),
+    );
+
+    return () => {
+      timers.forEach(clearTimeout);
+      intervals.forEach(clearInterval);
+    };
+  }, [skipIntro, cascade]);
+
+  // ── LOADING counter behind the overlay ────────────────────────────────
+  // Ticks every 62ms in ragged +4..+12 jumps, exactly as the source does —
+  // the unevenness is what makes it read as real work rather than a timer.
+  useEffect(() => {
+    if (!loadCounter) return;
+    const iv = setInterval(() => {
+      setLoadPct((p) => {
+        if (p >= 100) { clearInterval(iv); return 100; }
+        return Math.min(100, p + Math.ceil(Math.random() * 9) + 3);
+      });
+    }, 62);
+    return () => clearInterval(iv);
+  }, [loadCounter]);
+
+  // ── [data-reveal] fade-ups ────────────────────────────────────────────
+  useEffect(() => {
+    const root = refs.root.current;
+    if (!root) return;
+    const seen = new WeakSet<Element>();
+    const io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((en) => {
+          if (!en.isIntersecting) return;
+          const el = en.target as HTMLElement;
+          el.style.transition =
+            'opacity 800ms cubic-bezier(0.22,1,0.36,1), transform 800ms cubic-bezier(0.22,1,0.36,1)';
+          el.style.opacity = '1';
+          el.style.transform = 'translateY(0px)';
+          io.unobserve(el);
+        });
+      },
+      { threshold: 0.12 },
+    );
+    const scan = () => {
+      root.querySelectorAll<HTMLElement>('[data-reveal]').forEach((el) => {
+        if (seen.has(el)) return;
+        seen.add(el);
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(28px)';
+        io.observe(el);
+      });
+    };
+    scan();
+    const iv = setInterval(scan, 900);
+    return () => {
+      clearInterval(iv);
+      io.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── pause CSS animations in off-screen sections ───────────────────────
+  // Set directly on the animated nodes: toggling a class on the section
+  // forces a full subtree style recalc.
+  useEffect(() => {
+    if (!('IntersectionObserver' in window)) return;
+    let io: IntersectionObserver | null = null;
+    const t = setTimeout(() => {
+      const root = refs.root.current;
+      if (!root) return;
+      io = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((en) => {
+            const list = (en.target as HTMLElement & { __animEls?: HTMLElement[] }).__animEls;
+            if (!list) return;
+            const st = en.isIntersecting ? '' : 'paused';
+            for (let i = 0; i < list.length; i++) {
+              if (list[i].style.animationPlayState !== st) list[i].style.animationPlayState = st;
+            }
+          });
+        },
+        { rootMargin: '15% 0px' },
+      );
+      root.querySelectorAll('section').forEach((sec) => {
+        const els = Array.from(sec.querySelectorAll<HTMLElement>('*')).filter((el) => {
+          const n = getComputedStyle(el).animationName;
+          return n && n !== 'none';
+        });
+        if (!els.length) return;
+        (sec as HTMLElement & { __animEls?: HTMLElement[] }).__animEls = els;
+        io!.observe(sec);
+      });
+    }, 1200);
+    return () => {
+      clearTimeout(t);
+      io?.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── explore mode ──────────────────────────────────────────────────────
+  const enterExplore = useCallback(() => {
+    const engine = engineRef.current;
+    if (!engine || s.current.exploring) return;
+    expOut.current = false;
+    beginExplore(engine.view, engine.graph);
+    document.body.style.overflow = 'hidden';
+    const cinema = refs.cinema.current;
+    if (cinema) {
+      cinema.style.opacity = '0';
+      cinema.style.pointerEvents = 'none';
+    }
+    setExploring(true);
+    setExpNode(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const exitExplore = useCallback(() => {
+    const engine = engineRef.current;
+    if (!engine || !s.current.exploring || expOut.current) return;
+    document.body.style.overflow = '';
+    const cinema = refs.cinema.current;
+    if (cinema) cinema.style.opacity = '';
+    expOut.current = true;
+    beginExitExplore(engine.view);
+    setExploring(false);
+    setExpNode(null);
+    setTimeout(() => {
+      expOut.current = false;
+      settleExitExplore(engine.view);
+    }, EXPLORE_OUT_MS);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── act canvas pointer handling (orbit, hover, pick) ──────────────────
+  useEffect(() => {
+    const canvas = refs.actCanvas.current;
+    const engine = engineRef.current;
+    if (!canvas || !engine) return;
+    const view = engine.view;
+    let dragging = false;
+    let lastX = 0;
+    let lastY = 0;
+    let moved = 0;
+
+    const onDown = (e: PointerEvent) => {
+      dragging = true;
+      moved = 0;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      canvas.style.cursor = 'grabbing';
+      try { canvas.setPointerCapture(e.pointerId); } catch { /* not captureable */ }
+    };
+    const onMove = (e: PointerEvent) => {
+      const r = canvas.getBoundingClientRect();
+      view.actMouse = { x: e.clientX - r.left, y: e.clientY - r.top };
+      if (s.current.exploring && !dragging) {
+        const hit = pickNode(view, view.actMouse);
+        const id = hit ? hit.i : null;
+        if (id !== view.expHover) {
+          view.expHover = id;
+          canvas.style.cursor = id !== null ? 'pointer' : 'grab';
+        }
+      }
+      if (!dragging) return;
+      moved += Math.abs(e.clientX - lastX) + Math.abs(e.clientY - lastY);
+      view.orbY += (e.clientX - lastX) * 0.005;
+      view.orbX = Math.max(-0.5, Math.min(0.5, view.orbX + (e.clientY - lastY) * 0.003));
+      lastX = e.clientX;
+      lastY = e.clientY;
+    };
+    const onUp = (e: PointerEvent) => {
+      dragging = false;
+      canvas.style.cursor = 'grab';
+      if (moved > 6) return;
+      if (!s.current.exploring) { enterExplore(); return; }
+      const r = canvas.getBoundingClientRect();
+      const hit = pickNode(view, { x: e.clientX - r.left, y: e.clientY - r.top });
+      setExpNode(hit ? hit.i : null);
+    };
+    const onLeave = () => { view.actMouse = null; view.expHover = null; };
+    const onWheel = (e: WheelEvent) => {
+      if (!s.current.exploring) return;
+      e.preventDefault();
+      view.expZoom = Math.max(0.3, Math.min(3, view.expZoom * (e.deltaY > 0 ? 0.92 : 1.08)));
+    };
+
+    canvas.addEventListener('pointerdown', onDown);
+    canvas.addEventListener('pointermove', onMove);
+    canvas.addEventListener('pointerup', onUp);
+    canvas.addEventListener('pointerleave', onLeave);
+    canvas.addEventListener('wheel', onWheel, { passive: false });
+    return () => {
+      canvas.removeEventListener('pointerdown', onDown);
+      canvas.removeEventListener('pointermove', onMove);
+      canvas.removeEventListener('pointerup', onUp);
+      canvas.removeEventListener('pointerleave', onLeave);
+      canvas.removeEventListener('wheel', onWheel);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enterExplore]);
+
+  // ── marquee binding ───────────────────────────────────────────────────
+  useEffect(() => {
+    const engine = engineRef.current;
+    if (!engine) return;
+    if (refs.trackA.current) engine.marquee.bind(refs.trackA.current, 1);
+    if (refs.trackB.current) engine.marquee.bind(refs.trackB.current, -1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── feature lab ───────────────────────────────────────────────────────
+  const openGal = useCallback((i: number, from: HTMLElement | null) => {
+    const engine = engineRef.current;
+    if (!engine) return;
+    document.body.style.overflow = 'hidden';
+    armFlip(engine.flip, from);
+    flipRan.current = false;
+    setGalIdx(i);
+    setModalAnim(true);
+     
+  }, []);
+
+  const closeGal = useCallback(() => {
+    const engine = engineRef.current;
+    if (!engine) return;
+    flipRan.current = false;
+    setModalAnim(false);
+    flipClose(engine.flip, refs.panel.current, () => {
+      document.body.style.overflow = '';
+      setGalIdx(-1);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /** Runs the open FLIP once the overlay panel has actually mounted. */
+  const registerPanel = useCallback((el: HTMLDivElement | null) => {
+    refs.panel.current = el;
+    const engine = engineRef.current;
+    if (el && engine && !flipRan.current) {
+      flipRan.current = true;
+      flipOpen(engine.flip, el);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── newsletter / beta list ────────────────────────────────────────────
+  /**
+   * POSTs to the real endpoint and only reports success on a 2xx.
+   *
+   * The backend upserts on `email`, so signing up twice is a no-op there and
+   * a second submit lands on the same success state rather than an error.
+   */
+  const subscribeNow = useCallback(async () => {
+    const value = email.trim();
+    if (!value.includes('@') || subscribing) return;
+    setSubscribing(true);
+    setSubscribeError(null);
+    try {
+      const { subscribeToNewsletter } = await import('@/lib/api');
+      await subscribeToNewsletter(value);
+      setSubscribed(true);
+    } catch (err) {
+      // `lib/api.ts` rejects with the raw response body, which is how
+      // "Internal Server Error" ends up rendered at a user. humanizeError
+      // keeps a server-supplied `detail` when there is one (a 422 on a bad
+      // address is worth reading) and swaps anything else for the fallback.
+      setSubscribeError(humanizeError(err, 'Could not sign you up just now. Please try again.'));
+    } finally {
+      setSubscribing(false);
+    }
+  }, [email, subscribing]);
+
+  // ── navigation ────────────────────────────────────────────────────────
+  const scrollToId = useCallback((id: string) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    const y = el.getBoundingClientRect().top + window.scrollY - 40;
+    engineRef.current?.markJump();
+    window.scrollTo({ top: y, behavior: 'smooth' });
+  }, []);
+
+  const scrollTop = useCallback(() => {
+    engineRef.current?.markJump();
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, []);
+
+  // ── plant a concept ───────────────────────────────────────────────────
+  const plant = useCallback(() => {
+    const engine = engineRef.current;
+    if (!engine) return;
+    const n = engine.plant.plant(refs.plantCanvas.current, plantVal);
+    if (n < 0) return;
+    setPlantVal('');
+    setPlantedCount(n);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plantVal]);
+
+  return {
+    rootRef, navRef, heroContentRef, heroCanvasRef, glCanvasRef, actCanvasRef, ambientCanvasRef,
+    plantCanvasRef, carouselRef, ingestSceneRef, ingestStageRef, cinemaRef,
+    trackARef, trackBRef,
+    engineRef,
+    state: {
+      heroMounted, heroText0, heroText1, heroText2, loadPct, introGone, graph,
+      tutorMode, galIdx, modalAnim, jumpOpen,
+      pastHero, navMenuOpen, exploring, expNode, openFaq, email, subscribed,
+      subscribing, subscribeError,
+      plantVal, plantedCount, jumpDown,
+    },
+    set: {
+      setTutorMode, setJumpOpen, setNavMenuOpen, setOpenFaq, setEmail,
+      setSubscribed, setPlantVal, setExpNode,
+    },
+    actions: {
+      enterExplore, exitExplore, openGal, closeGal, registerPanel,
+      scrollToId, scrollTop, plant,
+      subscribe: subscribeNow,
+      resetSubscribeError: () => setSubscribeError(null),
+    },
+    mqDragged,
+    expOut,
+  };
+}
diff --git a/frontend/src/components/marketing/FeatureBand.test.tsx b/frontend/src/components/marketing/FeatureBand.test.tsx
deleted file mode 100644
index 828009ae..00000000
--- a/frontend/src/components/marketing/FeatureBand.test.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-// @vitest-environment jsdom
-/**
- * The band's two load-bearing behaviours (#344 step 2).
- *
- * 1. **Alternation.** The spec's requirement is that the product surfaces
- *    alternate sides down the page. `featureBands.tsx` derives `surfaceSide`
- *    from position rather than writing it down per band, so this asserts the
- *    invariant (adjacent bands differ) instead of restating three literals —
- *    inserting a band can't silently put two surfaces in the same gutter.
- * 2. **DOM order is always copy-first.** The flip is a `grid-column` swap in
- *    CSS, never a source reorder, because the source order is what the phone
- *    layout and a screen reader get. A regression to `flex-direction:
- *    row-reverse` on the markup would pass a visual check and fail this.
- */
-import React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, screen, cleanup, within } from '@testing-library/react';
-
-import FeatureBand from './FeatureBand';
-import { FEATURE_BANDS } from './featureBands';
-
-afterEach(cleanup);
-
-/** Every band, mounted the way `page.tsx` mounts them. */
-function renderAll() {
-  return render(
-    <div className="landing-page">
-      {FEATURE_BANDS.map((b) => (
-        <FeatureBand key={b.id} {...b} />
-      ))}
-    </div>,
-  );
-}
-
-describe('featureBands', () => {
-  it('carries the three bands of the material-in → practice → retention arc', () => {
-    expect(FEATURE_BANDS.map((b) => b.id)).toEqual(['upload', 'quiz', 'review']);
-  });
-
-  it('alternates the surface side between consecutive bands', () => {
-    for (let i = 1; i < FEATURE_BANDS.length; i++) {
-      expect(
-        FEATURE_BANDS[i].surfaceSide,
-        `band ${FEATURE_BANDS[i].id} must not share a side with ${FEATURE_BANDS[i - 1].id}`,
-      ).not.toBe(FEATURE_BANDS[i - 1].surfaceSide);
-    }
-  });
-
-  it('opens on the left so the first surface sits under the graph, not beside the CTA', () => {
-    expect(FEATURE_BANDS[0].surfaceSide).toBe('left');
-  });
-
-  it('addresses the student and avoids the banned marketing vocabulary', () => {
-    // The brand guide bans these outright; "AI-powered" is banned as a badge.
-    const banned = /leverage|empower|seamless|revolutionary|cutting-edge|synergy|ai-powered/i;
-    for (const b of FEATURE_BANDS) {
-      const copy = `${b.eyebrow} ${b.headline} ${b.body}`;
-      expect(copy, b.id).not.toMatch(banned);
-    }
-  });
-});
-
-describe('FeatureBand', () => {
-  it('renders each band with its eyebrow, headline, body and surface', () => {
-    renderAll();
-    for (const b of FEATURE_BANDS) {
-      const band = screen.getByTestId(`landing-band-${b.id}`);
-      expect(within(band).getByTestId(`landing-band-${b.id}-eyebrow`)).toHaveTextContent(b.eyebrow);
-      expect(within(band).getByRole('heading', { level: 2 })).toHaveTextContent(b.headline);
-      expect(band).toHaveTextContent(b.body);
-      // The surface is a real recreation, not an empty slot.
-      expect(band.querySelector('.landing-surface')).toBeTruthy();
-    }
-  });
-
-  it('exposes the resolved side on the section, and matches it to the layout class', () => {
-    renderAll();
-    for (const b of FEATURE_BANDS) {
-      const band = screen.getByTestId(`landing-band-${b.id}`);
-      expect(band).toHaveAttribute('data-surface-side', b.surfaceSide);
-      expect(band.querySelector(`.landing-band--surface-${b.surfaceSide}`)).toBeTruthy();
-    }
-  });
-
-  it('keeps the copy before the surface in the DOM regardless of which side it renders on', () => {
-    renderAll();
-    for (const b of FEATURE_BANDS) {
-      const grid = screen.getByTestId(`landing-band-${b.id}`).querySelector('.landing-band-grid')!;
-      const kids = Array.from(grid.children);
-      expect(kids[0].className, b.id).toContain('landing-band-copy');
-      expect(kids[1].className, b.id).toContain('landing-band-surface');
-    }
-  });
-
-  it('names each band for assistive tech via its own headline', () => {
-    renderAll();
-    for (const b of FEATURE_BANDS) {
-      const band = screen.getByTestId(`landing-band-${b.id}`);
-      expect(band).toHaveAttribute('aria-labelledby', `band-${b.id}-headline`);
-      expect(band.querySelector(`#band-${b.id}-headline`)).toBeTruthy();
-    }
-  });
-
-  it('ships no interactive controls — the surfaces are pictures, not widgets', () => {
-    // The spec's "no per-tile buttons". It is also what makes reduced-motion /
-    // IS_TEST_MODE parking a non-issue here: there is no frame but the
-    // complete one.
-    const { container } = renderAll();
-    expect(container.querySelectorAll('button, input, textarea, a')).toHaveLength(0);
-  });
-});
diff --git a/frontend/src/components/marketing/FeatureBand.tsx b/frontend/src/components/marketing/FeatureBand.tsx
deleted file mode 100644
index 852d46bf..00000000
--- a/frontend/src/components/marketing/FeatureBand.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * A full-width feature band: one recreated product surface on one side, the
- * claim on the other (#344 step 2, spec sections 2/3/5).
- *
- * Purely presentational. It owns three things and nothing else:
- *
- *  1. **The alternation.** `surfaceSide` decides which column the surface lands
- *     in at ≥ 900px. The DOM order is always copy-then-surface — a screen
- *     reader and every phone get the claim before the illustration of it, and
- *     the desktop flip is a `grid-column` swap, not a source reorder.
- *  2. **Atmospheric continuity.** The hero, the graph section and the CTA all
- *     carry mesh blobs; three bands and a bento between the last two would
- *     otherwise be a flat hole in the middle of the page, and the cut in and out
- *     of it reads as a seam. One low-opacity blob per band, parked behind the
- *     COPY column (never behind the surface, which has to stay crisp).
- *  3. **The type ramp.** Mono eyebrow → Playfair headline → DM Sans body, the
- *     same three-step the graph section above it uses.
- *
- * No motion of its own. The entrance is the page's existing `.landing-fade-up`
- * (an IntersectionObserver in `(public)/page.tsx` that strips the opacity class
- * on first intersect) — which means with JS off, or an observer that never
- * fires, the band renders complete rather than invisible, and the global
- * `prefers-reduced-motion` reset in globals.css collapses the transition.
- */
-import type { ReactNode } from 'react';
-
-/** Which column the product surface occupies on a wide viewport. */
-export type BandSide = 'left' | 'right';
-
-export interface FeatureBandProps {
-  /** Anchor id + testid suffix, e.g. `upload`. */
-  id: string;
-  /** Mono micro-label. Title Case; rendered uppercase by CSS. */
-  eyebrow: string;
-  /** The claim. Playfair, one or two lines. */
-  headline: string;
-  /** One sentence under it. Addresses the student as "you". */
-  body: string;
-  /** The recreated product surface. */
-  surface: ReactNode;
-  surfaceSide: BandSide;
-}
-
-export default function FeatureBand({
-  id,
-  eyebrow,
-  headline,
-  body,
-  surface,
-  surfaceSide,
-}: FeatureBandProps) {
-  const blobSide = surfaceSide === 'left' ? { right: '-12%' } : { left: '-12%' };
-
-  return (
-    <section
-      id={`band-${id}`}
-      data-testid={`landing-band-${id}`}
-      data-surface-side={surfaceSide}
-      aria-labelledby={`band-${id}-headline`}
-      className="landing-section landing-band relative z-10"
-    >
-      <div aria-hidden className="absolute inset-0 pointer-events-none z-0">
-        <div
-          className={`sapling-mesh-blob sapling-mesh-blob--${surfaceSide === 'left' ? '2' : '3'}`}
-          style={{
-            top: '8%',
-            bottom: 'auto',
-            width: '30vw',
-            height: '30vw',
-            opacity: 0.16,
-            ...blobSide,
-          }}
-        />
-      </div>
-
-      <div
-        className={`landing-band-grid landing-band--surface-${surfaceSide} relative z-[1] max-w-7xl mx-auto px-6 lg:px-12 landing-fade-up`}
-      >
-        <div className="landing-band-copy">
-          <span className="landing-eyebrow" data-testid={`landing-band-${id}-eyebrow`}>
-            {eyebrow}
-          </span>
-          <h2 id={`band-${id}-headline`} className="landing-band-headline">
-            {headline}
-          </h2>
-          <p className="landing-band-body">{body}</p>
-        </div>
-
-        <div className="landing-band-surface">{surface}</div>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/src/components/marketing/SurfaceBento.test.tsx b/frontend/src/components/marketing/SurfaceBento.test.tsx
deleted file mode 100644
index b99156de..00000000
--- a/frontend/src/components/marketing/SurfaceBento.test.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-// @vitest-environment jsdom
-/**
- * The bento's contract (#344 step 2).
- *
- * The brand guide's hard anti-pattern is a landing grid of "bubble panel: icon
- * + heading + body". The defence is structural, not stylistic: every tile must
- * mount a real recreated product surface. So these tests assert on the four
- * surfaces being present and on what they contain — a tutor exchange, a note
- * with linked concepts, a room with messages, a gradebook row with an actual
- * grade — rather than on four boxes existing.
- */
-import React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, screen, cleanup, within } from '@testing-library/react';
-
-import SurfaceBento from './SurfaceBento';
-import { TIER_COLOR } from './graph/courseGraphs';
-
-afterEach(cleanup);
-
-function renderBento() {
-  return render(
-    <div className="landing-page">
-      <SurfaceBento />
-    </div>,
-  );
-}
-
-/** The four shipped screens the spec names, in the order they are laid out. */
-const TILES = ['tutor', 'notes', 'rooms', 'gradebook'] as const;
-
-describe('SurfaceBento', () => {
-  it('renders all four product surfaces', () => {
-    renderBento();
-    for (const t of TILES) {
-      expect(screen.getByTestId(`landing-surface-${t}`), t).toBeInTheDocument();
-    }
-  });
-
-  it('gives each tile its own span class so the grid stays asymmetric', () => {
-    const { container } = renderBento();
-    for (const t of TILES) {
-      expect(container.querySelector(`.landing-bento-tile--${t}`), t).toBeTruthy();
-    }
-  });
-
-  it('labels every surface with the approved product vocabulary, in Title Case', () => {
-    renderBento();
-    const titles = Array.from(document.querySelectorAll('.landing-surface-title')).map(
-      (el) => el.textContent,
-    );
-    // "Tutor", never "Chat Tutor"; "Notetaker", never "Notes"/"AI Notes".
-    expect(titles).toEqual(['Tutor', 'Notetaker', 'Study Rooms', 'Gradebook']);
-  });
-
-  it('shows a real tutor exchange, not a description of one', () => {
-    renderBento();
-    const tile = screen.getByTestId('landing-surface-tutor');
-    // A back-and-forth, not a single canned answer: the student asks, the
-    // tutor hands back a matrix to try, the student works it out.
-    expect(tile.querySelectorAll('.landing-surface-bubble').length).toBeGreaterThanOrEqual(4);
-    expect(tile.querySelectorAll('.landing-surface-bubble.is-student').length).toBeGreaterThan(1);
-    expect(tile.querySelectorAll('.landing-surface-bubble.is-tutor').length).toBeGreaterThan(1);
-  });
-
-  it('shows a real note with concepts linked to the graph', () => {
-    renderBento();
-    const tile = screen.getByTestId('landing-surface-notes');
-    expect(tile.querySelector('.landing-surface-notetitle')).toBeTruthy();
-    expect(tile.querySelectorAll('.landing-surface-linkrow').length).toBeGreaterThanOrEqual(3);
-  });
-
-  it('shows a real room with an invite code and messages from more than one person', () => {
-    renderBento();
-    const tile = screen.getByTestId('landing-surface-rooms');
-    expect(within(tile).getByText('MA242-7QK')).toBeInTheDocument();
-    expect(tile.querySelectorAll('.landing-surface-bubble').length).toBeGreaterThanOrEqual(3);
-    // At least one incoming turn carries a sender name — the shipped panel's
-    // shape, and the thing that makes it read as a room rather than a chat.
-    expect(tile.querySelectorAll('.landing-surface-sender').length).toBeGreaterThan(0);
-  });
-
-  it('shows real gradebook rows carrying actual grades', () => {
-    renderBento();
-    const tile = screen.getByTestId('landing-surface-gradebook');
-    const rows = tile.querySelectorAll('.landing-surface-gradebookrow');
-    expect(rows.length).toBeGreaterThanOrEqual(3);
-    // Points earned / possible, which is what makes it a gradebook.
-    expect(tile).toHaveTextContent('18');
-    expect(tile).toHaveTextContent('/ 20');
-    expect(within(tile).getByText('A−')).toBeInTheDocument();
-  });
-
-  /**
-   * Colour communicates STATE. Every mastery mark on the page must come from
-   * `TIER_COLOR` — the same map the knowledge-graph section paints its nodes
-   * with — so the landing never advertises a palette the product doesn't use.
-   * A raw hex here (the bug `courseGraphs.ts` already had once) fails this.
-   */
-  it('paints every status mark with a canonical --state-* token', () => {
-    renderBento();
-    const allowed = new Set(Object.values(TIER_COLOR));
-    const dots = Array.from(document.querySelectorAll('.landing-surface-dot'));
-    expect(dots.length).toBeGreaterThan(0);
-    for (const d of dots) {
-      const bg = (d as HTMLElement).style.background;
-      expect(allowed.has(bg), `unexpected status colour: ${bg}`).toBe(true);
-    }
-  });
-
-  it('ships no icon-over-heading tiles: no tile has a bare interactive control', () => {
-    const { container } = renderBento();
-    expect(container.querySelectorAll('button, input, textarea')).toHaveLength(0);
-  });
-});
diff --git a/frontend/src/components/marketing/SurfaceBento.tsx b/frontend/src/components/marketing/SurfaceBento.tsx
deleted file mode 100644
index 063cfb52..00000000
--- a/frontend/src/components/marketing/SurfaceBento.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * The four-tile bento of built product surfaces (#344 step 2, spec section 4).
- *
- * Tutor, Notetaker, Study Rooms, Gradebook — the four screens the old
- * six-row feature catalog never mentioned, which is the spec's actual
- * diagnosis of "feels generic": the page undersold the product more than it
- * under-designed it.
- *
- * Every tile is a RECREATED SURFACE, never an icon over a heading over a
- * sentence. There is no per-tile copy at all, deliberately: a caption under a
- * picture of the Gradebook explaining that it is the Gradebook is the bubble-
- * panel pattern wearing a screenshot. The tiles carry the product's own chrome
- * label and let the surface argue.
- *
- * Sizes are asymmetric on purpose (7/5 then 5/7 of a 12-column grid, the wide
- * tile swapping sides between rows) so the grid reads as a composition rather
- * than as four equal boxes — and the two conversation-shaped surfaces (Tutor,
- * Study Rooms) sit on opposite diagonals from the two document-shaped ones
- * (Notetaker, Gradebook).
- *
- * Between two bands and immediately before the closing band, so it re-energises
- * the middle of the page without being asked to close it: a grid's last tile is
- * a weak place to ask for a signup.
- */
-import GradebookSurface from './surfaces/GradebookSurface';
-import NotesSurface from './surfaces/NotesSurface';
-import RoomsSurface from './surfaces/RoomsSurface';
-import TutorSurface from './surfaces/TutorSurface';
-
-const TILES = [
-  { key: 'tutor', node: <TutorSurface /> },
-  { key: 'notes', node: <NotesSurface /> },
-  { key: 'rooms', node: <RoomsSurface /> },
-  { key: 'gradebook', node: <GradebookSurface /> },
-] as const;
-
-export default function SurfaceBento() {
-  return (
-    <section
-      id="surfaces"
-      data-testid="landing-bento"
-      aria-labelledby="bento-headline"
-      className="landing-section landing-bento relative z-10"
-    >
-      <div aria-hidden className="absolute inset-0 pointer-events-none z-0">
-        <div
-          className="sapling-mesh-blob sapling-mesh-blob--3"
-          style={{ top: '-6%', bottom: 'auto', left: '32%', width: '36vw', height: '36vw', opacity: 0.14 }}
-        />
-      </div>
-
-      <div className="relative z-[1] max-w-7xl mx-auto px-6 lg:px-12">
-        <div className="landing-bento-head landing-fade-up">
-          <span className="landing-eyebrow" data-testid="landing-bento-eyebrow">
-            Inside Sapling
-          </span>
-          <h2 id="bento-headline" className="landing-band-headline">
-            Everywhere else your work happens.
-          </h2>
-        </div>
-
-        <div className="landing-bento-grid landing-fade-up">
-          {TILES.map((t) => (
-            <div key={t.key} className={`landing-bento-tile landing-bento-tile--${t.key}`}>
-              {t.node}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/src/components/marketing/featureBands.tsx b/frontend/src/components/marketing/featureBands.tsx
deleted file mode 100644
index 3236ea4a..00000000
--- a/frontend/src/components/marketing/featureBands.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * The three feature bands' content (#344 step 2).
- *
- * Lives here rather than in `(public)/page.tsx` — that file is already ~860
- * lines and owns the hero's canvas, three RAF loops and two modals; three
- * paragraphs of marketing copy do not belong in it. `page.tsx` mounts these by
- * index.
- *
- * The three bands are ONE arc — material in → practice → retention — not three
- * disconnected pitches, and band 3 is the closing claim that runs into the CTA.
- * Reordering them breaks the argument, so the order here is load-bearing.
- *
- * `surfaceSide` is DERIVED from position rather than written down per band.
- * The spec's requirement is "surfaces alternate sides"; encoding that as an
- * invariant means inserting or removing a band cannot silently produce two
- * bands with their surface on the same side, and it gives the unit test
- * something real to assert instead of three restated literals.
- */
-import type { FeatureBandProps } from './FeatureBand';
-import QuizSurface from './surfaces/QuizSurface';
-import ReviewSurface from './surfaces/ReviewSurface';
-import UploadSurface from './surfaces/UploadSurface';
-
-const CONTENT: Array<Omit<FeatureBandProps, 'surfaceSide'>> = [
-  {
-    id: 'upload',
-    eyebrow: 'Universal Upload',
-    headline: 'Drop in syllabi, textbooks, or notes.',
-    body: 'Sapling reads them, pulls out every concept, and maps them onto your graph — you do not tag anything.',
-    surface: <UploadSurface />,
-  },
-  {
-    id: 'quiz',
-    eyebrow: 'Adaptive Quizzes',
-    headline: 'Questions that re-tune to your level, in real time.',
-    body: 'They press where you are strong and meet you where you struggle, so the next question is always the one worth asking.',
-    surface: <QuizSurface />,
-  },
-  {
-    id: 'review',
-    eyebrow: 'Spaced Repetition',
-    headline: 'Knows what to review, and when.',
-    body: 'Spacing your reviews is what moves a concept from short-term to long-term memory. Sapling handles the scheduling; you just show up.',
-    surface: <ReviewSurface />,
-  },
-];
-
-/**
- * Band `i` puts its surface on the left for even `i`, the right for odd — so
- * the eye crosses the page between bands instead of running down one gutter.
- */
-export const FEATURE_BANDS: FeatureBandProps[] = CONTENT.map((band, i) => ({
-  ...band,
-  surfaceSide: i % 2 === 0 ? 'left' : 'right',
-}));
diff --git a/frontend/src/components/marketing/graph/KnowledgeGraphDemo.test.tsx b/frontend/src/components/marketing/graph/KnowledgeGraphDemo.test.tsx
deleted file mode 100644
index 3451354f..00000000
--- a/frontend/src/components/marketing/graph/KnowledgeGraphDemo.test.tsx
+++ /dev/null
@@ -1,976 +0,0 @@
-// @vitest-environment jsdom
-/**
- * The parked frame is the contract. Reduced-motion visitors and the E2E lane
- * both get this render, so "parked" has to mean laid out and readable — not
- * blank and not mid-assembly.
- */
-import React from 'react';
-import { act } from 'react';
-import { renderToString } from 'react-dom/server';
-import { hydrateRoot, type Root } from 'react-dom/client';
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, cleanup, fireEvent } from '@testing-library/react';
-
-import KnowledgeGraphDemo, { ENGAGED_HEADLINE_OPACITY } from './KnowledgeGraphDemo';
-import {
-  COURSE_GRAPHS,
-  TIER_COLOR,
-  TIER_LABEL,
-  TIER_ORDER,
-  conceptNodes,
-  neighbours,
-  tierCounts,
-} from './courseGraphs';
-import { DESKTOP_VIEW, MOBILE_VIEW, viewBoxAttr } from './layout';
-import { __resetReducedMotionStoreForTests } from '@/lib/usePrefersReducedMotion';
-import { __resetMediaStoresForTests } from '@/lib/useIsMobile';
-
-afterEach(cleanup);
-
-// `usePrefersReducedMotion` caches its `MediaQueryList` at module scope (by
-// design — production wants one shared subscription, not one per consumer).
-// Under vitest that cache survives across `it()` blocks in this file, so a
-// test that installs its own local `window.matchMedia` — like the two below
-// that swap it mid-run — would silently inherit whatever a *previous* test's
-// render already warmed the cache with instead of its own override. Cold
-// start every test so each one's `window.matchMedia` (whatever it is: the
-// `vitest.setup.ts` default, or a local override) is what actually gets
-// queried.
-beforeEach(() => {
-  __resetReducedMotionStoreForTests();
-  // Same cache-warming hazard as above, for the `useIsMobile` store the
-  // component now consults to pick its viewBox (#344 review #3).
-  __resetMediaStoresForTests();
-});
-
-describe('KnowledgeGraphDemo', () => {
-  it('renders a chip per course, with the first selected', () => {
-    render(<KnowledgeGraphDemo />);
-    for (const g of COURSE_GRAPHS) {
-      expect(screen.getByTestId(`landing-graph-chip-${g.id}`)).toBeInTheDocument();
-    }
-    expect(
-      screen.getByTestId(`landing-graph-chip-${COURSE_GRAPHS[0].id}`),
-    ).toHaveAttribute('aria-pressed', 'true');
-  });
-
-  it('renders the selected course graph fully laid out', () => {
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-    for (const n of g.nodes) {
-      expect(screen.getByTestId(`landing-graph-node-${n.id}`)).toBeInTheDocument();
-    }
-  });
-
-  it('swaps the graph when another chip is picked', () => {
-    render(<KnowledgeGraphDemo />);
-    const target = COURSE_GRAPHS[1];
-    fireEvent.click(screen.getByTestId(`landing-graph-chip-${target.id}`));
-
-    expect(screen.getByTestId(`landing-graph-node-${target.nodes[0].id}`)).toBeInTheDocument();
-    expect(
-      screen.queryByTestId(`landing-graph-node-${COURSE_GRAPHS[0].nodes[0].id}`),
-    ).not.toBeInTheDocument();
-  });
-
-  it('labels the section for assistive tech', () => {
-    render(<KnowledgeGraphDemo />);
-    expect(screen.getByTestId('landing-graph')).toHaveAttribute('aria-label');
-  });
-});
-
-describe('KnowledgeGraphDemo — motion', () => {
-  it('parks fully assembled when reduced motion is requested', () => {
-    // jsdom has no matchMedia; supply one that reports "reduce".
-    window.matchMedia = ((q: string) => ({
-      matches: q.includes('prefers-reduced-motion'),
-      media: q,
-      addEventListener() {},
-      removeEventListener() {},
-    })) as unknown as typeof window.matchMedia;
-
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-
-    // Every node present AND at full opacity — parked means complete.
-    for (const n of g.nodes) {
-      const el = screen.getByTestId(`landing-graph-node-${n.id}`);
-      expect(el).toBeInTheDocument();
-      expect(el.getAttribute('opacity')).toBe('1');
-    }
-  });
-});
-
-/** Controllable `window.matchMedia`, scoped to the reduced-motion query. */
-function installReducedMotion(matches: boolean) {
-  const listeners = new Set<() => void>();
-  const mql = {
-    matches,
-    media: '(prefers-reduced-motion: reduce)',
-    addEventListener: (_type: string, cb: () => void) => {
-      listeners.add(cb);
-    },
-    removeEventListener: (_type: string, cb: () => void) => {
-      listeners.delete(cb);
-    },
-  };
-  window.matchMedia = ((q: string) =>
-    q.includes('prefers-reduced-motion')
-      ? mql
-      : { matches: false, media: q, addEventListener() {}, removeEventListener() {} }) as unknown as typeof window.matchMedia;
-  return mql;
-}
-
-/**
- * Pins #344 fix round 1: a review finding that reading `window.matchMedia`
- * directly in the component's render body computes a value server-side (no
- * `window`, always "no preference") that can disagree with the real client
- * value, producing a genuine React hydration mismatch for any reduced-motion
- * visitor once this component is mounted with SSR on (a later task does
- * exactly that via `next/dynamic`). `usePrefersReducedMotion` fixes this via
- * `useSyncExternalStore` with a fixed server snapshot, the same pattern
- * `useIsMobile` already uses for the same bug class.
- */
-describe('KnowledgeGraphDemo — SSR/hydration parking (#344 fix round 1)', () => {
-  let container: HTMLDivElement;
-  let root: Root | null = null;
-  const actEnv = globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean };
-
-  beforeEach(() => {
-    // The file-level `beforeEach` above already cold-starts the reduced-
-    // motion store for this test; this block only owns the hydration
-    // container + act-environment setup.
-    actEnv.IS_REACT_ACT_ENVIRONMENT = true;
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    if (root) act(() => root!.unmount());
-    root = null;
-    container.remove();
-    actEnv.IS_REACT_ACT_ENVIRONMENT = undefined;
-  });
-
-  it('renders the complete frame on the server, and hydrates a reduced-motion client onto it with no recoverable error', async () => {
-    const g = COURSE_GRAPHS[0];
-
-    // "SSR-time" world: if a render-body read consulted the live query
-    // directly, it would see "no preference" here.
-    installReducedMotion(false);
-    const html = renderToString(<KnowledgeGraphDemo />);
-
-    const ssrScratch = document.createElement('div');
-    ssrScratch.innerHTML = html;
-    for (const n of g.nodes) {
-      const el = ssrScratch.querySelector(`[data-testid="landing-graph-node-${n.id}"]`);
-      expect(el).toBeTruthy();
-      // The assertion that pins the fix: SSR output comes from the hook's
-      // fixed server snapshot (always "reduced motion" — see its doc
-      // comment), not the live query above. A regression to a render-body
-      // `window.matchMedia` read would bake progress=0 (mid-assembly,
-      // opacity 0) into this string instead of the complete frame.
-      expect(el?.getAttribute('opacity')).toBe('1');
-    }
-
-    // Now the real client: OS reports reduced motion — deliberately the
-    // opposite of the "SSR-time" result above. Using the same value for
-    // both phases would let a regression to the old pattern pass this test
-    // by accident, since both phases would then just agree by luck.
-    __resetReducedMotionStoreForTests();
-    installReducedMotion(true);
-
-    container.innerHTML = html;
-    const recoverable: unknown[] = [];
-    await act(async () => {
-      root = hydrateRoot(container, <KnowledgeGraphDemo />, {
-        onRecoverableError: (err) => recoverable.push(err),
-      });
-    });
-
-    // No hydration mismatch, and the reduced-motion client lands on (and
-    // stays on) the complete frame — never blank, never mid-assembly.
-    expect(recoverable).toEqual([]);
-    for (const n of g.nodes) {
-      const el = container.querySelector(`[data-testid="landing-graph-node-${n.id}"]`);
-      expect(el).toBeTruthy();
-      expect(el?.getAttribute('opacity')).toBe('1');
-    }
-  });
-});
-
-describe('KnowledgeGraphDemo — interaction', () => {
-  it('shows a concept blurb on hover', () => {
-    render(<KnowledgeGraphDemo />);
-    const n = COURSE_GRAPHS[0].nodes[1];
-    fireEvent.mouseEnter(screen.getByTestId(`landing-graph-node-${n.id}`));
-    expect(screen.getByTestId('landing-graph-blurb')).toHaveTextContent(n.blurb);
-  });
-
-  it('fades the instructional copy once the visitor interacts', () => {
-    render(<KnowledgeGraphDemo />);
-    const copy = screen.getByTestId('landing-graph-copy');
-    expect(copy).toHaveAttribute('data-engaged', 'false');
-
-    fireEvent.mouseEnter(
-      screen.getByTestId(`landing-graph-node-${COURSE_GRAPHS[0].nodes[1].id}`),
-    );
-    expect(copy).toHaveAttribute('data-engaged', 'true');
-  });
-
-  it('keeps the copy faded across a course switch instead of resetting engagement', () => {
-    render(<KnowledgeGraphDemo />);
-    const copy = screen.getByTestId('landing-graph-copy');
-
-    fireEvent.mouseEnter(
-      screen.getByTestId(`landing-graph-node-${COURSE_GRAPHS[0].nodes[1].id}`),
-    );
-    expect(copy).toHaveAttribute('data-engaged', 'true');
-
-    // `AssemblingGraph` remounts (keyed by `graph.id`) on a course switch.
-    // `engaged` lives in the parent specifically so this remount can't wipe
-    // it — pin that here, not just at the component-boundary level.
-    const target = COURSE_GRAPHS[1];
-    fireEvent.click(screen.getByTestId(`landing-graph-chip-${target.id}`));
-
-    expect(copy).toHaveAttribute('data-engaged', 'true');
-  });
-});
-
-// ── WCAG plumbing for the engaged-copy contrast test (#344 review #2) ───────
-// Small enough to inline, and inlining keeps the assertion honest: it derives
-// the ratio from the tokens and the opacity the component actually renders,
-// rather than restating a number someone computed once by hand.
-
-/** globals.css: `--bg` = `--ink-0`, `--text` = `--ink-800`. */
-const TOKEN_BG = '#faf8f3';
-const TOKEN_TEXT = '#1a1814';
-const TOKEN_BRAND_FOREST = '#1B6C42';
-
-function channels(hex: string): [number, number, number] {
-  return [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)) as [number, number, number];
-}
-
-function relativeLuminance([r, g, b]: [number, number, number]): number {
-  const lin = (c: number) => {
-    const s = c / 255;
-    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
-  };
-  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
-}
-
-/** WCAG 2.1 contrast of `fg` at `alpha` composited over the opaque `bg`. */
-function contrastAtOpacity(fgHex: string, bgHex: string, alpha: number): number {
-  const fg = channels(fgHex);
-  const bg = channels(bgHex);
-  const composited = fg.map((c, i) => alpha * c + (1 - alpha) * bg[i]) as [number, number, number];
-  const l1 = relativeLuminance(composited);
-  const l2 = relativeLuminance(bg);
-  const [hi, lo] = l1 > l2 ? [l1, l2] : [l2, l1];
-  return (hi + 0.05) / (lo + 0.05);
-}
-
-/**
- * The opacity a visitor actually sees on `el`: CSS opacity composes down the
- * tree, so a fade on the wrapper dims every child and a child can never be
- * *more* opaque than its group. Walking the chain is what makes this test
- * indifferent to *where* the fix put the fade.
- */
-function effectiveOpacity(el: Element, stopAt: Element): number {
-  let alpha = 1;
-  let cur: Element | null = el;
-  while (cur) {
-    const raw = (cur as HTMLElement).style?.opacity;
-    if (raw) alpha *= Number(raw);
-    if (cur === stopAt) break;
-    cur = cur.parentElement;
-  }
-  return alpha;
-}
-
-/**
- * #344 review #2 — the engaged fade was a flat 0.35 on the whole copy block,
- * and `engaged` never resets, so that was the section's PERMANENT heading
- * treatment for the rest of the session, not a transient animation state.
- * Over this section's flat `--bg` paper that composites the `<h2>` to
- * #ACAAA5 (2.20:1, under the 3:1 large-text bar) and the 0.7rem eyebrow to
- * #ACC7B5 (1.71:1, against a 4.5:1 bar).
- */
-describe('KnowledgeGraphDemo — engaged copy contrast (#344 review #2)', () => {
-  function engage() {
-    render(<KnowledgeGraphDemo />);
-    fireEvent.mouseEnter(
-      screen.getByTestId(`landing-graph-node-${COURSE_GRAPHS[0].nodes[1].id}`),
-    );
-    const copy = screen.getByTestId('landing-graph-copy');
-    expect(copy).toHaveAttribute('data-engaged', 'true');
-    return copy;
-  }
-
-  it('keeps the faded headline over the 3:1 WCAG AA bar for large text', () => {
-    const copy = engage();
-    const headline = copy.querySelector('h2')!;
-    const alpha = effectiveOpacity(headline, copy);
-
-    // The headline is text-4xl (36px) semibold — "large text" by WCAG, 3:1.
-    // 0.55 composites to #7F7D78 = 3.88:1. The shipped 0.35 was 2.20:1.
-    expect(alpha).toBeCloseTo(ENGAGED_HEADLINE_OPACITY, 6);
-    expect(contrastAtOpacity(TOKEN_TEXT, TOKEN_BG, alpha)).toBeGreaterThanOrEqual(3);
-  });
-
-  it('keeps the small eyebrow over the 4.5:1 WCAG AA bar for small text', () => {
-    const copy = engage();
-    const eyebrow = copy.querySelector('span')!;
-    const alpha = effectiveOpacity(eyebrow, copy);
-
-    // 0.7rem ⇒ small text ⇒ 4.5:1, and `--brand-forest` over the paper only
-    // clears that at α ≥ 0.86 — a fade nobody could perceive. So it isn't
-    // faded at all: 6.05:1. The shipped 0.35 was 1.71:1.
-    expect(contrastAtOpacity(TOKEN_BRAND_FOREST, TOKEN_BG, alpha)).toBeGreaterThanOrEqual(4.5);
-  });
-});
-
-// ── Controllable IntersectionObserver + rAF, for the gating tests ──────────
-
-type FakeObserverRecord = {
-  callback: IntersectionObserverCallback;
-  targets: Element[];
-  disconnected: boolean;
-  rootMargin: string;
-};
-
-/** jsdom ships no IntersectionObserver; install one we can fire by hand. */
-function installIntersectionObserver() {
-  const records: FakeObserverRecord[] = [];
-
-  class FakeIntersectionObserver {
-    readonly root = null;
-    readonly rootMargin: string;
-    readonly thresholds: ReadonlyArray<number> = [0];
-    private record: FakeObserverRecord;
-
-    constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
-      this.rootMargin = String(options?.rootMargin ?? '0px');
-      this.record = { callback, targets: [], disconnected: false, rootMargin: this.rootMargin };
-      records.push(this.record);
-    }
-    observe(el: Element) {
-      this.record.targets.push(el);
-    }
-    unobserve(el: Element) {
-      this.record.targets = this.record.targets.filter((t) => t !== el);
-    }
-    disconnect() {
-      this.record.disconnected = true;
-      this.record.targets = [];
-    }
-    takeRecords(): IntersectionObserverEntry[] {
-      return [];
-    }
-  }
-
-  const holder = window as unknown as { IntersectionObserver?: unknown };
-  const previous = holder.IntersectionObserver;
-  holder.IntersectionObserver = FakeIntersectionObserver;
-
-  return {
-    records,
-    /** Deliver an intersection change to every live observer, inside `act`. */
-    fire(isIntersecting: boolean) {
-      act(() => {
-        for (const r of records) {
-          if (r.disconnected) continue;
-          r.callback(
-            r.targets.map(
-              (target) => ({ isIntersecting, target }) as unknown as IntersectionObserverEntry,
-            ),
-            null as unknown as IntersectionObserver,
-          );
-        }
-      });
-    },
-    restore() {
-      if (previous === undefined) delete holder.IntersectionObserver;
-      else holder.IntersectionObserver = previous;
-    },
-  };
-}
-
-/** Capture rAF callbacks instead of letting jsdom schedule them on a timer. */
-function captureAnimationFrames() {
-  const queue: FrameRequestCallback[] = [];
-  const raf = vi
-    .spyOn(window, 'requestAnimationFrame')
-    .mockImplementation((cb: FrameRequestCallback) => queue.push(cb));
-  const caf = vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
-  return {
-    queue,
-    get frameCount() {
-      return raf.mock.calls.length;
-    },
-    /** Run the next queued frame inside `act`. */
-    step() {
-      const cb = queue.shift();
-      expect(cb, 'expected a queued animation frame').toBeTruthy();
-      act(() => cb!(0));
-    },
-    restore() {
-      raf.mockRestore();
-      caf.mockRestore();
-    },
-  };
-}
-
-function nodeOpacities(): string[] {
-  return COURSE_GRAPHS[0].nodes.map(
-    (n) => screen.getByTestId(`landing-graph-node-${n.id}`).getAttribute('opacity') ?? '',
-  );
-}
-
-/**
- * #344 review #1 + #6 — two findings that were masking each other.
- *
- * #1: the assembly effect fired on mount, so the helix burned its full 1100ms
- * during the hydration window, underneath the landing page's intro overlay and
- * alongside the hero canvas RAF. Every visitor scrolled down to `progress === 1`
- * and a static picture.
- *
- * #6: the un-park transition (`usePrefersReducedMotion` correcting its SSR-safe
- * `true` to the real `false`) landed `progress` on 0 — a committed frame with
- * the ENTIRE GRAPH at opacity 0. Gating #1 without fixing #6 turns that one
- * blank frame into a section that stays blank until it is scrolled into view,
- * which is exactly what `id="knowledge-graph"` invites someone to deep-link to.
- */
-describe('KnowledgeGraphDemo — viewport gating and the never-blank frame (#344 review #1, #6)', () => {
-  let observer: ReturnType<typeof installIntersectionObserver>;
-  let frames: ReturnType<typeof captureAnimationFrames>;
-
-  beforeEach(() => {
-    // The majority visitor: no motion preference, so `parked` is false and the
-    // component is on the animated path — the only path where either bug bites.
-    installReducedMotion(false);
-    observer = installIntersectionObserver();
-    frames = captureAnimationFrames();
-  });
-
-  afterEach(() => {
-    frames.restore();
-    observer.restore();
-  });
-
-  it('renders the COMPLETE graph, never a blank one, before the section is near the viewport', () => {
-    render(<KnowledgeGraphDemo />);
-    // Pre-fix this was ["0", "0", "0", ...] — the whole point of #6.
-    expect(nodeOpacities()).toEqual(COURSE_GRAPHS[0].nodes.map(() => '1'));
-    const edge = screen.getByTestId('landing-graph-svg').querySelector('line')!;
-    expect(Number(edge.getAttribute('stroke-opacity'))).toBeGreaterThan(0);
-  });
-
-  it('does not start the assembly RAF until the section is reported on screen', () => {
-    render(<KnowledgeGraphDemo />);
-    // Pre-fix the effect fired on mount and this was already ≥ 1.
-    expect(frames.frameCount).toBe(0);
-    expect(observer.records).toHaveLength(1);
-    expect(observer.records[0].targets).toContain(screen.getByTestId('landing-graph'));
-  });
-
-  it('arms the assembly when the section comes into view, and only then', () => {
-    render(<KnowledgeGraphDemo />);
-    observer.fire(true);
-    expect(frames.frameCount).toBeGreaterThan(0);
-
-    frames.step();
-    // Now — and only now — a sub-1 frame is legitimate: the visitor is looking
-    // at it. The clock has barely moved, so the graph is at the start of the
-    // helix.
-    expect(nodeOpacities().every((o) => Number(o) < 1)).toBe(true);
-  });
-
-  it('settles on the complete frame if the section leaves mid-assembly', () => {
-    render(<KnowledgeGraphDemo />);
-    observer.fire(true);
-    frames.step();
-    expect(nodeOpacities().every((o) => Number(o) < 1)).toBe(true);
-
-    // Scrolled away: stop the loop (review #1's "and stop when it leaves"), and
-    // don't freeze a half-faded graph behind (review #6).
-    observer.fire(false);
-    expect(nodeOpacities()).toEqual(COURSE_GRAPHS[0].nodes.map(() => '1'));
-
-    // Coming back doesn't replay the whole helix from blank.
-    const before = frames.frameCount;
-    observer.fire(true);
-    expect(frames.frameCount).toBe(before);
-    expect(nodeOpacities()).toEqual(COURSE_GRAPHS[0].nodes.map(() => '1'));
-  });
-
-  it('gates on a root margin that cannot already be intersecting at scroll 0', () => {
-    render(<KnowledgeGraphDemo />);
-    // The section is mounted straight after a `min-h-screen` hero, so its top
-    // edge sits at exactly 100vh. A positive bottom rootMargin — the natural
-    // "give it some lead-in" reflex — pushes the root's bottom past it and
-    // arms the assembly during hydration, which is review #1 all over again.
-    const bottomInset = observer.records[0].rootMargin.trim().split(/\s+/)[2] ?? '';
-    expect(bottomInset.startsWith('-')).toBe(true);
-  });
-
-  it('degrades to the complete frame when the browser has no IntersectionObserver', () => {
-    // Deliberate: with no gate available the section stays on its static,
-    // fully laid-out frame rather than falling back to an ungated animation.
-    // That's the reduced-motion render — correct, crawlable, and never blank.
-    observer.restore();
-    render(<KnowledgeGraphDemo />);
-    expect(nodeOpacities()).toEqual(COURSE_GRAPHS[0].nodes.map(() => '1'));
-    expect(frames.frameCount).toBe(0);
-  });
-
-  it('disconnects the observer on unmount', () => {
-    const { unmount } = render(<KnowledgeGraphDemo />);
-    expect(observer.records[0].disconnected).toBe(false);
-    unmount();
-    expect(observer.records[0].disconnected).toBe(true);
-  });
-});
-
-/**
- * #344 review #3 — one 900×560 viewBox at every width rendered 4.6 CSS px
- * labels on a 390px phone. `layout.test.ts` owns the arithmetic; this pins that
- * the component actually consults the breakpoint and emits the phone geometry.
- */
-describe('KnowledgeGraphDemo — mobile viewBox (#344 review #3)', () => {
-  /** Reduced motion (so the frame is parked/complete) at a chosen breakpoint. */
-  function installViewport(isMobile: boolean) {
-    window.matchMedia = ((q: string) => ({
-      matches: q.includes('prefers-reduced-motion') ? true : q.includes('max-width') && isMobile,
-      media: q,
-      addEventListener() {},
-      removeEventListener() {},
-    })) as unknown as typeof window.matchMedia;
-  }
-
-  it('emits the phone viewBox and label size below the breakpoint', () => {
-    installViewport(true);
-    render(<KnowledgeGraphDemo />);
-    const svg = screen.getByTestId('landing-graph-svg');
-    expect(svg.getAttribute('viewBox')).toBe(viewBoxAttr(MOBILE_VIEW.fit));
-    expect(svg.querySelector('text')!.getAttribute('font-size')).toBe(String(MOBILE_VIEW.font));
-  });
-
-  it('keeps the desktop viewBox above it', () => {
-    installViewport(false);
-    render(<KnowledgeGraphDemo />);
-    const svg = screen.getByTestId('landing-graph-svg');
-    expect(svg.getAttribute('viewBox')).toBe(viewBoxAttr(DESKTOP_VIEW.fit));
-    expect(svg.querySelector('text')!.getAttribute('font-size')).toBe(String(DESKTOP_VIEW.font));
-  });
-
-  /**
-   * #344 visual 3 — the frame is DERIVED from the content, never written down.
-   * A regression to a hardcoded box is the whole finding, so pin that what the
-   * component emits is what `fitViewBox` produced and that it is materially
-   * tighter than the layout box it replaced.
-   */
-  it('renders the fitted frame, not the layout box', () => {
-    installViewport(false);
-    render(<KnowledgeGraphDemo />);
-    const svg = screen.getByTestId('landing-graph-svg');
-    expect(svg.getAttribute('viewBox')).not.toBe(`0 0 ${DESKTOP_VIEW.w} ${DESKTOP_VIEW.h}`);
-    expect(DESKTOP_VIEW.fit.w).toBeLessThan(DESKTOP_VIEW.w);
-    // The fit only pays off with a width cap: stretched across the full
-    // container a tighter box would render the graph at 2× and make the
-    // section TALLER. Left-aligned + capped is the composition fix (visual 5).
-    expect(svg.getAttribute('class')).toContain('md:max-w-[720px]');
-  });
-});
-
-/**
- * #344 visual 1, 2, 4 — brand conformance and legibility of the drawn nodes.
- */
-describe('KnowledgeGraphDemo — node paint and label placement', () => {
-  function nodeGroup(id: string) {
-    return screen.getByTestId(`landing-graph-node-${id}`);
-  }
-
-  it('paints concept nodes with the canonical --state-* tokens', () => {
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-    for (const n of g.nodes) {
-      if (n.id === g.rootId) continue;
-      const fill = nodeGroup(n.id).querySelector('circle')!.getAttribute('fill');
-      expect(fill, n.id).toBe(TIER_COLOR[n.tier]);
-      expect(fill, n.id).toMatch(/^var\(--state-/);
-    }
-  });
-
-  it('paints the course root as the brand anchor, not as a mastery status', () => {
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-    // The fixture tier stays `learning` — this is a render decision, and the
-    // amber it used to inherit made the section's focal point read as a warning.
-    expect(g.nodes.find((n) => n.id === g.rootId)!.tier).toBe('learning');
-    expect(nodeGroup(g.rootId).querySelector('circle')!.getAttribute('fill')).toBe(
-      'var(--brand-forest)',
-    );
-  });
-
-  /**
-   * FLIPPED with the upward fan, and the flip is the point rather than a
-   * concession. This used to assert the root's label sat ABOVE its circle,
-   * which was right while the root sat in the middle of the frame with nothing
-   * over it. The root is now the BASE of the drawing and everything grows out
-   * of its top, so "above" means "on the stem running up to the middle shoot" —
-   * the halo has to cut that edge in two for the course code to stay legible,
-   * and the code stops reading as a caption for the whole picture. Below the
-   * base there is nothing but frame. Measured, below clears its nearest
-   * neighbour by 30.14 units against above's 9.83 (see `labelBaselineY`).
-   *
-   * The `rootLabelAbove` branch itself is untouched and still covered in
-   * `layout.test.ts`; what changed is which side the shipped views ask for.
-   */
-  it('places every label below its node, the root included', () => {
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-
-    const rootGroup = nodeGroup(g.rootId);
-    const rootCy = Number(rootGroup.querySelector('circle')!.getAttribute('cy'));
-    const rootBaseline = Number(rootGroup.querySelector('text')!.getAttribute('y'));
-    expect(rootBaseline).toBeGreaterThan(rootCy + DESKTOP_VIEW.rootR);
-
-    const leaf = g.nodes.find((n) => n.id !== g.rootId)!;
-    const leafGroup = nodeGroup(leaf.id);
-    const leafCy = Number(leafGroup.querySelector('circle')!.getAttribute('cy'));
-    const leafBaseline = Number(leafGroup.querySelector('text')!.getAttribute('y'));
-    expect(leafBaseline).toBeGreaterThan(leafCy + DESKTOP_VIEW.nodeR);
-    // …and the root really is the base: every other node is drawn above it.
-    for (const n of g.nodes) {
-      if (n.id === g.rootId) continue;
-      const cy = Number(nodeGroup(n.id).querySelector('circle')!.getAttribute('cy'));
-      expect(cy, `${n.id} should sit above the root`).toBeLessThan(rootCy);
-    }
-  });
-
-  it('halos label text in the section backdrop so edges break around it', () => {
-    render(<KnowledgeGraphDemo />);
-    const label = nodeGroup(COURSE_GRAPHS[0].rootId).querySelector('text')!;
-    expect(label.getAttribute('stroke')).toBe('var(--bg-mesh)');
-    expect(Number(label.getAttribute('stroke-width'))).toBe(DESKTOP_VIEW.labelHalo);
-    // Stroke UNDER fill — the other paint order would outline the glyphs.
-    expect((label as unknown as SVGTextElement).style.paintOrder).toBe('stroke');
-  });
-});
-
-/**
- * #344 step 3 — the nodes are mastery DIALS now, not flat dots.
- *
- * Two things have to survive that, and both are load-bearing outside this file:
- *
- *  - A node group's FIRST `<circle>` stays the tier-painted disc at the full
- *    `nodeRadius`. `e2e/landing-graph.spec.ts` reads exactly that element to
- *    measure the phone's rendered dot diameter, and the paint tests above read
- *    its `fill`. A ring drawn as a circle in front of it would silently hand
- *    both of them the wrong element (and the wrong radius).
- *  - Every dimension is measured INWARD from `nodeRadius`, so the drawn
- *    footprint is unchanged and `fitViewBox` / `labelBaselineY` / the phone's
- *    5.40-unit label clearance all still hold.
- */
-describe('KnowledgeGraphDemo — the mastery dial (#344 step 3)', () => {
-  const graph = COURSE_GRAPHS[0];
-
-  function nodeGroup(id: string) {
-    return screen.getByTestId(`landing-graph-node-${id}`);
-  }
-
-  it('keeps the node’s first circle the tier disc at the full node radius', () => {
-    render(<KnowledgeGraphDemo />);
-    for (const n of graph.nodes) {
-      const disc = nodeGroup(n.id).querySelector('circle')!;
-      const expected = n.id === graph.rootId ? DESKTOP_VIEW.rootR : DESKTOP_VIEW.nodeR;
-      expect(Number(disc.getAttribute('r')), n.id).toBeCloseTo(expected, 6);
-    }
-  });
-
-  it('draws nothing outside the node radius', () => {
-    render(<KnowledgeGraphDemo />);
-    for (const n of graph.nodes) {
-      const r = n.id === graph.rootId ? DESKTOP_VIEW.rootR : DESKTOP_VIEW.nodeR;
-      for (const c of nodeGroup(n.id).querySelectorAll('circle')) {
-        const radius = Number(c.getAttribute('r'));
-        const halfStroke = Number(c.getAttribute('stroke-width') ?? 0) / 2;
-        expect(radius + halfStroke, `${n.id} circle`).toBeLessThanOrEqual(r + 1e-9);
-      }
-    }
-  });
-
-  /**
-   * The arc is the whole point of the dial: it has to encode the node's own
-   * `mastery`, not a constant. Recomputing the endpoint from the fixture and
-   * comparing it to the rendered path is what keeps a future "make the rings
-   * look fuller" tweak from quietly decoupling the picture from the data.
-   */
-  it('sweeps each arc through that node’s mastery, clockwise from 12 o’clock', () => {
-    render(<KnowledgeGraphDemo />);
-    for (const n of graph.nodes) {
-      const arc = nodeGroup(n.id).querySelector('path')!;
-      expect(arc, n.id).toBeTruthy();
-      // `M sx sy A rx ry xrot large sweep ex ey`
-      const d = arc.getAttribute('d')!;
-      const [sx, sy, rx, , , large, , ex, ey] = d
-        .replace(/[A-Za-z]/g, ' ')
-        .trim()
-        .split(/\s+/)
-        .map(Number);
-
-      const disc = nodeGroup(n.id).querySelector('circle')!;
-      const cx = Number(disc.getAttribute('cx'));
-      const cy = Number(disc.getAttribute('cy'));
-
-      // Starts at the top of the ring…
-      expect(sx, `${n.id} start x`).toBeCloseTo(cx, 1);
-      expect(sy, `${n.id} start y`).toBeCloseTo(cy - rx, 1);
-      // …and ends `mastery` of a turn clockwise from it.
-      const sweep = n.mastery * Math.PI * 2;
-      expect(ex, `${n.id} end x`).toBeCloseTo(cx + rx * Math.sin(sweep), 1);
-      expect(ey, `${n.id} end y`).toBeCloseTo(cy - rx * Math.cos(sweep), 1);
-      expect(large, `${n.id} large-arc flag`).toBe(n.mastery > 0.5 ? 1 : 0);
-    }
-  });
-
-  /**
-   * The annulus between the core and the ring is transparent paper, so an
-   * edge drawn to the node's CENTRE (which is what shipped, hidden under a
-   * solid disc) would now run straight across the middle of every dial.
-   */
-  it('stops edges at the rim of the discs they connect', () => {
-    render(<KnowledgeGraphDemo />);
-    const svg = screen.getByTestId('landing-graph-svg');
-    const centres = new Map(
-      graph.nodes.map((n) => {
-        const c = nodeGroup(n.id).querySelector('circle')!;
-        return [n.id, { x: Number(c.getAttribute('cx')), y: Number(c.getAttribute('cy')) }];
-      }),
-    );
-
-    const lines = [...svg.querySelectorAll('line')];
-    expect(lines).toHaveLength(graph.edges.length);
-    lines.forEach((line, i) => {
-      const e = graph.edges[i];
-      const a = centres.get(e.source)!;
-      const b = centres.get(e.target)!;
-      const rA = e.source === graph.rootId ? DESKTOP_VIEW.rootR : DESKTOP_VIEW.nodeR;
-      const rB = e.target === graph.rootId ? DESKTOP_VIEW.rootR : DESKTOP_VIEW.nodeR;
-      const from = { x: Number(line.getAttribute('x1')), y: Number(line.getAttribute('y1')) };
-      const to = { x: Number(line.getAttribute('x2')), y: Number(line.getAttribute('y2')) };
-      expect(Math.hypot(from.x - a.x, from.y - a.y), `${e.source} end`).toBeCloseTo(rA, 1);
-      expect(Math.hypot(to.x - b.x, to.y - b.y), `${e.target} end`).toBeCloseTo(rB, 1);
-    });
-  });
-});
-
-/**
- * #344 step 3 — product chrome. The section used to float naked on the page
- * background one viewport above four bento tiles that each carry a titled
- * chrome bar over a recreated screen.
- */
-describe('KnowledgeGraphDemo — surface chrome and legend (#344 step 3)', () => {
-  it('names the surface and reports the selected course’s own numbers', () => {
-    render(<KnowledgeGraphDemo />);
-    const surface = screen.getByTestId('landing-graph-surface');
-    expect(surface).toHaveTextContent('Knowledge Graph');
-
-    const g = COURSE_GRAPHS[0];
-    const root = g.nodes.find((n) => n.id === g.rootId)!;
-    const meta = screen.getByTestId('landing-graph-meta');
-    expect(meta).toHaveTextContent(g.code);
-    expect(meta).toHaveTextContent(`${g.conceptCount} concepts`);
-    expect(meta).toHaveTextContent(`${Math.round(root.mastery * 100)}% mastery`);
-  });
-
-  it('re-reads the chrome from the newly picked course', () => {
-    render(<KnowledgeGraphDemo />);
-    const target = COURSE_GRAPHS[1];
-    fireEvent.click(screen.getByTestId(`landing-graph-chip-${target.id}`));
-
-    const root = target.nodes.find((n) => n.id === target.rootId)!;
-    const meta = screen.getByTestId('landing-graph-meta');
-    expect(meta).toHaveTextContent(target.code);
-    expect(meta).toHaveTextContent(`${target.conceptCount} concepts`);
-    expect(meta).toHaveTextContent(`${Math.round(root.mastery * 100)}% mastery`);
-  });
-
-  /**
-   * The comprehension gap this closes: four `--state-*` hues carried the whole
-   * meaning of the picture and NOTHING on the page said what any of them
-   * meant. The counts are what make it a readout rather than a colour key.
-   */
-  it('spells out every mastery tier, in the product’s words, with its count', () => {
-    render(<KnowledgeGraphDemo />);
-    const counts = tierCounts(COURSE_GRAPHS[0]);
-    for (const tier of TIER_ORDER) {
-      const row = screen.getByTestId(`landing-graph-legend-${tier}`);
-      expect(row).toHaveTextContent(TIER_LABEL[tier]);
-      expect(row).toHaveTextContent(String(counts[tier]));
-    }
-  });
-
-  it('says how much of the course is on screen, and what the ring means', () => {
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-    const legend = screen.getByTestId('landing-graph-legend');
-    expect(legend).toHaveTextContent(`${conceptNodes(g).length} of ${g.conceptCount} shown`);
-    expect(legend).toHaveTextContent(/ring\s*=\s*progress to mastery/i);
-  });
-});
-
-/**
- * #344 step 3 — the hover readout is a panel, not a line of body text.
- */
-describe('KnowledgeGraphDemo — detail panel (#344 step 3)', () => {
-  it('shows the COURSE at rest, so the panel is never an empty placeholder', () => {
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-    const root = g.nodes.find((n) => n.id === g.rootId)!;
-
-    expect(screen.getByTestId('landing-graph-detail-name')).toHaveTextContent(root.label);
-    expect(screen.getByTestId('landing-graph-blurb')).toHaveTextContent(root.blurb);
-    // The root is the course anchor, not a mastery status (#344 visual 2), so
-    // its chip says so rather than parroting its fixture tier.
-    expect(screen.getByTestId('landing-graph-detail-tier')).toHaveTextContent('Course');
-    expect(screen.getByTestId('landing-graph-detail-mastery')).toHaveTextContent(
-      `${Math.round(root.mastery * 100)}%`,
-    );
-  });
-
-  it('swaps the whole panel — name, tier, mastery, links — to the hovered concept', () => {
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-    const n = g.nodes.find((x) => x.id !== g.rootId)!;
-    fireEvent.mouseEnter(screen.getByTestId(`landing-graph-node-${n.id}`));
-
-    expect(screen.getByTestId('landing-graph-detail-name')).toHaveTextContent(n.label);
-    expect(screen.getByTestId('landing-graph-detail-tier')).toHaveTextContent(TIER_LABEL[n.tier]);
-    expect(screen.getByTestId('landing-graph-detail-mastery')).toHaveTextContent(
-      `${Math.round(n.mastery * 100)}%`,
-    );
-
-    const panel = screen.getByTestId('landing-graph-detail');
-    const links = neighbours(g, n.id);
-    expect(panel).toHaveTextContent(
-      `${links.length} connection${links.length === 1 ? '' : 's'}`,
-    );
-    for (const l of links) expect(panel).toHaveTextContent(l.label);
-  });
-
-  it('returns to the course when the pointer leaves', () => {
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-    const n = g.nodes.find((x) => x.id !== g.rootId)!;
-    const el = screen.getByTestId(`landing-graph-node-${n.id}`);
-
-    fireEvent.mouseEnter(el);
-    expect(screen.getByTestId('landing-graph-detail-name')).toHaveTextContent(n.label);
-    fireEvent.mouseLeave(el);
-    expect(screen.getByTestId('landing-graph-detail-name')).toHaveTextContent(
-      g.nodes.find((x) => x.id === g.rootId)!.label,
-    );
-  });
-
-  /**
-   * A hovered id from the PREVIOUS course would still resolve to nothing and
-   * fall back to the root, but leaving it set means a mouse that never moves
-   * after a chip click reads as "hovering" a node that is no longer drawn.
-   * `engaged` deliberately does NOT reset with it (pinned above).
-   */
-  it('clears the hover when the course changes', () => {
-    render(<KnowledgeGraphDemo />);
-    const g = COURSE_GRAPHS[0];
-    const n = g.nodes.find((x) => x.id !== g.rootId)!;
-    fireEvent.mouseEnter(screen.getByTestId(`landing-graph-node-${n.id}`));
-
-    const target = COURSE_GRAPHS[1];
-    fireEvent.click(screen.getByTestId(`landing-graph-chip-${target.id}`));
-    expect(screen.getByTestId('landing-graph-detail-name')).toHaveTextContent(
-      target.nodes.find((x) => x.id === target.rootId)!.label,
-    );
-  });
-});
-
-/**
- * #344 step 3 — ambient drift.
- *
- * The brand guide's atmosphere is "a barely-there field of colourful orbs
- * drifting slowly in 3D"; this section was frozen the instant its assembly
- * landed. The drift is a CSS animation, so the assertions are about the class
- * and the custom properties the keyframe reads — and, more importantly, about
- * the two populations that must NEVER see it.
- */
-describe('KnowledgeGraphDemo — ambient drift (#344 step 3)', () => {
-  function driftingNodes() {
-    return COURSE_GRAPHS[0].nodes
-      .map((n) => screen.getByTestId(`landing-graph-node-${n.id}`))
-      .filter((el) => el.classList.contains('is-drifting'));
-  }
-
-  /** Reduced-motion + breakpoint in one controllable `matchMedia`. */
-  function installMedia({ reduced, mobile }: { reduced: boolean; mobile: boolean }) {
-    window.matchMedia = ((q: string) => ({
-      matches: q.includes('prefers-reduced-motion') ? reduced : q.includes('max-width') && mobile,
-      media: q,
-      addEventListener() {},
-      removeEventListener() {},
-    })) as unknown as typeof window.matchMedia;
-  }
-
-  it('parks every node on its laid-out point when reduced motion is requested', () => {
-    installMedia({ reduced: true, mobile: false });
-    render(<KnowledgeGraphDemo />);
-    expect(driftingNodes()).toHaveLength(0);
-    for (const n of COURSE_GRAPHS[0].nodes) {
-      const el = screen.getByTestId(`landing-graph-node-${n.id}`);
-      // No animation, and no leftover custom properties to drive one.
-      expect(el.getAttribute('style') ?? '', n.id).not.toContain('--drift');
-    }
-  });
-
-  it('does not drift the phone view, where the frame pad and label clearance are spent', () => {
-    installMedia({ reduced: false, mobile: true });
-    render(<KnowledgeGraphDemo />);
-    expect(driftingNodes()).toHaveLength(0);
-  });
-
-  it('drifts every node on the desktop view, each with its own phase', () => {
-    installMedia({ reduced: false, mobile: false });
-    render(<KnowledgeGraphDemo />);
-    const nodes = driftingNodes();
-    expect(nodes).toHaveLength(COURSE_GRAPHS[0].nodes.length);
-
-    const delays = nodes.map((el) => (el as HTMLElement).style.getPropertyValue('--drift-delay'));
-    for (const el of nodes) {
-      const style = el as HTMLElement;
-      // A negative delay starts the node part-way through its own cycle, which
-      // is what stops six nodes pulsing together like a loading state.
-      expect(Number(style.style.getPropertyValue('--drift-delay').replace('s', ''))).toBeLessThan(0);
-      const dx = Number(style.style.getPropertyValue('--drift-x').replace('px', ''));
-      const dy = Number(style.style.getPropertyValue('--drift-y').replace('px', ''));
-      // Inside the desktop frame's 10-unit fit pad, by a wide margin.
-      expect(Math.hypot(dx, dy)).toBeLessThanOrEqual(3.0001);
-      expect(Math.hypot(dx, dy)).toBeGreaterThan(0);
-    }
-    expect(new Set(delays).size).toBeGreaterThan(1);
-  });
-
-  /**
-   * The phases are hashed off the node id rather than drawn from a PRNG,
-   * because they are baked into a `style` attribute that React renders on the
-   * server and diffs on the client. `Math.random()` here is a hydration
-   * mismatch on every page load.
-   */
-  it('derives the same phase for the same node on every render', () => {
-    installMedia({ reduced: false, mobile: false });
-    const { unmount } = render(<KnowledgeGraphDemo />);
-    const first = driftingNodes().map((el) => el.getAttribute('style'));
-    unmount();
-
-    render(<KnowledgeGraphDemo />);
-    expect(driftingNodes().map((el) => el.getAttribute('style'))).toEqual(first);
-  });
-});
diff --git a/frontend/src/components/marketing/graph/KnowledgeGraphDemo.tsx b/frontend/src/components/marketing/graph/KnowledgeGraphDemo.tsx
deleted file mode 100644
index 81310911..00000000
--- a/frontend/src/components/marketing/graph/KnowledgeGraphDemo.tsx
+++ /dev/null
@@ -1,809 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
-
-import { IS_TEST_MODE, now } from '@/lib/testMode';
-import { useIsMobile } from '@/lib/useIsMobile';
-import { usePrefersReducedMotion } from '@/lib/usePrefersReducedMotion';
-
-import { StateDot, SurfaceFrame, SurfaceRule } from '../surfaces/Surface';
-import {
-  COURSE_GRAPHS,
-  TIER_COLOR,
-  TIER_LABEL,
-  TIER_ORDER,
-  conceptNodes,
-  neighbours,
-  tierCounts,
-  type CourseGraph,
-  type DemoNode,
-} from './courseGraphs';
-import {
-  DESKTOP_VIEW,
-  MOBILE_VIEW,
-  helixEntry,
-  labelBaselineY,
-  radialLayout,
-  viewBoxAttr,
-  type GraphView,
-  type Point,
-} from './layout';
-
-/** How long the helical assembly takes to land on the laid-out frame. */
-const ASSEMBLE_MS = 1100;
-
-/**
- * When the section counts as "near enough to arm the assembly".
- *
- * Deliberately a NEGATIVE bottom inset, not the positive lead-in margin that
- * looks natural here. This section is mounted immediately after a
- * `min-h-screen` hero, so its top edge sits at exactly 100vh: *any* positive
- * bottom rootMargin makes it intersect at scroll position 0 and re-creates the
- * exact bug the gate exists to fix (#344 review #1) — the helix burning its
- * 1100ms during hydration, under the intro overlay, where nobody can see it.
- *
- * −10% instead means the section's top has to clear a tenth of the viewport
- * before the loop arms. There is still ample lead-in: the section opens with
- * `py-24` of padding plus the copy block and the chips, so ~300px of further
- * scrolling separates arming from the SVG itself appearing — the assembly is
- * already underway by the time the graph is on screen.
- */
-const ARM_ROOT_MARGIN = '0px 0px -10% 0px';
-
-/**
- * Opacity the headline fades to once the visitor engages with the graph.
- *
- * Not the 0.35 this shipped with (#344 review #2). Composited over the flat
- * `--bg` paper (#faf8f3) this section renders on, `--text` (#1a1814) at 0.35 is
- * #ACAAA5 = 2.20:1 — under the 3:1 WCAG AA bar for large text, permanently,
- * because `engaged` never resets. At 0.55 it composites to #7F7D78 = 3.88:1,
- * which clears it with room to spare while still reading as a clear recede.
- *
- * The eyebrow above the headline is deliberately NOT faded: it's 0.7rem
- * (small text ⇒ 4.5:1), and `--brand-forest` (#1B6C42) needs α ≥ 0.86 to hold
- * that ratio — a "fade" nobody can perceive. Since CSS opacity on the wrapper
- * would group both elements and a child can never be *more* opaque than its
- * group, the fade lives on the headline alone.
- */
-export const ENGAGED_HEADLINE_OPACITY = 0.55;
-
-/**
- * Ambient drift, in SVG user units (#344 step 3).
- *
- * The brand guide describes the page's atmosphere as "a barely-there field of
- * colourful orbs drifting slowly in 3D — like the glow under water", and the
- * hero's canvas does exactly that. This section was frozen the moment its
- * assembly landed, which read as a diagram rather than as a living map.
- *
- * THREE UNITS, and the ceiling is not taste — it is the frame. `fitViewBox`
- * fits the desktop `viewBox` to the entry sweep with `fitPad: 10` of margin, so
- * anything up to 10 units of post-settle displacement stays inside the box; 3
- * spends less than a third of that. The phone view's pad is 2 and its worst
- * label-to-neighbour clearance is 5.40 units, which two nodes drifting toward
- * each other would eat — so the phone does not drift at all (see `drifting`
- * below). At the 720px desktop cap 3 units is ~3.7 CSS px: perceptible as
- * breathing, invisible as movement.
- *
- * The motion is a CSS animation, not a rAF loop, on purpose. It composites off
- * the main thread, it costs zero React re-renders for a section that already
- * re-renders on hover, the global `prefers-reduced-motion` reset in globals.css
- * neutralises it for free, and — decisively — it stays out of the assembly's
- * rAF budget, which `KnowledgeGraphDemo.test.tsx` counts frame by frame to
- * prove the helix neither fires early nor replays.
- */
-const DRIFT_AMPLITUDE = 3;
-const DRIFT_MIN_S = 13;
-const DRIFT_SPAN_S = 9;
-
-/** Two decimals is plenty for user units, and keeps the SSR payload small. */
-function r2(v: number): number {
-  return Math.round(v * 100) / 100;
-}
-
-/**
- * FNV-1a over the node id — a per-node drift phase that is a pure function of
- * the fixture.
- *
- * NOT `Math.random()`, and not `testMode.random()` either: this value is baked
- * into a `style` attribute that React renders on the server and then diffs on
- * the client, so anything stateful here is a hydration mismatch. A hash of the
- * id gives every node its own direction, amplitude, period and starting phase
- * while staying byte-identical across both renders and across reloads.
- */
-function nodeSeed(id: string): number {
-  let h = 0x811c9dc5;
-  for (let i = 0; i < id.length; i += 1) {
-    h ^= id.charCodeAt(i);
-    h = Math.imul(h, 0x01000193);
-  }
-  return h >>> 0;
-}
-
-/**
- * The four custom properties `landing-graph-drift` reads. A NEGATIVE delay
- * starts each node part-way through its own cycle, so the field never syncs up
- * into a single collective pulse — the failure mode that makes ambient motion
- * read as a loading state.
- */
-function driftStyle(id: string): CSSProperties {
-  const seed = nodeSeed(id);
-  const angle = ((seed % 3600) / 3600) * Math.PI * 2;
-  const amplitude = DRIFT_AMPLITUDE * (0.55 + (((seed >>> 12) % 100) / 100) * 0.45);
-  const duration = DRIFT_MIN_S + (((seed >>> 19) % 100) / 100) * DRIFT_SPAN_S;
-  const delay = -(((seed >>> 25) % 100) / 100) * duration;
-  return {
-    '--drift-x': `${r2(Math.cos(angle) * amplitude)}px`,
-    '--drift-y': `${r2(Math.sin(angle) * amplitude)}px`,
-    '--drift-dur': `${r2(duration)}s`,
-    '--drift-delay': `${r2(delay)}s`,
-  } as CSSProperties;
-}
-
-function nodeRadius(view: GraphView, g: CourseGraph, id: string): number {
-  return id === g.rootId ? view.rootR : view.nodeR;
-}
-
-/**
- * The root is an ANCHOR, not a status (#344 visual 2).
- *
- * Its fixture tier is `learning`, so it used to render in the progress amber —
- * which made the stem the whole graph hangs from, and the largest object in the
- * section, look like a warning. `--brand-forest` is the brand primary and the
- * hero's logo colour, so the course node reads as "this is the course" while
- * colour keeps carrying mastery meaning where it actually means something: the
- * concept nodes. The fixture `tier` field is untouched — this is a render
- * decision, not a data change.
- */
-function nodeFill(g: CourseGraph, node: DemoNode): string {
-  return node.id === g.rootId ? 'var(--brand-forest)' : TIER_COLOR[node.tier];
-}
-
-/** Human label for the detail panel's status chip. The root isn't a status. */
-function nodeTierLabel(g: CourseGraph, node: DemoNode): string {
-  return node.id === g.rootId ? 'Course' : TIER_LABEL[node.tier];
-}
-
-/**
- * The mastery arc: an open path from 12 o'clock, sweeping clockwise through
- * `fraction` of the ring (#344 step 3).
- *
- * A `<path>` rather than a `stroke-dasharray` circle, for two reasons. The
- * dash trick needs the circumference computed anyway, it renders the *gap* as a
- * second visible dash on any browser that rounds differently, and — the one
- * that settles it — `KnowledgeGraphDemo.test.tsx` and the E2E legibility gate
- * both reach for `querySelector('circle')` inside a node group and read its
- * `fill` and `r`. The node's first circle has to stay the tier-painted disc
- * whose diameter is the node's drawn size. Arcs are paths; nothing shifts.
- *
- * Capped just under a full turn: at exactly 1 the two endpoints coincide and
- * the arc collapses to nothing.
- */
-function masteryArc(cx: number, cy: number, radius: number, fraction: number): string {
-  const f = Math.min(0.999, Math.max(0, fraction));
-  if (f <= 0 || radius <= 0) return '';
-  const sweep = f * Math.PI * 2;
-  const large = f > 0.5 ? 1 : 0;
-  return [
-    `M ${r2(cx)} ${r2(cy - radius)}`,
-    `A ${r2(radius)} ${r2(radius)} 0 ${large} 1`,
-    `${r2(cx + radius * Math.sin(sweep))} ${r2(cy - radius * Math.cos(sweep))}`,
-  ].join(' ');
-}
-
-/**
- * Renders one course's edges + nodes, animating them in along the helical
- * entry path (#344). The parent keys this by `graph.id`, so picking another
- * course remounts it — a fresh `animatedProgress` state per course instead
- * of resetting one inside an effect (the "adjusting state on a prop change"
- * anti-pattern React's own react-hooks/set-state-in-effect rule flags).
- * Remounting also means unmount cleanup alone is enough to cancel the RAF
- * both on course change and on real unmount — no separate reset path needed.
- *
- * `progress` is derived, never read straight off state, and its resting value
- * is 1 — the COMPLETE frame. That is the whole of #344 review #6: this
- * component server-renders a complete graph, and the majority visitor (no
- * motion preference) then has `usePrefersReducedMotion` correct from its
- * SSR-safe `true` default to `false` shortly after hydration. If un-parking
- * exposed a raw `animatedProgress` initialised to 0, that correction would
- * commit at least one painted frame with the entire graph at opacity 0 — and
- * once the RAF is viewport-gated (`armed`), it would stay blank until the
- * visitor scrolled down to a section that its own `id="knowledge-graph"`
- * invites them to deep-link straight into. So `animatedProgress` starts as
- * `null` meaning "the assembly has never run", and `null` reads back as 1.
- * The graph is never blank in a committed frame; the only frames below 1 are
- * the ones the live RAF loop is actively driving, on screen, on purpose.
- *
- * Deriving rather than reconciling also makes the `parked` flip correct in
- * both directions without an effect: parked always reads back as the complete
- * frame regardless of whatever `animatedProgress` last held.
- */
-function AssemblingGraph({
-  graph,
-  points,
-  view,
-  parked,
-  armed,
-  drifting,
-  hovered,
-  onNodeEnter,
-  onNodeLeave,
-}: {
-  graph: CourseGraph;
-  points: Map<string, Point>;
-  view: GraphView;
-  parked: boolean;
-  armed: boolean;
-  drifting: boolean;
-  hovered: string | null;
-  onNodeEnter: (id: string) => void;
-  onNodeLeave: () => void;
-}) {
-  const [animatedProgress, setAnimatedProgress] = useState<number | null>(null);
-  // Latches once the assembly has finished (or been abandoned). Keeps a
-  // re-entry into the viewport from replaying the whole helix every time the
-  // visitor scrolls past, and keeps a mid-flight cancel from freezing a
-  // half-faded frame.
-  const settledRef = useRef(false);
-
-  // "Parked" means the assembly is skipped and the graph renders complete —
-  // fully laid out, full opacity — on the very first frame. Reduced-motion
-  // visitors and the E2E/unit-test lanes (IS_TEST_MODE) both get this. So does
-  // everyone else until the loop is actually armed and running; see above.
-  const progress = parked || animatedProgress === null ? 1 : animatedProgress;
-
-  useEffect(() => {
-    if (parked || !armed || settledRef.current) return;
-    const start = now();
-    let raf = 0;
-    const tick = () => {
-      const p = Math.min(1, (now() - start) / ASSEMBLE_MS);
-      if (p >= 1) settledRef.current = true;
-      setAnimatedProgress(p);
-      if (p < 1) raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => {
-      cancelAnimationFrame(raf);
-      if (!settledRef.current) {
-        // Scrolled away (or unmounted) mid-assembly: settle on the complete
-        // frame rather than leaving the section parked on a half-faded one.
-        settledRef.current = true;
-        setAnimatedProgress(1);
-      }
-    };
-  }, [parked, armed]);
-
-  const centre = { x: view.w / 2, y: view.h / 2 };
-
-  return (
-    <>
-      {graph.edges.map((e) => {
-        const a = points.get(e.source);
-        const b = points.get(e.target);
-        if (!a || !b) return null;
-
-        /*
-          Edges stop at the rim of the discs they connect instead of running to
-          their centres (#344 step 3). Under flat filled dots the difference was
-          invisible — the disc painted over the stub. The node is a RING now,
-          and the annulus between its core and its ring is transparent paper, so
-          an untrimmed edge would draw a grey line straight across the middle of
-          every mastery dial on the page. Trimming is capped at 45% of the run
-          so a short edge shortens rather than inverting.
-        */
-        const dx = b.x - a.x;
-        const dy = b.y - a.y;
-        const len = Math.hypot(dx, dy) || 1;
-        const ux = dx / len;
-        const uy = dy / len;
-        const cap = len * 0.45;
-        const trimA = Math.min(nodeRadius(view, graph, e.source), cap);
-        const trimB = Math.min(nodeRadius(view, graph, e.target), cap);
-        // The hovered node's own edges lift out of the mesh, so "3 connections"
-        // in the detail panel is a claim the picture can be checked against.
-        const lit = hovered === e.source || hovered === e.target;
-
-        return (
-          <line
-            key={`${e.source}-${e.target}`}
-            x1={r2(a.x + ux * trimA)}
-            y1={r2(a.y + uy * trimA)}
-            x2={r2(b.x - ux * trimB)}
-            y2={r2(b.y - uy * trimB)}
-            stroke={lit ? 'var(--brand-forest)' : 'var(--text-dim)'}
-            strokeOpacity={(lit ? 0.55 : 0.28) * progress}
-            strokeWidth={(lit ? 1.5 : 1) * view.edgeW}
-            strokeLinecap="round"
-            className="landing-graph-edge"
-          />
-        );
-      })}
-
-      {graph.nodes.map((n, i) => {
-        const p = points.get(n.id);
-        if (!p) return null;
-        // Stagger: later nodes start later, all finish by progress = 1.
-        const span = 1 / (graph.nodes.length + 2);
-        const local = Math.min(1, Math.max(0, (progress - i * span) / (1 - i * span)));
-        const h = helixEntry(p, centre, local);
-        const r = nodeRadius(view, graph, n.id);
-        const fill = nodeFill(graph, n);
-        const lit = hovered === n.id;
-
-        /*
-          The dial (#344 step 3). Every dimension is measured INWARD from `r`,
-          the node's existing radius, so the drawn footprint is byte-identical
-          to the flat disc this replaced: `fitViewBox` still frames it, the
-          label gap `labelBaselineY` reserves is still the right gap, and the
-          phone's 5.40-unit worst-case label clearance is untouched. A ring
-          hung OUTSIDE `r` would have moved all three, and every one of them is
-          load-bearing arithmetic that `layout.test.ts` pins.
-
-            · disc   — r, tier colour at 14% — the node's extent and its hit
-                       target (fill-opacity > 0 keeps `visiblePainted` hits).
-            · track  — the unfilled remainder, in a NEUTRAL. A track tinted
-                       with the node's own colour made an arc at 6% and an arc
-                       at 90% look alike at this size, which is the one thing
-                       a dial may not do.
-            · arc    — mastery, swept clockwise from 12 o'clock.
-            · core   — 0.52 r of solid tier colour, so the node still reads as
-                       a coloured dot from across the page.
-        */
-        const scaled = r * h.scale;
-        const ringW = Math.min(r * 0.22, 4.4) * h.scale;
-        const ringR = scaled - ringW / 2;
-        const coreR = scaled * 0.52;
-        const arc = masteryArc(h.x, h.y, ringR, n.mastery);
-
-        return (
-          <g
-            key={n.id}
-            data-testid={`landing-graph-node-${n.id}`}
-            className={`landing-graph-node${drifting ? ' is-drifting' : ''}`}
-            style={drifting ? driftStyle(n.id) : undefined}
-            opacity={h.opacity}
-            onMouseEnter={() => onNodeEnter(n.id)}
-            onMouseLeave={onNodeLeave}
-          >
-            <circle cx={h.x} cy={h.y} r={scaled} fill={fill} fillOpacity={lit ? 0.24 : 0.14} />
-            <circle
-              cx={h.x}
-              cy={h.y}
-              r={ringR}
-              fill="none"
-              stroke="var(--ink-200)"
-              strokeWidth={ringW}
-            />
-            {arc === '' ? null : (
-              <path
-                d={arc}
-                fill="none"
-                stroke={fill}
-                strokeWidth={ringW}
-                strokeLinecap="round"
-              />
-            )}
-            <circle cx={h.x} cy={h.y} r={coreR} fill={fill} />
-            {/*
-              Labels sit ON the edge mesh — under the upward fan every arm's
-              label straddles the edge running out to its child, and the middle
-              shoot's label sits across the stem it hangs from (#344 visual 4).
-              `paint-order: stroke` lays a halo in the section's own backdrop
-              colour under the glyphs and paints the fill over it, so a line
-              passing behind a word breaks around the letterforms instead of
-              running through them. One element, existing token, no backdrop
-              filter — the brand's hard "no frosted panels" line holds.
-
-              The halo is `--bg-mesh` and the canvas the graph now sits on is
-              painted `--bg-mesh` for exactly that reason: on the panel paper
-              the halo would show as a pale rectangle behind every word.
-            */}
-            <text
-              x={h.x}
-              y={labelBaselineY(view, n.id === graph.rootId, h.y, r)}
-              textAnchor="middle"
-              className="font-jetbrains"
-              fontSize={view.font}
-              fill={lit ? 'var(--text)' : 'var(--text-dim)'}
-              stroke="var(--bg-mesh)"
-              strokeWidth={view.labelHalo}
-              strokeLinejoin="round"
-              style={{ paintOrder: 'stroke' }}
-              opacity={h.opacity}
-            >
-              {n.label}
-            </text>
-          </g>
-        );
-      })}
-    </>
-  );
-}
-
-/**
- * The inspector rail — what the app's own node detail looks like (#344 step 3).
- *
- * Replaces the single line of body text this section used to swap under the
- * graph. That line was the only thing hover produced, on a page where the four
- * bento tiles below each recreate a whole product screen, and it made the
- * differentiator the thinnest surface here.
- *
- * IT IS NEVER EMPTY. With nothing hovered it shows the COURSE — the root node,
- * whose blurb is a real sentence and whose mastery is the real aggregate — so
- * the panel reads as a populated screen at rest rather than as a placeholder
- * waiting to be earned. That also removes the "hover to see more" instruction
- * a touch visitor can never act on.
- *
- * Every row is fixed-height or floor-reserved, and at the two-column breakpoint
- * the grid stretches this rail to the canvas's height, so the swap on hover
- * cannot move a single pixel of the page.
- */
-function GraphInspector({ graph, node }: { graph: CourseGraph; node: DemoNode }) {
-  const links = neighbours(graph, node.id);
-  const isRoot = node.id === graph.rootId;
-  const paint = nodeFill(graph, node);
-  const pct = Math.round(node.mastery * 100);
-
-  return (
-    <SurfaceFrame
-      testId="landing-graph-detail"
-      title={isRoot ? 'Course' : 'Concept'}
-      meta={`${links.length} connection${links.length === 1 ? '' : 's'}`}
-    >
-      <span className="landing-graph-detailhead">
-        <span className="landing-graph-detailname" data-testid="landing-graph-detail-name">
-          {node.label}
-        </span>
-        {/*
-          The tier is spelled out, and the colour rides the chip's dot and
-          border rather than its lettering — the same recipe, down to the
-          `color-mix` wash, that `GradebookSurface`'s per-row grade pill uses.
-          `--state-progress` (#c89b5e) as text on this paper is 2.2:1; as a
-          border and a mark next to a `--text` word it carries the state
-          without ever having to be legible as type.
-        */}
-        <span
-          className="landing-graph-tierchip"
-          data-testid="landing-graph-detail-tier"
-          style={{ '--tier': paint } as CSSProperties}
-        >
-          {nodeTierLabel(graph, node)}
-        </span>
-      </span>
-
-      {/*
-        Reserved min-height (#344 task 5, kept): the blurb swaps on every
-        hover and unhover. Without a floor, a one-line blurb replacing a
-        two-line one shifts everything under it on every pass of the mouse —
-        load-bearing, not cosmetic. The floor is two lines, which is the
-        tallest any fixture blurb reaches at the narrowest column this panel
-        is ever rendered in.
-      */}
-      <p className="landing-graph-blurb" data-testid="landing-graph-blurb">
-        {node.blurb}
-      </p>
-
-      <SurfaceRule />
-
-      <span className="landing-surface-headrow">
-        <span className="landing-surface-label">Mastery</span>
-        <span className="landing-surface-mono" data-testid="landing-graph-detail-mastery">
-          {pct}%
-        </span>
-      </span>
-      {/* The Study surface's own progress track, reused verbatim so the two
-          meters on this page are the same object. Only the fill's colour and
-          width are per-node. */}
-      <span aria-hidden className="landing-surface-track">
-        <span className="landing-surface-fill" style={{ width: `${pct}%`, background: paint }} />
-      </span>
-
-      <SurfaceRule />
-
-      {/*
-        The neighbours as a LIST with their own scores, not a chip row: it is
-        what the app's related-concepts rail shows, it is the second half of
-        the "3 connections" claim in the chrome bar, and — with the edges those
-        links name lit up in the canvas alongside — it is the thing that makes
-        the picture and the panel readable as one screen.
-
-        Three rows are reserved. No fixture node has more than three
-        neighbours, so the floor is also the ceiling and the panel's height is
-        constant across every node of every course.
-      */}
-      <span className="landing-surface-label">Connected to</span>
-      <span className="landing-graph-links">
-        {links.map((l) => (
-          <span key={l.id} className="landing-graph-link">
-            <span
-              aria-hidden
-              className="landing-surface-dot"
-              style={{ background: nodeFill(graph, l) }}
-            />
-            <span className="landing-graph-linkname">{l.label}</span>
-            <span className="landing-surface-mono">{Math.round(l.mastery * 100)}%</span>
-          </span>
-        ))}
-      </span>
-    </SurfaceFrame>
-  );
-}
-
-export default function KnowledgeGraphDemo() {
-  const [courseId, setCourseId] = useState(COURSE_GRAPHS[0].id);
-
-  // Interaction state (#344 task 5). Both live here, in the parent, rather
-  // than inside `AssemblingGraph`: that child is keyed by `graph.id` and
-  // remounts on every course switch, which would silently wipe any state
-  // stored inside it. `engaged` in particular must survive a course switch
-  // (once a visitor has interacted, the instructional copy stays faded for
-  // the rest of the session) — that's only guaranteed by keeping it outside
-  // the subtree that remounts. `hovered` doesn't strictly need the same
-  // guarantee, but the detail panel is rendered here in the parent, as a
-  // sibling of the `<svg>`, so the parent needs read access to "which node is
-  // hovered" regardless. One state owner for both pieces of interaction state
-  // keeps `AssemblingGraph` a plain layout/animation renderer that only takes
-  // callback props, instead of splitting hover across two lifetimes for no
-  // behavioral gain.
-  const [hovered, setHovered] = useState<string | null>(null);
-  const [engaged, setEngaged] = useState(false);
-
-  function onNodeEnter(id: string) {
-    setHovered(id);
-    setEngaged(true);
-  }
-
-  function onNodeLeave() {
-    setHovered(null);
-  }
-
-  const graph = useMemo(
-    () => COURSE_GRAPHS.find((g) => g.id === courseId) ?? COURSE_GRAPHS[0],
-    [courseId],
-  );
-
-  // #344 review #3: one viewBox rendered at every width put 4.6 CSS px labels
-  // on a 390px phone. Each view now carries its own DERIVED frame (`view.fit`,
-  // #344 visual 3) alongside its own type scale. `useIsMobile` is the same
-  // `useSyncExternalStore` shape as `usePrefersReducedMotion` — SSR-safe, no
-  // render-body matchMedia read — so the server (and the hydrating render)
-  // picks the desktop view and the phone corrects on the first commit after
-  // hydration. A viewBox is not something a CSS `@media` rule can swap, so that
-  // one-frame correction is the floor here; both views render the complete
-  // graph, so it is a resize, never a blank.
-  const isMobile = useIsMobile();
-  const view = isMobile ? MOBILE_VIEW : DESKTOP_VIEW;
-  const points = useMemo(
-    () => radialLayout(graph, view.w, view.h, view.maxRadius),
-    [graph, view],
-  );
-
-  // The panel's subject: the hovered node, or the course itself at rest. A
-  // stale id can't survive here anyway (the chip handler clears `hovered`),
-  // but falling back to the root also covers a fixture edit that drops a node.
-  const detailNode =
-    graph.nodes.find((n) => n.id === hovered) ??
-    graph.nodes.find((n) => n.id === graph.rootId) ??
-    graph.nodes[0];
-
-  const concepts = conceptNodes(graph);
-  const counts = tierCounts(graph);
-  const coursePct = Math.round(
-    (graph.nodes.find((n) => n.id === graph.rootId)?.mastery ?? 0) * 100,
-  );
-
-  // `usePrefersReducedMotion` (not a direct `window.matchMedia` read in the
-  // render body — #344 fix round 1) is hydration-safe: it renders the same
-  // value on the server and the first client paint, then corrects to the
-  // real value after hydration commits. See its doc comment for why it
-  // defaults to "reduced motion" rather than "no preference".
-  const prefersReduced = usePrefersReducedMotion();
-  const parked = IS_TEST_MODE || prefersReduced;
-
-  // Ambient drift rides the SAME park switch as the assembly, so a
-  // reduced-motion visitor and the E2E lane both get a graph whose nodes sit
-  // exactly on their laid-out points — a complete, still, readable frame. It
-  // is additionally off below the mobile breakpoint: the phone view's frame
-  // pad is 2 units and its worst label-to-neighbour clearance 5.40, both of
-  // which a 3-unit drift would spend (see DRIFT_AMPLITUDE).
-  const drifting = !parked && !isMobile;
-
-  // #344 review #1: without this gate the assembly effect fired on mount and
-  // burned its full 1100ms during the hydration window — underneath the
-  // landing page's full-screen intro overlay, concurrently with the hero
-  // canvas RAF and the hero text scramble, ~66 re-renders of this SVG subtree
-  // that nobody could see. By the time a visitor scrolled here, progress was
-  // already 1 and the "interactive knowledge graph" was a static picture, for
-  // every visitor, every time.
-  const sectionRef = useRef<HTMLElement | null>(null);
-  const [armed, setArmed] = useState(false);
-
-  // No `IntersectionObserver` (jsdom, pre-2019 browsers) means no gate, and the
-  // graceful degradation is to leave the section on its complete frame rather
-  // than to un-gate the animation: a static, fully laid-out graph is exactly
-  // what reduced-motion visitors already get, and it can never be blank. That
-  // also keeps this effect free of a synchronous `setArmed` fallback, which
-  // react-hooks/set-state-in-effect rightly rejects as a cascading render.
-  useEffect(() => {
-    const el = sectionRef.current;
-    if (!el || typeof IntersectionObserver === 'undefined') return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) setArmed(entry.isIntersecting);
-      },
-      { rootMargin: ARM_ROOT_MARGIN },
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <section
-      ref={sectionRef}
-      id="knowledge-graph"
-      data-testid="landing-graph"
-      aria-label={`Interactive knowledge graph for ${graph.name}`}
-      className="landing-section landing-graph relative z-10 py-24 md:py-32 overflow-hidden"
-    >
-      {/* Atmospheric continuity. The hero above and the CTA below both carry
-          mesh blobs; the sections this one replaced (#features, HowItWorks)
-          carried --3 and --2 plus a green tint. Without them the middle of the
-          page is a flat hole between two atmospheric sections, and the cut in
-          and out of it reads as a seam. Lower opacity than the hero's so the
-          graph itself stays the focus. */}
-      <div aria-hidden className="absolute inset-0 pointer-events-none z-0">
-        <div
-          className="sapling-mesh-blob sapling-mesh-blob--3"
-          style={{ top: '2%', left: '-14%', bottom: 'auto', opacity: 0.26, width: '34vw', height: '34vw' }}
-        />
-        <div
-          className="sapling-mesh-blob sapling-mesh-blob--2"
-          style={{ bottom: '-8%', right: '-10%', top: 'auto', opacity: 0.18, width: '30vw', height: '30vw' }}
-        />
-      </div>
-
-      <div className="relative z-[1] max-w-7xl mx-auto px-6 lg:px-12">
-        <div
-          data-testid="landing-graph-copy"
-          data-engaged={engaged ? 'true' : 'false'}
-          className="landing-graph-copy"
-        >
-          <span
-            data-testid="landing-graph-eyebrow"
-            className="font-jetbrains text-[0.7rem] tracking-[0.32em] text-[var(--brand-forest)] uppercase font-medium"
-          >
-            Your knowledge, mapped
-          </span>
-          <h2
-            data-testid="landing-graph-headline"
-            className="landing-graph-headline font-playfair text-4xl md:text-6xl font-semibold text-[var(--text)] mt-4 leading-[1.05] tracking-tight"
-            style={{ opacity: engaged ? ENGAGED_HEADLINE_OPACITY : 1 }}
-          >
-            Pick a course. Watch it grow.
-          </h2>
-        </div>
-
-        <div className="mt-8 flex flex-wrap gap-3">
-          {COURSE_GRAPHS.map((g) => {
-            const active = g.id === graph.id;
-            return (
-              <button
-                key={g.id}
-                type="button"
-                data-testid={`landing-graph-chip-${g.id}`}
-                aria-pressed={active}
-                onClick={() => {
-                  setCourseId(g.id);
-                  setHovered(null);
-                }}
-                className={`landing-graph-chip${active ? ' is-active' : ''}`}
-              >
-                {g.code}
-              </button>
-            );
-          })}
-        </div>
-
-        {/*
-          #344 step 3 — the graph gets the same product chrome as every other
-          surface on this page.
-
-          It used to float naked on the page background: six dots and six words
-          left-aligned in a 1184px container, with the right 40% of the field
-          empty, one viewport above four bento tiles that each recreate a whole
-          screen. The differentiator was the flimsiest thing here.
-
-          One surface, full container width, split the way the app's own Tree
-          screen is split: canvas left, inspector right, legend along the foot.
-          The canvas keeps the `md:max-w-[720px]` cap it was fitted against
-          (#344 visual 3/5 — a wider render makes the section TALLER, and the
-          section's height is what those waves bought down) and centres inside
-          the space the rail leaves, so nothing about the drawing's scale moved.
-        */}
-        <div className="landing-surface mt-8" data-testid="landing-graph-surface">
-          <div className="landing-surface-chrome landing-graph-chrome">
-            <span className="landing-surface-title">Knowledge Graph</span>
-            <span className="landing-surface-meta" data-testid="landing-graph-meta">
-              {graph.code} · {graph.conceptCount} concepts · {coursePct}% mastery
-            </span>
-          </div>
-
-          <div className="landing-graph-split">
-            {/*
-              The canvas is painted `--bg-mesh`, not the panel's paper, and
-              that is a requirement rather than a preference: every label is
-              stroked with a `--bg-mesh` halo so the edge mesh breaks around
-              its letterforms. On any other backdrop those haloes show up as
-              pale rectangles behind the words.
-
-              It is also full-bleed horizontally — no side padding at ALL —
-              because the phone's legibility gate is measured in CSS px off
-              the rendered `<svg>` width. At 390px the section's content box
-              is ~332px and the frame renders at 0.769 of a unit per px;
-              spending 30px on padding takes the drawing under the E2E bar.
-              Vertical padding is free (the height follows the width) and is
-              where the breathing room goes.
-            */}
-            <div className="landing-graph-canvas">
-              <svg
-                data-testid="landing-graph-svg"
-                viewBox={viewBoxAttr(view.fit)}
-                className="w-full md:max-w-[720px] xl:max-w-[820px] h-auto"
-                role="img"
-                aria-label={`${graph.name} concept graph`}
-              >
-                <AssemblingGraph
-                  key={graph.id}
-                  graph={graph}
-                  points={points}
-                  view={view}
-                  parked={parked}
-                  armed={armed}
-                  drifting={drifting}
-                  hovered={hovered}
-                  onNodeEnter={onNodeEnter}
-                  onNodeLeave={onNodeLeave}
-                />
-              </svg>
-            </div>
-
-            <div className="landing-graph-rail">
-              <GraphInspector graph={graph} node={detailNode} />
-
-              {/*
-                The legend, and the reason it exists: four `--state-*` hues
-                were already carrying the whole meaning of this picture, and
-                nothing on the page said what any of them meant. A visitor who
-                has never signed in read six coloured dots as decoration.
-
-                It carries COUNTS, so it is a readout rather than a colour key,
-                and the note under it closes the second gap the dial opened.
-                Pinned to the FOOT of the rail (`margin-top: auto`), which is
-                both where a legend belongs and what squares the rail's height
-                against the canvas beside it.
-              */}
-              <div className="landing-graph-legend" data-testid="landing-graph-legend">
-                <span className="landing-graph-legenditems">
-                  {TIER_ORDER.map((t) => (
-                    <span
-                      key={t}
-                      className="landing-graph-legenditem"
-                      data-testid={`landing-graph-legend-${t}`}
-                    >
-                      <StateDot tier={t} />
-                      <span className="landing-graph-legendname">{TIER_LABEL[t]}</span>
-                      <span className="landing-surface-mono">{counts[t]}</span>
-                    </span>
-                  ))}
-                </span>
-                <span className="landing-surface-mono landing-graph-legendnote">
-                  Ring = progress to mastery · {concepts.length} of {graph.conceptCount} shown
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/src/components/marketing/graph/courseGraphs.test.ts b/frontend/src/components/marketing/graph/courseGraphs.test.ts
deleted file mode 100644
index 8d6995a8..00000000
--- a/frontend/src/components/marketing/graph/courseGraphs.test.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-/**
- * Fixture integrity. These graphs are hand-authored, so the failure mode is a
- * typo'd id producing an edge to nowhere — which renders as a line into empty
- * space rather than an error. Pin the invariants instead.
- */
-import { describe, it, expect } from 'vitest';
-
-import {
-  COURSE_GRAPHS,
-  TIER_COLOR,
-  TIER_LABEL,
-  TIER_ORDER,
-  conceptNodes,
-  neighbours,
-  tierCounts,
-  tierForMastery,
-  type CourseGraph,
-} from './courseGraphs';
-
-const ids = (g: CourseGraph) => new Set(g.nodes.map((n) => n.id));
-
-describe('COURSE_GRAPHS', () => {
-  it('ships exactly three courses with distinct ids and codes', () => {
-    expect(COURSE_GRAPHS).toHaveLength(3);
-    expect(new Set(COURSE_GRAPHS.map((g) => g.id)).size).toBe(3);
-    expect(new Set(COURSE_GRAPHS.map((g) => g.code)).size).toBe(3);
-  });
-
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s has unique node ids',
-    (_code, g) => {
-      expect(ids(g).size).toBe(g.nodes.length);
-    },
-  );
-
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s has a root that exists',
-    (_code, g) => {
-      expect(ids(g).has(g.rootId)).toBe(true);
-    },
-  );
-
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s edges reference real nodes',
-    (_code, g) => {
-      const known = ids(g);
-      for (const e of g.edges) {
-        expect(known.has(e.source)).toBe(true);
-        expect(known.has(e.target)).toBe(true);
-      }
-    },
-  );
-
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s children reference real nodes',
-    (_code, g) => {
-      const known = ids(g);
-      for (const n of g.nodes) {
-        for (const c of n.children) expect(known.has(c)).toBe(true);
-      }
-    },
-  );
-
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s reaches every node from the root',
-    (_code, g) => {
-      const adj = new Map<string, string[]>();
-      for (const e of g.edges) {
-        adj.set(e.source, [...(adj.get(e.source) ?? []), e.target]);
-        adj.set(e.target, [...(adj.get(e.target) ?? []), e.source]);
-      }
-      const seen = new Set([g.rootId]);
-      const queue = [g.rootId];
-      while (queue.length) {
-        for (const nxt of adj.get(queue.shift()!) ?? []) {
-          if (!seen.has(nxt)) {
-            seen.add(nxt);
-            queue.push(nxt);
-          }
-        }
-      }
-      expect(seen.size).toBe(g.nodes.length);
-    },
-  );
-
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s gives every node a blurb and a known tier',
-    (_code, g) => {
-      for (const n of g.nodes) {
-        expect(n.blurb.length).toBeGreaterThan(0);
-        expect(TIER_COLOR[n.tier]).toBeDefined();
-      }
-    },
-  );
-});
-
-/**
- * The nodes now carry a numeric `mastery` as well as a `tier`, because the
- * demo draws an arc for it. Two fields that can disagree need one authority:
- * `tierForMastery`, ported from `backend/config.py::get_mastery_tier`. Without
- * this suite a hand-authored node can paint a 90% ring in the struggling red.
- */
-describe('COURSE_GRAPHS — mastery scores (#344 step 3)', () => {
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s scores every node in 0–1, agreeing with its tier',
-    (_code, g) => {
-      for (const n of g.nodes) {
-        expect(n.mastery, n.id).toBeGreaterThanOrEqual(0);
-        expect(n.mastery, n.id).toBeLessThanOrEqual(1);
-        expect(tierForMastery(n.mastery), n.id).toBe(n.tier);
-      }
-    },
-  );
-
-  /**
-   * The root's ring and the surface's chrome bar both print the COURSE
-   * number, so the root's score has to be the concepts' mean rather than an
-   * independently invented figure — otherwise the header contradicts the
-   * picture directly under it.
-   */
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s roots at the mean of its concepts',
-    (_code, g) => {
-      const concepts = conceptNodes(g);
-      expect(concepts).toHaveLength(g.nodes.length - 1);
-      const mean = concepts.reduce((sum, n) => sum + n.mastery, 0) / concepts.length;
-      const root = g.nodes.find((n) => n.id === g.rootId)!;
-      expect(root.mastery).toBeCloseTo(mean, 6);
-    },
-  );
-
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s draws a legible slice of a bigger course',
-    (_code, g) => {
-      expect(g.conceptCount).toBeGreaterThan(conceptNodes(g).length);
-      // The root blurb states the same number in prose ("… — 19 concepts
-      // mapped from your syllabus"); a mismatch is the surface arguing with
-      // its own detail panel.
-      expect(g.nodes.find((n) => n.id === g.rootId)!.blurb).toContain(String(g.conceptCount));
-    },
-  );
-
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s shows every tier at least once, so the legend is never a dead row',
-    (_code, g) => {
-      const counts = tierCounts(g);
-      for (const t of TIER_ORDER) expect(counts[t], `${g.id} ${t}`).toBeGreaterThan(0);
-      const total = TIER_ORDER.reduce((sum, t) => sum + counts[t], 0);
-      expect(total).toBe(conceptNodes(g).length);
-    },
-  );
-
-  /**
-   * The detail panel prints "N connections" and lists them. That count is the
-   * number of LINES a visitor can see leaving the node, so it reads `edges`,
-   * not the dead `children` field.
-   */
-  it.each(COURSE_GRAPHS.map((g) => [g.code, g] as const))(
-    '%s connects every node to at least one other, counted off the drawn edges',
-    (_code, g) => {
-      for (const n of g.nodes) {
-        const links = neighbours(g, n.id);
-        expect(links.length, n.id).toBeGreaterThan(0);
-        expect(new Set(links.map((l) => l.id)).size, `${n.id} duplicates`).toBe(links.length);
-        expect(links.some((l) => l.id === n.id), `${n.id} self-link`).toBe(false);
-      }
-    },
-  );
-});
-
-describe('tierForMastery', () => {
-  // The backend's cutoffs, restated as data so a drift in either direction is
-  // a failing test rather than a landing page that grades differently from
-  // the product.
-  it.each([
-    [1, 'mastered'],
-    [0.75, 'mastered'],
-    [0.7499, 'learning'],
-    [0.45, 'learning'],
-    [0.4499, 'struggling'],
-    [0.1, 'struggling'],
-    [0.0999, 'unexplored'],
-    [0, 'unexplored'],
-  ] as const)('scores %s as %s', (score, tier) => {
-    expect(tierForMastery(score)).toBe(tier);
-  });
-});
-
-describe('TIER_LABEL / TIER_ORDER', () => {
-  it('names every tier in the product’s own words', () => {
-    expect(TIER_LABEL).toEqual({
-      mastered: 'Mastered',
-      learning: 'Learning',
-      struggling: 'Struggling',
-      unexplored: 'Unexplored',
-    });
-  });
-
-  it('orders the legend strongest-first, covering every tier exactly once', () => {
-    expect([...TIER_ORDER]).toEqual(['mastered', 'learning', 'struggling', 'unexplored']);
-    expect(new Set(TIER_ORDER).size).toBe(Object.keys(TIER_COLOR).length);
-  });
-});
-
-/**
- * #344 visual 1 — this file shipped a FOURTH inlined copy of the mastery
- * palette (`#1B6C42` / `#D97706` / `#EF4444` / `#9CA3AF`), so the landing page
- * advertised different mastery colours than the product it advertises.
- * globals.css:80-89 declares the canonical set and calls itself the "Single
- * source for the 3 previously-inlined copies in Dashboard / Tree / notetaker".
- *
- * The old assertion here was `toMatch(/^#/)` — which is what let four wrong
- * literals through in the first place. Any hex now fails outright.
- */
-describe('TIER_COLOR', () => {
-  it('consumes the canonical --state-* tokens, never a literal', () => {
-    expect(TIER_COLOR).toEqual({
-      mastered: 'var(--state-mastery)',
-      learning: 'var(--state-progress)',
-      struggling: 'var(--state-struggle)',
-      unexplored: 'var(--state-neutral)',
-    });
-  });
-
-  it.each(Object.entries(TIER_COLOR))('%s is a token reference', (_tier, value) => {
-    expect(value).toMatch(/^var\(--state-[a-z]+\)$/);
-    expect(value).not.toMatch(/#/);
-  });
-});
diff --git a/frontend/src/components/marketing/graph/courseGraphs.ts b/frontend/src/components/marketing/graph/courseGraphs.ts
deleted file mode 100644
index 89563558..00000000
--- a/frontend/src/components/marketing/graph/courseGraphs.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-/**
- * Hand-authored demo graphs for the landing page (#344).
- *
- * Deliberately static. An earlier option generated these live from a public
- * endpoint, which was rejected: it puts an unauthenticated, billable LLM call
- * on the most-crawled page on the site. See the spec's "Rejected alternatives".
- *
- * Shapes mirror the real `graph_nodes` / `graph_edges` semantics — mastery
- * tiers included — so the colour language matches the app and the hero legend.
- */
-
-export type MasteryTier = 'mastered' | 'learning' | 'struggling' | 'unexplored';
-
-/**
- * The canonical knowledge-status palette — the SAME tokens the product uses.
- *
- * globals.css:80-89 declares these as the "Single source for the 3
- * previously-inlined copies in Dashboard / Tree / notetaker", and the app reads
- * them under exactly the four tier names below (notetaker/page.tsx,
- * screens/Dashboard.tsx, screens/Learn.tsx). This file shipped a FOURTH inlined
- * copy with four different literals — `#1B6C42` / `#D97706` / `#EF4444` /
- * `#9CA3AF` — so the landing page advertised different mastery colours than the
- * product it advertises, and the saturated amber root plus a `#EF4444` that
- * reads as an error state were the loudest objects on a page whose brand
- * atmosphere is "barely-there … like the glow under water" (#344 visual 1).
- *
- * Tokens, not hexes, on purpose: a future palette move lands here for free, and
- * the hero's floating legend card ((public)/page.tsx) now reads the same four.
- */
-export const TIER_COLOR: Record<MasteryTier, string> = {
-  mastered: 'var(--state-mastery)',
-  learning: 'var(--state-progress)',
-  struggling: 'var(--state-struggle)',
-  unexplored: 'var(--state-neutral)',
-};
-
-/**
- * The product's own words for the four tiers — byte-identical to `TIER_META`
- * in `components/screens/Tree.tsx`, which is what a signed-in student reads
- * next to these same four colours. The landing page's legend has to teach the
- * vocabulary the app then uses, or it has taught the visitor nothing.
- */
-export const TIER_LABEL: Record<MasteryTier, string> = {
-  mastered: 'Mastered',
-  learning: 'Learning',
-  struggling: 'Struggling',
-  unexplored: 'Unexplored',
-};
-
-/** Legend order: strongest first, so the ramp reads as a ramp. */
-export const TIER_ORDER: readonly MasteryTier[] = [
-  'mastered',
-  'learning',
-  'struggling',
-  'unexplored',
-] as const;
-
-/**
- * The score → tier cutoffs, ported from `backend/config.py::get_mastery_tier`.
- *
- * The demo now draws a mastery ARC on every node, so each fixture node carries
- * a numeric `mastery` alongside its `tier` — two fields that can disagree. They
- * are held together by this function plus the fixture-integrity test, so a
- * hand-authored node whose ring says 90% can never be painted "struggling".
- * Same numbers as the backend on purpose: the ring a visitor reads here is the
- * ring they get after signing in.
- */
-export function tierForMastery(score: number): MasteryTier {
-  if (score >= 0.75) return 'mastered';
-  if (score >= 0.45) return 'learning';
-  if (score >= 0.1) return 'struggling';
-  return 'unexplored';
-}
-
-export interface DemoNode {
-  id: string;
-  label: string;
-  tier: MasteryTier;
-  /**
-   * Mastery score, 0–1. Drives the arc swept around the node's ring and the
-   * meter in the detail panel. Must agree with `tier` via `tierForMastery`.
-   * On the root this is the COURSE aggregate — the mean of its concepts —
-   * which is also what the surface's chrome bar prints.
-   */
-  mastery: number;
-  /** Shown on hover. One sentence, no trailing period. */
-  blurb: string;
-  /** Revealed when this node is expanded. Empty means leaf. */
-  children: string[];
-}
-
-export interface DemoEdge {
-  source: string;
-  target: string;
-}
-
-export interface CourseGraph {
-  id: string;
-  /** Chip label, e.g. "CS 210". */
-  code: string;
-  name: string;
-  rootId: string;
-  /**
-   * Concepts the real course carries. The demo draws a legible SLICE of them
-   * (five plus the root), and the chrome bar says so — "5 of 19 shown" — so
-   * the surface never implies a nineteen-concept course fits in six dots. Kept
-   * in step with the root blurb and with `UploadSurface`'s "19 concepts mapped
-   * onto MA 242" one band below.
-   */
-  conceptCount: number;
-  nodes: DemoNode[];
-  edges: DemoEdge[];
-}
-
-/** The drawn concepts — everything but the course anchor. */
-export function conceptNodes(graph: CourseGraph): DemoNode[] {
-  return graph.nodes.filter((n) => n.id !== graph.rootId);
-}
-
-/** Tier histogram over the drawn concepts. The legend's counts. */
-export function tierCounts(graph: CourseGraph): Record<MasteryTier, number> {
-  const counts: Record<MasteryTier, number> = {
-    mastered: 0,
-    learning: 0,
-    struggling: 0,
-    unexplored: 0,
-  };
-  for (const n of conceptNodes(graph)) counts[n.tier] += 1;
-  return counts;
-}
-
-/**
- * Everything `id` shares a drawn edge with, in edge order.
- *
- * Reads `graph.edges` rather than `DemoNode.children` for the same reason
- * `layout.ts::spanningTree` does: `children` is dead data that disagrees with
- * the edges, and the detail panel's connection count has to be the count of
- * lines a visitor can see running out of that node.
- */
-export function neighbours(graph: CourseGraph, id: string): DemoNode[] {
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const out: DemoNode[] = [];
-  const seen = new Set<string>();
-  for (const e of graph.edges) {
-    const other = e.source === id ? e.target : e.target === id ? e.source : null;
-    if (!other || seen.has(other)) continue;
-    const node = byId.get(other);
-    if (!node) continue;
-    seen.add(other);
-    out.push(node);
-  }
-  return out;
-}
-
-export const COURSE_GRAPHS: CourseGraph[] = [
-  {
-    id: 'cs210',
-    code: 'CS 210',
-    name: 'Data Structures',
-    rootId: 'cs-root',
-    conceptCount: 24,
-    nodes: [
-      { id: 'cs-root', label: 'CS 210', tier: 'learning', mastery: 0.482, blurb: 'Data Structures — 24 concepts mapped from your syllabus', children: ['cs-arrays', 'cs-recursion', 'cs-complexity'] },
-      { id: 'cs-arrays', label: 'Arrays', tier: 'mastered', mastery: 0.9, blurb: 'Contiguous storage and index arithmetic', children: ['cs-sorting'] },
-      { id: 'cs-recursion', label: 'Recursion', tier: 'struggling', mastery: 0.28, blurb: 'Base cases, call stack depth, and when to prefer iteration', children: ['cs-trees'] },
-      { id: 'cs-complexity', label: 'Big-O', tier: 'learning', mastery: 0.62, blurb: 'Asymptotic bounds for time and space', children: [] },
-      { id: 'cs-sorting', label: 'Sorting', tier: 'learning', mastery: 0.55, blurb: 'Comparison sorts and their lower bound', children: [] },
-      { id: 'cs-trees', label: 'Trees', tier: 'unexplored', mastery: 0.06, blurb: 'Traversals, balance, and why recursion fits them', children: [] },
-    ],
-    edges: [
-      { source: 'cs-root', target: 'cs-arrays' },
-      { source: 'cs-root', target: 'cs-recursion' },
-      { source: 'cs-root', target: 'cs-complexity' },
-      { source: 'cs-arrays', target: 'cs-sorting' },
-      { source: 'cs-recursion', target: 'cs-trees' },
-      { source: 'cs-sorting', target: 'cs-complexity' },
-    ],
-  },
-  {
-    id: 'ma242',
-    code: 'MA 242',
-    name: 'Linear Algebra',
-    rootId: 'ma-root',
-    conceptCount: 19,
-    nodes: [
-      { id: 'ma-root', label: 'MA 242', tier: 'learning', mastery: 0.498, blurb: 'Linear Algebra — 19 concepts mapped from your syllabus', children: ['ma-vectors', 'ma-matrices', 'ma-eigen'] },
-      { id: 'ma-vectors', label: 'Vector Spaces', tier: 'mastered', mastery: 0.93, blurb: 'Span, basis, and dimension', children: ['ma-independence'] },
-      { id: 'ma-matrices', label: 'Matrices', tier: 'learning', mastery: 0.66, blurb: 'Linear maps written as arrays of numbers', children: ['ma-determinant'] },
-      { id: 'ma-eigen', label: 'Eigenvalues', tier: 'struggling', mastery: 0.31, blurb: 'Directions a transformation only scales', children: [] },
-      { id: 'ma-independence', label: 'Independence', tier: 'learning', mastery: 0.52, blurb: 'When no vector is redundant', children: [] },
-      { id: 'ma-determinant', label: 'Determinant', tier: 'unexplored', mastery: 0.07, blurb: 'Signed volume scaling of a transformation', children: [] },
-    ],
-    edges: [
-      { source: 'ma-root', target: 'ma-vectors' },
-      { source: 'ma-root', target: 'ma-matrices' },
-      { source: 'ma-root', target: 'ma-eigen' },
-      { source: 'ma-vectors', target: 'ma-independence' },
-      { source: 'ma-matrices', target: 'ma-determinant' },
-      { source: 'ma-matrices', target: 'ma-eigen' },
-    ],
-  },
-  {
-    id: 'sm275',
-    code: 'SM 275',
-    name: 'Statistics',
-    rootId: 'sm-root',
-    conceptCount: 21,
-    nodes: [
-      { id: 'sm-root', label: 'SM 275', tier: 'learning', mastery: 0.47, blurb: 'Statistics — 21 concepts mapped from your syllabus', children: ['sm-prob', 'sm-dist', 'sm-testing'] },
-      { id: 'sm-prob', label: 'Probability', tier: 'mastered', mastery: 0.86, blurb: 'Sample spaces, events, and conditioning', children: ['sm-bayes'] },
-      { id: 'sm-dist', label: 'Distributions', tier: 'learning', mastery: 0.66, blurb: 'Shapes that recur across real data', children: ['sm-clt'] },
-      // "Hypothesis Tests" was 16 characters — three more than any other label
-      // in any fixture, and the widest object in the phone layout by a margin.
-      // At the 390px breakpoint it overlapped its sibling "Distributions" by
-      // ~21 CSS px of solid text (#344 visual 4, "worse at 390px"), and no
-      // legible mobile type scale can separate them: the two labels need
-      // 0.6·font·29/2 units of room against a ring that only yields 1.732·ring.
-      // Shortening the label is the proportionate fix — not a collision solver.
-      { id: 'sm-testing', label: 'p-Values', tier: 'struggling', mastery: 0.27, blurb: 'What a p-value does and does not claim', children: [] },
-      { id: 'sm-bayes', label: 'Bayes', tier: 'learning', mastery: 0.53, blurb: 'Updating belief as evidence arrives', children: [] },
-      { id: 'sm-clt', label: 'Central Limit', tier: 'unexplored', mastery: 0.03, blurb: 'Why sample means go normal', children: [] },
-    ],
-    edges: [
-      { source: 'sm-root', target: 'sm-prob' },
-      { source: 'sm-root', target: 'sm-dist' },
-      { source: 'sm-root', target: 'sm-testing' },
-      { source: 'sm-prob', target: 'sm-bayes' },
-      { source: 'sm-dist', target: 'sm-clt' },
-      { source: 'sm-dist', target: 'sm-testing' },
-    ],
-  },
-];
diff --git a/frontend/src/components/marketing/graph/layout.test.ts b/frontend/src/components/marketing/graph/layout.test.ts
deleted file mode 100644
index a65c7aa6..00000000
--- a/frontend/src/components/marketing/graph/layout.test.ts
+++ /dev/null
@@ -1,967 +0,0 @@
-/**
- * The layout is deterministic on purpose: the E2E lane parks the animation and
- * asserts against a laid-out frame, so identical input must give identical
- * coordinates on every run and in every environment.
- */
-import { describe, it, expect } from 'vitest';
-
-import { COURSE_GRAPHS, type CourseGraph } from './courseGraphs';
-import {
-  DESKTOP_VIEW,
-  GRAPH_VIEWS,
-  MOBILE_VIEW,
-  easeOutCubic,
-  fitViewBox,
-  helixEntry,
-  labelBaselineY,
-  radialLayout,
-  viewBoxAttr,
-} from './layout';
-
-const G = COURSE_GRAPHS[0];
-
-/**
- * The BFS spanning tree of the undirected graph — restated here rather than
- * exported from `layout.ts`, so the assertions below are an INDEPENDENT reading
- * of the same fixtures. (Deliberately not `DemoNode.children`: that field is
- * dead data that disagrees with `edges`, which is exactly why the layout must
- * not read it either.)
- */
-function bfsTree(graph: CourseGraph) {
-  const adj = new Map<string, string[]>();
-  for (const e of graph.edges) {
-    adj.set(e.source, [...(adj.get(e.source) ?? []), e.target]);
-    adj.set(e.target, [...(adj.get(e.target) ?? []), e.source]);
-  }
-  const depth = new Map<string, number>([[graph.rootId, 0]]);
-  const parent = new Map<string, string>();
-  const queue = [graph.rootId];
-  while (queue.length) {
-    const cur = queue.shift()!;
-    for (const nxt of adj.get(cur) ?? []) {
-      if (!depth.has(nxt)) {
-        depth.set(nxt, depth.get(cur)! + 1);
-        parent.set(nxt, cur);
-        queue.push(nxt);
-      }
-    }
-  }
-  return { depth, parent };
-}
-
-const dist = (a: { x: number; y: number }, b: { x: number; y: number }) =>
-  Math.hypot(a.x - b.x, a.y - b.y);
-
-describe('radialLayout', () => {
-  it('positions every node', () => {
-    const p = radialLayout(G, 800, 500);
-    expect(p.size).toBe(G.nodes.length);
-    for (const n of G.nodes) expect(p.get(n.id)).toBeDefined();
-  });
-
-  /**
-   * CRITERION 1 — the whole point of this wave. The section is called "Pick a
-   * course. Watch it grow." and the product is called Sapling; the layout used
-   * to spread depth-1 around the FULL circle with the root at the frame's
-   * centre, so the drawing grew one arm up and two down and read as an inverted
-   * Y. Every node that is not the root now sits STRICTLY ABOVE it — smaller y,
-   * SVG coordinates — in every fixture, in every shipped view.
-   *
-   * Asserted as a margin rather than as `< rootY` so a layout that merely
-   * grazes the root's own line (the ring layout put two nodes exactly on it)
-   * cannot squeak through: the closest any node comes is `ring · sin(π/4)`,
-   * measured 113.1 units on desktop and 74.9 on the phone.
-   */
-  it('grows upward — every node sits strictly above the root', () => {
-    for (const graph of COURSE_GRAPHS) {
-      for (const view of GRAPH_VIEWS) {
-        const pts = radialLayout(graph, view.w, view.h, view.maxRadius);
-        const root = pts.get(graph.rootId)!;
-        for (const n of graph.nodes) {
-          if (n.id === graph.rootId) continue;
-          expect(
-            pts.get(n.id)!.y,
-            `${graph.id}/${n.id} at maxRadius ${view.maxRadius}`,
-          ).toBeLessThan(root.y - view.nodeR);
-        }
-      }
-    }
-  });
-
-  /**
-   * …and the other half of criterion 1: the root is at the BOTTOM-CENTRE of the
-   * content, not in the middle of it.
-   *
-   * `radialLayout` lays the skeleton out with the root at the origin and then
-   * translates it as a rigid body until the skeleton's own bounding box is
-   * centred on `(w/2, h/2)` — the point `helixEntry` spirals around and
-   * `fitViewBox` fits its frame about. So the root is the LOWEST node, it is
-   * horizontally centred in the drawing (the fan is mirror-symmetric), and it
-   * sits BELOW the layout centre rather than on it.
-   */
-  it('puts the root at the bottom-centre of the content', () => {
-    const p = radialLayout(G, 800, 500);
-    const root = p.get(G.rootId)!;
-    const xs = [...p.values()].map((q) => q.x);
-    const ys = [...p.values()].map((q) => q.y);
-
-    expect(root.y).toBe(Math.max(...ys));
-    expect(root.x).toBeCloseTo((Math.min(...xs) + Math.max(...xs)) / 2, 6);
-    expect(root.x).toBeCloseTo(400, 6);
-    expect(root.y).toBeGreaterThan(250);
-    // The skeleton, not the root, is what is centred on the layout box.
-    expect((Math.min(...ys) + Math.max(...ys)) / 2).toBeCloseTo(250, 6);
-  });
-
-  it('is deterministic', () => {
-    expect(radialLayout(G, 800, 500)).toEqual(radialLayout(G, 800, 500));
-  });
-
-  it('separates nodes at the same depth', () => {
-    const p = radialLayout(G, 800, 500);
-    const depth1 = G.nodes.find((n) => n.id === G.rootId)!.children;
-    const pts = depth1.map((id) => p.get(id)!);
-    for (let i = 0; i < pts.length; i++) {
-      for (let j = i + 1; j < pts.length; j++) {
-        const d = Math.hypot(pts[i].x - pts[j].x, pts[i].y - pts[j].y);
-        expect(d).toBeGreaterThan(40);
-      }
-    }
-  });
-
-  it('scales with the viewport', () => {
-    const small = radialLayout(G, 400, 300);
-    const large = radialLayout(G, 1200, 800);
-    expect(small).not.toEqual(large);
-  });
-
-  /**
-   * CRITERION 1, and the pin the whole rewrite hangs on.
-   *
-   * The layout used to be global concentric rings: a node's angle came from its
-   * index within its depth, with no relationship to where its parent sat. This
-   * is the invariant that says otherwise — a child is placed off ITS OWN
-   * PARENT, so the distance between the two is exactly one ring step, for every
-   * non-root node, in every fixture, in every view.
-   *
-   * It fails outright on the ring layout, where the same edges measured 116.0
-   * AND 170.9 units on desktop depending on which ring angles happened to line
-   * up (`cs-arrays → cs-sorting` was the 170.9).
-   */
-  it('places every node exactly one ring step from its BFS parent', () => {
-    for (const graph of COURSE_GRAPHS) {
-      for (const view of GRAPH_VIEWS) {
-        const pts = radialLayout(graph, view.w, view.h, view.maxRadius);
-        const { depth, parent } = bfsTree(graph);
-        // maxDepth is 2 in every fixture, so the step is half the budget.
-        const step = view.maxRadius / Math.max(...depth.values());
-        for (const n of graph.nodes) {
-          if (n.id === graph.rootId) continue;
-          const d = dist(pts.get(n.id)!, pts.get(parent.get(n.id)!)!);
-          expect(d, `${graph.id}/${n.id} → ${parent.get(n.id)}`).toBeCloseTo(step, 6);
-        }
-      }
-    }
-  });
-
-  /**
-   * CRITERION 1 as the brief states it: a child sits WITH its parent, i.e. its
-   * BFS parent is the nearest node of the previous depth. Weaker than the
-   * one-ring-step pin above (the ring layout happens to satisfy it too), but it
-   * is the property a reader actually cares about, so it is asserted rather
-   * than implied — and it stays true for a parent with several children, where
-   * the exact-step assertion alone would not rule out a child drifting nearer
-   * to somebody else's parent.
-   */
-  it('keeps every node nearer its own parent than any other node of that depth', () => {
-    for (const graph of COURSE_GRAPHS) {
-      for (const view of GRAPH_VIEWS) {
-        const pts = radialLayout(graph, view.w, view.h, view.maxRadius);
-        const { depth, parent } = bfsTree(graph);
-        for (const n of graph.nodes) {
-          if (n.id === graph.rootId) continue;
-          const mine = dist(pts.get(n.id)!, pts.get(parent.get(n.id)!)!);
-          for (const other of graph.nodes) {
-            if (other.id === parent.get(n.id)) continue;
-            if (depth.get(other.id) !== depth.get(n.id)! - 1) continue;
-            expect(
-              dist(pts.get(n.id)!, pts.get(other.id)!),
-              `${graph.id}/${n.id}: ${other.id} is nearer than its parent ${parent.get(n.id)}`,
-            ).toBeGreaterThan(mine);
-          }
-        }
-      }
-    }
-  });
-
-  /**
-   * CRITERION 2 — no long flung edges. Measured over the TREE edges, which are
-   * the ones the layout is responsible for; cross-edges are drawn but not
-   * positioned (see below).
-   *
-   * Desktop, before → after: max 170.9 → 116.0, mean 128.5 → 116.0. Phone:
-   * max 97.3 → 81.5, mean 73.1 → 81.5 (the phone's ring grew with the retune,
-   * so its mean rises while its max falls). Asserted against the ring step
-   * rather than a magic number, so it stays meaningful if a view is retuned.
-   */
-  it('draws no tree edge longer than one ring step', () => {
-    for (const graph of COURSE_GRAPHS) {
-      for (const view of GRAPH_VIEWS) {
-        const pts = radialLayout(graph, view.w, view.h, view.maxRadius);
-        const { depth, parent } = bfsTree(graph);
-        const step = view.maxRadius / Math.max(...depth.values());
-        const lengths = graph.edges
-          .filter((e) => parent.get(e.target) === e.source || parent.get(e.source) === e.target)
-          .map((e) => dist(pts.get(e.source)!, pts.get(e.target)!));
-        expect(lengths.length, `${graph.id} tree edges`).toBe(graph.nodes.length - 1);
-        expect(Math.max(...lengths), `${graph.id} longest tree edge`).toBeLessThanOrEqual(
-          step + 1e-9,
-        );
-      }
-    }
-  });
-
-  /**
-   * The tree governs POSITION only. Every fixture carries exactly one edge that
-   * is NOT a tree edge — `cs-sorting → cs-complexity`, `ma-matrices →
-   * ma-eigen`, `sm-dist → sm-testing` — and `AssemblingGraph` maps
-   * `graph.edges`, so all of them are still drawn; cs210's closes a triangle
-   * from the lower-right tip back up to the top node and is a good part of why
-   * the picture reads as a graph rather than a star. Pinned here because a
-   * future "just draw the tree" simplification would silently drop it.
-   */
-  it('leaves the fixtures with a drawn cross-edge the tree does not own', () => {
-    for (const graph of COURSE_GRAPHS) {
-      const { parent } = bfsTree(graph);
-      const cross = graph.edges.filter(
-        (e) => parent.get(e.target) !== e.source && parent.get(e.source) !== e.target,
-      );
-      expect(cross.length, `${graph.id} cross-edges`).toBe(1);
-      // …and both of its endpoints are laid out, so it is drawable.
-      const pts = radialLayout(graph, DESKTOP_VIEW.w, DESKTOP_VIEW.h, DESKTOP_VIEW.maxRadius);
-      expect(pts.get(cross[0].source)).toBeDefined();
-      expect(pts.get(cross[0].target)).toBeDefined();
-    }
-  });
-
-  /**
-   * The no-horizontal invariant, carried over — RETARGETED AT THE ROOT, which
-   * is the only retarget in this file that changes what is measured rather than
-   * what the number is.
-   *
-   * It used to measure the angle from `(w/2, h/2)`, which was the root. It is
-   * not any more: the root sits at the bottom-centre of the content and
-   * `(w/2, h/2)` is the centre of the skeleton's bounding box — the point the
-   * entry sweep spirals around. The line that matters for the drawing has
-   * always been "the horizontal through the node everything radiates from", and
-   * that node is the root. Measured off `(w/2, h/2)` instead, the two outer
-   * depth-1 children now sit exactly ON it by construction (the fan's tips and
-   * the root define the box, so its mid-line runs through them) — which is
-   * geometrically meaningless and would fail a test whose subject no longer
-   * exists.
-   *
-   * Off the ROOT the invariant is stronger than it has ever been: the closest
-   * any node comes to the horizon is `sin(π/4)` = 0.707, against 0.5 for the
-   * downward tree and exactly 0 for the ring layout it replaced. The bar stays
-   * at the 0.4 the previous wave set.
-   */
-  it('never lands a node on the horizontal axis through the root', () => {
-    for (const graph of COURSE_GRAPHS) {
-      for (const view of GRAPH_VIEWS) {
-        const pts = radialLayout(graph, view.w, view.h, view.maxRadius);
-        const root = pts.get(graph.rootId)!;
-        for (const n of graph.nodes) {
-          if (n.id === graph.rootId) continue;
-          const p = pts.get(n.id)!;
-          const dx = p.x - root.x;
-          const dy = p.y - root.y;
-          expect(
-            Math.abs(dy) / Math.hypot(dx, dy),
-            `${graph.id}/${n.id} at maxRadius ${view.maxRadius}`,
-          ).toBeGreaterThan(0.4);
-        }
-      }
-    }
-  });
-
-  /**
-   * …and the invariant `fanAngle` actually claims, which is stronger than the
-   * three fixtures: for a fan of ANY size the seat angles are
-   * `−π + k·π/(count+1)` for `k` in `1…count`, so the closest one can ever come
-   * to the horizontal is `sin(π/(count+1))`. Swept over fan sizes 1…24 on
-   * synthetic star graphs, with the count-aware floor rather than a flat
-   * number, because a flat number is only meaningful for the fan sizes that
-   * happen to ship today.
-   *
-   * The floor is the one the previous wave's `ringPhase` guaranteed —
-   * `sin(π/(2·count))` — kept deliberately: `π/(count+1) ≥ π/(2·count)` for
-   * every `count ≥ 1`, so passing it proves the new rule is never worse than
-   * the old one at any size, not merely that it happens to pass its own bar.
-   */
-  it('holds the no-horizontal invariant at any fan size', () => {
-    const star = (count: number): CourseGraph => ({
-      id: `star${count}`,
-      code: 'X',
-      name: 'X',
-      rootId: 'r',
-      conceptCount: count,
-      nodes: [
-        { id: 'r', label: 'r', tier: 'learning', mastery: 0.5, blurb: '', children: [] },
-        ...Array.from({ length: count }, (_, i) => ({
-          id: `n${i}`,
-          label: `n${i}`,
-          tier: 'learning' as const,
-          mastery: 0.5,
-          blurb: '',
-          children: [],
-        })),
-      ],
-      edges: Array.from({ length: count }, (_, i) => ({ source: 'r', target: `n${i}` })),
-    });
-
-    for (let count = 1; count <= 24; count++) {
-      const pts = radialLayout(star(count), 900, 560, 232);
-      const root = pts.get('r')!;
-      // The bar the previous wave's ring phase guaranteed, minus float slop.
-      const floor = Math.sin(Math.PI / (2 * count)) * 0.999;
-      for (let i = 0; i < count; i++) {
-        const p = pts.get(`n${i}`)!;
-        const sin = Math.abs(p.y - root.y) / Math.hypot(p.x - root.x, p.y - root.y);
-        expect(sin, `fan of ${count}, node ${i}`).toBeGreaterThan(floor);
-        // …and every one of them is above the root, at any fan size.
-        expect(p.y, `fan of ${count}, node ${i}`).toBeLessThan(root.y);
-      }
-    }
-  });
-
-  /**
-   * The wedge rule, which no shipped fixture exercises — every parent below the
-   * root has exactly one child, so every arm is collinear with its parent. This
-   * pins what happens when one doesn't: siblings SHARE their parent's angular
-   * span, evenly and symmetrically about the direction that parent itself grew
-   * in, so a branchy graph fans out instead of stacking on one ray.
-   *
-   * RETARGETED, not weakened. Two of its numbers moved with the angular domain,
-   * and both moves are the subject of this wave:
-   *
-   * - the axis. It used to be measured as the bearing from `(w/2, h/2)` to the
-   *   parent, which was the same thing as "the direction the parent grew" only
-   *   because the root sat at `(w/2, h/2)`. It no longer does, so the axis is
-   *   now read off the root — which is what "the parent's outward direction"
-   *   meant all along.
-   * - the span. Depth-1 used to own a full `2π/count` slot of a circle; it now
-   *   owns a `π/(count+1)` slot of the upward half-plane. With two children
-   *   that is π/3 rather than π, so three grandchildren land at −π/9, 0, +π/9
-   *   off the axis instead of −π/3, 0, +π/3. The RULE — even, symmetric
-   *   subdivision of exactly the parent's own span — is unchanged and is what
-   *   is asserted; the arithmetic is derived from `π/(count+1)` in the test so
-   *   it cannot drift from the implementation silently.
-   */
-  it('splits a parent’s wedge evenly between its children', () => {
-    const graph: CourseGraph = {
-      id: 'fan',
-      code: 'X',
-      name: 'X',
-      rootId: 'r',
-      conceptCount: 5,
-      nodes: ['r', 'a', 'b', 'a1', 'a2', 'a3'].map((id) => ({
-        id,
-        label: id,
-        tier: 'learning' as const,
-        mastery: 0.5,
-        blurb: '',
-        children: [],
-      })),
-      edges: [
-        { source: 'r', target: 'a' },
-        { source: 'r', target: 'b' },
-        { source: 'a', target: 'a1' },
-        { source: 'a', target: 'a2' },
-        { source: 'a', target: 'a3' },
-      ],
-    };
-    const pts = radialLayout(graph, 900, 560, 232);
-    const a = pts.get('a')!;
-    const root = pts.get('r')!;
-    // Direction from `a` to each child, measured off `a`. The wedge's own axis
-    // is the direction `a` itself grew in, i.e. the bearing from the ROOT.
-    const bearing = (id: string) => Math.atan2(pts.get(id)!.y - a.y, pts.get(id)!.x - a.x);
-    const outward = Math.atan2(a.y - root.y, a.x - root.x);
-    // `a` and `b` take two of a 3-way split of the upward half-plane, so `a`
-    // owns a π/3 wedge; three children take the centres of three π/9 slices.
-    const slice = Math.PI / (2 + 1) / 3;
-    expect(bearing('a1') - outward).toBeCloseTo(-slice, 6);
-    expect(bearing('a2') - outward).toBeCloseTo(0, 6);
-    expect(bearing('a3') - outward).toBeCloseTo(slice, 6);
-    // Symmetric about the axis, and all still one ring step out.
-    for (const id of ['a1', 'a2', 'a3']) {
-      expect(Math.hypot(pts.get(id)!.x - a.x, pts.get(id)!.y - a.y), id).toBeCloseTo(116, 6);
-    }
-    // A child pushed off its parent's outward direction lands INSIDE maxRadius
-    // of the root — `maxRadius` is a budget, not an outer ring.
-    for (const id of ['a1', 'a3']) {
-      expect(Math.hypot(pts.get(id)!.x - root.x, pts.get(id)!.y - root.y), id).toBeLessThan(232);
-    }
-    // The deeper subtree took an OUTER seat: `a` carries three children and `b`
-    // none, so `a` is further from the vertical through the root than `b` is.
-    const off = (id: string) => Math.abs(pts.get(id)!.x - root.x);
-    expect(off('a')).toBeGreaterThan(off('b') - 1e-9);
-  });
-
-  it('keeps the default maxRadius at the old inscribed-circle rule', () => {
-    // The `maxRadius` parameter was added for the mobile view (#344 review #3).
-    // Its DEFAULT is unchanged, so every caller that omits it — the two tests
-    // above, and anything outside this module — keeps the geometry it had.
-    expect(radialLayout(G, 900, 560)).toEqual(
-      radialLayout(G, 900, 560, Math.min(900, 560) / 2 - 48),
-    );
-    // DESKTOP_VIEW no longer takes that default (232 → 320), and the assertion
-    // that it did is gone rather than adjusted, because the identity was never
-    // the point: the layout box only fixes the entry sweep's centre, while the
-    // spatial budget is bracketed by the rendered type scale, the label
-    // clearances and the phone's legibility floor. Pinning the value is this
-    // test's job; pinning it to an arithmetic coincidence with `w`/`h` would
-    // just re-break the moment either is retuned.
-    expect(DESKTOP_VIEW.maxRadius).toBe(320);
-    expect(MOBILE_VIEW.maxRadius).toBe(212);
-  });
-});
-
-describe('easeOutCubic', () => {
-  it('pins its endpoints and clamps', () => {
-    expect(easeOutCubic(0)).toBe(0);
-    expect(easeOutCubic(1)).toBe(1);
-    expect(easeOutCubic(-1)).toBe(0);
-    expect(easeOutCubic(4)).toBe(1);
-  });
-});
-
-describe('helixEntry', () => {
-  const target = { x: 300, y: 120 };
-  const centre = { x: 200, y: 200 };
-
-  it('lands exactly on the target at t=1', () => {
-    const r = helixEntry(target, centre, 1);
-    expect(r.x).toBeCloseTo(target.x, 6);
-    expect(r.y).toBeCloseTo(target.y, 6);
-    expect(r.scale).toBeCloseTo(1, 6);
-    expect(r.opacity).toBeCloseTo(1, 6);
-  });
-
-  it('starts invisible and small', () => {
-    const r = helixEntry(target, centre, 0);
-    expect(r.opacity).toBe(0);
-    expect(r.scale).toBeLessThan(0.5);
-  });
-
-  /**
-   * THE ENTRY IS A HELIX, NOT A FADE-IN — and this is the test that has to keep
-   * meaning that now the sweep is a quarter turn instead of 1.5 turns.
-   *
-   * Both bars are stated as SHAPE, not as a distance in units, because a
-   * distance bar silently weakens whenever the travel radius or the geometry
-   * moves. The measurements are taken at mid-flight (t = 0.5), where
-   * `easeOutCubic` has 12.5% of the entry left to run:
-   *
-   * - the node is more than a TENTH OF ITS OWN TRAVEL RADIUS off the point a
-   *   straight-line entry with the same easing would be at (measured 0.172, i.e.
-   *   21.97 units on this 128.06-unit example — it was 129.61 units at 1.5
-   *   turns, but 1.01 radii, because at 540° the "straight line" comparison is
-   *   meaningless: the node is halfway round the far side);
-   * - and it is more than 5° off its own settled BEARING from the centre
-   *   (measured 11.25° = 12.5% of the quarter turn), which is the part a plain
-   *   scale-and-fade cannot fake at any distance.
-   *
-   * The old bar was `> 10` units, i.e. 7.8% of this radius, so the floor went
-   * UP with the sweep coming down. `ENTRY_CONTRACTION = 1` is what makes the
-   * first number readable: the radial term is then exactly the straight line's
-   * own easing, so every unit of deviation measured here is rotation.
-   *
-   * Both bars BITE. Mid-flight offset is `2·e·sin(45°·turns)` radii and the
-   * swing is `45°·turns`, so dropping the entry to 0.146 turns fails the first
-   * and 0.111 fails the second — i.e. this test is what stops the next person
-   * from tightening the frame the lazy way, by taking the helix out entirely.
-   */
-  it('rotates around the centre on the way in — the helix', () => {
-    const mid = helixEntry(target, centre, 0.5);
-    const straight = {
-      x: centre.x + (target.x - centre.x) * easeOutCubic(0.5),
-      y: centre.y + (target.y - centre.y) * easeOutCubic(0.5),
-    };
-    const travel = Math.hypot(target.x - centre.x, target.y - centre.y);
-    const off = Math.hypot(mid.x - straight.x, mid.y - straight.y);
-    expect(off / travel, 'mid-flight offset from the straight line, in radii').toBeGreaterThan(0.1);
-
-    const bearing = (p: { x: number; y: number }) =>
-      Math.atan2(p.y - centre.y, p.x - centre.x);
-    const swing = Math.abs(bearing(mid) - bearing(target)) * (180 / Math.PI);
-    expect(swing, 'mid-flight bearing swing, degrees').toBeGreaterThan(5);
-  });
-
-  it('grows monotonically', () => {
-    let prev = -1;
-    for (let t = 0; t <= 1.0001; t += 0.1) {
-      const s = helixEntry(target, centre, t).scale;
-      expect(s).toBeGreaterThan(prev);
-      prev = s;
-    }
-  });
-
-  it('never travels further from the centre than its own target does', () => {
-    // The invariant behind the bounds sweep below: the entry path only ever
-    // *contracts* toward the centre, so the whole sweep lives inside the disc
-    // the static layout already fits to the viewBox. The pre-fix version
-    // stretched to 1.9× at t=0 and this fails outright (#344 review #4).
-    const targetRadius = Math.hypot(target.x - centre.x, target.y - centre.y);
-    for (let i = 0; i <= 1000; i++) {
-      const h = helixEntry(target, centre, i / 1000);
-      expect(Math.hypot(h.x - centre.x, h.y - centre.y)).toBeLessThanOrEqual(targetRadius + 1e-9);
-    }
-  });
-});
-
-/**
- * Labels render in JetBrains Mono, whose advance width is 600/1000 em. The text
- * is `textAnchor="middle"`, so half the string hangs off each side of the
- * node's x. Restated here rather than imported from `layout.ts` so the sweep
- * below stays an independent measurement of the frame the fit produced.
- */
-const MONO_ADVANCE_EM = 0.6;
-
-/** Everything a node draws at one instant: its dot, and its label box. */
-function drawnExtent(
-  view: (typeof GRAPH_VIEWS)[number],
-  label: string,
-  isRoot: boolean,
-  x: number,
-  y: number,
-  r: number,
-  scale: number,
-) {
-  const dotR = r * scale;
-  const half = (label.length * MONO_ADVANCE_EM * view.font) / 2 + view.labelHalo / 2;
-  const baseline = labelBaselineY(view, isRoot, y, r);
-  return {
-    left: Math.min(x - dotR, x - half),
-    right: Math.max(x + dotR, x + half),
-    // 0.73em of cap height above the baseline, 0.25em of descender below it.
-    top: Math.min(y - dotR, baseline - view.font * 0.73 - view.labelHalo / 2),
-    bottom: Math.max(y + dotR, baseline + view.font * 0.25 + view.labelHalo / 2),
-  };
-}
-
-/**
- * The height of the SETTLED drawing — top of the highest ink to bottom of the
- * lowest, across every fixture, in user units. Not the frame: the frame also
- * holds the entry sweep's headroom, and telling the two apart is the whole
- * subject of the phone-sizing test below that uses it.
- */
-function settledHeight(view: (typeof GRAPH_VIEWS)[number]): number {
-  let top = Infinity;
-  let bottom = -Infinity;
-  for (const graph of COURSE_GRAPHS) {
-    const points = radialLayout(graph, view.w, view.h, view.maxRadius);
-    for (const n of graph.nodes) {
-      const p = points.get(n.id)!;
-      const isRoot = n.id === graph.rootId;
-      const e = drawnExtent(view, n.label, isRoot, p.x, p.y, isRoot ? view.rootR : view.nodeR, 1);
-      top = Math.min(top, e.top);
-      bottom = Math.max(bottom, e.bottom);
-    }
-  }
-  return bottom - top;
-}
-
-/**
- * #344 review #4 — the bug this file should have caught during development.
- *
- * The entry path used to stretch the offset from the centre by up to 1.9×, so
- * against the real desktop layout the outer ring swung to y = 693 (133px past
- * the 560-unit viewBox edge), got chopped by the `<svg>` viewport, and crossed
- * back in at opacity ≈ 0.5 — plainly visible, and invisible in review only
- * because the animation was also playing off-screen (review #1).
- *
- * Retargeted at the DERIVED frame (#344 visual 3): the viewBox is no longer a
- * hardcoded `0 0 900 560` with room to spare, it is fitted to this very sweep,
- * so "does the frame still contain the assembly" is now a question about the
- * fit — and a too-small pad, a stale fit, or a hand-written viewBox all land
- * here.
- *
- * So: sweep `t` across the whole entry for every node of every fixture in every
- * view, and assert that the drawn extent — circle, label, halo — never leaves
- * the fitted box.
- */
-describe('helixEntry × radialLayout — nothing leaves the fitted viewBox', () => {
-  const STEPS = 400;
-
-  for (const view of GRAPH_VIEWS) {
-    for (const graph of COURSE_GRAPHS) {
-      it(`${graph.id} stays inside ${viewBoxAttr(view.fit)} across the whole sweep`, () => {
-        const points = radialLayout(graph, view.w, view.h, view.maxRadius);
-        const centre = { x: view.w / 2, y: view.h / 2 };
-        const { x, y, w, h } = view.fit;
-
-        for (const n of graph.nodes) {
-          const p = points.get(n.id)!;
-          const isRoot = n.id === graph.rootId;
-          const r = isRoot ? view.rootR : view.nodeR;
-
-          for (let i = 0; i <= STEPS; i++) {
-            const t = i / STEPS;
-            const f = helixEntry(p, centre, t);
-            const e = drawnExtent(view, n.label, isRoot, f.x, f.y, r, f.scale);
-            const where = `${graph.id}/${n.id} @ t=${t.toFixed(3)}`;
-
-            expect(e.left, `${where} left`).toBeGreaterThanOrEqual(x);
-            expect(e.right, `${where} right`).toBeLessThanOrEqual(x + w);
-            expect(e.top, `${where} top`).toBeGreaterThanOrEqual(y);
-            expect(e.bottom, `${where} bottom`).toBeLessThanOrEqual(y + h);
-          }
-        }
-      });
-    }
-  }
-
-  /**
-   * The assertion above is only worth anything if the sweep actually needs the
-   * headroom — otherwise a lazy "fit to the settled node positions" would pass
-   * it, and that is precisely the clipping bug (#344 review #4). So: build the
-   * box a settled fit would produce, and prove the ASSEMBLY LEAVES IT.
-   *
-   * That is now asserted directly rather than through the old proxy. The proxy
-   * was "the swept box overhangs the settled box by more than 25 units on the
-   * top AND the bottom", which held while `helixEntry` turned 1.5 times and
-   * every node passed through every direction (desktop 125.8 / 103.6 units,
-   * mobile 82.9 / 69.6). At the quarter turn it does not, and the reason is
-   * geometry rather than a weaker guard:
-   *
-   * - the fan's tips sit far from the centre and only ~27° above the horizontal,
-   *   so rotating them toward the vertical lifts them PAST the settled top —
-   *   desktop by 27.9 units (34.5 CSS px at the cap), mobile by 17.6 (13.6 px),
-   *   both at ~80% opacity, both plainly visible if the frame did not hold them;
-   * - nothing can swing BELOW the settled bottom, because the lowest ink is the
-   *   course code hanging under the root and the root is the node nearest the
-   *   centre. The bottom overhang is exactly 0, and the frame's bottom edge is
-   *   the settled bottom plus `fitPad` by construction.
-   *
-   * So the top overhang is asserted with a number, the bottom is asserted to be
-   * non-negative (the sweep never dips below the frame's floor), and the
-   * settled-fit box is built and shown to clip — which is the property the whole
-   * `fitViewBox` doc comment is about, and which no amount of retuning can make
-   * vacuous.
-   */
-  for (const view of GRAPH_VIEWS) {
-    it(`the ${view.maxRadius}-radius sweep leaves the settled bounding box`, () => {
-      const centre = { x: view.w / 2, y: view.h / 2 };
-      let settledTop = Infinity;
-      let settledBottom = -Infinity;
-      let sweptTop = Infinity;
-      let sweptBottom = -Infinity;
-
-      for (const graph of COURSE_GRAPHS) {
-        const points = radialLayout(graph, view.w, view.h, view.maxRadius);
-        for (const n of graph.nodes) {
-          const p = points.get(n.id)!;
-          const isRoot = n.id === graph.rootId;
-          const r = isRoot ? view.rootR : view.nodeR;
-
-          const rest = drawnExtent(view, n.label, isRoot, p.x, p.y, r, 1);
-          settledTop = Math.min(settledTop, rest.top);
-          settledBottom = Math.max(settledBottom, rest.bottom);
-
-          for (let i = 0; i <= 400; i++) {
-            const f = helixEntry(p, centre, i / 400);
-            const e = drawnExtent(view, n.label, isRoot, f.x, f.y, r, f.scale);
-            sweptTop = Math.min(sweptTop, e.top);
-            sweptBottom = Math.max(sweptBottom, e.bottom);
-          }
-        }
-      }
-
-      // The assembly rises this far above where it comes to rest — desktop
-      // 27.9 units, mobile 17.6 — and a frame fitted to the rest state would
-      // chop exactly that much off the top of it, live, at ~80% opacity.
-      expect(settledTop - sweptTop, 'sweep above the settled top').toBeGreaterThan(12);
-      // Nothing ever swings below the course code: the frame's floor is the
-      // settled floor, and the sweep must not need more than that.
-      expect(sweptBottom - settledBottom, 'sweep below the settled bottom').toBeGreaterThanOrEqual(
-        0,
-      );
-      // …and the fitted frame is sized for the sweep, not for the rest state.
-      expect(view.fit.h).toBeGreaterThanOrEqual(sweptBottom - sweptTop);
-      expect(view.fit.h).toBeGreaterThan(settledBottom - settledTop);
-
-      // The bug, stated as the bug: fit the frame to the settled positions the
-      // way the demo originally did, and the assembly leaves it.
-      const settledFit = {
-        top: Math.floor(settledTop - view.fitPad),
-        bottom: Math.ceil(settledBottom + view.fitPad),
-      };
-      expect(
-        settledFit.top - sweptTop,
-        'how far the assembly escapes a settled-fitted frame',
-      ).toBeGreaterThan(10);
-    });
-  }
-
-  /**
-   * CRITERION 4/5 — the settled drawing has to be a SANE SHAPE, sitting in the
-   * middle of the frame it is given.
-   *
-   * TWO BARS MOVED WITH THE UPWARD FAN, both downward; the tightened entry
-   * sweep has now put one of them back, well above where it started.
-   *
-   * The ASPECT WINDOW goes 0.55–1.10 → 0.40–0.80. A canopy is legitimately
-   * wider than tall: three shoots leaving one base 45° apart, two of them
-   * carrying a second segment, make an object about twice as wide as it is
-   * high. Measured 0.562 / 0.515 / 0.535 desktop, 0.575 / 0.502 / 0.533 phone —
-   * comfortably inside. The new CEILING is the load-bearing half: it is what
-   * fails the "grow it straight up into a tall skinny chain" family, which is
-   * the way an upward layout goes wrong.
-   *
-   * The FRAME-HEIGHT SHARE went 0.55 → 0.50 with the fan, and is now **0.75**,
-   * which is the whole point of tightening the entry sweep. It measures how much
-   * of the frame the drawing actually occupies vertically, i.e. it is the dead
-   * band stated as a ratio, and it is the bar that would have caught the band in
-   * the first place had it been set honestly. Under the 1.5-turn sweep the frame
-   * was fitted to what is very nearly a DISC, so it came out very nearly square
-   * around a drawing twice as wide as it is tall: 0.532 desktop, 0.569 phone —
-   * ~149 CSS px of empty paper above and below. At a quarter turn the swept
-   * union hugs the drawing and the same measurement is **0.851 desktop, 0.903
-   * phone**. The floor is set at 0.75 rather than at the measurement, so the
-   * type scale still has somewhere to move, but it is now high enough that
-   * putting the 540° sweep back fails this test rather than merely making the
-   * section 224px taller in silence.
-   *
-   * What is asserted, then: the aspect stays inside a stated window, the drawing
-   * fills a real share of the frame on EACH axis, and it is CENTRED, so whatever
-   * whitespace the sweep does cost is spent symmetrically instead of shoved to
-   * one side. The left-to-right seating family — which grows upward and keeps
-   * children with their parents, but puts a two-step arm on the vertical and the
-   * leaf beside it — measures 13% off-centre and fails this.
-   *
-   * The VERTICAL off-centre number moved 2.1% → 4.2% (desktop; 1.8% → 3.9%
-   * phone) and the 5% bar did not, which is the constraint that picked the
-   * quarter turn over a third of one. The sweep's headroom is one-sided — the
-   * fan's tips lift past the settled top when they rotate through the vertical,
-   * while nothing swings below the course code — so every degree of rotation
-   * buys frame at the top only and slides the drawing down inside it. At 0.3
-   * turns this reads 5.4% and fails.
-   */
-  describe('the settled graph is a sane shape, centred in its frame', () => {
-    for (const view of GRAPH_VIEWS) {
-      for (const graph of COURSE_GRAPHS) {
-        it(`${graph.id} at maxRadius ${view.maxRadius}`, () => {
-          const points = radialLayout(graph, view.w, view.h, view.maxRadius);
-          let l = Infinity;
-          let r = -Infinity;
-          let t = Infinity;
-          let b = -Infinity;
-          for (const n of graph.nodes) {
-            const p = points.get(n.id)!;
-            const isRoot = n.id === graph.rootId;
-            const e = drawnExtent(
-              view,
-              n.label,
-              isRoot,
-              p.x,
-              p.y,
-              isRoot ? view.rootR : view.nodeR,
-              1,
-            );
-            l = Math.min(l, e.left);
-            r = Math.max(r, e.right);
-            t = Math.min(t, e.top);
-            b = Math.max(b, e.bottom);
-          }
-          const aspect = (b - t) / (r - l);
-          expect(aspect, 'settled aspect').toBeGreaterThanOrEqual(0.4);
-          expect(aspect, 'settled aspect').toBeLessThanOrEqual(0.8);
-          // Measured: 0.841–0.964 wide, 0.851–0.903 tall.
-          expect((r - l) / view.fit.w, 'share of the frame width').toBeGreaterThan(0.75);
-          expect((b - t) / view.fit.h, 'share of the frame height').toBeGreaterThan(0.75);
-          // Centred: measured ≤ 3.9% of the width, ≤ 4.2% of the height.
-          expect(
-            Math.abs((l + r) / 2 - (view.fit.x + view.fit.w / 2)) / view.fit.w,
-            'horizontal off-centre',
-          ).toBeLessThan(0.05);
-          expect(
-            Math.abs((t + b) / 2 - (view.fit.y + view.fit.h / 2)) / view.fit.h,
-            'vertical off-centre',
-          ).toBeLessThan(0.05);
-        });
-      }
-    }
-  });
-});
-
-/**
- * #344 visual 3 — the fit is computed ONCE across all three fixtures, not per
- * graph. The `<svg>` is `h-auto`, so a per-graph box would change the section's
- * height every time a visitor clicked a course chip.
- */
-describe('fitViewBox — one stable frame for every course', () => {
-  for (const view of GRAPH_VIEWS) {
-    it(`${viewBoxAttr(view.fit)} contains every single-course fit`, () => {
-      for (const graph of COURSE_GRAPHS) {
-        const solo = fitViewBox([graph], view);
-        expect(solo.x, graph.id).toBeGreaterThanOrEqual(view.fit.x);
-        expect(solo.y, graph.id).toBeGreaterThanOrEqual(view.fit.y);
-        expect(solo.x + solo.w, graph.id).toBeLessThanOrEqual(view.fit.x + view.fit.w);
-        expect(solo.y + solo.h, graph.id).toBeLessThanOrEqual(view.fit.y + view.fit.h);
-      }
-    });
-  }
-
-  it('is measured off the content, not the layout box', () => {
-    // The shipped bug: `viewBox="0 0 900 560"` around content 578 units wide.
-    expect(DESKTOP_VIEW.fit.w).toBeLessThan(DESKTOP_VIEW.w);
-    expect(DESKTOP_VIEW.fit.h).toBeLessThan(DESKTOP_VIEW.h);
-    expect(viewBoxAttr(DESKTOP_VIEW.fit)).toBe('161 114 582 334');
-    expect(viewBoxAttr(MOBILE_VIEW.fit)).toBe('-32 40 429 230');
-  });
-});
-
-/**
- * #344 visual 4 — labels must not land on top of each other, on another node's
- * dot, or on an edge they have nothing to do with.
- *
- * A node's OWN edges are excluded: they radiate from the dot the label belongs
- * to, so a short crossing is unavoidable and is exactly what the halo is for.
- * Everything else is a real collision, and the phone breakpoint was losing this
- * before the retune — "Distributions" and "Hypothesis Tests" overlapped by ~21
- * CSS px of solid text at 390px.
- *
- * Deliberately measured against the dot's bounding SQUARE, i.e. pessimistically:
- * clearing the square clears the circle.
- */
-describe('settled frame — no foreign label collisions', () => {
-  type Box = { l: number; r: number; t: number; b: number };
-  /** Signed separation: negative means the boxes overlap. */
-  const gap = (a: Box, z: Box) =>
-    Math.max(z.l - a.r, a.l - z.r, z.t - a.b, a.t - z.b);
-
-  /** The label alone — `drawnExtent` unions in the dot, which is not wanted here. */
-  function labelBox(
-    view: (typeof GRAPH_VIEWS)[number],
-    label: string,
-    isRoot: boolean,
-    p: { x: number; y: number },
-    r: number,
-  ): Box {
-    const half = (label.length * MONO_ADVANCE_EM * view.font) / 2 + view.labelHalo / 2;
-    const baseline = labelBaselineY(view, isRoot, p.y, r);
-    return {
-      l: p.x - half,
-      r: p.x + half,
-      t: baseline - view.font * 0.73 - view.labelHalo / 2,
-      b: baseline + view.font * 0.25 + view.labelHalo / 2,
-    };
-  }
-
-  for (const view of GRAPH_VIEWS) {
-    for (const graph of COURSE_GRAPHS) {
-      it(`${graph.id} at maxRadius ${view.maxRadius} keeps every label clear`, () => {
-        const pts = radialLayout(graph, view.w, view.h, view.maxRadius);
-        const radius = (id: string) => (id === graph.rootId ? view.rootR : view.nodeR);
-        const boxes = new Map(
-          graph.nodes.map((n) => [
-            n.id,
-            labelBox(view, n.label, n.id === graph.rootId, pts.get(n.id)!, radius(n.id)),
-          ]),
-        );
-
-        for (const a of graph.nodes) {
-          for (const b of graph.nodes) {
-            if (a.id === b.id) continue;
-            // label ↔ label
-            expect(
-              gap(boxes.get(a.id)!, boxes.get(b.id)!),
-              `${a.id} label vs ${b.id} label`,
-            ).toBeGreaterThan(0);
-            // label ↔ someone else's dot
-            const p = pts.get(b.id)!;
-            const r = radius(b.id);
-            expect(
-              gap(boxes.get(a.id)!, { l: p.x - r, r: p.x + r, t: p.y - r, b: p.y + r }),
-              `${a.id} label vs ${b.id} dot`,
-            ).toBeGreaterThan(0);
-          }
-
-          // label ↔ an edge it is not an endpoint of
-          for (const e of graph.edges) {
-            if (e.source === a.id || e.target === a.id) continue;
-            const p1 = pts.get(e.source)!;
-            const p2 = pts.get(e.target)!;
-            const box = boxes.get(a.id)!;
-            let closest = Infinity;
-            for (let i = 0; i <= 400; i++) {
-              const t = i / 400;
-              const x = p1.x + (p2.x - p1.x) * t;
-              const y = p1.y + (p2.y - p1.y) * t;
-              closest = Math.min(closest, Math.max(box.l - x, x - box.r, box.t - y, y - box.b));
-            }
-            expect(closest, `${a.id} label vs edge ${e.source}->${e.target}`).toBeGreaterThan(0);
-          }
-        }
-      });
-    }
-  }
-});
-
-/**
- * #344 review #3 — the demo was one 900×560 viewBox at every width, which at a
- * 390px phone viewport is a uniform 0.38 scale: 4.6 CSS px labels and 10.6 CSS
- * px dots. These pin the sizes the mobile view actually resolves to, in the
- * units a visitor sees — and they are the unit-test twin of the Playwright gate
- * in `e2e/landing-graph.spec.ts` (≥11px labels, ≥20px dots, >170px tall).
- */
-describe('GraphView sizing at a 390px viewport', () => {
-  /**
-   * 390px viewport − `px-6` (24px each side) − the 10px scrollbar globals.css
-   * paints (`*::-webkit-scrollbar { width: 10px }`) = the section's content
-   * box. Deliberately the pessimistic number: the E2E measures the real
-   * `getBoundingClientRect().width`, so modelling it 10px narrower keeps this
-   * test the stricter of the two.
-   */
-  const CONTENT_PX = 390 - 48 - 10;
-
-  it('renders legible labels and dots on a phone', () => {
-    const scale = CONTENT_PX / MOBILE_VIEW.fit.w;
-    expect(scale).toBeCloseTo(0.7739, 4);
-    // 12.38 CSS px labels, 23.22 CSS px dot diameter, 178.0 CSS px of frame.
-    // The phone geometry is still bracketed from BELOW by a label collision
-    // (which wants a bigger ring) and from ABOVE by the type gate (which wants a
-    // smaller frame), and tightening the entry sweep moved both the right way at
-    // once: the frame narrowed 443 → 429 units, so every unit renders bigger.
-    // Margins are now +1.38px and +3.22px, against +0.99px and +2.48px under the
-    // 1.5-turn sweep and +0.23px / +0.85px under the downward tree.
-    expect(MOBILE_VIEW.font * scale).toBeGreaterThanOrEqual(11);
-    expect(2 * MOBILE_VIEW.nodeR * scale).toBeGreaterThanOrEqual(20);
-    // THE THIRD BAR CHANGED WHAT IT MEASURES, and it is worth being explicit.
-    // It used to be `fit.h * scale >= 260` — the FRAME's rendered height — and
-    // it was written to fail the "213px smudge" the hardcoded 900×560 viewBox
-    // rendered at this viewport. That reading only worked while the frame was
-    // mostly empty paper: fitting to a 1.5-turn sweep reserved 64 and 54 CSS px
-    // of band above and below a 156px-tall drawing, and the bar was passing on
-    // the band. The quarter turn spends 16 and 2 instead, so the frame is 178px
-    // and the DRAWING inside it is 160.7 — bigger than it was, in a box 95px
-    // shorter. So: assert the drawing, which is what "not a smudge" meant, and
-    // keep a floor on the frame that a genuinely tiny graph still fails.
-    expect(MOBILE_VIEW.fit.h * scale, 'rendered frame height').toBeGreaterThanOrEqual(170);
-    expect(settledHeight(MOBILE_VIEW) * scale, 'rendered drawing height').toBeGreaterThanOrEqual(
-      150,
-    );
-  });
-
-  it('documents why the desktop view is still not a phone view', () => {
-    // Not an aspiration — the reason `useIsMobile` swaps views at all, kept
-    // here so a future "just use one viewBox everywhere" change has to argue
-    // with it. The fit shrank the desktop box from 900 to 582 units, which
-    // lifts a phone-rendered desktop label from 4.6 to 8.0 CSS px — still
-    // nowhere near the 11px floor above.
-    const scale = CONTENT_PX / DESKTOP_VIEW.fit.w;
-    expect(DESKTOP_VIEW.font * scale).toBeLessThan(11);
-    expect(2 * DESKTOP_VIEW.nodeR * scale).toBeLessThan(20);
-  });
-});
diff --git a/frontend/src/components/marketing/graph/layout.ts b/frontend/src/components/marketing/graph/layout.ts
deleted file mode 100644
index b8dd4878..00000000
--- a/frontend/src/components/marketing/graph/layout.ts
+++ /dev/null
@@ -1,719 +0,0 @@
-/**
- * Layout + entry-path math for the landing graph demo (#344).
- *
- * Deterministic by construction — no randomness, no time input. The E2E lane
- * parks the animation and asserts against the laid-out frame, so the same graph
- * and viewport must always produce the same coordinates.
- */
-import { COURSE_GRAPHS, type CourseGraph } from './courseGraphs';
-
-export interface Point {
-  x: number;
-  y: number;
-}
-
-/** An SVG `viewBox`, in user units. */
-export interface ViewBox {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
-
-/**
- * Labels render in JetBrains Mono, whose advance width is 600/1000 em, and the
- * face's cap height / descender depth are ~0.73 / ~0.25 em. These are font
- * facts, shared by the viewBox fit below and by `layout.test.ts`'s independent
- * bounds sweep, so the two can't drift apart on a rounding tweak.
- */
-export const MONO_ADVANCE_EM = 0.6;
-export const LABEL_CAP_EM = 0.73;
-export const LABEL_DESCENDER_EM = 0.25;
-
-/**
- * Everything the demo needs to draw itself at one viewport class, in SVG user
- * units. The `<svg>` is `width: 100%` up to a max-width, so the rendered CSS
- * size of *every* dimension below is `value * (renderedWidth / fit.w)`.
- *
- * `w` / `h` are the LAYOUT box: they exist only to place the centre that
- * `radialLayout` orbits (`w / 2`, `h / 2`) and to keep the desktop geometry
- * byte-identical to what this branch was designed against. They are NOT what
- * gets rendered — see `fit` below.
- *
- * The two views are picked apart by `useIsMobile()` in the component. Keeping
- * them as data (rather than a pile of ternaries at each call site) is what lets
- * `layout.test.ts` sweep the entry animation against *both* views and prove
- * nothing leaves frame.
- */
-export interface GraphGeometry {
-  /** Layout-box width, user units. Sets the orbit centre, not the frame. */
-  w: number;
-  /** Layout-box height, user units. Sets the orbit centre, not the frame. */
-  h: number;
-  /** Radius of the outermost ring — the layout's whole spatial budget. */
-  maxRadius: number;
-  /** Label font-size, user units. */
-  font: number;
-  /** Root-node circle radius, user units. */
-  rootR: number;
-  /** Non-root node circle radius, user units. */
-  nodeR: number;
-  /** Gap between a node's circle edge and its label baseline, either way up. */
-  labelGap: number;
-  /**
-   * Whether the root's label sits ABOVE its circle instead of below it
-   * (#344 visual 4). Per view, because it is a geometry question, not a taste
-   * one — see `labelBaselineY`.
-   */
-  rootLabelAbove: boolean;
-  /** Width of the paper-coloured halo stroked under label text. */
-  labelHalo: number;
-  /** Edge stroke width, user units. */
-  edgeW: number;
-  /** Breathing room added on every side of the fitted content box. */
-  fitPad: number;
-}
-
-/** A geometry plus the viewBox derived from it. This is what the demo renders. */
-export interface GraphView extends GraphGeometry {
-  /**
-   * The rendered `viewBox`, fitted to the actual drawn content across every
-   * fixture (#344 visual 3). Derived, never hand-written — see `fitViewBox`.
-   */
-  fit: ViewBox;
-}
-
-function clamp01(t: number): number {
-  return t < 0 ? 0 : t > 1 ? 1 : t;
-}
-
-export function easeOutCubic(t: number): number {
-  const c = clamp01(t);
-  return 1 - Math.pow(1 - c, 3);
-}
-
-/**
- * The BFS spanning tree of the UNDIRECTED graph, rooted at `graph.rootId`.
- *
- * `DemoNode.children` is deliberately NOT consulted: it is dead data that
- * disagrees with `edges` (nothing reads it but the fixtures' own prose), and
- * trusting it would put a node's position and its drawn edges on two different
- * sources of truth. Every edge is undirected here because the demo draws them
- * undirected.
- *
- * The tree governs POSITION only. `AssemblingGraph` still draws every entry in
- * `graph.edges`, cross-edges included — `cs-sorting → cs-complexity` runs from
- * the canopy's left tip back down to the middle shoot, closing a triangle, and
- * is a big part of why the picture reads as a graph rather than a sprig.
- */
-function spanningTree(graph: CourseGraph): {
-  depth: Map<string, number>;
-  parent: Map<string, string>;
-} {
-  const adj = new Map<string, string[]>();
-  for (const e of graph.edges) {
-    adj.set(e.source, [...(adj.get(e.source) ?? []), e.target]);
-    adj.set(e.target, [...(adj.get(e.target) ?? []), e.source]);
-  }
-
-  const depth = new Map<string, number>([[graph.rootId, 0]]);
-  const parent = new Map<string, string>();
-  const queue = [graph.rootId];
-  while (queue.length) {
-    const cur = queue.shift()!;
-    for (const nxt of adj.get(cur) ?? []) {
-      if (!depth.has(nxt)) {
-        depth.set(nxt, depth.get(cur)! + 1);
-        parent.set(nxt, cur);
-        queue.push(nxt);
-      }
-    }
-  }
-  return { depth, parent };
-}
-
-/**
- * Number of nodes in each node's subtree of the spanning tree, itself included.
- *
- * Only used to decide WHICH depth-1 seat a child gets (see `fanSeats`). Walking
- * the depths from the outside in means a node's children are always counted
- * before the node is added to its own parent, so one pass is enough.
- */
-function subtreeSizes(
-  graph: CourseGraph,
-  depth: Map<string, number>,
-  parent: Map<string, string>,
-): Map<string, number> {
-  const size = new Map(graph.nodes.map((n) => [n.id, 1]));
-  const deepestFirst = [...graph.nodes]
-    .map((n) => n.id)
-    .sort((a, b) => (depth.get(b) ?? 0) - (depth.get(a) ?? 0));
-  for (const id of deepestFirst) {
-    const p = parent.get(id);
-    if (p) size.set(p, (size.get(p) ?? 1) + (size.get(id) ?? 1));
-  }
-  return size;
-}
-
-/**
- * The seat angles of the depth-1 fan, left to right, as angles from 3 o'clock.
- * SVG angles run clockwise (y grows downward), so −π is 9 o'clock, −π/2 is 12
- * and 0 is 3 — i.e. the open interval (−π, 0) is the UPWARD half-plane.
- *
- * `count` children take the `count` interior gridlines of a (count + 1)-way
- * split of that half-plane: `−π + (seat + 1) · π/(count + 1)`. For three
- * children that is 45° / 90° / 135°, a canopy; for one it is straight up.
- *
- * WHY THE INTERIOR GRIDLINES and not slice centres (`(seat + ½) · π/count`,
- * which would spread the same three children over 30° / 90° / 150°). Two
- * reasons, both measured across all three fixtures × both views:
- *
- * - the horizon. Slice centres put the outermost child `π/(2·count)` off the
- *   horizontal, which for a wide fan is a nearly flat arm whose second segment
- *   runs level with the root; the gridlines put it `π/(count + 1)` off, which
- *   is strictly further from the horizon for every `count > 1` and is why the
- *   no-horizontal invariant below holds with room to spare (measured |sin| =
- *   0.707 against a 0.5 floor).
- * - shape. At 30° the settled drawing is 0.35 tall for every unit wide — a flat
- *   candelabra. At 45° it is 0.51–0.56, which is the canopy the section's
- *   "watch it grow" headline is describing.
- *
- * THE INVARIANT THIS KEEPS. No child ever lands on the horizontal axis through
- * the root: the seat angles are `−π + k·π/(count+1)` for `k` in `1…count`, so
- * `|sin θ| = sin(k·π/(count+1))`, which is zero only at `k = 0` or `k =
- * count+1` — both outside the range. The previous wave proved the same property
- * for a full-circle ring phased by an odd multiple of `π/(2·count)`; this is
- * the half-plane version of it, and it is strictly stronger (the closest
- * approach is `sin(π/(count+1))`, never worse than the old `sin(π/(2·count))`).
- */
-function fanAngle(seat: number, count: number): number {
-  return -Math.PI + ((seat + 1) * Math.PI) / (count + 1);
-}
-
-/**
- * The order the depth-1 seats are handed out in: OUTSIDE-IN — leftmost,
- * rightmost, next-leftmost, next-rightmost, … — with the biggest subtrees
- * going first (see the caller).
- *
- * The outer seats have open sky beyond them; the inner seats are hemmed in by a
- * sibling on each side, so the branches that carry the most nodes get the room.
- * With the shipped fixtures (two children carrying a grandchild, one leaf) that
- * seats the two deep arms symmetrically about the vertical and leaves the leaf
- * as a short central shoot — the sprout silhouette.
- *
- * The alternative — handing seats out left to right — was measured and
- * rejected: it puts one two-step arm on the vertical axis and the one-step leaf
- * beside it, so the drawing leans (its base lands 13% of the frame width off
- * the centre, against 2% here) and cs210's `cs-sorting → cs-complexity`
- * cross-edge runs straight through the middle node's label (−7.3 units at the
- * desktop type scale; on the phone no combination of radius, type scale, dot
- * size and label gap clears it while the labels still render at 11 CSS px).
- */
-function fanSeats(count: number): number[] {
-  const seats: number[] = [];
-  let lo = 0;
-  let hi = count - 1;
-  while (lo <= hi) {
-    seats.push(lo);
-    if (lo !== hi) seats.push(hi);
-    lo += 1;
-    hi -= 1;
-  }
-  return seats;
-}
-
-/**
- * A SAPLING. The root sits at the bottom-centre of the drawing; depth-1 fans
- * upward across the half-plane above it at radius `ring`; every deeper node is
- * placed at radius `ring` from ITS OWN PARENT, inside a wedge centred on the
- * direction that parent itself grew in. Siblings share (and subdivide) the
- * wedge. Because every depth-1 heading points upward, so does everything below
- * it: the whole structure fans up.
- *
- * WHAT THIS WAVE CHANGED, and nothing else: the ANGULAR DOMAIN. The BFS
- * spanning tree and the parent-relative placement are exactly as the previous
- * wave left them, and every edge in `graph.edges` is still drawn, cross-edges
- * included. What moved is that depth-1 used to be spread around the FULL circle
- * with the root at the frame's centre, so the tree grew one arm up and two
- * down — an inverted Y, or a root system. The product is called Sapling and the
- * section headline is "Pick a course. Watch it grow."; a drawing that grows
- * downward is the wrong picture, and no amount of ring phasing fixes a full
- * circle.
- *
- * WHY THE ROOT IS NOT AT `(width/2, height/2)` ANY MORE. That point is the
- * centre `helixEntry` spirals around and the point `fitViewBox` fits its frame
- * about — the sweep is very nearly a disc centred there. Leaving the root on it
- * while growing upward would put the whole drawing in the disc's top half and
- * reserve the bottom half for nothing: measured, the settled box lands 15.7% of
- * the frame height off centre and fills 0.41 of it (against 0.53 here), and the
- * `<svg>` grows to 676px. So the skeleton is laid out with the root at the
- * origin and then translated as a rigid body until ITS OWN bounding box is
- * centred on `(width/2, height/2)`. The root ends up at the bottom-centre of
- * the content, the sweep stays centred on the drawing, and the frame comes out
- * centred on it too (measured ≤ 3.2% off on either axis, every fixture, both
- * views).
- *
- * `maxRadius` is the spatial budget: `ring = maxRadius / maxDepth`, so a chain
- * of `maxDepth` collinear steps spans exactly it. A node whose siblings push it
- * off its parent's outward direction sits INSIDE that radius, so `maxRadius` is
- * an upper bound rather than an exact outer ring. Its default is unchanged
- * (`min(w, h)/2 − 48`) so every existing caller keeps working, but both shipped
- * views pass it explicitly — the binding constraints are the fitted frame, the
- * label clearances and the phone's legibility floor, none of which
- * `min(w, h)/2 − pad` can express.
- *
- * Deterministic by construction: no randomness, no clock, no DOM read.
- */
-export function radialLayout(
-  graph: CourseGraph,
-  width: number,
-  height: number,
-  maxRadius: number = Math.min(width, height) / 2 - 48,
-): Map<string, Point> {
-  const { depth, parent } = spanningTree(graph);
-
-  const byDepth = new Map<number, string[]>();
-  // Iterate graph.nodes (declaration order), not the Map, so sibling ordering
-  // is stable regardless of BFS visit order.
-  for (const n of graph.nodes) {
-    const d = depth.get(n.id) ?? 0;
-    byDepth.set(d, [...(byDepth.get(d) ?? []), n.id]);
-  }
-
-  const maxDepth = Math.max(...byDepth.keys(), 1);
-  const ring = maxRadius / maxDepth;
-
-  /** Laid out with the root at the origin; translated to the frame at the end. */
-  const out = new Map<string, Point>();
-  /** The direction this node GREW in — the axis its own wedge is built on. */
-  const heading = new Map<string, number>();
-  /** Angular span this node's subtree owns, subdivided among its children. */
-  const wedge = new Map<string, number>();
-
-  for (const d of [...byDepth.keys()].sort((a, b) => a - b)) {
-    const ids = byDepth.get(d)!;
-
-    // Depth 0 is the root — plus, defensively, anything the BFS never reached.
-    if (d === 0) {
-      for (const id of ids) out.set(id, { x: 0, y: 0 });
-      continue;
-    }
-
-    if (d === 1) {
-      const gap = Math.PI / (ids.length + 1);
-      const seats = fanSeats(ids.length);
-      const size = subtreeSizes(graph, depth, parent);
-      // Biggest subtree first, ties in declaration order (Array#sort is stable),
-      // so the deep arms take the outer seats.
-      const seated = [...ids].sort((a, b) => (size.get(b) ?? 1) - (size.get(a) ?? 1));
-      seated.forEach((id, i) => {
-        const a = fanAngle(seats[i], ids.length);
-        out.set(id, { x: Math.cos(a) * ring, y: Math.sin(a) * ring });
-        heading.set(id, a);
-        wedge.set(id, gap);
-      });
-      continue;
-    }
-
-    const siblings = new Map<string, string[]>();
-    for (const id of ids) {
-      const p = parent.get(id)!;
-      siblings.set(p, [...(siblings.get(p) ?? []), id]);
-    }
-    for (const [p, kids] of siblings) {
-      const anchor = out.get(p)!;
-      // The parent's own outward direction. The fallback is the bearing from
-      // the root, which is where the root sits while this loop runs.
-      const base = heading.get(p) ?? Math.atan2(anchor.y, anchor.x);
-      const span = wedge.get(p) ?? Math.PI;
-      const slice = span / kids.length;
-      kids.forEach((id, i) => {
-        // Centre of this child's slice — a lone child therefore lands exactly
-        // on the parent's outward direction, i.e. collinear with it.
-        const a = base - span / 2 + (i + 0.5) * slice;
-        const q = { x: anchor.x + Math.cos(a) * ring, y: anchor.y + Math.sin(a) * ring };
-        out.set(id, q);
-        heading.set(id, a);
-        wedge.set(id, slice);
-      });
-    }
-  }
-
-  // Rigid translation: centre the skeleton's own bounding box on the layout
-  // box's centre, which is the point the entry sweep spirals around. See the
-  // doc comment above for why this is not "put the root at the centre".
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const p of out.values()) {
-    minX = Math.min(minX, p.x);
-    minY = Math.min(minY, p.y);
-    maxX = Math.max(maxX, p.x);
-    maxY = Math.max(maxY, p.y);
-  }
-  const dx = width / 2 - (minX + maxX) / 2;
-  const dy = height / 2 - (minY + maxY) / 2;
-
-  const placed = new Map<string, Point>();
-  for (const [id, p] of out) placed.set(id, { x: p.x + dx, y: p.y + dy });
-  return placed;
-}
-
-/**
- * How far *inside* its target radius a node starts. The offset from the centre
- * is scaled by `1 - (1 - e) * ENTRY_CONTRACTION`, i.e. 0× at t=0 rising to
- * exactly 1× at t=1.
- *
- * This used to be a *stretch* (`1 + (1 - e) * 0.9`, so 1.9× at t=0), which is
- * the #344-review-#4 bug: swept against the real desktop layout (centre 450,280;
- * outer ring at radius 232) the outer nodes reached y = 693 — 133px below the
- * 560 viewBox edge — and crossed back in at opacity ≈ 0.5, so the visitor
- * watched them get chopped off by the `<svg>` viewport mid-assembly. Because
- * the spiral now only ever *contracts*, every point of the sweep lies inside
- * the disc of radius |target − centre|. `layout.test.ts` pins that as an
- * explicit bounds sweep over every fixture × every view.
- *
- * IT IS NOW EXACTLY 1, i.e. a node starts ON the centre rather than 55% of the
- * way out to its seat, and that is the second half of the frame-tightening this
- * wave is about (see `ENTRY_TURNS`). At 1 the radial term collapses to
- * `radiusScale = e`, which is precisely the straight-line entry's own easing —
- * so the path becomes "the straight line from the centre to the seat, ROTATED
- * by a decaying angle", and the whole of the mid-flight deviation measured in
- * `layout.test.ts` is the helix rather than a radius mismatch. It also buys
- * frame: the widest swing happens where the node is nearest the centre, so
- * pulling the start in shrinks how far the sweep bulges past the settled
- * drawing — at the same quarter turn, 0.45 overhangs the settled top by 68.6
- * units and 1 by 27.9, which is 41 units of section height (50 CSS px) and the
- * difference between the drawing sitting 9.1% and 4.2% off the frame's centre.
- *
- * It reads better too: nodes now grow outward from the middle of the canopy
- * rather than flying in from off-frame, and at t=0 they are at 0.35 scale and
- * zero opacity, so the pile-up at the centre is never actually drawn.
- */
-const ENTRY_CONTRACTION = 1;
-
-/**
- * How far a node is rotated around the centre on the way in — the HELIX, and
- * the thing that sets how much dead vertical band the section carries.
- *
- * IT WAS 1.5 (540°). `fitViewBox` fits the frame to the SWEEP rather than to
- * the settled positions (it has to — see there), and a node that turns a turn
- * and a half passes through EVERY direction at between 0.55 and 1.00 of its
- * final radius. The union of those sweeps is very nearly a DISC, so the fitted
- * frame came out very nearly SQUARE while the settled drawing is an upward fan
- * about twice as wide as it is tall. The difference was dead space, ~149 CSS px
- * of it above and below the drawing at the 720px cap, for ANY layout at all:
- * the previous wave measured the whole family and reported it as its closing
- * concern.
- *
- * A QUARTER TURN. 90° of rotation with the radial ramp still reads as a swoop
- * with depth — the node arrives on a curve, not on a line — while the swept
- * union hugs the drawing: the frame goes 603 × 534 → 582 × 334 units and the
- * band per side goes 162/136 → 48/13 CSS px. 540° at the 1.1s the component
- * spends on the assembly is ~490°/s, which is a blur nobody can follow; the
- * quarter turn is the same idea at a speed the eye can read.
- *
- * WHY NOT LESS, AND WHY NOT MORE. Less: at 0.15 turns the mid-flight deviation
- * from the straight-line path falls to 13 units (10% of the travel radius) and
- * the entry starts reading as a plain zoom. More: the sweep's bulge past the
- * settled drawing is one-sided — the fan's tips are far from the centre and
- * only 27° above the horizontal, so rotating them TOWARD the vertical gains
- * height, while nothing in the drawing can swing below the root's caption —
- * and past ~0.3 turns that lopsided headroom pushes the drawing off the frame's
- * vertical centre by more than the 5% `layout.test.ts` allows. 0.25 sits inside
- * both bars with room (4.2% off-centre, 48px of band).
- */
-const ENTRY_TURNS = 0.25;
-
-/**
- * Position along the helical entry path. `t` runs 0 → 1.
- *
- * The node spirals outward from the centre: its offset from the centre is
- * rotated by a decreasing angle and scaled by a growing factor, while scale and
- * opacity rise. At t=1 every term collapses and the node sits exactly on
- * `target`, so the animation has no seam where it hands off to the static
- * layout.
- */
-export function helixEntry(
-  target: Point,
-  centre: Point,
-  t: number,
-  turns = ENTRY_TURNS,
-): { x: number; y: number; scale: number; opacity: number } {
-  const e = easeOutCubic(t);
-  const dx = target.x - centre.x;
-  const dy = target.y - centre.y;
-
-  const angle = (1 - e) * turns * Math.PI * 2;
-  const radiusScale = 1 - (1 - e) * ENTRY_CONTRACTION;
-  const cos = Math.cos(angle);
-  const sin = Math.sin(angle);
-
-  return {
-    x: centre.x + (dx * cos - dy * sin) * radiusScale,
-    y: centre.y + (dx * sin + dy * cos) * radiusScale,
-    scale: 0.35 + 0.65 * e,
-    opacity: e,
-  };
-}
-
-/** Half the drawn width of a label, halo included. Labels are `middle`-anchored. */
-export function labelHalfWidth(label: string, geom: GraphGeometry): number {
-  return (label.length * MONO_ADVANCE_EM * geom.font) / 2 + geom.labelHalo / 2;
-}
-
-/**
- * Where a node's label baseline sits, relative to the node's drawn centre.
- *
- * BOTH shipped views now put the root's label BELOW its circle, and that is a
- * consequence of the root moving to the base of the drawing. "Above" used to be
- * the open half — it was the direction with no graph in it. Under the upward
- * fan it is the direction the whole plant grows in: the course code lands on
- * the stem running from the root up to its middle child, where the halo has to
- * cut the edge in two to stay legible, and it eats 20 units off the settled
- * box's height (aspect 0.562 → 0.53, and the frame does not shrink with it, so
- * the dead band grows). Below the root there is nothing but the frame edge, and
- * the code reads as a caption at the ground line. Measured, below clears its
- * nearest neighbour by 30.14 units on desktop and 5.40 on the phone; above
- * clears by 9.83 and 2.71.
- *
- * `rootLabelAbove` is kept — it is part of `GraphGeometry`'s shape, it is what
- * makes the choice a per-view geometry question rather than a hard-coded taste
- * one, and `layout.test.ts` still exercises both branches — but no shipped view
- * sets it today.
- *
- * Shared with `fitViewBox` and `layout.test.ts` so the frame can never be
- * fitted to a label position the component doesn't actually use.
- */
-export function labelBaselineY(
-  geom: GraphGeometry,
-  isRoot: boolean,
-  y: number,
-  r: number,
-): number {
-  return isRoot && geom.rootLabelAbove ? y - r - geom.labelGap : y + r + geom.labelGap;
-}
-
-/** Vertical extent of the drawn label text, halo included. */
-function labelVerticalExtent(
-  geom: GraphGeometry,
-  isRoot: boolean,
-  y: number,
-  r: number,
-): { top: number; bottom: number } {
-  const baseline = labelBaselineY(geom, isRoot, y, r);
-  return {
-    top: baseline - geom.font * LABEL_CAP_EM - geom.labelHalo / 2,
-    bottom: baseline + geom.font * LABEL_DESCENDER_EM + geom.labelHalo / 2,
-  };
-}
-
-/**
- * Sampling density of the entry sweep when fitting the frame.
- *
- * Finer than the 400 steps `layout.test.ts` sweeps, so the test can never land
- * between two samples and find a point the fit didn't see. In practice the
- * extremes sit at the sweep's endpoints and at broad interior maxima, so the
- * two agree to ~0.01 units — the `fitPad` swallows the rest with room over.
- */
-const FIT_STEPS = 512;
-
-/**
- * The tightest box that contains everything the demo ever draws — for every
- * fixture, for every frame of the entry animation.
- *
- * #344 visual 3: the demo shipped with a hardcoded `viewBox="0 0 900 560"`
- * stretched across a ~1184px container, so it reserved ~737px of height while
- * the content clustered near the centre and the whole outer band of the box
- * stayed permanently empty. The frame is now measured off the content instead.
- *
- * THE THING TO NOT GET WRONG: fit to the HELIX SWEEP, not to the settled node
- * positions. `helixEntry` rotates every node around the centre on the way in,
- * so a node arrives from a direction that is not its own, and the frame has to
- * hold the arc. That exact bug was found and fixed once already on this branch
- * (#344 review #4), and the fix must survive the sweep getting SHORTER: at the
- * quarter turn this file now ships, the desktop settled drawing spans 284.3
- * units of height while the sweep spans 312.2, so a box fitted to the settled
- * positions would still chop 27.9 units — 34.5 CSS px at the rendered cap — off
- * the top of the assembly, live, at ~80% opacity. The phone number is 17.6
- * units (13.6 px). `layout.test.ts` sweeps `t` across the full range to keep it
- * fixed, and asserts the clipping directly (it builds the settled-fit box and
- * proves the assembly leaves it) so a settled-fit implementation fails outright.
- *
- * The overshoot is ONE-SIDED and that is geometry, not an oversight: the fan's
- * tips sit far from the centre and only ~27° above the horizontal, so rotating
- * them toward the vertical lifts them past the settled top, while the lowest
- * ink in the drawing — the course code under the root — is close to the centre
- * and nothing swings below it. The frame's bottom edge is therefore the settled
- * bottom plus `fitPad`, and the sweep sets the other three sides.
- *
- * Fitted ONCE across all three fixtures rather than per graph: the three share
- * a topology and differ only in label widths, so a per-graph fit would produce
- * three slightly different boxes and — because the `<svg>` is `h-auto` — the
- * section would change height every time a visitor clicked a course chip. A
- * jumping section is a worse defect than a few units of slack on the side where
- * some other course happens to have the longest word.
- *
- * The box is snapped OUTWARD to whole units so the rendered `viewBox` attribute
- * stays readable and rounding can never shave the frame.
- */
-export function fitViewBox(graphs: CourseGraph[], geom: GraphGeometry): ViewBox {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-
-  const centre = { x: geom.w / 2, y: geom.h / 2 };
-
-  for (const graph of graphs) {
-    const points = radialLayout(graph, geom.w, geom.h, geom.maxRadius);
-    for (const n of graph.nodes) {
-      const p = points.get(n.id);
-      if (!p) continue;
-      const isRoot = n.id === graph.rootId;
-      const r = isRoot ? geom.rootR : geom.nodeR;
-      const half = labelHalfWidth(n.label, geom);
-
-      for (let i = 0; i <= FIT_STEPS; i++) {
-        const h = helixEntry(p, centre, i / FIT_STEPS);
-        const dotR = r * h.scale;
-        const label = labelVerticalExtent(geom, isRoot, h.y, r);
-
-        minX = Math.min(minX, h.x - dotR, h.x - half);
-        maxX = Math.max(maxX, h.x + dotR, h.x + half);
-        minY = Math.min(minY, h.y - dotR, label.top);
-        maxY = Math.max(maxY, h.y + dotR, label.bottom);
-      }
-    }
-  }
-
-  const x = Math.floor(minX - geom.fitPad);
-  const y = Math.floor(minY - geom.fitPad);
-  return {
-    x,
-    y,
-    w: Math.ceil(maxX + geom.fitPad) - x,
-    h: Math.ceil(maxY + geom.fitPad) - y,
-  };
-}
-
-/** The `viewBox` attribute string for a fitted box. */
-export function viewBoxAttr(box: ViewBox): string {
-  return `${box.x} ${box.y} ${box.w} ${box.h}`;
-}
-
-function withFit(geom: GraphGeometry): GraphView {
-  return { ...geom, fit: fitViewBox(COURSE_GRAPHS, geom) };
-}
-
-/**
- * Frame `161 114 582 334`, against `161 17 603 534` for the same fan under the
- * 1.5-turn entry sweep, `165 48 541 498` for the downward radial tree,
- * `185 33 526 516` for the ring layout before it, and the `0 0 900 560` the demo
- * shipped with. Nothing about the layout moved between the last two — only the
- * sweep the frame is fitted to (see `ENTRY_TURNS`).
- *
- * The component caps the rendered width (`md:max-w-[720px]`), so at the cap the
- * graph draws at 1.237 user units per CSS px: 17.3px labels, 34.6px concept
- * dots, a 64px root, and a **413.2px-tall `<svg>` — 224px SHORTER** than the
- * 637.6 the 1.5-turn sweep fitted, 250px shorter than the downward tree's 662.8
- * and 324px shorter than the 737px the fixed box reserved. The drawing itself
- * did not shrink; it grew (694 × 352 CSS px against 669 × 339). What left was
- * the dead band: 162/136 CSS px above and below the drawing, now **48/13**.
- *
- * WHY `maxRadius` LEFT 232, i.e. why it is no longer `radialLayout`'s
- * inscribed-circle default. Under the upward fan the drawing wraps its own
- * centre much more tightly than a full-circle spread does, so the same budget
- * produced a 460-unit frame and a 19px type scale. The budget is now solved,
- * not inherited, against three constraints that the layout box cannot express:
- *
- * - the rendered type scale (720 / `fit.w`), which sets label and dot sizes;
- * - the label clearances, which improve as the ring grows against a fixed type
- *   size — 320 buys 30.14 units (36 CSS px) on the worst pair, against the
- *   8.80 units (6.6 px) the downward tree shipped;
- * - the shape assertions, which are scale-free.
- *
- * The composition it buys, measured on cs210: the drawing is 506 × 284 units
- * (626 × 352 CSS px) inside a 582 × 334 frame, centred to within 1.1% of the
- * width and 4.2% of the height. It fills **0.869 of the frame's width** (ma242
- * 0.949, sm275 0.913) and **0.851 of its height**, against 0.839 and 0.532
- * under the 1.5-turn sweep — the height share is where the tightened sweep
- * lands, and it is the number the dead band is the complement of.
- */
-export const DESKTOP_VIEW: GraphView = withFit({
-  w: 900,
-  h: 560,
-  maxRadius: 320,
-  font: 14,
-  rootR: 26,
-  nodeR: 14,
-  labelGap: 13,
-  rootLabelAbove: false,
-  labelHalo: 3,
-  edgeW: 1.4,
-  fitPad: 10,
-});
-
-/**
- * The phone view. Frame `-32 40 429 230`; a ~332px content box (390 viewport −
- * 48 of `px-6` − the 10px scrollbar globals.css paints) renders it at 0.7739,
- * so 16-unit labels land at **12.38 CSS px**, concept dots at a **23.22px**
- * diameter, the DRAWING is **328 × 161 px**, and the `<svg>` is **178.0px**
- * tall — against 11.99 / 22.48 / 317 × 156 / 273.5 under the 1.5-turn sweep.
- *
- * READ THAT LAST PAIR CAREFULLY, because one of them went DOWN. The frame lost
- * 95px of height while the drawing inside it grew: what left was the band of
- * empty paper the circular sweep reserved (64/54 CSS px above and below, now
- * **16/2**). The E2E gate's third bar was written against the frame — it read
- * ">260px tall" as "not the 213px smudge the fixed 900×560 viewBox rendered
- * here" — and a frame measurement can no longer stand in for that, because this
- * frame is nearly all drawing. So the bar moved to 170 and `layout.test.ts`
- * gained the honest one: the SETTLED DRAWING's rendered height, which improves
- * (155.6 → 160.7 px) rather than being traded away.
- *
- * THE CONSTRAINT THAT WAS RAZOR-THIN AND NO LONGER IS. Labels hang below their
- * dots and are `middle`-anchored, so a 13-character label ("Vector Spaces",
- * "Distributions", "Central Limit") reaches 3.9·font units to each side of its
- * node. The downward tree put its two deep arms 120° apart, which forces one of
- * them to within 30° of the horizontal, so a child's dot landed inside its own
- * parent's label unless `0.866·ring > 3.9·font + labelHalo/2 + nodeR`; the
- * shipped geometry met that by **+1.23 units (0.99 CSS px)** and the label gate
- * by +0.23 CSS px, both inside the noise of whether Chromium paints a scrollbar
- * at that viewport.
- *
- * The fan changes the geometry that produces the number. Its two deep arms are
- * 90° apart and symmetric about the vertical, so the worst horizontal step is
- * `ring·sin 45°` on BOTH of them instead of `ring·sin 60°` on one and
- * `ring·sin 30°` on the other, and the crowded pair moves from "a child's dot
- * inside its parent's label" to "the middle shoot's label beside a depth-1
- * dot". Measured worst pair over all three fixtures: **+5.40 units**, unchanged
- * by this wave (the settled layout did not move) and now **4.18 CSS px** rather
- * than 4.05, because the tighter frame renders every unit slightly bigger.
- *
- * The window is still two-sided — the collision wants a bigger ring, the
- * legibility gate wants a smaller frame (`font · 332 / fit.w ≥ 11`) — and the
- * numbers below were picked by sweeping `maxRadius`, `font`, `rootR`, `nodeR`
- * and `labelGap` against BOTH ends plus the shape assertions, maximising the
- * worst normalised margin. Tightening the sweep moved both margins the right
- * way (the label gate clears by 1.38 CSS px now, against 0.99), so none of them
- * needed to move. `fitPad` stays at 2: it is now most of the air under the
- * course code, and the 4 units of descender the fit reserves for a caption that
- * has no descenders sit under that again.
- */
-export const MOBILE_VIEW: GraphView = withFit({
-  w: 360,
-  h: 300,
-  maxRadius: 212,
-  font: 16,
-  rootR: 22,
-  nodeR: 15,
-  labelGap: 15,
-  rootLabelAbove: false,
-  labelHalo: 3.5,
-  edgeW: 1.8,
-  fitPad: 2,
-});
-
-/** Every view the demo can render in — the sweep target for the bounds test. */
-export const GRAPH_VIEWS: GraphView[] = [DESKTOP_VIEW, MOBILE_VIEW];
diff --git a/frontend/src/components/marketing/surfaces/GradebookSurface.tsx b/frontend/src/components/marketing/surfaces/GradebookSurface.tsx
deleted file mode 100644
index 6b3dc105..00000000
--- a/frontend/src/components/marketing/surfaces/GradebookSurface.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Bento tile — the Gradebook (#344 step 2).
- *
- * Recreates the `/gradebook` course page: the course card's big display-font
- * letter grade next to the percentage that `percentColor` tints, then the
- * assignment list — a Spectral title, the `Due MM/DD/YYYY` mono line, the
- * points-earned / points-possible pair, and the category grouping.
- *
- * Colour rules, which shape the markup here more than the layout does:
- *
- *  - The 3.4rem letter grade is display-size, so WCAG treats it as large text
- *    (3:1) and it can carry `--grade-a` (#3a7d4e → 4.56:1) directly.
- *  - The per-row letter cannot. `--grade-b` (#a88020) is 3.39:1 on this paper,
- *    fine as a hairline or a dot (non-text, 3:1) and not fine as a glyph. So a
- *    row's pill keeps `--text` lettering and carries its grade band in the
- *    border and dot instead. The colour is still doing the state work; it is
- *    just not doing it *as text*.
- *
- * The real course card also paints a coloured band in the course's own hue.
- * Dropped here for the same reason the room avatars are neutral: identity
- * colour next to grade colour makes the grade colour stop meaning anything.
- */
-import { SurfaceFrame, SurfaceRule } from './Surface';
-import type { CSSProperties } from 'react';
-
-const ROWS = [
-  { title: 'Problem Set 6', due: 'Due 04/21/2026', earned: '18', possible: '20', letter: 'A', grade: 'var(--grade-a)' },
-  { title: 'Midterm 1', due: 'Due 03/09/2026', earned: '84', possible: '100', letter: 'B', grade: 'var(--grade-b)' },
-  { title: 'Quiz 4', due: 'Due 02/27/2026', earned: '9', possible: '10', letter: 'A', grade: 'var(--grade-a)' },
-];
-
-export default function GradebookSurface() {
-  return (
-    <SurfaceFrame testId="landing-surface-gradebook" title="Gradebook" meta="MA 242 · Fall 2025">
-      <span className="landing-surface-headrow">
-        <span className="landing-surface-grade">
-          <span className="landing-surface-letter">A−</span>
-          <span className="landing-surface-stack">
-            <span className="landing-surface-pct">91.4%</span>
-            <span className="landing-surface-mono">12 of 14 graded</span>
-          </span>
-        </span>
-        <span className="landing-surface-mono">Term GPA 3.62</span>
-      </span>
-
-      <SurfaceRule />
-      <span className="landing-surface-label">Assignments</span>
-
-      {ROWS.map((r) => (
-        <span key={r.title} className="landing-surface-gradebookrow">
-          <span className="landing-surface-stack">
-            <span className="landing-surface-assignment">{r.title}</span>
-            <span className="landing-surface-mono">{r.due}</span>
-          </span>
-          <span className="landing-surface-points">
-            {r.earned}
-            <span className="landing-surface-slash"> / {r.possible}</span>
-          </span>
-          <span className="landing-surface-gradepill" style={{ '--grade': r.grade } as CSSProperties}>
-            {r.letter}
-          </span>
-        </span>
-      ))}
-    </SurfaceFrame>
-  );
-}
diff --git a/frontend/src/components/marketing/surfaces/NotesSurface.tsx b/frontend/src/components/marketing/surfaces/NotesSurface.tsx
deleted file mode 100644
index 71443fb6..00000000
--- a/frontend/src/components/marketing/surfaces/NotesSurface.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Bento tile — the Notetaker (#344 step 2).
- *
- * Recreates `(shell)/notetaker`: the display-font title (its placeholder is
- * "Untitled note"), the Spectral body the editor sets at 15px/1.7, and the
- * right rail's "Linked concepts" card — one row per concept, each an inset pill
- * carrying an 8px mastery dot, the concept name, and the mastery word in mono
- * uppercase. That rail is the tile's whole point: a note in Sapling is attached
- * to the graph, which is what makes it a Notetaker and not a text box.
- */
-import { StateDot, SurfaceFrame } from './Surface';
-import type { MasteryTier } from '../graph/courseGraphs';
-
-const LINKED: Array<{ label: string; tier: MasteryTier; word: string }> = [
-  { label: 'Eigenvalues', tier: 'struggling', word: 'Struggling' },
-  { label: 'Determinant', tier: 'unexplored', word: 'Unexplored' },
-  { label: 'Matrices', tier: 'learning', word: 'Learning' },
-];
-
-export default function NotesSurface() {
-  return (
-    <SurfaceFrame testId="landing-surface-notes" title="Notetaker" meta="MA 242 · 2h ago">
-      <span className="landing-surface-notetitle">Week 4 — eigen-everything</span>
-      <p className="landing-surface-prose">
-        λ is the scale factor; v is the direction that survives the transformation intact. So
-        det(A − λI) = 0 is really just &ldquo;find the λ that collapses the matrix&rdquo;. Ask about
-        repeated roots before the midterm.
-      </p>
-
-      <span className="landing-surface-label">Linked concepts</span>
-      {LINKED.map((c) => (
-        <span key={c.label} className="landing-surface-linkrow">
-          <StateDot tier={c.tier} />
-          <span className="landing-surface-name">{c.label}</span>
-          <span className="landing-surface-mono">{c.word}</span>
-        </span>
-      ))}
-    </SurfaceFrame>
-  );
-}
diff --git a/frontend/src/components/marketing/surfaces/QuizSurface.tsx b/frontend/src/components/marketing/surfaces/QuizSurface.tsx
deleted file mode 100644
index 0c81bce8..00000000
--- a/frontend/src/components/marketing/surfaces/QuizSurface.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Band 2 — a live Adaptive Quizzes question (#344 step 2).
- *
- * Recreates `QuizPanel`'s `active` phase: the "Question {i} of {n}" micro-label
- * on the left, the difficulty chip on the right, the question at 16px, and the
- * `role="radiogroup"` answer grid with its `A.` mono prefix — selected option in
- * the accent border + accent-soft fill the panel actually paints.
- *
- * The one thing the real panel does NOT show is *why* this question is the one
- * you got, and that is precisely the band's claim. The footer strip states it in
- * the surface's own register: the last streak, and the difficulty the next
- * question moves to. Colour there is `--state-progress` — a status, not decor.
- *
- * Static: the options are `<div role="radio">`, not `<button>`s. The whole
- * surface is a picture of the product, there is nothing to click.
- */
-import { StateDot, SurfaceFrame, SurfaceRule } from './Surface';
-
-const OPTIONS = [
-  { label: 'A', text: 'The angle that A rotates v through' },
-  { label: 'B', text: 'The factor that A scales v by' },
-  { label: 'C', text: 'The determinant of A' },
-  { label: 'D', text: 'The rank of A' },
-];
-
-/** The option the student has picked but not yet submitted. */
-const PICKED = 'B';
-
-export default function QuizSurface() {
-  return (
-    <SurfaceFrame testId="landing-surface-quiz" title="Adaptive Quizzes" meta="Question 4 of 8">
-      <span className="landing-surface-headrow">
-        <span className="landing-surface-concept">
-          <StateDot tier="struggling" />
-          Eigenvalues
-        </span>
-        <span className="landing-surface-chip is-hard">Hard</span>
-      </span>
-
-      <p className="landing-surface-question">
-        If A v = λ v for some non-zero v, what does λ tell you about what A does to v?
-      </p>
-
-      <span className="landing-surface-options" role="radiogroup" aria-label="Answer options">
-        {OPTIONS.map((o) => {
-          const picked = o.label === PICKED;
-          return (
-            <span
-              key={o.label}
-              role="radio"
-              aria-checked={picked}
-              aria-label={`${o.label}. ${o.text}`}
-              className={`landing-surface-option${picked ? ' is-picked' : ''}`}
-            >
-              <span className="landing-surface-optionkey">{o.label}.</span>
-              {o.text}
-            </span>
-          );
-        })}
-      </span>
-
-      <SurfaceRule />
-      <span className="landing-surface-headrow">
-        <span className="landing-surface-footnote">3 right in a row on this concept</span>
-        <span className="landing-surface-tune">Next question ↑ harder</span>
-      </span>
-    </SurfaceFrame>
-  );
-}
diff --git a/frontend/src/components/marketing/surfaces/ReviewSurface.tsx b/frontend/src/components/marketing/surfaces/ReviewSurface.tsx
deleted file mode 100644
index 835625ad..00000000
--- a/frontend/src/components/marketing/surfaces/ReviewSurface.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Band 3 — the Study screen's spaced review (#344 step 2).
- *
- * Recreates `screens/Study.tsx` in flashcards mode: the `Card {i} of {n}`
- * counter with the topic in mono on the right, the 6px progress track, the
- * flipped card (its `label-micro` face label over display-font text), and the
- * rating trio — Forgot / Hard / Easy — which is the product's actual
- * spaced-repetition verdict UI.
- *
- * Two deliberate divergences from the shipped screen, both required by the
- * brand guide rather than chosen for looks:
- *
- *  - **No emoji.** The real rating buttons lead with 🙈 / 🤔 / ✨; "no emoji in
- *    chrome" is a hard line, so the tone is carried by the pill tint instead.
- *  - **The interval legend is added.** Today the app schedules server-side and
- *    prints no interval anywhere in the frontend. The band's claim is "knows
- *    what to review, and when", and a rating trio with no visible consequence
- *    makes only the first half of it. The `Next review` line states what each
- *    rating buys — honest to the behaviour, and the one element that makes this
- *    surface unmistakably a spaced-repetition product rather than a quiz.
- *
- * The pill text stays `--text` and the colour lives in the tint + border: at
- * 11–12px, `--warn` on this paper is 4.28:1, under the 4.5:1 AA bar for small
- * text, and non-text contrast only has to clear 3:1.
- */
-import type { CSSProperties } from 'react';
-
-import { SurfaceFrame, SurfaceRule } from './Surface';
-
-const RATINGS = [
-  { label: 'Forgot', key: '1', tone: 'var(--state-struggle)', due: '10 min' },
-  { label: 'Hard', key: '2', tone: 'var(--state-progress)', due: '1 day' },
-  { label: 'Easy', key: '3', tone: 'var(--state-mastery)', due: '4 days' },
-];
-
-/** Card 7 of 12 — the fill the real 6px progress track would show. */
-const PROGRESS_PCT = 58;
-
-export default function ReviewSurface() {
-  return (
-    <SurfaceFrame testId="landing-surface-review" title="Study" meta="Spaced review">
-      <span className="landing-surface-headrow">
-        <span className="landing-surface-sub">Card 7 of 12</span>
-        <span className="landing-surface-mono">MA 242 · Eigenvalues</span>
-      </span>
-
-      <span className="landing-surface-track" aria-hidden>
-        <span className="landing-surface-fill" style={{ width: `${PROGRESS_PCT}%` }} />
-      </span>
-
-      <span className="landing-surface-card">
-        <span className="landing-surface-label">Back</span>
-        <span className="landing-surface-cardtext">
-          det(A − λI) = 0 — the λ that makes A − λI collapse.
-        </span>
-      </span>
-
-      <span className="landing-surface-ratings">
-        {RATINGS.map((r) => (
-          <span key={r.label} className="landing-surface-rate" style={{ '--tone': r.tone } as CSSProperties}>
-            {r.label}
-            <span className="landing-surface-ratekey">{r.key}</span>
-          </span>
-        ))}
-      </span>
-
-      <SurfaceRule />
-      <span className="landing-surface-headrow">
-        <span className="landing-surface-label">Next review</span>
-        <span className="landing-surface-mono">
-          {RATINGS.map((r) => `${r.label} ${r.due}`).join('  ·  ')}
-        </span>
-      </span>
-    </SurfaceFrame>
-  );
-}
diff --git a/frontend/src/components/marketing/surfaces/RoomsSurface.tsx b/frontend/src/components/marketing/surfaces/RoomsSurface.tsx
deleted file mode 100644
index d3c5eb83..00000000
--- a/frontend/src/components/marketing/surfaces/RoomsSurface.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Bento tile — Study Rooms (#344 step 2).
- *
- * Recreates `screens/Social`: the display-font room name over the invite-code
- * chip and the member count, then the chat log — a 32px initials avatar and an
- * 11px sender name above each incoming bubble, and the outgoing bubble filled
- * and right-aligned with neither.
- *
- * Avatars stay on the warm `--ink` ramp rather than taking per-user hues. The
- * signed-in app tints them by name, but on this page colour is reserved for
- * state, and four coloured discs beside three mastery dots would read as
- * decoration competing with meaning.
- */
-import { SurfaceFrame } from './Surface';
-
-const MEMBERS = ['PN', 'MC', 'JH', 'AL'];
-
-const MESSAGES = [
-  { from: 'Priya', initials: 'PN', text: 'anyone else stuck on Q3 of the practice set?', self: false },
-  { from: 'Marcus', initials: 'MC', text: 'the eigenvector one? multiply it out — λ falls right out', self: false },
-  { from: 'You', initials: 'AL', text: 'oh. ok that actually helps', self: true },
-];
-
-export default function RoomsSurface() {
-  return (
-    <SurfaceFrame testId="landing-surface-rooms" title="Study Rooms" meta="4 members">
-      <span className="landing-surface-headrow">
-        <span className="landing-surface-roomname">Linear Algebra — Exam 2</span>
-        <span className="landing-surface-chip is-code">MA242-7QK</span>
-      </span>
-
-      <span className="landing-surface-stack-avatars">
-        {MEMBERS.map((m) => (
-          <span key={m} aria-hidden className="landing-surface-avatar">
-            {m}
-          </span>
-        ))}
-      </span>
-
-      {MESSAGES.map((m) => (
-        <span key={m.from + m.text} className={`landing-surface-turn${m.self ? ' is-student' : ' is-tutor'}`}>
-          {m.self ? null : (
-            <span aria-hidden className="landing-surface-avatar">
-              {m.initials}
-            </span>
-          )}
-          <span className="landing-surface-msg">
-            {m.self ? null : <span className="landing-surface-sender">{m.from}</span>}
-            <span className={`landing-surface-bubble${m.self ? ' is-student' : ' is-tutor'}`}>{m.text}</span>
-          </span>
-        </span>
-      ))}
-    </SurfaceFrame>
-  );
-}
diff --git a/frontend/src/components/marketing/surfaces/Surface.tsx b/frontend/src/components/marketing/surfaces/Surface.tsx
deleted file mode 100644
index e01a4818..00000000
--- a/frontend/src/components/marketing/surfaces/Surface.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Shared chrome for the in-page product recreations (#344 step 2).
- *
- * Every surface below the hero is a RECREATION of a page Sapling actually
- * ships — an upload queue, a quiz question, a review queue, a tutor exchange,
- * a note, a study room, a gradebook. None of them is an "icon + heading +
- * sentence" card, which the brand guide lists as a hard anti-pattern: a tile
- * has to show the product, not describe it.
- *
- * Two rules are enforced here rather than restated in seven files:
- *
- *  1. **Solid warm paper, hairline borders.** No `.liquid-glass`, no
- *     `backdrop-filter`, no frosted panel — the brand guide's other hard line.
- *     The recipe lives in `.landing-surface*` in globals.css, inside the
- *     `.landing-page` scope (the pre-auth page re-declares the app shell's
- *     token NAMES with different values — `docs/frontend-rhythm-audit.md`).
- *  2. **Colour is state.** The only colours these surfaces carry are
- *     `--state-*` (mastery) and `--grade-*` (letter grades), reached through
- *     `TIER_COLOR` — the same map the knowledge-graph section one viewport
- *     above paints its nodes with, so the page speaks one colour language.
- *     Everything else is a warm neutral off the `--ink` ramp.
- *
- * These are static pictures: no buttons, no inputs, no motion, nothing to
- * click. That is deliberate (the spec's "no per-tile buttons") and it is also
- * what makes `prefers-reduced-motion` / `IS_TEST_MODE` parking a non-issue —
- * there is no frame to park, only the complete one.
- */
-import type { ReactNode } from 'react';
-
-import { TIER_COLOR, type MasteryTier } from '../graph/courseGraphs';
-
-/**
- * A mastery status mark. `aria-hidden` because the tier is always spelled out
- * in adjacent text or is decorative repetition of it — a bare "coloured dot"
- * announcement is noise in a screen reader.
- */
-export function StateDot({ tier }: { tier: MasteryTier }) {
-  return (
-    <span aria-hidden className="landing-surface-dot" style={{ background: TIER_COLOR[tier] }} />
-  );
-}
-
-/** A concept chip: mastery dot + label. Used by upload, notes and quiz. */
-export function ConceptChip({ label, tier }: { label: string; tier: MasteryTier }) {
-  return (
-    <span className="landing-surface-chip">
-      <StateDot tier={tier} />
-      {label}
-    </span>
-  );
-}
-
-/** The hairline that separates a surface's sections. */
-export function SurfaceRule() {
-  return <span aria-hidden className="landing-surface-rule" />;
-}
-
-/**
- * The window frame every recreation sits in: a titled chrome bar over a body.
- *
- * `title` is the product surface's own name in Title Case (the approved
- * vocabulary — "Tutor", "Notetaker", "Study Rooms", "Gradebook",
- * "Adaptive Quizzes", "Document Library"), rendered as a mono micro-label.
- * `meta` is the small right-hand status the real screen carries in the same
- * spot (a count, a term, an invite code).
- */
-export function SurfaceFrame({
-  testId,
-  title,
-  meta,
-  children,
-}: {
-  testId: string;
-  title: string;
-  meta?: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <div className="landing-surface" data-testid={testId}>
-      <div className="landing-surface-chrome">
-        <span className="landing-surface-title">{title}</span>
-        {meta === undefined ? null : <span className="landing-surface-meta">{meta}</span>}
-      </div>
-      <div className="landing-surface-body">{children}</div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/marketing/surfaces/TutorSurface.tsx b/frontend/src/components/marketing/surfaces/TutorSurface.tsx
deleted file mode 100644
index 806df4b4..00000000
--- a/frontend/src/components/marketing/surfaces/TutorSurface.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Bento tile — the Tutor (#344 step 2).
- *
- * Recreates `chat/ChatPanel`: the assistant turn is a 32px accent-soft avatar
- * with a sparkle next to a Spectral-set bubble on paper with a hairline; the
- * student turn is a filled bubble on the right in DM Sans, no avatar. Neither
- * carries a role label — the alignment and the avatar do that work, exactly as
- * the shipped panel does. Under the log sit the three quick actions the panel
- * offers above its composer: Hint, I'm confused, Skip.
- *
- * The fill is `--brand-forest`, not the panel's `--accent`: `--accent`
- * (#2D8F5C) under white is 4.04:1, which is under the 4.5:1 AA bar at the
- * ~13px this tile sets its bubbles at. Forest is 6.4:1.
- *
- * The exchange itself is a real one — a student stuck on why an eigenvalue can
- * be negative, and a Socratic reply that hands back a matrix to try rather than
- * the answer. That is the product's actual tutoring posture; a generic
- * "How can I help you today?" would have been the wrong picture.
- */
-import { SurfaceFrame } from './Surface';
-
-/** The panel's assistant avatar: a four-point sparkle in the accent tint. */
-function TutorMark() {
-  return (
-    <span aria-hidden className="landing-surface-avatar is-tutor">
-      <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden>
-        <path
-          d="M8 0.9c.55 3.35 1.8 4.6 5.15 5.15C9.8 6.6 8.55 7.85 8 11.2 7.45 7.85 6.2 6.6 2.85 6.05 6.2 5.5 7.45 4.25 8 .9z"
-          fill="currentColor"
-        />
-        <path
-          d="M12.6 10.1c.28 1.5.82 2.05 2.3 2.32-1.48.27-2.02.82-2.3 2.32-.28-1.5-.82-2.05-2.3-2.32 1.48-.27 2.02-.82 2.3-2.32z"
-          fill="currentColor"
-          opacity="0.7"
-        />
-      </svg>
-    </span>
-  );
-}
-
-const ACTIONS = ['Hint', "I'm confused", 'Skip'];
-
-export default function TutorSurface() {
-  return (
-    <SurfaceFrame testId="landing-surface-tutor" title="Tutor" meta="Socratic · Eigenvalues">
-      <span className="landing-surface-turn is-student">
-        <span className="landing-surface-bubble is-student">
-          I don&apos;t get why an eigenvalue is allowed to be negative.
-        </span>
-      </span>
-
-      <span className="landing-surface-turn is-tutor">
-        <TutorMark />
-        <span className="landing-surface-bubble is-tutor">
-          A negative λ just means A flips v end-for-end while it scales it. Try A = [[−2, 0], [0, 1]]
-          on v = (1, 0) — what comes back out, and which way is it pointing?
-        </span>
-      </span>
-
-      <span className="landing-surface-turn is-student">
-        <span className="landing-surface-bubble is-student">
-          it points backwards. so λ = −2 flips it and doubles it?
-        </span>
-      </span>
-
-      <span className="landing-surface-turn is-tutor">
-        <TutorMark />
-        <span className="landing-surface-bubble is-tutor">
-          That is exactly it. Now try the other one — what does v = (0, 1) do?
-        </span>
-      </span>
-
-      <span className="landing-surface-actions">
-        {ACTIONS.map((a) => (
-          <span key={a} className="landing-surface-action">
-            {a}
-          </span>
-        ))}
-      </span>
-    </SurfaceFrame>
-  );
-}
diff --git a/frontend/src/components/marketing/surfaces/UploadSurface.tsx b/frontend/src/components/marketing/surfaces/UploadSurface.tsx
deleted file mode 100644
index 2609b6ae..00000000
--- a/frontend/src/components/marketing/surfaces/UploadSurface.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Band 1 — the Document Library ingest queue (#344 step 2).
- *
- * Recreates `DocumentUploadModal` at rest, mid-batch: the file rows with their
- * `28×36` doc tile, `{size} · {EXT}` meta line and status chip (`queued` /
- * `processing…` / `done` — the modal's own wording), then the extraction
- * result the modal prints underneath a finished row: a summary line plus the
- * concept chips that land on the graph.
- *
- * The concept chips carry mastery dots from `TIER_COLOR`, which is the whole
- * argument of the band: an upload is not a file in a folder, it is nodes on
- * your graph. Same tokens as the knowledge-graph section one viewport up.
- */
-import { ConceptChip, StateDot, SurfaceFrame, SurfaceRule } from './Surface';
-import type { MasteryTier } from '../graph/courseGraphs';
-
-/** The modal's doc tile — a page glyph, drawn inline (no icon dependency). */
-function DocGlyph() {
-  return (
-    <span aria-hidden className="landing-surface-doc">
-      <svg viewBox="0 0 16 20" width="13" height="16" fill="none" aria-hidden>
-        <path
-          d="M2.5 1.5h7.2L14 5.8v12.7H2.5z"
-          stroke="currentColor"
-          strokeWidth="1.3"
-          strokeLinejoin="round"
-        />
-        <path d="M9.5 1.7v4.3H14" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
-        <path d="M5 10h6M5 13h6M5 16h3.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
-      </svg>
-    </span>
-  );
-}
-
-type UploadStatus = 'done' | 'processing' | 'queued';
-
-const FILES: Array<{ name: string; meta: string; status: UploadStatus; label: string }> = [
-  { name: 'MA242_syllabus.pdf', meta: '0.4 MB · PDF', status: 'done', label: 'done' },
-  { name: 'linear_algebra_ch3.pdf', meta: '2.8 MB · PDF', status: 'processing', label: 'processing…' },
-  { name: 'lecture_wk4.pptx', meta: '6.1 MB · PPTX', status: 'queued', label: 'queued' },
-];
-
-const CONCEPTS: Array<{ label: string; tier: MasteryTier }> = [
-  { label: 'Vector Spaces', tier: 'mastered' },
-  { label: 'Matrices', tier: 'learning' },
-  { label: 'Eigenvalues', tier: 'struggling' },
-  { label: 'Determinant', tier: 'unexplored' },
-];
-
-export default function UploadSurface() {
-  return (
-    <SurfaceFrame testId="landing-surface-upload" title="Document Library" meta="3 files queued">
-      {FILES.map((f) => (
-        <div key={f.name} className="landing-surface-row">
-          <DocGlyph />
-          <span className="landing-surface-stack">
-            <span className="landing-surface-name">{f.name}</span>
-            <span className="landing-surface-sub">{f.meta}</span>
-          </span>
-          <span className={`landing-surface-status is-${f.status}`}>{f.label}</span>
-        </div>
-      ))}
-
-      {/* The extraction readout the modal prints under a finished row. */}
-      <SurfaceRule />
-      <span className="landing-surface-label">Concepts extracted</span>
-      <p className="landing-surface-note">
-        Syllabus read: 19 concepts mapped onto MA 242, 4 of them new.
-      </p>
-      <span className="landing-surface-chiprow">
-        {CONCEPTS.map((c) => (
-          <ConceptChip key={c.label} label={c.label} tier={c.tier} />
-        ))}
-        <span className="landing-surface-chip is-count">+15</span>
-      </span>
-
-      {/* The graph is where they land — say so in the surface's own voice. */}
-      <span className="landing-surface-footnote">
-        <StateDot tier="mastered" />
-        Linked to your MA 242 graph
-      </span>
-    </SurfaceFrame>
-  );
-}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 53adad44..c6736b39 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -47,6 +47,17 @@ async function fetchJSON<T>(path: string, options?: RequestInit): Promise<T> {
   return res.json();
 }
 
+// Newsletter / beta list
+//
+// Backed by backend/routes/newsletter.py, which upserts on `email` — so a
+// repeat signup is a no-op rather than an error, and the caller can treat
+// success as "you're on the list" regardless of whether it was already there.
+export const subscribeToNewsletter = (email: string) =>
+  fetchJSON<{ ok: boolean }>('/api/newsletter/subscribe', {
+    method: 'POST',
+    body: JSON.stringify({ email }),
+  });
+
 // Users
 export const getUsers = () =>
   fetchJSON<{ users: { id: string; name: string; room_id: string | null }[] }>('/api/users');
diff --git a/frontend/src/lib/landing/color.ts b/frontend/src/lib/landing/color.ts
new file mode 100644
index 00000000..0dc22690
--- /dev/null
+++ b/frontend/src/lib/landing/color.ts
@@ -0,0 +1,94 @@
+/**
+ * Colour + easing maths for the v4 landing page.
+ *
+ * Ported verbatim from `Sapling Landing v4.dc.html`. These are the exact
+ * functions the scroll engine uses to interpolate node tints, band
+ * gradients, and stage transitions frame-by-frame, so the arithmetic is
+ * deliberately unchanged — including `lerpTint`'s hue-borrowing rule,
+ * which is what stops an unexplored (grey) node from washing through a
+ * dead desaturated midpoint on its way to a tier colour.
+ *
+ * Called from inside the master rAF loop: keep these allocation-light and
+ * free of any layout reads.
+ */
+
+export type Rgb = [number, number, number];
+/** [hue, saturation, lightness], each normalised to 0..1. */
+export type Hsl = [number, number, number];
+
+export function hexToRgb(h: string): Rgb {
+  return [
+    parseInt(h.slice(1, 3), 16),
+    parseInt(h.slice(3, 5), 16),
+    parseInt(h.slice(5, 7), 16),
+  ];
+}
+
+export function lerpColor(a: string, b: string, t: number): string {
+  const A = hexToRgb(a);
+  const B = hexToRgb(b);
+  return (
+    'rgb(' +
+    Math.round(A[0] + (B[0] - A[0]) * t) +
+    ',' +
+    Math.round(A[1] + (B[1] - A[1]) * t) +
+    ',' +
+    Math.round(A[2] + (B[2] - A[2]) * t) +
+    ')'
+  );
+}
+
+export function clamp01(v: number): number {
+  return Math.max(0, Math.min(1, v));
+}
+
+export function rgbToHsl(c: Rgb): Hsl {
+  const r = c[0] / 255,
+    g = c[1] / 255,
+    b = c[2] / 255,
+    mx = Math.max(r, g, b),
+    mn = Math.min(r, g, b),
+    l = (mx + mn) / 2;
+  let h = 0,
+    sa = 0;
+  if (mx !== mn) {
+    const d = mx - mn;
+    sa = l > 0.5 ? d / (2 - mx - mn) : d / (mx + mn);
+    h = mx === r ? (g - b) / d + (g < b ? 6 : 0) : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    h /= 6;
+  }
+  return [h, sa, l];
+}
+
+export function hslToCss(h: number, sa: number, l: number): string {
+  return (
+    'hsl(' +
+    ((((h % 1) + 1) % 1) * 360).toFixed(1) +
+    ',' +
+    (sa * 100).toFixed(1) +
+    '%,' +
+    (l * 100).toFixed(1) +
+    '%)'
+  );
+}
+
+/**
+ * Tint-aware interpolation: grey has no hue of its own, so borrow the
+ * destination's and let saturation carry the change. Also takes the short
+ * way round the colour wheel rather than through the far side.
+ */
+export function lerpTint(a: string, b: string, t: number): string {
+  const A = rgbToHsl(hexToRgb(a));
+  const B = rgbToHsl(hexToRgb(b));
+  const ah = A[1] < 0.08 ? B[0] : A[0];
+  let dh = B[0] - ah;
+  if (dh > 0.5) dh -= 1;
+  else if (dh < -0.5) dh += 1;
+  return hslToCss(ah + dh * t, A[1] + (B[1] - A[1]) * t, A[2] + (B[2] - A[2]) * t);
+}
+
+/** Smoothstep. The default easing for scroll-driven progress. */
+export function smooth(t: number): number {
+  t = clamp01(t);
+  return t * t * (3 - 2 * t);
+}
diff --git a/frontend/src/lib/landing/companionContent.ts b/frontend/src/lib/landing/companionContent.ts
new file mode 100644
index 00000000..cfd8b1b0
--- /dev/null
+++ b/frontend/src/lib/landing/companionContent.ts
@@ -0,0 +1,186 @@
+/**
+ * Copy for the six companion pages.
+ *
+ * Lifted verbatim from the sibling `.dc.html` design components, where it
+ * lives as plain JS object literals. Content only -- no markup, no styling.
+ */
+
+export const ABOUT_DIFFERENTIATORS = [
+        'Your knowledge graph is yours. It updates in real time based on your actual performance, not just what you\u2019ve clicked through.',
+        'Three distinct teaching modes mean you\u2019re never locked into one way of learning.',
+        'Study rooms let you learn alongside classmates and see how your mastery compares, anonymously and collaboratively.',
+        'Everything from syllabus tracking to exam study guides is powered by Gemini, so the busywork of getting organized is handled for you.',
+      ] as const;
+
+export const ABOUT_AWARDS = [
+        { delay: '440ms', title: 'Best AI Tutor in Education',
+          org: 'Boston University Civic Hacks 2026 \u00b7 BU Spark! & Wheelock College of Education',
+          body: 'Recognized among competing teams at BU\u2019s annual civic hackathon for building the most impactful AI-driven learning experience. Sapling was awarded for its approach to personalized, student-centered tutoring, bridging the gap between artificial intelligence and meaningful education.' },
+        { delay: '520ms', title: 'Code & Tell Winner', org: 'BU Spark!',
+          body: 'Selected by BU Spark! as a standout project at their Code & Tell showcase, where student builders present real-world applications to faculty, mentors, and industry judges. Sapling was chosen for its technical depth and its vision for the future of how students learn.' },
+      ] as const;
+
+export const TEAM_MEMBERS = [
+        { name:'Andres Lopez', role:'Full stack', slot:'team-andres', hint:'Drop a photo of Andres',
+          body:'Works end to end, from the database up through the screens, and keeps the two halves speaking the same language.', delay:'0ms' },
+        { name:'Jack He', role:'AI architecture and new features', slot:'team-jack', hint:'Drop a photo of Jack',
+          body:'Designs how the agents, the graph, and your own materials fit together, and builds what Sapling does next.', delay:'80ms' },
+        { name:'Jose Gael Cruz-Lopez', role:'Frontend', slot:'team-jose', hint:'Drop a photo of Jose',
+          body:'Builds the interface you actually study in, and the motion and layout that keep it out of your way.', delay:'160ms' },
+        { name:'Luke Cooper', role:'API integration', slot:'team-luke', hint:'Drop a photo of Luke',
+          body:'Wires Sapling to the services your course already lives in, so your calendar, grades, and files arrive on their own.', delay:'240ms' },
+        { name:'Hang Nguyen', role:'Marketing intern', slot:'team-hang', hint:'Drop a photo of Hang',
+          body:'Runs the social side and the short-form video, and carries Sapling to the student groups and classmates we would never reach on our own.', delay:'320ms' },
+      ] as const;
+
+export const TEAM_WAYS = [
+        'We use Sapling for our own courses before anyone else sees a feature. If it does not help us pass, it does not ship.',
+        'Every feature has to feed the graph. A tool that knows nothing about what you already understand is a tool we would not add.',
+        'We read every piece of beta feedback ourselves. There is no support queue between you and the people who built it.',
+      ] as const;
+
+export const FAQ_GROUPS = [
+  { label: 'Academic integrity', items: [
+    { q:"Isn\u2019t using AI to study just cheating?", a:"No, because Sapling never hands you the answer. It guides you toward the understanding: Socratic questioning, explanations you have to apply yourself, and TeachBack, where you do the explaining. Using Sapling is like having a tutor, not a ghostwriter. The work, and the learning, is still yours." },
+    { q:"Will it just do my homework for me?", a:"It won't, by design. Answer engines hand over the solution; Sapling walks you through the process and adapts to how you learn. If you paste a homework problem, expect guiding questions, not a finished answer to copy." },
+    { q:"Are tools like Sapling allowed in my classes?", a:"Sapling is a study aid, the same category as flashcards, tutoring, or a study group. It doesn't produce submittable work. That said, every course sets its own rules, so check your syllabus." },
+    { q:"Won\u2019t I become dependent on the AI?", a:"We built Sapling to make you less dependent over time. Mastery only turns green when you can demonstrate understanding, and TeachBack literally requires you to explain concepts yourself. The goal is that you walk into the exam without us." },
+  ]},
+  { label: 'How it differs', items: [
+    { q:"How is this different from just using ChatGPT?", a:"A general chatbot forgets you the moment you close the tab. Sapling maps what you know, remembers what you struggled with, schedules reviews before you forget, and grounds itself in your actual course materials. It's a study system, not a conversation." },
+    { q:"What if the AI gets something wrong?", a:"It can, which is why Sapling grounds answers in your uploaded course materials and shows its reasoning instead of just a verdict. You stay the judge. Spot an error and flag it in one click, and the tutor corrects course." },
+    { q:"Do I have to upload anything to get value?", a:"You can start with a single syllabus and still get a full semester of dates plus a first pass at the concept graph. The more of your own material you add, the more the quizzes and guides look like your course rather than a generic one." },
+    { q:"Does it work for every subject?", a:"It works wherever your course has readable material and named concepts, which covers most lecture-based courses. Heavily studio or performance-based courses get less out of it, and we would rather say that than oversell." },
+  ]},
+  { label: 'Access and data', items: [
+    { q:"What does it cost?", a:"Nothing during beta. Beta testers get every feature free while we build, and a say in what we build next. Join the list and you're in line." },
+    { q:"What happens to my notes and documents?", a:"They stay yours. Uploads, notes, and messages are encrypted at rest with AES-256, used only to build your graph and study materials, and never sold or used to train outside models. Delete a document and its data goes with it." },
+    { q:"Can I study with people from my class?", a:"Yes. Study rooms put a live chat next to a shared graph, so the room can see which concepts nobody has locked down and turn any gap into a quiz everyone takes." },
+    { q:"When does the beta open?", a:"We are onboarding in small groups so we can actually read the feedback. Sign up and we will tell you which group you are in rather than leaving you on a silent list." },
+  ]},
+] as const;
+
+export const GALLERY_SHOTS = [
+  { slot:'shot-tree', route:'/tree', group:'Learn', cat:'learn', title:'Knowledge graph',
+    body:'The whole course as nodes and edges, each ring showing mastery. Click any concept to see what it feeds.' },
+  { slot:'shot-learn', route:'/learn', group:'Learn', cat:'learn', title:'AI tutor',
+    body:'Socratic, expository, and TeachBack on the same concept, grounded in the documents you uploaded.' },
+  { slot:'shot-quiz', route:'/quiz', group:'Learn', cat:'learn', title:'Adaptive quiz',
+    body:'Difficulty re-tunes after every answer, and each result writes back to the concept it tested.' },
+  { slot:'shot-study', route:'/study', group:'Study', cat:'study', title:'Flashcard review',
+    body:'Rate your recall and the interval sets itself: ten minutes, one day, or four days.' },
+  { slot:'shot-guide', route:'/study', group:'Study', cat:'study', title:'Study guide',
+    body:'Assembled from your own library for one exam, weighted toward the concepts you keep missing.' },
+  { slot:'shot-notetaker', route:'/notetaker', group:'Study', cat:'study', title:'Notetaker',
+    body:'Write normally. Sapling summarizes, extracts the concepts, and links them into your graph.' },
+  { slot:'shot-library', route:'/library', group:'Study', cat:'study', title:'Library',
+    body:'Everything you have dropped in, with the concepts, cards, and dates each document produced.' },
+  { slot:'shot-social', route:'/social', group:'Together', cat:'together', title:'Study rooms',
+    body:'Live chat beside a shared graph, so the room can see exactly who is solid where.' },
+  { slot:'shot-achievements', route:'/achievements', group:'Together', cat:'together', title:'Achievements',
+    body:'Streaks and milestones that track demonstrated understanding rather than time logged.' },
+  { slot:'shot-calendar', route:'/calendar', group:'Semester', cat:'semester', title:'Calendar',
+    body:'One syllabus upload becomes every exam, pset, and quiz, dated and synced to Google Calendar.' },
+  { slot:'shot-gradebook', route:'/gradebook', group:'Semester', cat:'semester', title:'Gradebook',
+    body:'Syllabus weights become categories, and every score rolls into a live grade and letter.' },
+  { slot:'shot-planner', route:'/course-planner', group:'Semester', cat:'semester', title:'Course planner',
+    body:'Map the degree, not just the term. Prerequisites carry across semesters.' },
+] as const;
+
+export const GALLERY_FILTERS = [
+  { key:'all', label:'All screens' },
+  { key:'learn', label:'Learn' },
+  { key:'study', label:'Study' },
+  { key:'together', label:'Together' },
+  { key:'semester', label:'Semester' },
+] as const;
+
+export const NEWS_POSTS = [
+  { cat:'founding', tag:'Founding', date:'6/12/2026', time:'6 MIN', slot:'news-founding', src:'assets/journal-founding.png',
+    title:'Why we built Sapling',
+    excerpt:'Four students, one library table, and a nagging question: what if AI made you understand more, not less? The origin story, missteps included.' },
+  { cat:'perspective', tag:'Perspective', date:'5/04/2026', time:'4 MIN', slot:'news-homework', src:'assets/journal-ai-homework.png',
+    title:'AI shouldn\u2019t do your homework',
+    excerpt:'Our line in the sand on AI and education: guidance over answers, process over shortcuts, and why "just give me the solution" is the wrong deal.' },
+  { cat:'product', tag:'Product', date:'4/18/2026', time:'7 MIN', slot:'news-graph', src:'',
+    title:'How the knowledge graph works',
+    excerpt:'Nodes, edges, and mastery scores: how a semester of studying becomes a living map, and why the cross-unit edges matter most.' },
+  { cat:'release', tag:'Release', date:'3/22/2026', time:'3 MIN', slot:'news-teachback', src:'',
+    title:'TeachBack is live',
+    excerpt:'The mode that flips the desk. You explain the concept, Sapling names the step you skipped, and mastery counts for more than reading.' },
+  { cat:'product', tag:'Research', date:'2/09/2026', time:'5 MIN', slot:'news-spacing', src:'',
+    title:'What spacing actually buys you',
+    excerpt:'Why ten minutes, one day, and four days are the intervals we shipped, and what happened when we tested longer gaps on our own courses.' },
+  { cat:'release', tag:'Release', date:'1/06/2026', time:'2 MIN', slot:'news-calendar', src:'',
+    title:'Syllabus to semester in one upload',
+    excerpt:'Calendar extraction went from a manual paste to a single drop. Every exam, pset, and quiz dated and synced before week one is over.' },
+] as const;
+
+export const NEWS_FILTERS = [
+  { key:'all', label:'All articles' },
+  { key:'release', label:'Releases' },
+  { key:'product', label:'Product' },
+  { key:'perspective', label:'Perspective' },
+  { key:'founding', label:'Founding' },
+] as const;
+
+/** Wiki's own tier swatches. Warmer than the landing's XTIER — these sit on
+ *  the paper palette, not the dark act ground, so they are deliberately
+ *  distinct values rather than a shared token. */
+const TIER = { mastered: '#3a7d4e', learning: '#c89b5e', struggling: '#b25855', unexplored: '#9a9a9a' };
+
+export const WIKI_TOC = [
+        { title:'Knowledge graph', href:'#graph' },
+        { title:'Mastery tiers', href:'#mastery' },
+        { title:'Spaced review', href:'#review' },
+        { title:'Tutor modes', href:'#tutor' },
+        { title:'Ingestion', href:'#ingestion' },
+        { title:'Grade scale', href:'#grades' },
+        { title:'Your data', href:'#privacy' },
+      ] as const;
+
+export const WIKI_GRAPH_TERMS = [
+        { term:'Node', def:'A single concept, such as AVL rotations. Its radius grows with how central it is to the course.' },
+        { term:'Edge', def:'A prerequisite link. Recursion feeds trees, dynamic programming, and graph traversal, so it carries three edges out.' },
+        { term:'Cross-unit edge', def:'An edge between two different units. Drawn fainter, and the most common cause of a surprise on an exam.' },
+        { term:'Class node', def:'The hub at the centre of the graph. It represents the course itself and connects to every unit root.' },
+      ] as const;
+
+export const WIKI_TIERS = [
+        { name:'Mastered', range:'0.75 \u2013 1.00', dot:'background:' + TIER.mastered + ';', meaning:'You have demonstrated it more than once. Quizzes spend few questions here.' },
+        { name:'Learning', range:'0.40 \u2013 0.74', dot:'background:' + TIER.learning + ';', meaning:'Partly there. Reviews are scheduled and the tutor still probes it.' },
+        { name:'Struggling', range:'0.01 \u2013 0.39', dot:'background:' + TIER.struggling + ';', meaning:'Repeated misses. Study guides weight this concept the heaviest.' },
+        { name:'Unexplored', range:'0.00', dot:'background:' + TIER.unexplored + ';', meaning:'Seen in your documents but never practised. No score yet.' },
+      ] as const;
+
+export const WIKI_RATINGS = [
+        { label:'Forgot', key:'1', due:'10 min', tone:'color:' + TIER.struggling + ';' },
+        { label:'Hard', key:'2', due:'1 day', tone:'color:' + TIER.learning + ';' },
+        { label:'Easy', key:'3', due:'4 days', tone:'color:' + TIER.mastered + ';' },
+      ] as const;
+
+export const WIKI_MODES = [
+        { name:'Socratic', def:'Asks the question that gets you to the answer yourself, and escalates its hints only when you stall.' },
+        { name:'Expository', def:'Explains the concept directly, structured and cited back to the specific pages it came from.' },
+        { name:'TeachBack', def:'You explain the concept and it names the step you skipped. Mastery gained here is worth more than reading.' },
+      ] as const;
+
+export const WIKI_PIPELINE = [
+        { num:'01', title:'Read', body:'Text is extracted page by page, including OCR for scans and photos of handwritten notes.' },
+        { num:'02', title:'Chunk', body:'The document is split by type. A syllabus is split by week, a lecture deck by slide, so context stays intact.' },
+        { num:'03', title:'Scan concepts', body:'Every concept named in the material becomes a node, joined to the concepts it depends on.' },
+        { num:'04', title:'Fan out', body:'The same pass produces flashcards, quiz questions, and dated calendar entries, all pointing back at their source.' },
+      ] as const;
+
+export const WIKI_LETTERS = [
+        { letter:'A', min:'\u2265 93' }, { letter:'A\u2212', min:'\u2265 90' },
+        { letter:'B+', min:'\u2265 87' }, { letter:'B', min:'\u2265 83' }, { letter:'B\u2212', min:'\u2265 80' },
+        { letter:'C+', min:'\u2265 77' }, { letter:'C', min:'\u2265 73' }, { letter:'C\u2212', min:'\u2265 70' },
+        { letter:'D', min:'\u2265 60' }, { letter:'F', min:'< 60' },
+      ] as const;
+
+export const WIKI_DATA_FACTS = [
+        'Uploads, notes, and messages are encrypted at rest with AES-256.',
+        'Your material is used to build your graph and study tools, and is never sold or used to train outside models.',
+        'Delete a document and the concepts, cards, and dates derived from it go with it.',
+      ] as const;
diff --git a/frontend/src/lib/landing/content.ts b/frontend/src/lib/landing/content.ts
new file mode 100644
index 00000000..c621e871
--- /dev/null
+++ b/frontend/src/lib/landing/content.ts
@@ -0,0 +1,264 @@
+/**
+ * Editorial content for the v4 landing page — gallery cards, FAQ, journal.
+ *
+ * Ported verbatim from `Sapling Landing v4.dc.html`. Copy is treated as
+ * fixed: the gallery `num` values continue the numbering the acts start,
+ * and each card's `kind` selects both its bespoke miniature animation and
+ * the feature-lab panel it expands into.
+ */
+
+/** Character set the hero text scrambles through before it settles. */
+export const SCRAMBLE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_';
+
+/** Gallery card kind → the feature-lab panel it opens. */
+export const LAB_KIND = {
+  quiz: 'quiz',
+  flashcards: 'cards',
+  notetaker: 'notes',
+  guide: 'guide',
+  rooms: 'rooms',
+  gradebook: 'grades',
+  calendar: 'calendar',
+  tutor: 'tutor',
+} as const;
+
+export type GalleryKind = keyof typeof LAB_KIND;
+export type LabKind = (typeof LAB_KIND)[GalleryKind];
+
+export interface GalleryCard {
+  kind: GalleryKind;
+  /** Two-digit index shown on the card. Continues from the acts. */
+  num: string;
+  kicker: string;
+  title: string;
+  desc: string;
+  bullets: { t: string }[];
+}
+
+export const GAL: GalleryCard[] = [
+  {
+    kind: 'quiz',
+    num: '04',
+    kicker: 'Assessment',
+    title: 'Quizzes that meet you where you struggle.',
+    desc: "Questions re-tune to your level after every answer, pressing where you're strong, slowing down where you're not.",
+    bullets: [
+      { t: 'Difficulty re-tunes after every single answer.' },
+      { t: 'Missed concepts come back right before you’d forget them.' },
+      { t: 'Every question is grounded in your own course materials.' },
+    ],
+  },
+  {
+    kind: 'flashcards',
+    num: '05',
+    kicker: 'Recall',
+    title: 'Cards that know when you’ll forget.',
+    desc: 'Generate decks per course, or bring your own from anywhere. Spaced repetition schedules each card for the moment it matters.',
+    bullets: [
+      { t: 'Import from paste, CSV, Anki, a URL, even a photo of notes.' },
+      { t: 'Again / good / easy ratings set each card’s return date.' },
+      { t: 'Every rating feeds mastery back into your graph.' },
+    ],
+  },
+  {
+    kind: 'notetaker',
+    num: '06',
+    kicker: 'Notes',
+    title: 'Notes that feed the graph.',
+    desc: 'Write like you always do. Sapling extracts the concepts, links them back to the note, and can quiz you on the weakest one.',
+    bullets: [
+      { t: 'Autosaves while you type. No save button.' },
+      { t: 'Concepts are extracted and mapped as you write.' },
+      { t: 'Ask questions answered from your own notes.' },
+    ],
+  },
+  {
+    kind: 'guide',
+    num: '07',
+    kicker: 'Exam Prep',
+    title: 'A study guide built from your gaps.',
+    desc: 'Before each exam, Sapling assembles a guide from your own uploaded materials, weighted toward the concepts you keep missing.',
+    bullets: [
+      { t: 'Generated per exam, from your actual uploads.' },
+      { t: 'Weighted by your miss history, not chapter order.' },
+      { t: 'Every section links back to its source.' },
+    ],
+  },
+  {
+    kind: 'rooms',
+    num: '08',
+    kicker: 'Together',
+    title: 'Learn next to your classmates.',
+    desc: 'Invite your class, compare knowledge graphs side by side, and keep each other honest. The library table, without the library hours.',
+    bullets: [
+      { t: 'Live rooms with real-time chat.' },
+      { t: 'Graphs side by side. See who’s solid where.' },
+      { t: 'Turn any gap into a shared quiz in one click.' },
+    ],
+  },
+  {
+    kind: 'gradebook',
+    num: '09',
+    kicker: 'Grade Calculator',
+    title: 'Your real grade, always current.',
+    desc: 'Categories and weights straight from your syllabus, per-assignment scores, and a live course grade that never lies to you.',
+    bullets: [
+      { t: 'Weights parsed from your syllabus automatically.' },
+      { t: 'Link Gradescope once. New scores pull themselves in.' },
+      { t: '“What do I need on the final” math, built in.' },
+    ],
+  },
+  {
+    kind: 'calendar',
+    num: '10',
+    kicker: 'Deadlines',
+    title: 'Paste a syllabus. Get a semester.',
+    desc: 'Every problem set, quiz, and midterm extracted from the syllabus and placed on your calendar automatically, before week one is over.',
+    bullets: [
+      { t: 'Whole-semester extraction from one paste.' },
+      { t: 'Assignments, exams, and office hours, all placed.' },
+      { t: 'Study blocks suggested around your weakest concepts.' },
+    ],
+  },
+  {
+    kind: 'tutor',
+    num: '11',
+    kicker: 'AI Tutor',
+    title: 'It asks. You answer.',
+    desc: 'Three modes on the same concept. Socratic questions you toward it, expository explains it from your own materials, teachback makes you do the explaining.',
+    bullets: [
+      { t: 'Never hands over the solution, by design.' },
+      { t: 'Grounded in your uploads, with the sources shown.' },
+      { t: 'Teachback finds the gap you did not know you had.' },
+    ],
+  },
+];
+
+export interface Faq {
+  q: string;
+  a: string;
+}
+
+export const FAQS: Faq[] = [
+  {
+    q: 'Isn’t using AI to study just cheating?',
+    a: 'No, because Sapling never hands you the answer. It guides you toward the understanding: Socratic questioning, explanations you have to apply yourself, and TeachBack, where you do the explaining. Using Sapling is like having a tutor, not a ghostwriter. The work, and the learning, is still yours.',
+  },
+  {
+    q: 'Will it just do my homework for me?',
+    a: "It won't, by design. Answer engines hand over the solution; Sapling walks you through the process and adapts to how you learn. If you paste a homework problem, expect guiding questions, not a finished answer to copy.",
+  },
+  {
+    q: 'How is this different from just using ChatGPT?',
+    a: "A general chatbot forgets you the moment you close the tab. Sapling maps what you know, remembers what you struggled with, schedules reviews before you forget, and grounds itself in your actual course materials. It's a study system, not a conversation.",
+  },
+  {
+    q: 'Won’t I become dependent on the AI?',
+    a: 'We built Sapling to make you less dependent over time. Mastery only turns green when you can demonstrate understanding, and TeachBack literally requires you to explain concepts yourself. The goal is that you walk into the exam without us.',
+  },
+  {
+    q: 'What happens to my notes and documents?',
+    a: 'They stay yours. Uploads, notes, and messages are encrypted at rest (AES-256), used only to build your graph and study materials, and never sold or used to train outside models. Delete a document and its data goes with it.',
+  },
+  {
+    q: 'Are tools like Sapling allowed in my classes?',
+    a: "Sapling is a study aid, the same category as flashcards, tutoring, or a study group. It doesn't produce submittable work. That said, every course sets its own rules, so check your syllabus; our stance on academic integrity is in the Journal.",
+  },
+  {
+    q: 'What does it cost?',
+    a: "Nothing during beta. Beta testers get every feature free while we build, and a say in what we build next. Join the list below and you're in line.",
+  },
+  {
+    q: 'What if the AI gets something wrong?',
+    a: 'It can, which is why Sapling grounds answers in your uploaded course materials and shows its reasoning instead of just a verdict. You stay the judge. Spot an error? Flag it in one click and the tutor corrects course.',
+  },
+];
+
+export interface PostMeta {
+  /** Image-slot persistence key. Must stay distinct per slot. */
+  slot: string;
+  /** Public-dir path, or '' when the card renders a graph instead. */
+  src: string;
+  slotHint: string;
+  isPhoto: boolean;
+  isGraph: boolean;
+  comments: number;
+  likes: number;
+  /** Negative delays desynchronise the three cards' float loops. */
+  floatDelay: string;
+}
+
+/**
+ * Presentation metadata paired positionally with POSTS.
+ *
+ * NOTE: `journal-founding.png` and `journal-ai-homework.png` are not in
+ * `public/` yet — both exceed the design API's 256 KiB read cap, so they
+ * ship with the project export alongside the rest of the source.
+ */
+export const POST_META: PostMeta[] = [
+  {
+    slot: 'journal-1',
+    src: '/journal-founding.png',
+    slotHint: 'Drop the founding photo',
+    isPhoto: true,
+    isGraph: false,
+    comments: 12,
+    likes: 84,
+    floatDelay: '0s',
+  },
+  {
+    slot: 'journal-2',
+    src: '/journal-ai-homework.png',
+    slotHint: 'Drop an image for this essay',
+    isPhoto: true,
+    isGraph: false,
+    comments: 31,
+    likes: 126,
+    floatDelay: '-2.5s',
+  },
+  {
+    slot: 'journal-3',
+    src: '',
+    slotHint: '',
+    isPhoto: false,
+    isGraph: true,
+    comments: 8,
+    likes: 57,
+    floatDelay: '-5s',
+  },
+];
+
+export interface Post {
+  tag: string;
+  date: string;
+  title: string;
+  time: string;
+  excerpt: string;
+}
+
+export const POSTS: Post[] = [
+  {
+    tag: 'Founding',
+    date: 'JUN 2026',
+    title: 'Why we built Sapling',
+    time: '6 MIN',
+    excerpt:
+      'Four students, one library table, and a nagging question: what if AI made you understand more, not less? The origin story, missteps included.',
+  },
+  {
+    tag: 'Perspective',
+    date: 'MAY 2026',
+    title: 'AI shouldn’t do your homework',
+    time: '4 MIN',
+    excerpt:
+      'Our line in the sand on AI and education: guidance over answers, process over shortcuts, and why "just give me the solution" is the wrong deal.',
+  },
+  {
+    tag: 'Under the hood',
+    date: 'APR 2026',
+    title: 'How the knowledge graph works',
+    time: '7 MIN',
+    excerpt:
+      'Nodes, edges, and mastery scores: how a semester of studying becomes a living map, and what your graph knows that your transcript doesn’t.',
+  },
+];
diff --git a/frontend/src/lib/landing/course.ts b/frontend/src/lib/landing/course.ts
new file mode 100644
index 00000000..c0246f4c
--- /dev/null
+++ b/frontend/src/lib/landing/course.ts
@@ -0,0 +1,396 @@
+/**
+ * The one hard-coded course graph the whole v4 landing page is built on.
+ *
+ * Ported verbatim from `Sapling Landing v4.dc.html`. This is not decorative
+ * filler: Act I's projected 3D graph, explore mode, and the gallery all
+ * render this same data. Seven units, 42 concepts (7 topics x 5 subs, plus
+ * the 7 topic nodes themselves), each carrying a mastery tier and score.
+ *
+ * Node positions (`at`) are authored in the source's own 3D space and are
+ * projected to screen space by the scroll engine — treat them as fixed
+ * layout, not as tunable values.
+ */
+
+export type MasteryTier = 'mastered' | 'learning' | 'struggling' | 'unexplored';
+
+/**
+ * The four tier colours. Non-negotiable — every act keys off these exact
+ * values.
+ *
+ * `unexplored` is byte-identical to the app's `--state-neutral` /
+ * `--fallback-muted` (#9a9a9a) today, but it is kept literal here for the
+ * same reason `--fallback-muted` exists in globals.css: it is a distinct
+ * concept, so a future change to the app's neutral state must not silently
+ * move a landing-page mastery tier.
+ */
+export const XTIER: Record<MasteryTier, string> = {
+  mastered: '#0E9E5A',
+  learning: '#4FA574',
+  struggling: '#E27A63',
+  unexplored: '#9a9a9a',
+};
+
+export const XTIER_LABEL: Record<MasteryTier, string> = {
+  mastered: 'Mastered',
+  learning: 'Learning',
+  struggling: 'Struggling',
+  unexplored: 'Unexplored',
+};
+
+/** Legend / filter order. Deliberately best-to-worst, not alphabetical. */
+export const XTIER_ORDER: MasteryTier[] = ['mastered', 'learning', 'struggling', 'unexplored'];
+
+/** Anything the graph can render a mastery ring for. */
+export interface GraphNode {
+  label: string;
+  tier: MasteryTier;
+  /** 0..1. Drives the ring fill and the review queue position. */
+  mastery: number;
+  blurb: string;
+}
+
+export type SubTopic = GraphNode;
+
+export interface Topic extends GraphNode {
+  /** Authored position in the source's 3D space: [x, y, z]. */
+  at: [number, number, number];
+  subs: SubTopic[];
+}
+
+export interface Course {
+  code: string;
+  name: string;
+  term: string;
+  blurb: string;
+  topics: Topic[];
+}
+
+export const COURSE: Course = {
+  code: 'CS 112',
+  name: 'Data Structures & Algorithms',
+  term: 'FALL 2026',
+  blurb:
+    'Everything your syllabus, uploads, and sessions have taught Sapling about this course: 42 concepts across 7 units.',
+  topics: [
+    {
+      label: 'Trees',
+      tier: 'learning',
+      mastery: 0.61,
+      at: [-430, -170, 90],
+      blurb: 'Hierarchies with a single root, the shape half this course reduces to.',
+      subs: [
+        {
+          label: 'Binary search trees',
+          tier: 'mastered',
+          mastery: 0.91,
+          blurb: 'Ordered structure: everything left is smaller, everything right is larger.',
+        },
+        {
+          label: 'AVL rotations',
+          tier: 'struggling',
+          mastery: 0.24,
+          blurb: 'Four cases, LL, LR, RL and RR, that restore height balance after an insert.',
+        },
+        {
+          label: 'Red-black trees',
+          tier: 'struggling',
+          mastery: 0.19,
+          blurb: 'Balance amortized through color invariants instead of strict height.',
+        },
+        {
+          label: 'Traversals',
+          tier: 'mastered',
+          mastery: 0.88,
+          blurb: 'In-order, pre-order, post-order: each reads the same tree differently.',
+        },
+        {
+          label: 'Heaps',
+          tier: 'learning',
+          mastery: 0.57,
+          blurb: 'Partial order that makes the extreme element O(1) to find.',
+        },
+      ],
+    },
+    {
+      label: 'Graphs',
+      tier: 'learning',
+      mastery: 0.54,
+      at: [70, -300, -150],
+      blurb: 'Nodes and edges with no root, so traversal order becomes a real choice.',
+      subs: [
+        {
+          label: 'BFS',
+          tier: 'mastered',
+          mastery: 0.86,
+          blurb: 'Level-by-level with a queue; shortest path on unweighted edges.',
+        },
+        {
+          label: 'DFS',
+          tier: 'mastered',
+          mastery: 0.82,
+          blurb: 'Follow one path to exhaustion, by recursion or an explicit stack.',
+        },
+        {
+          label: 'Dijkstra',
+          tier: 'learning',
+          mastery: 0.48,
+          blurb: 'Greedy shortest path with a priority queue; no negative edges.',
+        },
+        {
+          label: 'Topological sort',
+          tier: 'struggling',
+          mastery: 0.27,
+          blurb: 'Linear order on a DAG where every edge points forward.',
+        },
+        {
+          label: 'Union-find',
+          tier: 'unexplored',
+          mastery: 0.04,
+          blurb: 'Disjoint sets with path compression, the backbone of Kruskal.',
+        },
+      ],
+    },
+    {
+      label: 'Sorting',
+      tier: 'mastered',
+      mastery: 0.79,
+      at: [470, -130, 60],
+      blurb: 'Comparison sorts, their trade-offs, and the n log n lower bound.',
+      subs: [
+        {
+          label: 'Merge sort',
+          tier: 'mastered',
+          mastery: 0.93,
+          blurb: 'Divide, sort halves, merge: stable and reliably n log n.',
+        },
+        {
+          label: 'Quick sort',
+          tier: 'mastered',
+          mastery: 0.84,
+          blurb: 'Partition around a pivot; fast in practice, quadratic in the worst case.',
+        },
+        {
+          label: 'Heap sort',
+          tier: 'learning',
+          mastery: 0.63,
+          blurb: 'Build a heap, then extract repeatedly: in place, not stable.',
+        },
+        {
+          label: 'Counting sort',
+          tier: 'learning',
+          mastery: 0.55,
+          blurb: 'Beats the comparison bound by not comparing at all.',
+        },
+        {
+          label: 'Stability',
+          tier: 'mastered',
+          mastery: 0.8,
+          blurb: 'Whether equal keys keep their original relative order.',
+        },
+      ],
+    },
+    {
+      label: 'Recursion',
+      tier: 'struggling',
+      mastery: 0.33,
+      at: [-140, 300, 210],
+      blurb: 'Your weakest unit. Base cases and stack depth account for most misses.',
+      subs: [
+        {
+          label: 'Base cases',
+          tier: 'struggling',
+          mastery: 0.31,
+          blurb: 'The stopping condition; get it wrong and everything else is noise.',
+        },
+        {
+          label: 'Call stack depth',
+          tier: 'struggling',
+          mastery: 0.22,
+          blurb: 'Every frame costs memory, which is why deep recursion overflows.',
+        },
+        {
+          label: 'Backtracking',
+          tier: 'learning',
+          mastery: 0.5,
+          blurb: 'Try, recurse, undo: search that explores and retracts.',
+        },
+        {
+          label: 'Memoization',
+          tier: 'learning',
+          mastery: 0.58,
+          blurb: 'Cache subproblem answers so the same work never repeats.',
+        },
+        {
+          label: 'Tail calls',
+          tier: 'unexplored',
+          mastery: 0.06,
+          blurb: 'When the recursive call is last, the frame can be reused.',
+        },
+      ],
+    },
+    {
+      label: 'Complexity',
+      tier: 'learning',
+      mastery: 0.66,
+      at: [490, 160, -190],
+      blurb: 'How cost grows, the vocabulary the rest of the course argues in.',
+      subs: [
+        {
+          label: 'Big-O notation',
+          tier: 'mastered',
+          mastery: 0.9,
+          blurb: 'Upper bound on growth, constants discarded.',
+        },
+        {
+          label: 'Recurrences',
+          tier: 'learning',
+          mastery: 0.52,
+          blurb: 'Cost expressed in terms of itself; solve to get a closed form.',
+        },
+        {
+          label: 'Master theorem',
+          tier: 'struggling',
+          mastery: 0.29,
+          blurb: 'A shortcut for divide-and-conquer recurrences in three cases.',
+        },
+        {
+          label: 'Amortized analysis',
+          tier: 'learning',
+          mastery: 0.61,
+          blurb: 'Average over a sequence, which is why a doubling array is still O(1).',
+        },
+        {
+          label: 'Lower bounds',
+          tier: 'unexplored',
+          mastery: 0.08,
+          blurb: 'Proving no algorithm can do better, not just that yours does not.',
+        },
+      ],
+    },
+    {
+      label: 'Hashing',
+      tier: 'learning',
+      mastery: 0.59,
+      at: [230, 250, 140],
+      blurb: 'Constant-time lookup, paid for with a good hash and collision policy.',
+      subs: [
+        {
+          label: 'Hash maps',
+          tier: 'mastered',
+          mastery: 0.87,
+          blurb: 'Key to bucket in one step; the workhorse of the course.',
+        },
+        {
+          label: 'Collision handling',
+          tier: 'struggling',
+          mastery: 0.26,
+          blurb: 'Chaining versus open addressing: space traded for locality.',
+        },
+        {
+          label: 'Load factor',
+          tier: 'learning',
+          mastery: 0.54,
+          blurb: 'Occupancy ratio that triggers a resize before probes get long.',
+        },
+        {
+          label: 'Bloom filters',
+          tier: 'unexplored',
+          mastery: 0.03,
+          blurb: 'Probabilistic membership: false positives, never false negatives.',
+        },
+        {
+          label: 'LRU cache',
+          tier: 'learning',
+          mastery: 0.47,
+          blurb: 'Hash map plus a linked list, for eviction in O(1).',
+        },
+      ],
+    },
+    {
+      label: 'Dynamic programming',
+      tier: 'struggling',
+      mastery: 0.36,
+      at: [-300, 150, -260],
+      blurb: 'Overlapping subproblems solved once. Most students fight the table, not the idea.',
+      subs: [
+        {
+          label: 'Optimal substructure',
+          tier: 'learning',
+          mastery: 0.49,
+          blurb: 'The property that makes DP legal in the first place.',
+        },
+        {
+          label: 'Knapsack',
+          tier: 'struggling',
+          mastery: 0.28,
+          blurb: 'Weight-capacity table; the canonical two-dimensional DP.',
+        },
+        {
+          label: 'Edit distance',
+          tier: 'struggling',
+          mastery: 0.21,
+          blurb: 'Insert, delete, substitute: string alignment as a grid.',
+        },
+        {
+          label: 'Longest subsequence',
+          tier: 'learning',
+          mastery: 0.44,
+          blurb: 'Order-preserving, not contiguous, and that is the distinction people miss.',
+        },
+        {
+          label: 'Greedy vs DP',
+          tier: 'unexplored',
+          mastery: 0.05,
+          blurb: 'When a local choice is provably safe, and when it is not.',
+        },
+      ],
+    },
+  ],
+};
+
+export interface NodeUse {
+  tag: string;
+  text: string;
+}
+
+/**
+ * What the product actually does with a node — the three panels explore
+ * mode shows when you select one. Copy is tier-dependent, so a mastered
+ * node and an unexplored node say genuinely different things.
+ *
+ * @param degree Number of neighbours the node is linked to.
+ */
+export function nodeUses(node: GraphNode, degree: number): NodeUse[] {
+  const t = node.tier;
+  return [
+    {
+      tag: 'TUTOR RETRIEVAL',
+      text:
+        'A /learn session on ' +
+        node.label +
+        ' pulls this node plus its ' +
+        degree +
+        ' neighbours into context, then retrieves the chunks of your ' +
+        COURSE.code +
+        ' uploads that mention them.',
+    },
+    {
+      tag: 'QUIZ TARGETING',
+      text:
+        t === 'mastered'
+          ? 'Adaptive quizzes spend few questions here. It is already above the 0.75 mastery cut-off, so the generator spends them on weaker nodes.'
+          : 'POST /api/quiz/generate takes this node id. Every answer writes a mastery delta back onto it, which moves the ring you are looking at.',
+    },
+    {
+      tag: t === 'unexplored' ? 'NOT SCHEDULED YET' : 'REVIEW SCHEDULING',
+      text:
+        t === 'unexplored'
+          ? 'Nothing has touched this node yet. It appears the moment a note, upload, or quiz mentions the concept.'
+          : 'Spaced repetition draws cards from the lowest-mastery linked concepts first, and at ' +
+            Math.round(node.mastery * 100) +
+            '% this sits ' +
+            (node.mastery < 0.45 ? 'near the front' : 'mid-queue') +
+            '.',
+    },
+  ];
+}
diff --git a/frontend/src/lib/landing/dragClusters.ts b/frontend/src/lib/landing/dragClusters.ts
new file mode 100644
index 00000000..97cea94d
--- /dev/null
+++ b/frontend/src/lib/landing/dragClusters.ts
@@ -0,0 +1,662 @@
+/**
+ * The draggable course clusters that float over the lower sections.
+ *
+ * Extracted from the v5 design component, where each cluster is ~2KB of
+ * hand-written inline SVG, repeated eight times. The geometry is the same
+ * shape in every one -- a course puck, two or three concept nodes, and the
+ * edges between them -- so it lives here as data and is drawn by a single
+ * component.
+ *
+ * The oversized svg box and its negative margin are deliberate: the sim
+ * throws nodes well outside the nominal bounds when dragged, and a tight
+ * viewBox would clip them mid-flight.
+ */
+
+export interface ClusterNode { cx: number; cy: number; r: number; fo: number; sw: number }
+export interface ClusterLabel { text: string; x: number; y: number }
+export interface ClusterLine { x1: number; y1: number; x2: number; y2: number; w: number }
+
+export interface DragCluster {
+  id: number;
+  /** Which section's field this cluster belongs to. */
+  section: 'act-tutor' | 'faq' | 'newsletter' | 'cta';
+  pos: { left?: string; right?: string; top?: string; bottom?: string };
+  /** The float keyframe, negative delay already baked in. */
+  anim: string;
+  color: string;
+  code: string;
+  svg: { w: number; h: number; vb: string };
+  /** Where the course code sits. */
+  codeAt: [number, number];
+  nodes: ClusterNode[];
+  labels: ClusterLabel[];
+  lines: ClusterLine[];
+}
+
+export const DRAG_CLUSTERS: DragCluster[] = [
+  {
+    "id": 2,
+    "section": "act-tutor",
+    "pos": {
+      "right": "6px",
+      "top": "20%"
+    },
+    "anim": "nodeFloatA 21s ease-in-out -5.4s infinite",
+    "color": "hsl(212 42% 42%)",
+    "code": "MA 242",
+    "svg": {
+      "w": 1974,
+      "h": 3418,
+      "vb": "-900 -1600 1974 3418"
+    },
+    "codeAt": [
+      76.0,
+      77.0
+    ],
+    "nodes": [
+      {
+        "cx": 76.0,
+        "cy": 44.0,
+        "r": 18.0,
+        "fo": 0.78,
+        "sw": 2.5
+      },
+      {
+        "cx": 106.0,
+        "cy": 104.0,
+        "r": 10.2,
+        "fo": 0.55,
+        "sw": 1.5
+      },
+      {
+        "cx": 130.0,
+        "cy": 162.0,
+        "r": 7.5,
+        "fo": 0.28,
+        "sw": 1.5
+      },
+      {
+        "cx": 44.0,
+        "cy": 100.0,
+        "r": 11.9,
+        "fo": 0.78,
+        "sw": 1.5
+      }
+    ],
+    "labels": [
+      {
+        "text": "Eigenvalues",
+        "x": 106.0,
+        "y": 126.2
+      },
+      {
+        "text": "Diagonalize",
+        "x": 130.0,
+        "y": 181.4
+      },
+      {
+        "text": "Determinants",
+        "x": 44.0,
+        "y": 124.0
+      }
+    ],
+    "lines": [
+      {
+        "x1": 76.0,
+        "y1": 44.0,
+        "x2": 106.0,
+        "y2": 104.0,
+        "w": 1.52
+      },
+      {
+        "x1": 106.0,
+        "y1": 104.0,
+        "x2": 130.0,
+        "y2": 162.0,
+        "w": 1.04
+      },
+      {
+        "x1": 76.0,
+        "y1": 44.0,
+        "x2": 44.0,
+        "y2": 100.0,
+        "w": 1.28
+      }
+    ]
+  },
+  {
+    "id": 3,
+    "section": "act-tutor",
+    "pos": {
+      "left": "6px",
+      "top": "64%"
+    },
+    "anim": "nodeFloatB 24s ease-in-out -8.100000000000001s infinite",
+    "color": "hsl(58 44% 38%)",
+    "code": "ME 218",
+    "svg": {
+      "w": 1940,
+      "h": 3416,
+      "vb": "-900 -1600 1940 3416"
+    },
+    "codeAt": [
+      96.0,
+      77.0
+    ],
+    "nodes": [
+      {
+        "cx": 96.0,
+        "cy": 44.0,
+        "r": 18.0,
+        "fo": 0.78,
+        "sw": 2.5
+      },
+      {
+        "cx": 66.0,
+        "cy": 102.0,
+        "r": 12.2,
+        "fo": 0.78,
+        "sw": 1.5
+      },
+      {
+        "cx": 44.0,
+        "cy": 160.0,
+        "r": 14.6,
+        "fo": 1.0,
+        "sw": 1.5
+      }
+    ],
+    "labels": [
+      {
+        "text": "Free-body",
+        "x": 66.0,
+        "y": 126.2
+      },
+      {
+        "text": "Statics",
+        "x": 44.0,
+        "y": 186.6
+      }
+    ],
+    "lines": [
+      {
+        "x1": 96.0,
+        "y1": 44.0,
+        "x2": 66.0,
+        "y2": 102.0,
+        "w": 1.46
+      },
+      {
+        "x1": 66.0,
+        "y1": 102.0,
+        "x2": 44.0,
+        "y2": 160.0,
+        "w": 1.22
+      }
+    ]
+  },
+  {
+    "id": 4,
+    "section": "faq",
+    "pos": {
+      "left": "6px",
+      "top": "18%"
+    },
+    "anim": "nodeFloatA 15s ease-in-out -10.8s infinite",
+    "color": "hsl(150 46% 34%)",
+    "code": "CS 112",
+    "svg": {
+      "w": 1972,
+      "h": 3418,
+      "vb": "-900 -1600 1972 3418"
+    },
+    "codeAt": [
+      96.0,
+      77.0
+    ],
+    "nodes": [
+      {
+        "cx": 96.0,
+        "cy": 44.0,
+        "r": 18.0,
+        "fo": 1.0,
+        "sw": 2.5
+      },
+      {
+        "cx": 66.0,
+        "cy": 104.0,
+        "r": 9.7,
+        "fo": 0.55,
+        "sw": 1.5
+      },
+      {
+        "cx": 44.0,
+        "cy": 162.0,
+        "r": 7.5,
+        "fo": 0.28,
+        "sw": 1.5
+      },
+      {
+        "cx": 128.0,
+        "cy": 100.0,
+        "r": 12.4,
+        "fo": 0.78,
+        "sw": 1.5
+      }
+    ],
+    "labels": [
+      {
+        "text": "Recursion",
+        "x": 66.0,
+        "y": 125.7
+      },
+      {
+        "text": "Memoize",
+        "x": 44.0,
+        "y": 181.4
+      },
+      {
+        "text": "Heaps",
+        "x": 128.0,
+        "y": 124.4
+      }
+    ],
+    "lines": [
+      {
+        "x1": 96.0,
+        "y1": 44.0,
+        "x2": 66.0,
+        "y2": 104.0,
+        "w": 1.46
+      },
+      {
+        "x1": 66.0,
+        "y1": 104.0,
+        "x2": 44.0,
+        "y2": 162.0,
+        "w": 1.1
+      },
+      {
+        "x1": 96.0,
+        "y1": 44.0,
+        "x2": 128.0,
+        "y2": 100.0,
+        "w": 1.34
+      }
+    ]
+  },
+  {
+    "id": 5,
+    "section": "faq",
+    "pos": {
+      "right": "6px",
+      "bottom": "14%"
+    },
+    "anim": "nodeFloatB 18s ease-in-out -13.5s infinite",
+    "color": "hsl(272 34% 46%)",
+    "code": "PH 150",
+    "svg": {
+      "w": 1940,
+      "h": 3416,
+      "vb": "-900 -1600 1940 3416"
+    },
+    "codeAt": [
+      44.0,
+      77.0
+    ],
+    "nodes": [
+      {
+        "cx": 44.0,
+        "cy": 44.0,
+        "r": 18.0,
+        "fo": 1.0,
+        "sw": 2.5
+      },
+      {
+        "cx": 74.0,
+        "cy": 102.0,
+        "r": 14.6,
+        "fo": 1.0,
+        "sw": 1.5
+      },
+      {
+        "cx": 96.0,
+        "cy": 160.0,
+        "r": 11.5,
+        "fo": 0.78,
+        "sw": 1.5
+      }
+    ],
+    "labels": [
+      {
+        "text": "Utilitarian",
+        "x": 74.0,
+        "y": 128.7
+      },
+      {
+        "text": "Trolley",
+        "x": 96.0,
+        "y": 183.5
+      }
+    ],
+    "lines": [
+      {
+        "x1": 44.0,
+        "y1": 44.0,
+        "x2": 74.0,
+        "y2": 102.0,
+        "w": 1.34
+      },
+      {
+        "x1": 74.0,
+        "y1": 102.0,
+        "x2": 96.0,
+        "y2": 160.0,
+        "w": 1.1
+      }
+    ]
+  },
+  {
+    "id": 6,
+    "section": "newsletter",
+    "pos": {
+      "right": "6px",
+      "top": "20%"
+    },
+    "anim": "nodeFloatA 21s ease-in-out -16.200000000000003s infinite",
+    "color": "hsl(96 40% 38%)",
+    "code": "BI 108",
+    "svg": {
+      "w": 1942,
+      "h": 3418,
+      "vb": "-900 -1600 1942 3418"
+    },
+    "codeAt": [
+      44.0,
+      77.0
+    ],
+    "nodes": [
+      {
+        "cx": 44.0,
+        "cy": 44.0,
+        "r": 18.0,
+        "fo": 0.78,
+        "sw": 2.5
+      },
+      {
+        "cx": 74.0,
+        "cy": 104.0,
+        "r": 12.4,
+        "fo": 0.78,
+        "sw": 1.5
+      },
+      {
+        "cx": 98.0,
+        "cy": 162.0,
+        "r": 9.5,
+        "fo": 0.55,
+        "sw": 1.5
+      }
+    ],
+    "labels": [
+      {
+        "text": "Meiosis",
+        "x": 74.0,
+        "y": 128.4
+      },
+      {
+        "text": "Crossover",
+        "x": 98.0,
+        "y": 183.5
+      }
+    ],
+    "lines": [
+      {
+        "x1": 44.0,
+        "y1": 44.0,
+        "x2": 74.0,
+        "y2": 104.0,
+        "w": 1.34
+      },
+      {
+        "x1": 74.0,
+        "y1": 104.0,
+        "x2": 98.0,
+        "y2": 162.0,
+        "w": 1.16
+      }
+    ]
+  },
+  {
+    "id": 7,
+    "section": "newsletter",
+    "pos": {
+      "left": "6px",
+      "bottom": "16%"
+    },
+    "anim": "nodeFloatB 24s ease-in-out -18.900000000000002s infinite",
+    "color": "hsl(240 28% 50%)",
+    "code": "WR 120",
+    "svg": {
+      "w": 1940,
+      "h": 3416,
+      "vb": "-900 -1600 1940 3416"
+    },
+    "codeAt": [
+      96.0,
+      77.0
+    ],
+    "nodes": [
+      {
+        "cx": 96.0,
+        "cy": 44.0,
+        "r": 18.0,
+        "fo": 1.0,
+        "sw": 2.5
+      },
+      {
+        "cx": 66.0,
+        "cy": 102.0,
+        "r": 14.7,
+        "fo": 1.0,
+        "sw": 1.5
+      },
+      {
+        "cx": 44.0,
+        "cy": 160.0,
+        "r": 11.7,
+        "fo": 0.78,
+        "sw": 1.5
+      }
+    ],
+    "labels": [
+      {
+        "text": "Thesis",
+        "x": 66.0,
+        "y": 128.7
+      },
+      {
+        "text": "Counterarg.",
+        "x": 44.0,
+        "y": 183.7
+      }
+    ],
+    "lines": [
+      {
+        "x1": 96.0,
+        "y1": 44.0,
+        "x2": 66.0,
+        "y2": 102.0,
+        "w": 1.34
+      },
+      {
+        "x1": 66.0,
+        "y1": 102.0,
+        "x2": 44.0,
+        "y2": 160.0,
+        "w": 1.1
+      }
+    ]
+  },
+  {
+    "id": 8,
+    "section": "cta",
+    "pos": {
+      "left": "10px",
+      "top": "20%"
+    },
+    "anim": "nodeFloatA 15s ease-in-out -21.6s infinite",
+    "color": "hsl(28 52% 42%)",
+    "code": "PY 205",
+    "svg": {
+      "w": 1974,
+      "h": 3414,
+      "vb": "-900 -1600 1974 3414"
+    },
+    "codeAt": [
+      74.0,
+      77.0
+    ],
+    "nodes": [
+      {
+        "cx": 74.0,
+        "cy": 44.0,
+        "r": 18.0,
+        "fo": 0.78,
+        "sw": 2.5
+      },
+      {
+        "cx": 44.0,
+        "cy": 104.0,
+        "r": 9.3,
+        "fo": 0.55,
+        "sw": 1.5
+      },
+      {
+        "cx": 106.0,
+        "cy": 100.0,
+        "r": 15.1,
+        "fo": 1.0,
+        "sw": 1.5
+      },
+      {
+        "cx": 130.0,
+        "cy": 158.0,
+        "r": 11.9,
+        "fo": 0.78,
+        "sw": 1.5
+      }
+    ],
+    "labels": [
+      {
+        "text": "Torque",
+        "x": 44.0,
+        "y": 125.3
+      },
+      {
+        "text": "Kinematics",
+        "x": 106.0,
+        "y": 127.1
+      },
+      {
+        "text": "Momentum",
+        "x": 130.0,
+        "y": 181.9
+      }
+    ],
+    "lines": [
+      {
+        "x1": 74.0,
+        "y1": 44.0,
+        "x2": 44.0,
+        "y2": 104.0,
+        "w": 1.4
+      },
+      {
+        "x1": 74.0,
+        "y1": 44.0,
+        "x2": 106.0,
+        "y2": 100.0,
+        "w": 1.22
+      },
+      {
+        "x1": 106.0,
+        "y1": 100.0,
+        "x2": 130.0,
+        "y2": 158.0,
+        "w": 1.1
+      }
+    ]
+  },
+  {
+    "id": 9,
+    "section": "cta",
+    "pos": {
+      "right": "10px",
+      "bottom": "18%"
+    },
+    "anim": "nodeFloatB 18s ease-in-out -24.3s infinite",
+    "color": "hsl(0 38% 46%)",
+    "code": "HI 210",
+    "svg": {
+      "w": 1940,
+      "h": 3416,
+      "vb": "-900 -1600 1940 3416"
+    },
+    "codeAt": [
+      44.0,
+      77.0
+    ],
+    "nodes": [
+      {
+        "cx": 44.0,
+        "cy": 44.0,
+        "r": 18.0,
+        "fo": 0.55,
+        "sw": 2.5
+      },
+      {
+        "cx": 74.0,
+        "cy": 102.0,
+        "r": 9.0,
+        "fo": 0.55,
+        "sw": 1.5
+      },
+      {
+        "cx": 96.0,
+        "cy": 160.0,
+        "r": 7.5,
+        "fo": 0.28,
+        "sw": 1.5
+      }
+    ],
+    "labels": [
+      {
+        "text": "Reconstruction",
+        "x": 74.0,
+        "y": 123.0
+      },
+      {
+        "text": "Reform acts",
+        "x": 96.0,
+        "y": 179.4
+      }
+    ],
+    "lines": [
+      {
+        "x1": 44.0,
+        "y1": 44.0,
+        "x2": 74.0,
+        "y2": 102.0,
+        "w": 1.46
+      },
+      {
+        "x1": 74.0,
+        "y1": 102.0,
+        "x2": 96.0,
+        "y2": 160.0,
+        "w": 1.04
+      }
+    ]
+  }
+] as DragCluster[];
diff --git a/frontend/src/lib/landing/engine/ambient.ts b/frontend/src/lib/landing/engine/ambient.ts
new file mode 100644
index 00000000..41337d3a
--- /dev/null
+++ b/frontend/src/lib/landing/engine/ambient.ts
@@ -0,0 +1,111 @@
+/**
+ * Ambient constellation — the fixed z-index:-1 canvas behind everything.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. Fades in past half a viewport of
+ * scroll, then drifts on a parallax depth per node with a little mouse pull.
+ * Nodes wrap vertically, so the field is endless without ever reallocating.
+ */
+
+import { cv } from './dom';
+
+const PALETTE = ['#0E9E5A', '#4FA574', '#8FD9A8', '#0C5638', '#9CA3AF'];
+
+/** Squared link distance — 110px, pre-squared to keep it out of the loop. */
+const LINK_D2 = 12100;
+const LINK_D = 110;
+
+export interface AmbientNode {
+  /** Fractional position across the viewport. */
+  fx: number;
+  fy: number;
+  /** Parallax depth, 0.15..0.6. */
+  depth: number;
+  r: number;
+  color: string;
+  seed: number;
+  /** A few render as leaves rather than dots. */
+  leaf: boolean;
+}
+
+export interface Mouse {
+  x: number;
+  y: number;
+}
+
+export interface AmbientField {
+  nodes: AmbientNode[];
+  draw(canvas: HTMLCanvasElement, sy: number, vh: number, mouse: Mouse): void;
+}
+
+export function createAmbient(): AmbientField {
+  const nodes: AmbientNode[] = Array.from({ length: 46 }, () => ({
+    fx: Math.random(),
+    fy: Math.random() * 1.15 - 0.05,
+    depth: 0.15 + Math.random() * 0.45,
+    r: 1.4 + Math.random() * 2.6,
+    color: PALETTE[Math.floor(Math.random() * PALETTE.length)],
+    seed: Math.random() * 100,
+    leaf: Math.random() < 0.14,
+  }));
+
+  function draw(canvas: HTMLCanvasElement, sy: number, vh: number, mouse: Mouse): void {
+    const c = cv(canvas);
+    const { ctx, w, h } = c;
+    ctx.clearRect(0, 0, w, h);
+
+    const fade = Math.max(0, Math.min(1, (sy - vh * 0.5) / (vh * 0.5)));
+    if (fade <= 0) return;
+
+    const t = Date.now() * 0.001;
+    const mx = mouse.x;
+    const my = mouse.y;
+    const span = h + 400;
+
+    const pts = nodes.map((n) => {
+      // wrap into [-200, h+200) so nodes recycle instead of running out
+      const y = (((n.fy * span - sy * n.depth) % span) + span) % span - 200;
+      const x = n.fx * w + Math.sin(t * 0.3 + n.seed) * 14 - mx * 26 * n.depth;
+      return { x, y: y + Math.cos(t * 0.24 + n.seed) * 10 - my * 18 * n.depth, n };
+    });
+
+    ctx.lineWidth = 0.6;
+    for (let i = 0; i < pts.length; i++) {
+      for (let j = i + 1; j < pts.length; j++) {
+        const dx = pts[i].x - pts[j].x;
+        const dy = pts[i].y - pts[j].y;
+        if (dx * dx + dy * dy < LINK_D2) {
+          const d = Math.sqrt(dx * dx + dy * dy);
+          ctx.strokeStyle = 'rgba(79,165,116,' + (fade * 0.1 * (1 - d / LINK_D)).toFixed(3) + ')';
+          ctx.beginPath();
+          ctx.moveTo(pts[i].x, pts[i].y);
+          ctx.lineTo(pts[j].x, pts[j].y);
+          ctx.stroke();
+        }
+      }
+    }
+
+    pts.forEach((pt) => {
+      ctx.globalAlpha = fade * (0.2 + 0.12 * Math.sin(t * 0.8 + pt.n.seed));
+      if (pt.n.leaf) {
+        ctx.save();
+        ctx.translate(pt.x, pt.y);
+        ctx.rotate(Math.sin(t * 0.2 + pt.n.seed) * 0.6);
+        ctx.fillStyle = pt.n.color;
+        ctx.beginPath();
+        ctx.moveTo(0, -5);
+        ctx.quadraticCurveTo(4.5, -1, 0, 6);
+        ctx.quadraticCurveTo(-4.5, -1, 0, -5);
+        ctx.fill();
+        ctx.restore();
+      } else {
+        ctx.beginPath();
+        ctx.arc(pt.x, pt.y, pt.n.r, 0, Math.PI * 2);
+        ctx.fillStyle = pt.n.color;
+        ctx.fill();
+      }
+    });
+    ctx.globalAlpha = 1;
+  }
+
+  return { nodes, draw };
+}
diff --git a/frontend/src/lib/landing/engine/dom.ts b/frontend/src/lib/landing/engine/dom.ts
new file mode 100644
index 00000000..ff26bb07
--- /dev/null
+++ b/frontend/src/lib/landing/engine/dom.ts
@@ -0,0 +1,92 @@
+/**
+ * DOM write helpers for the landing engine.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. Everything here runs inside the
+ * frame loop, so the rules are strict: no layout reads, and no DOM write
+ * unless the value actually changed.
+ */
+
+/** Anything the engine writes styles to. */
+type Styled = HTMLElement | SVGElement;
+
+/**
+ * Memoised style write. Caches the last value on the element itself under
+ * `__p_<prop>` and skips the assignment when nothing changed — an unchanged
+ * value never touches the DOM, which is what keeps the per-frame cost flat
+ * across the ~200 elements the engine drives.
+ *
+ * Accepts both camelCase (`pointerEvents`) and dashed (`text-shadow`)
+ * property names, matching the source's mixed usage.
+ */
+export function put(el: Styled | null | undefined, prop: string, val: string): void {
+  if (!el) return;
+  const k = '__p_' + prop;
+  const rec = el as unknown as Record<string, unknown>;
+  if (rec[k] === val) return;
+  rec[k] = val;
+  if (prop.includes('-')) el.style.setProperty(prop, val);
+  else (el.style as unknown as Record<string, string>)[prop] = val;
+}
+
+export interface CanvasCache {
+  ctx: CanvasRenderingContext2D;
+  /** CSS pixels, not device pixels. */
+  w: number;
+  h: number;
+  dpr: number;
+}
+
+/**
+ * Cached 2D context + size for a canvas, keyed on the element.
+ *
+ * The size is read once and reused; `invalidateCanvas` drops the cache when
+ * the viewport changes (called from the measure pass, never per frame). DPR
+ * is capped at 1.5 — above that the fill rate cost outweighs the sharpness
+ * on these mostly-soft renders.
+ *
+ * Re-applies the DPR transform on every call, so callers draw in CSS pixels.
+ */
+export function cv(canvas: HTMLCanvasElement): CanvasCache {
+  const rec = canvas as unknown as Record<string, unknown>;
+  let c = rec.__cv as CanvasCache | null | undefined;
+  if (!c) {
+    const w = canvas.clientWidth;
+    const h = canvas.clientHeight;
+    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+    let ctx = rec.__ctx as CanvasRenderingContext2D | undefined;
+    if (!ctx) {
+      ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+      rec.__ctx = ctx;
+    }
+    c = { ctx, w, h, dpr };
+    rec.__cv = c;
+    const pw = Math.round(w * dpr);
+    const ph = Math.round(h * dpr);
+    // Assigning width/height clears the canvas, so only do it when it moved.
+    if (canvas.width !== pw || canvas.height !== ph) {
+      canvas.width = pw;
+      canvas.height = ph;
+    }
+  }
+  c.ctx.setTransform(c.dpr, 0, 0, c.dpr, 0, 0);
+  return c;
+}
+
+/** Drop a canvas's cached size so the next `cv()` re-reads it. */
+export function invalidateCanvas(canvas: HTMLCanvasElement | null | undefined): void {
+  if (canvas) (canvas as unknown as Record<string, unknown>).__cv = null;
+}
+
+/**
+ * Scroll progress through a section that is taller than the viewport, as
+ * 0..1 over the distance its sticky child stays pinned.
+ *
+ * @param lag Shifts the zero point, for stages that should start late.
+ */
+export function sectionProgress(el: Element, vh: number, lag?: number): number {
+  const r = el.getBoundingClientRect();
+  const total = r.height - vh;
+  if (total <= 0) return 0;
+  const v = -(r.top + (lag || 0)) / total;
+  return Math.max(0, Math.min(1, v));
+}
diff --git a/frontend/src/lib/landing/engine/flip.ts b/frontend/src/lib/landing/engine/flip.ts
new file mode 100644
index 00000000..43625643
--- /dev/null
+++ b/frontend/src/lib/landing/engine/flip.ts
@@ -0,0 +1,102 @@
+/**
+ * FLIP transition for the feature lab — a gallery card expands into the
+ * full-bleed overlay and collapses back into the card it came from.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. Uses the Web Animations API
+ * directly (as the source does): the panel renders at its final size, then
+ * gets animated *from* the card's rect, so there is no layout thrash and the
+ * browser can run the whole thing off the main thread.
+ */
+
+const OPEN_MS = 620;
+const OPEN_EASE = 'cubic-bezier(0.22,1,0.36,1)';
+const CLOSE_MS = 460;
+const CLOSE_EASE = 'cubic-bezier(0.4,0,0.2,1)';
+/** Safety net in case `onfinish` never fires (tab backgrounded mid-close). */
+const CLOSE_FALLBACK_MS = 700;
+/** How long to wait before finishing when there is no card to fly back to. */
+const NO_FLIP_MS = 200;
+
+export interface FlipState {
+  /** The originating card's rect, captured before the overlay mounts. */
+  rect: DOMRect | null;
+  el: HTMLElement | null;
+  /** Guards against the open animation running twice for one mount. */
+  ran: boolean;
+}
+
+export function createFlipState(): FlipState {
+  return { rect: null, el: null, ran: false };
+}
+
+/** Capture the source card. Pass `null` when opening without one. */
+export function armFlip(st: FlipState, from: HTMLElement | null): void {
+  st.rect = from ? from.getBoundingClientRect() : null;
+  st.el = from;
+  st.ran = false;
+}
+
+/**
+ * The two keyframes: the panel scaled down onto the card, and the panel at
+ * rest. Returns null when there is nothing to fly from.
+ */
+export function flipFrames(st: FlipState, panel: HTMLElement): Keyframe[] | null {
+  const r = st.rect;
+  if (!r || !panel.animate) return null;
+  const p = panel.getBoundingClientRect();
+  if (!p.width || !p.height) return null;
+  const sx = Math.max(0.05, r.width / p.width);
+  const sy = Math.max(0.05, r.height / p.height);
+  return [
+    {
+      transformOrigin: 'top left',
+      transform:
+        'translate(' + (r.left - p.left) + 'px,' + (r.top - p.top) + 'px) scale(' + sx + ',' + sy + ')',
+      borderRadius: '20px',
+    },
+    { transformOrigin: 'top left', transform: 'none', borderRadius: '0px' },
+  ];
+}
+
+/** Play the card → panel expansion. Hides the card while the panel stands in. */
+export function flipOpen(st: FlipState, panel: HTMLElement): void {
+  const f = flipFrames(st, panel);
+  if (!f) return;
+  if (st.el) st.el.style.visibility = 'hidden';
+  panel.animate(f, { duration: OPEN_MS, easing: OPEN_EASE, fill: 'both' });
+}
+
+/**
+ * Play the panel → card collapse, then run `onFinish` exactly once.
+ * `onFinish` should restore body scroll and unmount the overlay.
+ */
+export function flipClose(
+  st: FlipState,
+  panel: HTMLElement | null,
+  onFinish: () => void,
+): void {
+  st.ran = false;
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    if (st.el) {
+      st.el.style.visibility = '';
+      st.el = null;
+    }
+    onFinish();
+  };
+
+  const f = panel ? flipFrames(st, panel) : null;
+  if (!f || !panel) {
+    setTimeout(finish, NO_FLIP_MS);
+    return;
+  }
+  const a = panel.animate([f[1], f[0]], {
+    duration: CLOSE_MS,
+    easing: CLOSE_EASE,
+    fill: 'both',
+  });
+  a.onfinish = finish;
+  setTimeout(finish, CLOSE_FALLBACK_MS);
+}
diff --git a/frontend/src/lib/landing/engine/graph.ts b/frontend/src/lib/landing/engine/graph.ts
new file mode 100644
index 00000000..42eb8e12
--- /dev/null
+++ b/frontend/src/lib/landing/engine/graph.ts
@@ -0,0 +1,142 @@
+/**
+ * Builds the projected 3D knowledge graph for Act I / explore mode.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. Node 0 is the course itself,
+ * anchoring the middle; each topic becomes a hub wired to it, and each hub
+ * gets its five concepts arranged on a tilted ellipse around it.
+ *
+ * `spawnAt` / `colorAt` / `drawAt` are scroll-progress thresholds baked in at
+ * build time: the reveal order is shuffled once so the graph assembles
+ * organically rather than sweeping left-to-right.
+ */
+
+import { COURSE, XTIER, type MasteryTier } from '../course';
+
+export interface GraphNode {
+  /** Authored 3D position, pre-projection. */
+  ox: number;
+  oy: number;
+  oz: number;
+  /** Base radius in CSS pixels, before projection scale. */
+  r: number;
+  label: string;
+  root?: boolean;
+  hub: boolean;
+  tier: MasteryTier;
+  mastery: number;
+  blurb: string;
+  /** The tier colour this node lerps to as it reveals. */
+  final: string;
+  /** Per-node phase offset, so the breathing/wobble never syncs up. */
+  seed: number;
+  /** Index into COURSE.topics; undefined on the root. */
+  topic?: number;
+  /** Scroll progress at which this node starts to appear. */
+  spawnAt: number;
+  /** Scroll progress at which it starts grey → tier-colour. */
+  colorAt: number;
+}
+
+export interface GraphEdge {
+  a: number;
+  b: number;
+  /** True for the hand-picked cross-unit links, which draw fainter. */
+  cross?: boolean;
+  drawAt: number;
+}
+
+export interface BuiltGraph {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+  /** Adjacency list, indexed by node. */
+  adj: number[][];
+}
+
+/** The real cross-unit dependencies, drawn fainter than structural edges. */
+const CROSS_LINKS: [string, string][] = [
+  ['Recursion', 'Traversals'],
+  ['Recursion', 'DFS'],
+  ['Memoization', 'Dynamic programming'],
+  ['Heaps', 'Dijkstra'],
+  ['Heap sort', 'Heaps'],
+  ['Complexity', 'Sorting'],
+  ['Recurrences', 'Merge sort'],
+  ['Hashing', 'Union-find'],
+  ['Optimal substructure', 'Greedy vs DP'],
+];
+
+export function buildGraph(): BuiltGraph {
+  const nodes: GraphNode[] = [];
+  const edges: GraphEdge[] = [];
+
+  // 0 = the class itself, anchoring the middle
+  nodes.push({
+    ox: 0, oy: 0, oz: 0, r: 12,
+    label: COURSE.code, root: true, hub: true,
+    tier: 'learning', mastery: 0.55, blurb: COURSE.blurb,
+    final: '#0E9E5A', seed: Math.random() * 100,
+    spawnAt: 0, colorAt: 0,
+  });
+
+  COURSE.topics.forEach((tp, ti) => {
+    const hi = nodes.length;
+    nodes.push({
+      ox: tp.at[0], oy: tp.at[1], oz: tp.at[2], r: 7.5,
+      label: tp.label, hub: true,
+      tier: tp.tier, mastery: tp.mastery, blurb: tp.blurb,
+      final: XTIER[tp.tier], seed: Math.random() * 100, topic: ti,
+      spawnAt: 0, colorAt: 0,
+    });
+    edges.push({ a: 0, b: hi, drawAt: 0 });
+
+    const tilt = ti * 0.9;
+    const R = 158;
+    tp.subs.forEach((sb, k) => {
+      const idx = nodes.length;
+      const a = (k / tp.subs.length) * Math.PI * 2 + tilt;
+      // deterministic per-index jitter, so the ring isn't a perfect circle
+      const j = 0.84 + (((k * 37) % 11) / 11) * 0.32;
+      nodes.push({
+        ox: tp.at[0] + Math.cos(a) * R * j,
+        oy: tp.at[1] + Math.sin(a) * R * 0.72 * j,
+        oz: tp.at[2] + Math.sin(a * 1.7 + tilt) * R * 0.8,
+        r: 3.2 + sb.mastery * 3.4,
+        label: sb.label, hub: false,
+        tier: sb.tier, mastery: sb.mastery, blurb: sb.blurb,
+        final: XTIER[sb.tier], seed: Math.random() * 100, topic: ti,
+        spawnAt: 0, colorAt: 0,
+      });
+      edges.push({ a: hi, b: idx, drawAt: 0 });
+      // chain every other sibling, so each ring reads as a loop not a fan
+      if (k > 0 && k % 2 === 0) edges.push({ a: idx, b: idx - 1, drawAt: 0 });
+    });
+  });
+
+  const find = (l: string) => nodes.findIndex((n) => n.label === l);
+  CROSS_LINKS.forEach(([x, y]) => {
+    const a = find(x);
+    const b = find(y);
+    if (a >= 0 && b >= 0) edges.push({ a, b, cross: true, drawAt: 0 });
+  });
+
+  // Shuffle the reveal order so the graph assembles organically.
+  const order = nodes.map((_, i) => i).sort(() => Math.random() - 0.5);
+  order.forEach((idx, k) => {
+    nodes[idx].spawnAt = 0.02 + (k / nodes.length) * 0.2;
+    nodes[idx].colorAt = 0.5 + (k / nodes.length) * 0.2;
+  });
+  // the course node always leads, whatever the shuffle said
+  nodes[0].spawnAt = 0.02;
+  nodes[0].colorAt = 0.46;
+  edges.forEach((e, k) => {
+    e.drawAt = 0.26 + (k / edges.length) * 0.2;
+  });
+
+  const adj: number[][] = nodes.map(() => []);
+  edges.forEach((e) => {
+    adj[e.a].push(e.b);
+    adj[e.b].push(e.a);
+  });
+
+  return { nodes, edges, adj };
+}
diff --git a/frontend/src/lib/landing/engine/graphView.ts b/frontend/src/lib/landing/engine/graphView.ts
new file mode 100644
index 00000000..e4274cce
--- /dev/null
+++ b/frontend/src/lib/landing/engine/graphView.ts
@@ -0,0 +1,427 @@
+/**
+ * Act I: the projected 3D knowledge graph, and the explore mode it opens into.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. Both views draw the *same* graph
+ * with the same projection; they differ only in where the camera sits and
+ * what drives the reveal.
+ *
+ *  - `drawScroll(p)`   scroll-driven. Nodes spawn and turn from grey to their
+ *                      tier colour as `p` passes their baked-in thresholds.
+ *  - `drawExplore()`   user-driven. Picks the camera up exactly where
+ *                      `drawScroll` left it (`camSnap`) and *continues* each
+ *                      node's reveal from wherever it had got to, rather than
+ *                      restarting — which is why entering explore mid-scroll
+ *                      doesn't flash.
+ *
+ * Perspective is a plain divide (`fl / (fl + z)`) with painter's-algorithm
+ * depth sorting. Deliberately not WebGL: matching the source's exact node
+ * edges and label metrics matters more than the throughput here.
+ */
+
+import { clamp01, lerpColor, smooth } from '../color';
+import { XTIER_LABEL } from '../course';
+import { cv } from './dom';
+import type { BuiltGraph, GraphNode } from './graph';
+
+/** Focal length for the perspective divide. */
+const FL = 1050;
+/** The grey every node starts as, before its tier colour bleeds in. */
+const GREY = '#7d8a84';
+
+export interface Cam {
+  rotY: number;
+  rotX: number;
+  zoom: number;
+  cx: number;
+  cy: number;
+}
+
+export interface Projected {
+  x: number;
+  y: number;
+  z: number;
+  /** Projection scale at this depth. */
+  sc: number;
+  n: GraphNode;
+  i: number;
+}
+
+export interface GraphViewState {
+  /** Free-orbit offsets, driven by pointer drag. */
+  orbX: number;
+  orbY: number;
+  actMouse: { x: number; y: number } | null;
+  /** Where the scroll camera last was — explore mode starts from here. */
+  camSnap: Cam | null;
+  lastP: number;
+
+  // explore
+  expT0: number;
+  /** True while playing the exit transition backwards. */
+  expOut: boolean;
+  expZoom: number;
+  camFrom: Cam | null;
+  /** Per-node colour/spawn progress captured at the moment explore opened. */
+  expCpFrom: number[] | null;
+  expSpFrom: number[] | null;
+  /** Radial stagger, 0..1 by distance from centre. */
+  expOrder: number[] | null;
+  expProj: Projected[] | null;
+  expHover: number | null;
+}
+
+export function createGraphViewState(): GraphViewState {
+  return {
+    orbX: 0, orbY: 0, actMouse: null, camSnap: null, lastP: 0,
+    expT0: 0, expOut: false, expZoom: 1, camFrom: null,
+    expCpFrom: null, expSpFrom: null, expOrder: null,
+    expProj: null, expHover: null,
+  };
+}
+
+/**
+ * Snapshot the camera and each node's reveal progress so explore mode can
+ * continue them rather than restart. Call before flipping into explore.
+ */
+export function beginExplore(st: GraphViewState, graph: BuiltGraph): void {
+  st.expZoom = 1;
+  st.expOut = false;
+  st.expT0 = performance.now();
+  const t = Date.now() * 0.001;
+  const cam = st.camSnap;
+  if (cam) {
+    // subtract the auto-spin so the camera doesn't jump on handover
+    st.orbY = cam.rotY - t * 0.035;
+    st.orbX = cam.rotX;
+    st.camFrom = cam;
+  } else {
+    st.orbY = 0.2;
+    st.orbX = -0.06;
+    st.camFrom = null;
+  }
+  const p = st.lastP || 0;
+  st.expCpFrom = graph.nodes.map((n) => clamp01(smooth((p - n.colorAt) / 0.16)));
+  st.expSpFrom = graph.nodes.map((n) => clamp01(smooth((p - n.spawnAt) / 0.05)));
+  // stagger by graph distance from the centre so the fill radiates outward
+  st.expOrder = graph.nodes.map((n) => clamp01(Math.hypot(n.ox, n.oy, n.oz) / 620));
+}
+
+/** Start the exit transition (the draw runs `expT0` backwards). */
+export function beginExitExplore(st: GraphViewState): void {
+  st.expOut = true;
+  st.expT0 = performance.now();
+}
+
+/** Hand the camera back to the scroll view once the exit has played out. */
+export function settleExitExplore(st: GraphViewState): void {
+  st.expOut = false;
+  const t = Date.now() * 0.001;
+  const p = st.lastP || 1;
+  st.orbY = st.orbY + t * 0.035 - 0.25 - p * 1.15 - t * 0.02;
+  st.orbX = st.orbX + 0.12;
+}
+
+/** Nearest node within 28px of a point, or null. */
+export function pickNode(st: GraphViewState, pt: { x: number; y: number } | null): Projected | null {
+  if (!pt || !st.expProj) return null;
+  let best = 28;
+  let hit: Projected | null = null;
+  st.expProj.forEach((pr) => {
+    const d = Math.hypot(pr.x - pt.x, pr.y - pt.y);
+    if (d < best) {
+      best = d;
+      hit = pr;
+    }
+  });
+  return hit;
+}
+
+/** ── scroll-driven view ─────────────────────────────────────────────── */
+export function drawScroll(
+  canvas: HTMLCanvasElement,
+  graph: BuiltGraph,
+  st: GraphViewState,
+  p: number,
+): void {
+  const c = cv(canvas);
+  const { ctx, w, h } = c;
+  ctx.clearRect(0, 0, w, h);
+
+  const { nodes, edges } = graph;
+  const t = Date.now() * 0.001;
+  // the frame drifts left late on, making room for the closing caption
+  const cx = w * (0.58 - 0.08 * smooth((p - 0.6) / 0.2));
+  const cy = h * 0.48;
+  const rotY = 0.25 + p * 1.15 + st.orbY + t * 0.02;
+  const rotX = -0.12 + st.orbX;
+  const zoomIn = 0.8 + 0.25 * smooth(p / 0.12);
+  const pull = 1 - 0.22 * smooth((p - 0.74) / 0.22);
+  const zoom = zoomIn * pull;
+
+  const cosY = Math.cos(rotY), sinY = Math.sin(rotY);
+  const cosX = Math.cos(rotX), sinX = Math.sin(rotX);
+  const proj: Projected[] = nodes.map((n, i) => {
+    const wob = Math.sin(t * 0.5 + n.seed) * 10;
+    const x = n.ox * cosY - n.oz * sinY;
+    const z = n.oz * cosY + n.ox * sinY;
+    const y = (n.oy + wob) * cosX - z * sinX * 0.4;
+    const sc = (FL / (FL + z)) * zoom;
+    return { x: x * sc + cx, y: y * sc + cy, z, sc, n, i };
+  });
+
+  // edges draw as a growing line from a to b
+  edges.forEach((e) => {
+    const ep = smooth((p - e.drawAt) / 0.07);
+    if (ep <= 0) return;
+    const a = proj[e.a], b = proj[e.b];
+    const ex = a.x + (b.x - a.x) * ep;
+    const ey = a.y + (b.y - a.y) * ep;
+    const alpha = 0.16 * Math.min(1, a.sc) * (1 + 0.4 * smooth((p - 0.82) / 0.14));
+    ctx.strokeStyle = 'rgba(143,217,168,' + alpha.toFixed(3) + ')';
+    ctx.lineWidth = 0.7;
+    ctx.beginPath();
+    ctx.moveTo(a.x, a.y);
+    ctx.lineTo(ex, ey);
+    ctx.stroke();
+  });
+
+  let hover: Projected | null = null;
+  if (st.actMouse && p > 0.2) {
+    let best = 26;
+    proj.forEach((pr) => {
+      const d = Math.hypot(pr.x - st.actMouse!.x, pr.y - st.actMouse!.y);
+      if (d < best) { best = d; hover = pr; }
+    });
+  }
+
+  proj
+    .slice()
+    .sort((a, b) => b.z - a.z)
+    .forEach((pr) => {
+      const n = pr.n;
+      const sp = smooth((p - n.spawnAt) / 0.05);
+      if (sp <= 0) return;
+      const cp = smooth((p - n.colorAt) / 0.16);
+      const color = cp <= 0 ? GREY : cp >= 1 ? n.final : lerpColor(GREY, n.final, cp);
+      const breathe = 0.92 + 0.08 * Math.sin(t * 0.7 + n.seed);
+      const fog = pr.z > 400 ? Math.max(0.15, 1 - (pr.z - 400) / 700) : 1;
+      // overshoot slightly while spawning, so nodes pop rather than fade
+      let r = n.r * pr.sc * breathe * (sp < 1 ? (1.4 - 0.4 * sp) * sp : 1);
+      if (hover === pr) r *= 1.6;
+      if (r < 0.2) return;
+      ctx.globalAlpha = fog * Math.min(1, sp * 1.4);
+      ctx.beginPath();
+      ctx.arc(pr.x, pr.y, r, 0, Math.PI * 2);
+      ctx.fillStyle = color;
+      ctx.fill();
+      if (n.hub && cp > 0.35) {
+        ctx.globalAlpha = 0.25 * fog * smooth((cp - 0.35) / 0.4);
+        ctx.beginPath();
+        ctx.arc(pr.x, pr.y, r + 6, 0, Math.PI * 2);
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+      }
+      ctx.globalAlpha = 1;
+    });
+
+  if (p > 0.76) {
+    const la = smooth((p - 0.76) / 0.1);
+    ctx.font = '11px "JetBrains Mono", monospace';
+    proj.forEach((pr) => {
+      if (!pr.n.hub) return;
+      ctx.globalAlpha = la * 0.85;
+      ctx.fillStyle = '#B9D9C4';
+      ctx.fillText(pr.n.label.toUpperCase(), pr.x + 14, pr.y + 4);
+    });
+    ctx.globalAlpha = 1;
+  }
+
+  st.camSnap = { rotY, rotX, zoom, cx, cy };
+  st.lastP = p;
+
+  // hover chip — concepts only; hubs already carry a permanent label
+  const hv = hover as Projected | null;
+  if (hv && !hv.n.hub) {
+    const cp = smooth((p - hv.n.colorAt) / 0.09);
+    const status = cp < 0.05 ? 'UNEXPLORED' : XTIER_LABEL[hv.n.tier].toUpperCase();
+    const label = hv.n.label;
+    ctx.font = '600 12px "DM Sans", sans-serif';
+    const tw = ctx.measureText(label).width;
+    ctx.font = '9px "JetBrains Mono", monospace';
+    const sw = ctx.measureText(status).width;
+    const bw = Math.max(tw, sw) + 24;
+    const bh = 40;
+    let bx = hv.x + 16;
+    let by = hv.y - bh - 10;
+    // flip the chip when it would run off the right/top edge
+    if (bx + bw > w - 12) bx = hv.x - bw - 16;
+    if (by < 12) by = hv.y + 16;
+    ctx.fillStyle = 'rgba(6,23,16,0.92)';
+    ctx.strokeStyle = 'rgba(143,217,168,0.4)';
+    ctx.beginPath();
+    ctx.roundRect(bx, by, bw, bh, 9);
+    ctx.fill();
+    ctx.stroke();
+    ctx.fillStyle = '#F6F8F4';
+    ctx.font = '600 12px "DM Sans", sans-serif';
+    ctx.fillText(label, bx + 12, by + 17);
+    ctx.fillStyle = cp < 0.05 ? '#9a9a9a' : hv.n.final;
+    ctx.font = '9px "JetBrains Mono", monospace';
+    ctx.fillText(status, bx + 12, by + 31);
+  }
+}
+
+/** ── explore view ───────────────────────────────────────────────────── */
+export function drawExplore(
+  canvas: HTMLCanvasElement,
+  graph: BuiltGraph,
+  st: GraphViewState,
+  selected: number | null,
+): void {
+  const c = cv(canvas);
+  const { ctx, w, h } = c;
+  ctx.clearRect(0, 0, w, h);
+
+  const { nodes, edges, adj } = graph;
+  const t = Date.now() * 0.001;
+  let k = clamp01((performance.now() - (st.expT0 || 0)) / 850);
+  if (st.expOut) k = 1 - k;
+  const e = smooth(k);
+
+  // the whole graph, a step closer: no new layout, just a tighter camera
+  const fit = Math.min(1.4, Math.max(0.66, w / 1180));
+  const zoomTo = fit * 1.42 * (st.expZoom || 1);
+  const from = st.camFrom || {
+    zoom: zoomTo, cx: w * 0.5, cy: h * 0.48, rotY: st.orbY, rotX: st.orbX,
+  };
+  const zoom = from.zoom + (zoomTo - from.zoom) * e;
+  // drift left to make room for the detail panel
+  const cx = from.cx + (w * 0.42 - from.cx) * e;
+  const cy = from.cy + (h * 0.5 - from.cy) * e;
+  const rotY = st.orbY + t * 0.035;
+  const rotX = st.orbX;
+
+  const cosY = Math.cos(rotY), sinY = Math.sin(rotY);
+  const cosX = Math.cos(rotX), sinX = Math.sin(rotX);
+  const proj: Projected[] = nodes.map((n, i) => {
+    const wob = Math.sin(t * 0.5 + n.seed) * 8;
+    const x = n.ox * cosY - n.oz * sinY;
+    const z = n.oz * cosY + n.ox * sinY;
+    const y = (n.oy + wob) * cosX - z * sinX * 0.4;
+    const sc = (FL / (FL + z)) * zoom;
+    return { x: x * sc + cx, y: y * sc + cy, z, sc, n, i };
+  });
+
+  let ck = clamp01((performance.now() - (st.expT0 || 0)) / 1250);
+  if (st.expOut) ck = 1 - ck;
+
+  const sel = selected;
+  const hasSel = sel !== null && sel !== undefined;
+  const near: Record<number, 1> = {};
+  if (hasSel) {
+    near[sel] = 1;
+    (adj[sel] || []).forEach((j) => { near[j] = 1; });
+  }
+
+  // continue each node's spawn from where the scroll view left it
+  const spOf = (i: number) => {
+    const sf = st.expSpFrom ? (st.expSpFrom[i] === undefined ? 1 : st.expSpFrom[i]) : 1;
+    const stag = st.expOrder ? st.expOrder[i] || 0 : 0;
+    const own = smooth(clamp01((ck - stag * 0.4) / (1 - stag * 0.4 || 1)));
+    return sf + (1 - sf) * own;
+  };
+
+  edges.forEach((ed) => {
+    const a = proj[ed.a], b = proj[ed.b];
+    const hot = hasSel && (ed.a === sel || ed.b === sel);
+    const dim = hasSel && !hot ? 0.3 : 1;
+    const eReveal = Math.min(spOf(ed.a), spOf(ed.b));
+    if (eReveal <= 0.01) return;
+    ctx.globalAlpha = dim * eReveal;
+    ctx.strokeStyle = hot
+      ? 'rgba(143,217,168,0.55)'
+      : 'rgba(143,217,168,' + (ed.cross ? 0.1 : 0.16) + ')';
+    ctx.lineWidth = hot ? 1.6 : 0.7;
+    ctx.beginPath();
+    ctx.moveTo(a.x, a.y);
+    ctx.lineTo(b.x, b.y);
+    ctx.stroke();
+  });
+  ctx.globalAlpha = 1;
+
+  st.expProj = proj;
+  const hover = st.expHover;
+  // labels and mastery arcs fade in over the back half of the entry
+  const la = smooth(clamp01((e - 0.45) / 0.55));
+
+  proj
+    .slice()
+    .sort((a, b) => b.z - a.z)
+    .forEach((pr) => {
+      const n = pr.n;
+      const dim = hasSel && !near[pr.i] ? 0.28 : 1;
+      const breathe = 0.94 + 0.06 * Math.sin(t * 0.7 + n.seed);
+      const fog = pr.z > 400 ? Math.max(0.25, 1 - (pr.z - 400) / 800) : 1;
+      let r = n.r * pr.sc * breathe * (hover === pr.i ? 1.35 : 1);
+      if (r < 0.2) return;
+
+      const stag = st.expOrder ? st.expOrder[pr.i] || 0 : 0;
+      const own = smooth(clamp01((ck - stag * 0.4) / (1 - stag * 0.4 || 1)));
+      const cf = st.expCpFrom ? st.expCpFrom[pr.i] || 0 : 1;
+      const cp = cf + (1 - cf) * own;
+      const col = cp >= 0.999 ? n.final : lerpColor(GREY, n.final, cp);
+
+      // a node still mid-spawn keeps growing in rather than appearing at full size
+      const sf = st.expSpFrom ? (st.expSpFrom[pr.i] === undefined ? 1 : st.expSpFrom[pr.i]) : 1;
+      const sp = sf + (1 - sf) * own;
+      if (sp <= 0.001) return;
+      const grow = sp < 1 ? (1.4 - 0.4 * sp) * sp : 1;
+      r *= grow;
+
+      ctx.globalAlpha = dim * fog * Math.min(1, sp * 1.6);
+      ctx.beginPath();
+      ctx.arc(pr.x, pr.y, r, 0, Math.PI * 2);
+      ctx.fillStyle = col;
+      ctx.fill();
+
+      // mastery arc: the ring the app draws around every concept
+      const ar = r + (n.root ? 9 : 6) * pr.sc;
+      ctx.globalAlpha = dim * fog * la;
+      ctx.beginPath();
+      ctx.arc(pr.x, pr.y, ar, 0, Math.PI * 2);
+      ctx.strokeStyle = 'rgba(230,242,232,0.13)';
+      ctx.lineWidth = 2.2 * pr.sc;
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(pr.x, pr.y, ar, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2 * n.mastery);
+      ctx.strokeStyle = col;
+      ctx.lineWidth = 2.2 * pr.sc;
+      ctx.stroke();
+
+      if (pr.i === sel) {
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.arc(pr.x, pr.y, ar + 8 * pr.sc, 0, Math.PI * 2);
+        ctx.strokeStyle = 'rgba(230,242,232,0.5)';
+        ctx.lineWidth = 1.4;
+        ctx.stroke();
+      }
+
+      // labels: units always, concepts once they are close enough to read
+      const show = n.hub || pr.sc > 0.62 || pr.i === sel || near[pr.i] || hover === pr.i;
+      if (show) {
+        ctx.globalAlpha = dim * la * (n.hub ? 0.95 : 0.72);
+        ctx.font = n.root
+          ? '600 14px "JetBrains Mono", monospace'
+          : n.hub
+            ? '11px "JetBrains Mono", monospace'
+            : '11px "DM Sans", sans-serif';
+        ctx.fillStyle = n.root ? '#F6F8F4' : n.hub ? '#B9D9C4' : '#8FA89A';
+        ctx.textAlign = 'center';
+        ctx.fillText(n.hub ? n.label.toUpperCase() : n.label, pr.x, pr.y + ar + 15 * pr.sc + 4);
+        ctx.textAlign = 'left';
+      }
+      ctx.globalAlpha = 1;
+    });
+}
diff --git a/frontend/src/lib/landing/engine/hero.ts b/frontend/src/lib/landing/engine/hero.ts
new file mode 100644
index 00000000..c8e189c9
--- /dev/null
+++ b/frontend/src/lib/landing/engine/hero.ts
@@ -0,0 +1,163 @@
+/**
+ * Hero background canvas — a slowly rotating 3D point cloud.
+ *
+ * Ported from `Sapling Landing v4.dc.html` (unchanged there since v2). Owns
+ * its own rAF and resize listener, and self-gates once the hero is more than
+ * a viewport off-screen so it costs nothing for the rest of the page.
+ */
+
+import type { Mouse } from './ambient';
+
+/** Weighted palette — the cloud is mostly cool, with coral for contrast. */
+const PALETTE: { c: string; w: number }[] = [
+  { c: '#8A63D2', w: 0.24 },
+  { c: '#3e6f8a', w: 0.24 },
+  { c: '#E27A63', w: 0.2 },
+  { c: '#14B8A6', w: 0.15 },
+  { c: '#9CA3AF', w: 0.1 },
+  { c: '#D1D5DB', w: 0.07 },
+];
+
+const CLUSTERS = [
+  { x: -600, y: -250, z: 80 }, { x: -350, y: -100, z: -120 },
+  { x: -100, y: -300, z: 200 }, { x: 150, y: -150, z: -80 },
+  { x: 400, y: -250, z: 150 }, { x: 600, y: -100, z: -50 },
+  { x: -500, y: 100, z: -150 }, { x: -200, y: 200, z: 100 },
+  { x: 50, y: 150, z: -200 }, { x: 300, y: 250, z: 120 },
+  { x: 550, y: 150, z: -100 }, { x: -400, y: 350, z: 60 },
+  { x: 0, y: 0, z: 0 }, { x: 200, y: -50, z: -150 },
+];
+
+const SPREAD = 280;
+const COUNT = 150;
+/** Focal length for the perspective divide. */
+const FL = 1000;
+
+export interface HeroCanvas {
+  stop(): void;
+}
+
+export function startHeroCanvas(
+  canvas: HTMLCanvasElement,
+  getMouse: () => Mouse,
+  getParallaxY: () => number,
+): HeroCanvas | null {
+  const ctx = canvas.getContext('2d', { alpha: true });
+  if (!ctx) return null;
+
+  let width = 0;
+  let height = 0;
+  let rotAngle = 0;
+  let raf = 0;
+
+  const randColor = () => {
+    const r = Math.random();
+    let s = 0;
+    for (const p of PALETTE) {
+      s += p.w;
+      if (r <= s) return p.c;
+    }
+    return PALETTE[0].c;
+  };
+
+  const nodes = Array.from({ length: COUNT }, () => {
+    const cl = CLUSTERS[Math.floor(Math.random() * CLUSTERS.length)];
+    return {
+      ox: cl.x + (Math.random() - 0.5) * SPREAD,
+      oy: cl.y + (Math.random() - 0.5) * SPREAD,
+      oz: cl.z + (Math.random() - 0.5) * SPREAD,
+      color: randColor(),
+      radius: 1 + Math.random() * 4,
+      seed: Math.random() * 100,
+    };
+  });
+
+  const resize = () => {
+    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+    width = window.innerWidth;
+    height = window.innerHeight;
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  };
+  window.addEventListener('resize', resize);
+  resize();
+
+  const draw = () => {
+    raf = requestAnimationFrame(draw);
+    // hero is well off-screen: keep the rAF alive but skip all the work
+    if (window.scrollY > height * 1.05) return;
+
+    ctx.clearRect(0, 0, width, height);
+    rotAngle += 0.0008;
+    const cx = width / 2;
+    const cy = height / 2;
+    const t = Date.now() * 0.001;
+    const { x: mx, y: my } = getMouse();
+    const parallaxY = getParallaxY();
+
+    const proj = nodes
+      .map((n) => {
+        const ny = n.oy + Math.sin(t * 0.4 + n.seed) * 15;
+        let x = n.ox * Math.cos(rotAngle) - n.oz * Math.sin(rotAngle);
+        const z = n.oz * Math.cos(rotAngle) + n.ox * Math.sin(rotAngle);
+        // mouse pull scales with depth, so near points swing further
+        x -= mx * (z + FL) * 0.02;
+        const y2 = ny - my * (z + FL) * 0.02;
+        const sc = FL / (FL + z);
+        return { x: x * sc + cx, y: y2 * sc + cy - parallaxY, z, sc, n };
+      })
+      .sort((a, b) => b.z - a.z);
+
+    // Link pass: sort by x so the inner loop can break as soon as dx
+    // exceeds reach, turning O(n²) into something near-linear.
+    ctx.lineWidth = 0.5;
+    const byX = proj.slice().sort((a, b) => a.x - b.x);
+    for (let i = 0; i < byX.length; i++) {
+      const p1 = byX[i];
+      const reach = 70 * p1.sc;
+      for (let j = i + 1; j < byX.length; j++) {
+        const p2 = byX[j];
+        const dx = p2.x - p1.x;
+        if (dx > reach) break;
+        const dy = p2.y - p1.y;
+        const d2 = dx * dx + dy * dy;
+        if (d2 < reach * reach) {
+          const a = (1 - Math.sqrt(d2) / reach) * 0.15 * Math.min(1, p1.sc);
+          if (a > 0.002) {
+            ctx.strokeStyle = 'rgba(156,163,175,' + a.toFixed(3) + ')';
+            ctx.beginPath();
+            ctx.moveTo(p1.x, p1.y);
+            ctx.lineTo(p2.x, p2.y);
+            ctx.stroke();
+          }
+        }
+      }
+    }
+
+    proj.forEach((p) => {
+      if (p.z > -FL) {
+        const breathe = 0.92 + 0.08 * Math.sin(t * 0.6 + p.n.seed);
+        const fogA = p.z > 500 ? Math.max(0, 1 - (p.z - 500) / 500) : 1;
+        const r = p.n.radius * p.sc * breathe;
+        if (r > 0.1) {
+          ctx.globalAlpha = fogA;
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
+          ctx.fillStyle = p.n.color;
+          ctx.fill();
+        }
+      }
+    });
+    ctx.globalAlpha = 1;
+  };
+
+  draw();
+
+  return {
+    stop() {
+      if (raf) cancelAnimationFrame(raf);
+      window.removeEventListener('resize', resize);
+    },
+  };
+}
diff --git a/frontend/src/lib/landing/engine/index.ts b/frontend/src/lib/landing/engine/index.ts
new file mode 100644
index 00000000..460fd17c
--- /dev/null
+++ b/frontend/src/lib/landing/engine/index.ts
@@ -0,0 +1,490 @@
+/**
+ * Master scroll engine.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. One rAF loop reads scroll
+ * progress and drives all three acts, the section nav, the ambient canvas,
+ * the gallery marquee and the plant field. It never reads layout — that is
+ * `measure()`'s job, throttled to ~1.6x/sec — and never writes an unchanged
+ * style, because every write goes through `put()`.
+ *
+ * The hero canvas and the drag-field sim own separate loops; they gate
+ * themselves on visibility rather than being driven from here.
+ */
+
+import { clamp01, smooth } from '../color';
+import { createAmbient, type AmbientField, type Mouse } from './ambient';
+import { put } from './dom';
+import { createFlipState, type FlipState } from './flip';
+import { buildGraph, type BuiltGraph } from './graph';
+import {
+  createGraphViewState, drawExplore, drawScroll,
+  type GraphViewState,
+} from './graphView';
+import { createMarquee, type MarqueeController } from './marquee';
+import { fitIngest, measure, type Measured, type ViewportCache } from './measure';
+import { createPlantField, type PlantField } from './plant';
+import { createSim, type SimController } from './sim';
+
+/** How often the layout measure pass may run, in ms. */
+const MEASURE_MS = 600;
+/** Programmatic scrolls bypass smoothing for this long, so nav lands 1:1. */
+const JUMP_MS = 1500;
+/** Act I caption windows, as scroll-progress ranges. */
+const ACT1_WINDOWS: [number, number][] = [[0.0, 0.22], [0.24, 0.47], [0.49, 0.73], [0.72, 1.01]];
+
+export interface EngineRefs {
+  root: HTMLElement | null;
+  nav: HTMLElement | null;
+  heroContent: HTMLElement | null;
+  actCanvas: HTMLCanvasElement | null;
+  ambientCanvas: HTMLCanvasElement | null;
+  plantCanvas: HTMLCanvasElement | null;
+  carousel: HTMLElement | null;
+  ingestScene: HTMLElement | null;
+  ingestStage: HTMLElement | null;
+}
+
+export interface EngineHooks {
+  getExploring(): boolean;
+  getExpOut(): boolean;
+  getExpNode(): number | null;
+  getTutorMode(): number;
+  setTutorMode(v: number): void;
+  getJumpOpen(): boolean;
+  getPastHero(): boolean;
+  setPastHero(v: boolean): void;
+  getJumpDown(): boolean;
+  setJumpDown(v: boolean): void;
+  /** The `parallax` prop, 0..2. */
+  getParallax(): number;
+  onOpenGallery(index: number, from: HTMLElement | null): void;
+  setMarqueeDragged(v: boolean): void;
+}
+
+export class LandingEngine {
+  readonly graph: BuiltGraph = buildGraph();
+  readonly view: GraphViewState = createGraphViewState();
+  readonly ambient: AmbientField = createAmbient();
+  readonly plant: PlantField = createPlantField();
+  readonly flip: FlipState = createFlipState();
+  readonly marquee: MarqueeController;
+  readonly sim: SimController = createSim();
+
+  mouse: Mouse = { x: 0, y: 0 };
+  parallaxY = 0;
+  /**
+   * The hero copy's current `translateY`, in CSS px (negative as it rises).
+   *
+   * Published so the WebGL panel rig can ride the same scroll curve as the
+   * copy instead of running its own — see `hero3d/index.ts`.
+   */
+  heroShiftPx = 0;
+
+  private refs: EngineRefs;
+  private hooks: EngineHooks;
+  private raf = 0;
+  private simRaf = 0;
+  private M: Measured | null = null;
+  private docH = 1;
+  private measuredAt = 0;
+  private vp: ViewportCache = { vw: -1, vh: -1 };
+
+  // scroll smoothing
+  private sySmooth: number | undefined;
+  private syMedia = 0;
+  private jumpUntil = 0;
+  private lastJumpSy = 0;
+  private jumpSettle = 0;
+
+  // nav / jump pill
+  private jumpLastY = 0;
+  private jumpSeen = 0;
+  private jumpOnDark: boolean | undefined;
+  private activeNav = -1;
+
+  // act state
+  private rotCur = 0;
+  private tutorFacing = -1;
+  private tileCounts = [0, 0, 0, 0];
+
+  constructor(refs: EngineRefs, hooks: EngineHooks) {
+    this.refs = refs;
+    this.hooks = hooks;
+    this.marquee = createMarquee({
+      onOpen: (i, el) => hooks.onOpenGallery(i, el),
+      setDragged: (v) => hooks.setMarqueeDragged(v),
+    });
+  }
+
+  /** Programmatic scrolls call this so smoothing doesn't fight them. */
+  markJump(): void {
+    this.jumpUntil = Date.now() + JUMP_MS;
+  }
+
+  start(): void {
+    if (!this.raf) this.raf = requestAnimationFrame(this.tick);
+    if (!this.simRaf) this.simRaf = requestAnimationFrame(this.simTick);
+  }
+
+  stop(): void {
+    if (this.raf) cancelAnimationFrame(this.raf);
+    if (this.simRaf) cancelAnimationFrame(this.simRaf);
+    this.raf = 0;
+    this.simRaf = 0;
+    this.marquee.destroy();
+    this.sim.destroy();
+  }
+
+  refitIngest(): void {
+    fitIngest(this.refs.ingestStage);
+  }
+
+  /** Separate loop: the sim self-gates on cluster visibility. */
+  private simTick = (t: number) => {
+    this.simRaf = requestAnimationFrame(this.simTick);
+    const root = this.refs.root;
+    if (!root) return;
+    if (!this.sim.ensureInit(root)) return;
+    this.sim.step(window.innerHeight, t);
+  };
+
+  private tick = () => {
+    this.raf = requestAnimationFrame(this.tick);
+    const root = this.refs.root;
+    if (!root) return;
+    const now = Date.now();
+
+    if (!this.M || now - this.measuredAt > MEASURE_MS) {
+      this.measuredAt = now;
+      const r = measure(
+        {
+          root,
+          ingestScene: this.refs.ingestScene,
+          plantCanvas: this.refs.plantCanvas,
+          actCanvas: this.refs.actCanvas,
+          ambientCanvas: this.refs.ambientCanvas,
+        },
+        this.vp,
+      );
+      this.M = r.M;
+      this.docH = r.docH;
+    }
+
+    const M = this.M;
+    const vh = window.innerHeight;
+    const rawSy = window.scrollY;
+    const inten = Number(this.hooks.getParallax() ?? 1);
+
+    // ── double-lerp scroll smoothing: raw → scroll pass (0.05) → media pass (0.08)
+    if (this.sySmooth === undefined) {
+      this.sySmooth = rawSy;
+      this.syMedia = rawSy;
+    }
+    const jumping =
+      (this.jumpUntil && now < this.jumpUntil) || Math.abs(rawSy - this.sySmooth) > vh * 3;
+    if (jumping) {
+      this.sySmooth = rawSy;
+      this.syMedia = rawSy;
+      // release the bypass once the programmatic scroll has settled
+      if (this.jumpUntil && Math.abs(rawSy - this.lastJumpSy) < 0.5 && now - this.jumpSettle > 120) {
+        this.jumpUntil = 0;
+      }
+      if (Math.abs(rawSy - this.lastJumpSy) >= 0.5) this.jumpSettle = now;
+      this.lastJumpSy = rawSy;
+    } else {
+      this.sySmooth += (rawSy - this.sySmooth) * 0.05;
+      this.syMedia += (this.sySmooth - this.syMedia) * 0.08;
+    }
+    const sy = this.sySmooth;
+    const syM = this.syMedia;
+
+    if (rawSy < vh * 1.4) {
+      this.heroShiftPx = syM * -0.3;
+      if (this.refs.heroContent) {
+        put(this.refs.heroContent, 'transform', 'translateY(' + this.heroShiftPx.toFixed(1) + 'px)');
+      }
+      this.parallaxY = syM * 0.1;
+    }
+
+    if (rawSy < vh * 1.6) {
+      M.cards.forEach((card) => {
+        const baseRot = parseFloat(card.dataset.baseRot || '0');
+        const dur = parseFloat(card.dataset.floatDur || '5000');
+        const delay = parseFloat(card.dataset.floatDelay || '0');
+        const floatY = Math.sin(((now - delay) / dur) * Math.PI * 2) * -8;
+        put(
+          card, 'transform',
+          'perspective(1000px) translateY(' + (floatY + syM * -0.3).toFixed(1) + 'px) rotateX(' +
+            (-this.mouse.y * 5).toFixed(2) + 'deg) rotateY(' +
+            (this.mouse.x * 5).toFixed(2) + 'deg) rotateZ(' + baseRot + 'deg)',
+        );
+      });
+    }
+
+    M.depths.forEach((d) => {
+      const depth = d.d * inten;
+      let offset: number;
+      if (d.pinned) {
+        // the frame is pinned, so the text isn't moving: the dots must not
+        // either, only mouse drift
+        offset = 0;
+      } else {
+        const top = d.o.top - rawSy;
+        if (top + d.o.h < -220 || top > vh + 220) return;
+        offset = (d.o.top - syM + d.o.h / 2 - vh / 2) * depth;
+      }
+      put(
+        d.el, 'translate',
+        (this.mouse.x * -18 * depth).toFixed(1) + 'px ' +
+          (offset + this.mouse.y * -12 * depth).toFixed(1) + 'px',
+      );
+    });
+
+    M.tilts.forEach((t) => {
+      const top = t.o.top - rawSy;
+      if (top + t.o.h < 0 || top > vh) return;
+      const cx = (t.o.left + t.o.w / 2) / window.innerWidth - 0.5;
+      const cy = (t.o.top - syM + t.o.h / 2) / vh - 0.5;
+      const amt = 3 * inten;
+      put(
+        t.el, 'transform',
+        'perspective(1200px) rotateX(' + (cy * amt).toFixed(2) + 'deg) rotateY(' +
+          (-cx * amt + this.mouse.x * 2).toFixed(2) + 'deg)',
+      );
+    });
+
+    this.tickAct1(M, vh, rawSy, sy);
+    this.tickAct2(M, vh, rawSy, sy);
+    this.tickAct3(M, vh, rawSy, sy);
+    this.tickNav(M, vh, rawSy, sy);
+
+    if (this.refs.ambientCanvas) this.ambient.draw(this.refs.ambientCanvas, syM, vh, this.mouse);
+
+    if (M.gal) {
+      const gt = M.gal.top - rawSy;
+      if (gt < vh + 200 && gt + M.gal.h > -200) this.marquee.update(now);
+      else this.marquee.resetClock(now);
+    }
+    if (M.plant && this.refs.plantCanvas) {
+      const ptop = M.plant.top - rawSy;
+      if (ptop + M.plant.h > 0 && ptop < vh) this.plant.draw(this.refs.plantCanvas);
+    }
+  };
+
+  private tickAct1(M: Measured, vh: number, rawSy: number, sy: number): void {
+    const canvas = this.refs.actCanvas;
+    const exploring = this.hooks.getExploring();
+    const expOut = this.hooks.getExpOut();
+    if ((exploring || expOut) && canvas) {
+      drawExplore(canvas, this.graph, this.view, this.hooks.getExpNode());
+    }
+    if (!M.act1 || exploring || expOut || !canvas) return;
+    const top = M.act1.o.top - rawSy;
+    if (top + M.act1.o.h <= -100 || top >= vh + 100) return;
+
+    const p = clamp01(-(M.act1.o.top - sy) / Math.max(1, M.act1.o.h - vh));
+    drawScroll(canvas, this.graph, this.view, p);
+
+    M.caps.forEach((c) => {
+      const wn = ACT1_WINDOWS[c.i];
+      const fadeIn = smooth((p - wn[0]) / 0.05);
+      const fadeOut = 1 - smooth((p - (wn[1] - 0.04)) / 0.05);
+      // the last caption stays up rather than fading out
+      const o = c.i === 3 ? clamp01(fadeIn) : clamp01(Math.min(fadeIn, fadeOut));
+      put(c.el, 'opacity', o.toFixed(2));
+      put(
+        c.el, 'transform',
+        (c.i === 3 ? '' : 'translateY(-50%) ') + 'translateY(' + ((1 - o) * 22).toFixed(1) + 'px)',
+      );
+    });
+    M.ticks.forEach((t) => {
+      const wn = ACT1_WINDOWS[t.i];
+      const active = p >= wn[0] && p < (wn[1] === 1.01 ? 2 : wn[1] + 0.02);
+      put(t.el, 'background', active ? '#8FD9A8' : 'rgba(230,242,232,0.2)');
+      put(t.el, 'height', active ? '38px' : '26px');
+    });
+  }
+
+  private tickAct2(M: Measured, vh: number, rawSy: number, sy: number): void {
+    if (!M.act2 || !M.scene) return;
+    const top = M.act2.o.top - rawSy;
+    if (top + M.act2.o.h <= -100 || top >= vh + 100) return;
+
+    const p = clamp01(-(M.act2.o.top - sy) / Math.max(1, M.act2.o.h - vh));
+    const sc = M.scene;
+    if (!sc.doc || sc.tiles.length !== 4 || !sc.docL || !sc.tileL) return;
+
+    const counts = [0, 0, 0, 0];
+    sc.chips.forEach((ch) => {
+      const t0 = 0.06 + ch.i * 0.058;
+      const t1 = t0 + 0.24;
+      const f = clamp01((p - t0) / (t1 - t0));
+      if (f <= 0) {
+        put(ch.el, 'opacity', '0');
+        if (ch.docLine) put(ch.docLine, 'opacity', '1');
+        return;
+      }
+      // dim the source line once its chip has lifted off
+      if (ch.docLine) put(ch.docLine, 'opacity', f > 0.15 ? '0.22' : '1');
+      if (f >= 1) {
+        put(ch.el, 'opacity', '0');
+        counts[ch.dest]++;
+        return;
+      }
+      const e = smooth(f);
+      const dl = sc.docL;
+      const tl = sc.tileL[ch.dest];
+      const fx = dl.x + 24;
+      const fy = dl.y + 58 + ch.line * 17;
+      const tx = tl.x + 18;
+      const ty = tl.y + tl.h - 44;
+      // quadratic Bézier arcing 150px above the higher endpoint
+      const mx2 = (fx + tx) / 2;
+      const my2 = Math.min(fy, ty) - 150;
+      const u = 1 - e;
+      const x = u * u * fx + 2 * u * e * mx2 + e * e * tx;
+      const y = u * u * fy + 2 * u * e * my2 + e * e * ty;
+      put(ch.el, 'opacity', String(Math.min(1, f * 10, (1 - f) * 8 + 0.15)));
+      put(
+        ch.el, 'transform',
+        'translate(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px) scale(' + (1 - e * 0.2).toFixed(2) + ')',
+      );
+    });
+
+    counts.forEach((c, i) => {
+      const el = sc.counts[i];
+      if (el && el.textContent !== '+' + c) el.textContent = '+' + c;
+      if (c > this.tileCounts[i]) {
+        const tile = sc.tiles[i] as HTMLElement & { __shadow?: string };
+        if (tile.__shadow === undefined) tile.__shadow = tile.style.boxShadow || '';
+        tile.style.transform = 'scale(1.045)';
+        tile.style.boxShadow = '0 18px 44px rgba(12,86,56,0.18)';
+        setTimeout(() => {
+          tile.style.transform = 'scale(1)';
+          tile.style.boxShadow = tile.__shadow as string;
+        }, 200);
+      }
+      this.tileCounts[i] = c;
+    });
+  }
+
+  private tickAct3(M: Measured, vh: number, rawSy: number, sy: number): void {
+    const carousel = this.refs.carousel;
+    if (!M.act3 || !carousel) return;
+    const top = M.act3.o.top - rawSy;
+    if (top + M.act3.o.h <= -100 || top >= vh + 100) return;
+
+    const p = clamp01(-(M.act3.o.top - sy) / Math.max(1, M.act3.o.h - vh));
+    const docked = p > 0.86;
+    let target: number;
+    let ease = 0.09;
+    if (docked) {
+      // shortest way round, and a gentler glide than the scroll-driven spin
+      const want = -120 * this.hooks.getTutorMode();
+      target = want + 360 * Math.round((this.rotCur - want) / 360);
+      ease = 0.028;
+    } else {
+      const k = clamp01((p - 0.06) / 0.72) * 2;
+      const seg = Math.floor(Math.min(k, 1.999));
+      const f = k - seg;
+      const e = smooth((f - 0.3) / 0.4);
+      target = -(seg + e) * 120;
+      const facing = Math.round(-target / 120) % 3;
+      if (facing !== this.tutorFacing) {
+        this.tutorFacing = facing;
+        this.hooks.setTutorMode(facing);
+      }
+    }
+    this.rotCur += (target - this.rotCur) * ease;
+    put(carousel, 'transform', 'rotateY(' + this.rotCur.toFixed(2) + 'deg)');
+
+    const facingNow = ((Math.round(-this.rotCur / 120) % 3) + 3) % 3;
+    M.tcaps.forEach((c) => {
+      put(c.el, 'transition', 'opacity 400ms ease');
+      put(c.el, 'opacity', c.i === (docked ? this.hooks.getTutorMode() : facingNow) ? '1' : '0');
+    });
+    M.panels.forEach((pn) => {
+      const ang = (((pn.i * 120 + this.rotCur) % 360) + 360) % 360;
+      put(pn.el, 'opacity', (0.3 + 0.7 * Math.max(0, Math.cos((ang * Math.PI) / 180))).toFixed(2));
+    });
+    if (M.pills) {
+      put(M.pills, 'opacity', docked ? '1' : '0');
+      put(M.pills, 'pointerEvents', docked ? 'auto' : 'none');
+    }
+  }
+
+  private tickNav(M: Measured, vh: number, rawSy: number, sy: number): void {
+    if (M.stem) put(M.stem, 'width', (clamp01(sy / this.docH) * 100).toFixed(2) + '%');
+
+    const past = sy > vh * 0.7;
+    const dy = rawSy - this.jumpLastY;
+    if (Math.abs(dy) > 1.5) {
+      this.jumpLastY = rawSy;
+      if (dy > 0) {
+        this.jumpSeen = performance.now();
+        if (!this.hooks.getJumpDown()) this.hooks.setJumpDown(true);
+      } else if (this.hooks.getJumpDown() && !this.hooks.getJumpOpen()) {
+        this.hooks.setJumpDown(false);
+      }
+    } else if (
+      this.hooks.getJumpDown() &&
+      !this.hooks.getJumpOpen() &&
+      performance.now() - this.jumpSeen > 1600
+    ) {
+      this.hooks.setJumpDown(false);
+    }
+
+    // recolour the jump pill when it sits over the dark act
+    if (M.dark && M.jumpPill) {
+      const mid = rawSy + vh * 0.9;
+      const onDark = mid > M.dark.top && mid < M.dark.top + M.dark.h;
+      if (onDark !== this.jumpOnDark) {
+        this.jumpOnDark = onDark;
+        if (M.jumpLabel) {
+          put(M.jumpLabel, 'color', onDark ? '#B9D9C4' : '#61726A');
+          put(
+            M.jumpLabel, 'text-shadow',
+            onDark ? '0 1px 10px rgba(4,18,12,0.85)' : '0 0 8px rgba(246,248,244,0.9)',
+          );
+        }
+        M.jumpTicks.forEach((t) => put(t, 'opacity', onDark ? '0.9' : '1'));
+      }
+    }
+
+    if (past !== this.hooks.getPastHero()) this.hooks.setPastHero(past);
+
+    let activeIdx = 0;
+    M.nav.forEach((n, i) => {
+      if (i > 0 && n.top - sy < vh * 0.5) activeIdx = i;
+    });
+    if (activeIdx !== this.activeNav) {
+      this.activeNav = activeIdx;
+      M.nav.forEach((n, i) => {
+        if (n.dot) {
+          put(
+            n.dot, 'background',
+            i < activeIdx ? '#4FA574' : i === activeIdx ? '#0E9E5A' : 'rgba(18,32,26,0.18)',
+          );
+          put(n.dot, 'box-shadow', i === activeIdx ? '0 0 0 3px rgba(14,158,90,0.18)' : 'none');
+        }
+        put(n.btn, 'color', i === activeIdx ? '#0C5638' : '#61726A');
+        put(n.btn, 'background', i === activeIdx ? 'rgba(12,86,56,0.07)' : 'transparent');
+      });
+      M.jumpTicks.forEach((t, i) => {
+        put(
+          t, 'background',
+          i === activeIdx
+            ? '#0E9E5A'
+            : i < activeIdx
+              ? 'rgba(79,165,116,0.6)'
+              : this.jumpOnDark
+                ? 'rgba(230,242,232,0.28)'
+                : 'rgba(18,32,26,0.18)',
+        );
+        put(t, 'transform', i === activeIdx ? 'scale(1.5)' : 'scale(1)');
+      });
+      const cur = M.nav[activeIdx];
+      if (M.jumpLabel && cur) M.jumpLabel.textContent = cur.label;
+    }
+  }
+}
diff --git a/frontend/src/lib/landing/engine/marquee.ts b/frontend/src/lib/landing/engine/marquee.ts
new file mode 100644
index 00000000..7ca3d9e7
--- /dev/null
+++ b/frontend/src/lib/landing/engine/marquee.ts
@@ -0,0 +1,171 @@
+/**
+ * Dual-row gallery marquee — auto-drift, hover pause, drag with momentum.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. Each track holds its card set
+ * twice; `off` wraps modulo the width of one set, so the loop is seamless
+ * without ever cloning or reflowing.
+ *
+ * A press is a tap or a drag depending on distance travelled: under 6px opens
+ * the card, over 4px sets the shared `dragged` flag so the click that follows
+ * is swallowed.
+ */
+
+export interface MarqueeTrackState {
+  dir: number;
+  /** Current scroll offset in px, always wrapped into [0, setW). */
+  off: number;
+  /** Momentum, px per ms. */
+  v: number;
+  speed: number;
+  paused: boolean;
+  drag: { x: number; y: number; off: number; lastX: number; lastT: number; moved: number } | null;
+  /** Width of one card set; 0 until measured. */
+  setW: number;
+  measuredW: number;
+  downCard: number;
+  downEl: HTMLElement | null;
+}
+
+export interface MarqueeOptions {
+  /** Fired on tap (not drag). */
+  onOpen(index: number, from: HTMLElement | null): void;
+  /** Mirrors the source's `_mqDragged`, used to suppress the trailing click. */
+  setDragged(v: boolean): void;
+}
+
+export interface MarqueeController {
+  bind(track: HTMLElement, dir: number): void;
+  update(now: number): void;
+  /**
+   * Reset the drift clock. Called on every frame the gallery is off-screen so
+   * that re-entering doesn't apply the whole elapsed gap as one jump.
+   */
+  resetClock(now: number): void;
+  destroy(): void;
+}
+
+const STATE = new WeakMap<HTMLElement, MarqueeTrackState>();
+
+export function createMarquee(opts: MarqueeOptions): MarqueeController {
+  const tracks: HTMLElement[] = [];
+  const cleanups: (() => void)[] = [];
+  let last = 0;
+
+  function bind(track: HTMLElement, dir: number): void {
+    if (STATE.has(track)) return;
+    const m: MarqueeTrackState = {
+      dir, off: 0, v: 0, speed: 26, paused: false, drag: null,
+      setW: 0, measuredW: -1, downCard: -1, downEl: null,
+    };
+    STATE.set(track, m);
+    tracks.push(track);
+
+    const wrap = track.parentElement;
+    const onEnter = () => { m.paused = true; };
+    const onLeave = () => { m.paused = false; };
+    wrap?.addEventListener('pointerenter', onEnter);
+    wrap?.addEventListener('pointerleave', onLeave);
+
+    const onDown = (e: PointerEvent) => {
+      const target = e.target as Element | null;
+      const card = target?.closest?.('[data-tk]') as HTMLElement | null;
+      m.downCard = card ? parseInt(card.dataset.tk as string, 10) : -1;
+      m.downEl = card || null;
+      m.drag = {
+        x: e.clientX, y: e.clientY, off: m.off,
+        lastX: e.clientX, lastT: performance.now(), moved: 0,
+      };
+      m.v = 0;
+      opts.setDragged(false);
+      try { track.setPointerCapture(e.pointerId); } catch { /* not captureable */ }
+      track.style.cursor = 'grabbing';
+    };
+
+    const onMove = (e: PointerEvent) => {
+      if (!m.drag) return;
+      const dx = e.clientX - m.drag.x;
+      m.drag.moved = Math.max(m.drag.moved, Math.hypot(dx, e.clientY - m.drag.y));
+      if (m.drag.moved > 4) opts.setDragged(true);
+      m.off = m.drag.off - dx;
+      const t = performance.now();
+      const dt = Math.max(1, t - m.drag.lastT);
+      m.v = -(e.clientX - m.drag.lastX) / dt;
+      m.drag.lastX = e.clientX;
+      m.drag.lastT = t;
+    };
+
+    const end = (cancelled: boolean) => {
+      if (!m.drag) return;
+      const tapped = m.drag.moved < 6;
+      m.drag = null;
+      track.style.cursor = 'grab';
+      if (!cancelled && tapped && m.downCard >= 0) opts.onOpen(m.downCard, m.downEl);
+      m.downCard = -1;
+      m.downEl = null;
+      // let the click that follows a drag pass before clearing the flag
+      setTimeout(() => opts.setDragged(false), 60);
+    };
+    const onUp = () => end(false);
+    const onCancel = () => end(true);
+
+    track.addEventListener('pointerdown', onDown);
+    track.addEventListener('pointermove', onMove);
+    track.addEventListener('pointerup', onUp);
+    track.addEventListener('pointercancel', onCancel);
+
+    cleanups.push(() => {
+      wrap?.removeEventListener('pointerenter', onEnter);
+      wrap?.removeEventListener('pointerleave', onLeave);
+      track.removeEventListener('pointerdown', onDown);
+      track.removeEventListener('pointermove', onMove);
+      track.removeEventListener('pointerup', onUp);
+      track.removeEventListener('pointercancel', onCancel);
+      STATE.delete(track);
+    });
+  }
+
+  function update(now: number): void {
+    const dt = Math.min(48, now - (last || now));
+    last = now;
+    tracks.forEach((track) => {
+      const m = STATE.get(track);
+      if (!m) return;
+      const wrap = track.parentElement;
+      if (!wrap) return;
+      // measure one card set only when the container width changed
+      if (!m.setW || m.measuredW !== wrap.clientWidth) {
+        const kids = track.children;
+        const half = kids.length / 2;
+        const gap = parseFloat(getComputedStyle(track).columnGap) || 0;
+        let w = 0;
+        for (let i = 0; i < half; i++) w += (kids[i] as HTMLElement).offsetWidth + gap;
+        m.setW = w || 1;
+        m.measuredW = wrap.clientWidth;
+      }
+      if (!m.drag) {
+        if (Math.abs(m.v) > 0.004) {
+          m.off += m.v * dt;
+          // frame-rate independent decay
+          m.v *= Math.pow(0.92, dt / 16.7);
+        } else {
+          m.v = 0;
+        }
+        if (!m.paused) m.off -= (m.dir * m.speed * dt) / 1000;
+      }
+      m.off = ((m.off % m.setW) + m.setW) % m.setW;
+      track.style.transform = 'translate3d(' + (-m.off).toFixed(2) + 'px,0,0)';
+    });
+  }
+
+  function resetClock(now: number): void {
+    last = now;
+  }
+
+  function destroy(): void {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+    tracks.length = 0;
+  }
+
+  return { bind, update, resetClock, destroy };
+}
diff --git a/frontend/src/lib/landing/engine/measure.ts b/frontend/src/lib/landing/engine/measure.ts
new file mode 100644
index 00000000..d12d4dc0
--- /dev/null
+++ b/frontend/src/lib/landing/engine/measure.ts
@@ -0,0 +1,210 @@
+/**
+ * Layout measurement for the landing engine.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. This is the *only* place that
+ * reads layout, and it runs a few times a second (600ms throttle in the tick
+ * loop), never per frame. Everything the tick needs — element lists, page
+ * offsets, section tops — is resolved here and cached.
+ */
+
+import { invalidateCanvas } from './dom';
+
+export interface Off {
+  top: number;
+  left: number;
+  w: number;
+  h: number;
+}
+
+export interface IngestChip {
+  el: HTMLElement;
+  i: number;
+  /** Which tile this chip flies to. */
+  dest: number;
+  /** Which source line it came from. */
+  line: number;
+  docLine: HTMLElement | null;
+}
+
+export interface IngestScene {
+  so: Off;
+  tiles: HTMLElement[];
+  tileO: Off[];
+  doc: Off | null;
+  /** Unscaled local coords, immune to the fit transform. */
+  docL: { x: number; y: number; h: number; w: number };
+  tileL: { x: number; y: number; h: number; w: number }[];
+  counts: (HTMLElement | null)[];
+  chips: IngestChip[];
+}
+
+export interface NavEntry {
+  btn: HTMLElement;
+  top: number;
+  dot: HTMLElement | null;
+  label: string;
+}
+
+export interface Measured {
+  cards: HTMLElement[];
+  depths: { el: HTMLElement; o: Off; d: number; pinned: boolean }[];
+  tilts: { el: HTMLElement; o: Off }[];
+  caps: { el: HTMLElement; i: number }[];
+  ticks: { el: HTMLElement; i: number }[];
+  tcaps: { el: HTMLElement; i: number }[];
+  panels: { el: HTMLElement; i: number }[];
+  pills: HTMLElement | null;
+  stem: HTMLElement | null;
+  dark: { top: number; h: number } | null;
+  jumpPill: HTMLElement | null;
+  jumpLabel: HTMLElement | null;
+  jumpTicks: HTMLElement[];
+  nav: NavEntry[];
+  act1: { el: HTMLElement; o: Off } | null;
+  act2: { el: HTMLElement; o: Off } | null;
+  act3: { el: HTMLElement; o: Off } | null;
+  scene: IngestScene | null;
+  plant: Off | null;
+  gal: Off | null;
+}
+
+export interface MeasureTargets {
+  root: HTMLElement;
+  ingestScene: HTMLElement | null;
+  plantCanvas: HTMLCanvasElement | null;
+  actCanvas: HTMLCanvasElement | null;
+  ambientCanvas: HTMLCanvasElement | null;
+}
+
+/** Cached viewport, so canvases only re-read their size when it changes. */
+export interface ViewportCache {
+  vw: number;
+  vh: number;
+}
+
+export function measure(
+  t: MeasureTargets,
+  vp: ViewportCache,
+): { M: Measured; docH: number } {
+  const { root } = t;
+  const sy = window.scrollY;
+  const off = (el: Element): Off => {
+    const r = el.getBoundingClientRect();
+    return { top: r.top + sy, left: r.left, w: r.width, h: r.height };
+  };
+  const q = <E extends Element = HTMLElement>(sel: string) =>
+    Array.from(root.querySelectorAll<E>(sel));
+
+  if (vp.vw !== window.innerWidth || vp.vh !== window.innerHeight) {
+    vp.vw = window.innerWidth;
+    vp.vh = window.innerHeight;
+    invalidateCanvas(t.actCanvas);
+    invalidateCanvas(t.ambientCanvas);
+    invalidateCanvas(t.plantCanvas);
+  }
+
+  const M = {} as Measured;
+  M.cards = q('.floating-card');
+  M.depths = q('[data-depth]').map((el) => ({
+    el,
+    o: off(el),
+    d: parseFloat(el.dataset.depth || '0.2'),
+    // inside a pinned act the frame doesn't move, so neither should the dots
+    pinned: !!el.closest?.('[data-act]'),
+  }));
+  M.tilts = q('[data-tilt]').map((el) => ({ el, o: off(el) }));
+  M.caps = q('[data-cap]').map((el) => ({ el, i: parseInt(el.dataset.cap as string) }));
+  M.ticks = q('[data-tick]').map((el) => ({ el, i: parseInt(el.dataset.tick as string) }));
+  M.tcaps = q('[data-tcap]').map((el) => ({ el, i: parseInt(el.dataset.tcap as string) }));
+  M.panels = q('[data-panel]').map((el) => ({ el, i: parseInt(el.dataset.panel as string) }));
+  M.pills = root.querySelector('[data-tutor-pills]');
+  M.stem = root.querySelector('[data-stem]');
+
+  const darkSec = document.getElementById('act-graph');
+  M.dark = darkSec ? { top: off(darkSec).top, h: darkSec.offsetHeight } : null;
+
+  M.jumpPill = root.querySelector('[data-jumppill]');
+  M.jumpLabel = root.querySelector('[data-jumplabel]');
+  M.jumpTicks = q('[data-jumptick]');
+  M.nav = q('[data-secnav]').map((btn) => {
+    const sec = document.getElementById(btn.dataset.secnav as string);
+    return {
+      btn,
+      top: sec ? off(sec).top : 0,
+      dot: btn.querySelector<HTMLElement>('[data-jumpdot]'),
+      label: (btn.textContent || '').trim(),
+    };
+  });
+
+  ([1, 2, 3] as const).forEach((k) => {
+    const el = root.querySelector<HTMLElement>('[data-act="' + k + '"]');
+    (M as unknown as Record<string, unknown>)['act' + k] = el ? { el, o: off(el) } : null;
+  });
+
+  const scene = t.ingestScene;
+  if (scene) {
+    const so = off(scene);
+    const doc = scene.querySelector<HTMLElement>('[data-ingest-doc]');
+    const tiles = Array.from(scene.querySelectorAll<HTMLElement>('[data-ingest-tile]'));
+    const wrap = scene.querySelector<HTMLElement>('[data-ingest-fit]');
+    // offset chain up to the scaled wrapper: unscaled local coords, immune
+    // to the fit scale that `fitIngest` applies
+    const local = (el: HTMLElement) => {
+      let x = 0;
+      let y = 0;
+      let n: HTMLElement | null = el;
+      while (n && n !== wrap) {
+        x += n.offsetLeft;
+        y += n.offsetTop;
+        n = n.offsetParent as HTMLElement | null;
+      }
+      return { x, y, h: el.offsetHeight, w: el.offsetWidth };
+    };
+    M.scene = {
+      so,
+      tiles,
+      tileO: tiles.map(off),
+      doc: doc ? off(doc) : null,
+      docL: doc ? local(doc) : { x: 0, y: 0, h: 0, w: 0 },
+      tileL: tiles.map((x) => local(x)),
+      counts: tiles.map((_, i) => scene.querySelector<HTMLElement>('[data-tilecount="' + i + '"]')),
+      chips: Array.from(scene.querySelectorAll<HTMLElement>('[data-chip]')).map((c) => ({
+        el: c,
+        i: parseInt(c.dataset.chip as string),
+        dest: parseInt(c.dataset.dest as string),
+        line: parseInt(c.dataset.line as string),
+        docLine: scene.querySelector<HTMLElement>('[data-docline="' + c.dataset.line + '"]'),
+      })),
+    };
+  } else {
+    M.scene = null;
+  }
+
+  M.plant = t.plantCanvas ? off(t.plantCanvas) : null;
+  const gal = document.getElementById('gallery');
+  M.gal = gal ? off(gal) : null;
+
+  return { M, docH: Math.max(1, document.documentElement.scrollHeight - window.innerHeight) };
+}
+
+/**
+ * Scales the Act II ingest scene down to fit its sticky stage.
+ *
+ * The inner wrapper is given the scene's natural height and a uniform scale,
+ * so the chip flight paths (computed in unscaled local coords) stay correct
+ * at any viewport height.
+ */
+export function fitIngest(stage: HTMLElement | null): number {
+  if (!stage) return 1;
+  const inner = stage.querySelector<HTMLElement>('[data-ingest-fit]');
+  const grid = stage.querySelector<HTMLElement>('[data-ingest-tile]');
+  const doc = stage.querySelector<HTMLElement>('[data-ingest-doc]');
+  if (!inner || !grid || !doc || !grid.parentElement) return 1;
+  const natural = Math.max(doc.offsetHeight, grid.parentElement.offsetHeight, 1);
+  const hPx = natural + 'px';
+  if (inner.style.height !== hPx) inner.style.height = hPx;
+  const f = Math.min(1, stage.clientHeight / natural);
+  const tf = f < 0.999 ? 'scale(' + f.toFixed(4) + ')' : 'none';
+  if (inner.style.transform !== tf) inner.style.transform = tf;
+  return f;
+}
diff --git a/frontend/src/lib/landing/engine/plant.ts b/frontend/src/lib/landing/engine/plant.ts
new file mode 100644
index 00000000..cae65a58
--- /dev/null
+++ b/frontend/src/lib/landing/engine/plant.ts
@@ -0,0 +1,145 @@
+/**
+ * "Plant a concept" canvas in the final CTA.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. Seeded with seven anonymous
+ * nodes; anything the visitor types drops in from above, springs into place,
+ * links to its two nearest neighbours and glows for three seconds. Planted
+ * labels persist to localStorage so the grove is still there next visit.
+ */
+
+import { cv } from './dom';
+
+const STORAGE_KEY = 'sapling-planted-v3';
+/** Only the most recent 30 survive a reload. */
+const KEEP = 30;
+const MAX_LABEL = 32;
+
+export interface PlantNode {
+  /** Rest position. `x`/`y` spring toward this. */
+  tx: number;
+  ty: number;
+  x: number;
+  y: number;
+  vy: number;
+  /** Empty for the seeded background nodes. */
+  label: string;
+  color: string;
+  r: number;
+  born: number;
+  links: number[];
+  seed: number;
+}
+
+export interface PlantField {
+  nodes: PlantNode[];
+  labels: string[];
+  /** @param animate Drop in from above rather than appearing in place. */
+  add(canvas: HTMLCanvasElement | null, label: string, animate: boolean): void;
+  /** Returns the new planted count, or -1 when the input was empty. */
+  plant(canvas: HTMLCanvasElement | null, raw: string): number;
+  restore(canvas: HTMLCanvasElement | null): number;
+  draw(canvas: HTMLCanvasElement): void;
+}
+
+export function createPlantField(): PlantField {
+  const nodes: PlantNode[] = [];
+  const labels: string[] = [];
+
+  function add(canvas: HTMLCanvasElement | null, label: string, animate: boolean): void {
+    const w = canvas ? canvas.clientWidth : 400;
+    const h = canvas ? canvas.clientHeight : 240;
+    const x = 30 + Math.random() * (w - 60);
+    const y = 34 + Math.random() * (h - 64);
+    // link to the two nearest existing nodes, so the grove stays connected
+    const dists = nodes
+      .map((n, i) => ({ i, d: Math.hypot(n.tx - x, n.ty - y) }))
+      .sort((a, b) => a.d - b.d)
+      .slice(0, 2);
+    nodes.push({
+      tx: x, ty: y, x, y: animate ? -20 : y, vy: 0,
+      label, color: '#8FD9A8', r: 5, born: Date.now(),
+      links: dists.map((d) => d.i), seed: Math.random() * 100,
+    });
+    if (label) labels.push(label);
+  }
+
+  function plant(canvas: HTMLCanvasElement | null, raw: string): number {
+    const label = (raw || '').trim().slice(0, MAX_LABEL);
+    if (!label) return -1;
+    add(canvas, label, true);
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(labels.slice(-KEEP)));
+    } catch {
+      /* private mode / quota — the grove just won't persist */
+    }
+    return labels.length;
+  }
+
+  function restore(canvas: HTMLCanvasElement | null): number {
+    // seven anonymous nodes so the field is never empty
+    for (let i = 0; i < 7; i++) add(canvas, '', false);
+    labels.length = 0;
+    try {
+      const saved: string[] = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+      saved.forEach((lb) => add(canvas, lb, false));
+      labels.length = 0;
+      labels.push(...saved);
+      return saved.length;
+    } catch {
+      return 0;
+    }
+  }
+
+  function draw(canvas: HTMLCanvasElement): void {
+    const c = cv(canvas);
+    const { ctx, w, h } = c;
+    ctx.clearRect(0, 0, w, h);
+    const t = Date.now() * 0.001;
+
+    // critically-ish damped spring toward rest
+    nodes.forEach((n) => {
+      n.vy += (n.ty - n.y) * 0.06;
+      n.vy *= 0.82;
+      n.y += n.vy;
+      n.x += (n.tx - n.x) * 0.1;
+    });
+
+    ctx.lineWidth = 0.8;
+    nodes.forEach((n) => {
+      (n.links || []).forEach((li) => {
+        const o = nodes[li];
+        if (!o) return;
+        ctx.strokeStyle = 'rgba(143,217,168,0.22)';
+        ctx.beginPath();
+        ctx.moveTo(n.x, n.y + Math.sin(t + n.seed) * 3);
+        ctx.lineTo(o.x, o.y + Math.sin(t + o.seed) * 3);
+        ctx.stroke();
+      });
+    });
+
+    nodes.forEach((n) => {
+      const wob = Math.sin(t + n.seed) * 3;
+      const age = (Date.now() - n.born) / 1000;
+      const glow = n.label && age < 3 ? (3 - age) / 3 : 0;
+      ctx.beginPath();
+      ctx.arc(n.x, n.y + wob, n.label ? 5 : 3, 0, Math.PI * 2);
+      ctx.fillStyle = n.label ? '#8FD9A8' : '#4FA574';
+      ctx.fill();
+      if (glow > 0) {
+        ctx.globalAlpha = glow * 0.5;
+        ctx.beginPath();
+        ctx.arc(n.x, n.y + wob, 5 + glow * 12, 0, Math.PI * 2);
+        ctx.strokeStyle = '#8FD9A8';
+        ctx.stroke();
+        ctx.globalAlpha = 1;
+      }
+      if (n.label) {
+        ctx.font = '10px "JetBrains Mono", monospace';
+        ctx.fillStyle = 'rgba(230,242,232,0.85)';
+        ctx.fillText(n.label, n.x + 9, n.y + wob + 3);
+      }
+    });
+  }
+
+  return { nodes, labels, add, plant, restore, draw };
+}
diff --git a/frontend/src/lib/landing/engine/sim.test.ts b/frontend/src/lib/landing/engine/sim.test.ts
new file mode 100644
index 00000000..23a31d90
--- /dev/null
+++ b/frontend/src/lib/landing/engine/sim.test.ts
@@ -0,0 +1,751 @@
+// @vitest-environment jsdom
+/**
+ * The drag field has to behave like part of the page, not a layer floating
+ * over it. Three regressions this pins, all of them things the sim used to do:
+ *
+ *  - a cluster inside a pinned act drifted up to 150px against the scroll;
+ *  - the sim kept integrating while the page scrolled, so every node wandered
+ *    a few px/frame under a moving page;
+ *  - nodes were clamped to their svg's viewBox, which walled the drag ~900px
+ *    sideways and ~1600px up/down of the cluster's home.
+ *
+ * jsdom has no layout, so the fixture supplies the geometry itself: rects are
+ * derived from a virtual scroll offset and from each cluster's own transform,
+ * which is the one thing the sim actually writes. The numbers match the real
+ * page — a 1974x3418 svg on viewBox "-900 -1600 1974 3418", so one viewBox
+ * unit is one px and local (x, y) lands at (clusterX + x, clusterY + y).
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { createSim, type SimController } from './sim';
+
+const VIEW_W = 1440;
+const VIEW_H = 900;
+
+/** Where the field sits in the document, before any scrolling. */
+const FIELD_DOC_TOP = 500;
+/** The cluster's origin in viewport space at scroll 0. Right of centre, so a
+ *  drag to the left edge clears the old -900 viewBox wall. */
+const CLUSTER_X = 1200;
+const CLUSTER_Y = 700;
+
+/** The svg's own box, and the negative margins that recentre it. */
+const SVG_W = 1974;
+const SVG_H = 3418;
+const VB_X = -900;
+const VB_Y = -1600;
+
+/** The old viewBox clamp, kept here as the thing the drag must now clear. */
+const OLD_WALL_LEFT = VB_X;
+const OLD_WALL_BOTTOM = VB_Y + SVG_H;
+
+interface World {
+  scrollY: number;
+  /** Rect stubs consult this, so a "scroll" moves the field like a real one. */
+  fieldSticky: boolean;
+}
+
+/** Tall enough to pin for several viewports, like a real act. */
+const SECTION_H = 3000;
+
+/**
+ * The envelope a dropped node stays inside: its breathing, plus the small
+ * share of an arm correction it yields (`PLACED_YIELD`). Measured at 3.7-14px
+ * across these fixtures. The bound is what separates "alive where I left it"
+ * from "wandered off"; it is deliberately not zero, because a node that
+ * refused to yield at all would hold an arm stretched instead.
+ */
+const SWAY_PX = 18;
+
+/**
+ * Transient headroom on the arm ceiling while a placed node is being towed.
+ *
+ * Only during a drag, and only when the resisting end is itself placed:
+ * `PLACED_YIELD` is deliberately small, so the solve walks such a node along
+ * over a few frames rather than in one. Measured peaking ~4px over. Every
+ * settled assertion uses the strict ceiling.
+ */
+const TOW_SLACK_PX = 12;
+
+let world: World;
+let root: HTMLDivElement;
+let section: HTMLElement;
+let field: HTMLDivElement;
+let cluster: HTMLElement;
+let svg: SVGSVGElement;
+let rings: SVGCircleElement[];
+let sim: SimController;
+let clock: number;
+let scrollBySpy: ReturnType<typeof vi.fn>;
+
+function rect(el: Element, get: () => { left: number; top: number; width: number; height: number }) {
+  (el as HTMLElement).getBoundingClientRect = () => {
+    const r = get();
+    return {
+      ...r, x: r.left, y: r.top,
+      right: r.left + r.width, bottom: r.top + r.height,
+      toJSON() { return r; },
+    } as DOMRect;
+  };
+}
+
+/** The cluster's live viewport origin: its transform once the sim owns it,
+ *  its static position before that. */
+function clusterOrigin(): { x: number; y: number } {
+  const m = /translate3d\(([-\d.]+)px,\s*([-\d.]+)px/.exec(cluster.style.transform || '');
+  if (m) return { x: parseFloat(m[1]), y: parseFloat(m[2]) };
+  return { x: CLUSTER_X, y: fieldTop() + (CLUSTER_Y - FIELD_DOC_TOP) };
+}
+
+function fieldTop(): number {
+  // A sticky field stays pinned at the top of the viewport; a static one
+  // scrolls with the document. Both are exercised.
+  return world.fieldSticky ? 0 : FIELD_DOC_TOP - world.scrollY;
+}
+
+/** Where a node's local coordinate lands on screen. */
+function screenOf(n: { x: number; y: number }): { x: number; y: number } {
+  const o = clusterOrigin();
+  return { x: o.x + n.x, y: o.y + n.y };
+}
+
+function ringLocal(i: number): { x: number; y: number } {
+  return {
+    x: parseFloat(rings[i].getAttribute('cx') || '0'),
+    y: parseFloat(rings[i].getAttribute('cy') || '0'),
+  };
+}
+
+function buildFixture(): void {
+  root = document.createElement('div');
+  field = document.createElement('div');
+  field.className = 'drag-field';
+
+  section = document.createElement('section');
+  section.appendChild(field);
+  root.appendChild(section);
+  document.body.appendChild(root);
+
+  // Three nodes, in the strict glow -> ring -> label order the sim binds by.
+  field.innerHTML = `
+    <span data-dragnode="1">
+      <span data-dragpuck="1">
+        <svg width="${SVG_W}" height="${SVG_H}" viewBox="${VB_X} ${VB_Y} ${SVG_W} ${SVG_H}">
+          <line x1="76" y1="44" x2="106" y2="104" stroke-width="1.1"></line>
+          <line x1="76" y1="44" x2="30" y2="110" stroke-width="0.8"></line>
+          <circle cx="76" cy="44" r="26"></circle>
+          <circle data-ring="1" data-sim="1" cx="76" cy="44" r="18"></circle>
+          <text x="76" y="77">MA 242</text>
+          <circle cx="106" cy="104" r="18"></circle>
+          <circle data-ring="1" data-sim="1" cx="106" cy="104" r="10"></circle>
+          <text x="106" y="126">series</text>
+          <circle cx="30" cy="110" r="18"></circle>
+          <circle data-ring="1" data-sim="1" cx="30" cy="110" r="10"></circle>
+          <text x="30" y="132">vectors</text>
+        </svg>
+      </span>
+    </span>`;
+
+  cluster = field.querySelector<HTMLElement>('[data-dragnode]')!;
+  svg = field.querySelector('svg')!;
+  rings = Array.from(svg.querySelectorAll<SVGCircleElement>('[data-sim]'));
+
+  // jsdom's SVGSVGElement has no viewBox animated-value plumbing.
+  Object.defineProperty(svg, 'viewBox', {
+    value: { baseVal: { x: VB_X, y: VB_Y, width: SVG_W, height: SVG_H } },
+    configurable: true,
+  });
+
+  // The act itself scrolls normally; only the field inside it pins. This rect
+  // is what the old parallax read to decide how far to slide the cluster, so
+  // it has to be real for the pinned-act test to mean anything.
+  rect(section, () => ({
+    left: 0, top: FIELD_DOC_TOP - world.scrollY, width: VIEW_W, height: SECTION_H,
+  }));
+  rect(field, () => ({ left: 0, top: fieldTop(), width: VIEW_W, height: VIEW_H }));
+  // The cluster span shrink-wraps to the svg's box plus its negative margins;
+  // the svg itself hangs 900/1600 up and to the left of that origin.
+  rect(cluster, () => {
+    const o = clusterOrigin();
+    return { left: o.x, top: o.y, width: SVG_W + 2 * VB_X, height: SVG_H + 2 * VB_Y };
+  });
+  rect(svg, () => {
+    const o = clusterOrigin();
+    return { left: o.x + VB_X, top: o.y + VB_Y, width: SVG_W, height: SVG_H };
+  });
+}
+
+/** A pointer event jsdom will dispatch — PointerEvent itself is unimplemented. */
+function pointer(type: string, clientX: number, clientY: number): MouseEvent {
+  const e = new MouseEvent(type, { clientX, clientY, bubbles: true, cancelable: true });
+  Object.defineProperty(e, 'pointerId', { value: 7 });
+  return e;
+}
+
+function scrollTo(y: number): void {
+  world.scrollY = y;
+  window.dispatchEvent(new Event('scroll'));
+}
+
+/** Run n frames, advancing the shared clock by one 60fps tick each. */
+function frames(n: number): void {
+  for (let i = 0; i < n; i++) {
+    clock += 16;
+    sim.step(VIEW_H, clock);
+  }
+}
+
+beforeEach(() => {
+  world = { scrollY: 0, fieldSticky: false };
+  clock = 10_000;
+  vi.spyOn(performance, 'now').mockImplementation(() => clock);
+  Object.defineProperty(window, 'innerWidth', { value: VIEW_W, configurable: true });
+  Object.defineProperty(window, 'innerHeight', { value: VIEW_H, configurable: true });
+
+  // jsdom has no scrolling; wire scrollBy to the virtual world so autoscroll
+  // moves the field exactly as a real scroll would.
+  scrollBySpy = vi.fn((_x: number, y: number) => { scrollTo(world.scrollY + y); });
+  Object.defineProperty(window, 'scrollBy', { value: scrollBySpy, configurable: true });
+
+  buildFixture();
+  sim = createSim();
+  expect(sim.ensureInit(root)).toBe(true);
+});
+
+afterEach(() => {
+  sim.destroy();
+  root.remove();
+  vi.restoreAllMocks();
+});
+
+describe('cluster anchoring', () => {
+  it('sits at exactly field.rect + anchor, with nothing added', () => {
+    frames(1);
+    const o = clusterOrigin();
+    expect(o.x).toBeCloseTo(CLUSTER_X, 1);
+    expect(o.y).toBeCloseTo(CLUSTER_Y, 1);
+  });
+
+  it('translates 1:1 with a static field as the page scrolls', () => {
+    frames(1);
+    const before = clusterOrigin();
+    scrollTo(420);
+    frames(1);
+    expect(clusterOrigin().y).toBeCloseTo(before.y - 420, 1);
+    expect(clusterOrigin().x).toBeCloseTo(before.x, 1);
+  });
+
+  it('holds still with a pinned act instead of drifting against it', () => {
+    // The regression: a sticky field used to subtract up to 150px of parallax
+    // as its section scrolled through, so the cluster slid under the copy it
+    // belongs to. A pinned field's rect does not move, so neither may the
+    // cluster — at any depth into the section.
+    sim.destroy();
+    root.remove();
+    world = { scrollY: 0, fieldSticky: true };
+    buildFixture();
+    field.style.position = 'sticky';
+    sim = createSim();
+    expect(sim.ensureInit(root)).toBe(true);
+
+    frames(1);
+    const pinnedAt = clusterOrigin();
+    for (const y of [200, 900, 1800, 3000]) {
+      scrollTo(y);
+      frames(1);
+      expect(clusterOrigin().x).toBeCloseTo(pinnedAt.x, 1);
+      expect(clusterOrigin().y).toBeCloseTo(pinnedAt.y, 1);
+    }
+  });
+
+  describe('copy that pins inside a static field', () => {
+    // The FAQ shape: the section (and its field) scroll all the way through,
+    // but the question column is `sticky; top:110` and holds for
+    // `grid - column` = 375px. The field's rect cannot see that, so CS 112 and
+    // PH 150 slid 374px out from under the words. `data-drag-track` names the
+    // column so the sim can add its travel back.
+    const TRACK_OFFSET = 120;   // the column starts one section-padding down
+    const STICKY_TOP = 110;
+    const TRAVEL = 375;
+
+    /** A real sticky child: free, then pinned, then free again. */
+    function trackTop(): number {
+      const natural = FIELD_DOC_TOP + TRACK_OFFSET - world.scrollY;
+      if (natural >= STICKY_TOP) return natural;
+      return Math.max(natural, Math.min(STICKY_TOP, natural + TRAVEL));
+    }
+
+    let track: HTMLElement;
+
+    beforeEach(() => {
+      sim.destroy();
+      root.remove();
+      world = { scrollY: 0, fieldSticky: false };
+      buildFixture();
+
+      track = document.createElement('div');
+      track.setAttribute('data-drag-anchor', 'faq');
+      rect(track, () => ({ left: 0, top: trackTop(), width: 392, height: 358 }));
+      section.appendChild(track);
+      field.dataset.dragTrack = '[data-drag-anchor="faq"]';
+
+      sim = createSim();
+      expect(sim.ensureInit(root)).toBe(true);
+    });
+
+    it('holds the cluster still for exactly as long as the copy pins', () => {
+      frames(1);
+      const gap = clusterOrigin().y - trackTop();
+
+      // Through the approach, the whole pin, and out the far side.
+      for (const y of [0, 200, 600, 1000, 1400, 1800, 2400, 3200]) {
+        scrollTo(y);
+        frames(1);
+        expect(clusterOrigin().y - trackTop()).toBeCloseTo(gap, 1);
+      }
+    });
+
+    it('still translates 1:1 before the copy has pinned at all', () => {
+      frames(1);
+      const before = clusterOrigin();
+      scrollTo(100); // well short of the 110px sticky threshold
+      frames(1);
+      expect(clusterOrigin().y).toBeCloseTo(before.y - 100, 1);
+    });
+
+    it('leaves an untracked field alone', () => {
+      // The mechanism is opt-in; newsletter and cta must keep the old maths.
+      // Rebuilt rather than re-inited: destroy() takes the overlay the
+      // clusters were re-homed into, so a second ensureInit finds none.
+      sim.destroy();
+      root.remove();
+      world = { scrollY: 0, fieldSticky: false };
+      buildFixture();
+      sim = createSim();
+      expect(sim.ensureInit(root)).toBe(true);
+
+      frames(1);
+      const before = clusterOrigin();
+      scrollTo(1400); // deep inside where the copy would be pinned
+      frames(1);
+      expect(clusterOrigin().y).toBeCloseTo(before.y - 1400, 1);
+    });
+  });
+});
+
+describe('scroll freeze', () => {
+  it('does not move a node while the page is scrolling', () => {
+    // Settle first, so any movement during the scroll is unambiguous.
+    frames(40);
+    const before = rings.map((_, i) => ringLocal(i));
+
+    for (let s = 1; s <= 12; s++) {
+      scrollTo(s * 60);
+      frames(3);
+    }
+
+    rings.forEach((_, i) => {
+      expect(ringLocal(i).x).toBeCloseTo(before[i].x, 5);
+      expect(ringLocal(i).y).toBeCloseTo(before[i].y, 5);
+    });
+  });
+
+  it('breathes again once the page has been still for the quiet window', () => {
+    frames(10);
+    scrollTo(300);
+    frames(3);
+    const frozen = ringLocal(1);
+
+    // Past SCROLL_QUIET_MS with no further scroll events.
+    clock += 400;
+    frames(30);
+
+    const moved = ringLocal(1);
+    expect(Math.hypot(moved.x - frozen.x, moved.y - frozen.y)).toBeGreaterThan(0);
+  });
+
+  it('still tracks the pointer while the page scrolls under it', () => {
+    const start = screenOf(ringLocal(0));
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+    window.dispatchEvent(pointer('pointermove', 300, 260));
+    frames(2);
+
+    // The node is pinned to a screen position, so scrolling the page must not
+    // drag it off the cursor.
+    for (let s = 1; s <= 6; s++) {
+      scrollTo(s * 80);
+      frames(2);
+      const at = screenOf(ringLocal(0));
+      expect(at.x).toBeCloseTo(300, 0);
+      expect(at.y).toBeCloseTo(260, 0);
+    }
+  });
+});
+
+describe('drag reach', () => {
+  it('clears the old viewBox wall on the way to the far edge', () => {
+    const start = screenOf(ringLocal(0));
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+    window.dispatchEvent(pointer('pointermove', 8, 300));
+    frames(4);
+
+    // Old behaviour: walled at the viewBox edge, ~900px left of home.
+    expect(ringLocal(0).x).toBeLessThan(OLD_WALL_LEFT);
+    // New behaviour: stops only at the viewport edge, and stays on screen.
+    expect(screenOf(ringLocal(0)).x).toBeGreaterThanOrEqual(0);
+    expect(screenOf(ringLocal(0)).x).toBeLessThan(60);
+  });
+
+  it('follows the pointer anywhere, with no wall around the drag', () => {
+    // This used to clamp the held node into the visible box. The clamp was
+    // solving a real problem — see `repinHeld` — but it did it by walling off
+    // where a node could be taken. The node now goes wherever the pointer
+    // goes, which is what the real graph does.
+    const start = screenOf(ringLocal(0));
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+
+    for (const [px, py] of [[-4000, 400], [4000, 400], [700, -4000], [700, 4000]]) {
+      window.dispatchEvent(pointer('pointermove', px, py));
+      frames(3);
+      const at = screenOf(ringLocal(0));
+      expect(Math.hypot(at.x - px, at.y - py)).toBeLessThan(2);
+    }
+  });
+
+  it('carries a node down the document, past where the old clamp stopped', () => {
+    const start = screenOf(ringLocal(0));
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+    // Held in the bottom band: the page should scroll under the node.
+    window.dispatchEvent(pointer('pointermove', 700, VIEW_H - 20));
+    frames(120);
+
+    expect(world.scrollY).toBeGreaterThan(1000);
+    // Local coords grow as the anchor scrolls away; the old clamp stopped
+    // this dead at the bottom of the viewBox.
+    expect(ringLocal(0).y).toBeGreaterThan(OLD_WALL_BOTTOM);
+    // ...and it is still on screen, under the cursor.
+    expect(screenOf(ringLocal(0)).y).toBeLessThanOrEqual(VIEW_H);
+    expect(screenOf(ringLocal(0)).y).toBeGreaterThan(VIEW_H - 100);
+  });
+
+  it('carries a node back up the document the same way', () => {
+    scrollTo(4000);
+    frames(2);
+    const start = screenOf(ringLocal(0));
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+    window.dispatchEvent(pointer('pointermove', 700, 20));
+    frames(120);
+
+    expect(world.scrollY).toBeLessThan(3000);
+    expect(screenOf(ringLocal(0)).y).toBeGreaterThanOrEqual(0);
+  });
+});
+
+describe('placement', () => {
+  /** Grab node `i`, drag it to a screen point, and let go. */
+  function dropAt(i: number, x: number, y: number): void {
+    const start = screenOf(ringLocal(i));
+    rings[i].dispatchEvent(pointer('pointerdown', start.x, start.y));
+    window.dispatchEvent(pointer('pointermove', x, y));
+    frames(3);
+    window.dispatchEvent(pointer('pointerup', x, y));
+  }
+
+  it('leaves a dropped node where it was put, inside its sway', () => {
+    dropAt(1, 300, 200);
+    const dropped = ringLocal(1);
+
+    // Long enough for the link spring, the anchor spring and a full breathing
+    // period to have reeled it back in if any of them were going to.
+    frames(1200);
+
+    // Not identical: a placed node keeps a third of the breathing drift, so
+    // it breathes around the drop point rather than freezing on it. SWAY_PX
+    // is the envelope that buys — anything beyond it is a walk, not a sway.
+    expect(Math.hypot(ringLocal(1).x - dropped.x, ringLocal(1).y - dropped.y))
+      .toBeLessThan(SWAY_PX);
+  });
+
+  it('stays put where the page put it, scrolling with its section', () => {
+    dropAt(1, 300, 200);
+    const onScreen = screenOf(ringLocal(1));
+    frames(600);
+    scrollTo(350);
+    frames(20);
+    // Moved with the page by the scroll, and not a px more than its sway.
+    expect(Math.hypot(
+      screenOf(ringLocal(1)).x - onScreen.x,
+      screenOf(ringLocal(1)).y - (onScreen.y - 350),
+    )).toBeLessThan(SWAY_PX);
+  });
+
+  it('drags the whole cluster after a moved puck, not just the puck', () => {
+    // The cluster must react, and it must react through the forces rather
+    // than being carried at a fixed offset. Both halves matter: an earlier
+    // fix seated the concepts rigidly on the puck, which held the shape and
+    // killed every bit of life in it.
+    const root0 = ringLocal(0);
+    const sat0 = ringLocal(1);
+
+    const start = screenOf(root0);
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+    // Mid-viewport, clear of the edge band, so nothing autoscrolls.
+    window.dispatchEvent(pointer('pointermove', start.x + 260, VIEW_H / 2));
+
+    // One frame in: the concept is towed by a spring, so it trails rather
+    // than arriving. A fixed offset would already be exact.
+    frames(1);
+    const lag = Math.hypot(ringLocal(1).x - sat0.x, ringLocal(1).y - sat0.y);
+    expect(lag).toBeLessThan(Math.hypot(ringLocal(0).x - root0.x, ringLocal(0).y - root0.y));
+
+    // ...and it does follow: it ends up near the puck, at roughly the link's
+    // rest length, not stranded back where it started.
+    frames(240);
+    const root = ringLocal(0);
+    const sat = ringLocal(1);
+    expect(Math.hypot(sat.x - sat0.x, sat.y - sat0.y)).toBeGreaterThan(100);
+    expect(Math.hypot(sat.x - root.x, sat.y - root.y)).toBeLessThan(200);
+  });
+
+  it('treats a scroll under the drag as a camera move, not a force', () => {
+    // The cluster is welded to its field and travels with the page, while the
+    // held node is pinned to a pointer that has not moved. Left uncancelled
+    // that difference lands on the link spring every frame and diverges:
+    // measured stretching 59/104/60px to 243/488/207px through one autoscroll.
+    const root0 = ringLocal(0);
+    const sat0 = ringLocal(1);
+    const rest = Math.hypot(sat0.x - root0.x, sat0.y - root0.y);
+
+    const start = screenOf(root0);
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+    window.dispatchEvent(pointer('pointermove', start.x, start.y));
+
+    // Scroll a long way under a pointer that never moves. Nothing the visitor
+    // did should change the cluster's shape.
+    for (const y of [200, 500, 900, 1500, 2600, 4000]) {
+      scrollTo(y);
+      frames(20);
+      const gap = Math.hypot(ringLocal(1).x - ringLocal(0).x, ringLocal(1).y - ringLocal(0).y);
+      expect(Math.abs(gap - rest)).toBeLessThan(20);
+    }
+  });
+
+  it('gathers a cluster back around its placed puck', () => {
+    // Dropping the puck used to strand its concepts: the link force was
+    // skipped the moment either end was placed, so the only pull left was
+    // each concept's own spring back to the original layout. They crawled
+    // home and left one long edge stretched across the field. A placed node
+    // anchors the link now instead of leaving it, so the cluster re-forms
+    // around wherever the puck was put.
+    const satBefore = ringLocal(1);
+
+    dropAt(0, 520, 380);
+    frames(400);
+
+    const root = ringLocal(0);
+    const sat = ringLocal(1);
+    // It came along...
+    expect(Math.hypot(sat.x - satBefore.x, sat.y - satBefore.y)).toBeGreaterThan(100);
+    // ...and sits at the link's rest length, not on a long branch. The real
+    // graph's distance is `40 + (1 - strength) * 90`, so 130px is its ceiling.
+    expect(Math.hypot(sat.x - root.x, sat.y - root.y)).toBeLessThan(200);
+  });
+
+  it('moves the rest of the cluster when one concept is taken', () => {
+    // This replaces the opposite assertion. A placed node used to drop out of
+    // every force, so a concept could be parked anywhere and its cluster
+    // would not notice — which is the behaviour that reads as dead. Moving
+    // one node is supposed to move the whole cluster, exactly as it does in
+    // the real knowledge graph.
+    const rootBefore = ringLocal(0);
+    const otherBefore = ringLocal(2);
+
+    dropAt(1, 300, 200);
+    frames(400);
+
+    // The puck is linked to the concept that was taken, so it follows...
+    expect(Math.hypot(ringLocal(0).x - rootBefore.x, ringLocal(0).y - rootBefore.y))
+      .toBeGreaterThan(50);
+    // ...and the sibling, linked to the puck, comes with it.
+    expect(Math.hypot(ringLocal(2).x - otherBefore.x, ringLocal(2).y - otherBefore.y))
+      .toBeGreaterThan(50);
+  });
+
+  it('holds a short drag instead of springing back to its home', () => {
+    // The regression this replaces: a drop within 70px of home counted as
+    // "put back", so the node re-floated — spring retargeted to the original
+    // spot and the breathing restarted. Short drags are most drags, so most
+    // drags crawled home. Measured in a browser at 14px of travel still
+    // climbing 4s after a 40px drag, against 0px for a 90px one.
+    const start = ringLocal(1);
+    const to = screenOf({ x: start.x + 18, y: start.y + 14 });
+    dropAt(1, to.x, to.y);
+    const dropped = ringLocal(1);
+
+    // It really was a short one — well inside the radius that used to reel
+    // it in — and it moved.
+    expect(Math.hypot(dropped.x - start.x, dropped.y - start.y)).toBeLessThan(70);
+    expect(Math.hypot(dropped.x - start.x, dropped.y - start.y)).toBeGreaterThan(1);
+
+    // Long enough for the anchor spring and a full breathing period.
+    frames(1200);
+    expect(Math.hypot(ringLocal(1).x - dropped.x, ringLocal(1).y - dropped.y))
+      .toBeLessThan(SWAY_PX);
+  });
+
+  it('keeps breathing once dropped, but only just', () => {
+    const start = ringLocal(1);
+    const to = screenOf({ x: start.x + 6, y: start.y + 6 });
+    dropAt(1, to.x, to.y);
+    const dropped = ringLocal(1);
+
+    // A free node wanders ~20px over its 15s period. A placed one keeps a
+    // third of that: enough that it is visibly alive, little enough that it
+    // is still sitting where it was left. Dead still is the bug this pins —
+    // a dropped node used to stop moving entirely.
+    frames(900);
+    const moved = Math.hypot(ringLocal(1).x - dropped.x, ringLocal(1).y - dropped.y);
+    expect(moved).toBeGreaterThan(0);
+    expect(moved).toBeLessThan(SWAY_PX);
+  });
+
+  it('still draws its edges to wherever it was left', () => {
+    dropAt(1, 300, 200);
+    frames(120);
+    const line = svg.querySelector('line')!;
+    const at = ringLocal(1);
+    // The first line runs root -> node 1; its far end tracks the placed node.
+    expect(parseFloat(line.getAttribute('x2')!)).toBeCloseTo(at.x, 1);
+    expect(parseFloat(line.getAttribute('y2')!)).toBeCloseTo(at.y, 1);
+  });
+});
+
+describe('edge autoscroll', () => {
+  it('leaves the page alone when the node is held away from the edges', () => {
+    const start = screenOf(ringLocal(0));
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+    window.dispatchEvent(pointer('pointermove', 700, VIEW_H / 2));
+    frames(60);
+    expect(scrollBySpy).not.toHaveBeenCalled();
+    expect(world.scrollY).toBe(0);
+  });
+
+  it('leaves the page alone when nothing is being dragged', () => {
+    frames(60);
+    expect(scrollBySpy).not.toHaveBeenCalled();
+  });
+
+  it('accelerates toward the edge of the band', () => {
+    const start = screenOf(ringLocal(0));
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+
+    window.dispatchEvent(pointer('pointermove', 700, VIEW_H - 100));
+    frames(1);
+    const gentle = scrollBySpy.mock.calls.at(-1)![1];
+
+    window.dispatchEvent(pointer('pointermove', 700, VIEW_H - 2));
+    frames(1);
+    const steep = scrollBySpy.mock.calls.at(-1)![1];
+
+    expect(gentle).toBeGreaterThan(0);
+    expect(steep).toBeGreaterThan(gentle);
+  });
+
+  it('stops scrolling as soon as the node is released', () => {
+    const start = screenOf(ringLocal(0));
+    rings[0].dispatchEvent(pointer('pointerdown', start.x, start.y));
+    window.dispatchEvent(pointer('pointermove', 700, VIEW_H - 10));
+    frames(10);
+    const moved = world.scrollY;
+    expect(moved).toBeGreaterThan(0);
+
+    window.dispatchEvent(pointer('pointerup', 700, VIEW_H - 10));
+    frames(30);
+    expect(world.scrollY).toBe(moved);
+  });
+});
+
+describe('arm length', () => {
+  /** Every rendered arm, measured off the <line> elements the sim writes. */
+  function armLengths(): number[] {
+    return Array.from(svg.querySelectorAll('line')).map((l) => Math.hypot(
+      parseFloat(l.getAttribute('x2') || '0') - parseFloat(l.getAttribute('x1') || '0'),
+      parseFloat(l.getAttribute('y2') || '0') - parseFloat(l.getAttribute('y1') || '0'),
+    ));
+  }
+
+  // Pulling a concept has to behave exactly like pulling the puck. It did
+  // not: the link spring answers a gap with a fraction of the correction, so
+  // an arm under continuous load keeps opening, and dragging a concept out of
+  // a cluster drew its arms into a line across the section. The constraint
+  // has no idea which node is which, so both cases are the same test.
+  it.each([['the puck', 0], ['a concept', 1]] as const)(
+    'holds every arm to its drawn length while %s is dragged',
+    (_what, ring) => {
+      // Read before any frame runs: still the authored geometry.
+      const drawn = armLengths();
+      expect(drawn.every((d) => d > 0)).toBe(true);
+
+      const start = screenOf(ringLocal(ring));
+      rings[ring].dispatchEvent(pointer('pointerdown', start.x, start.y));
+
+      // Yank it right across the viewport, sampling every frame — a fast drag
+      // is exactly what outran the spring.
+      for (let i = 1; i <= 40; i++) {
+        window.dispatchEvent(pointer('pointermove', start.x - 20 * i, start.y + 12 * i));
+        frames(1);
+        armLengths().forEach((len, k) => {
+          expect(len).toBeLessThanOrEqual(drawn[k] + 0.5);
+        });
+      }
+
+
+      // And it still holds once everything settles after the drop.
+      window.dispatchEvent(pointer('pointerup', start.x - 800, start.y + 480));
+      frames(300);
+      armLengths().forEach((len, k) => {
+        expect(len).toBeLessThanOrEqual(drawn[k] + 0.5);
+      });
+    },
+  );
+
+  it('holds arms between two already-placed nodes', () => {
+    // The case that survived the first ceiling. Every drop places a node, so
+    // after a couple of drags most of a cluster is placed — and an arm with a
+    // placed node at BOTH ends was skipped as immovable, which meant nothing
+    // could ever shorten it. Seen as `CS 112 - Memoize` drawn clean across
+    // the FAQ while the rest of that cluster sat together at the far end.
+    const drawn = armLengths();
+
+    // Place one node, then drag a second one a long way off.
+    const first = screenOf(ringLocal(2));
+    rings[2].dispatchEvent(pointer('pointerdown', first.x, first.y));
+    window.dispatchEvent(pointer('pointermove', first.x - 260, first.y - 160));
+    frames(5);
+    window.dispatchEvent(pointer('pointerup', first.x - 260, first.y - 160));
+    frames(30);
+
+    const second = screenOf(ringLocal(1));
+    rings[1].dispatchEvent(pointer('pointerdown', second.x, second.y));
+    for (let i = 1; i <= 30; i++) {
+      window.dispatchEvent(pointer('pointermove', second.x + 24 * i, second.y + 16 * i));
+      frames(1);
+      // A placed node resists rather than refuses (PLACED_YIELD), so towing
+      // one takes a few frames and the ceiling can be a hair over mid-drag.
+      // TOW_SLACK_PX is that transient; the steady state below is strict.
+      armLengths().forEach((len, k) => expect(len).toBeLessThanOrEqual(drawn[k] + TOW_SLACK_PX));
+    }
+    window.dispatchEvent(pointer('pointerup', second.x + 720, second.y + 480));
+    frames(300);
+    armLengths().forEach((len, k) => expect(len).toBeLessThanOrEqual(drawn[k] + 0.5));
+  });
+
+  it('lets an arm fold up, so the sway survives', () => {
+    // The ceiling only ever shortens. An arm that could not compress would
+    // pin the cluster into a rigid frame and take the life out of it.
+    const drawn = armLengths();
+    frames(600);
+    const now = armLengths();
+    expect(now.some((len, k) => len < drawn[k] - 1)).toBe(true);
+  });
+});
diff --git a/frontend/src/lib/landing/engine/sim.ts b/frontend/src/lib/landing/engine/sim.ts
new file mode 100644
index 00000000..22bdf0da
--- /dev/null
+++ b/frontend/src/lib/landing/engine/sim.ts
@@ -0,0 +1,908 @@
+/**
+ * Drag-field force simulation — the little graph clusters the visitor can
+ * pull apart with the pointer.
+ *
+ * Ported from `Sapling Landing v4.dc.html`. Deliberately hand-rolled rather
+ * than delegated to `d3-force` (which is already a dependency): the forces
+ * are expressible in d3, but this integrator uses a *linear* alpha ramp
+ * toward a target instead of d3's exponential decay, resolves collide in a
+ * single pass rather than d3's iterated one, and adds an idle breathing
+ * drift plus an anchor spring back to each node's home. Same forces,
+ * different settling — swapping in d3 changes how it feels.
+ *
+ * One force is answerable to the visitor rather than the layout: a node
+ * dropped somewhere is *placed*, and holds that spot. See `SimNode.placed`.
+ *
+ * Above all of it sits `holdArms()`, a hard ceiling on every arm's length.
+ * The forces decide how a cluster settles and breathes; the ceiling decides
+ * what it can never do, which is stretch. That split is deliberate — a spring
+ * can only ever answer a gap with a fraction of the correction, so no amount
+ * of tuning makes one promise a maximum.
+ *
+ * Writes `cx`/`cy` straight onto the SVG elements. No React, no canvas.
+ */
+
+const OVERLAY_CLASS = 'drag-overlay';
+const SHELL_CLASS = 'drag-shell';
+
+/**
+ * How long after the last scroll event the sim stays frozen.
+ *
+ * While the page is scrolling the clusters must read as part of the page:
+ * `syncClusters()` keeps translating them with their section, and nothing
+ * else may move. Integrating during a scroll is what made a node visibly
+ * swim against the copy it belongs to — the idle breathing drift and the
+ * anchor spring are both a few px/frame, which is invisible on a still page
+ * and obvious as independent motion once everything around it is moving.
+ *
+ * A held node is exempt: it has to keep tracking the pointer.
+ */
+const SCROLL_QUIET_MS = 140;
+
+/**
+ * Autoscroll band at the top and bottom of the viewport, active only while a
+ * node is held. Dragging into it scrolls the page, which is what lets a node
+ * be carried out of its own section and across the whole document — without
+ * it, "drag down" ends at the bottom of the screen.
+ */
+const EDGE_BAND_PX = 110;
+/** Peak autoscroll speed in px/frame, reached at the very edge of the band. */
+const EDGE_SPEED_PX = 22;
+
+/**
+ * How much of the idle breathing drift a placed node keeps.
+ *
+ * A free node traces a ~20px excursion over its 15s period. A node the
+ * visitor put somewhere should still be breathing — dropping one used to kill
+ * it stone dead, which reads as a bug rather than as precision — but at the
+ * full amplitude it looks like it is wandering off rather than sitting where
+ * it was left. A third is the compromise: a few px of life, well inside the
+ * radius anyone would call "where I put it".
+ */
+const PLACED_SWAY = 0.33;
+
+/**
+ * Anchor-spring gain for a placed node, holding it to the spot it was left.
+ *
+ * Fixed rather than scaled by alpha, and ~8x the free spring's settled gain.
+ * The two numbers work together: `PLACED_SWAY` decides how hard the node is
+ * pushed, this decides how far that push gets it, and their ratio is the
+ * excursion. Around 7px at these values.
+ */
+const PLACED_ANCHOR = 0.003;
+
+
+/*
+ * There is deliberately no rejoin radius.
+ *
+ * A drop used to count as "put back" if it landed within 70px of the node's
+ * home, which re-floated it: the spring retargeted to the original spot and
+ * the ambient breathing restarted. That made every short drag spring back —
+ * measured at 14px of travel still climbing 4s after a 40px drag, against 0px
+ * for a 90px one — and short drags are most of them. A drop now always places
+ * the node, at any distance. The cost is that there is no way to put a node
+ * back in its cluster short of a reload; that is the intended trade.
+ */
+
+interface SimNode {
+  x: number; y: number;
+  vx: number; vy: number;
+  /** Non-null while pinned to the pointer. */
+  fx: number | null; fy: number | null;
+  r: number;
+  root: boolean;
+  cluster: number;
+  collide: number;
+  charge: number;
+  ring: SVGCircleElement;
+  glow: SVGCircleElement;
+  label: SVGTextElement;
+  /** Label's y offset from its ring. */
+  ly: number;
+  /** Home position, which the anchor spring pulls back toward. */
+  hx: number; hy: number;
+  /**
+   * True once the visitor has dropped this node somewhere of their own
+   * choosing.
+   *
+   * A placed node holds that spot: it takes no recoil from the link, charge
+   * or collide forces, and breathes at a reduced amplitude around it. It is
+   * not removed from those forces — it still acts on its neighbours, which is
+   * what makes a cluster react to one of its nodes being moved.
+   *
+   * Nor is it immovable. `holdArms()` will drag a placed node to keep an arm
+   * within its length, because two nodes placed further apart than their arm
+   * is long is a request that cannot be met, and a stretched arm is the more
+   * visible wrong answer.
+   */
+  placed: boolean;
+}
+
+interface SimLink {
+  a: number;
+  b: number;
+  el: SVGLineElement;
+  /** Normalised stroke weight, 0..1 — heavier links sit closer. */
+  s: number;
+  /**
+   * The arm's length as the cluster was drawn, and the length it keeps.
+   *
+   * Both the spring's rest length and the hard ceiling `holdArms()` enforces.
+   * Taken from the authored geometry rather than computed from stroke weight
+   * so a cluster holds the shape it was designed with.
+   */
+  len: number;
+}
+
+/** A cluster's fixed offset inside its (often sticky) field. */
+interface ClusterAnchor {
+  el: HTMLElement;
+  field: HTMLElement;
+  left: number;
+  top: number;
+  /**
+   * The copy this cluster travels with, when that copy pins independently of
+   * the field. Null for the ordinary case, where the field's own rect already
+   * carries every movement the cluster needs.
+   */
+  track: HTMLElement | null;
+  /** `track.top - field.top` at build time, i.e. before either has pinned. */
+  trackTop: number;
+}
+
+/**
+ * One cluster's svg mapped into viewport space, so a held node can be clamped
+ * to what the visitor can actually see.
+ */
+interface ClusterBox {
+  left: number; top: number;
+  /** px per viewBox unit. */
+  sx: number; sy: number;
+  vbx: number; vby: number;
+}
+
+interface SimGroup {
+  field: HTMLElement;
+  clusters: HTMLElement[];
+  nodes: SimNode[];
+  links: SimLink[];
+  /** Scratch for `holdArms()`: node positions before the solve. Preallocated
+   *  so the constraint stays allocation-free on the frame path. */
+  armX: number[];
+  armY: number[];
+  alpha: number;
+  target: number;
+  drag: {
+    n: SimNode; id: number; svg: SVGSVGElement; cx: number; cy: number;
+    /** The held svg's screen top last frame, for scroll compensation. */
+    boxTop: number | null;
+  } | null;
+}
+
+export interface SimController {
+  /** Lazily builds the sim; returns false until the fields are laid out. */
+  ensureInit(root: HTMLElement): boolean;
+  step(vh: number, t: number): void;
+  destroy(): void;
+}
+
+export function createSim(): SimController {
+  let groups: SimGroup[] | null = null;
+  let overlay: HTMLDivElement | null = null;
+  const anchors: ClusterAnchor[] = [];
+  const cleanups: (() => void)[] = [];
+  /** Timestamp of the last scroll event, on the same clock as the rAF `t`. */
+  let lastScrollAt = -Infinity;
+
+  /**
+   * Re-seats every cluster against its field's live rect, once per frame.
+   *
+   * Cheap by construction: a handful of `getBoundingClientRect()` reads and
+   * one transform write each, all on elements parked in a fixed overlay, so
+   * nothing here can invalidate the page's layout.
+   *
+   * Strictly `field.rect + anchor`, with nothing added: the cluster is welded
+   * to the section it belongs to and translates with it 1:1. An earlier
+   * version drifted a cluster up to 150px against the scroll inside a pinned
+   * act, on the theory that it kept the field from looking stuck to the copy.
+   * It reads as the cluster sliding under the page instead — the one thing a
+   * decorative overlay must never do — so the drift is gone.
+   *
+   * The one sanctioned addition is `track`, and it exists to preserve that
+   * same 1:1 rule rather than break it. A field's rect only speaks for its
+   * copy while the two move together; where the copy pins on its own — the
+   * FAQ's sticky question column against a static section — the field keeps
+   * scrolling and the clusters slide out from under the words. Measured at
+   * 374px through `faq`, which is exactly that column's sticky travel
+   * (`grid 733px - column 358px`). Re-adding the tracked element's own travel
+   * puts the cluster back on the copy for every frame of the pin and the
+   * release. A field with no tracked copy is untouched by this.
+   */
+  function syncClusters(): void {
+    for (const a of anchors) {
+      if (!a.field.isConnected) continue;
+      const r = a.field.getBoundingClientRect();
+      // How far the copy has pinned away from its field since build time.
+      let dy = 0;
+      if (a.track?.isConnected) {
+        dy = a.track.getBoundingClientRect().top - r.top - a.trackTop;
+      }
+      a.el.style.transform =
+        'translate3d(' + (r.left + a.left).toFixed(1) + 'px,' +
+        (r.top + a.top + dy).toFixed(1) + 'px,0)';
+    }
+  }
+
+  /** The held cluster's svg in viewport space, or null if it isn't laid out. */
+  function boxFor(svg: SVGSVGElement): ClusterBox | null {
+    const r = svg.getBoundingClientRect();
+    const vb = svg.viewBox?.baseVal;
+    if (!r.width || !r.height || !vb || !vb.width || !vb.height) return null;
+    return {
+      left: r.left, top: r.top,
+      sx: r.width / vb.width, sy: r.height / vb.height,
+      vbx: vb.x, vby: vb.y,
+    };
+  }
+
+  function ensureInit(root: HTMLElement): boolean {
+    if (groups) return true;
+    const fields = Array.from(root.querySelectorAll<HTMLElement>('.drag-field'));
+    if (!fields.length) return false;
+    // hidden below 1024px by the media query — don't build it at all
+    if (getComputedStyle(fields[0]).display === 'none') return false;
+
+    if (!overlay) {
+      // Two elements, and the outer one is load-bearing.
+      //
+      // The shell is `position:fixed`, so the absolute overlay inside it is
+      // in viewport coordinates — which is the space `syncClusters()` writes
+      // its per-frame transforms in. It also clips (`overflow:hidden`), so a
+      // thrown node can never extend the page, and carries
+      // `touch-action:none` so dragging a node doesn't scroll instead.
+      const shell = document.createElement('div');
+      shell.className = SHELL_CLASS;
+      shell.setAttribute('aria-hidden', 'true');
+      shell.style.cssText =
+        'position:fixed; inset:0; overflow:hidden; z-index:45; pointer-events:none; touch-action:none;';
+
+      overlay = document.createElement('div');
+      overlay.className = OVERLAY_CLASS;
+      overlay.setAttribute('aria-hidden', 'true');
+      overlay.style.cssText =
+        'position:absolute; top:0; left:0; width:100%; height:0; pointer-events:none; overflow:visible; will-change:transform;';
+
+      shell.appendChild(overlay);
+      root.appendChild(shell);
+      cleanups.push(() => shell.remove());
+    }
+
+    const built: SimGroup[] = [];
+    fields.forEach((field) => {
+      const clusters = Array.from(field.querySelectorAll<HTMLElement>('[data-dragnode]'));
+      if (!clusters.length) return;
+
+      // Re-home each cluster in the overlay so its parts can travel outside
+      // the section's bounds, remembering its offset WITHIN ITS FIELD.
+      //
+      // Field-relative, not page- or overlay-relative. Most of these fields
+      // are `position:sticky`, so their own rect moves as the page scrolls;
+      // `syncClusters()` re-applies `anchor + field.rect` every frame, which
+      // is what makes a cluster track the section it belongs to. Baking a
+      // one-shot absolute left/top here instead freezes every cluster at
+      // whatever the layout happened to be on the first frame.
+      // Opt-in, and resolved once: the copy this field's clusters belong to,
+      // when it pins independently of the field. See `syncClusters()`.
+      const sel = field.dataset.dragTrack;
+      const track = sel
+        ? (field.closest('section') ?? document).querySelector<HTMLElement>(sel)
+        : null;
+
+      clusters.forEach((cl) => {
+        const fb = field.getBoundingClientRect();
+        const b = cl.getBoundingClientRect();
+        anchors.push({
+          el: cl, field,
+          left: b.left - fb.left,
+          top: b.top - fb.top,
+          track,
+          trackTop: track ? track.getBoundingClientRect().top - fb.top : 0,
+        });
+        cl.style.animation = 'none';
+        cl.style.position = 'absolute';
+        cl.style.left = '0px';
+        cl.style.top = '0px';
+        cl.style.right = 'auto';
+        cl.style.bottom = 'auto';
+        cl.style.willChange = 'transform';
+        overlay!.appendChild(cl);
+      });
+
+      const nodes: SimNode[] = [];
+      const links: SimLink[] = [];
+      clusters.forEach((cl, ci) => {
+        const svg = cl.querySelector('svg');
+        if (!svg) return;
+        const rings = Array.from(svg.querySelectorAll<SVGCircleElement>('[data-sim]'));
+        const lines = Array.from(svg.querySelectorAll('line'));
+        const base = nodes.length;
+
+        rings.forEach((ring, ri) => {
+          const r = parseFloat(ring.getAttribute('r') || '0');
+          const glow = ring.previousElementSibling as SVGCircleElement;
+          const label = ring.nextElementSibling as SVGTextElement;
+          nodes.push({
+            x: parseFloat(ring.getAttribute('cx') || '0'),
+            y: parseFloat(ring.getAttribute('cy') || '0'),
+            vx: 0, vy: 0, fx: null, fy: null, r,
+            root: ri === 0, cluster: ci,
+            // the root sits heavier and pushes harder than its satellites.
+            // Radii mirror the real graph's forceCollide: 36 for a subject
+            // root, 18 upward for everything else.
+            collide: ri === 0 ? 36 : 18 + r * 0.5,
+            charge: ri === 0 ? -400 : -120,
+            ring, glow, label,
+            ly: parseFloat(label.getAttribute('y') || '0') - parseFloat(ring.getAttribute('cy') || '0'),
+            hx: 0, hy: 0,
+            placed: false,
+          });
+        });
+
+        lines.forEach((ln) => {
+          // match each line end to the nearest ring in this cluster
+          const near = (x: number, y: number) => {
+            let best = -1;
+            let bd = 1e9;
+            for (let k = base; k < nodes.length; k++) {
+              const d = Math.hypot(nodes[k].x - x, nodes[k].y - y);
+              if (d < bd) { bd = d; best = k; }
+            }
+            return best;
+          };
+          const a = near(parseFloat(ln.getAttribute('x1') || '0'), parseFloat(ln.getAttribute('y1') || '0'));
+          const b = near(parseFloat(ln.getAttribute('x2') || '0'), parseFloat(ln.getAttribute('y2') || '0'));
+          links.push({
+            a, b, el: ln,
+            s: (parseFloat(ln.getAttribute('stroke-width') || '0.5') - 0.5) / 1.2,
+            len: Math.hypot(nodes[b].x - nodes[a].x, nodes[b].y - nodes[a].y) || 1,
+          });
+        });
+
+        // the cluster no longer floats as a unit; the sim moves its parts
+        cl.style.animation = 'none';
+        const puck = cl.querySelector<HTMLElement>('[data-dragpuck]');
+        if (puck) puck.style.transform = 'none';
+        svg.style.overflow = 'visible';
+      });
+
+      nodes.forEach((n) => { n.hx = n.x; n.hy = n.y; });
+      built.push({
+        field, clusters, nodes, links, alpha: 1, target: 0, drag: null,
+        armX: new Array<number>(nodes.length).fill(0),
+        armY: new Array<number>(nodes.length).fill(0),
+      });
+    });
+
+    if (!built.length) return false;
+    groups = built;
+    bindDrag();
+
+    // Passive, and the only thing it does is stamp a time — the freeze itself
+    // is decided in `step()` so it stays on the frame clock.
+    const onScroll = () => { lastScrollAt = performance.now(); };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    cleanups.push(() => window.removeEventListener('scroll', onScroll));
+    return true;
+  }
+
+  function bindDrag(): void {
+    groups!.forEach((f) => {
+      f.clusters.forEach((cl) => {
+        const svg = cl.querySelector('svg');
+        if (!svg) return;
+        // client coords → viewBox coords
+        const local = (e: PointerEvent) => {
+          const r = svg.getBoundingClientRect();
+          const vb = svg.viewBox.baseVal;
+          const sx = vb && vb.width ? vb.width / r.width : 1;
+          const sy = vb && vb.height ? vb.height / r.height : 1;
+          return {
+            x: (vb ? vb.x : 0) + (e.clientX - r.left) * sx,
+            y: (vb ? vb.y : 0) + (e.clientY - r.top) * sy,
+          };
+        };
+
+        const onDown = (e: PointerEvent) => {
+          const target = e.target as Element | null;
+          const ring = target?.closest?.('[data-sim]') as SVGCircleElement | null;
+          if (!ring) return;
+          e.preventDefault();
+          const n = f.nodes.find((x) => x.ring === ring);
+          if (!n) return;
+          const p = local(e);
+          f.drag = { n, id: e.pointerId, svg, cx: e.clientX, cy: e.clientY, boxTop: null };
+          n.fx = p.x;
+          n.fy = p.y;
+          f.target = 0.3;
+          f.alpha = Math.max(f.alpha, 0.6);
+          svg.style.cursor = 'grabbing';
+          ring.setAttribute('stroke-opacity', '1');
+          try { svg.setPointerCapture(e.pointerId); } catch { /* not captureable */ }
+        };
+
+        const onMove = (e: PointerEvent) => {
+          if (!f.drag || f.drag.id !== e.pointerId || f.drag.svg !== svg) return;
+          f.drag.cx = e.clientX;
+          f.drag.cy = e.clientY;
+          const p = local(e);
+          f.drag.n.fx = p.x;
+          f.drag.n.fy = p.y;
+        };
+
+        const up = (e: PointerEvent) => {
+          if (!f.drag) return;
+          // The held cluster's svg, NOT this listener's. `up` is bound to
+          // window for every cluster, so the one that runs first is not
+          // necessarily the one holding the pointer, and converting the drop
+          // through the wrong svg puts the node somewhere else entirely.
+          const { n, svg: heldSvg } = f.drag;
+          n.ring.setAttribute('stroke-opacity', '0.75');
+          n.fx = null;
+          n.fy = null;
+
+          // Land on the pointer before placing.
+          //
+          // The sim samples the cursor once per frame, so a drag that ends
+          // between frames leaves the node wherever the last frame put it —
+          // on a fast throw a fraction of the way along, measured at 22% of
+          // the distance on a 20-step drag released immediately. The node is
+          // placed exactly where it is dropped, so that shortfall would be
+          // permanent. The pointerup carries the final position; use it.
+          const box = boxFor(heldSvg);
+          if (box) {
+            n.x = box.vbx + (e.clientX - box.left) / box.sx;
+            n.y = box.vby + (e.clientY - box.top) / box.sy;
+          }
+
+          // The drop is the point of the whole interaction: a node left
+          // somewhere stays there, however short the drag was.
+          //
+          // ONLY this node. Placing its whole cluster held the shape, but it
+          // took every one of them out of the simulation, so after a single
+          // drag the field was dead — no sway, no reaction to anything. The
+          // cluster keeps its shape now because a placed node still anchors
+          // the link force (see `stepGroup`), so its concepts are drawn back
+          // to rest length around wherever it landed instead of being frozen
+          // into position.
+          n.placed = true;
+          n.vx = 0;
+          n.vy = 0;
+
+          // The cluster's rest position is wherever the drag left it.
+          //
+          // Only this node is placed — its neighbours stay free, and keep
+          // their full sway — but every one of them is re-homed here. Without
+          // that their anchor springs still point at the layout the page
+          // loaded with, so the cluster walks back to it and, since the arms
+          // are hard-capped, hauls the node the visitor just placed along
+          // with it: measured dragging a dropped node 515px back across the
+          // field over 1200 frames. The arm ceiling and a home the cluster
+          // has already left cannot both be honoured; the drop is the more
+          // recent instruction.
+          for (const q of f.nodes) {
+            if (q.cluster !== n.cluster) continue;
+            q.hx = q.x;
+            q.hy = q.y;
+          }
+
+          try { heldSvg.releasePointerCapture(e.pointerId); } catch { /* already released */ }
+          heldSvg.style.cursor = 'grab';
+          f.drag = null;
+          f.target = 0;
+        };
+
+        svg.addEventListener('pointerdown', onDown);
+        svg.addEventListener('pointermove', onMove);
+        window.addEventListener('pointermove', onMove);
+        svg.addEventListener('pointerup', up);
+        svg.addEventListener('pointercancel', up);
+        window.addEventListener('pointerup', up);
+        window.addEventListener('pointercancel', up);
+
+        cleanups.push(() => {
+          svg.removeEventListener('pointerdown', onDown);
+          svg.removeEventListener('pointermove', onMove);
+          window.removeEventListener('pointermove', onMove);
+          svg.removeEventListener('pointerup', up);
+          svg.removeEventListener('pointercancel', up);
+          window.removeEventListener('pointerup', up);
+          window.removeEventListener('pointercancel', up);
+        });
+      });
+    });
+  }
+
+  /**
+   * Cancel the page's scroll out of the held cluster's coordinates.
+   *
+   * A scroll is a camera move and must not read as a force. The cluster is
+   * welded to its field, so it travels with the page, while the held node is
+   * pinned to a pointer that may not have moved at all — and the difference
+   * lands on the link spring as relative motion the visitor never made. The
+   * edge-band autoscroll pushes 22px of it per frame, every frame, for as
+   * long as the node is held there: the spring does not settle at a lag, it
+   * diverges. Measured stretching a cluster from 59/104/60px to 243/488/207px
+   * over one continuous autoscroll, which is the long branch itself.
+   *
+   * The delta is read from the cluster's own screen movement rather than from
+   * the scroll call, so it is right whoever did the scrolling and whatever
+   * order the frame ran in. With it cancelled, the simulation answers only for
+   * motion made with the pointer — which is all the real graph ever sees.
+   */
+  function compensateScroll(f: SimGroup): void {
+    if (!f.drag) return;
+    const b = boxFor(f.drag.svg);
+    if (!b) return;
+    const prev = f.drag.boxTop;
+    f.drag.boxTop = b.top;
+    if (prev == null) return;
+    const d = (prev - b.top) / b.sy;
+    if (!d) return;
+    for (const q of f.nodes) {
+      if (q === f.drag.n || q.cluster !== f.drag.n.cluster) continue;
+      q.y += d;
+      q.hy += d;
+    }
+  }
+
+  /**
+   * Scrolls the page while a node is dragged into the top or bottom band.
+   *
+   * Runs before `syncClusters()` so the rects read this frame already include
+   * the scroll — deferring it a frame shows up as the cluster juddering
+   * against the page.
+   */
+  function edgeAutoscroll(f: SimGroup, vh: number): void {
+    if (!f.drag) return;
+    const y = f.drag.cy;
+    let k = 0;
+    if (y < EDGE_BAND_PX) k = -(1 - y / EDGE_BAND_PX);
+    else if (y > vh - EDGE_BAND_PX) k = 1 - (vh - y) / EDGE_BAND_PX;
+    if (!k) return;
+    window.scrollBy(0, Math.max(-1, Math.min(1, k)) * EDGE_SPEED_PX);
+  }
+
+/**
+ * Number of times the arm constraint is swept per frame.
+ *
+ * One pass fixes each arm in isolation and immediately breaks its neighbour,
+ * so a chain of them only converges over several: pulling the far end of
+ * `ME 218 - Free-body - Statics` has to travel two arms to reach the puck.
+ * Three sweeps left 0.23px on the table dragging a concept, and six left
+ * 0.51px with two placed nodes on one arm — invisible either way, but
+ * the ceiling is worth stating exactly. Twelve clears it with room to spare
+ * and costs nothing: a handful of links, no allocation, no DOM.
+ */
+const ARM_SWEEPS = 12;
+
+/**
+ * Where the link spring rests, as a fraction of the arm's hard ceiling.
+ *
+ * The two must not coincide. Resting the spring exactly at the ceiling leaves
+ * a dragged-out cluster pinned against it: every arm at its limit, every
+ * outward breath clipped by `holdArms()` the same frame, and the node sitting
+ * dead still however much it is breathing. Resting a little inside gives the
+ * sway somewhere to happen — the cluster settles off the ceiling after a drag
+ * and only touches it again when something is actually pulling.
+ */
+const ARM_REST = 0.88;
+
+/**
+ * How much of an arm correction is handed back to the node as velocity.
+ *
+ * `holdArms()` moves positions, and a position moved is a position with no
+ * memory: the node is where the arm needs it and travelling at whatever speed
+ * it had before, which is usually none. A cluster dragged that way arrives
+ * rather than swings — it snaps to the pointer in place, with no follow-
+ * through when the pointer stops. Feeding the correction back as velocity is
+ * what puts the momentum in, and is the standard closing step of a
+ * position-based solve.
+ *
+ * Well under 1: the full correction reads as overshoot, since the same
+ * displacement is then applied twice, once as position and again as the
+ * velocity that carries into the next frame.
+ */
+const ARM_MOMENTUM = 0.55;
+
+/**
+ * Share of an arm correction a placed node takes when the other end is free.
+ *
+ * Small, so a dropped node holds the spot it was left on: splitting the
+ * correction evenly hauled one 40px back toward its cluster the moment an arm
+ * was over length. Not zero, because an end that never moves cannot resolve
+ * an infeasible cluster and leaves an arm stretched instead.
+ */
+const PLACED_YIELD = 0.12;
+
+  /**
+   * Hard ceiling on every arm's length, applied to positions after the forces.
+   *
+   * The link spring cannot promise this and never could. It is a spring: it
+   * answers a gap with a fraction of the correction, so the faster a node is
+   * pulled the further the arm gives, and an arm under continuous load just
+   * keeps opening. Dragging a concept out of `ME 218` drew its two arms into
+   * a line right across the section.
+   *
+   * A position constraint promises it outright. After integrating, any arm
+   * longer than the length it was drawn at is shortened back to it, moving
+   * whichever ends are free to move. That is also what carries the cluster:
+   * pull one node and the arm reaches its limit, so its neighbour is dragged
+   * bodily along, and the sweep passes that on down the chain. It is the same
+   * for a concept as for the puck — the constraint has no idea which is which.
+   *
+   * Only ever shortens. An arm is free to fold up as far as the charge and
+   * collide forces allow, which is what leaves the sway intact.
+   */
+  function holdArms(f: SimGroup): void {
+    const n = f.nodes;
+    for (let i = 0; i < n.length; i++) { f.armX[i] = n[i].x; f.armY[i] = n[i].y; }
+    for (let sweep = 0; sweep < ARM_SWEEPS; sweep++) {
+      for (const l of f.links) {
+        const s0 = n[l.a];
+        const t0 = n[l.b];
+        if (!s0 || !t0) continue;
+        // Only the node under the pointer is immovable, and the whole
+        // correction falls on the other end.
+        //
+        // A placed node is NOT exempt, though it reads like it should be.
+        // Every drop places a node, so after a couple of drags most of a
+        // cluster is placed, and an arm between two of them was skipped
+        // entirely — nothing could ever shorten it. That is a stretched arm
+        // that never recovers: `CS 112 - Memoize` drawn clean across the FAQ
+        // while the rest of the cluster sat together at the far end.
+        //
+        // Two nodes placed further apart than their arm is long is a request
+        // that cannot be met. The arm wins: a placed node yields to it rather
+        // than holding a shape that was never drawable.
+        // How pinned each end is: held by the pointer beats placed by the
+        // visitor beats free. The correction falls on the LESS pinned end,
+        // entirely — split it and a dropped node gets hauled halfway back to
+        // its cluster by every arm that was over length at the drop, 40px off
+        // the spot it was left on. Equally pinned ends share it, which is
+        // what lets two placed nodes still be pulled together.
+        const rs = s0.fx != null ? 2 : (s0.placed ? 1 : 0);
+        const rt = t0.fx != null ? 2 : (t0.placed ? 1 : 0);
+        if (rs === 2 && rt === 2) continue;
+        const dx = t0.x - s0.x;
+        const dy = t0.y - s0.y;
+        const d = Math.hypot(dx, dy);
+        if (d <= l.len || d < 0.001) continue;
+        const over = (d - l.len) / d;
+        // The correction falls on the less pinned end. A held node never
+        // yields at all; a placed one RESISTS rather than refuses, taking
+        // PLACED_YIELD of it. Refusing outright looks right and is not:
+        // three nodes cannot always satisfy two arms — drag one far enough
+        // and the geometry is simply infeasible — and an end that never
+        // moves resolves that by leaving an arm stretched, which is the one
+        // outcome ruled out. Yielding a little settles it over a few sweeps
+        // while still holding the spot for every reachable arrangement.
+        let ws: number;
+        let wt: number;
+        if (rs === rt) {
+          ws = 0.5;
+          wt = 0.5;
+        } else {
+          const give = (rs > rt ? s0 : t0).fx != null ? 0 : PLACED_YIELD;
+          ws = rs > rt ? give : 1 - give;
+          wt = rs > rt ? 1 - give : give;
+        }
+        // A placed node's home comes with it. Leaving the home behind puts
+        // its anchor spring against the constraint every frame — the spring
+        // hauling it back to a spot the arm cannot reach — and the node sits
+        // shuddering between the two.
+        if (ws) {
+          s0.x += dx * over * ws;
+          s0.y += dy * over * ws;
+          if (s0.placed) { s0.hx += dx * over * ws; s0.hy += dy * over * ws; }
+        }
+        if (wt) {
+          t0.x -= dx * over * wt;
+          t0.y -= dy * over * wt;
+          if (t0.placed) { t0.hx -= dx * over * wt; t0.hy -= dy * over * wt; }
+        }
+      }
+    }
+
+    // Hand the solve's displacement back as velocity, so a node dragged by
+    // its arm carries on moving instead of arriving dead. See ARM_MOMENTUM.
+    //
+    // Free nodes only. The held one is pinned and about to have its velocity
+    // cleared anyway; a placed one is supposed to hold its spot, and follow-
+    // through is the opposite of that — handing it momentum walked a dropped
+    // node 32px off the point it was left on, well outside its sway. It still
+    // yields to the arm, it just does not coast afterwards.
+    for (let i = 0; i < n.length; i++) {
+      const p = n[i];
+      if (p.fx != null || p.placed) continue;
+      p.vx += (p.x - f.armX[i]) * ARM_MOMENTUM;
+      p.vy += (p.y - f.armY[i]) * ARM_MOMENTUM;
+    }
+  }
+
+  function stepGroup(f: SimGroup, vh: number, t: number): void {
+    const n = f.nodes;
+    const L = f.links;
+    const a = Math.max(f.alpha, 0.03);
+    // Before any force runs: take the page's own scroll back out of the held
+    // cluster, so the springs only see what the pointer did.
+    compensateScroll(f);
+
+    // link force — heavier strokes want to sit closer and pull harder.
+    //
+    // A placed node ANCHORS rather than dropping out: it still pulls on the
+    // other end, it just never moves itself. That is the whole reason a
+    // cluster reacts to one of its nodes being moved — drag a concept and the
+    // puck and its siblings swing after it, drop the puck and its concepts
+    // gather back to rest length around wherever it landed. Skipping the link
+    // entirely, as this used to, is what left a placed node trailing a long
+    // dead edge and the rest of the cluster sitting perfectly still.
+    for (const l of L) {
+      const s0 = n[l.a];
+      const t0 = n[l.b];
+      if (!s0 || !t0) continue;
+      // Two anchors have nothing to say to each other.
+      if (s0.placed && t0.placed) continue;
+      let dx = t0.x - s0.x;
+      let dy = t0.y - s0.y;
+      const d = Math.hypot(dx, dy) || 0.001;
+      // Strength is the real graph's, verbatim — `KnowledgeGraph2D` builds the
+      // same d3 force with `.strength(0.15 + strength * 0.4)`. The rest length
+      // is NOT: the graph derives one from stroke weight because it lays its
+      // own nodes out, while these clusters were drawn by hand and the arm
+      // lengths are the drawing. It rests just inside the ceiling `holdArms()`
+      // enforces, never at it — see ARM_REST.
+      const want = l.len * ARM_REST;
+      const k = ((d - want) / d) * a * (0.15 + l.s * 0.4);
+      dx *= k;
+      dy *= k;
+      // Split the correction by inverse radius, so big nodes move less —
+      // except against an anchor, which absorbs none of it, so the free end
+      // takes the whole correction and actually closes the gap.
+      const ws = t0.placed ? 1 : t0.r / (s0.r + t0.r);
+      const wt = s0.placed ? 1 : s0.r / (s0.r + t0.r);
+      if (!t0.placed) { t0.vx -= dx * wt; t0.vy -= dy * wt; }
+      if (!s0.placed) { s0.vx += dx * ws; s0.vy += dy * ws; }
+    }
+
+    // charge + collide, within a cluster only
+    for (let i = 0; i < n.length; i++) {
+      for (let j = i + 1; j < n.length; j++) {
+        const p = n[i];
+        const q = n[j];
+        // Same anchor rule as the link force: a placed node still pushes on
+        // its neighbours, it just does not take the recoil.
+        if (p.cluster !== q.cluster || (p.placed && q.placed)) continue;
+        let dx = q.x - p.x;
+        let dy = q.y - p.y;
+        let d2 = dx * dx + dy * dy;
+        if (d2 < 1) { d2 = 1; dx = 0.6; dy = 0.6; }
+        const f2 = ((p.charge + q.charge) * 0.5 * a) / d2;
+        if (!q.placed) { q.vx += dx * f2; q.vy += dy * f2; }
+        if (!p.placed) { p.vx -= dx * f2; p.vy -= dy * f2; }
+        const d = Math.sqrt(d2);
+        const min = p.collide + q.collide;
+        if (d < min) {
+          const push = ((min - d) / d) * 0.35;
+          if (!q.placed) { q.vx += dx * push; q.vy += dy * push; }
+          if (!p.placed) { p.vx -= dx * push; p.vy -= dy * push; }
+        }
+      }
+    }
+
+    for (const p of n) {
+      // A slow breathing drift keeps every node alive — the sway.
+      //
+      // A placed node breathes too, at `PLACED_SWAY` of the amplitude. It
+      // used to be cut to nothing, on the reading that "it stays where I put
+      // it" ruled out any wandering at all; what that actually bought was a
+      // node that went dead the instant it was dropped, which is worse. The
+      // anchor spring still holds it to the spot it was put — the sway is an
+      // excursion around that point, not a walk away from it — so at a third
+      // of the free amplitude it reads as alive and still lands where it was
+      // left. Only the node under the pointer is held perfectly still, and
+      // only while it is held.
+      const idle = f.drag && p === f.drag.n ? 0 : (p.placed ? PLACED_SWAY : 1);
+      p.vx += Math.sin(t * 0.00042 + p.hx * 0.05) * 0.06 * idle;
+      p.vy += Math.cos(t * 0.00037 + p.hy * 0.05) * 0.06 * idle;
+      // A placed node is tethered harder than a free one, and at a fixed gain
+      // rather than one that fades with alpha.
+      //
+      // Its excursion is roughly `breathing impulse / spring gain`, and the
+      // free spring settles to `0.012 * 0.03` — weak enough that the same
+      // breathing walks a placed node right off its spot: measured drifting
+      // 3.6px to 17px over 8.4s and still climbing, which is not a sway, it
+      // is a departure. PLACED_ANCHOR holds the excursion near 7px, so the
+      // node breathes around where it was left instead of leaving.
+      const springK = p.placed ? PLACED_ANCHOR : 0.012 * a;
+      p.vx += (p.hx - p.x) * springK;
+      p.vy += (p.hy - p.y) * springK;
+      if (p.fx != null) { p.x = p.fx; p.vx = 0; } else { p.vx *= 0.6; p.x += p.vx; }
+      if (p.fy != null) { p.y = p.fy; p.vy = 0; } else { p.vy *= 0.6; p.y += p.vy; }
+      if (!isFinite(p.x) || !isFinite(p.y)) { p.x = p.hx; p.y = p.hy; p.vx = 0; p.vy = 0; }
+    }
+
+    holdArms(f);
+
+    for (const p of n) {
+      p.ring.setAttribute('cx', p.x.toFixed(1));
+      p.ring.setAttribute('cy', p.y.toFixed(1));
+      p.glow.setAttribute('cx', p.x.toFixed(1));
+      p.glow.setAttribute('cy', p.y.toFixed(1));
+      p.label.setAttribute('x', p.x.toFixed(1));
+      p.label.setAttribute('y', (p.y + p.ly).toFixed(1));
+    }
+
+    for (const l of L) {
+      const s0 = n[l.a];
+      const t0 = n[l.b];
+      if (!s0 || !t0) continue;
+      l.el.setAttribute('x1', s0.x.toFixed(1));
+      l.el.setAttribute('y1', s0.y.toFixed(1));
+      l.el.setAttribute('x2', t0.x.toFixed(1));
+      l.el.setAttribute('y2', t0.y.toFixed(1));
+    }
+
+    // linear ramp toward target, not d3's exponential decay
+    f.alpha += (f.target - f.alpha) * 0.02;
+  }
+
+  function step(vh: number, t: number): void {
+    if (!groups) return;
+    // before syncClusters(), so this frame's rects already carry the scroll
+    for (const f of groups) edgeAutoscroll(f, vh);
+    // must run before the visibility test below — that test reads cluster
+    // rects, which are only correct once this frame's transforms are applied
+    syncClusters();
+    // The clock can run backwards by a frame here: a scroll event that lands
+    // after `t` was stamped makes this negative, which still reads as
+    // scrolling. That is the safe direction to be wrong in.
+    const scrolling = t - lastScrollAt < SCROLL_QUIET_MS;
+    for (const f of groups) {
+      let anyVisible = false;
+      for (const cl of f.clusters) {
+        const b = cl.getBoundingClientRect();
+        if (b.bottom > -900 && b.top < vh + 900) { anyVisible = true; break; }
+      }
+      // re-resolve the held node against the cursor's screen position after
+      // the anchors move, so dragging survives a scroll underneath it
+      if (f.drag && f.drag.svg) {
+        const svg = f.drag.svg;
+        const r = svg.getBoundingClientRect();
+        const vb = svg.viewBox.baseVal;
+        if (r.width) {
+          const kx = vb && vb.width ? vb.width / r.width : 1;
+          const ky = vb && vb.height ? vb.height / r.height : 1;
+          f.drag.n.fx = (vb ? vb.x : 0) + (f.drag.cx - r.left) * kx;
+          f.drag.n.fy = (vb ? vb.y : 0) + (f.drag.cy - r.top) * ky;
+        }
+      }
+      // Frozen mid-scroll unless this group holds the pointer: `syncClusters()`
+      // has already translated it with its section, and any integration on top
+      // of that is motion the page didn't ask for.
+      if (scrolling && !f.drag) continue;
+      if (anyVisible || f.drag) stepGroup(f, vh, t);
+    }
+  }
+
+  function destroy(): void {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+    anchors.length = 0;
+    groups = null;
+    lastScrollAt = -Infinity;
+    if (overlay && overlay.parentElement) overlay.parentElement.removeChild(overlay);
+    overlay = null;
+  }
+
+  return { ensureInit, step, destroy };
+}
diff --git a/frontend/src/lib/landing/hero3d/cardTexture.ts b/frontend/src/lib/landing/hero3d/cardTexture.ts
new file mode 100644
index 00000000..bb2c19e5
--- /dev/null
+++ b/frontend/src/lib/landing/hero3d/cardTexture.ts
@@ -0,0 +1,334 @@
+/**
+ * The five product cards that float behind the v5 hero, drawn to 2D canvases.
+ *
+ * Ported from `_heroCardTex` in `Sapling Landing v5.dc.html`. Each card is
+ * painted once into an offscreen canvas and handed to three.js as a texture,
+ * so the "UI" in the hero is pixels, not DOM — it costs one draw at mount and
+ * nothing per frame.
+ *
+ * The canvas is deliberately larger than the card: a 56px margin all round
+ * gives the drop shadow room to fall without being clipped by the texture
+ * edge. That margin is why the plane's aspect is 692/572 rather than 580/460.
+ *
+ * Type sizes here are NOT free. The 460px-wide card body projects to roughly
+ * 230 CSS px on the near panels and 200 on the far ones, so everything drawn
+ * here lands at about half the size it reads at in this file. Anything under
+ * ~18px ends up below 9 CSS px on screen, where a one-pixel stroke covers less
+ * than half a device pixel and averages away into the card — which is what
+ * made the earlier 15px micro-copy look blurred and washed out rather than
+ * small. Treat 18px as the floor, and keep the micro-greys dark enough that a
+ * half-covered pixel still separates from #FDFCF9.
+ */
+
+/** Card body, in canvas units. */
+const W = 460;
+const H = 580;
+/** Bleed around the card, so the shadow isn't clipped. */
+const M = 56;
+const DPR = 2;
+/** Left text margin inside the card. */
+const P = 34;
+
+export const CARD_W = W + M * 2; // 572
+export const CARD_H = H + M * 2; // 692
+
+const SANS = "'DM Sans',system-ui,sans-serif";
+const MONO = "'JetBrains Mono',monospace";
+const SERIF = "'Spectral',Georgia,serif";
+const INK = '#12201A';
+const DIM = '#65736B';
+/** The lightest grey that still survives the downscale, for meta lines. */
+const FAINT = '#7E8C85';
+const LINE = 'rgba(20,45,32,0.10)';
+
+export type CardKind = 0 | 1 | 2 | 3 | 4;
+
+/**
+ * Draws one card and returns its canvas.
+ *
+ * Call again once webfonts have loaded — the first paint can land before
+ * DM Sans / Spectral / JetBrains Mono are ready, and the metrics differ
+ * enough that the wrapped copy re-flows.
+ */
+export function drawHeroCard(kind: CardKind): HTMLCanvasElement {
+  const c = document.createElement('canvas');
+  c.width = CARD_W * DPR;
+  c.height = CARD_H * DPR;
+  const x = c.getContext('2d');
+  if (!x) return c;
+  x.scale(DPR, DPR);
+  x.translate(M, M);
+
+  /** Rounded rect path. */
+  const rr = (a: number, b: number, w: number, h: number, r: number) => {
+    x.beginPath();
+    x.moveTo(a + r, b);
+    x.arcTo(a + w, b, a + w, b + h, r);
+    x.arcTo(a + w, b + h, a, b + h, r);
+    x.arcTo(a, b + h, a, b, r);
+    x.arcTo(a, b, a + w, b, r);
+    x.closePath();
+  };
+
+  // card body — filled twice: once to cast the shadow, once opaque over it
+  x.save();
+  x.shadowColor = 'rgba(18,45,32,0.24)';
+  x.shadowBlur = 46;
+  x.shadowOffsetY = 18;
+  x.fillStyle = '#FDFCF9';
+  rr(0, 0, W, H, 30);
+  x.fill();
+  x.restore();
+  x.fillStyle = '#FDFCF9';
+  rr(0, 0, W, H, 30);
+  x.fill();
+  x.strokeStyle = 'rgba(20,45,32,0.13)';
+  x.lineWidth = 2;
+  rr(1, 1, W - 2, H - 2, 30);
+  x.stroke();
+
+  const eyebrow = (t: string, y: number, col?: string) => {
+    x.font = '600 20px ' + MONO;
+    x.fillStyle = col || FAINT;
+    x.letterSpacing = '2.2px';
+    x.fillText(t, P, y);
+    x.letterSpacing = '0px';
+  };
+
+  const wrap = (t: string, y: number, max: number, lh: number, font: string, col: string) => {
+    x.font = font;
+    x.fillStyle = col;
+    let line = '';
+    let yy = y;
+    for (const w of t.split(' ')) {
+      const test = line ? line + ' ' + w : w;
+      if (x.measureText(test).width > max && line) {
+        x.fillText(line, P, yy);
+        yy += lh;
+        line = w;
+      } else line = test;
+    }
+    if (line) x.fillText(line, P, yy);
+    return yy + lh;
+  };
+
+  const bar = (y: number, label: string, pct: number, col: string) => {
+    x.font = '500 20px ' + SANS;
+    x.fillStyle = DIM;
+    x.fillText(label, P, y);
+    x.fillStyle = '#E9E5DA';
+    rr(P, y + 12, W - P * 2, 9, 5);
+    x.fill();
+    x.fillStyle = col;
+    rr(P, y + 12, (W - P * 2) * pct, 9, 5);
+    x.fill();
+  };
+
+  if (kind === 0) {
+    // ── course mastery ──
+    eyebrow('PY 205 · MECHANICS', 54);
+    x.font = '700 46px ' + SERIF;
+    x.fillStyle = '#1B6C42';
+    x.fillText('61%', P, 116);
+    x.font = '500 20px ' + SANS;
+    x.fillStyle = DIM;
+    x.fillText('course mastery', P + 100, 114);
+    bar(180, 'Kinematics', 0.84, '#3A7D4E');
+    bar(252, 'Momentum', 0.52, '#4FA574');
+    bar(324, 'Rotational torque', 0.21, '#C89B5E');
+    bar(396, 'Oscillation', 0.07, '#B25855');
+    x.strokeStyle = LINE;
+    x.beginPath();
+    x.moveTo(P, 468);
+    x.lineTo(W - P, 468);
+    x.stroke();
+    x.font = '500 20px ' + SANS;
+    x.fillStyle = DIM;
+    x.fillText('Next review · 14 cards due', P, 502);
+  } else if (kind === 1) {
+    // ── flashcard ──
+    eyebrow('CARD 03 / 12', 54);
+    x.fillStyle = '#B25855';
+    x.beginPath();
+    x.arc(W - P - 7, 48, 7, 0, 6.3);
+    x.fill();
+    x.fillStyle = '#F2F5EF';
+    rr(P, 90, W - P * 2, 230, 20);
+    x.fill();
+    x.strokeStyle = LINE;
+    x.lineWidth = 2;
+    rr(P + 1, 91, W - P * 2 - 2, 228, 20);
+    x.stroke();
+    x.font = '500 18px ' + MONO;
+    x.fillStyle = FAINT;
+    x.letterSpacing = '2.6px';
+    x.fillText('FRONT', P + 26, 126);
+    x.letterSpacing = '0px';
+    x.save();
+    x.translate(-8, 0);
+    wrap('What does the damping constant scale?', 178, W - P * 2 - 40, 42, '600 32px ' + SERIF, INK);
+    x.restore();
+    const chips: [string, string][] = [
+      ['Forgot', 'rgba(178,88,85,0.5)'],
+      ['Hard', 'rgba(200,155,94,0.55)'],
+      ['Easy', 'rgba(58,125,78,0.6)'],
+    ];
+    const cw = (W - P * 2 - 20) / 3;
+    chips.forEach((ch, i) => {
+      const cx0 = P + i * (cw + 10);
+      x.strokeStyle = ch[1];
+      x.lineWidth = 2;
+      rr(cx0, 360, cw, 54, 12);
+      x.stroke();
+      x.font = '500 21px ' + SANS;
+      x.fillStyle = DIM;
+      x.textAlign = 'center';
+      x.fillText(ch[0], cx0 + cw / 2, 394);
+      x.textAlign = 'left';
+    });
+    x.font = '500 20px ' + MONO;
+    x.fillStyle = FAINT;
+    x.fillText('next in 4d · 12d · 31d', P, 468);
+    x.strokeStyle = LINE;
+    x.lineWidth = 2;
+    x.beginPath();
+    x.moveTo(P, 496);
+    x.lineTo(W - P, 496);
+    x.stroke();
+    x.font = '500 20px ' + SANS;
+    x.fillStyle = DIM;
+    x.fillText('From: Lecture 9 notes.pdf', P, 530);
+  } else if (kind === 2) {
+    // ── adaptive quiz ──
+    eyebrow('ADAPTIVE QUIZ · CH 4', 54);
+    wrap(
+      'A block slides down a frictionless incline. Which quantity is conserved?',
+      106, W - P * 2, 38, '600 29px ' + SERIF, INK,
+    );
+    const opts: [string, number][] = [
+      ['Momentum along the slope', 0],
+      ['Mechanical energy', 1],
+      ['Normal force', 0],
+    ];
+    opts.forEach((o, i) => {
+      const y = 268 + i * 74;
+      x.fillStyle = o[1] ? 'rgba(58,125,78,0.09)' : '#F2F5EF';
+      rr(P, y, W - P * 2, 58, 14);
+      x.fill();
+      x.strokeStyle = o[1] ? 'rgba(58,125,78,0.55)' : LINE;
+      x.lineWidth = 2;
+      rr(P + 1, y + 1, W - P * 2 - 2, 56, 14);
+      x.stroke();
+      x.font = '500 21px ' + SANS;
+      x.fillStyle = o[1] ? '#1B6C42' : DIM;
+      x.fillText(o[0], P + 24, y + 37);
+      if (o[1]) {
+        x.strokeStyle = '#3A7D4E';
+        x.lineWidth = 3.4;
+        x.lineCap = 'round';
+        x.beginPath();
+        x.moveTo(W - P - 44, y + 29);
+        x.lineTo(W - P - 34, y + 39);
+        x.lineTo(W - P - 16, y + 19);
+        x.stroke();
+      }
+    });
+    x.font = '500 20px ' + MONO;
+    x.fillStyle = FAINT;
+    x.fillText('DIFFICULTY ↑  ·  4 OF 8', P, 512);
+  } else if (kind === 3) {
+    // ── mini knowledge graph ──
+    eyebrow('KNOWLEDGE GRAPH', 54);
+    const nodes: [number, number, number, string][] = [
+      [230, 210, 26, '#3A7D4E'], [130, 140, 13, '#4FA574'], [330, 145, 12, '#C89B5E'],
+      [110, 300, 11, '#B25855'], [340, 300, 14, '#4FA574'], [230, 360, 10, '#9A9A9A'],
+      [180, 250, 8, '#3A7D4E'], [300, 235, 9, '#C89B5E'],
+    ];
+    x.strokeStyle = 'rgba(27,108,66,0.26)';
+    x.lineWidth = 2;
+    const edges = [[0, 1], [0, 2], [0, 3], [0, 4], [0, 5], [0, 6], [0, 7], [1, 6], [2, 7], [3, 5]];
+    edges.forEach((e) => {
+      x.beginPath();
+      x.moveTo(nodes[e[0]][0], nodes[e[0]][1]);
+      x.lineTo(nodes[e[1]][0], nodes[e[1]][1]);
+      x.stroke();
+    });
+    nodes.forEach((n) => {
+      // '2A' is a hex alpha suffix — the halo is the node colour at ~16%
+      x.fillStyle = n[3] + '2A';
+      x.beginPath();
+      x.arc(n[0], n[1], n[2] + 8, 0, 6.3);
+      x.fill();
+      x.fillStyle = n[3];
+      x.beginPath();
+      x.arc(n[0], n[1], n[2], 0, 6.3);
+      x.fill();
+    });
+    x.strokeStyle = LINE;
+    x.lineWidth = 2;
+    x.beginPath();
+    x.moveTo(P, 440);
+    x.lineTo(W - P, 440);
+    x.stroke();
+    const leg: [string, string][] = [
+      ['Mastered', '#3A7D4E'], ['Learning', '#4FA574'], ['Needs work', '#B25855'],
+    ];
+    leg.forEach((l, i) => {
+      const y = 478 + i * 34;
+      x.fillStyle = l[1];
+      x.beginPath();
+      x.arc(P + 6, y - 5, 6, 0, 6.3);
+      x.fill();
+      x.font = '500 20px ' + SANS;
+      x.fillStyle = DIM;
+      x.fillText(l[0], P + 24, y);
+    });
+  } else {
+    // ── week calendar ──
+    eyebrow('THIS WEEK', 54);
+    const days = ['M', 'T', 'W', 'T', 'F'];
+    const cw = (W - P * 2) / 5;
+    days.forEach((d, i) => {
+      x.font = '500 20px ' + MONO;
+      x.fillStyle = FAINT;
+      x.textAlign = 'center';
+      x.fillText(d, P + cw * i + cw / 2, 106);
+      x.textAlign = 'left';
+    });
+    x.strokeStyle = LINE;
+    x.lineWidth = 2;
+    x.beginPath();
+    x.moveTo(P, 126);
+    x.lineTo(W - P, 126);
+    x.stroke();
+    const evts: [string, string, number][] = [
+      ['PY 205 · Problem set', '#3A7D4E', 0.72],
+      ['CS 111 · Midterm', '#B25855', 1],
+      ['Review · 22 cards', '#C89B5E', 0.5],
+      ['EC 101 · Reading', '#4FA574', 0.34],
+    ];
+    evts.forEach((e, i) => {
+      const y = 158 + i * 84;
+      x.fillStyle = '#F2F5EF';
+      rr(P, y, W - P * 2, 66, 14);
+      x.fill();
+      x.fillStyle = e[1];
+      rr(P, y, 5, 66, 3);
+      x.fill();
+      x.font = '500 21px ' + SANS;
+      x.fillStyle = INK;
+      x.fillText(e[0], P + 22, y + 30);
+      x.fillStyle = '#E9E5DA';
+      rr(P + 22, y + 43, W - P * 2 - 44, 7, 4);
+      x.fill();
+      x.fillStyle = e[1];
+      rr(P + 22, y + 43, (W - P * 2 - 44) * e[2], 7, 4);
+      x.fill();
+    });
+    x.font = '500 20px ' + MONO;
+    x.fillStyle = FAINT;
+    x.fillText('PULLED FROM SYLLABUS', P, 532);
+  }
+
+  return c;
+}
diff --git a/frontend/src/lib/landing/hero3d/index.ts b/frontend/src/lib/landing/hero3d/index.ts
new file mode 100644
index 00000000..3e1d00fb
--- /dev/null
+++ b/frontend/src/lib/landing/hero3d/index.ts
@@ -0,0 +1,218 @@
+/**
+ * The hero's WebGL panel rig.
+ *
+ * Ported from `_initHero3D` in `Sapling Landing v5.dc.html`, which builds
+ * three exclusive scenes cross-faded by a `heroMode` weight: floating product
+ * panels (0), an orbitable knowledge constellation (1), and a shader growth
+ * field (2).
+ *
+ * Only mode 0 is ported, because only mode 0 can ever be seen. The source
+ * exposes `setHero0/1/2` and the mode pills from `renderVals()`, but no
+ * markup in the file references any of them, so `heroMode` is pinned at 0 for
+ * the life of the page and the other two scenes — several hundred lines of
+ * GLSL — are unreachable. Porting them would be porting dead code. If a mode
+ * switcher is ever added back, they are recoverable from the source file.
+ *
+ * The rig is scroll-driven only. The panels ride the scroll on exactly the
+ * same curve as the DOM copy — see `getHeroShiftPx` below — and fade as the
+ * hero leaves. They deliberately do NOT scale down.
+ */
+
+import * as THREE from 'three';
+import { CARD_H, CARD_W, drawHeroCard, type CardKind } from './cardTexture';
+
+/** Panel width in world units; height follows the texture's aspect. */
+const CW = 2.02;
+const CH = CW * (CARD_H / CARD_W);
+
+/** Camera distance from the origin plane, on -Z. */
+const CAM_Z = 7.6;
+const FOV = 42;
+const TAN_HALF_FOV = Math.tan((FOV * Math.PI) / 360);
+
+/**
+ * Where each panel sits: card kind, position, rotation, scale.
+ *
+ * The two back panels used to sit at z −2.55 and −3.00, which projected their
+ * 460px-wide card bodies down to ~170 CSS px — a 0.37x downscale that put all
+ * their body copy under 7px and made it unreadable. They are pulled forward,
+ * with x/y divided by the same factor the distance shrank by, so each panel
+ * lands on precisely the same screen position as before and only grows.
+ */
+const LAYOUT: { kind: CardKind; pos: [number, number, number]; rot: [number, number, number]; scale: number }[] = [
+  { kind: 1, pos: [1.90, 1.50, -0.25], rot: [0.05, -0.26, -0.04], scale: 1.02 },
+  { kind: 0, pos: [-0.20, -0.45, 0.70], rot: [0.06, 0.11, 0.032], scale: 0.88 },
+  { kind: 2, pos: [3.70, 1.65, -1.45], rot: [0.04, -0.36, 0.05], scale: 1.05 },
+  { kind: 3, pos: [-3.13, 0.57, -0.60], rot: [0.05, 0.30, -0.05], scale: 0.90 },
+  { kind: 4, pos: [1.15, 1.90, -1.75], rot: [-0.05, -0.14, 0.03], scale: 1.00 },
+];
+
+/** Below this width the whole rig shrinks so it clears the copy. */
+const NARROW_PX = 1100;
+/**
+ * Cap the pixel ratio.
+ *
+ * This was 1.75 on the reasoning that the panels are soft-focus, so a higher
+ * ratio buys nothing. They are not soft-focus — the card copy is meant to be
+ * read — so on a HiDPI screen the cap was throwing away the density that makes
+ * the small type legible. 3 covers every panel a real display uses.
+ */
+const MAX_DPR = 3;
+
+export interface HeroRig {
+  stop(): void;
+}
+
+/**
+ * Mounts the rig on `canvas`.
+ *
+ * `getMouse` returns pointer position in -1..1 on both axes. `getHeroShiftPx`
+ * returns the very number the engine has just written into the hero copy's
+ * `translateY` — negative as the copy rides up — so the panels can be moved by
+ * the identical screen distance instead of running a scroll curve of their
+ * own. Returns null when WebGL is unavailable, so the caller can simply leave
+ * the canvas blank.
+ */
+export function startHeroRig(
+  canvas: HTMLCanvasElement,
+  getMouse: () => { x: number; y: number },
+  getHeroShiftPx: () => number,
+): HeroRig | null {
+  let renderer: THREE.WebGLRenderer;
+  try {
+    renderer = new THREE.WebGLRenderer({
+      canvas, antialias: true, alpha: true, powerPreference: 'high-performance',
+    });
+  } catch {
+    return null;
+  }
+  renderer.setClearColor(0x000000, 0);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(FOV, 1, 0.1, 200);
+  camera.position.set(0, 0, CAM_Z);
+
+  const group = new THREE.Group();
+  scene.add(group);
+
+  const maxAniso = renderer.capabilities.getMaxAnisotropy();
+  const panels = LAYOUT.map((L, i) => {
+    const tex = new THREE.CanvasTexture(drawHeroCard(L.kind));
+    tex.anisotropy = Math.min(8, maxAniso);
+    const mesh = new THREE.Mesh(
+      new THREE.PlaneGeometry(CW, CH),
+      new THREE.MeshBasicMaterial({ map: tex, transparent: true, depthWrite: false }),
+    );
+    mesh.scale.setScalar(L.scale);
+    const grp = new THREE.Group();
+    grp.add(mesh);
+    grp.position.set(...L.pos);
+    grp.rotation.set(...L.rot);
+    group.add(grp);
+    return {
+      grp, tex, kind: L.kind, base: L,
+      mat: mesh.material as THREE.MeshBasicMaterial,
+      // irrational-ish stagger so the five bob cycles never sync up
+      phase: i * 1.31,
+    };
+  });
+
+  // ── sizing ──────────────────────────────────────────────────────────
+  const resize = () => {
+    const w = canvas.clientWidth || window.innerWidth;
+    const h = canvas.clientHeight || window.innerHeight;
+    const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
+    renderer.setPixelRatio(dpr);
+    renderer.setSize(w, h, false);
+    camera.aspect = w / h;
+    camera.updateProjectionMatrix();
+    const s = w < NARROW_PX ? 0.72 : 1;
+    panels.forEach((p) => p.grp.scale.setScalar(s));
+  };
+  resize();
+  window.addEventListener('resize', resize);
+
+  // Webfont metrics change the wrapped copy, so repaint once they're ready.
+  let disposed = false;
+  if (document.fonts?.ready) {
+    document.fonts.ready.then(() => {
+      if (disposed) return;
+      panels.forEach((p) => {
+        p.tex.image = drawHeroCard(p.kind);
+        p.tex.needsUpdate = true;
+      });
+    });
+  }
+
+  // ── loop ────────────────────────────────────────────────────────────
+  let raf = 0;
+  let last = performance.now();
+  let t = 0;
+
+  const tick = (now: number) => {
+    raf = requestAnimationFrame(tick);
+    const dt = Math.min(0.05, (now - last) / 1000);
+    last = now;
+
+    // the rig is only ever on screen through the first viewport-and-a-bit
+    const vh = window.innerHeight || 1;
+    if (window.scrollY > vh * 1.35) return;
+
+    t += dt;
+
+    // The copy's scroll offset in CSS px (negative = risen). Everything below
+    // is derived from it, so the panels and the copy share one scroll curve —
+    // including its double-lerp smoothing — rather than two that drift apart.
+    const shiftPx = getHeroShiftPx();
+    const vpH = canvas.clientHeight || vh;
+    // the copy's own factor is 0.3, so a full viewport of scroll lifts it 0.3vh
+    const progress = Math.max(0, Math.min(1, -shiftPx / (0.3 * vh)));
+    // never reaches 0 — a sliver stays lit as the descent band takes over
+    const fade = 1 - progress * 0.92;
+
+    const { x: mx, y: my } = getMouse();
+
+    // whole-rig pointer lean, critically damped toward the target
+    group.rotation.y += (mx * 0.13 - group.rotation.y) * Math.min(1, dt * 2.2);
+    group.rotation.x += (my * 0.09 - group.rotation.x) * Math.min(1, dt * 2.2);
+    group.position.x += (-mx * 0.34 - group.position.x) * Math.min(1, dt * 2.0);
+    group.position.y += (my * 0.24 - group.position.y) * Math.min(1, dt * 2.0);
+
+    panels.forEach((p) => {
+      const s = t * 0.32 + p.phase;
+      // World units that span one screen pixel at this panel's depth. Each
+      // panel needs its own factor: they sit at different z, and a single
+      // scene-level offset would move the near ones further than the far ones.
+      const worldPerPx = (2 * (CAM_Z - p.base.pos[2]) * TAN_HALF_FOV) / vpH;
+      p.grp.position.y = p.base.pos[1] + Math.sin(s) * 0.18 - shiftPx * worldPerPx;
+      p.grp.position.x = p.base.pos[0] + Math.cos(s * 0.72) * 0.09;
+      p.grp.position.z = p.base.pos[2];
+      p.grp.rotation.z = p.base.rot[2] + Math.sin(s * 0.55) * 0.022;
+      p.grp.rotation.x = p.base.rot[0] + Math.sin(s * 0.63) * 0.03;
+      p.mat.opacity = fade;
+    });
+
+    camera.position.x += (mx * 0.16 - camera.position.x) * Math.min(1, dt * 1.6);
+    camera.position.y += (-my * 0.11 - camera.position.y) * Math.min(1, dt * 1.6);
+    camera.lookAt(0, 0, 0);
+
+    renderer.render(scene, camera);
+  };
+  raf = requestAnimationFrame(tick);
+
+  return {
+    stop() {
+      disposed = true;
+      cancelAnimationFrame(raf);
+      window.removeEventListener('resize', resize);
+      panels.forEach((p) => {
+        p.tex.dispose();
+        p.mat.dispose();
+        p.grp.children.forEach((ch) => {
+          if (ch instanceof THREE.Mesh) ch.geometry.dispose();
+        });
+      });
+      renderer.dispose();
+    },
+  };
+}