diff --git a/package.json b/package.json
index f7700727..0f50c328 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,10 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "d3-color": "^3.1.0",
+    "d3-format": "^3.1.2",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.18",
     "fast-xml-parser": "^5.3.8",
@@ -70,6 +74,10 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/d3-color": "^3.1.3",
+    "@types/d3-format": "^3.0.4",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.2.0",
     "@types/hast": "^3.0.5",
     "@types/node": "^20",
     "@types/react": "^19",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 987fc889..7b2b8928 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,18 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      d3-color:
+        specifier: ^3.1.0
+        version: 3.1.0
+      d3-format:
+        specifier: ^3.1.2
+        version: 3.1.2
+      d3-scale:
+        specifier: ^4.0.2
+        version: 4.0.2
+      d3-shape:
+        specifier: ^3.2.0
+        version: 3.2.0
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -165,6 +177,18 @@ importers:
       '@tailwindcss/postcss':
         specifier: ^4
         version: 4.2.2
+      '@types/d3-color':
+        specifier: ^3.1.3
+        version: 3.1.3
+      '@types/d3-format':
+        specifier: ^3.0.4
+        version: 3.0.4
+      '@types/d3-scale':
+        specifier: ^4.0.9
+        version: 4.0.9
+      '@types/d3-shape':
+        specifier: ^3.2.0
+        version: 3.2.0
       '@types/hast':
         specifier: ^3.0.5
         version: 3.0.5
@@ -1801,6 +1825,24 @@ packages:
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.2.0':
+    resolution: {integrity: sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
   '@types/debug@4.1.13':
     resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
 
@@ -6372,6 +6414,22 @@ snapshots:
   '@types/cookie@0.6.0':
     optional: true
 
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.2.0':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
   '@types/debug@4.1.13':
     dependencies:
       '@types/ms': 2.1.0
diff --git a/src/app/api/elections/candidate-responses/route.ts b/src/app/api/elections/candidate-responses/route.ts
new file mode 100644
index 00000000..72cb1e4b
--- /dev/null
+++ b/src/app/api/elections/candidate-responses/route.ts
@@ -0,0 +1,105 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import {
+  CANDIDATE_QUESTIONNAIRE_SLUG,
+  fetchCandidateResponses,
+} from "@/lib/elections/candidate-responses";
+import {
+  DEFAULT_ELECTION_SLUG,
+  isSupportedElection,
+} from "@/lib/elections/registry";
+import {
+  TORONTO_2026_SLUG,
+  getToronto2026,
+  getToronto2026Ward,
+  nameKey,
+} from "@/app/toronto/vote/2026/data";
+
+// Published candidate questionnaire answers for one ward.
+//
+// A read proxy, not a data source: everything it returns is already public
+// through York Factory's own endpoint, and it exists because the survey page
+// only learns which ward to ask about after the API has placed the respondent
+// from their postal code. Fetching it server-side at page load would mean
+// shipping every ward's answers to every visitor to use one ward's worth.
+//
+// The mayoral field rides along too. A voter marks two ballots — one for their
+// councillor, one for mayor — so a comparison that answers only half of that is
+// answering the smaller half: the mayoral race is the one every voter in the
+// city votes in.
+//
+// The ward's roster rides along with the answers. The comparison names every
+// candidate on the ballot, not only the ones who wrote back — a reader wants to
+// know that the candidate they are considering said nothing as much as they
+// want to know what the others said — and the roster is the only place that
+// fact lives. Toronto is the only region with a survey page, so it is the only
+// region this looks one up for; everyone else gets an empty roster and a
+// comparison of respondents alone.
+//
+// `election` is checked against the registry so a client cannot aim this at an
+// arbitrary slug, matching the submit route.
+
+const WARD_PATTERN = /^\d{1,2}$/;
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const election = searchParams.get("election") ?? DEFAULT_ELECTION_SLUG;
+  const ward = searchParams.get("ward") ?? "";
+
+  if (!isSupportedElection(election)) {
+    return NextResponse.json({ error: "Unknown election" }, { status: 400 });
+  }
+  if (!WARD_PATTERN.test(ward)) {
+    return NextResponse.json({ error: "Invalid ward" }, { status: 400 });
+  }
+
+  const toronto = election === TORONTO_2026_SLUG;
+  const wardToken = ward.padStart(2, "0");
+
+  const [data, detail, view, everyResponse] = await Promise.all([
+    fetchCandidateResponses(election, {
+      ward,
+      surveySlug: CANDIDATE_QUESTIONNAIRE_SLUG,
+    }),
+    toronto ? getToronto2026Ward(wardToken).catch(() => null) : null,
+    toronto ? getToronto2026().catch(() => null) : null,
+    // Unfiltered, because the mayoral field is on no ward: the responses are
+    // narrowed to the mayoral roster by name below, the same join every other
+    // surface uses.
+    toronto
+      ? fetchCandidateResponses(election, {
+          surveySlug: CANDIDATE_QUESTIONNAIRE_SLUG,
+        })
+      : [],
+  ]);
+
+  const roster = (detail?.councilRaces ?? [])
+    .flatMap((race) => race.candidates)
+    .map(rosterEntry);
+
+  const mayoralRoster = (view?.mayoral ?? []).map(rosterEntry);
+  const mayoralKeys = new Set(mayoralRoster.map((candidate) => candidate.key));
+  const mayoralData = everyResponse.filter((response) =>
+    mayoralKeys.has(nameKey(response.candidateName)),
+  );
+
+  return NextResponse.json({
+    data,
+    roster,
+    mayoral: { data: mayoralData, roster: mayoralRoster },
+  });
+}
+
+function rosterEntry(candidate: {
+  key: string;
+  name: string;
+  website?: string;
+  withdrawn: boolean;
+}) {
+  return {
+    key: candidate.key,
+    name: candidate.name,
+    website: candidate.website,
+    withdrawn: candidate.withdrawn,
+  };
+}
diff --git a/src/app/api/elections/pledge/route.ts b/src/app/api/elections/pledge/route.ts
index 024d06ea..c6f71574 100644
--- a/src/app/api/elections/pledge/route.ts
+++ b/src/app/api/elections/pledge/route.ts
@@ -7,6 +7,7 @@ import {
   isSupportedElection,
 } from "@/lib/elections/registry";
 import { forwardedHubspotContext } from "@/lib/hubspot-context";
+import { normalizePostalCode } from "@/lib/elections/postal-code";
 
 // "Pledge to vote" submissions — same low-friction pattern as /api/subscribe.
 // Forwards {email, name, region, postal_code} to York Factory, which signs the
@@ -19,17 +20,6 @@ import { forwardedHubspotContext } from "@/lib/hubspot-context";
 // defaults to the election's jurisdiction ("toronto", "brampton", …).
 
 const REGION_PATTERN = /^[a-z0-9-]{1,50}$/;
-const POSTAL_PATTERN = /^[A-Za-z]\d[A-Za-z] ?\d[A-Za-z]\d$/;
-
-// "M5V1A1" / "m5v 1a1" → "M5V 1A1"; anything malformed is dropped rather
-// than stored dirty
-function normalizePostalCode(raw: unknown): string | undefined {
-  if (typeof raw !== "string" || !POSTAL_PATTERN.test(raw.trim())) {
-    return undefined;
-  }
-  const compact = raw.trim().toUpperCase().replace(" ", "");
-  return `${compact.slice(0, 3)} ${compact.slice(3)}`;
-}
 
 export async function POST(req: NextRequest) {
   try {
diff --git a/src/app/api/elections/survey/route.ts b/src/app/api/elections/survey/route.ts
new file mode 100644
index 00000000..3bc9653e
--- /dev/null
+++ b/src/app/api/elections/survey/route.ts
@@ -0,0 +1,125 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { API_URL } from "@/lib/api/client";
+import {
+  DEFAULT_ELECTION_SLUG,
+  getElection,
+  isSupportedElection,
+} from "@/lib/elections/registry";
+import { normalizePostalCode } from "@/lib/elections/postal-code";
+import { forwardedHubspotContext } from "@/lib/hubspot-context";
+
+// Resident-survey submissions — same shape as /api/elections/pledge. Forwards
+// to York Factory, which signs the email up as a subscriber and records one
+// response per subscriber per survey per election (re-submitting replaces the
+// answers).
+//
+// `election` is checked against the registry before it reaches the API, so a
+// client can't aim this at an arbitrary slug. The answers themselves are
+// passed through untouched: the question set is York Factory's, served from
+// there and rendered by the survey page, so validating question ids in this
+// proxy would only add a third copy of them to keep in step. York Factory
+// applies structural limits (count, key and value length) and owns the
+// question ids on both sides of the round trip.
+
+const SLUG_PATTERN = /^[a-z0-9-]{1,100}$/;
+const REGION_PATTERN = /^[a-z0-9-]{1,50}$/;
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const {
+      email,
+      name,
+      answers,
+      survey_slug,
+      survey_version,
+      region,
+      postal_code,
+      election,
+    } = body;
+
+    if (!email || typeof email !== "string") {
+      return NextResponse.json({ error: "Email is required" }, { status: 400 });
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      return NextResponse.json(
+        { error: "Invalid email format" },
+        { status: 400 },
+      );
+    }
+
+    if (!answers || typeof answers !== "object" || Array.isArray(answers)) {
+      return NextResponse.json(
+        { error: "Answers are required" },
+        { status: 400 },
+      );
+    }
+
+    if (election !== undefined && !isSupportedElection(election)) {
+      return NextResponse.json({ error: "Unknown election" }, { status: 400 });
+    }
+    const electionSlug = isSupportedElection(election)
+      ? election
+      : DEFAULT_ELECTION_SLUG;
+    const config = getElection(electionSlug);
+
+    if (typeof survey_slug !== "string" || !SLUG_PATTERN.test(survey_slug)) {
+      return NextResponse.json(
+        { error: "A survey_slug is required" },
+        { status: 400 },
+      );
+    }
+
+    // A malformed region is dropped rather than rejected — the ward is a
+    // nice-to-have for cutting results, not worth failing a completed survey
+    // over. The postal code is kept on the response so it can be re-derived.
+    const safeRegion =
+      typeof region === "string" && REGION_PATTERN.test(region)
+        ? region
+        : undefined;
+
+    const res = await fetch(
+      `${API_URL}/elections/${electionSlug}/survey_responses`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email,
+          name: typeof name === "string" ? name.slice(0, 100) : undefined,
+          answers,
+          survey_slug,
+          survey_version:
+            typeof survey_version === "string" ? survey_version : undefined,
+          region: safeRegion,
+          postal_code: normalizePostalCode(postal_code),
+          ...forwardedHubspotContext(body, req),
+        }),
+        cache: "no-store",
+      },
+    );
+
+    if (!res.ok) {
+      const errorData = await res.json().catch(() => ({}));
+      return NextResponse.json(
+        { error: errorData.errors?.[0] || "Survey submission failed" },
+        { status: res.status },
+      );
+    }
+
+    const data = await res.json();
+
+    return NextResponse.json({
+      success: true,
+      election: config.slug,
+      surveySlug: data.survey_slug ?? survey_slug,
+      region: data.region ?? null,
+      derivedRegion: data.derived_region ?? null,
+      submittedAt: data.submitted_at ?? null,
+    });
+  } catch (err) {
+    return NextResponse.json({ error: String(err) }, { status: 500 });
+  }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index cdd3e968..fa23adbc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -117,6 +117,28 @@ html {
   100% { transform: rotate(0deg); }
 }
 
+/* ─── Multi-step form transitions ─── */
+
+/* Each field in a step rises into place as it fades in. Staggered by an
+   inline animation-delay from the field's index. `forwards` plus the
+   reduced-motion override above means these still end up visible when
+   animation is disabled. */
+@keyframes stepFieldIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.step-field {
+  opacity: 0;
+  animation: stepFieldIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
 .accordion-expand {
   display: grid;
   grid-template-rows: 1fr;
diff --git a/src/app/ottawa/vote/2026/page.tsx b/src/app/ottawa/vote/2026/page.tsx
index adb06573..4ad827c7 100644
--- a/src/app/ottawa/vote/2026/page.tsx
+++ b/src/app/ottawa/vote/2026/page.tsx
@@ -109,7 +109,9 @@ function PreRoster() {
           </div>
           <p className="mt-7 pt-5 border-t border-border-light font-serif text-[1.05rem] leading-[1.4]">
             Polls open{" "}
-            <span className="text-accent">{ELECTION.voteDayLabel},&nbsp;2026</span>
+            <span className="text-accent">
+              {ELECTION.voteDayLabel},&nbsp;2026
+            </span>
             , {ELECTION.pollHoursLabel}.
           </p>
         </section>
@@ -134,23 +136,29 @@ function PreRoster() {
           </div>
 
           <WardMapDefs geo={WARD_GEO} />
-          <div className="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] border-t border-l border-border-light">
-            {WARDS.map((ward) => (
-              <WardCard
-                key={ward.n}
-                ward={ward}
-                basePath={ELECTION.basePath}
-                countLabel="Candidates to come"
-                map={
-                  <WardMap
-                    geo={WARD_GEO}
-                    activeWard={ward.n}
-                    className="w-[92px] h-auto flex-none block"
-                  />
-                }
-                className="border-b border-r border-border-light"
-              />
-            ))}
+          {/* Cells rule after themselves and the overhang is clipped, so the
+              grid closes once on every side — see CardGrid in ElectionLanding,
+              which this mirrors by hand rather than importing a component out
+              of a shared page. */}
+          <div className="overflow-hidden">
+            <div className="-mb-px -mr-px grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] border-t border-border-light">
+              {WARDS.map((ward) => (
+                <WardCard
+                  key={ward.n}
+                  ward={ward}
+                  basePath={ELECTION.basePath}
+                  countLabel="Candidates to come"
+                  map={
+                    <WardMap
+                      geo={WARD_GEO}
+                      activeWard={ward.n}
+                      className="w-[92px] h-auto flex-none block"
+                    />
+                  }
+                  className="border-b border-r border-border-light"
+                />
+              ))}
+            </div>
           </div>
         </section>
 
@@ -158,8 +166,8 @@ function PreRoster() {
         <section className="px-6 py-14 md:px-14 md:py-16">
           <p className="type-label-sm text-text-muted !tracking-[0.06em] max-w-[60ch] leading-[1.7]">
             Ward boundaries are the City of Ottawa&rsquo;s published 2022–2026
-            wards. The candidate list will follow the City Clerk&rsquo;s official
-            registered-candidate listing once nominations open.
+            wards. The candidate list will follow the City Clerk&rsquo;s
+            official registered-candidate listing once nominations open.
           </p>
         </section>
       </div>
diff --git a/src/app/toronto/page.tsx b/src/app/toronto/page.tsx
index e5484b49..413b13c9 100644
--- a/src/app/toronto/page.tsx
+++ b/src/app/toronto/page.tsx
@@ -293,7 +293,7 @@ function ElectionCardsSection() {
 
           <ElectionCard
             href={ELECTION.basePath}
-            title="Explore the candidates"
+            title="Explore the election"
             cta="See all candidates"
             className="bg-bg text-dark"
             buttonClassName={button}
diff --git a/src/app/toronto/vote/2026/data.ts b/src/app/toronto/vote/2026/data.ts
index e69ab1b6..c9d62dbd 100644
--- a/src/app/toronto/vote/2026/data.ts
+++ b/src/app/toronto/vote/2026/data.ts
@@ -37,6 +37,9 @@ export { initialsFor, nameKey };
 
 export const ELECTION = getElection("toronto-2026");
 
+/** The York Factory slug, for the shared routes that special-case this region. */
+export const TORONTO_2026_SLUG = ELECTION.slug;
+
 /** Zero-padded ward numbers ("01".."25") for static route generation. */
 export const WARD_NUMBERS: string[] = WARD_SHAPES.map((w) => w.n);
 
diff --git a/src/app/toronto/vote/2026/issues/page.tsx b/src/app/toronto/vote/2026/issues/page.tsx
new file mode 100644
index 00000000..9de52097
--- /dev/null
+++ b/src/app/toronto/vote/2026/issues/page.tsx
@@ -0,0 +1,276 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import {
+  QuestionnaireCards,
+  questionnaireHeadings,
+} from "@/components/elections/QuestionnaireCards";
+import { QuestionnaireRail } from "@/components/elections/QuestionnaireRail";
+import { SurveyCta } from "@/components/elections/SurveyCta";
+import CountdownDays from "@/components/elections/CountdownDays";
+import { fieldSentiment } from "@/lib/elections/field-sentiment";
+import {
+  candidateAnswers,
+  comparedQuestions,
+  questionnaireShape,
+} from "@/lib/elections/candidate-answers";
+import {
+  CANDIDATE_QUESTIONNAIRE_SLUG,
+  fetchCandidateResponses,
+} from "@/lib/elections/candidate-responses";
+import { fetchSurvey } from "@/lib/elections/survey";
+import { daysUntil } from "@/lib/elections/dates";
+import { ELECTION } from "../data";
+
+/* Where the field stands, across every issue we asked about.
+ *
+ * The ward pages and the mayoral page each show one ballot's answers as a
+ * grid. This page shows all of them at once, and drops the grid to do it:
+ * thirty-two respondents will not fit as columns, and the city-wide question
+ * is not "what did this candidate say" anyway. It is where the people running
+ * to govern Toronto converge, and where they split.
+ *
+ * A card per question, with the candidates filed under the answer they gave —
+ * the same roll-call form the ward and mayoral pages use, so a reader who has
+ * learned to read one page of the tracker can read all of them. The only
+ * difference here is scale: the field is the whole city, so a name plate also
+ * carries the seat that candidate is running for.
+ *
+ * The shell around them is deliberately short. Two dozen questions is the
+ * page; every band of prose above them is a band the reader scrolls past to
+ * reach it, so the hero states the premise once and the stats row carries the
+ * rest of what a masthead would say.
+ */
+
+export const metadata: Metadata = {
+  title: "Where the candidates stand",
+  description:
+    "Every candidate answer to our Toronto 2026 questionnaire, read across the whole field: where the candidates agree, and where they split.",
+  alternates: { canonical: `${ELECTION.basePath}/issues` },
+  openGraph: {
+    title: "Where the candidates stand — Toronto 2026 Election",
+    description:
+      "How the field answered our questionnaire, issue by issue: the consensus, and the fights.",
+    type: "website",
+  },
+};
+
+export default async function IssuesPage() {
+  /* Unlike the ward and mayoral pages, the questionnaire is not a
+     nice-to-have here — it is the entire page. A failed fetch has nothing to
+     fall back to, so it renders as the empty state rather than as a roster. */
+  const [survey, responses] = await Promise.all([
+    fetchSurvey(ELECTION.slug, CANDIDATE_QUESTIONNAIRE_SLUG).catch(() => null),
+    fetchCandidateResponses(ELECTION.slug),
+  ]);
+
+  /* `fieldSentiment` is still what tells us who counts as a respondent and
+     what seat they are running for — it reads the responses against the
+     ballot and drops anyone who returned the form without answering a policy
+     question. The cards themselves come from the same pivot the ward and
+     mayoral pages use, over the whole city's entries rather than one race's. */
+  const field = survey ? fieldSentiment(survey, responses) : null;
+  const respondents = field?.respondents ?? [];
+  const mayoral = respondents.filter((r) => r.race === "mayor").length;
+  const council = respondents.length - mayoral;
+  const wards = new Set(respondents.filter((r) => r.ward).map((r) => r.ward))
+    .size;
+
+  /* The roster the cards name, in the order `fieldSentiment` sorted it
+     (surname), and the seat each of them is running for — which is both what
+     prints on a plate and what splits each answer into its two races. */
+  const roster = respondents.map((r) => ({ key: r.key, name: r.name }));
+  const seats = Object.fromEntries(
+    respondents.map((r) => [
+      r.key,
+      r.ward
+        ? { race: "councillor" as const, label: `Ward ${r.ward}` }
+        : { race: "mayor" as const },
+    ]),
+  );
+
+  const entries = survey ? candidateAnswers(survey, responses) : [];
+  const groups = comparedQuestions(
+    entries,
+    roster,
+    survey ? questionnaireShape(survey, responses) : undefined,
+  );
+  /* Counted off the cards rather than off the questionnaire: a question
+     nobody has answered yet draws no card, and a stats row that claims one
+     more question than the page shows is a stats row a reader can catch. */
+  const questionCount = groups.reduce(
+    (n, group) => n + group.questions.length,
+    0,
+  );
+
+  return (
+    <div className={`${ELECTION.themeClass ?? ""} bg-bg text-dark`}>
+      <div className="mx-[10px] my-[10px] border border-border-light bg-bg overflow-x-clip">
+        {/* ── Breadcrumb ─────────────────────────────────────── */}
+        <div className="px-6 md:px-14 py-4 border-b border-border-light type-label-sm !tracking-[0.1em] flex items-center gap-2.5">
+          <Link
+            href={ELECTION.basePath}
+            className="text-text-secondary hover:text-accent transition-colors"
+          >
+            Toronto 2026
+          </Link>
+          <span className="text-border-light">/</span>
+          <span>Where they stand</span>
+        </div>
+
+        {/* ── Hero ───────────────────────────────────────────── */}
+        <section className="px-6 py-8 md:px-14 md:py-10 border-b-2 border-dark">
+          <p className="type-label text-accent mb-3.5">The whole field</p>
+          <h1 className="font-sans font-medium leading-[0.98] tracking-[-0.04em] text-[clamp(2.25rem,4.5vw,3.75rem)] max-w-[17ch] text-balance mb-4">
+            Where the candidates stand
+          </h1>
+          <p className="font-serif text-[1.05rem] leading-[1.5] text-dark/85 max-w-[58ch] text-pretty">
+            The same {questionCount} questions, put to everyone
+            running for mayor and for council. Read across the whole field, the
+            answers show what no single ballot can: what Toronto&rsquo;s next
+            council already agrees on, and what it will spend four years
+            fighting over.
+          </p>
+        </section>
+
+        {/* ── Key stats ──────────────────────────────────────── */}
+        <section className="grid grid-cols-2 md:grid-cols-4 border-b-2 border-dark">
+          <Stat value={respondents.length} label="Candidates answered" />
+          <Stat value={questionCount} label="Policy questions" />
+          <Stat
+            value={`${mayoral} / ${council}`}
+            label="Mayoral / council"
+            small
+          />
+          <Stat value={wards} label="Wards represented" last />
+        </section>
+
+        {/* ── The field, question by question ────────────────── */}
+        {groups.length > 0 && respondents.length > 0 ? (
+          <section className="px-6 md:px-14 py-9 md:py-11 border-b-2 border-dark">
+            {/* No roster above the cards, unlike the ward and mayoral pages.
+                Theirs names one ballot line and links each candidate to their
+                campaign; this page's field is thirty-odd people across a
+                mayoral race and two dozen wards, and a flat list of them is a
+                list with no ballot behind it. The seat on each plate is the
+                pointer instead. */}
+            <QuestionnaireRail headings={questionnaireHeadings(groups)}>
+              <QuestionnaireCards
+                groups={groups}
+                respondents={roster}
+                silent={[]}
+                seats={seats}
+                notes={false}
+              />
+            </QuestionnaireRail>
+          </section>
+        ) : (
+          <section className="px-6 md:px-14 py-16 border-b-2 border-dark">
+            <p className="font-serif text-[1.1rem] leading-[1.5] text-dark/80 max-w-[58ch] text-pretty">
+              No candidate answers have been published yet. Responses appear
+              here as they are reviewed and released.
+            </p>
+          </section>
+        )}
+
+        {/* ── Your turn ──────────────────────────────────────── */}
+        <section className="px-6 md:px-14 py-9 md:py-10 border-t-2 border-dark grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
+          <div>
+            <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.6rem,2.6vw,2.1rem)] max-w-[20ch] text-balance">
+              Now answer them yourself
+            </h2>
+            <p className="mt-3.5 font-serif text-[1.05rem] leading-[1.5] text-dark/85 max-w-[56ch] text-pretty">
+              These are the same questions we asked the candidates. Answer them
+              and see which of the {respondents.length} line up with you — and
+              where you sit against the field you just read.
+            </p>
+            <div className="mt-6 flex flex-wrap items-center gap-x-7 gap-y-3">
+              <CountdownDays
+                initialDays={daysUntil(ELECTION.electionDateIso)}
+                targetIso={ELECTION.electionDateIso}
+                className="font-sans font-semibold text-[2.25rem] leading-none tracking-[-0.03em] tabular-nums"
+              />
+              <span className="type-label-sm !tracking-[0.1em] text-text-secondary">
+                Days until polls open
+              </span>
+            </div>
+          </div>
+          <SurveyCta href={`${ELECTION.basePath}/survey`} />
+        </section>
+
+        {/* ── Method ─────────────────────────────────────────── */}
+        <section className="px-6 md:px-14 py-4 border-t border-border-light grid gap-2">
+          <p className="type-label-sm text-text-muted max-w-[80ch] text-pretty">
+            Each card is one question, and each block inside it is one of the
+            answers offered, printed in the wording the candidates were shown.
+            Under it are the candidates who gave that answer, with the seat
+            they are running for. Options nobody picked are not shown, and a
+            candidate who answered in their own words sits on no option.
+          </p>
+          <p className="type-label-sm text-text-muted max-w-[80ch] text-pretty">
+            Most candidates also wrote a note explaining their answer. Thirty
+            of them under every question is more reading than this page can
+            carry, so the notes live on the ward and mayoral pages, where the
+            field is small enough to read them in full. Answers appear as
+            candidates return the questionnaire and staff review them, so the
+            field shown here grows through the campaign.
+          </p>
+        </section>
+
+        {/* ── Elsewhere ──────────────────────────────────────── */}
+        <section className="border-t border-dark grid md:grid-cols-2">
+          <Link
+            href={`${ELECTION.basePath}/mayor`}
+            className="group px-6 md:px-14 py-6 flex items-center justify-between gap-4 transition-colors hover:bg-linen-50"
+          >
+            <span className="font-sans font-medium text-[1.15rem] tracking-[-0.015em]">
+              The mayoral field, side by side
+            </span>
+            <ArrowRight className="size-4 flex-none text-text-secondary transition-transform group-hover:translate-x-0.5" />
+          </Link>
+          <Link
+            href={`${ELECTION.basePath}#wards`}
+            className="group px-6 md:px-14 py-6 flex items-center gap-2.5 border-t md:border-t-0 md:border-l border-border-light transition-colors hover:bg-linen-50"
+          >
+            <ArrowLeft className="size-3.5 text-text-secondary" />
+            <span className="font-sans font-medium text-[1.15rem] tracking-[-0.015em]">
+              Find your ward
+            </span>
+          </Link>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function Stat({
+  value,
+  label,
+  small = false,
+  last = false,
+}: {
+  value: number | string;
+  label: string;
+  small?: boolean;
+  last?: boolean;
+}) {
+  return (
+    <div
+      className={`px-6 py-4 md:px-14 border-b md:border-b-0 border-border-light ${
+        last ? "" : "border-r"
+      }`}
+    >
+      <div
+        className={`font-sans font-semibold leading-none tracking-[-0.03em] tabular-nums ${
+          small ? "text-[1.5rem] pt-1.5" : "text-[2rem]"
+        }`}
+      >
+        {value}
+      </div>
+      <div className="type-label-sm !tracking-[0.1em] text-text-secondary mt-1.5">
+        {label}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/toronto/vote/2026/mayor/candidates/page.tsx b/src/app/toronto/vote/2026/mayor/candidates/page.tsx
new file mode 100644
index 00000000..0f670705
--- /dev/null
+++ b/src/app/toronto/vote/2026/mayor/candidates/page.tsx
@@ -0,0 +1,307 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import {
+  IncumbentBadge,
+  SiteLink,
+} from "@/components/elections/ElectionLanding";
+import CountdownDays from "@/components/elections/CountdownDays";
+import { surveyRoster } from "@/lib/elections/candidate-answers";
+import { daysUntil } from "@/lib/elections/dates";
+import { rosterSurvey } from "@/lib/elections/survey-answers";
+import type { CandidateView } from "@/lib/elections/election-data";
+import { ELECTION, getToronto2026 } from "../../data";
+
+/* Everyone running for mayor, on a page of their own.
+ *
+ * WHY IT EXISTS
+ *   The roster lived on the landing page as a grid of portrait cards, and the
+ *   field is now fifty-odd people: half a screen of the city's front page
+ *   spent on a list whose reader either wants one name or wants all of them,
+ *   and in both cases is better served somewhere they can look properly. The
+ *   landing page's job is to point at races. This is the race.
+ *
+ *   It is also the page /mayor never was. That route is titled "Candidates for
+ *   Mayor" and holds the questionnaire read across the field — thirty-odd
+ *   questions by every column — which answers "what did they say" and never
+ *   answers "who is running". A reader who wants the ballot got a grid.
+ *
+ * ANSWERED FIRST, AND SAID SO
+ *   The field splits in two: the candidates who returned our questionnaire and
+ *   the candidates who have not. That is the most useful sort available — it
+ *   is the difference between a name and a position — and `surveyRoster`
+ *   already orders it that way, so the page prints the boundary rather than
+ *   leaving the reader to infer it from a missing link. Within each group,
+ *   surname order, because the alternative is a ranking nobody asked us to
+ *   make.
+ *
+ *   Withdrawn candidates keep a group at the foot rather than vanishing. Some
+ *   clerks never drop them, they appear on lists elsewhere, and a reader who
+ *   comes here holding a name needs to find out it is no longer a candidate.
+ */
+
+export const metadata: Metadata = {
+  title: "Every candidate for Mayor of Toronto",
+  description:
+    "The full field for Mayor of Toronto in the October 26, 2026 election: every registered candidate, their campaign site, and whether they answered our questionnaire.",
+  alternates: { canonical: `${ELECTION.basePath}/mayor/candidates` },
+  openGraph: {
+    title: "Every candidate for Mayor — Toronto 2026 Election",
+    description:
+      "The full field for Mayor of Toronto: who is running, and who has told us where they stand.",
+    type: "website",
+  },
+};
+
+export default async function MayoralCandidatesPage() {
+  const view = await getToronto2026();
+
+  /* Same two-step the questionnaire grid uses: the roster names the field, and
+     the survey fetch is keyed to it, so a response from someone who is not on
+     the ballot cannot put a stranger on this page. */
+  const named = surveyRoster(view.mayoral);
+  const { answers } = await rosterSurvey(
+    ELECTION.slug,
+    new Set(named.map((candidate) => candidate.key)),
+  );
+  const roster = surveyRoster(view.mayoral, answers);
+
+  const answered = roster.filter((candidate) => candidate.answers);
+  const quiet = roster.filter((candidate) => !candidate.answers);
+  const withdrawn = view.mayoral.filter((candidate) => candidate.withdrawn);
+  const sites = roster.filter((candidate) => candidate.website).length;
+
+  return (
+    <div className={`${ELECTION.themeClass ?? ""} bg-bg text-dark`}>
+      <div className="mx-[10px] my-[10px] border border-border-light bg-bg overflow-x-clip">
+        {/* ── Breadcrumb ─────────────────────────────────────── */}
+        <div className="px-6 md:px-14 py-4 border-b border-border-light type-label-sm !tracking-[0.1em] flex items-center gap-2.5">
+          <Link
+            href={ELECTION.basePath}
+            className="text-text-secondary hover:text-accent transition-colors"
+          >
+            Toronto 2026
+          </Link>
+          <span className="text-border-light">/</span>
+          <span>Candidates for Mayor</span>
+        </div>
+
+        {/* ── Hero ───────────────────────────────────────────── */}
+        <section className="px-6 py-8 md:px-14 md:py-10 border-b-2 border-dark">
+          <p className="type-label text-accent mb-3.5">City of Toronto</p>
+          <h1 className="font-sans font-medium leading-[0.98] tracking-[-0.04em] text-[clamp(2.25rem,4.5vw,3.75rem)] max-w-[16ch] text-balance mb-4">
+            Everyone running for mayor
+          </h1>
+          <p className="font-serif text-[1.05rem] leading-[1.5] text-dark/85 max-w-[58ch] text-pretty">
+            The one race every Toronto voter votes in, and the longest ballot in
+            the city.{" "}
+            {roster.length > 0 && answered.length > 0
+              ? `${roster.length} candidates have registered; ${answered.length} of them have told us where they stand.`
+              : `${roster.length} candidates have registered.`}
+          </p>
+        </section>
+
+        {/* ── Key stats ──────────────────────────────────────── */}
+        <section className="grid grid-cols-2 md:grid-cols-4 border-b-2 border-dark">
+          <Stat value={roster.length} label="On the ballot" />
+          <Stat value={answered.length} label="Answered us" />
+          <Stat value={sites} label="With a campaign site" />
+          <div className="px-6 py-4 md:px-14 border-b md:border-b-0 border-border-light">
+            <CountdownDays
+              initialDays={daysUntil(ELECTION.electionDateIso)}
+              targetIso={ELECTION.electionDateIso}
+              className="font-sans font-semibold text-[2rem] leading-none tracking-[-0.03em] tabular-nums"
+            />
+            <div className="type-label-sm !tracking-[0.1em] text-text-secondary mt-1.5">
+              Days until polls open
+            </div>
+          </div>
+        </section>
+
+        {/* ── Answered ───────────────────────────────────────── */}
+        {answered.length > 0 && (
+          <section>
+            <GroupHead
+              eyebrow="On the record"
+              title="Answered our questionnaire"
+              blurb={`${answered.length} of the ${roster.length} candidates for mayor returned the questionnaire. Every answer is published, question by question.`}
+              action={{
+                label: "See how they answered",
+                href: `${ELECTION.basePath}/mayor`,
+              }}
+            />
+            <Roster candidates={answered} />
+          </section>
+        )}
+
+        {/* ── Yet to respond ─────────────────────────────────── */}
+        {quiet.length > 0 && (
+          <section>
+            <GroupHead
+              eyebrow="Registered"
+              title="Yet to respond"
+              blurb="On the ballot, and yet to tell us where they stand. We publish answers as they arrive, so this list shrinks through the campaign."
+            />
+            <Roster candidates={quiet} />
+          </section>
+        )}
+
+        {/* ── Withdrawn ──────────────────────────────────────── */}
+        {withdrawn.length > 0 && (
+          <section>
+            <GroupHead
+              eyebrow="No longer running"
+              title="Withdrawn"
+              blurb="Registered and since withdrawn. Kept here because the name still appears on lists elsewhere."
+            />
+            <Roster candidates={withdrawn} />
+          </section>
+        )}
+
+        {/* ── Source note ────────────────────────────────────── */}
+        <section className="px-6 md:px-14 py-4 border-t-2 border-dark">
+          <p className="type-label-sm text-text-muted max-w-[80ch] text-pretty">
+            Registered candidates from the City Clerk&rsquo;s official list,
+            refreshed daily. The field is not final until nominations close
+            {view.nominationCloseLabel
+              ? ` on ${view.nominationCloseLabel}`
+              : ""}
+            .
+          </p>
+        </section>
+
+        {/* ── Elsewhere ──────────────────────────────────────── */}
+        <section className="border-t border-dark grid md:grid-cols-2">
+          <Link
+            href={`${ELECTION.basePath}/issues`}
+            className="group px-6 md:px-14 py-6 flex items-center justify-between gap-4 transition-colors hover:bg-linen-50"
+          >
+            <span className="font-sans font-medium text-[1.15rem] tracking-[-0.015em]">
+              Where the whole field stands
+            </span>
+            <ArrowRight className="size-4 flex-none text-text-secondary transition-transform group-hover:translate-x-0.5" />
+          </Link>
+          <Link
+            href={`${ELECTION.basePath}#wards`}
+            className="group px-6 md:px-14 py-6 flex items-center gap-2.5 border-t md:border-t-0 md:border-l border-border-light transition-colors hover:bg-linen-50"
+          >
+            <ArrowLeft className="size-3.5 text-text-secondary" />
+            <span className="font-sans font-medium text-[1.15rem] tracking-[-0.015em]">
+              Find your ward
+            </span>
+          </Link>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function Stat({ value, label }: { value: number; label: string }) {
+  return (
+    <div className="px-6 py-4 md:px-14 border-r border-b md:border-b-0 border-border-light">
+      <div className="font-sans font-semibold text-[2rem] leading-none tracking-[-0.03em] tabular-nums">
+        {value}
+      </div>
+      <div className="type-label-sm !tracking-[0.1em] text-text-secondary mt-1.5">
+        {label}
+      </div>
+    </div>
+  );
+}
+
+function GroupHead({
+  eyebrow,
+  title,
+  blurb,
+  action,
+}: {
+  eyebrow: string;
+  title: string;
+  blurb: string;
+  action?: { label: string; href: string };
+}) {
+  return (
+    <div className="px-6 md:px-14 pt-9 pb-5 flex flex-wrap items-end justify-between gap-x-8 gap-y-4">
+      <div>
+        <p className="type-label text-accent mb-2.5">{eyebrow}</p>
+        <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.6rem,2.6vw,2.1rem)] mb-2">
+          {title}
+        </h2>
+        <p className="font-serif text-[1.02rem] leading-[1.45] max-w-[56ch] text-dark/80 text-pretty">
+          {blurb}
+        </p>
+      </div>
+      {action && (
+        <Link
+          href={action.href}
+          className="group/answers type-label-sm text-accent hover:underline inline-flex items-center gap-1.5 pb-1.5"
+        >
+          {action.label}
+          <ArrowRight className="size-3.5 transition-transform group-hover/answers:translate-x-0.5" />
+        </Link>
+      )}
+    </div>
+  );
+}
+
+/** The field as a grid of rows.
+ *
+ *  A row, not the landing page's card: fifty-three of anything is a list, and
+ *  the portrait was the tallest thing on a tile whose text is a name and a
+ *  link. Kept small it still does the one job a portrait does here — making a
+ *  name a person — without setting the height of the page. */
+function Roster({ candidates }: { candidates: CandidateView[] }) {
+  return (
+    <ul className="m-0 p-0 list-none mx-6 md:mx-14 mb-2 grid grid-cols-1 border-t border-l border-border-light cards:grid-cols-2 xl:grid-cols-3">
+      {candidates.map((candidate) => (
+        <li
+          key={candidate.key}
+          className={`flex items-center gap-3.5 border-b border-r border-border-light px-4 py-3.5 ${
+            candidate.withdrawn ? "opacity-55" : ""
+          }`}
+        >
+          <span
+            aria-hidden="true"
+            className="relative flex-none size-10 overflow-hidden bg-dark flex items-center justify-center font-sans font-medium text-[0.85rem] tracking-[-0.02em] text-bg"
+          >
+            {candidate.image ? (
+              <Image
+                src={candidate.image}
+                alt=""
+                fill
+                sizes="40px"
+                className="object-cover object-center"
+              />
+            ) : (
+              candidate.initials
+            )}
+          </span>
+
+          <span className="min-w-0 flex-1">
+            <span className="flex items-baseline gap-2 flex-wrap">
+              <span
+                className={`font-sans font-medium text-[1.02rem] tracking-[-0.02em] leading-[1.2] ${
+                  candidate.withdrawn ? "line-through decoration-1" : ""
+                }`}
+              >
+                {candidate.name}
+              </span>
+              {candidate.tag === "Incumbent" && <IncumbentBadge />}
+            </span>
+            {candidate.website && (
+              <span className="mt-1 block">
+                <SiteLink
+                  candidate={candidate}
+                  election={ELECTION.slug}
+                  race="mayor"
+                />
+              </span>
+            )}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/app/toronto/vote/2026/mayor/page.tsx b/src/app/toronto/vote/2026/mayor/page.tsx
new file mode 100644
index 00000000..29e6f850
--- /dev/null
+++ b/src/app/toronto/vote/2026/mayor/page.tsx
@@ -0,0 +1,270 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { CandidateRoster } from "@/components/elections/CandidateRoster";
+import {
+  QuestionnaireCards,
+  questionnaireHeadings,
+} from "@/components/elections/QuestionnaireCards";
+import { QuestionnaireRail } from "@/components/elections/QuestionnaireRail";
+import { SurveyCta } from "@/components/elections/SurveyCta";
+import CountdownDays from "@/components/elections/CountdownDays";
+import {
+  byCandidateKey,
+  candidateAnswers,
+  comparedQuestions,
+  questionnaireShape,
+  surveyRoster,
+} from "@/lib/elections/candidate-answers";
+import {
+  CANDIDATE_QUESTIONNAIRE_SLUG,
+  fetchCandidateResponses,
+} from "@/lib/elections/candidate-responses";
+import { fetchSurvey } from "@/lib/elections/survey";
+import { daysUntil } from "@/lib/elections/dates";
+import { ELECTION, getToronto2026 } from "../data";
+
+/* How the mayoral field answered — question first.
+ *
+ * WHAT THIS PAGE USED TO BE, AND WHY IT CHANGED
+ *   A grid: every question a row, every candidate a column, every candidate on
+ *   the ballot given a column whether they wrote back or not. That shape is
+ *   right for a ward, where a field of four fits across a laptop and an empty
+ *   column is a visible fact about a named person.
+ *
+ *   Toronto's mayoral ballot is fifty-three people. The grid came out 12,558px
+ *   wide — thirteen screens of sideways drag — and forty-four of those columns
+ *   were empty, because nine candidates answered. The reader had to haul past
+ *   forty-four blanks to compare the nine. An empty column stops being a
+ *   finding somewhere around the tenth one; after that it is furniture.
+ *
+ *   So the page turns ninety degrees. The question becomes the object and the
+ *   candidates are filed inside it, under the answer each one gave — the same
+ *   cards the ward pages use, so the two can never disagree about how a
+ *   questionnaire reads. Nine respondents is a comfortable fit: it is a
+ *   handful of names under each answer, which is what the form was built for,
+ *   where the fifty-three-column grid was thirteen screens of drag.
+ *
+ *   The forty-four who have not answered are not named on the cards. On a
+ *   ward, where the field is a dozen, every card names its silent candidates;
+ *   here that would be fifteen hundred names saying one thing. They are on
+ *   the roster page, which groups the field by exactly that line, and this
+ *   page links to it from the hero and names the count in its stats.
+ */
+
+export const metadata: Metadata = {
+  title: "How the mayoral candidates answered",
+  description:
+    "How the candidates for Mayor of Toronto answered our questionnaire in the October 26, 2026 election — question by question, with the whole mayoral field on each one.",
+  alternates: { canonical: `${ELECTION.basePath}/mayor` },
+  openGraph: {
+    title: "How the mayoral candidates answered — Toronto 2026 Election",
+    description:
+      "Every answer the mayoral field gave us, read question by question.",
+    type: "website",
+  },
+};
+
+export default async function MayorPage() {
+  const [view, survey, responses] = await Promise.all([
+    getToronto2026(),
+    fetchSurvey(ELECTION.slug, CANDIDATE_QUESTIONNAIRE_SLUG).catch(() => null),
+    fetchCandidateResponses(ELECTION.slug),
+  ]);
+
+  /* The ballot line, and the part of it that wrote back.
+
+     The whole election's responses come back from one fetch — the counts a
+     candidate's answer is measured against are the field's, not this race's —
+     and the roster narrows who gets named, exactly as the ward pages do. */
+  const ballot = view.mayoral.filter((candidate) => !candidate.withdrawn);
+  const registered = ballot.length;
+
+  const ballotKeys = new Set(ballot.map((candidate) => candidate.key));
+  const answers = survey
+    ? byCandidateKey(
+        candidateAnswers(survey, responses).filter((entry) =>
+          ballotKeys.has(entry.key),
+        ),
+      )
+    : {};
+  const roster = surveyRoster(ballot, answers);
+  const mayoral = roster.filter((candidate) => candidate.answers);
+  const groups = comparedQuestions(
+    mayoral.map((candidate) => candidate.answers!),
+    mayoral,
+    survey ? questionnaireShape(survey, responses) : undefined,
+  );
+  const questionCount = groups.reduce(
+    (n, group) => n + group.questions.length,
+    0,
+  );
+
+  return (
+    <div className={`${ELECTION.themeClass ?? ""} bg-bg text-dark`}>
+      <div className="mx-[10px] my-[10px] border border-border-light bg-bg overflow-x-clip">
+        {/* ── Breadcrumb ─────────────────────────────────────── */}
+        <div className="px-6 md:px-14 py-4 border-b border-border-light type-label-sm !tracking-[0.1em] flex items-center gap-2.5">
+          <Link
+            href={ELECTION.basePath}
+            className="text-text-secondary hover:text-accent transition-colors"
+          >
+            Toronto 2026
+          </Link>
+          <span className="text-border-light">/</span>
+          <span>Mayor</span>
+        </div>
+
+        {/* ── Hero ───────────────────────────────────────────── */}
+        <section className="px-6 py-8 md:px-14 md:py-10 border-b-2 border-dark">
+          <p className="type-label text-accent mb-3.5">City of Toronto</p>
+          <h1 className="font-sans font-medium leading-[0.98] tracking-[-0.04em] text-[clamp(2.25rem,4.5vw,3.75rem)] max-w-[17ch] text-balance mb-4">
+            How the mayoral field answered
+          </h1>
+          <p className="font-serif text-[1.05rem] leading-[1.5] text-dark/85 max-w-[58ch] text-pretty">
+            {mayoral.length > 0
+              ? `${mayoral.length} of the ${registered} candidates for mayor returned our questionnaire. Their answers, question by question — the mayoral field on each one.`
+              : `No one running for mayor has answered our questionnaire yet. ${registered} candidates have registered for the race.`}
+          </p>
+          <Link
+            href={`${ELECTION.basePath}/mayor/candidates`}
+            className="group/roster mt-5 type-label-sm text-accent hover:underline inline-flex items-center gap-1.5"
+          >
+            Every candidate for mayor
+            <ArrowRight className="size-3.5 transition-transform group-hover/roster:translate-x-0.5" />
+          </Link>
+        </section>
+
+        {/* ── Key stats ──────────────────────────────────────── */}
+        <section className="grid grid-cols-2 md:grid-cols-4 border-b-2 border-dark">
+          <Stat value={mayoral.length} label="Answered us" />
+          <Stat value={registered} label="On the ballot" />
+          <Stat value={questionCount} label="Policy questions" />
+          <div className="px-6 py-4 md:px-14 border-b md:border-b-0 border-border-light">
+            <CountdownDays
+              initialDays={daysUntil(ELECTION.electionDateIso)}
+              targetIso={ELECTION.electionDateIso}
+              className="font-sans font-semibold text-[2rem] leading-none tracking-[-0.03em] tabular-nums"
+            />
+            <div className="type-label-sm !tracking-[0.1em] text-text-secondary mt-1.5">
+              Days until polls open
+            </div>
+          </div>
+        </section>
+
+        {/* ── The field, question by question ────────────────── */}
+        {groups.length > 0 && mayoral.length > 0 ? (
+          <section className="px-6 md:px-14 py-9 md:py-11 border-b-2 border-dark grid gap-9">
+            {/* THE WHOLE BALLOT, ONCE
+
+                This listed the nine who answered and nobody else, under the
+                heading "Answered our questionnaire" — which is a page about
+                the mayoral race that never names most of the people in it. A
+                reader arriving with a name in mind, and most do, could not
+                find out from this page whether that person is running.
+
+                So it is the ballot: every registered candidate, in surname
+                order, each linked to their campaign. Who answered is what the
+                thirty-four cards below are made of, and does not need saying
+                twice. Still one list rather than two — a second heading of
+                forty-four names reading "yet to answer" is a scoreboard, and
+                the cards keep that score already. */}
+            <CandidateRoster
+              respondents={roster}
+              silent={[]}
+              election={ELECTION.slug}
+              race="mayor"
+              respondentsLabel={`On the ballot for mayor · ${registered} candidates`}
+            />
+            <QuestionnaireRail headings={questionnaireHeadings(groups)}>
+              <QuestionnaireCards
+                groups={groups}
+                respondents={mayoral}
+                silent={[]}
+                issuesHref={`${ELECTION.basePath}/issues`}
+              />
+            </QuestionnaireRail>
+          </section>
+        ) : (
+          <section className="px-6 md:px-14 py-14 border-b-2 border-dark">
+            <p className="font-serif text-[1.05rem] leading-[1.5] text-dark/80 max-w-[58ch] text-pretty">
+              No answers from the mayoral field have been published yet.
+              Responses appear here as they are reviewed and released.
+            </p>
+          </section>
+        )}
+
+        {/* ── Your turn ──────────────────────────────────────── */}
+        <section className="px-6 md:px-14 py-9 md:py-10 border-t-2 border-dark grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
+          <div>
+            <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.6rem,2.6vw,2.1rem)] max-w-[20ch] text-balance">
+              Now answer them yourself
+            </h2>
+            <p className="mt-3.5 font-serif text-[1.05rem] leading-[1.5] text-dark/85 max-w-[56ch] text-pretty">
+              These are the same questions we put to the field. Answer them and
+              see which candidates line up with you.
+            </p>
+          </div>
+          <SurveyCta href={`${ELECTION.basePath}/survey`} />
+        </section>
+
+        {/* ── Method ─────────────────────────────────────────── */}
+        <section className="px-6 md:px-14 py-4 border-t border-border-light grid gap-2">
+          <p className="type-label-sm text-text-muted max-w-[80ch] text-pretty">
+            Every bar is the mayoral field that answered, one cell per
+            candidate: filled with the option that candidate picked, hollow
+            where they did not answer that question. Candidates who never
+            returned the questionnaire are not in these counts — they are on the
+            roster. Open a card for the names behind the bars and what each of
+            them wrote, published verbatim.
+          </p>
+          <p className="type-label-sm text-text-muted max-w-[80ch] text-pretty">
+            Registered candidates come from the City Clerk&rsquo;s list, less
+            anyone who has withdrawn. The field is not final until nominations
+            close
+            {view.nominationCloseLabel
+              ? ` on ${view.nominationCloseLabel}`
+              : ""}
+            .
+          </p>
+        </section>
+
+        {/* ── Elsewhere ──────────────────────────────────────── */}
+        <section className="border-t border-dark grid md:grid-cols-2">
+          <Link
+            href={`${ELECTION.basePath}/issues`}
+            className="group px-6 md:px-14 py-6 flex items-center justify-between gap-4 transition-colors hover:bg-linen-50"
+          >
+            <span className="font-sans font-medium text-[1.15rem] tracking-[-0.015em]">
+              The whole field, mayoral and council
+            </span>
+            <ArrowRight className="size-4 flex-none text-text-secondary transition-transform group-hover:translate-x-0.5" />
+          </Link>
+          <Link
+            href={`${ELECTION.basePath}#wards`}
+            className="group px-6 md:px-14 py-6 flex items-center gap-2.5 border-t md:border-t-0 md:border-l border-border-light transition-colors hover:bg-linen-50"
+          >
+            <ArrowLeft className="size-3.5 text-text-secondary" />
+            <span className="font-sans font-medium text-[1.15rem] tracking-[-0.015em]">
+              Find your ward
+            </span>
+          </Link>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function Stat({ value, label }: { value: number; label: string }) {
+  return (
+    <div className="px-6 py-4 md:px-14 border-r border-b md:border-b-0 border-border-light">
+      <div className="font-sans font-semibold text-[2rem] leading-none tracking-[-0.03em] tabular-nums">
+        {value}
+      </div>
+      <div className="type-label-sm !tracking-[0.1em] text-text-secondary mt-1.5">
+        {label}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/toronto/vote/2026/page.tsx b/src/app/toronto/vote/2026/page.tsx
index b39fc3f2..3270dc1d 100644
--- a/src/app/toronto/vote/2026/page.tsx
+++ b/src/app/toronto/vote/2026/page.tsx
@@ -5,6 +5,7 @@ import { WARD_GEO } from "./wardGeo";
 import { ELECTION, getToronto2026 } from "./data";
 import {
   ADVANCE_VOTING_PATH,
+  ELECTION_DAY,
   HOW_TO_VOTE_PATH,
   KEY_DATES_PATH,
   VOTE_BY_MAIL_PATH,
@@ -30,6 +31,12 @@ export default async function Toronto2026ElectionPage() {
     <ElectionLanding
       election={ELECTION}
       view={view}
+      mayorSurveyPath={`${ELECTION.basePath}/mayor`}
+      mayorRosterPath={`${ELECTION.basePath}/mayor/candidates`}
+      // Toronto publishes its poll hours, so the band's headline counter is
+      // the live timer from the /toronto hero rather than a whole-day count.
+      electionDay={ELECTION_DAY}
+      surveyPath={`${ELECTION.basePath}/survey`}
       wardMapDefs={<WardMapDefs geo={WARD_GEO} />}
       renderWardMap={(ward) => (
         <WardMap
@@ -54,10 +61,31 @@ export default async function Toronto2026ElectionPage() {
         ),
         closingBlurb: (
           <>
-            Toronto votes Monday, October 26. Add your name — then bring someone
-            with you.
+            Toronto votes Monday, October 26. Answer the questions we put to the
+            candidates and see which of them line up with you.
           </>
         ),
+        /* WHAT IS ONLY HERE
+           A card earns its place by going somewhere a reader would not
+           otherwise get to, and by being the thing they came for. What is left
+           is the two questionnaire reads — one race, then every race — with
+           the survey between them; ElectionLanding supplies the mayoral card
+           and the survey card itself.
+
+           Everything else is reachable from the section that owns it, which is
+           where a reader looks for it anyway: the question set is linked from
+           the survey and from every questionnaire page, the pledge from the
+           closing band, and the wards from the ward grid two hundred pixels
+           below. */
+        explore: [
+          {
+            eyebrow: "Every race",
+            title: "Where the candidates stand",
+            blurb:
+              "Mayor and council together, question by question: where the field agrees, and where it splits.",
+            href: `${ELECTION.basePath}/issues`,
+          },
+        ],
         guideLinks: [
           { label: "See all key dates", href: KEY_DATES_PATH },
           { label: "How to vote in Toronto", href: HOW_TO_VOTE_PATH },
diff --git a/src/app/toronto/vote/2026/survey/AgreementChart.tsx b/src/app/toronto/vote/2026/survey/AgreementChart.tsx
new file mode 100644
index 00000000..64b7ce09
--- /dev/null
+++ b/src/app/toronto/vote/2026/survey/AgreementChart.tsx
@@ -0,0 +1,188 @@
+import type { Alignment, CandidateScore } from "@/lib/elections/alignment";
+
+/* How much of the questionnaire each candidate answered the way you did.
+ *
+ * WHAT THIS REPLACED
+ *   A card per candidate, each carrying a grid of thirty-three little squares —
+ *   one per question, coloured by the option they picked and faded where it was
+ *   not yours. It was a handsome object and the wrong one. Three faults:
+ *
+ *   · It answered the wrong question. A reader arriving here has just spent ten
+ *     minutes on a questionnaire and wants a ranking: who is closest to me. The
+ *     card grid gave a ranking you had to assemble by reading a two-digit
+ *     figure out of every card and holding all of them in your head, because
+ *     the cards were laid across four columns and the eye cannot compare down a
+ *     grid.
+ *   · The squares were unreadable at their size. Thirty-three cells across a
+ *     card three hundred pixels wide are seven pixels each; which question a
+ *     cell stood for was recoverable only by hovering it one at a time.
+ *   · It matched nothing else on the site. Every other page in the tracker is
+ *     rules, plates and house type. This was a heatmap.
+ *
+ * WHAT IT IS NOW
+ *   A ranked list, one candidate per ruled row, each with a single bar divided
+ *   into how you and they compare. The ranking is the layout: the longest bar
+ *   is at the top and a reader gets the order by looking down the left edge,
+ *   which is the thing they came for.
+ *
+ *   The bar is the whole questionnaire every time, so the rows are comparable —
+ *   a candidate who answered nine questions and agreed on all nine does not
+ *   draw the same bar as one who answered thirty-three and agreed on all of
+ *   them. Silence takes up its own share of the bar, which is the honest
+ *   picture of a candidate who barely filled the thing in.
+ *
+ * WHERE THE DETAIL WENT
+ *   Nowhere it was not already. The question cards below this chart file every
+ *   candidate under the answer they gave — and the reader's own plate sits in
+ *   those blocks too, so "where do we differ" is answered by scrolling rather
+ *   than by hovering thirty-three squares in turn. A hover panel here was the
+ *   same information in a worse format, and it reserved five empty lines under
+ *   every card to say "Hover a square for the question".
+ */
+
+/* The bands, in the order they stack along the bar: agreement first, from the
+   left edge, because that is the quantity being ranked and a reader compares
+   the length of the run that starts in the same place on every row.
+
+   Agreement takes the accent. Everything else is the same ink at descending
+   strengths rather than four hues — the bar is one quantity split up, not four
+   competing ones, and a palette here would say that disagreeing and not
+   answering are different in kind rather than different in degree. */
+const BANDS = [
+  {
+    key: "agreed",
+    label: "Same as you",
+    className: "bg-accent",
+  },
+  {
+    key: "differed",
+    label: "Different",
+    className: "bg-dark/30",
+  },
+  {
+    key: "unclear",
+    label: "Their own words",
+    className: "bg-dark/12",
+  },
+  {
+    key: "unanswered",
+    label: "No answer",
+    className: "bg-dark/6",
+  },
+] as const;
+
+type BandKey = (typeof BANDS)[number]["key"];
+
+export function AgreementChart({
+  alignment,
+  scores,
+}: {
+  alignment: Alignment;
+  /** the candidates in the order they should print; defaults to the
+   *  alignment's own ranking, which is by agreement */
+  scores?: CandidateScore[];
+}) {
+  const { rows } = alignment;
+  const ordered = scores ?? alignment.scores;
+  if (rows.length === 0 || ordered.length === 0) return null;
+
+  const total = rows.length;
+
+  /* A band that never occurs is left out of the key. Most fields produce three
+     of the four, and a key naming a colour nobody can find on the page is a
+     colour the reader goes looking for. */
+  const present = BANDS.filter((band) =>
+    ordered.some((score) => score[band.key] > 0),
+  );
+
+  return (
+    <div>
+      <p className="type-caption mb-4 text-text-secondary text-pretty">
+        Every bar is the same {total} questions. The filled run is how many of
+        them that candidate answered the way you did.
+      </p>
+
+      <div className="border-t border-border-light">
+        {ordered.map((score) => (
+          <Row key={score.candidateName} score={score} total={total} />
+        ))}
+      </div>
+
+      {/* The key, under the rows rather than over them: a reader looks at the
+          bars first and comes here only when a band needs naming. */}
+      <ul className="mt-3.5 flex list-none flex-wrap items-center gap-x-5 gap-y-2 m-0 p-0">
+        {present.map((band) => (
+          <li key={band.key} className="flex items-center gap-2">
+            <span
+              className={`size-2.5 flex-none ${band.className}`}
+              aria-hidden="true"
+            />
+            <span className="type-label-sm text-text-muted">{band.label}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/* One candidate.
+ *
+ * Three tracks on a wide screen — name, bar, figures — so the bars all start
+ * and end on the same two lines and their lengths can be read against each
+ * other without a gridline to help. Below `sm` the name takes its own line
+ * above the bar, because a name column narrow enough to leave a usable bar is
+ * a name column that wraps every candidate onto three lines. */
+function Row({ score, total }: { score: CandidateScore; total: number }) {
+  const share = score.share === null ? null : Math.round(score.share * 100);
+
+  return (
+    <div className="grid items-center gap-x-5 gap-y-2 border-b border-border-light py-3.5 sm:grid-cols-[minmax(0,13rem)_minmax(0,1fr)_auto]">
+      <p className="font-sans font-medium leading-[1.2] tracking-[-0.015em] text-[1.05rem] text-dark text-pretty">
+        {score.candidateName}
+      </p>
+
+      <Bar score={score} total={total} />
+
+      {/* The count is the honest figure and leads; the share follows it in
+          muted ink. "24 of 33" is a fact about a questionnaire, where a bare
+          73% invites being read as a poll result. */}
+      <p className="flex items-baseline gap-2 justify-self-start tabular-nums sm:justify-self-end">
+        <span className="font-sans font-semibold leading-none tracking-[-0.03em] text-[1.35rem] text-dark">
+          {score.agreed}
+        </span>
+        <span className="type-label-sm text-text-muted">
+          of {total}
+          {share !== null && ` · ${share}%`}
+        </span>
+      </p>
+    </div>
+  );
+}
+
+function Bar({ score, total }: { score: CandidateScore; total: number }) {
+  /* Everything the candidate did with the questionnaire, summing to its whole
+     length — including the questions they never reached, which is why the
+     denominator here is the question count and not `compared`. */
+  const segments = BANDS.map((band) => ({
+    ...band,
+    n: score[band.key as BandKey],
+  })).filter((segment) => segment.n > 0);
+
+  return (
+    <span
+      className="flex h-3.5 w-full overflow-hidden bg-dark/6"
+      role="img"
+      aria-label={segments
+        .map((segment) => `${segment.n} ${segment.label.toLowerCase()}`)
+        .join(", ")}
+    >
+      {segments.map((segment) => (
+        <span
+          key={segment.key}
+          className={segment.className}
+          style={{ width: `${(segment.n / total) * 100}%` }}
+        />
+      ))}
+    </span>
+  );
+}
diff --git a/src/app/toronto/vote/2026/survey/AlignmentResults.tsx b/src/app/toronto/vote/2026/survey/AlignmentResults.tsx
new file mode 100644
index 00000000..8185e838
--- /dev/null
+++ b/src/app/toronto/vote/2026/survey/AlignmentResults.tsx
@@ -0,0 +1,377 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+import { Select } from "@/components/ui/select";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+
+import {
+  QuestionnaireCards,
+  questionnaireHeadings,
+} from "@/components/elections/QuestionnaireCards";
+import { QuestionnaireRail } from "@/components/elections/QuestionnaireRail";
+import type { Heading } from "@/components/custom/signpost/config";
+import type { Seat } from "@/components/elections/QuestionRollCall";
+import { AgreementChart } from "./AgreementChart";
+import {
+  byCandidateKey,
+  candidateAnswers,
+  comparedQuestions,
+  questionnaireShape,
+  surveyRoster,
+} from "@/lib/elections/candidate-answers";
+import { lastName } from "@/lib/elections/names";
+import type { CandidateSurveyResponse } from "@/lib/elections/alignment";
+import type { Survey } from "@/lib/elections/survey";
+import type { Alignment, CandidateScore } from "@/lib/elections/alignment";
+
+/* Alignment between one resident's answers and their ward's candidates.
+ *
+ * FORM
+ *   The same grid the ward and mayoral pages draw, with one column added: the
+ *   reader's own. Questions run down, candidates run across, and "You" is the
+ *   first column, next to the question and pinned beside it — so the
+ *   comparison the page exists to make is two cells on one line rather than
+ *   two blocks a scroll apart.
+ *
+ *   It was a block per question, with the ward's candidates filed under the
+ *   option each picked and the reader's own pick badged among them. That read
+ *   well for one question and did not compose: the reader's answer was
+ *   restated thirty times, and the candidates who never returned the
+ *   questionnaire — most of a ward's ballot, most of the campaign — were
+ *   nowhere on the page, so a reader could not tell a candidate who disagreed
+ *   with them from one who had said nothing at all. The grid has a column for
+ *   both, and says which is which in every row.
+ *
+ *   The ranked list stays. "Who is closest to me" is the question that brought
+ *   the reader here, and it is an answer no grid gives at a glance.
+ */
+
+/** A candidate on the ward's ballot, as the responses route hands them over. */
+export type SurveyRosterCandidate = {
+  key: string;
+  name: string;
+  website?: string;
+  withdrawn?: boolean;
+};
+
+/* The reader, as the cards name them. Named as the questionnaire would name a
+   candidate, because that is exactly what they are to the pivot — a respondent
+   with answers, run through the same code as everyone else's. */
+const YOU = "You";
+
+/* How the agreement chart is ordered.
+ *
+ * The cards below it are not sorted by this and should not be: a card files
+ * its candidates under the answer they gave, and inside a group they run by
+ * surname so a reader finds the same person in the same place on all thirty
+ * questions. A ranking belongs in the thing that is a ranking.
+ *
+ * Agreement first by default: the reader has just answered thirty questions,
+ * and "who is closest to me" is the question that brought them here. The rest
+ * are the orders a reader actually asks for next — the opposite end of the
+ * same list, someone they already have a name for, and who put the most on
+ * the record. */
+const SORTS = [
+  { value: "agreement", label: "Most in common with you" },
+  { value: "disagreement", label: "Least in common with you" },
+  { value: "answered", label: "Most questions answered" },
+  { value: "name", label: "Name (A–Z)" },
+] as const;
+
+type Sort = (typeof SORTS)[number]["value"];
+
+function sortScores(scores: CandidateScore[], sort: Sort): CandidateScore[] {
+  const byName = (a: CandidateScore, b: CandidateScore) =>
+    lastName(a.candidateName).localeCompare(lastName(b.candidateName)) ||
+    a.candidateName.localeCompare(b.candidateName);
+
+  /* A candidate with nothing comparable has no share to rank on — a null is
+     not a zero, and sorting it as one would put "we cannot say" among the
+     people who disagree with you. They go last either way. */
+  const share = (score: CandidateScore) => score.share ?? -1;
+
+  return [...scores].sort((a, b) => {
+    switch (sort) {
+      case "agreement":
+        return share(b) - share(a) || byName(a, b);
+      case "disagreement":
+        return (
+          (a.share === null ? 1 : 0) - (b.share === null ? 1 : 0) ||
+          share(a) - share(b) ||
+          byName(a, b)
+        );
+      case "answered":
+        return b.compared - a.compared || share(b) - share(a) || byName(a, b);
+      case "name":
+        return byName(a, b);
+    }
+  });
+}
+
+/** One ballot a voter marks: the race, its candidates, and how the reader
+ *  lines up with them. */
+export type RaceComparison = {
+  key: string;
+  /** e.g. "For mayor" or "Ward 9 — Davenport" */
+  label: string;
+  alignment: Alignment;
+  /** that race's published responses, as fetched */
+  responses: CandidateSurveyResponse[];
+  /** everyone on that ballot, respondents or not */
+  roster: SurveyRosterCandidate[];
+};
+
+export default function AlignmentResults({
+  races,
+  survey,
+  answers,
+}: {
+  /** in ballot order — mayor first, then the ward */
+  races: RaceComparison[];
+  survey: Survey;
+  /** the reader's own answers, by question id */
+  answers: Record<string, string>;
+}) {
+  /* Memoised, not just filtered inline: `grids` keys off this, and a fresh
+     array every render would rebuild both pivots on every keystroke the page
+     ever sees. */
+  const shown = useMemo(
+    () =>
+      races.filter(
+        (race) =>
+          race.alignment.scores.length > 0 && race.alignment.rows.length > 0,
+      ),
+    [races],
+  );
+
+  const grids = useMemo(
+    () => shown.map((race) => raceGrid(survey, race, answers)),
+    [shown, survey, answers],
+  );
+
+  /* The rail's list: each race's sections, in ballot order, namespaced by
+     race. Both races ask the same questionnaire, so without the prefix the
+     document would hold two elements called "housing" and the rail would
+     scroll to whichever came first, whatever you clicked.
+
+     A race's own heading takes the level-2 slot and its sections hang under
+     it as level 3, which is the one place in the tracker where the rail
+     nests — there are two questionnaires on this page and the sections would
+     otherwise read as one run of eighteen.
+
+     A closed race unmounts its sections and the rail simply cannot find them:
+     the spy skips a heading with no element and the jump no-ops. Both races
+     open by default, so that is the state after a reader has folded one away,
+     which is a reader saying they do not want those sections. */
+  const headings: Heading[] = useMemo(
+    () =>
+      shown.flatMap((race, i) => [
+        { id: race.key, text: race.label, level: 2 as const },
+        ...questionnaireHeadings(grids[i].groups, { prefix: race.key }).map(
+          (heading) => ({ ...heading, level: 3 as const }),
+        ),
+      ]),
+    [shown, grids],
+  );
+
+  if (shown.length === 0) return null;
+
+  /* No heading of its own. Once the answers are in, the page is this
+     comparison and nothing else, so the card's masthead says so — a second
+     title under the first was two announcements of one thing, with an accent
+     rule and a rule-off between them. What the masthead carries now used to
+     live here: see `SurveyClient`. */
+  return (
+    <section className="min-w-0 px-6 pt-10 pb-14 md:px-10">
+      <QuestionnaireRail headings={headings}>
+        <div className="grid min-w-0 gap-10">
+          {shown.map((race, i) => (
+            <RaceBlock key={race.key} race={race} grid={grids[i]} />
+          ))}
+        </div>
+      </QuestionnaireRail>
+
+      {/* One note for the whole page rather than one under every grid: it is
+          the same reading in both races. */}
+      <p className="type-caption mt-10 max-w-[78ch] border-t border-border-light pt-4 text-text-muted text-pretty">
+        <span className="text-text-secondary">Reading these.</span> Each card
+        is one question, with the candidates filed under the answer they gave —
+        and your own answer among them, marked. Options nobody picked are not
+        shown. The bars above count only the candidates who returned the
+        questionnaire, not the whole ballot.
+      </p>
+    </section>
+  );
+}
+
+/* The cards, and the reader inside them.
+ *
+ * `candidateAnswers` does the pivoting for both — the reader is passed through
+ * it as a response of their own, so their answers are built by the same code
+ * that builds everyone else's and cannot disagree with them.
+ *
+ * Computed by the parent rather than inside the block that renders it, because
+ * the scroll rail has to list both races' sections before either block has
+ * rendered, and the sections are a property of this result. One computation,
+ * two readers. */
+function raceGrid(
+  survey: Survey,
+  race: RaceComparison,
+  answers: Record<string, string>,
+) {
+
+  const entries = candidateAnswers(survey, race.responses);
+  const byKey = byCandidateKey(entries);
+  const field = surveyRoster<SurveyRosterCandidate>(
+    race.roster.length > 0
+      ? race.roster
+      : entries.map((entry) => ({
+          key: entry.key,
+          name: entry.candidateName,
+        })),
+    byKey,
+  );
+
+  const [you] = candidateAnswers(survey, [
+    {
+      candidateName: YOU,
+      ward: "",
+      surveySlug: survey.slug,
+      surveyVersion: "",
+      answers,
+      explanations: {},
+      source: "form" as const,
+    },
+  ]);
+
+  /* Every name the cards can print, the reader first. The order here is
+     only the order the pivot hands the rows over in — inside a card the
+     candidates are filed under the answer they gave and sorted by surname,
+     so a reader looking for one person finds them in the same place on all
+     thirty questions. The agreement sort above drives the chart, which is
+     where a ranking belongs: it is a ranking. */
+  const candidates = [
+    ...(you ? [{ key: you.key, name: YOU }] : []),
+    ...field.map(({ key, name, website }) => ({ key, name, website })),
+  ];
+
+  /* The ballot line each plate belongs to.
+
+     A race block is one race, so its heading already says which — but the
+     two blocks sit one under the other on a page a reader scrolls through
+     with a candidate's name in mind, and a plate that says only a name is
+     a plate whose race depends on remembering which heading you passed.
+     Every plate carries its own. The reader's own plate carries none: they
+     are not running for anything. */
+  const seat: Seat =
+    race.key === "mayor"
+      ? { race: "mayor", label: "Mayor" }
+      : { race: "councillor", label: "Councillor" };
+  const seats = Object.fromEntries(
+    field.map((candidate) => [candidate.key, seat]),
+  );
+
+  return {
+    yourKey: you?.key,
+    seats,
+    /* The reader counts as a respondent: they answered the questionnaire,
+       which is the whole reason there is a page. */
+    respondents: [
+      ...(you ? [{ key: you.key, name: YOU }] : []),
+      ...field.filter((candidate) => candidate.answers),
+    ],
+    silent: field
+      .filter((candidate) => !candidate.answers)
+      .map(({ key, name, website }) => ({ key, name, website })),
+    groups: comparedQuestions(
+      you ? [you, ...entries] : entries,
+      candidates,
+      questionnaireShape(survey, race.responses),
+    ),
+  };
+}
+
+type RaceGrid = ReturnType<typeof raceGrid>;
+
+/* ── One race: who is closest, then everyone question by question ─── */
+
+function RaceBlock({
+  race,
+  grid,
+}: {
+  race: RaceComparison;
+  grid: RaceGrid;
+}) {
+  const [sort, setSort] = useState<Sort>("agreement");
+  const scores = useMemo(
+    () => sortScores(race.alignment.scores, sort),
+    [race.alignment.scores, sort],
+  );
+
+
+
+  /* Both races open to begin with. A reader who has just answered thirty
+     questions is owed the answer to them, not two closed doors — the fold is
+     here so they can put one ballot away while they read the other, which is
+     a different thing from making them ask for either. */
+  return (
+    <Collapsible defaultOpen className="min-w-0">
+      <CollapsibleTrigger className="group/race flex w-full items-baseline gap-3 border-t-2 border-dark pt-3 pb-4 text-left transition-colors">
+        <h3
+          id={race.key}
+          className="flex-1 scroll-mt-24 font-sans font-medium leading-[1.15] tracking-[-0.025em] text-[clamp(1.3rem,2vw,1.6rem)] text-dark transition-colors group-hover/race:text-accent"
+        >
+          {race.label}
+        </h3>
+        {/* What is behind the fold, so a closed race still says whether it
+            is worth opening. */}
+        <span className="type-label-sm flex-none text-text-muted">
+          {race.alignment.scores.length} answered
+        </span>
+        <ChevronDown
+          className="size-4 flex-none text-text-muted transition-[transform,color] group-hover/race:text-accent group-data-[panel-open]:rotate-180"
+          aria-hidden="true"
+        />
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <div className="mb-4 flex flex-wrap items-center gap-3">
+          <label
+            htmlFor={`sort-${race.key}`}
+            className="type-label-sm text-text-muted"
+          >
+            Order the chart by
+          </label>
+          <Select
+            id={`sort-${race.key}`}
+            value={sort}
+            onValueChange={(value) => setSort(value as Sort)}
+            options={SORTS.map((option) => ({ ...option }))}
+            className="max-w-[280px]"
+          />
+        </div>
+
+        <div className="mb-8">
+          <AgreementChart alignment={race.alignment} scores={scores} />
+        </div>
+
+        <QuestionnaireCards
+          groups={grid.groups}
+          respondents={grid.respondents}
+          silent={grid.silent}
+          seats={grid.seats}
+          notes={false}
+          yourKey={grid.yourKey}
+          idPrefix={race.key}
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/src/app/toronto/vote/2026/survey/SurveyClient.tsx b/src/app/toronto/vote/2026/survey/SurveyClient.tsx
new file mode 100644
index 00000000..d6e23ed4
--- /dev/null
+++ b/src/app/toronto/vote/2026/survey/SurveyClient.tsx
@@ -0,0 +1,700 @@
+"use client";
+
+import { useEffect, useMemo, useState, type CSSProperties } from "react";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+import { Select } from "@/components/ui/select";
+
+import {
+  alignToCandidates,
+  wardKeyFromRegion,
+} from "@/lib/elections/alignment";
+import type { CandidateSurveyResponse } from "@/lib/elections/alignment";
+import { DEFAULT_ELECTION_SLUG } from "@/lib/elections/registry";
+import type { Survey, SurveyQuestion } from "@/lib/elections/survey";
+
+import AlignmentResults, {
+  type RaceComparison,
+  type SurveyRosterCandidate,
+} from "./AlignmentResults";
+import { submitSurvey, type SurveySubmission } from "./submitSurvey";
+
+export type SurveyAnswers = Record<string, string>;
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const POSTAL_PATTERN = /^[A-Za-z]\d[A-Za-z] ?\d[A-Za-z]\d$/;
+
+const FIELD_CLASS =
+  "w-full border border-border-light bg-white px-4 py-3.5 font-serif text-[17px] text-dark outline-none transition-colors focus:border-dark placeholder:text-text-muted";
+const CHOICE_CLASS =
+  "flex cursor-pointer items-center gap-3 border border-border-light bg-white px-4 py-3.5 text-[17px] transition-colors hover:border-dark has-checked:border-dark";
+const RADIO_CLASS = "size-[17px] m-0 accent-accent";
+
+/** Copy the CMS doesn't have to supply. Only the fallbacks live here — the
+ *  survey's own meta wins whenever it sets a field. */
+/* Used only when York Factory sends none of its own — the live title, intro
+   and thank-you are CMS copy, and this is what shows if they are missing. */
+const META_FALLBACK = {
+  title: "Toronto priorities survey",
+  intro:
+    "Thirty questions on what the next council should do. Answer them and see which candidates on your ballot agree with you.",
+  submitLabel: "Submit survey",
+} as const;
+
+/** Entrance delay for the nth element in a step, capped so a long step's last
+ *  field doesn't sit blank waiting its turn. */
+function stagger(index: number): CSSProperties {
+  return { animationDelay: `${Math.min(index, 6) * 45}ms` };
+}
+
+/** Per-question error copy, or null when the answer passes. */
+function errorFor(question: SurveyQuestion, value: string): string | null {
+  const answered = value.trim().length > 0;
+
+  if (question.required && !answered) {
+    if (question.type === "radio") return "Choose one";
+    if (question.type === "yesno") return "Choose yes or no";
+    return "Required";
+  }
+  if (!answered) return null;
+
+  if (question.type === "email" && !EMAIL_PATTERN.test(value)) {
+    return "Enter a valid email";
+  }
+  if (question.id === "postal_code" && !POSTAL_PATTERN.test(value)) {
+    return "Enter a valid postal code (e.g. M5V 2T6)";
+  }
+  return null;
+}
+
+/* ── Developer fill ───────────────────────────────────────────
+ *
+ * TEMPORARY. Delete this block, the button that calls it, and nothing else
+ * when the results pages stop needing to be looked at.
+ *
+ * Reaching the comparison view by hand means answering thirty-odd questions,
+ * and every change to that view has to be checked against a filled-in survey.
+ * The button answers the whole questionnaire at random and drops the caller on
+ * the last step, so submitting is one more click.
+ *
+ * Gated on the build, not on a flag: `process.env.NODE_ENV` is inlined at
+ * build time, so in a production bundle the condition is `false` and the
+ * button and this function are dropped entirely.
+ */
+const DEV_TOOLS = process.env.NODE_ENV !== "production";
+
+/** A Toronto postal code that resolves to a ward, so the comparison renders. */
+const DEV_POSTAL = "M6H 1A1";
+
+function devFill(survey: Survey): SurveyAnswers {
+  const filled: SurveyAnswers = {};
+
+  for (const step of survey.steps) {
+    for (const question of step.questions) {
+      if (question.id === "postal_code") {
+        filled[question.id] = DEV_POSTAL;
+        continue;
+      }
+      if (question.options?.length) {
+        // Random rather than always the first: a survey answered entirely down
+        // the left-hand side agrees with nobody in a way that looks like a bug
+        // in the alignment rather than what it is.
+        const option =
+          question.options[Math.floor(Math.random() * question.options.length)];
+        filled[question.id] = option.value;
+        continue;
+      }
+      if (question.type === "email") {
+        filled[question.id] = "dev@example.com";
+        continue;
+      }
+      filled[question.id] = "Developer fill";
+    }
+  }
+
+  return filled;
+}
+
+export default function SurveyClient({
+  survey,
+  wardNames = {},
+}: {
+  survey: Survey;
+  /** {"09": "Davenport"} — passed in from the server so the ward geometry,
+   *  which is a large generated file, stays out of this bundle. */
+  wardNames?: Record<string, string>;
+}) {
+  const [step, setStep] = useState(0);
+  const [answers, setAnswers] = useState<SurveyAnswers>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+  const [submission, setSubmission] = useState<SurveySubmission | null>(null);
+
+  // Everything about the shape of the form comes from the fetched survey, so a
+  // question added in the CMS shows up here with no change to this component.
+  const steps = survey.steps;
+  const stepCount = steps.length;
+  const meta = survey.meta;
+
+  const isLastStep = step === stepCount - 1;
+  const currentStep = steps[step];
+
+  /* The comparison against the ward's candidates. Keyed on the ward the API
+     actually recorded rather than one re-derived here, so the results a
+     respondent reads are the results filed under their response.
+
+     Null whenever there is nothing honest to show: no ward resolved from the
+     postal code, or a ward whose candidates have not answered the
+     questionnaire — which is most wards for most of the campaign. */
+  const ward = wardKeyFromRegion(
+    submission?.derivedRegion ?? submission?.region,
+  );
+
+  /* The ward's published candidate answers, fetched once the API has told us
+     which ward the response was filed under. Not loaded with the page: the
+     ward is not known until then, and pre-loading all 25 would ship every
+     ward's answers to every visitor to use one ward's worth. */
+  const [responses, setResponses] = useState<CandidateSurveyResponse[] | null>(
+    null,
+  );
+  /* Everyone on the ward's ballot, which arrives with the answers. The
+     comparison gives a column to every candidate, not only the ones who wrote
+     back: that a candidate said nothing is as much a part of the comparison as
+     what the others said. */
+  const [roster, setRoster] = useState<SurveyRosterCandidate[]>([]);
+  /* The mayoral field, which is on no ward and so arrives beside the ward's:
+     a voter marks two ballots, and the comparison answers for both. */
+  const [mayoral, setMayoral] = useState<{
+    data: CandidateSurveyResponse[];
+    roster: SurveyRosterCandidate[];
+  }>({ data: [], roster: [] });
+
+  useEffect(() => {
+    if (!ward) return;
+    let cancelled = false;
+
+    fetch(
+      `/api/elections/candidate-responses?election=${encodeURIComponent(
+        DEFAULT_ELECTION_SLUG,
+      )}&ward=${encodeURIComponent(ward)}`,
+    )
+      .then((res) => (res.ok ? res.json() : { data: [], roster: [] }))
+      .then((body) => {
+        if (cancelled) return;
+        setResponses(body.data ?? []);
+        setRoster(body.roster ?? []);
+        setMayoral({
+          data: body.mayoral?.data ?? [],
+          roster: body.mayoral?.roster ?? [],
+        });
+      })
+      // A comparison we could not load is simply not shown; the respondent
+      // still has their own answers and the thank-you.
+      .catch(() => {
+        if (cancelled) return;
+        setResponses([]);
+        setRoster([]);
+        setMayoral({ data: [], roster: [] });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [ward]);
+
+  /* One comparison per ballot, in the order a voter marks them. A race with
+     no published answers is simply left out rather than printed empty. */
+  const comparison = useMemo(() => {
+    if (!ward || !responses) return null;
+    if (responses.length === 0 && mayoral.data.length === 0) return null;
+
+    const name = wardNames[ward];
+    const wardLabel = name
+      ? `Ward ${parseInt(ward, 10)} — ${name}`
+      : `Ward ${parseInt(ward, 10)}`;
+
+    const races: RaceComparison[] = [];
+    if (mayoral.data.length > 0) {
+      races.push({
+        key: "mayor",
+        label: "For mayor",
+        alignment: alignToCandidates(survey, answers, mayoral.data),
+        responses: mayoral.data,
+        roster: mayoral.roster,
+      });
+    }
+    if (responses.length > 0) {
+      races.push({
+        key: "council",
+        label: wardLabel,
+        alignment: alignToCandidates(survey, answers, responses),
+        responses,
+        roster,
+      });
+    }
+
+    return { races, wardLabel };
+  }, [ward, responses, roster, mayoral, survey, answers, wardNames]);
+
+  const set = (id: string, value: string) => {
+    setAnswers((prev) => ({ ...prev, [id]: value }));
+    // Clear the error as soon as they start fixing it; it comes back on Next.
+    setErrors((prev) => {
+      if (!prev[id]) return prev;
+      const rest = { ...prev };
+      delete rest[id];
+      return rest;
+    });
+  };
+
+  const scrollTop = () => window.scrollTo({ top: 0, behavior: "smooth" });
+
+  /** Validates the current step, surfacing every failing field at once. */
+  const validateStep = (): boolean => {
+    const found: Record<string, string> = {};
+    for (const question of currentStep.questions) {
+      // Optional fields still get format-checked once they're filled in.
+      const message = errorFor(question, answers[question.id] ?? "");
+      if (message) found[question.id] = message;
+    }
+    setErrors(found);
+    return Object.keys(found).length === 0;
+  };
+
+  const next = () => {
+    if (!validateStep()) return;
+    setStep((s) => Math.min(stepCount - 1, s + 1));
+    scrollTop();
+  };
+
+  const back = () => {
+    setErrors({});
+    setSubmitError(null);
+    setStep((s) => Math.max(0, s - 1));
+    scrollTop();
+  };
+
+  const submit = async () => {
+    if (!validateStep()) return;
+    setSubmitting(true);
+    setSubmitError(null);
+    try {
+      setSubmission(await submitSurvey(survey, answers));
+      setDone(true);
+      scrollTop();
+    } catch {
+      // Answers stay on screen so they can just press submit again.
+      setSubmitError("Something went wrong. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  /** Answer everything and jump to the end. Development builds only. */
+  const fillForDev = () => {
+    setAnswers(devFill(survey));
+    setErrors({});
+    setSubmitError(null);
+    setStep(stepCount - 1);
+    scrollTop();
+  };
+
+  return (
+    <div className="theme-election bg-bg text-dark min-h-screen px-5 py-8 pb-20 2xl:px-8">
+      {/* TEMPORARY developer affordance — see `devFill`. Dashed and labelled
+          so it cannot be mistaken for part of the survey, and compiled out of
+          production builds entirely. */}
+      {DEV_TOOLS && !done && (
+        <button
+          type="button"
+          onClick={fillForDev}
+          className="type-label-sm fixed bottom-4 right-4 z-50 cursor-pointer border border-dashed border-dark bg-bg px-3 py-2 text-dark transition-colors hover:bg-linen-200"
+        >
+          Dev: fill survey
+        </button>
+      )}
+      {/* The form is a column of questions and stays at a reading measure; the
+          results are two races' worth of question cards, laid two to a row.
+          Held to the form's width they stack into one very long column, so the
+          card opens up to the window once there is something to show in it. */}
+      <div
+        className={`mx-auto w-full overflow-x-clip border-2 border-dark bg-bg transition-[max-width] duration-500 ${done ? "max-w-[1720px]" : "max-w-[760px]"
+          }`}
+      >
+        {/* ── Masthead ───────────────────────────────────────── */}
+        {/* Its own band, ruled off from what follows. It had no bottom padding
+            at all: the title sat on top of the progress bar, and the only
+            thing between them was whatever top padding the next block
+            happened to carry. The intro keeps a reading measure of its own —
+            once the card widens to hold the results, a line of intro type set
+            across seventeen hundred pixels is a line nobody finishes. */}
+        <div className="flex flex-wrap items-end justify-between gap-x-10 gap-y-5 border-b border-border-light px-6 pt-10 pb-8 md:px-10 md:pt-12 md:pb-9">
+          {/* One masthead, saying whichever of the two things the page is
+              currently for. Before the answers are in it introduces the
+              survey; after, it is the heading of the comparison — which used
+              to announce itself a second time, with its own accent rule, in a
+              band directly under this one. */}
+          <div>
+            <h1 className="mb-3.5 font-sans font-medium leading-[1.03] tracking-[-0.02em] text-[clamp(2rem,5vw,2.875rem)] max-w-[18ch] text-balance">
+              {done && comparison
+                ? "How your answers compare"
+                : META_FALLBACK.title}
+            </h1>
+            {done && comparison ? (
+              <>
+                {/* Two ballots, so two comparisons. A voter marks a councillor
+                    and a mayor separately, and a page that answered only for
+                    the ward would answer the smaller half of the question they
+                    came with. */}
+                <p className="type-lead max-w-[54ch] text-text-secondary text-pretty">
+                  You vote twice: once for your councillor, once for mayor.
+                  Candidates in both races answered the questions you just did.
+                </p>
+                {/* The ward is a postal-code lookup, whose stored point is the
+                    centroid of a delivery area — a code on a ward line can
+                    resolve to the neighbour. Said plainly rather than
+                    presented as settled. */}
+                <p className="type-caption mt-3 max-w-[54ch] text-text-muted text-pretty">
+                  We placed you in {comparison.wardLabel} from your postal code.
+                  That is a best guess, not a certainty, for codes that straddle
+                  a ward boundary.
+                </p>
+              </>
+            ) : (
+              <p className="type-lead max-w-[54ch] text-text-secondary text-pretty">
+                {META_FALLBACK.intro}
+              </p>
+            )}
+          </div>
+
+          {/* The way out, in the masthead where a reader looks for it rather
+              than at the bottom of a page they have to finish first. */}
+          <Link
+            href="/toronto/vote/2026"
+            className="group/btn type-button inline-flex flex-none items-center gap-2 pb-1 text-dark hover:text-accent"
+          >
+            Explore the candidates
+            <ArrowRight className="size-3.5 transition-transform group-hover/btn:translate-x-0.5" />
+          </Link>
+        </div>
+
+        {done ? (
+          <>
+            {comparison && (
+              <div className="animate-fade-in">
+                <AlignmentResults
+                  races={comparison.races}
+                  survey={survey}
+                  answers={answers}
+                />
+              </div>
+            )}
+          </>
+        ) : (
+          <>
+            {/* ── Progress ───────────────────────────────────── */}
+            <div className="flex items-center gap-4 px-6 pt-8 md:px-10">
+              <span className="type-label text-dark">
+                Step {step + 1} of {stepCount}
+              </span>
+              <div
+                className="h-0.5 flex-1 bg-border-light"
+                role="progressbar"
+                aria-valuenow={step + 1}
+                aria-valuemin={1}
+                aria-valuemax={stepCount}
+                aria-label="Survey progress"
+              >
+                <div
+                  className="h-0.5 bg-accent transition-[width] duration-300"
+                  style={{
+                    width: `${((step + 1) / stepCount) * 100}%`,
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* ── The current step ───────────────────────────── */}
+            <form
+              id="toronto-2026-survey"
+              name="toronto-2026-survey"
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (isLastStep) void submit();
+                else next();
+              }}
+            >
+              {/* Keyed on the step so React remounts it and the entrance
+                  animation replays on every move. */}
+              <div key={currentStep.id} className="grid gap-8 px-6 pt-6 md:px-10">
+                <h2
+                  className="step-field font-sans text-[26px] font-medium tracking-[-0.01em]"
+                  style={stagger(0)}
+                >
+                  {currentStep.title}
+                </h2>
+                {currentStep.intro && (
+                  <p
+                    className="step-field type-body-sm -mt-4 text-text-secondary"
+                    style={stagger(1)}
+                  >
+                    {currentStep.intro}
+                  </p>
+                )}
+
+                {currentStep.questions.map((question, i) => (
+                  <Question
+                    key={question.id}
+                    question={question}
+                    value={answers[question.id] ?? ""}
+                    error={errors[question.id]}
+                    onChange={(value) => set(question.id, value)}
+                    style={stagger(i + (currentStep.intro ? 2 : 1))}
+                  />
+                ))}
+              </div>
+
+              {/* ── Navigation ───────────────────────────────── */}
+              <div className="mt-10 flex items-center justify-between gap-4 border-t border-border-light px-6 py-6 md:px-10">
+                {step > 0 ? (
+                  <button
+                    type="button"
+                    onClick={back}
+                    className="type-button cursor-pointer border border-border-light px-7 py-4 transition-colors hover:bg-linen-200"
+                  >
+                    Back
+                  </button>
+                ) : (
+                  <span />
+                )}
+
+                <div className="flex items-center gap-4">
+                  {submitError && (
+                    <p className="type-label-sm text-accent">{submitError}</p>
+                  )}
+                  <button
+                    type="submit"
+                    disabled={submitting}
+                    className={
+                      isLastStep
+                        ? "type-button cursor-pointer border border-accent bg-accent px-8 py-4 text-bg transition-colors hover:bg-auburn-700 disabled:opacity-60"
+                        : "type-button cursor-pointer border border-dark bg-dark px-8 py-4 text-bg transition-colors hover:bg-black"
+                    }
+                  >
+                    {isLastStep
+                      ? submitting
+                        ? "Sending…"
+                        : meta.submitLabel ?? META_FALLBACK.submitLabel
+                      : "Next"}
+                  </button>
+                </div>
+              </div>
+            </form>
+          </>
+        )}
+      </div>
+    </div >
+  );
+}
+
+/* ── One question, rendered by type ─────────────────────────── */
+
+function Question({
+  question,
+  value,
+  error,
+  onChange,
+  style,
+}: {
+  question: SurveyQuestion;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+  /** staggered entrance delay from the parent step */
+  style?: CSSProperties;
+}) {
+  // Choice groups get a <legend>; single inputs get a real <label for>.
+  const isGroup = question.type === "radio" || question.type === "yesno";
+
+  // Omitted entirely for free-text questions, so every choice renderer below
+  // reads it through this rather than asserting it exists.
+  const options = question.options ?? [];
+
+  // The question reads as a heading — one step down from the step title's 26px
+  // — rather than as a form label, because several of these are a sentence long
+  // and carry a context paragraph underneath.
+  const LABEL_CLASS =
+    "font-sans text-[19px] font-medium leading-[1.3] tracking-[-0.01em] text-dark text-pretty";
+
+  const labelNode = (
+    <>
+      {question.label}
+      {question.required ? (
+        <span className="text-accent">*</span>
+      ) : (
+        <span className="type-body-sm font-normal text-text-muted">
+          {" "}
+          (optional)
+        </span>
+      )}
+    </>
+  );
+
+  // `help` sits under the context paragraph, so tie both to the field by
+  // reference rather than trusting proximity alone.
+  const contextId = `${question.id}-context`;
+  const helpId = `${question.id}-help`;
+  const describedBy =
+    [question.context && contextId, question.help && helpId]
+      .filter(Boolean)
+      .join(" ") || undefined;
+
+  return (
+    <fieldset
+      className="step-field grid gap-3 border-0 p-0 m-0"
+      style={style}
+      aria-describedby={isGroup ? describedBy : undefined}
+    >
+      {isGroup ? (
+        <legend className={`${LABEL_CLASS} p-0`}>{labelNode}</legend>
+      ) : (
+        <label htmlFor={question.id} className={LABEL_CLASS}>
+          {labelNode}
+        </label>
+      )}
+
+      {/* The briefing a voter needs before they can answer: directly under the
+          question, with a rule down its left edge so it reads as background
+          rather than as part of the ask. */}
+      {question.context && (
+        <p
+          id={contextId}
+          className="type-body-sm max-w-[62ch] border-l-2 border-border-light pl-4 text-text-secondary text-pretty"
+        >
+          {question.context}
+        </p>
+      )}
+
+      {/* The field and its own guidance, grouped so the choices sit tighter to
+          each other than to the briefing above. */}
+      <div className="grid content-start gap-2.5">
+        {question.help && (
+          <p id={helpId} className="type-caption text-text-muted">
+            {question.help}
+          </p>
+        )}
+
+        {question.type === "text" || question.type === "email" ? (
+          <input
+            id={question.id}
+            name={question.id}
+            type={question.type === "email" ? "email" : "text"}
+            autoComplete={autoCompleteFor(question.id)}
+            aria-describedby={describedBy}
+            value={value}
+            placeholder={question.placeholder}
+            onChange={(e) => onChange(e.target.value)}
+            className={`${FIELD_CLASS} ${question.id === "postal_code" ? "max-w-[240px]" : "max-w-[420px]"}`}
+          />
+        ) : question.type === "textarea" ? (
+          <textarea
+            id={question.id}
+            name={question.id}
+            rows={question.rows ?? 4}
+            aria-describedby={describedBy}
+            value={value}
+            placeholder={question.placeholder}
+            onChange={(e) => onChange(e.target.value)}
+            className={FIELD_CLASS}
+          />
+        ) : question.type === "select" ? (
+          <Select
+            id={question.id}
+            name={question.id}
+            value={value}
+            onValueChange={onChange}
+            options={options}
+            placeholder={question.placeholder}
+            invalid={Boolean(error)}
+            className="max-w-[420px]"
+          />
+        ) : question.type === "radio" ? (
+          <div className="grid gap-2">
+            {options.map((option) => (
+              <label key={option.value} className={CHOICE_CLASS}>
+                <input
+                  type="radio"
+                  name={question.id}
+                  value={option.value}
+                  checked={value === option.value}
+                  onChange={() => onChange(option.value)}
+                  className={RADIO_CLASS}
+                />
+                {option.label}
+              </label>
+            ))}
+          </div>
+        ) : (
+          /* yesno — a segmented control rather than two wide boxes. The answer
+             is one word, so the control is sized to its words and the pair
+             shares one border, reading as a single unit.
+
+             Deliberately not `type-button`: that utility is uppercase mono at
+             0.14em tracking, which is right on a button and unreadable on a
+             one-word answer. These use the same serif face and size as the
+             radio choices above, so the two question types look related.
+
+             The Yes/No pair still comes from the API like any other options
+             list, so results group by values this component never invents.
+
+             The radio is visually hidden and the whole segment is the target —
+             `has-checked:` styles the label from the input's own state, so this
+             stays a real radio group for keyboard and screen-reader users, with
+             the focus ring surfaced by `has-focus-visible:`. Hover is scoped to
+             unchecked segments so it can't repaint the selected one.
+
+             The rule and the space above it separate the ask from the answer.
+             Several of these questions run a sentence long and carry a context
+             paragraph, so without a break the control reads as one more line of
+             that text. The rule's width matches the context paragraph's measure,
+             so it aligns with the column above rather than running the full
+             width of the card. */
+          <div className="mt-3 max-w-[62ch] border-t border-border-light pt-5">
+            <div className="flex w-fit border border-border-light bg-white">
+              {options.map((option, i) => (
+                <label
+                  key={option.value}
+                  className={`cursor-pointer px-7 py-2.5 text-[17px] transition-colors ${i > 0 ? "border-l border-border-light" : ""
+                    } not-has-checked:hover:bg-linen-100 has-checked:bg-dark has-checked:text-bg has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-dark`}
+                >
+                  <input
+                    type="radio"
+                    name={question.id}
+                    value={option.value}
+                    checked={value === option.value}
+                    onChange={() => onChange(option.value)}
+                    className="sr-only"
+                  />
+                  {option.label}
+                </label>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {error && <p className="type-label-sm text-accent">{error}</p>}
+      </div>
+    </fieldset>
+  );
+}
+
+/** Autofill hints for the handful of fields browsers can help with. */
+function autoCompleteFor(id: string): string | undefined {
+  if (id === "email") return "email";
+  if (id === "name") return "name";
+  if (id === "postal_code") return "postal-code";
+  return undefined;
+}
diff --git a/src/app/toronto/vote/2026/survey/page.tsx b/src/app/toronto/vote/2026/survey/page.tsx
new file mode 100644
index 00000000..841cfecf
--- /dev/null
+++ b/src/app/toronto/vote/2026/survey/page.tsx
@@ -0,0 +1,64 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+import { DEFAULT_ELECTION_SLUG } from "@/lib/elections/registry";
+import {
+  CITY_PRIORITIES_SLUG,
+  fetchSurvey,
+  type Survey,
+} from "@/lib/elections/survey";
+
+import { WARD_SHAPES } from "../wardGeo";
+
+import SurveyClient from "./SurveyClient";
+
+/**
+ * Ward number → name, for labelling the candidate comparison after submission.
+ *
+ * Built here rather than imported by SurveyClient because wardGeo.ts is a large
+ * generated file of SVG boundary paths; importing it from a client component
+ * would ship all of that to the browser to render the word "Davenport".
+ */
+const WARD_NAMES: Record<string, string> = Object.fromEntries(
+  WARD_SHAPES.map((ward) => [ward.n, ward.name]),
+);
+
+// The questions come from York Factory, so this page is only as available as
+// that API — mitigated by the five-minute ISR cache in fetchSurvey, which keeps
+// serving the last good copy through a blip. A cold cache plus an outage is a
+// 404 rather than a half-rendered form: a survey with no questions is worse
+// than an honest miss, and keeping a hard-coded copy here to fall back on is
+// the drift this move was meant to end.
+async function loadSurvey(): Promise<Survey | null> {
+  try {
+    return await fetchSurvey(DEFAULT_ELECTION_SLUG, CITY_PRIORITIES_SLUG);
+  } catch {
+    return null;
+  }
+}
+
+export async function generateMetadata(): Promise<Metadata> {
+  const survey = await loadSurvey();
+  const title = survey?.meta.title ?? "Toronto Priorities Survey";
+  const description =
+    survey?.meta.intro ??
+    "Answer thirty questions on what Toronto should do next, and see which candidates on your ballot agree with you.";
+
+  return {
+    title: `${title} — Toronto 2026`,
+    description,
+    alternates: { canonical: "/toronto/vote/2026/survey" },
+    openGraph: {
+      title: `${title} — Toronto 2026 | Build Canada`,
+      description,
+      type: "website",
+    },
+  };
+}
+
+export default async function SurveyPage() {
+  const survey = await loadSurvey();
+  if (!survey || survey.steps.length === 0) notFound();
+
+  return <SurveyClient survey={survey} wardNames={WARD_NAMES} />;
+}
diff --git a/src/app/toronto/vote/2026/survey/submitSurvey.ts b/src/app/toronto/vote/2026/survey/submitSurvey.ts
new file mode 100644
index 00000000..1d15430a
--- /dev/null
+++ b/src/app/toronto/vote/2026/survey/submitSurvey.ts
@@ -0,0 +1,93 @@
+import posthog from "posthog-js";
+
+import { DEFAULT_ELECTION_SLUG } from "@/lib/elections/registry";
+import type { Survey } from "@/lib/elections/survey";
+import { hubspotPageContext } from "@/lib/hubspot-context";
+
+import type { SurveyAnswers } from "./SurveyClient";
+
+/**
+ * What the API tells us back about a recorded response.
+ *
+ * `derivedRegion` is the ward York Factory resolved from the postal code
+ * ("ward-9"), and on this survey it is the only ward there is — the question
+ * set asks for a postal code and nothing else about where someone lives. It is
+ * a best guess: a postal code's stored point is the centroid of its delivery
+ * area, so a code on a ward line can resolve to the neighbour. Null whenever
+ * the lookup missed, which is not an error — the response is still recorded.
+ */
+export type SurveySubmission = {
+  surveySlug: string;
+  /** self-reported ward, for a survey that collects one; null here */
+  region: string | null;
+  /** ward derived from the postal code, e.g. "ward-9" */
+  derivedRegion: string | null;
+  submittedAt: string | null;
+};
+
+/**
+ * Sends a completed survey to /api/elections/survey, which forwards it to York
+ * Factory (subscriber upsert + one response per subscriber per survey).
+ *
+ * The slug and version come from the survey that was rendered, not from
+ * constants here — they identify the question set these answers were actually
+ * given to. Sending a version the page never rendered is how answers end up
+ * filed under the wrong questions, which is exactly what stamping a version is
+ * meant to prevent.
+ *
+ * Throws on failure. The caller keeps the user's answers on screen and shows a
+ * retry, so a thrown error is a recoverable state rather than lost work — which
+ * is why nothing here swallows it.
+ *
+ * Returns what was recorded, because the ward in the reply is the one the
+ * results view compares against. Deriving it a second time on the client would
+ * be a second answer to the same question, free to disagree with the one
+ * actually stored on the response.
+ */
+export async function submitSurvey(
+  survey: Survey,
+  answers: SurveyAnswers,
+): Promise<SurveySubmission> {
+  const res = await fetch("/api/elections/survey", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      election: DEFAULT_ELECTION_SLUG,
+      survey_slug: survey.slug,
+      survey_version: survey.version,
+      // Promoted out of the answer bag: these three are how a response is
+      // identified and cut, and the API stores them as columns. They stay in
+      // `answers` too, so the raw submission is preserved as given.
+      email: answers.email,
+      name: answers.name,
+      region: answers.ward,
+      postal_code: answers.postal_code,
+      answers,
+      ...hubspotPageContext(),
+    }),
+  });
+
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}));
+    throw new Error(data.error || "Survey submission failed");
+  }
+
+  const data = await res.json().catch(() => ({}));
+
+  if (answers.email) {
+    posthog.identify(answers.email, { email: answers.email });
+  }
+  posthog.capture("survey_submitted", {
+    survey: survey.slug,
+    survey_version: survey.version,
+    election: DEFAULT_ELECTION_SLUG,
+    ward: data.derivedRegion ?? data.region ?? null,
+  });
+
+  return {
+    surveySlug: data.surveySlug ?? survey.slug,
+    region: data.region ?? null,
+    derivedRegion: data.derivedRegion ?? null,
+    submittedAt: data.submittedAt ?? null,
+  };
+}
diff --git a/src/app/toronto/vote/2026/wards/[ward]/page.tsx b/src/app/toronto/vote/2026/wards/[ward]/page.tsx
index aae3bd08..85b0fe52 100644
--- a/src/app/toronto/vote/2026/wards/[ward]/page.tsx
+++ b/src/app/toronto/vote/2026/wards/[ward]/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { WardDetail } from "@/components/elections/WardDetail";
 import { WardMap, WardMapDefs } from "@/components/elections/WardMap";
+import { rosterSurvey } from "@/lib/elections/survey-answers";
 import { ELECTION, WARD_NUMBERS, getToronto2026, getToronto2026Ward } from "../../data";
 import { WARD_GEO, WARD_SHAPES } from "../../wardGeo";
 
@@ -41,11 +42,21 @@ export default async function WardDetailPage({
   ]);
   if (!data) notFound();
 
+  const candidateKeys = new Set(
+    data.councilRaces.flatMap((race) => race.candidates.map((c) => c.key)),
+  );
+  const { answers: surveyAnswers, shape: surveyShape } = await rosterSurvey(
+    ELECTION.slug,
+    candidateKeys,
+  );
+
   return (
     <WardDetail
       election={ELECTION}
       data={data}
       nominationCloseLabel={view.nominationCloseLabel}
+      surveyAnswers={surveyAnswers}
+      surveyShape={surveyShape}
       wardMapDefs={<WardMapDefs geo={WARD_GEO} />}
       wardMap={
         <WardMap
diff --git a/src/components/charts/trilemma/OptionBar.tsx b/src/components/charts/trilemma/OptionBar.tsx
new file mode 100644
index 00000000..9e5c475b
--- /dev/null
+++ b/src/components/charts/trilemma/OptionBar.tsx
@@ -0,0 +1,150 @@
+'use client'
+
+import { resolveFonts } from './fonts'
+import { MUTED, palette } from './palette'
+import { TOKENS } from './theme'
+import { useMeasure } from './useMeasure'
+import { wrapText } from './wrap'
+import type { ThemeName } from './types'
+
+export interface OptionBarProps {
+  /** The options exactly as they were offered. */
+  options: string[]
+  /** How many chose each option, in the same order. */
+  counts: number[]
+
+  /**
+   * Index of the one option to keep in colour; every other option fades to
+   * neutral. Use it to show one respondent's pick against the field.
+   */
+  highlight?: number | null
+
+  /* ---- layout ---- */
+  width?: number
+  height?: number
+  /** Fill the parent width and re-render on resize. */
+  responsive?: boolean
+
+  /* ---- layers ---- */
+  /** Counts printed inside each segment, where the segment is wide enough. */
+  showCounts?: boolean
+  /**
+   * How a count reads inside its segment. Defaults to the number itself; pass
+   * `percentOf(total)` to print shares, as the dial does.
+   */
+  valueFormat?: (n: number) => string
+  /**
+   * Option names printed under the band, one per segment — the bar's answer to
+   * the dial's goal labels, so a bar can carry its own key instead of
+   * borrowing one from a list beside it. A segment too narrow for its name is
+   * left to the list.
+   */
+  showLabels?: boolean
+
+  /* ---- chrome ---- */
+  colors?: string[]
+  theme?: ThemeName
+  fontFamily?: string
+  /** Accessible name for the bar — normally the question itself. */
+  label?: string
+  className?: string
+}
+
+/**
+ * A segmented bar: one question's answers as a single 100% band.
+ *
+ * The companion to `TrilemmaDial` for questions a trilemma cannot describe —
+ * a two-option Yes/No, or a four-way split. Colours come from the same corner
+ * ramps the dial uses, so the two charts sit together on a page.
+ */
+export function OptionBar({
+  options,
+  counts,
+  highlight = null,
+  width: widthProp = 230,
+  height = 34,
+  responsive = false,
+  showCounts = true,
+  valueFormat = String,
+  showLabels = false,
+  colors: colorsProp,
+  theme = 'light',
+  fontFamily,
+  label,
+  className,
+}: OptionBarProps) {
+  const tokens = TOKENS[theme]
+  const fonts = resolveFonts(fontFamily)
+
+  const { ref, width: measured } = useMeasure<HTMLDivElement>(responsive)
+  const width = responsive ? measured || widthProp : widthProp
+
+  const full = colorsProp ?? palette(options.length, theme)
+  const colors = highlight === null ? full : full.map((c, i) => (i === highlight ? c : MUTED))
+
+  const total = counts.reduce((a, b) => a + b, 0) || 1
+
+  // Each segment's offset is the share of everything before it. Options number
+  // two to four, so the repeated prefix sum costs nothing and stays immutable.
+  const segments = counts.map((c, i) => {
+    const before = counts.slice(0, i).reduce((a, b) => a + b, 0)
+    return { i, x: (before / total) * width, w: (c / total) * width, count: c, color: colors[i] }
+  })
+
+  const aria = label ?? options.map((o, i) => `${o} ${valueFormat(counts[i])}`).join(', ')
+
+  // The label lines wrap into their own segment's width, which is the only
+  // room they have; a name that will not fit two lines there is dropped.
+  const labelLines = showLabels
+    ? segments.map(({ w }, i) => (w < 34 ? [] : wrapText(options[i], Math.max(6, Math.floor(w / 5.6)), 2)))
+    : []
+  const labelRows = labelLines.reduce((n, lines) => Math.max(n, lines.length), 0)
+  const labelBlock = labelRows > 0 ? 6 + labelRows * 13 : 0
+
+  return (
+    <div ref={ref} className={className} style={{ width: responsive ? '100%' : width, maxWidth: '100%' }}>
+      <svg
+        width={width}
+        height={height + labelBlock}
+        style={{ display: 'block', overflow: 'visible' }}
+        role="img"
+        aria-label={aria}
+      >
+        {segments.map(({ i, x: sx, w, count, color }) => (
+          <g key={i}>
+            {/* A 1px bite out of each segment keeps the joins visible without a stroke. */}
+            <rect x={sx} y={0} width={Math.max(0, w - 1)} height={height} fill={color} />
+            {showCounts && w > 26 && (
+              <text
+                x={sx + w / 2}
+                y={height / 2}
+                dy="0.35em"
+                textAnchor="middle"
+                fontFamily={fonts.label}
+                fontSize={12}
+                fill={color === MUTED ? tokens.inkSoft : tokens.bg}
+                style={{ fontVariantNumeric: 'tabular-nums' }}
+              >
+                {valueFormat(count)}
+              </text>
+            )}
+            {labelLines[i]?.map((line, li) => (
+              <text
+                key={`label-${li}`}
+                x={sx + w / 2}
+                y={height + 6 + 10 + li * 13}
+                textAnchor="middle"
+                fontFamily={fonts.display}
+                fontSize={11.5}
+                fontWeight={500}
+                fill={color === MUTED ? tokens.inkFaint : tokens.ink}
+              >
+                {line}
+              </text>
+            ))}
+          </g>
+        ))}
+      </svg>
+    </div>
+  )
+}
diff --git a/src/components/charts/trilemma/TrilemmaDial.tsx b/src/components/charts/trilemma/TrilemmaDial.tsx
new file mode 100644
index 00000000..dbe40461
--- /dev/null
+++ b/src/components/charts/trilemma/TrilemmaDial.tsx
@@ -0,0 +1,506 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { scaleLinear, scaleSqrt } from 'd3-scale'
+import { lab } from 'd3-color'
+import { format } from 'd3-format'
+import { GOAL_WRAP, bisectorPoint, kitePath, layoutDial, wedgeAngles, wedgePath } from './dial'
+import { blendCorners } from './colour'
+import { CORNER_COLORS, TOKENS } from './theme'
+import { resolveFonts } from './fonts'
+import { useMeasure } from './useMeasure'
+import { wrapLabel } from './wrap'
+import type { AxisConfig, ThemeName, Triple } from './types'
+
+export type DialValues = Record<string, number> | Triple<number>
+
+export interface TrilemmaDialProps {
+  /** One entity's three scores. */
+  values: DialValues
+  axes: Triple<AxisConfig>
+  /** Name of the entity, shown in the middle of the dial. */
+  label?: string
+  /** Second line under the centre label. */
+  sublabel?: string
+  /** `auto` puts the name in the hub when it fits there, otherwise underneath. */
+  labelPlacement?: 'auto' | 'centre' | 'below'
+
+  /** A benchmark drawn as an outline behind the wedges. */
+  reference?: DialValues
+  referenceLabel?: string
+
+  /* ---- scale ---- */
+  /** Value range mapped to radius. Defaults to [0, max of the data]. */
+  domain?: [number, number]
+  /** `sqrt` makes wedge *area* proportional to value; `linear` makes radius. */
+  scale?: 'sqrt' | 'linear'
+  /** Degrees of extra rotation. 0 puts axes[0] straight up. */
+  rotation?: number
+
+  /* ---- layout ---- */
+  width?: number
+  height?: number
+  responsive?: boolean
+  padding?: number
+  /** Donut hole, as a fraction of the outer radius. */
+  innerRadius?: number
+  /**
+   * Force the outer radius instead of deriving it from the labels. Small
+   * multiples must share one, or their shared value scale is a fiction.
+   */
+  radiusOverride?: number
+  /** Gap between wedges, in degrees. */
+  gap?: number
+  cornerRadius?: number
+
+  /* ---- layers ---- */
+  showTrack?: boolean
+  showRings?: boolean
+  ringStep?: number
+  showRingLabels?: boolean
+  showKite?: boolean
+  showGoalLabels?: boolean
+  valueMode?: 'none' | 'inside' | 'outside'
+  valueFormat?: (n: number) => string
+
+  /* ---- chrome ---- */
+  colorBy?: 'corner' | 'single'
+  color?: string
+  cornerColors?: Triple<string>
+  /**
+   * Colours for the direct-labelled values, where they should not follow the
+   * wedges. A caller that mutes two of three wedges to pick out one answer
+   * still needs all three numbers readable, and a muted neutral is a fill
+   * colour, not a text colour.
+   */
+  valueColors?: Triple<string>
+  theme?: ThemeName
+  /**
+   * The paper this dial sits on. Defaults to the chart theme's own, which is
+   * right for a standalone figure and wrong inside a page that paints its own
+   * background — pass that page's colour there, e.g. `var(--color-bg)`.
+   *
+   * Sets the wedge outlines as well as the fill behind them: those outlines
+   * exist to read as gaps cut out of the paper, so a colour that is merely
+   * close leaves a pale hairline around every wedge.
+   */
+  paper?: string
+  fontFamily?: string
+  animate?: boolean
+  interactive?: boolean
+  onHover?: (corner: number | null) => void
+
+  title?: string
+  subtitle?: string
+  note?: string
+  source?: string
+  className?: string
+}
+
+const readTriple = (v: DialValues, axes: Triple<AxisConfig>): Triple<number> =>
+  Array.isArray(v)
+    ? [v[0], v[1], v[2]]
+    : [v[axes[0].key] ?? 0, v[axes[1].key] ?? 0, v[axes[2].key] ?? 0]
+
+const defaultFormat = format(',.0f')
+
+/**
+ * The trilemma as a dial: one 120° wedge per goal, the first pointing straight
+ * up, each wedge reaching out as far as that goal scores. A circle filled to
+ * the rim would be all three at once — the point is that none of them is.
+ */
+export function TrilemmaDial(props: TrilemmaDialProps) {
+  const {
+    values,
+    axes,
+    label,
+    sublabel,
+    labelPlacement = 'auto',
+    reference,
+    referenceLabel = 'Benchmark',
+    domain,
+    scale = 'sqrt',
+    rotation = 0,
+    width: widthProp = 340,
+    height: heightProp,
+    responsive = false,
+    padding = 8,
+    innerRadius = 0.18,
+    radiusOverride,
+    gap = 1.5,
+    cornerRadius = 3,
+    showTrack = true,
+    showRings = true,
+    ringStep = 0.25,
+    showRingLabels = false,
+    showKite = false,
+    showGoalLabels = true,
+    valueMode = 'outside',
+    valueFormat = defaultFormat,
+    colorBy = 'corner',
+    color,
+    cornerColors: cornerColorsProp,
+    valueColors,
+    theme = 'light',
+    paper,
+    fontFamily,
+    animate = true,
+    interactive = true,
+    onHover,
+    title,
+    subtitle,
+    note,
+    source,
+    className,
+  } = props
+
+  const tokens = TOKENS[theme]
+  const fonts = resolveFonts(fontFamily)
+  const cornerColors: Triple<string> = cornerColorsProp ?? [
+    axes[0].color ?? CORNER_COLORS[theme][0],
+    axes[1].color ?? CORNER_COLORS[theme][1],
+    axes[2].color ?? CORNER_COLORS[theme][2],
+  ]
+
+  const { ref, width: measured } = useMeasure<HTMLDivElement>(responsive)
+  const width = responsive ? measured || widthProp : widthProp
+  const height = heightProp ?? width
+
+  const [hovered, setHovered] = useState<number | null>(null)
+
+  const v = useMemo(() => readTriple(values, axes), [values, axes])
+  const refV = useMemo(() => (reference ? readTriple(reference, axes) : null), [reference, axes])
+  const rot = (rotation * Math.PI) / 180
+
+  /**
+   * Room outside the rim. The two lower goal labels are the tall ones — they
+   * wrap, and a caption underneath has to clear whatever they take.
+   */
+  const { R, centreLabels, captionY } = layoutDial(
+    {
+      width,
+      height,
+      padding,
+      axes,
+      showGoalLabels,
+      showValues: valueMode === 'outside',
+      hasLabel: !!label,
+    },
+    radiusOverride,
+  )
+  const cx = width / 2
+  const cy = height / 2
+
+  const hi = domain?.[1] ?? Math.max(...v, ...(refV ?? [0]), 1)
+  const lo = domain?.[0] ?? 0
+  const radius = useMemo(() => {
+    const s = scale === 'sqrt' ? scaleSqrt() : scaleLinear()
+    return s.domain([lo, hi]).range([innerRadius * R, R]).clamp(true)
+  }, [scale, lo, hi, innerRadius, R])
+
+  const radii = v.map((x) => radius(x)) as Triple<number>
+  const refRadii = refV ? (refV.map((x) => radius(x)) as Triple<number>) : null
+  const padAngle = (gap * Math.PI) / 180
+  const inner = innerRadius * R
+  const fillFor = (i: number) => (colorBy === 'single' ? color ?? blendCorners(cornerColors, [1, 1, 1]) : cornerColors[i])
+
+  // The centre label lives in the donut hole when it fits; a long name gets a
+  // caption under the dial instead of a disc that eats the wedges.
+  const labelFont = 13
+  const labelWidth = Math.max(
+    (label?.length ?? 0) * labelFont * 0.58,
+    (sublabel?.length ?? 0) * 9.5 * 0.52,
+  )
+  const discR = Math.max(inner, labelWidth / 2 + 7)
+  const labelBelow =
+    !!label && (labelPlacement === 'below' || (labelPlacement === 'auto' && discR > R * 0.42))
+
+  /**
+   * Everything that has to read as the page behind the chart: the fill under
+   * the wedges, the outlines that make the gaps between them, the donut hole,
+   * and the knockout behind a label sitting over a wedge. One colour, because
+   * they are all the same surface — `bg` and `halo` are the same value in both
+   * themes, and splitting them here only invites them to drift apart.
+   */
+  const paperColor = paper ?? tokens.bg
+  const halo = paperColor
+  const onWedge = (i: number) => (lab(cornerColors[i]).l > 62 ? tokens.ink : halo)
+
+  const rings: number[] = []
+  if (showRings) for (let t = ringStep; t <= 1.0001; t += ringStep) rings.push(lo + (hi - lo) * t)
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={{
+        background: paperColor,
+        width: responsive ? '100%' : width,
+        maxWidth: '100%',
+      }}
+    >
+      {(title || subtitle) && (
+        <header style={{ marginBottom: 6 }}>
+          {title && <h2 style={{ font: `500 20px/1.2 ${fonts.display}`, color: tokens.ink, margin: '0 0 4px' }}>{title}</h2>}
+          {subtitle && (
+            <p style={{ font: `400 15px/1.4 ${fonts.body}`, color: tokens.inkSoft, margin: 0, maxWidth: 560 }}>{subtitle}</p>
+          )}
+        </header>
+      )}
+
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        style={{ display: 'block', width: '100%', height: 'auto', overflow: 'visible' }}
+        role="img"
+        aria-label={`${label ?? 'Trilemma'}: ${axes.map((a, i) => `${a.label} ${valueFormat(v[i])}`).join(', ')}`}
+        onMouseLeave={() => {
+          setHovered(null)
+          onHover?.(null)
+        }}
+      >
+        <g transform={`translate(${cx},${cy})`}>
+          {showTrack &&
+            axes.map((_, i) => (
+              <path
+                key={`track-${i}`}
+                d={wedgePath(i, inner, R, rot, padAngle, cornerRadius)}
+                fill={tokens.ink}
+                opacity={0.045}
+              />
+            ))}
+
+          {axes.map((ax, i) => {
+            const dim = hovered !== null && hovered !== i
+            return (
+              <path
+                key={`wedge-${i}`}
+                d={wedgePath(i, inner, radii[i], rot, padAngle, cornerRadius)}
+                fill={fillFor(i)}
+                fillOpacity={dim ? 0.35 : 0.85}
+                stroke={halo}
+                strokeWidth={0.75}
+                style={{
+                  transition: animate ? 'd 500ms cubic-bezier(.4,.1,.2,1), fill-opacity 180ms' : undefined,
+                  cursor: interactive ? 'pointer' : 'default',
+                }}
+                tabIndex={interactive ? 0 : undefined}
+                aria-label={`${ax.label}: ${valueFormat(v[i])}`}
+                onMouseEnter={
+                  interactive
+                    ? () => {
+                      setHovered(i)
+                      onHover?.(i)
+                    }
+                    : undefined
+                }
+                onFocus={interactive ? () => setHovered(i) : undefined}
+                onBlur={interactive ? () => setHovered(null) : undefined}
+              />
+            )
+          })}
+
+          {/* Rings and the benchmark sit above the fills, so they stay readable
+              wherever a wedge happens to reach. */}
+          {showRings &&
+            rings.map((val, i) => (
+              <circle
+                key={`ring-${i}`}
+                r={radius(val)}
+                fill="none"
+                stroke={i === rings.length - 1 ? tokens.grid : halo}
+                strokeOpacity={i === rings.length - 1 ? 1 : 0.35}
+                strokeWidth={1}
+                strokeDasharray={i === rings.length - 1 ? undefined : '2 4'}
+              />
+            ))}
+
+          {refRadii &&
+            axes.map((_, i) => (
+              <path
+                key={`ref-${i}`}
+                d={wedgePath(i, inner, refRadii[i], rot, padAngle, cornerRadius)}
+                fill="none"
+                stroke={tokens.inkSoft}
+                strokeOpacity={0.85}
+                strokeWidth={1}
+                strokeDasharray="3 2.5"
+              />
+            ))}
+
+          {showKite && (
+            <path
+              d={kitePath(radii, rot)}
+              fill="none"
+              stroke={tokens.ink}
+              strokeWidth={1.25}
+              strokeOpacity={0.55}
+              strokeLinejoin="round"
+              style={{ transition: animate ? 'd 500ms cubic-bezier(.4,.1,.2,1)' : undefined }}
+            />
+          )}
+
+          {/* Wedge dividers, drawn over the fills so the thirds stay legible. */}
+          {axes.map((_, i) => {
+            const a = wedgeAngles(i, rot).start
+            return (
+              <line
+                key={`div-${i}`}
+                x1={Math.cos(a) * inner}
+                y1={Math.sin(a) * inner}
+                x2={Math.cos(a) * R}
+                y2={Math.sin(a) * R}
+                stroke={paperColor}
+                strokeWidth={1}
+                opacity={0.6}
+              />
+            )
+          })}
+
+          {/* Ring labels run down the wedge boundary at 6 o'clock — the one
+              radius that never crosses a fill. */}
+          {showRingLabels &&
+            rings.map((val, i) => (
+              <text
+                key={`rl-${i}`}
+                x={0}
+                y={radius(val)}
+                dy="-4"
+                textAnchor="middle"
+                fontFamily={fonts.label}
+                fontSize={9}
+                fill={tokens.inkFaint}
+                stroke={paperColor}
+                strokeWidth={2.5}
+                paintOrder="stroke"
+              >
+                {valueFormat(val)}
+              </text>
+            ))}
+
+          {label && !labelBelow && (
+            <g>
+              <circle r={discR} fill={paperColor} />
+              <text
+                y={sublabel ? -2 : 3}
+                textAnchor="middle"
+                fontFamily={fonts.display}
+                fontSize={labelFont}
+                fontWeight={500}
+                fill={tokens.ink}
+              >
+                {label}
+              </text>
+              {sublabel && (
+                <text y={12} textAnchor="middle" fontFamily={fonts.body} fontSize={10.5} fill={tokens.inkFaint}>
+                  {sublabel}
+                </text>
+              )}
+            </g>
+          )}
+
+          {label && labelBelow && (
+            <g>
+              <circle r={inner} fill={paperColor} />
+              <text
+                y={captionY}
+                textAnchor="middle"
+                fontFamily={fonts.display}
+                fontSize={14}
+                fontWeight={500}
+                fill={tokens.ink}
+              >
+                {label}
+              </text>
+              {sublabel && (
+                <text y={captionY + 14} textAnchor="middle" fontFamily={fonts.body} fontSize={11} fill={tokens.inkFaint}>
+                  {sublabel}
+                </text>
+              )}
+            </g>
+          )}
+
+          {showGoalLabels &&
+            axes.map((ax, i) => {
+              const p = bisectorPoint(i, R + (centreLabels ? 20 : 13), rot)
+              const anchor = centreLabels || Math.abs(p.x) < 6 ? 'middle' : p.x > 0 ? 'start' : 'end'
+              const lines = wrapLabel(ax.label, GOAL_WRAP)
+              const up = p.y < -6
+              const baseY = p.y + (up ? -(lines.length - 1) * 14 : centreLabels ? 8 : 4)
+              return (
+                <g key={`goal-${i}`} opacity={hovered !== null && hovered !== i ? 0.4 : 1}>
+                  {lines.map((ln, li) => (
+                    <text
+                      key={li}
+                      x={p.x}
+                      y={baseY + li * 14}
+                      textAnchor={anchor}
+                      fontFamily={fonts.display}
+                      fontSize={12.5}
+                      fontWeight={500}
+                      fill={tokens.ink}
+                      stroke={paperColor}
+                      strokeWidth={3}
+                      paintOrder="stroke"
+                    >
+                      {ln}
+                    </text>
+                  ))}
+                  {valueMode === 'outside' && (
+                    <text
+                      x={p.x}
+                      y={baseY + lines.length * 14 + 1}
+                      textAnchor={anchor}
+                      fontFamily={fonts.label}
+                      fontSize={12}
+                      fill={valueColors?.[i] ?? cornerColors[i]}
+                      style={{ fontVariantNumeric: 'tabular-nums' }}
+                    >
+                      {valueFormat(v[i])}
+                    </text>
+                  )}
+                </g>
+              )
+            })}
+
+          {valueMode === 'inside' &&
+            axes.map((_, i) => {
+              const p = bisectorPoint(i, Math.max(inner + 16, radii[i] - 16), rot)
+              return (
+                <text
+                  key={`val-${i}`}
+                  x={p.x}
+                  y={p.y}
+                  dy="0.32em"
+                  textAnchor="middle"
+                  fontFamily={fonts.label}
+                  fontSize={12}
+                  fontWeight={500}
+                  fill={onWedge(i)}
+                  stroke={onWedge(i) === tokens.ink ? halo : cornerColors[i]}
+                  strokeWidth={2.5}
+                  paintOrder="stroke"
+                  style={{ fontVariantNumeric: 'tabular-nums' }}
+                >
+                  {valueFormat(v[i])}
+                </text>
+              )
+            })}
+        </g>
+      </svg>
+
+      {(note || source || refRadii) && (
+        <footer style={{ marginTop: 6, maxWidth: 560 }}>
+          {refRadii && (
+            <p style={{ font: `400 12px/1.5 ${fonts.body}`, color: tokens.inkFaint, margin: '0 0 2px' }}>
+              Dashed outline: {referenceLabel}
+            </p>
+          )}
+          {note && <p style={{ font: `400 13px/1.5 ${fonts.body}`, color: tokens.inkSoft, margin: '0 0 3px' }}>{note}</p>}
+          {source && <p style={{ font: `400 12px/1.5 ${fonts.body}`, color: tokens.inkFaint, margin: 0 }}>{source}</p>}
+        </footer>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/charts/trilemma/TrilemmaDialGroup.tsx b/src/components/charts/trilemma/TrilemmaDialGroup.tsx
new file mode 100644
index 00000000..90f845e1
--- /dev/null
+++ b/src/components/charts/trilemma/TrilemmaDialGroup.tsx
@@ -0,0 +1,176 @@
+'use client'
+
+import { TrilemmaDial } from './TrilemmaDial'
+import { layoutDial } from './dial'
+import type { DialValues, TrilemmaDialProps } from './TrilemmaDial'
+import { BODY, CORNER_COLORS, DISPLAY, TOKENS } from './theme'
+import type { AxisConfig, Triple } from './types'
+
+export interface DialDatum {
+  id: string
+  label: string
+  sublabel?: string
+  values: DialValues
+  /**
+   * Per-panel axes, for small multiples of *different* three-way choices —
+   * one question per dial rather than one subject per dial.
+   */
+  axes?: Triple<AxisConfig>
+}
+
+export interface TrilemmaDialGroupProps
+  extends Omit<TrilemmaDialProps, 'values' | 'label' | 'sublabel' | 'title' | 'subtitle'> {
+  data: DialDatum[]
+  axes: Triple<AxisConfig>
+  title?: string
+  subtitle?: string
+  /** Per-dial size. */
+  size?: number
+  /** Sort the panels by one goal, so the small multiples tell a story. */
+  sortBy?: number | 'none'
+  columns?: number
+  /**
+   * Repeating three goal names on every panel is wasted ink. By default the
+   * group prints them once, as a key.
+   */
+  goalLabels?: 'key' | 'each'
+}
+
+const readTriple = (v: DialValues, axes: Triple<AxisConfig>): Triple<number> =>
+  Array.isArray(v)
+    ? [v[0], v[1], v[2]]
+    : [v[axes[0].key] ?? 0, v[axes[1].key] ?? 0, v[axes[2].key] ?? 0]
+
+/**
+ * Small multiples of the dial. Every panel shares one radius scale, which is
+ * the only way the shapes are comparable across panels.
+ */
+export function TrilemmaDialGroup(props: TrilemmaDialGroupProps) {
+  const {
+    data, axes, title, subtitle, note, source,
+    size = 250, sortBy = 'none', columns, domain, theme = 'light',
+    cornerColors, ...dial
+  } = props
+
+  // When every panel asks a different question, a shared key would be a lie:
+  // label each panel instead.
+  const perPanelAxes = data.some((d) => d.axes)
+  const goalLabels = props.goalLabels ?? (perPanelAxes ? 'each' : 'key')
+
+  const colors: Triple<string> = cornerColors ?? [
+    axes[0].color ?? CORNER_COLORS[theme][0],
+    axes[1].color ?? CORNER_COLORS[theme][1],
+    axes[2].color ?? CORNER_COLORS[theme][2],
+  ]
+
+  const tokens = TOKENS[theme]
+  const shared: [number, number] =
+    domain ?? [0, Math.max(1, ...data.flatMap((d) => readTriple(d.values, d.axes ?? axes)))]
+
+  // One placement for the whole group, so the panels line up. Mirrors the
+  // dial's own fit test: does the longest name fit in the hub at this size?
+  const approxR = size / 2 - (props.padding ?? 8) - (goalLabels === 'each' ? 64 : 26)
+  const longest = Math.max(
+    ...data.map((d) => Math.max(d.label.length * 13, (d.sublabel?.length ?? 0) * 9.5)),
+    0,
+  ) * 0.58
+  const labelPlacement =
+    props.labelPlacement ?? (longest / 2 + 7 > approxR * 0.42 ? 'below' : 'centre')
+
+  /**
+   * One radius for the whole grid — the smallest any panel can manage with its
+   * own labels. Otherwise a panel with short option names draws a bigger
+   * circle and the shared value scale stops meaning anything.
+   */
+  const sharedRadius = Math.min(
+    ...data.map(
+      (d) =>
+        layoutDial({
+          width: size,
+          height: props.height ?? size,
+          padding: props.padding ?? 8,
+          axes: d.axes ?? axes,
+          showGoalLabels: goalLabels === 'each',
+          showValues: (props.valueMode ?? 'outside') === 'outside',
+          hasLabel: !!d.label,
+        }).R,
+    ),
+  )
+
+  const panels =
+    sortBy === 'none'
+      ? data
+      : [...data].sort(
+          (a, b) => readTriple(b.values, b.axes ?? axes)[sortBy] - readTriple(a.values, a.axes ?? axes)[sortBy],
+        )
+
+  return (
+    <div style={{ background: tokens.bg }}>
+      {title && <h2 style={{ font: `500 21px/1.2 ${DISPLAY}`, color: tokens.ink, margin: '0 0 4px' }}>{title}</h2>}
+      {subtitle && (
+        <p style={{ font: `400 13.5px/1.45 ${BODY}`, color: tokens.inkSoft, margin: '0 0 14px', maxWidth: 640 }}>
+          {subtitle}
+        </p>
+      )}
+
+      {goalLabels === 'key' && (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 18px', margin: '0 0 12px' }}>
+          {axes.map((a, i) => (
+            <span key={a.key} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+              <span
+                style={{
+                  width: 10,
+                  height: 10,
+                  background: colors[i],
+                  // Echo the wedge: a third of a circle, pointing the same way.
+                  clipPath: 'polygon(50% 50%, 0% 0%, 100% 0%)',
+                }}
+              />
+              <span style={{ font: `500 12px/1 ${BODY}`, color: tokens.inkSoft }}>{a.label}</span>
+            </span>
+          ))}
+          <span style={{ font: `400 11.5px/1 ${BODY}`, color: tokens.inkFaint }}>
+            wedges clockwise from the top
+          </span>
+        </div>
+      )}
+
+      <div
+        style={{
+          display: 'grid',
+          // `columns` caps the row rather than forcing it: panels wrap instead of
+          // overflowing when the page is narrower than columns x size.
+          gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${size}px), ${size}px))`,
+          maxWidth: columns ? columns * (size + 4) : undefined,
+          justifyContent: 'start',
+          gap: 4,
+        }}
+      >
+        {panels.map((d) => (
+          <TrilemmaDial
+            key={d.id}
+            {...dial}
+            axes={d.axes ?? axes}
+            theme={theme}
+            values={d.values}
+            label={d.label}
+            labelPlacement={labelPlacement}
+            radiusOverride={props.radiusOverride ?? sharedRadius}
+            showGoalLabels={goalLabels === 'each'}
+            cornerColors={colors}
+            sublabel={d.sublabel}
+            domain={shared}
+            width={size}
+          />
+        ))}
+      </div>
+
+      {(note || source) && (
+        <footer style={{ marginTop: 10, maxWidth: 640 }}>
+          {note && <p style={{ font: `400 12px/1.5 ${BODY}`, color: tokens.inkSoft, margin: '0 0 3px' }}>{note}</p>}
+          {source && <p style={{ font: `400 11px/1.5 ${BODY}`, color: tokens.inkFaint, margin: 0 }}>{source}</p>}
+        </footer>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/charts/trilemma/WedgeGlyph.tsx b/src/components/charts/trilemma/WedgeGlyph.tsx
new file mode 100644
index 00000000..5e134454
--- /dev/null
+++ b/src/components/charts/trilemma/WedgeGlyph.tsx
@@ -0,0 +1,50 @@
+import { arc as d3arc } from 'd3-shape'
+import { TOKENS } from './theme'
+import type { ThemeName } from './types'
+
+/**
+ * Key glyph: the same circle as the dial, with one option's slice filled — so
+ * a list of options reads directly onto the chart beside it.
+ *
+ * Slice `index` is centred on the same angle as wedge `index`, because the
+ * dial centres its first wedge at twelve o'clock rather than starting there.
+ */
+export function WedgeGlyph({
+  index,
+  count,
+  color,
+  size = 15,
+  theme = 'light',
+}: {
+  index: number
+  /** how many options the question offered — the number of slices */
+  count: number
+  /** fill for this slice; callers mute it for an option that was not chosen */
+  color: string
+  size?: number
+  theme?: ThemeName
+}) {
+  const r = size / 2
+  const span = (Math.PI * 2) / count
+  const start = index * span - span / 2
+  const path =
+    d3arc()({
+      innerRadius: 0,
+      outerRadius: r,
+      startAngle: start,
+      endAngle: start + span,
+    } as never) ?? ''
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`${-r} ${-r} ${size} ${size}`}
+      style={{ flex: '0 0 auto' }}
+      aria-hidden
+    >
+      <circle r={r - 0.5} fill="none" stroke={TOKENS[theme].grid} strokeWidth={1} />
+      <path d={path} fill={color} />
+    </svg>
+  )
+}
diff --git a/src/components/charts/trilemma/colour.ts b/src/components/charts/trilemma/colour.ts
new file mode 100644
index 00000000..c304e8db
--- /dev/null
+++ b/src/components/charts/trilemma/colour.ts
@@ -0,0 +1,22 @@
+import { lab } from 'd3-color'
+import type { Triple } from './types'
+
+/** Weighted mix of the three corner colours — the signature "where does this sit" fill. */
+export function blendCorners(colors: Triple<string>, t: Triple<number>, gamma = 1.6): string {
+  const w = t.map((v) => Math.pow(Math.max(0, v), gamma))
+  const sum = w[0] + w[1] + w[2] || 1
+  let l = 0
+  let a = 0
+  let b = 0
+  for (let i = 0; i < 3; i++) {
+    const c = lab(colors[i])
+    const k = w[i] / sum
+    l += c.l * k
+    a += c.a * k
+    b += c.b * k
+  }
+  // Averaging in Lab pulls mixtures toward grey; nudge the chroma back up so a
+  // three-way compromise still reads as a colour.
+  const boost = 1.25
+  return lab(l, a * boost, b * boost).formatHex()
+}
diff --git a/src/components/charts/trilemma/dial.ts b/src/components/charts/trilemma/dial.ts
new file mode 100644
index 00000000..aa38b63f
--- /dev/null
+++ b/src/components/charts/trilemma/dial.ts
@@ -0,0 +1,138 @@
+import { arc as d3arc } from 'd3-shape'
+import { wrapLabel } from './wrap'
+import type { AxisConfig, Triple } from './types'
+
+/** Wedge `i` is centred on -90° + i*120°, so axis 0 always points straight up. */
+export const WEDGE_SPAN = (Math.PI * 2) / 3
+
+export function wedgeAngles(i: number, rotation = 0) {
+  const centre = -Math.PI / 2 + i * WEDGE_SPAN + rotation
+  return { centre, start: centre - WEDGE_SPAN / 2, end: centre + WEDGE_SPAN / 2 }
+}
+
+/** Point on the wedge bisector at radius r, in SVG coordinates. */
+export function bisectorPoint(i: number, r: number, rotation = 0) {
+  const { centre } = wedgeAngles(i, rotation)
+  return { x: Math.cos(centre) * r, y: Math.sin(centre) * r }
+}
+
+/**
+ * d3-shape's arc() measures angles from 12 o'clock, clockwise, whereas the
+ * trig above is the usual maths convention. The quarter turn reconciles them.
+ */
+const toArcAngle = (a: number) => a + Math.PI / 2
+
+export function wedgePath(
+  i: number,
+  inner: number,
+  outer: number,
+  rotation = 0,
+  padAngle = 0,
+  cornerRadius = 0,
+) {
+  const { start, end } = wedgeAngles(i, rotation)
+  const builder = d3arc().cornerRadius(cornerRadius)
+  return (
+    builder({
+      innerRadius: Math.max(0, inner),
+      outerRadius: Math.max(0, outer),
+      startAngle: toArcAngle(start),
+      endAngle: toArcAngle(end),
+      padAngle,
+      padRadius: Math.max(outer, 1),
+    } as never) ?? ''
+  )
+}
+
+/** Straight-sided kite through the three value points — the shape of the trade-off. */
+export function kitePath(radii: Triple<number>, rotation = 0) {
+  return (
+    radii
+      .map((r, i) => {
+        const p = bisectorPoint(i, r, rotation)
+        return `${i === 0 ? 'M' : 'L'}${p.x.toFixed(2)},${p.y.toFixed(2)}`
+      })
+      .join('') + 'Z'
+  )
+}
+
+export function cornerRadiusFor(outer: number) {
+  return Math.min(6, outer * 0.06)
+}
+
+
+/* ------------------------------------------------------------------ */
+/* Layout                                                              */
+/* ------------------------------------------------------------------ */
+
+export const GOAL_WRAP = 12
+const COS30 = Math.cos(Math.PI / 6)
+
+export interface DialLayoutInput {
+  width: number
+  height: number
+  padding: number
+  axes: Triple<AxisConfig>
+  showGoalLabels: boolean
+  showValues: boolean
+  hasLabel: boolean
+}
+
+export interface DialLayout {
+  R: number
+  /** Hang the two lower goal labels centred under the rim rather than beside it. */
+  centreLabels: boolean
+  topStack: number
+  bottomStack: number
+  captionY: number
+}
+
+/**
+ * Sizes the dial around whatever labels are switched on. The apex label stacks
+ * straight up from the rim; the two lower ones hang off the bisector points,
+ * which sit at half the radius, so they cost far less vertical room than they
+ * appear to. Pass `forcedR` to make a set of dials share one radius — without
+ * that, small multiples silently break their own shared scale.
+ */
+export function layoutDial(input: DialLayoutInput, forcedR?: number): DialLayout {
+  const { width, height, padding, axes, showGoalLabels, showValues, hasLabel } = input
+
+  const goalLines = Math.max(
+    wrapLabel(axes[1].label, GOAL_WRAP).length,
+    wrapLabel(axes[2].label, GOAL_WRAP).length,
+  )
+  const topLines = wrapLabel(axes[0].label, GOAL_WRAP).length
+  const valueLine = showValues ? 14 : 0
+  const topStack = showGoalLabels ? 16 + topLines * 14 + valueLine : 6
+  const bottomStack = showGoalLabels ? 22 + goalLines * 14 + valueLine : 6
+  const captionRoom = hasLabel ? 32 : 0
+  const sideText = showGoalLabels
+    ? Math.max(
+        ...[1, 2].flatMap((i) => wrapLabel(axes[i].label, GOAL_WRAP).map((l) => l.length)),
+      ) * 6.6 + 10
+    : 0
+
+  const halfBox = Math.min(width, height) / 2 - padding
+  const halfW = width / 2 - padding
+  const vertical = Math.min(halfBox - topStack, 2 * (halfBox - bottomStack - captionRoom))
+
+  // Beside the rim reads best but costs a full text width of side room;
+  // centring on the bisector costs half that, and only works while the two
+  // lower labels still clear each other.
+  const beside = Math.min(vertical, (halfW - sideText - 13) / COS30)
+  const centredMax = Math.min(vertical, (halfW - sideText / 2) / COS30)
+  const centredMin = (sideText / 2 + 8) / COS30
+
+  const R = Math.max(20, forcedR ?? (showGoalLabels && centredMax >= centredMin && centredMax > beside * 1.1
+    ? centredMax
+    : beside))
+
+  const centreLabels =
+    showGoalLabels &&
+    (forcedR === undefined
+      ? R === centredMax && centredMax > beside * 1.1
+      : // At a shared radius, centre only when the label will not otherwise fit.
+        R * COS30 + 13 + sideText > halfW && R * COS30 >= sideText / 2 + 8)
+
+  return { R, centreLabels, topStack, bottomStack, captionY: Math.max(R + 24, R / 2 + bottomStack + 20) }
+}
diff --git a/src/components/charts/trilemma/fonts.ts b/src/components/charts/trilemma/fonts.ts
new file mode 100644
index 00000000..7af87639
--- /dev/null
+++ b/src/components/charts/trilemma/fonts.ts
@@ -0,0 +1,21 @@
+import { BODY, DISPLAY, LABEL } from './theme'
+
+/**
+ * The three brand roles a chart actually needs:
+ *
+ *   display  names — titles, corner labels, series and point labels
+ *   body     prose — subtitles, sublabels, notes, annotations
+ *   label    figures — ticks, counts, tabular numbers (uppercase eyebrows too)
+ */
+export interface Fonts {
+  display: string
+  body: string
+  label: string
+}
+
+export const BRAND_FONTS: Fonts = { display: DISPLAY, body: BODY, label: LABEL }
+
+/** A single `fontFamily` override collapses all three roles onto one family. */
+export function resolveFonts(override?: string): Fonts {
+  return override ? { display: override, body: override, label: override } : BRAND_FONTS
+}
diff --git a/src/components/charts/trilemma/format.ts b/src/components/charts/trilemma/format.ts
new file mode 100644
index 00000000..393da00f
--- /dev/null
+++ b/src/components/charts/trilemma/format.ts
@@ -0,0 +1,15 @@
+/**
+ * Value labels as a share of the field rather than a raw count.
+ *
+ * "12" only means something to a reader who knows how many candidates there
+ * are; "34%" carries its own denominator. The total handed in is the same one
+ * the chart is scaled against — the dial's domain maximum — so the number a
+ * wedge prints and the distance it reaches say the same thing. Formatting
+ * against some other total would quietly put the label and the geometry into
+ * disagreement.
+ *
+ * Whole percents: these are fields of a few dozen candidates, where a decimal
+ * place would be precision the sample does not have.
+ */
+export const percentOf = (total: number) => (n: number) =>
+  `${Math.round((n / Math.max(1, total)) * 100)}%`
diff --git a/src/components/charts/trilemma/index.ts b/src/components/charts/trilemma/index.ts
new file mode 100644
index 00000000..3e6ada5b
--- /dev/null
+++ b/src/components/charts/trilemma/index.ts
@@ -0,0 +1,16 @@
+export { TrilemmaDial } from './TrilemmaDial'
+export type { DialValues, TrilemmaDialProps } from './TrilemmaDial'
+export { TrilemmaDialGroup } from './TrilemmaDialGroup'
+export type { DialDatum, TrilemmaDialGroupProps } from './TrilemmaDialGroup'
+export { OptionBar } from './OptionBar'
+export { WedgeGlyph } from './WedgeGlyph'
+export { percentOf } from './format'
+export type { OptionBarProps } from './OptionBar'
+export { bisectorPoint, kitePath, layoutDial, wedgeAngles, wedgePath } from './dial'
+export type { DialLayout, DialLayoutInput } from './dial'
+export { blendCorners } from './colour'
+export { wrapLabel, wrapText } from './wrap'
+export { MUTED, palette } from './palette'
+export { BODY, CORNER_COLORS, DISPLAY, GROUP_PALETTE, LABEL, NO_DATA, SANS, SERIF, TOKENS } from './theme'
+export type { Tokens } from './theme'
+export type { AxisConfig, Corner, ThemeName, Triple } from './types'
diff --git a/src/components/charts/trilemma/palette.ts b/src/components/charts/trilemma/palette.ts
new file mode 100644
index 00000000..5aa8f4c8
--- /dev/null
+++ b/src/components/charts/trilemma/palette.ts
@@ -0,0 +1,20 @@
+import { CORNER_COLORS, copper, nickel } from './theme'
+import type { ThemeName } from './types'
+
+/** Unchosen options fade to the design system's warm neutral. */
+export const MUTED = nickel[200]
+
+/**
+ * Option colours for a question with `n` choices.
+ *
+ * Three-option questions get the trilemma corners; the two- and four-option
+ * questions borrow from the same ramps so a page of mixed questions reads as
+ * one set. Two options take corners 0 and 2 — the pair furthest apart in hue,
+ * so Yes/No never reads as a gradient.
+ */
+export function palette(n: number, theme: ThemeName = 'light'): string[] {
+  const corners = CORNER_COLORS[theme]
+  if (n === 3) return [...corners]
+  if (n === 2) return [corners[0], corners[2]]
+  return [corners[0], corners[1], corners[2], theme === 'dark' ? copper[400] : copper[600]]
+}
diff --git a/src/components/charts/trilemma/theme.ts b/src/components/charts/trilemma/theme.ts
new file mode 100644
index 00000000..d109a46e
--- /dev/null
+++ b/src/components/charts/trilemma/theme.ts
@@ -0,0 +1,104 @@
+import type { ThemeName, Triple } from './types'
+
+/**
+ * Build Canada brand tokens.
+ *
+ * Colours are the @buildcanada/colours ramps as applied in src/styles/colours.css;
+ * type is the three-font system from src/styles/typography.css:
+ *
+ *   display  Söhne Kräftig        headlines, corner labels — institutional
+ *   body     Financier Text       prose and figures — financial-press serif
+ *   label    Founders Grotesk Mono  eyebrows, ticks, counts — uppercase, tabular
+ */
+
+/* ----------------------------------------------------------- type ---- */
+
+export const DISPLAY = '"Soehne Kraftig", system-ui, -apple-system, sans-serif'
+export const BODY = '"Financier Text", Georgia, "Times New Roman", serif'
+export const LABEL = '"Founders Grotesk Mono", Menlo, monospace'
+
+/** Kept as the chart-internal names: headings/corner labels vs. small UI text. */
+export const SERIF = BODY
+export const SANS = DISPLAY
+
+/* -------------------------------------------------------- colours ---- */
+
+const linen = { 50: '#fbf6f1', 100: '#f6ece3', 200: '#ead2be' }
+const charcoal = {
+  100: '#e7e7e7', 200: '#d1d1d1', 300: '#b0b0b0', 400: '#888888',
+  500: '#6d6d6d', 600: '#5d5d5d', 700: '#4f4f4f', 900: '#3d3d3d',
+  1000: '#272727', 1050: '#141414',
+}
+const auburn = { 400: '#e68383', 500: '#d85b5b', 600: '#c43e3e', 700: '#a43131' }
+const lake = { 300: '#7cd3f1', 400: '#36bae9', 600: '#0880b5', 700: '#0a6a95' }
+const pine = { 300: '#84cbaa', 400: '#48b183', 600: '#17794d', 700: '#15613f' }
+const copper = { 400: '#ee8e70', 500: '#e26b42', 600: '#cf5a31' }
+const steel = { 300: '#c2ccd6', 400: '#9eafc0', 600: '#627a8f', 700: '#516476' }
+/** Warm neutral: the charts package uses these for gridlines and axis lines. */
+const nickel = { 100: '#e5e4e2', 200: '#cbc9c4', 300: '#a9a79f', 400: '#8c8b81', 700: '#46463f', 800: '#3a3a35' }
+
+export interface Tokens {
+  bg: string
+  ink: string
+  inkSoft: string
+  inkFaint: string
+  frame: string
+  grid: string
+  panel: string
+  panelBorder: string
+  halo: string
+  /** Brand red, for eyebrows and editorial accents. */
+  accent: string
+}
+
+export const TOKENS: Record<ThemeName, Tokens> = {
+  light: {
+    bg: linen[50],
+    ink: charcoal[1000],
+    inkSoft: charcoal[700],
+    inkFaint: charcoal[600],
+    frame: charcoal[1000],
+    grid: nickel[200],
+    panel: 'rgba(251,246,241,0.97)',
+    panelBorder: charcoal[200],
+    halo: linen[50],
+    accent: auburn[700],
+  },
+  dark: {
+    bg: charcoal[1050],
+    ink: linen[100],
+    inkSoft: charcoal[300],
+    inkFaint: charcoal[400],
+    frame: nickel[200],
+    grid: nickel[800],
+    panel: 'rgba(39,39,39,0.97)',
+    panelBorder: charcoal[700],
+    halo: charcoal[1050],
+    accent: auburn[500],
+  },
+}
+
+/**
+ * The three corner hues. Drawn from the brand ramps rather than the charts
+ * package's categorical palette because a trilemma *mixes* its corners — the
+ * three have to stay distinguishable when blended, which adjacent hues do not.
+ */
+export const CORNER_COLORS: Record<ThemeName, Triple<string>> = {
+  light: [auburn[600], pine[600], lake[700]],
+  dark: [auburn[400], pine[400], lake[400]],
+}
+
+/**
+ * Categorical series colour. This is the palette the design system's charts
+ * package sets for the build-canada theme (Grapher "Distinct lines"), which is
+ * the right call for many-series charts.
+ */
+export const GROUP_PALETTE: Record<ThemeName, string[]> = {
+  light: ['#4c6a9c', '#b13507', '#996d39', '#2c8465', '#6d3e91', '#883039', '#00295b', '#a2559c'],
+  dark: ['#8ba4d4', '#e8814f', '#c9a26b', '#5cbb98', '#a684c9', '#c9737c', '#7d9cc9', '#c893c2'],
+}
+
+/** Reserved neutral for missing data; never assigned to a series. */
+export const NO_DATA = nickel[300]
+
+export { auburn, charcoal, copper, lake, linen, nickel, pine, steel }
diff --git a/src/components/charts/trilemma/types.ts b/src/components/charts/trilemma/types.ts
new file mode 100644
index 00000000..26eeb0f1
--- /dev/null
+++ b/src/components/charts/trilemma/types.ts
@@ -0,0 +1,16 @@
+/** The three corners, always in clockwise order starting at the apex. */
+export type Corner = 0 | 1 | 2
+export type Triple<T> = [T, T, T]
+
+export interface AxisConfig {
+  /** Key used to look up the value on each datum. */
+  key: string
+  /** Corner label, e.g. "Affordable". */
+  label: string
+  /** Optional second line under the corner label. */
+  sublabel?: string
+  /** Overrides the palette colour for this corner. */
+  color?: string
+}
+
+export type ThemeName = 'light' | 'dark'
diff --git a/src/components/charts/trilemma/useMeasure.ts b/src/components/charts/trilemma/useMeasure.ts
new file mode 100644
index 00000000..d8f896bc
--- /dev/null
+++ b/src/components/charts/trilemma/useMeasure.ts
@@ -0,0 +1,21 @@
+import { useEffect, useRef, useState } from 'react'
+
+/** Width of a container element, tracked with a ResizeObserver. */
+export function useMeasure<T extends HTMLElement>(enabled: boolean) {
+  const ref = useRef<T | null>(null)
+  const [width, setWidth] = useState(0)
+
+  useEffect(() => {
+    if (!enabled || !ref.current) return
+    const el = ref.current
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width ?? 0
+      setWidth(Math.round(w))
+    })
+    ro.observe(el)
+    setWidth(Math.round(el.getBoundingClientRect().width))
+    return () => ro.disconnect()
+  }, [enabled])
+
+  return { ref, width }
+}
diff --git a/src/components/charts/trilemma/wrap.ts b/src/components/charts/trilemma/wrap.ts
new file mode 100644
index 00000000..25a48049
--- /dev/null
+++ b/src/components/charts/trilemma/wrap.ts
@@ -0,0 +1,29 @@
+/** Greedy word wrap for corner labels, so a long goal name doesn't squeeze the plot. */
+export function wrapLabel(text: string, maxChars = 16): string[] {
+  const words = text.split(/\s+/)
+  const lines: string[] = []
+  let line = ''
+  for (const w of words) {
+    if (!line) line = w
+    else if ((line + ' ' + w).length <= maxChars) line += ' ' + w
+    else {
+      lines.push(line)
+      line = w
+    }
+  }
+  if (line) lines.push(line)
+  return lines
+}
+
+export const widestLine = (lines: string[]) => Math.max(...lines.map((l) => l.length))
+
+/**
+ * Wrap for a label with a hard ceiling on its lines — the segmented bar, where
+ * a name only has its own segment's width to sit in. Returns [] rather than a
+ * truncation when the name will not fit: half a label under a bar reads as a
+ * mistake, and the list beside the chart still carries it in full.
+ */
+export function wrapText(text: string, maxChars: number, maxLines: number): string[] {
+  const lines = wrapLabel(text, maxChars)
+  return lines.length <= maxLines && widestLine(lines) <= maxChars + 2 ? lines : []
+}
diff --git a/src/components/elections/AnswerChart.tsx b/src/components/elections/AnswerChart.tsx
new file mode 100644
index 00000000..eb5fcf9f
--- /dev/null
+++ b/src/components/elections/AnswerChart.tsx
@@ -0,0 +1,269 @@
+"use client";
+
+import {
+  MUTED,
+  OptionBar,
+  TOKENS,
+  TrilemmaDial,
+  layoutDial,
+  palette,
+  percentOf,
+  type AxisConfig,
+  type Triple,
+} from "@/components/charts/trilemma";
+
+/* How a questionnaire's field split on one question.
+ *
+ * Shared by the ward pages, which draw it per candidate, and the survey's
+ * comparison view, which draws it per question against the resident's own
+ * answer. Both are the same picture — the whole field's split with one
+ * position picked out of it — and the moment they were drawn by two files
+ * they started to differ: different radii, different labels, different
+ * denominators for the same percentages.
+ *
+ * FORM
+ *   A three-way choice between competing alternatives gets a dial: a circle
+ *   in equal thirds, one wedge per option, reaching out as far as the share
+ *   that picked it. Everything else gets a segmented bar — "Yes / Yes, with
+ *   conditions / No" is ordered, and a dial would set those three at 120° from
+ *   each other as though they were rivals rather than points on a scale, and a
+ *   four-option question cannot be a trilemma at all.
+ *
+ *   One value scale across every chart on a page (`fieldSize`), so a wedge
+ *   that reaches the rim always means the same thing. Per-question scales
+ *   would make every answer look unanimous.
+ */
+
+/* Big enough for the option names to sit around the rim at a readable size,
+ * and to stay the loudest thing in its column. The bar matches its width so
+ * the two chart forms line up down a page of mixed questions. */
+export const CHART_SIZE = 360;
+
+/**
+ * The option's name, cut to something that can go around a rim.
+ *
+ * Most of the questionnaire names its options in a word or two — "Permission",
+ * "Regulator and enabler" — and those go on the chart whole. A handful put a
+ * whole sentence in the label instead ("Decrease after inflation, with some
+ * responsibilities and funding transferred to civilian services"), and there
+ * is no size of dial that reads with three of those around it. Those dials
+ * used to go unlabelled altogether, which left the reader a circle of three
+ * anonymous thirds and a list to match it against by colour alone.
+ *
+ * So the rim gets the head of the option — everything before its first comma,
+ * and at most a few words of that — with an ellipsis saying plainly that it is
+ * a stub. It is enough to tell the thirds apart ("Increase above inflation…",
+ * "Remain approximately constant…", "Decrease after inflation…"), which is all
+ * a rim label is for. The options are printed in full immediately above the
+ * chart, each with its own wedge glyph, so nothing is lost: the short form
+ * points at the full wording rather than replacing it.
+ */
+const RIM_LABEL_MAX = 30;
+
+/* A stub must not end on a word that is only pointing at the one that got cut:
+ * "Increase above inflation to…" reads as a sentence someone abandoned, where
+ * "Increase above inflation…" reads as a heading. */
+const DANGLING = new Set([
+  "a",
+  "an",
+  "and",
+  "at",
+  "by",
+  "for",
+  "from",
+  "in",
+  "of",
+  "on",
+  "or",
+  "than",
+  "the",
+  "to",
+  "with",
+]);
+
+export function rimLabel(option: string): string {
+  const head = option.split(",")[0].trim();
+  if (head === option && head.length <= RIM_LABEL_MAX) return option;
+
+  const words: string[] = [];
+  for (const word of head.split(/\s+/)) {
+    if (words.length && [...words, word].join(" ").length > RIM_LABEL_MAX) break;
+    words.push(word);
+  }
+  while (words.length > 1 && DANGLING.has(words.at(-1)!.toLowerCase()))
+    words.pop();
+
+  return `${words.join(" ")}…`;
+}
+
+/** A note pinned to one option's rim label — "· you", and nothing longer. */
+export type AxisMark = { index: number; text: string };
+
+/** The shape of a question, which is all the chart needs to choose its form. */
+export type ChartShape = {
+  options: string[];
+  /** the options are points on a scale rather than rival alternatives */
+  ordinal?: boolean;
+};
+
+export const isDial = (shape: ChartShape) =>
+  shape.options.length === 3 && !shape.ordinal;
+
+/* The mark goes on *after* the trim, or it is the first thing the trim eats:
+ * "Along corridors and transit" is already at the rim's limit, and a suffix
+ * added before shortening simply vanishes. */
+const dialAxes = (shape: ChartShape, mark?: AxisMark) =>
+  shape.options.map((option, i) => ({
+    key: String(i),
+    label:
+      i === mark?.index
+        ? `${rimLabel(option)} ${mark.text}`
+        : rimLabel(option),
+  })) as unknown as Triple<AxisConfig>;
+
+/**
+ * One outer radius for every dial on a page — the smallest any of them can
+ * manage with its own option names around the rim.
+ *
+ * Without this each dial sizes itself to its own labels, so a question with
+ * short options draws a bigger circle, and the shared value scale the page
+ * rests on quietly stops being true: the same count would reach further on one
+ * question than on another.
+ */
+export function sharedRadius(shapes: ChartShape[]): number | undefined {
+  const dials = shapes.filter(isDial);
+  if (dials.length === 0) return undefined;
+
+  return Math.min(
+    ...dials.map(
+      (shape) =>
+        layoutDial({
+          width: CHART_SIZE,
+          height: CHART_SIZE,
+          padding: 4,
+          axes: dialAxes(shape),
+          showGoalLabels: true,
+          showValues: true,
+          hasLabel: false,
+        }).R,
+    ),
+  );
+}
+
+/**
+ * The chart's fills for one question: the chosen option in its own corner
+ * hue, every other option in the neutral.
+ *
+ * The corner hues are what make the option's *position* legible — the first
+ * option is the same colour on all thirty-odd questions, so "they picked the
+ * first one again" is visible without reading. A choice of `null` (nobody's
+ * position to show, or an answer that matched no option) leaves the whole
+ * chart neutral: the field's shape still reads, but none of it is claimed.
+ */
+export function optionColors(count: number, choice: number | null) {
+  const full = palette(count);
+  return {
+    full,
+    colors: full.map((c, i) => (i === choice ? c : MUTED)),
+    // Every option's share has to be readable, including the ones drawn in the
+    // unchosen neutral — which is a fill, far too pale to set type in.
+    valueColors: full.map((c, i) => (i === choice ? c : TOKENS.light.inkFaint)),
+  };
+}
+
+export function AnswerChart({
+  shape,
+  counts,
+  choice,
+  fieldSize,
+  radius,
+  ariaLabel,
+  mark,
+  colors: colorsProp,
+  valueColors: valueColorsProp,
+  valueFormat,
+}: {
+  shape: ChartShape;
+  /** how many of the field picked each option, in the options' order */
+  counts: number[];
+  /** the option to pick out of the field, or null to leave it all neutral */
+  choice: number | null;
+  /** the whole field — the top of the shared value scale */
+  fieldSize: number;
+  /** the page's shared outer radius, from `sharedRadius` */
+  radius?: number;
+  ariaLabel: string;
+  /**
+   * A note on one option's rim label. The comparison view names the reader's
+   * own option there, since every wedge on that page already carries its
+   * option's colour and so cannot also carry "this one is yours".
+   */
+  mark?: AxisMark;
+  /** Wedge fills, where the default (only `choice` in colour) is not wanted. */
+  colors?: string[];
+  /** Colour for each printed value; defaults to matching the wedges. */
+  valueColors?: string[];
+  /**
+   * How a count reads at the rim. Defaults to a share of the field — right
+   * where the field is thirty-odd candidates, wrong where it is four, and the
+   * comparison view passes a plain count instead.
+   */
+  valueFormat?: (n: number) => string;
+}) {
+  const counted = counts.reduce((a, b) => a + b, 0);
+  if (counted === 0) return null;
+
+  const defaults = optionColors(shape.options.length, choice);
+  const colors = colorsProp ?? defaults.colors;
+  const valueColors = valueColorsProp ?? colorsProp ?? defaults.valueColors;
+  const format = valueFormat ?? percentOf(fieldSize);
+
+  return (
+    /* The chart's own accessible name would be the dial's generic fallback,
+       which names neither the question nor whose position is picked out.
+       Naming the group instead makes the svg inside presentational, so it is
+       announced once and in the terms a reader needs. */
+    <div className="mt-auto flex justify-center pt-1" role="img" aria-label={ariaLabel}>
+      {isDial(shape) ? (
+        <TrilemmaDial
+          axes={dialAxes(shape, mark)}
+          values={counts as unknown as Triple<number>}
+          domain={[0, Math.max(1, fieldSize)]}
+          width={CHART_SIZE}
+          /* The box closes up around the circle and its labels rather than
+             staying the square the width implies — at a forced radius that
+             square is mostly empty air, and on a phone, where the svg scales
+             to the column, the air scales with it. */
+          height={radius === undefined ? undefined : 2 * radius + 104}
+          radiusOverride={radius}
+          padding={4}
+          innerRadius={0.14}
+          /* The options around the rim and their shares under them: the chart
+             says what each third is and how many went there, without the
+             reader crossing to the list to find out. */
+          showGoalLabels
+          valueMode="outside"
+          valueFormat={format}
+          /* One quiet ring at half the field, so a wedge's reach can be read
+             as a share rather than only against its neighbours. */
+          showRings
+          ringStep={0.5}
+          cornerColors={colors as Triple<string>}
+          valueColors={valueColors as Triple<string>}
+          interactive={false}
+          paper="var(--color-bg)"
+        />
+      ) : (
+        <OptionBar
+          options={shape.options}
+          counts={counts}
+          colors={colors}
+          valueFormat={format}
+          width={CHART_SIZE}
+          height={34}
+          showLabels
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/elections/AnswerOptionList.tsx b/src/components/elections/AnswerOptionList.tsx
new file mode 100644
index 00000000..25f18c7c
--- /dev/null
+++ b/src/components/elections/AnswerOptionList.tsx
@@ -0,0 +1,126 @@
+import { WedgeGlyph } from "@/components/charts/trilemma";
+
+/* The options a question offered, as a list beside its chart.
+ *
+ * Shared by the ward pages and the survey's alignment view so the two cannot
+ * drift: an answer only means something read against the alternatives, and
+ * both places have to put them in the same order, with the same counts, and
+ * with the same glyph tying each row to its slice of the chart.
+ *
+ * The glyph is the chart's own wedge for that option, which is what lets the
+ * list be read straight onto the dial or bar without a legend.
+ */
+
+export type OptionMark = {
+  /** which option this marks */
+  index: number;
+  /** e.g. "Their answer", "Your answer" */
+  label: string;
+};
+
+export function AnswerOptionList({
+  options,
+  details,
+  counts,
+  colors,
+  marks = [],
+  markColor,
+  names,
+  showCounts = true,
+  valueFormat = String,
+}: {
+  options: string[];
+  /** parallel to `options`; a null entry simply has no expansion */
+  details?: (string | null)[];
+  counts: number[];
+  /** parallel to `options` — the chart's fill for each, muted where unchosen */
+  colors: string[];
+  /** badges pinned to particular options */
+  marks?: OptionMark[];
+  /**
+   * Who picked each option, parallel to `options` — the comparison view lists
+   * the ward's candidates under the option they chose, which is the whole
+   * point of that page and the one thing a chart of shares cannot say.
+   */
+  names?: string[][];
+  /** badge and count colour; defaults to each option's own chart colour */
+  markColor?: string;
+  /**
+   * The count column. Off where the chart beside the list already direct-labels
+   * every option with its count, which would otherwise print each number twice
+   * a centimetre apart.
+   */
+  showCounts?: boolean;
+  /**
+   * How a count reads. Defaults to the number itself; pass `percentOf(total)`
+   * to match a chart beside the list that prints shares — the same quantity
+   * printed two ways a centimetre apart is worse than either.
+   */
+  valueFormat?: (n: number) => string;
+}) {
+  const marked = new Set(marks.map((mark) => mark.index));
+
+  return (
+    <ul className="grid gap-1.5 list-none m-0 p-0">
+      {options.map((option, i) => {
+        const tone = markColor ?? colors[i];
+        const own = marks.filter((mark) => mark.index === i);
+
+        return (
+          /* An option nobody's badge is on still has to be readable: knowing
+             what a candidate turned down is half of knowing what they picked.
+             The distinction is carried by the type colour alone — charcoal
+             against the chosen option's near-black — rather than by a colour
+             AND a blanket opacity on top of it, which compounded into text
+             around a third of the contrast of the line above it. */
+          <li key={option} className="flex items-start gap-2.5">
+            {/* The chart's own wedge for this option, muted where unchosen —
+                which is where the fade now lives, on the swatch rather than on
+                the words. */}
+            <span className="mt-1 flex-none">
+              <WedgeGlyph index={i} count={options.length} color={colors[i]} />
+            </span>
+
+            <span
+              className={`flex-1 font-serif text-[1rem] leading-[1.35] text-pretty ${
+                marked.has(i) ? "text-dark" : "text-text-secondary"
+              }`}
+            >
+              {option}
+              {details?.[i] && (
+                <span className="text-text-secondary">: {details[i]}</span>
+              )}
+              {own.map((mark) => (
+                <span
+                  key={mark.label}
+                  className="type-label-sm !text-[10px] !tracking-[0.12em] ml-2 whitespace-nowrap border px-1.5 py-0.5 align-[2px]"
+                  style={{ color: tone, borderColor: tone }}
+                >
+                  {mark.label}
+                </span>
+              ))}
+              {names?.[i]?.length ? (
+                <span className="type-caption mt-0.5 block text-text-secondary">
+                  {names[i].join(", ")}
+                </span>
+              ) : null}
+            </span>
+
+            {showCounts && (
+              <span
+                className="flex-none font-sans text-[1rem] font-medium tabular-nums"
+                style={marked.has(i) ? { color: tone } : undefined}
+              >
+                {/* Charcoal rather than the faintest token: an unchosen
+                    option's share is the comparison, not a footnote to it. */}
+                <span className={marked.has(i) ? "" : "text-text-secondary"}>
+                  {valueFormat(counts[i])}
+                </span>
+              </span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/src/components/elections/CandidateRoster.tsx b/src/components/elections/CandidateRoster.tsx
new file mode 100644
index 00000000..0939d93d
--- /dev/null
+++ b/src/components/elections/CandidateRoster.tsx
@@ -0,0 +1,83 @@
+import { CandidateName } from "./SurveyGrid";
+import type { GridCandidate } from "./SurveyGrid";
+import { lastName } from "@/lib/elections/names";
+
+/* The ballot, in full, once.
+ *
+ * Respondents first and the rest under them, because "answered" and "did not"
+ * is the most useful sort available here — it is the difference between a name
+ * and a position — and it is the same split `surveyRoster` already applies. */
+export function CandidateRoster({
+  respondents,
+  silent,
+  election,
+  race,
+  ward,
+  wardName,
+  respondentsLabel = "Answered our questionnaire",
+  silentLabel = "Also on the ballot, yet to answer our questionnaire",
+}: {
+  respondents: GridCandidate[];
+  silent: GridCandidate[];
+  election: string;
+  race: "mayor" | "councillor" | "trustee";
+  ward?: string;
+  wardName?: string;
+  /** what the first list is. The split into answered and not is the useful
+   *  one on a ward page, where both halves are a handful of names — but a page
+   *  that hands over the whole ballot in one list needs to say so, rather than
+   *  labelling fifty-three candidates as the nine who wrote back. */
+  respondentsLabel?: string;
+  silentLabel?: string;
+}) {
+  /* Surname order within each half. The clerk's order is a filing order, and
+     a reader checking whether their own councillor answered needs somewhere
+     to look — the same sort the cards use, so the two agree. */
+  const bySurname = (a: GridCandidate, b: GridCandidate) =>
+    lastName(a.name).localeCompare(lastName(b.name)) ||
+    a.name.localeCompare(b.name);
+
+  /* One list shape for both halves. They were a three-column grid and a
+     wrapped row, which made two lists of the same thing look like two
+     different kinds of thing — and the grid left a four-name field as one
+     short row and two empty columns. A run of names with separators is what
+     this is: a list of candidates. */
+  const list = (candidates: GridCandidate[]) => (
+    <ul className="flex list-none flex-wrap items-baseline gap-x-4 gap-y-2 m-0 p-0">
+      {candidates.map((candidate, i) => (
+        <li key={candidate.key} className="flex items-baseline gap-4">
+          {i > 0 && (
+            <span className="text-border-light" aria-hidden="true">
+              &middot;
+            </span>
+          )}
+          <CandidateName
+            candidate={candidate}
+            election={election}
+            race={race}
+            ward={ward}
+            wardName={wardName}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+
+  return (
+    <div className="grid gap-5">
+      {respondents.length > 0 && (
+        <div className="grid gap-2.5">
+          <p className="type-label-sm text-text-muted">{respondentsLabel}</p>
+          {list([...respondents].sort(bySurname))}
+        </div>
+      )}
+
+      {silent.length > 0 && (
+        <div className="grid gap-2.5">
+          <p className="type-label-sm text-text-muted">{silentLabel}</p>
+          {list([...silent].sort(bySurname))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/elections/CandidateSurveyAnswers.tsx b/src/components/elections/CandidateSurveyAnswers.tsx
new file mode 100644
index 00000000..0e3e0bb5
--- /dev/null
+++ b/src/components/elections/CandidateSurveyAnswers.tsx
@@ -0,0 +1,295 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+
+import { WedgeGlyph, percentOf } from "@/components/charts/trilemma";
+import { AnswerChart, optionColors, sharedRadius } from "./AnswerChart";
+import { AnswerOptionList } from "./AnswerOptionList";
+import { firstName, lastName, possessive } from "@/lib/elections/names";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import type {
+  CandidateAnswer,
+  CandidateAnswers,
+} from "@/lib/elections/candidate-answers";
+
+/* What one candidate told the questionnaire, on their roster card.
+ *
+ * FORM
+ *   Most of the questionnaire is a three-way choice between competing
+ *   alternatives, and those get a dial: a circle in equal thirds, one wedge
+ *   per option, reaching out as far as the number of candidates who picked it.
+ *   The wedge this candidate chose carries its colour and the rest go neutral,
+ *   so the answer reads as a silhouette — where they landed, and whether the
+ *   field landed with them.
+ *
+ *   The five direct questions are not that shape. "Yes / Yes, with conditions
+ *   / No" is ordered, and a dial would put those three at 120° from each other
+ *   as though they were rival options rather than points on a scale. They get
+ *   a segmented bar, which keeps the order and shows the split. So do the two
+ *   four-option questions, which cannot be a trilemma at all.
+ *
+ *   Every chart on the card shares one value scale (`fieldSize`), so a wedge
+ *   that reaches the rim always means the same thing. Per-question scales
+ *   would make every answer look unanimous.
+ *
+ *   The answer itself is written out under the question, before the chart:
+ *   what they picked, in the words they were offered, with that option's wedge
+ *   glyph beside it. The chart is what the field did — reading a single
+ *   candidate's answer off it means hunting the coloured third and then its
+ *   rim label, which is a step too many between a question and its answer.
+ *
+ *   The chart stays the biggest thing in the row all the same, and it carries
+ *   its own key: the question sits above it as the row's heading, and
+ *   each wedge is direct-labelled with the option's name and the number of
+ *   candidates who picked it. A shape with the meaning parked in a column
+ *   beside it is a decoration; a shape that names its own thirds is the answer.
+ *
+ *   Beside each chart the options are listed as they were offered, in full
+ *   wording with their expansions, each with a glyph of its own wedge so the
+ *   list reads straight onto the dial. Counts are left to the chart, which
+ *   prints them at the rim — the list carries what the chart cannot fit.
+ *
+ *   Expanded by default. The answers are the reason to look a candidate up;
+ *   hiding them behind a click made the card a promise rather than an answer.
+ *   Still collapsible, because a ward with a dozen candidates is a long page.
+ *
+ * COLOUR
+ *   The chart palette's own corner hues, which is what makes the option
+ *   position legible: the first option is the same colour on all 32 questions,
+ *   so "they picked the first one again" is visible without reading. Safe here
+ *   in a way it is not in the survey's alignment view, which spends pine and
+ *   copper on agree/differ and so has to stay two-tone.
+ */
+
+export function CandidateSurveyAnswers({
+  answers,
+  candidateName,
+}: {
+  answers: CandidateAnswers;
+  candidateName: string;
+}) {
+  const radius = sharedRadius(answers.groups.flatMap((group) => group.answers));
+
+  return (
+    <Collapsible defaultOpen className="mt-5 border-t border-border-light pt-4">
+      <CollapsibleTrigger className="group type-label-sm !tracking-[0.1em] flex items-center gap-2 text-text-secondary transition-colors hover:text-accent">
+        <ChevronDown
+          className="size-3.5 transition-transform group-data-[panel-open]:rotate-180"
+          aria-hidden="true"
+        />
+        Survey answers ({answers.answered})
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <div className="grid gap-11 pt-6 pb-1">
+          {answers.groups.map((group) => (
+            <section key={group.stepId} className="grid gap-5">
+              {/* The questionnaire's own sections, and the only landmarks in a
+                  card that runs to thirty-odd answers. They take the house
+                  section rule — a heavy line and a real heading — rather than
+                  the faint eyebrow they had, which read as a caption on the
+                  answer above it rather than as the start of something. */}
+              <h4 className="border-t-2 border-dark pt-3 font-sans font-medium leading-[1.15] tracking-[-0.025em] text-[clamp(1.3rem,2vw,1.6rem)] text-dark">
+                {group.stepTitle}
+              </h4>
+
+              {/* Two answers to a row where there is width for it: stacked
+                  chart-over-options, each answer is a tall narrow block, and
+                  one per row left a column of white space beside every dial. */}
+              <div className="grid gap-4 lg:grid-cols-2">
+                {group.answers.map((answer) => (
+                  <Answer
+                    key={answer.questionId}
+                    answer={answer}
+                    candidateName={candidateName}
+                    fieldSize={answers.fieldSize}
+                    radius={radius}
+                  />
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function Answer({
+  answer,
+  candidateName,
+  fieldSize,
+  radius,
+}: {
+  answer: CandidateAnswer;
+  candidateName: string;
+  fieldSize: number;
+  /** the card's shared outer radius, from `sharedRadius` */
+  radius?: number;
+}) {
+  const { full, colors } = optionColors(answer.options.length, answer.choice);
+  // Candidates whose answer landed in a bucket — not the whole field, since a
+  // transcribed answer is in none of them.
+  const counted = answer.counts.reduce((a, b) => a + b, 0);
+  // Shares of the field, not head counts: the reader has no idea whether nine
+  // is most of the ward or a corner of it, and every chart on the card is
+  // scaled against the same field, so the same denominator is already implied
+  // by the geometry.
+  const share = percentOf(fieldSize);
+
+  return (
+    /* Boxed, and a full-height column rather than a content-height block.
+       Two answers share a row, and a hairline above each was enough to
+       separate a single column but not a grid: with a neighbour alongside,
+       a rule at the top of both reads as one line under the pair, and where
+       one answer runs longer than the other there was nothing to say which
+       question the leftover text belonged to. A box closes each one.
+
+       Stretched to the row, with the chart pushed to the bottom, every answer
+       frames the same way — which is what makes any one of them croppable on
+       its own. */
+    <div className="flex h-full flex-col gap-5 border border-border-light p-5">
+      {/* The question, above the chart rather than beside it: the chart is
+          wider now, and a heading in its own column would have made the row a
+          pair of narrow strips. */}
+      <div className="grid gap-2">
+        <h5 className="font-sans text-[1.15rem] font-medium leading-[1.3] tracking-[-0.015em] text-dark text-pretty max-w-[54ch]">
+          {answer.question}
+        </h5>
+
+        {/* What they said, in words, directly under the question and ahead of
+            the chart. The chart shows where the field went and which third is
+            theirs, but reading it means finding the coloured wedge and then
+            its rim label — a step between the question and its answer. This
+            says it outright; the chart then answers "and who else?".
+
+            The glyph is the chart's own wedge for that option, so the eye can
+            carry the colour from this line down onto the dial. */}
+        <p className="flex items-baseline gap-2.5">
+          {answer.choice !== null && (
+            <span className="flex-none self-start mt-[5px]">
+              <WedgeGlyph
+                index={answer.choice}
+                count={answer.options.length}
+                color={full[answer.choice]}
+              />
+            </span>
+          )}
+          <span className="font-sans text-[1.05rem] font-medium leading-[1.35] text-dark text-pretty">
+            {answer.verbatim && <>&ldquo;</>}
+            {answer.answer}
+            {answer.verbatim && (
+              <>
+                &rdquo;
+                <span className="type-caption text-text-muted">
+                  {" "}
+                  &mdash; {possessive(firstName(candidateName))} wording, not
+                  one of the options
+                </span>
+              </>
+            )}
+          </span>
+        </p>
+      </div>
+
+      {/* Options then chart, stacked rather than side by side — at half a
+          card's width the two columns were a pair of strips too narrow for
+          either. The chart goes last because it is the slowest thing to read:
+          the question, the answer in words, and the alternatives it was chosen
+          from are the whole story for most readers, and the field's shape is
+          what you stay for. Ending the row on it also puts every dial on a
+          consistent line above the next question's heading. */}
+      <div className="flex flex-1 flex-col gap-3.5">
+        <div>
+          {/* The options as they were offered, so the answer is read against
+              the alternatives rather than on its own. Shares stay on the
+              chart below, which direct-labels every one of them. */}
+          <AnswerOptionList
+            options={answer.options}
+            details={answer.details}
+            counts={answer.counts}
+            colors={colors}
+            showCounts={false}
+            marks={
+              answer.choice === null
+                ? []
+                : [
+                  {
+                    index: answer.choice,
+                    // Named rather than "their answer": on a page of stacked
+                    // candidate cards the pronoun only means something if you
+                    // still know whose card you are on.
+                    label: `${possessive(candidateName)} response`,
+                  },
+                ]
+            }
+          />
+
+          {answer.explanation && (
+            <div className="border-l-2 border-border-light pl-3 mt-3.5">
+              <h6 className="type-label-sm text-text-muted mb-1">
+                {possessive(firstName(candidateName))} note
+              </h6>
+              <p className="font-serif text-[1.1rem] leading-[1.5] text-text-secondary text-pretty">
+                {answer.explanation}
+              </p>
+            </div>
+          )}
+        </div>
+
+        <AnswerChart
+          shape={answer}
+          counts={answer.counts}
+          choice={answer.choice}
+          fieldSize={fieldSize}
+          radius={radius}
+          ariaLabel={`${answer.question} — ${answer.options
+            .map((option, i) => `${option} ${share(answer.counts[i])}`)
+            .join(", ")}; ${candidateName} chose ${answer.answer}`}
+        />
+
+        {/* Whose chart this is, said under it. On a card of thirty-odd
+            boxed answers — and in a screenshot of any one of them, cropped
+            away from the card's header — the dial otherwise arrives with no
+            owner: three coloured thirds and no statement of what the coloured
+            one belongs to. */}
+        {counted > 0 && (
+          <p className="font-sans text-[0.95rem] font-medium leading-[1.3] tracking-[-0.005em] text-center text-dark text-pretty">
+            {possessive(lastName(candidateName))} responses vs all other
+            candidates
+          </p>
+        )}
+
+      </div>
+    </div>
+  );
+}
+
+/**
+ * What every chart on the page is counting, said once at the foot of it.
+ *
+ * This used to sit under each chart, where it was true but relentless: a ward
+ * page carries a dozen candidates at thirty-odd answers each, so the same four
+ * lines were set several hundred times, and a note repeated that often stops
+ * being read at all. It is a property of the whole questionnaire — the same
+ * field, the same denominator, on every chart — so it belongs where a source
+ * note belongs, at the bottom, once.
+ */
+export function SurveyChartNote({ candidateCount }: { candidateCount: number }) {
+  return (
+    <p className="type-caption text-text-muted text-pretty max-w-[78ch]">
+      <span className="text-text-secondary">Reading the charts.</span> Each
+      third of a dial is one of the options, reaching further the more of this
+      ward&rsquo;s candidates picked it; on the segmented bars each band is one
+      option, as wide as the share that picked it. Counts are out of the{" "}
+      {candidateCount} candidates in this ward who returned the
+      questionnaire, not the whole ballot. A candidate who answered in their
+      own words rather than picking an option is counted on no option, and is
+      named under the question instead.
+    </p>
+  );
+}
diff --git a/src/components/elections/ElectionLanding.tsx b/src/components/elections/ElectionLanding.tsx
index 9c380647..14c02f96 100644
--- a/src/components/elections/ElectionLanding.tsx
+++ b/src/components/elections/ElectionLanding.tsx
@@ -3,12 +3,20 @@ import Link from "next/link";
 import { Suspense, type ReactNode } from "react";
 import { ArrowRight, ArrowUpRight } from "lucide-react";
 import CountdownDays from "./CountdownDays";
+import LiveCountdown from "./LiveCountdown";
 import { CandidateSiteLink } from "./CandidateSiteLink";
 import { PledgeButton } from "./PledgeButton";
+import { SurveyCta } from "./SurveyCta";
 import { ResidencyModal } from "./ResidencyModal";
 import { WardCard } from "./WardCard";
 import WardLookup from "./WardLookup";
-import { daysUntil, yearOf } from "@/lib/elections/dates";
+import {
+  breakdown,
+  daysUntil,
+  msUntil,
+  periodTiming,
+  yearOf,
+} from "@/lib/elections/dates";
 import type { SupportedElection } from "@/lib/elections/registry";
 import type {
   CandidateView,
@@ -25,6 +33,26 @@ import type {
    out rather than render empty: no advance-vote date in the registry means
    no advance-vote counter. */
 
+/**
+ * The minute-accurate window for election day, where a region has published
+ * the times its polls open and close. The registry's `electionDateIso` is
+ * date-only, so a region that supplies this gets the same live
+ * days:hours:minutes:seconds timer the /toronto hero uses; a region that
+ * doesn't falls back to the whole-day counter.
+ *
+ * Structurally a subset of Toronto's `VotingPeriod`, so its key-dates module
+ * can pass `ELECTION_DAY` straight through without a mapping layer.
+ */
+export type ElectionDayPeriod = {
+  /** absolute instant polls open, e.g. "2026-10-26T10:00:00-04:00" */
+  opensAt?: string;
+  /** absolute instant polls close */
+  closesAt: string;
+  upcomingLabel: string;
+  openLabel: string;
+  closedLabel: string;
+};
+
 export type LandingContent = {
   heroTitle: ReactNode;
   heroBlurb: ReactNode;
@@ -39,6 +67,30 @@ export type LandingContent = {
    *  Toronto has these pages so far. A list rather than one href per page, so
    *  adding the next guide doesn't mean another prop. */
   guideLinks?: { label: string; href: string }[];
+  /** The tools and readings this region has published on top of the roster —
+   *  the questionnaire read across the field, the reader's own alignment, the
+   *  ward pages. Unset drops the section, which is what every region but
+   *  Toronto does today. */
+  explore?: ExploreItem[];
+};
+
+/** One card in the explore grid. `meta` is the small figure under the title —
+ *  a count, a date, whatever makes the card worth clicking. */
+export type ExploreItem = {
+  eyebrow: string;
+  title: ReactNode;
+  blurb: ReactNode;
+  href: string;
+  meta?: ReactNode;
+  /** the one card that is an ask rather than a page. Filled in the region's
+   *  accent — Toronto blue on this tracker, since `.theme-election` overrides
+   *  the token — so it is the only solid block of colour in the grid and the
+   *  only thing in it that is not somewhere to go and read. Same fill as the
+   *  SurveyCta at the foot of the page and beside every questionnaire on the
+   *  site: one ask, one colour, wherever a reader meets it. `cta` replaces the
+   *  "Open" foot, because this card is a control and should say what it does. */
+  tone?: "invite";
+  cta?: string;
 };
 
 export function ElectionLanding({
@@ -47,84 +99,196 @@ export function ElectionLanding({
   content,
   wardMapDefs,
   renderWardMap,
+  mayorSurveyPath,
+  mayorRosterPath,
+  surveyPath,
+  electionDay,
 }: {
   election: SupportedElection;
   view: ElectionView;
   content: LandingContent;
+  /** poll-open/poll-close instants for election day. Supplied turns the band's
+   *  headline counter into the live timer; omitted keeps the days counter. */
+  electionDay?: ElectionDayPeriod;
+  /** where the mayoral field's questionnaire grid lives, for the regions that
+   *  have run one — the cards say who is running, that page says what they
+   *  said */
+  mayorSurveyPath?: string;
+  /** the full mayoral roster, for a region whose field is too long to print
+   *  here. Set it and this section keeps its heading and hands the list off;
+   *  leave it unset and the section prints every candidate, which is the right
+   *  answer for a field of eight and the wrong one for a field of fifty. */
+  mayorRosterPath?: string;
+  /** the voter survey, where the region runs one. It takes the closing call to
+   *  action from the pledge: a pledge is a name on a list, where the survey
+   *  hands the reader their own ballot back with the candidates ranked against
+   *  it — a better thing to ask of someone who has just read the field, and a
+   *  better first step towards voting than a promise to. */
+  surveyPath?: string;
   /** rendered once, so per-ward maps can reference shared geometry */
   wardMapDefs?: ReactNode;
   /** this region's locator map for a ward, when it has ward geometry */
   renderWardMap?: (ward: WardView) => ReactNode;
 }) {
-  // Pre-rendered here rather than inside the lookup, because the locator map
-  // is server-side geometry the client component can't build.
+  /* THE MAYORAL RACE, WHERE IT IS A SIGNPOST RATHER THAN A LIST
+     A region with a roster page had a whole band of the front page — heading,
+     blurb, count, and two link rows — pointing at two other pages, which is
+     exactly what the explore grid is made of. Set as a section of its own it
+     pushed the wards a screen further down for no reading a card could not
+     carry.
+
+     One card, not two. The other pointed at the roster of every registered
+     candidate, which is a page that exists to be indexed rather than read:
+     fifty-three names and their campaign links, no answers. It is still
+     linked from the mayoral page it belongs to. What a reader on the front
+     page wants from this race is what the field said, so that is the card.
+
+     A region with no roster page keeps its own section below: its cards are
+     the candidates themselves, names and campaign links, which is a list
+     rather than a pointer and belongs nowhere near a grid of pages. */
+  const mayorCards: ExploreItem[] =
+    mayorRosterPath && mayorSurveyPath
+      ? [
+        {
+          eyebrow: "Mayor",
+          title: "The race for mayor",
+          blurb: "How the candidates for mayor answered our questions.",
+          href: mayorSurveyPath,
+        },
+      ]
+      : [];
+  /* The ask, in the middle of the grid rather than only at the foot of the
+     page. Everything else here is somewhere to go and read; this is the one
+     card that asks the reader for something, and a reader who has just seen
+     what the candidates said is the likeliest person on the page to have an
+     opinion about it. Middle, not first: the cards on either side are what
+     earn the ask. */
+  const invite: ExploreItem[] = surveyPath
+    ? [
+      {
+        eyebrow: "Voter survey",
+        title: "Where do you stand?",
+        blurb:
+          "Answer the same questions we put to the candidates and see which of them line up with you.",
+        href: surveyPath,
+        tone: "invite",
+        cta: "Take the survey",
+      },
+    ]
+    : [];
+
+  /* The tiles the lookup shows once it has an answer. Built here rather than
+     inside it, because a ward's locator map is server-rendered geometry a
+     client component cannot make. Only where the region has boundary data —
+     otherwise nothing renders them and the loop is a wasted pass over the
+     whole ward list. */
   const wardCards: Record<number, ReactNode> = {};
-  for (const ward of view.wards) {
-    wardCards[ward.number] = (
-      <WardCard
-        ward={ward}
-        basePath={election.basePath}
-        map={renderWardMap?.(ward)}
-        className="border border-border-light max-w-[300px]"
-      />
-    );
+  if (election.wardLookup) {
+    for (const ward of view.wards) {
+      wardCards[ward.number] = (
+        <WardCard
+          ward={ward}
+          basePath={election.basePath}
+          map={renderWardMap?.(ward)}
+          className="border border-border-light max-w-[300px]"
+        />
+      );
+    }
   }
 
+  const pages = [...mayorCards, ...(content.explore ?? [])];
+  const exploreItems = [
+    ...pages.slice(0, Math.ceil(pages.length / 2)),
+    ...invite,
+    ...pages.slice(Math.ceil(pages.length / 2)),
+  ];
+
   return (
     <div className={`${election.themeClass ?? ""} bg-bg text-dark`}>
       <Suspense fallback={null}>
         <ResidencyModal election={election.slug} />
       </Suspense>
       <div className="mx-[10px] my-[10px] border border-border-light bg-bg overflow-x-clip">
-        {/* ── Hero ─────────────────────────────────────────────── */}
-        <section className="px-6 py-14 md:px-14 md:py-16 border-b-2 border-dark">
-          <h1 className="font-sans font-medium leading-[0.98] tracking-[-0.04em] text-[clamp(3rem,7vw,5.75rem)] max-w-[15ch] text-balance mb-7">
-            {content.heroTitle}
-          </h1>
-          <p className="font-serif text-[clamp(1.15rem,1.6vw,1.4rem)] leading-[1.5] max-w-[62ch]">
-            {content.heroBlurb}
-          </p>
-        </section>
+        {/* ── Hero: the election, and the clock on it ─────────── */}
+        <Hero election={election} content={content} electionDay={electionDay} />
 
-        {/* ── Countdown + how to vote ──────────────────────────── */}
-        <KeyDates election={election} guideLinks={content.guideLinks} />
+        {/* ── Explore: the mayoral race, and what we've published ─ */}
+        {exploreItems.length > 0 && (
+          <ExploreSection
+            items={exploreItems}
+            /* Three other pages link to #candidates, and with the mayoral
+               section suppressed that anchor has to land here. Keyed off the
+               roster path rather than off the cards: it is the roster path
+               that removes the section, so it is what has to replace it. */
+            anchorCandidates={Boolean(mayorRosterPath)}
+          />
+        )}
 
         {/* ── Candidates for mayor ─────────────────────────────── */}
-        <section id="candidates" className="border-b-2 border-dark scroll-mt-24">
-          <div className="px-6 pt-12 pb-8 md:px-14">
-            <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(2rem,3.5vw,2.75rem)]">
-              Candidates for Mayor
-            </h2>
-          </div>
+        {/* Only where there is no roster page to point at. Toronto's mayoral
+            field is fifty-three people and lives on a page of its own, which
+            the explore grid above links to; a region running a race of eight
+            has nowhere else to put them, and printing the names here is the
+            right answer for a field that size. */}
+        {!mayorRosterPath && (
+          <section
+            id="candidates"
+            className="border-b-2 border-dark scroll-mt-24"
+          >
+            <div className="px-6 pt-10 pb-6 md:px-14 flex justify-between items-end gap-6 flex-wrap">
+              <div>
+                <p className="type-label text-accent mb-3">Mayor</p>
+                <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.85rem,3vw,2.4rem)] mb-2">
+                  Candidates for Mayor
+                </h2>
+              </div>
+              {mayorSurveyPath && (
+                <Link
+                  href={mayorSurveyPath}
+                  className="group/answers type-label-sm text-accent hover:underline inline-flex items-center gap-1.5 pb-1.5"
+                >
+                  How they answered our questionnaire
+                  <ArrowRight className="size-3.5 transition-transform group-hover/answers:translate-x-0.5" />
+                </Link>
+              )}
+            </div>
 
-          <div className="grid grid-cols-[repeat(auto-fill,minmax(272px,1fr))] border-t border-l border-border-light">
-            {view.mayoral.map((cand) => (
-              <MayoralCard
-                key={cand.key}
-                candidate={cand}
-                election={election.slug}
-              />
-            ))}
-          </div>
-        </section>
+            <CardGrid min="272px">
+              {view.mayoral.map((cand) => (
+                <MayoralCard
+                  key={cand.key}
+                  candidate={cand}
+                  election={election.slug}
+                />
+              ))}
+            </CardGrid>
+          </section>
+        )}
 
         {/* ── Wards ────────────────────────────────────────────── */}
         <section id="wards" className="border-b-2 border-dark scroll-mt-24">
-          <div className="px-6 pt-12 pb-8 md:px-14 flex justify-between items-end gap-6 flex-wrap">
+          <div className="px-6 pt-10 pb-6 md:px-14 flex justify-between items-end gap-6 flex-wrap">
             <div>
-              <p className="type-label text-accent mb-3.5">City Council</p>
-              <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(2rem,3.5vw,2.75rem)] mb-2.5">
+              <p className="type-label text-accent mb-3">City Council</p>
+              <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.85rem,3vw,2.4rem)] mb-2">
                 Find your ward
               </h2>
-              <p className="font-serif text-[1.1rem] leading-[1.45] max-w-[52ch] text-dark/80 mb-8">
+              <p className="font-serif text-[1.05rem] leading-[1.45] max-w-[52ch] text-dark/80">
                 {content.wardsBlurb}
               </p>
+              {/* Twenty-five tiles is a list nobody reads to find their own
+                  ward: they know their postal code and not their ward number,
+                  which is the whole reason this section is called "find". The
+                  grid below stays, for the reader who wants to browse and for
+                  the one the lookup guesses wrong. */}
               {election.wardLookup && (
-                <WardLookup
-                  wards={view.wards}
-                  cards={wardCards}
-                  cityLabel={election.cityLabel}
-                />
+                <div className="mt-7">
+                  <WardLookup
+                    wards={view.wards}
+                    cards={wardCards}
+                    cityLabel={election.cityLabel}
+                  />
+                </div>
               )}
             </div>
             <p className="type-label text-text-secondary pb-1.5 !tracking-[0.08em]">
@@ -133,7 +297,7 @@ export function ElectionLanding({
           </div>
 
           {wardMapDefs}
-          <div className="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] border-t border-l border-border-light">
+          <CardGrid min="250px">
             {view.wards.map((ward) => (
               <WardCard
                 key={ward.n}
@@ -143,20 +307,20 @@ export function ElectionLanding({
                 className="border-b border-r border-border-light"
               />
             ))}
-          </div>
+          </CardGrid>
         </section>
 
         {/* ── Also city-wide (French-language school boards) ────── */}
         {view.atLargeRaces.length > 0 && (
           <section className="border-b-2 border-dark">
-            <div className="px-6 pt-12 pb-8 md:px-14">
-              <p className="type-label text-accent mb-3.5">
+            <div className="px-6 pt-10 pb-6 md:px-14">
+              <p className="type-label text-accent mb-3">
                 Also on every ballot
               </p>
-              <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(2rem,3.5vw,2.75rem)] mb-2.5">
+              <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.85rem,3vw,2.4rem)] mb-2">
                 City-wide races
               </h2>
-              <p className="font-serif text-[1.1rem] leading-[1.45] max-w-[52ch] text-dark/80">
+              <p className="font-serif text-[1.05rem] leading-[1.45] max-w-[52ch] text-dark/80">
                 These seats are elected across the whole city, so every voter
                 sees them regardless of ward.
               </p>
@@ -172,23 +336,40 @@ export function ElectionLanding({
           </section>
         )}
 
+        {/* ── Dates and how to vote ────────────────────────────── */}
+        <VotingCalendar election={election} content={content} />
+
         {/* ── Closing CTA ──────────────────────────────────────── */}
-        <section className="bg-bg text-dark px-6 py-20 md:px-14 md:py-28 text-center flex flex-col items-center">
-          <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.035em] text-[clamp(2rem,5vw,3.75rem)] max-w-[22ch] text-balance mb-6">
+        <section className="bg-bg text-dark px-6 py-14 md:px-14 md:py-16 text-center flex flex-col items-center">
+          <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.035em] text-[clamp(1.9rem,4vw,3rem)] max-w-[22ch] text-balance mb-6">
             {content.closingHeadline}
           </h2>
-          <p className="mb-10 font-serif text-[1.15rem] leading-[1.5] text-dark/75 max-w-[46ch]">
-            {content.closingBlurb}
-          </p>
-          <PledgeButton
-            election={election.slug}
-            source="election-landing"
-            className="group/btn inline-flex items-center gap-3 type-button text-bg bg-accent px-7 py-4 transition-colors hover:bg-accent-hover cursor-pointer"
-          >
-            Pledge to vote
-            <ArrowRight className="size-4 shrink-0 transition-transform group-hover/btn:translate-x-0.5" />
-          </PledgeButton>
-          <p className="mt-14 pt-5 border-t border-dark/15 type-label-sm text-text-muted !tracking-[0.06em] max-w-[60ch]">
+          {/* The survey card itself rather than a button in its colours, so
+              the ask looks the same wherever a reader meets it — here, and
+              beside every questionnaire on the site. It carries its own body
+              copy, which is why the section's blurb only prints where there is
+              no card to replace it. */}
+          {surveyPath ? (
+            <SurveyCta
+              href={surveyPath}
+              className="w-full max-w-[560px] text-left"
+            />
+          ) : (
+            <>
+              <p className="mb-10 font-serif text-[1.15rem] leading-[1.5] text-dark/75 max-w-[46ch]">
+                {content.closingBlurb}
+              </p>
+              <PledgeButton
+                election={election.slug}
+                source="election-landing"
+                className="group/btn inline-flex items-center gap-3 type-button text-bg bg-accent px-7 py-4 transition-colors hover:bg-accent-hover cursor-pointer"
+              >
+                Pledge to vote
+                <ArrowRight className="size-4 shrink-0 transition-transform group-hover/btn:translate-x-0.5" />
+              </PledgeButton>
+            </>
+          )}
+          <p className="mt-10 pt-5 border-t border-dark/15 type-label-sm text-text-muted !tracking-[0.06em] max-w-[60ch]">
             {content.sourceNote}
           </p>
         </section>
@@ -200,119 +381,260 @@ export function ElectionLanding({
 // ── Countdown band ─────────────────────────────────────────────────────────
 
 /**
- * Election-day countdown, the advance-vote and vote-by-mail counters, and the
- * pledge CTA. Regions that haven't published their advance-vote or mail-in
- * dates get a two-column band instead of three, rather than empty cells.
+ * Seeds LiveCountdown from the server's reading of election day. Split out so
+ * the `targetInstant ?? 0` dance lives in one place, the same way Toronto's
+ * PeriodCountdown wraps it for the key-dates pages.
+ */
+function ElectionDayCountdown({ period }: { period: ElectionDayPeriod }) {
+  const now = new Date();
+  const timing = periodTiming(period, now);
+
+  return (
+    <LiveCountdown
+      opensAt={period.opensAt}
+      closesAt={period.closesAt}
+      initialParts={breakdown(
+        timing.targetInstant ? msUntil(timing.targetInstant, now) : 0,
+      )}
+      initialState={timing.state}
+      labels={{
+        upcoming: period.upcomingLabel,
+        open: period.openLabel,
+        closed: period.closedLabel,
+      }}
+      size="xl"
+    />
+  );
+}
+
+/**
+ * One of the band's secondary counters — advance voting, vote by mail.
+ *
+ * Same three-part shape as the headline: an eyebrow naming the thing, the
+ * number, the date underneath. The unit sits inline with the digits at a
+ * fraction of their size, which is how the live timer pairs "52" with "days".
+ * The old version hung a two-line caption off the number's baseline instead,
+ * and beside a four-slot timer that read as a different component.
+ */
+function DateCounter({
+  eyebrow,
+  targetIso,
+  dateLabel,
+}: {
+  eyebrow: string;
+  /** "YYYY-MM-DD" — the day being counted down to */
+  targetIso: string;
+  /** the human date or range beneath the number */
+  dateLabel: ReactNode;
+}) {
+  return (
+    <div>
+      <p className="type-label text-accent">{eyebrow}</p>
+      <p className="mt-3 flex items-baseline gap-2">
+        <CountdownDays
+          initialDays={daysUntil(targetIso)}
+          targetIso={targetIso}
+          className="font-sans font-medium leading-[0.95] tracking-[-0.03em] text-[clamp(2.1rem,4vw,2.75rem)] tabular-nums"
+        />
+        <span className="type-label-sm !tracking-[0.14em] text-text-secondary">
+          days
+        </span>
+      </p>
+      <p className="mt-2.5 font-serif text-[1rem] leading-[1.4] text-dark/80">
+        {dateLabel}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * The top of the page: what the election is, and how long is left of it.
+ *
+ * Hero and countdown used to be two stacked bands, which meant the headline
+ * and the number that gives it its urgency were separated by a rule and never
+ * read as one statement. They're one block now — eyebrow, headline, blurb,
+ * then the live timer under a hairline inside the same section — so the first
+ * screen answers "which election" and "how long do I have" together.
+ *
+ * The supporting calendar is not here. Advance polls, the mail-in cutoff and
+ * the how-to-vote guides used to run as a strip along the bottom of this
+ * band, which put three secondary deadlines between the reader and the field
+ * — on a first screen whose one job is which election, and how long. They are
+ * the last thing on the page now, in VotingCalendar, which is where someone
+ * who has read the candidates and wants to know how to vote for one looks.
+ *
+ * The survey ask that used to sit in this band is now the explore grid's
+ * alignment card and the closing CTA — asking twice in the first screen was
+ * the old band's problem, not its strength.
  */
-function KeyDates({
+function Hero({
   election,
-  guideLinks,
+  content,
+  electionDay,
 }: {
   election: SupportedElection;
-  guideLinks?: { label: string; href: string }[];
+  content: LandingContent;
+  /** poll hours for election day, where the region has published them */
+  electionDay?: ElectionDayPeriod;
+}) {
+  return (
+    <section className="border-b-2 border-dark">
+      <div className="px-6 pt-14 pb-12 md:px-14 md:pt-16 md:pb-14">
+        <p className="type-label text-accent mb-6">{election.eyebrow}</p>
+        <h1 className="font-sans font-medium leading-[0.98] tracking-[-0.04em] text-[clamp(3rem,7vw,5.75rem)] max-w-[15ch] text-balance mb-7">
+          {content.heroTitle}
+        </h1>
+        <p className="font-serif text-[clamp(1.15rem,1.6vw,1.4rem)] leading-[1.5] max-w-[62ch]">
+          {content.heroBlurb}
+        </p>
+
+        {/* The clock, under a hairline rather than in a band of its own. The
+            timer takes every pixel the grid can give it — eleven glyphs plus
+            four unit labels don't survive sharing a column — and the poll-hours
+            line shrink-wraps beside it. */}
+        <div className="mt-12 pt-10 border-t border-border-light grid gap-10 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end lg:gap-16">
+          <div>
+            {electionDay ? (
+              // The same live timer the /toronto hero band runs: the server
+              // reads the state and the remaining milliseconds once, and
+              // LiveCountdown ticks forward from there. It carries its own
+              // state label — "Until polls open" before the day, "Left to
+              // vote" during it — so the eyebrow above it names the election,
+              // not the count.
+              <>
+                <p className="type-label text-accent mb-5">
+                  {yearOf(election.electionDateIso)} Election day
+                </p>
+                <ElectionDayCountdown period={electionDay} />
+              </>
+            ) : (
+              // Regions with no published poll hours get a whole-day count, in
+              // the same three-part shape so the hero reads the same either
+              // way.
+              <>
+                <p className="type-label text-accent mb-5">Until polls open</p>
+                <p className="flex items-baseline gap-4">
+                  <CountdownDays
+                    initialDays={daysUntil(election.electionDateIso)}
+                    targetIso={election.electionDateIso}
+                    className="font-sans font-medium leading-[0.95] tracking-[-0.04em] text-[clamp(4rem,10vw,8rem)] tabular-nums"
+                  />
+                  <span className="type-label !tracking-[0.14em] text-text-secondary">
+                    days
+                  </span>
+                </p>
+              </>
+            )}
+          </div>
+
+          <p className="font-serif text-[1.05rem] leading-[1.4] lg:shrink-0 lg:text-right lg:text-[1.15rem]">
+            Polls open{" "}
+            <span className="text-accent">
+              {election.voteDayLabel},&nbsp;{yearOf(election.electionDateIso)}
+            </span>
+            , {election.pollHoursLabel}.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/**
+ * How to vote, and by when — the last thing on the page.
+ *
+ * These three cells opened the page, tucked under the hero: two deadline
+ * counters and a stack of guide links, read before the reader had met a single
+ * candidate. That is the wrong order for what they are. A deadline matters to
+ * someone who has decided to vote, and the page spends its whole length making
+ * that decision possible; asked at the top, "apply to vote by mail by Friday"
+ * is an errand in front of the thing they came for.
+ *
+ * So it closes rather than opens, immediately before the call to action, where
+ * a reader who has just read the field and wants to know how to act on it is
+ * already looking down the page.
+ *
+ * Cells a region can't fill are dropped rather than rendered empty, so a region
+ * with no published advance date and no guides gets no band at all.
+ */
+function VotingCalendar({
+  election,
+  content,
+}: {
+  election: SupportedElection;
+  content: LandingContent;
 }) {
   const { advanceVote, mailIn } = election;
-  const hasMiddle = Boolean(advanceVote || mailIn);
+  const guideLinks = content.guideLinks ?? [];
+  const dateCells = [advanceVote, mailIn].filter(Boolean).length;
+  if (dateCells === 0 && guideLinks.length === 0) return null;
+
+  /* The columns, counted rather than auto-fit: the guides cell holds a stack
+     of links and wants the wider share, the counters are a number and a date
+     apiece. One cell takes the row on its own. */
+  const cells = dateCells + (guideLinks.length > 0 ? 1 : 0);
+  const cols =
+    cells === 3
+      ? "md:grid-cols-[1fr_1fr_1.15fr]"
+      : cells === 2
+        ? guideLinks.length > 0
+          ? "md:grid-cols-[1fr_1.15fr]"
+          : "md:grid-cols-2"
+        : "";
 
   return (
-    <section
-      className={`grid ${hasMiddle ? "md:grid-cols-[1.15fr_0.85fr_1fr]" : "md:grid-cols-[1.6fr_1fr]"} border-b-2 border-dark`}
-    >
-      <div className="px-6 py-12 md:px-14 md:py-14 flex flex-col justify-center">
-        <div className="flex items-end gap-5 flex-wrap">
-          <CountdownDays
-            initialDays={daysUntil(election.electionDateIso)}
-            targetIso={election.electionDateIso}
-            className="font-sans font-semibold leading-[0.8] tracking-[-0.05em] text-[clamp(5rem,13vw,11rem)] tabular-nums"
-          />
-          <span className="type-label !tracking-[0.12em] leading-[1.5] pb-3.5">
-            Days until
-            <br />
-            polls open
-          </span>
-        </div>
+    <section className="border-b-2 border-dark">
+      <div className="px-6 pt-10 pb-6 md:px-14">
+        <p className="type-label text-accent mb-3">Before you vote</p>
+        <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.85rem,3vw,2.4rem)] mb-2">
+          Dates and how to vote
+        </h2>
       </div>
+      <div className={`border-t border-border-light grid ${cols}`}>
+        {advanceVote && (
+          <div className="px-6 py-8 md:px-14 md:py-9">
+            <DateCounter
+              eyebrow="Until advance polls"
+              targetIso={advanceVote.iso}
+              dateLabel={advanceVote.label}
+            />
+          </div>
+        )}
 
-      {hasMiddle && (
-        <div className="px-6 py-12 md:px-14 md:py-14 border-t-2 md:border-t-0 md:border-l border-border-light flex flex-col justify-center gap-8">
-          {advanceVote && (
-            <div>
-              <div className="flex items-end gap-3">
-                <CountdownDays
-                  initialDays={daysUntil(advanceVote.iso)}
-                  targetIso={advanceVote.iso}
-                  className="font-sans font-semibold leading-[0.8] tracking-[-0.04em] text-[clamp(2.75rem,5.5vw,4rem)] tabular-nums"
-                />
-                <span className="type-label !tracking-[0.12em] leading-[1.4] pb-1">
-                  Days until
-                  <br />
-                  advance polls
-                </span>
-              </div>
-              <p className="mt-2.5 font-serif text-[1rem] leading-[1.4] text-accent">
-                {advanceVote.label}
-              </p>
-            </div>
-          )}
-          {mailIn && (
-            <div className={advanceVote ? "pt-7 border-t border-border-light" : ""}>
-              <div className="flex items-end gap-3">
-                <CountdownDays
-                  initialDays={daysUntil(mailIn.iso)}
-                  targetIso={mailIn.iso}
-                  className="font-sans font-semibold leading-[0.8] tracking-[-0.04em] text-[clamp(2.75rem,5.5vw,4rem)] tabular-nums"
-                />
-                <span className="type-label !tracking-[0.12em] leading-[1.4] pb-1">
-                  Days to apply
-                  <br />
-                  to vote by mail
-                </span>
-              </div>
-              <p className="mt-2.5 font-serif text-[1rem] leading-[1.4] text-accent">
-                {/* Also spelled out, with the rest of Toronto's calendar, in
-                    src/app/toronto/vote/2026/key-dates.ts. This component is
-                    shared by four cities and can't import a Toronto route
-                    module, so the cutoff is written twice — change both. */}
-                {mailIn.label}, 4:30&nbsp;p.m.
-              </p>
-            </div>
-          )}
-        </div>
-      )}
+        {mailIn && (
+          <div className="px-6 py-8 md:px-14 md:py-9 border-t md:border-t-0 md:border-l border-border-light">
+            <DateCounter
+              eyebrow="To apply to vote by mail"
+              targetIso={mailIn.iso}
+              /* Also spelled out, with the rest of Toronto's calendar, in
+                 src/app/toronto/vote/2026/key-dates.ts. This component is
+                 shared by four cities and can't import a Toronto route
+                 module, so the cutoff is written twice — change both. */
+              dateLabel={<>{mailIn.label}, 4:30&nbsp;p.m.</>}
+            />
+          </div>
+        )}
 
-      <div className="px-6 py-12 md:px-14 md:py-14 border-t-2 md:border-t-0 md:border-l border-border-light bg-bg-alt flex flex-col justify-center">
-        <p className="type-label text-accent mb-3.5">Ready to vote?</p>
-        <p className="font-serif text-[1.15rem] leading-[1.45] max-w-[34ch] mb-6">
-          Put your name on the record. Pledging takes ten seconds — and it&rsquo;s
-          the first step to showing up on election day.
-        </p>
-        <PledgeButton
-          election={election.slug}
-          source="election-ready-to-vote"
-          className="group/btn self-start inline-flex items-center gap-3 type-button text-bg bg-dark px-5 py-4 transition-colors hover:bg-black cursor-pointer"
-        >
-          Pledge to vote
-          <ArrowRight className="size-3.5 shrink-0 transition-transform group-hover/btn:translate-x-0.5" />
-        </PledgeButton>
-        <p className="mt-7 pt-5 border-t border-border-light font-serif text-[1.05rem] leading-[1.4]">
-          Polls open{" "}
-          <span className="text-accent">
-            {election.voteDayLabel},&nbsp;{yearOf(election.electionDateIso)}
-          </span>
-          , {election.pollHoursLabel}.
-        </p>
-        {guideLinks && guideLinks.length > 0 && (
-          <div className="mt-4 flex flex-col items-start gap-2">
-            {guideLinks.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className="group/dates inline-flex items-center gap-1.5 type-label-sm !tracking-[0.1em] text-dark hover:text-accent transition-colors"
-              >
-                {link.label}
-                <ArrowRight className="size-3 shrink-0 transition-transform group-hover/dates:translate-x-0.5" />
-              </Link>
-            ))}
+        {guideLinks.length > 0 && (
+          <div
+            className={`px-6 py-8 md:px-14 md:py-9 bg-bg-alt ${dateCells > 0
+                ? "border-t md:border-t-0 md:border-l border-border-light"
+                : ""
+              }`}
+          >
+            <p className="type-label text-accent mb-4">How to vote</p>
+            <div className="flex flex-col items-start gap-2.5">
+              {guideLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className="group/dates inline-flex items-center gap-1.5 type-label-sm !tracking-[0.1em] text-dark hover:text-accent transition-colors"
+                >
+                  {link.label}
+                  <ArrowRight className="size-3 shrink-0 transition-transform group-hover/dates:translate-x-0.5" />
+                </Link>
+              ))}
+            </div>
           </div>
         )}
       </div>
@@ -320,6 +642,170 @@ function KeyDates({
   );
 }
 
+// ── Explore grid ───────────────────────────────────────────────────────────
+
+/**
+ * Everything we've made out of the questionnaire, in one grid.
+ *
+ * These pages exist either way — the field's answers issue by issue, the
+ * reader's own alignment, the mayoral grid — but until now the only way to
+ * find them was a link buried beside a section heading, and the alignment
+ * survey was the closing CTA at the bottom of a very long page. The grid puts
+ * them where someone who has just read the countdown can see them.
+ *
+ * Cards over a list, because each one needs a sentence to explain what it
+ * shows; the same border-collapse trick as the ward and mayoral grids, so the
+ * three sections read as one table rather than three treatments.
+ */
+function ExploreSection({
+  items,
+  anchorCandidates = false,
+}: {
+  items: ExploreItem[];
+  /** also answer to #candidates, which three other pages link to and which
+   *  lands here whenever the mayoral cards do */
+  anchorCandidates?: boolean;
+}) {
+  return (
+    <section id="explore" className="border-b-2 border-dark scroll-mt-24">
+      {anchorCandidates && (
+        <span
+          id="candidates"
+          className="block scroll-mt-24"
+          aria-hidden="true"
+        />
+      )}
+      <div className="px-6 pt-10 pb-6 md:px-14">
+        <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.85rem,3vw,2.4rem)] mb-2">
+          Explore the election
+        </h2>
+        <p className="font-serif text-[1.05rem] leading-[1.45] max-w-[52ch] text-dark/80">
+          We put the same questions to every candidate on the ballot. See how
+          they answered — then answer them yourself and find out who lines up
+          with you.
+        </p>
+      </div>
+
+      {/* auto-FIT, not auto-fill. Filling laid out as many 288px tracks as the
+          row could hold and left the spare ones empty: three cards on a wide
+          screen were three narrow columns hard against the left edge, with
+          half the row a blank rectangle inside the same border. Fitting
+          collapses the empty tracks, so however many cards a region has, they
+          divide the row between them. */}
+      <CardGrid min="288px" fit>
+        {items.map((item) => {
+          const invite = item.tone === "invite";
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`group/explore flex flex-col border-b border-r px-6 py-6 md:px-8 md:py-7 lg:min-h-[290px] lg:px-10 lg:py-9 transition-colors ${invite
+                  ? "border-accent bg-accent text-bg hover:bg-dark"
+                  : "border-border-light hover:bg-bg-alt"
+                }`}
+            >
+              <p
+                className={`type-label-sm !tracking-[0.1em] mb-3 ${invite ? "text-bg/70" : "text-text-secondary"
+                  }`}
+              >
+                {item.eyebrow}
+              </p>
+              <h3
+                className={`type-h3 lg:text-[1.75rem] lg:leading-[1.15] transition-colors ${invite ? "" : "group-hover/explore:text-accent"
+                  }`}
+              >
+                {item.title}
+              </h3>
+              {item.meta && (
+                <p
+                  className={`mt-2 font-sans font-medium tracking-[-0.02em] text-[1.35rem] leading-none tabular-nums ${invite ? "text-bg/80" : "text-accent"
+                    }`}
+                >
+                  {item.meta}
+                </p>
+              )}
+              <p
+                className={`mt-3 font-serif text-[1rem] leading-[1.45] lg:mt-4 lg:text-[1.1rem] lg:leading-[1.5] ${invite ? "text-bg/85" : "text-dark/80"
+                  }`}
+              >
+                {item.blurb}
+              </p>
+              {/* A button rather than a link with an arrow, on the one card
+                  that is a control — the same distinction the survey card
+                  makes everywhere else on the site. */}
+              {invite ? (
+                <span className="type-button mt-auto pt-5 inline-flex items-center gap-2">
+                  <span className="inline-flex items-center gap-2 bg-bg px-4 py-2.5 text-dark">
+                    {item.cta ?? "Open"}
+                    <ArrowRight className="size-3.5 transition-transform group-hover/explore:translate-x-0.5" />
+                  </span>
+                </span>
+              ) : (
+                <span className="mt-auto pt-5 inline-flex items-center gap-1.5 type-label-sm !tracking-[0.1em] text-accent">
+                  Open
+                  <ArrowRight className="size-3 shrink-0 transition-transform group-hover/explore:translate-x-0.5" />
+                </span>
+              )}
+            </Link>
+          );
+        })}
+      </CardGrid>
+    </section>
+  );
+}
+
+/**
+ * A row of cards that closes on all four sides, exactly once.
+ *
+ * THE PROBLEM THIS SOLVES
+ *   Cards in a full-bleed grid have to be ruled off from each other without
+ *   doubling the page frame that already surrounds them, and neither obvious
+ *   arrangement manages it:
+ *
+ *   · Rules on the container (`border-t border-l`) plus rules after each cell
+ *     (`border-b border-r`) draws a second line on top of the frame's left and
+ *     right borders, and leaves a hairline sitting a pixel above the section's
+ *     2px rule at the foot.
+ *   · Rules before each cell (`border-t border-r`) fixes all three of those and
+ *     breaks something worse: twenty-five wards in a four-column grid leave one
+ *     card alone on the last row, and the rule above it spans one column of
+ *     four. A line that stops a quarter of the way across the page is not a
+ *     subtle defect.
+ *
+ * THE ARRANGEMENT
+ *   Cells rule *after* themselves, so every row draws a full-width line under
+ *   itself whether or not the row below it is complete. The two lines that
+ *   would then land on the frame — the last row's and the last column's — are
+ *   pushed a pixel past the edge with negative margins and clipped away by the
+ *   wrapper. What is left is the frame's own border on the outside, the
+ *   section's rule at the foot, and one line between any two cards.
+ */
+function CardGrid({
+  min,
+  fit = false,
+  children,
+}: {
+  /** the narrowest a column may get before the grid drops one */
+  min: string;
+  /** collapse empty tracks so a few cards fill the row, rather than lining up
+   *  at their minimum width with the rest of the row left blank */
+  fit?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <div className="overflow-hidden">
+      <div
+        className="-mb-px -mr-px grid border-t border-border-light"
+        style={{
+          gridTemplateColumns: `repeat(${fit ? "auto-fit" : "auto-fill"}, minmax(${min}, 1fr))`,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
 // ── Candidate cards ────────────────────────────────────────────────────────
 
 function MayoralCard({
@@ -419,9 +905,8 @@ export function CandidateRow({
 }) {
   return (
     <li
-      className={`flex gap-5 sm:gap-6 items-center px-6 md:px-14 py-5 border-t border-border-light ${
-        candidate.withdrawn ? "opacity-55" : ""
-      }`}
+      className={`flex gap-5 sm:gap-6 items-center px-6 md:px-14 py-5 border-t border-border-light ${candidate.withdrawn ? "opacity-55" : ""
+        }`}
     >
       <span
         aria-hidden="true"
@@ -432,9 +917,8 @@ export function CandidateRow({
       <div className="flex-1 min-w-0">
         <div className="flex items-baseline gap-3 flex-wrap">
           <p
-            className={`font-sans font-medium text-[1.25rem] tracking-[-0.02em] leading-[1.15] ${
-              candidate.withdrawn ? "line-through decoration-1" : ""
-            }`}
+            className={`font-sans font-medium text-[1.25rem] tracking-[-0.02em] leading-[1.15] ${candidate.withdrawn ? "line-through decoration-1" : ""
+              }`}
           >
             {candidate.name}
           </p>
@@ -489,11 +973,11 @@ export function SiteLink({
   ward?: string;
   wardName?: string;
 }) {
-  if (!candidate.website) {
-    return (
-      <span className="type-label-sm text-text-secondary">Profile to come</span>
-    );
-  }
+  /* No site, no line. "Profile to come" was a promise we do not control — a
+     candidate with no web presence may never acquire one — and printed under
+     every third name it read as a column of missing things rather than as the
+     ordinary state of a municipal candidate. The absence says it already. */
+  if (!candidate.website) return null;
   return (
     <CandidateSiteLink
       href={candidate.website}
diff --git a/src/components/elections/FieldSentiment.tsx b/src/components/elections/FieldSentiment.tsx
new file mode 100644
index 00000000..25926707
--- /dev/null
+++ b/src/components/elections/FieldSentiment.tsx
@@ -0,0 +1,768 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  EMPTY,
+  optionColors as rampFor,
+} from "@/lib/elections/option-colors";
+import {
+  forRace,
+  splitOf,
+  type FieldGroup,
+  type FieldPick,
+  type FieldQuestion,
+  type Race,
+  type Respondent,
+  type Split,
+} from "@/lib/elections/field-sentiment";
+
+/* Where the whole field stands, issue by issue — a card per question.
+ *
+ * WHY NOT THE GRID
+ *   A ward's questionnaire reads across: one row per question, one column per
+ *   candidate. That works at four columns and collapses at thirty-two — the
+ *   city-wide field is a kilometre of sideways drag, and the thing a reader
+ *   wants from it is not any one candidate's column anyway. It is the shape of
+ *   the distribution: where the people running to govern Toronto agree, and
+ *   where they are split down the middle.
+ *
+ * WHY UNIT BARS, AND NOT A PIE
+ *   This page used to draw each question as a pie, on the reasoning that the
+ *   options are exhaustive and mutually exclusive. True, and still the wrong
+ *   mark at this size. A pie asks the reader to compare angles, which is the
+ *   comparison people are worst at, and — the fatal part on a page of two
+ *   dozen questions — two pies cannot be compared to each other at all. Every
+ *   pie is the same circle whatever its denominator, so a question 26 people
+ *   answered drew exactly as big as one 32 answered.
+ *
+ *   So: a bar per option, each built out of one cell per candidate, all of
+ *   them on a scale of the whole field. Every bar on the page is in the same
+ *   units, which makes them comparable to each other rather than only to
+ *   themselves — a reader scanning the grid is reading two dozen charts on one
+ *   axis. The cells are countable, which is the honest register for n = 32:
+ *   "twenty of thirty-two" is a fact, where 63% of a circle is a shape. And
+ *   the candidates who skipped a question get a bar of their own rather than
+ *   disappearing into a denominator in the caption, so a thin answer looks
+ *   thin. See UnitRows.
+ *
+ * COLOUR
+ *   Option position, from the brand's chart ramps, with a separate diverging
+ *   assignment for the Yes/No questions — see `optionColors`.
+ */
+
+type Order = "topic" | "consensus" | "division";
+type Filter = Race | "all";
+
+const ORDERS: { id: Order; label: string }[] = [
+  { id: "topic", label: "By topic" },
+  { id: "consensus", label: "Most agreed" },
+  { id: "division", label: "Most divided" },
+];
+
+export function FieldSentiment({
+  groups,
+  respondents,
+  race,
+}: {
+  groups: FieldGroup[];
+  respondents: Respondent[];
+  /** Pins the whole page to one ballot line and drops the field control.
+   *  Passed by the mayoral page, which is a race rather than a city: the
+   *  filter would be a two-state toggle whose other state is empty. Left
+   *  unset, the reader chooses, which is what the city-wide page wants. */
+  race?: Race;
+}) {
+  const [order, setOrder] = useState<Order>("topic");
+  const [chosen, setChosen] = useState<Filter>("all");
+  const filter: Filter = race ?? chosen;
+
+  const questions = useMemo(
+    () => groups.flatMap((group) => group.questions),
+    [groups],
+  );
+
+  /* Every question's split under the current filter, computed once. The
+     filter is the reason this is client-side at all: "how does the mayoral
+     field differ from the council field" is the question the page is for, and
+     it is a re-tally of the same picks rather than a new fetch. */
+  const splits = useMemo(() => {
+    const map = new Map<string, Split>();
+    for (const question of questions)
+      map.set(
+        question.questionId,
+        splitOf(question, forRace(question.picks, filter)),
+      );
+    return map;
+  }, [questions, filter]);
+
+  /* The picks behind each question, narrowed the same way the bars are.
+     The panel used to open on `question.picks` — the whole election — while
+     the chart above it drew the filtered field, so a mayoral page whose bars
+     counted nine listed all thirty-two underneath. One filter, applied once,
+     read by both. */
+  const picks = useMemo(() => {
+    const map = new Map<string, FieldPick[]>();
+    for (const question of questions)
+      map.set(question.questionId, forRace(question.picks, filter));
+    return map;
+  }, [questions, filter]);
+
+  const field = useMemo(
+    () =>
+      filter === "all"
+        ? respondents
+        : respondents.filter((r) => r.race === filter),
+    [respondents, filter],
+  );
+
+  const ranked = useMemo(() => {
+    const answered = questions
+      .map((question) => ({
+        question,
+        split: splits.get(question.questionId)!,
+      }))
+      .filter((row) => row.split.answered > 0);
+    return [...answered].sort((a, b) =>
+      order === "division"
+        ? b.split.division - a.split.division
+        : a.split.division - b.split.division,
+    );
+  }, [questions, splits, order]);
+
+  /* The two ends, named up top. A reader who takes nothing else off this page
+     should still leave with the single most agreed-on statement and the single
+     most contested one. */
+  const consensus = ranked[0] ?? null;
+  const contested = ranked[ranked.length - 1] ?? null;
+  const [agreed, divided] =
+    order === "division" ? [contested, consensus] : [consensus, contested];
+
+  return (
+    <div>
+      {/* ── The two ends, as the page's headline numbers ───────── */}
+      {agreed && divided && agreed !== divided && (
+        <div className="grid md:grid-cols-2 border-b-2 border-dark">
+          <Feature eyebrow="Most agreed on" row={agreed} field={field.length} />
+          <Feature
+            eyebrow="Most divided"
+            row={divided}
+            field={field.length}
+            className="border-t md:border-t-0 md:border-l border-border-light"
+          />
+        </div>
+      )}
+
+      {/* ── Controls ───────────────────────────────────────────── */}
+      <div className="border-b-2 border-dark flex flex-wrap items-stretch justify-between">
+        <div className="flex items-center gap-1 px-5 py-3">
+          <span className="type-label-sm text-text-muted mr-2">Order</span>
+          {ORDERS.map(({ id, label }) => (
+            <Chip
+              key={id}
+              active={order === id}
+              onClick={() => setOrder(id)}
+              label={label}
+            />
+          ))}
+        </div>
+
+        {!race && (
+          <div className="flex items-center gap-1 px-5 py-3 border-t md:border-t-0 md:border-l border-border-light grow md:grow-0">
+            <span className="type-label-sm text-text-muted mr-2">Field</span>
+            {(
+              [
+                ["all", "All"],
+                ["mayor", "Mayoral"],
+                ["councillor", "Council"],
+              ] as const
+            ).map(([id, label]) => (
+              <Chip
+                key={id}
+                active={filter === id}
+                onClick={() => setChosen(id)}
+                label={label}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {field.length === 0 ? (
+        <p className="px-6 md:px-14 py-16 font-serif text-[1.05rem] text-dark/70">
+          No one in this part of the field has answered the questionnaire yet.
+        </p>
+      ) : (
+        <section className="pb-8">
+          {order === "topic" ? (
+            groups.map((group, i) => (
+              <div key={group.stepId}>
+                <SectionRule
+                  title={group.stepTitle}
+                  note={
+                    i === 0
+                      ? "One cell per candidate · open a card for who chose what"
+                      : undefined
+                  }
+                />
+                <CardGrid>
+                  {group.questions.map((question) => (
+                    <Card
+                      key={question.questionId}
+                      question={question}
+                      split={splits.get(question.questionId)!}
+                      picks={picks.get(question.questionId)!}
+                      field={field.length}
+                    />
+                  ))}
+                </CardGrid>
+              </div>
+            ))
+          ) : (
+            <>
+              <SectionRule
+                title={
+                  order === "consensus"
+                    ? "From agreement to division"
+                    : "From division to agreement"
+                }
+                note={`${ranked.length} questions · one cell per candidate · open a card for who chose what`}
+              />
+              <CardGrid>
+                {ranked.map(({ question, split }, rank) => (
+                  <Card
+                    key={question.questionId}
+                    question={question}
+                    split={split}
+                    picks={picks.get(question.questionId)!}
+                    field={field.length}
+                    rank={rank + 1}
+                    topic={question.stepTitle}
+                  />
+                ))}
+              </CardGrid>
+            </>
+          )}
+        </section>
+      )}
+    </div>
+  );
+}
+
+/* A section head that costs one line rather than a screen: the title set on
+   the rule that opens the section, with the optional note pushed to the far
+   end of the same line. Two dozen cards under eight headings is a page that
+   scrolls; the headings should not be why. */
+function SectionRule({ title, note }: { title: string; note?: string }) {
+  return (
+    <div className="mx-6 md:mx-14 mt-6 mb-3 flex flex-wrap items-baseline gap-x-4 gap-y-1">
+      <h2 className="font-sans font-medium leading-none tracking-[-0.02em] text-[1.15rem]">
+        {title}
+      </h2>
+      {note && <p className="type-label-sm text-text-muted">{note}</p>}
+    </div>
+  );
+}
+
+function Chip({
+  active,
+  onClick,
+  label,
+}: {
+  active: boolean;
+  onClick: () => void;
+  label: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={`type-label-sm px-2.5 py-1.5 border transition-colors cursor-pointer ${
+        active
+          ? "border-dark bg-dark text-bg"
+          : "border-border-light text-text-secondary hover:border-dark hover:text-dark"
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
+/* The grid the cards tile into.
+ *
+ * Borders on the container's top and left and on each card's bottom and right,
+ * so the rules between cards are single-weight however the row wraps — the
+ * usual trick, and the reason the cards carry no border of their own.
+ *
+ * FOUR ROW TRACKS PER CARD, AND WHY
+ *   Each card spans four of the grid's rows and adopts them with
+ *   `grid-rows-subgrid` — question, chart, footer, and the answers it opens
+ *   into — and the trigger nests a second subgrid to claim the first three.
+ *   Every block is therefore sized by the tallest of its kind in the row, so
+ *   every card in a row starts its bar on the same line as its neighbours.
+ *   Which is the whole point of a bar that means the same thing on every card:
+ *   aligned, the row can be read across.
+ *
+ *   The obvious way to bottom-align — stretch the card to the row's height and
+ *   push the footer down with `mt-auto` — cannot survive the disclosure. The
+ *   slack a card is absorbing comes from whichever card in the row is tallest,
+ *   and opening a card makes it the tallest, so the slack vanishes and
+ *   everything the reader was looking at slides upward under the cursor. We
+ *   shipped that once and it was the first thing anyone noticed.
+ *
+ *   Shared tracks have no such coupling. Every closed card is sized by the
+ *   first three tracks, so every footer sits on the same line. When one card
+ *   opens, it is the fourth track that grows — for every card in the row at
+ *   once, which costs the others nothing but empty space they do not draw —
+ *   and the tracks above it never move. Nothing above the fold shifts. */
+function CardGrid({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-6 md:mx-14 grid grid-cols-1 border-t border-l border-border-light cards:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+      {children}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Colour                                                              */
+/* ------------------------------------------------------------------ */
+
+/* Option colours, by position — see src/lib/elections/option-colors.ts, which
+ * this page shares with the ward cards so an option is the same colour on
+ * both. */
+function optionColors(question: FieldQuestion): string[] {
+  return rampFor(question.options.length, question.ordinal);
+}
+
+/* ------------------------------------------------------------------ */
+/* The bars                                                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * One question's field as a small horizontal bar chart, one bar per option,
+ * and every bar built out of one cell per candidate.
+ *
+ * A ROW PER OPTION, RATHER THAN ONE STACKED LINE
+ *   The single line was one row of thirty-two cells, split into runs by
+ *   option, with the option names printed underneath as a key. It reads the
+ *   shape of a split well and everything else badly. Only the first run starts
+ *   at the left edge, so comparing the second option to the third is comparing
+ *   two floating runs with no shared baseline — the comparison bar charts
+ *   exist to make trivial. And the names sat in a key, which means every
+ *   reading costs a colour lookup: find the swatch, match the hue, come back.
+ *
+ *   Broken into rows, every bar starts at the same left edge on the same
+ *   scale, longest is longest at a glance, and each name sits directly over
+ *   its own bar — so the key disappears, and colour goes back to being what it
+ *   should be here, a second channel rather than the only one.
+ *
+ * THE SCALE IS THE FIELD, ON EVERY ROW AND EVERY CARD
+ *   Each row is `field` cells wide — everyone who returned the questionnaire —
+ *   with the unchosen remainder left as a faint track. So the rows within a
+ *   card share an axis, and so do the cards: a bar half across is sixteen
+ *   candidates on every question on the page, which is what makes a grid of
+ *   two dozen of these scannable rather than merely present.
+ *
+ *   Candidates who skipped the question get a row of their own at the bottom
+ *   rather than a footnote, so a question the field ducked looks ducked.
+ */
+function UnitRows({
+  question,
+  split,
+  field,
+}: {
+  question: FieldQuestion;
+  split: Split;
+  /** how many candidates are in the filtered field — the cells in a row */
+  field: number;
+}) {
+  const colors = optionColors(question);
+  const total = Math.max(1, split.answered);
+
+  type Row = {
+    label: string;
+    count: number;
+    /** the option's colour, or null for the row of candidates who skipped it */
+    color: string | null;
+    share: number | null;
+    lead: boolean;
+  };
+
+  const rows: Row[] = question.options.map((option, i) => ({
+    label: option,
+    count: split.counts[i],
+    color: colors[i],
+    share: Math.round((split.counts[i] / total) * 100),
+    lead: split.counts[i] > 0 && i === split.lead,
+  }));
+
+  const skipped = Math.max(0, field - split.answered);
+  if (skipped > 0)
+    rows.push({
+      label: "Did not answer",
+      count: skipped,
+      color: null,
+      /* No share: every other row on the card is a share of the candidates who
+         answered, and this row is the ones who did not. A percentage here
+         would be a percentage of something else printed in the same column. */
+      share: null,
+      lead: false,
+    });
+
+  return (
+    <span className="block">
+      {rows.map((row, i) => (
+        <span key={i} className={`block ${i === 0 ? "" : "mt-2"}`}>
+          <span className="mb-1 flex items-baseline justify-between gap-2.5">
+            <span
+              className={`font-sans leading-[1.25] tracking-[-0.01em] text-pretty ${"text-[0.9rem]"} ${
+                row.lead
+                  ? "font-semibold text-dark"
+                  : row.count === 0 || row.color === null
+                    ? "font-medium text-text-muted"
+                    : "font-medium text-text-secondary"
+              }`}
+            >
+              {row.label}
+            </span>
+            {/* The tally itself is the row of cells below — countable, and
+                the only place the number needs to be. What stays here is the
+                share, which the cells cannot show. The count survives for a
+                screen reader, which has no cells to count. */}
+            <span className="type-label-sm flex-none tabular-nums text-text-muted">
+              <span className="sr-only">{row.count} </span>
+              {row.share !== null && <>{row.share}%</>}
+            </span>
+          </span>
+
+          {/* The cells carry the count for a sighted reader, but a screen
+              reader gets it as the number beside the label instead: walking
+              a grid of thirty-two blank cells is not counting them. */}
+          <span
+            aria-hidden="true"
+            className="grid gap-px md:gap-[2px]"
+            style={{
+              gridTemplateColumns: `repeat(${field}, minmax(0, 1fr))`,
+            }}
+          >
+            {Array.from({ length: field }, (_, cell) =>
+              cell < row.count ? (
+                <span
+                  key={cell}
+                  className={`h-3 rounded-[1px] ${
+                    row.color === null ? "bg-dark/25" : ""
+                  }`}
+                  style={
+                    row.color === null ? undefined : { background: row.color }
+                  }
+                />
+              ) : (
+                <span key={cell} className="h-3 rounded-[1px] bg-dark/8" />
+              ),
+            )}
+          </span>
+        </span>
+      ))}
+    </span>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* The card                                                            */
+/* ------------------------------------------------------------------ */
+
+function Card({
+  question,
+  split,
+  picks,
+  field,
+  rank,
+  topic,
+}: {
+  question: FieldQuestion;
+  split: Split;
+  /** the answers behind this card's bars — already narrowed to the field on
+   *  screen, so the panel and the chart can never disagree */
+  picks: FieldPick[];
+  field: number;
+  /** the position in the ranking, where the cards are ranked rather than grouped */
+  rank?: number;
+  /** which part of the questionnaire this came from — printed only when the
+   *  cards are ranked, since a topic section already says it otherwise */
+  topic?: string;
+}) {
+  const notes = picks.filter((pick) => pick.note?.trim()).length;
+
+  return (
+    <Collapsible className="row-span-4 grid grid-rows-subgrid border-b border-r border-border-light">
+      {/* Claims the first three tracks, so the blocks inside it are laid on the
+          grid's own rows rather than on rows of its own. Horizontal padding
+          only: vertical padding here would inset the nested tracks from the
+          ones outside it, and the two would stop agreeing about where a row
+          begins. Each block carries its own vertical space instead. */}
+      <CollapsibleTrigger className="group row-span-3 grid w-full cursor-pointer grid-rows-subgrid px-4 text-left">
+        <span className="block pt-3.5 pb-3">
+          <span className="mb-2 flex items-baseline justify-between gap-3">
+            <span className="flex min-w-0 items-baseline gap-2">
+              {rank && (
+                <span className="type-label-sm tabular-nums text-text-muted">
+                  {String(rank).padStart(2, "0")}
+                </span>
+              )}
+              {topic && (
+                <span className="type-caption truncate text-text-muted">
+                  {topic}
+                </span>
+              )}
+            </span>
+            {split.answered > 0 && (
+              <span className="type-label-sm flex-none text-text-muted">
+                {temperature(split.division)}
+              </span>
+            )}
+          </span>
+          <span className="block font-sans text-[0.97rem] font-medium leading-[1.28] tracking-[-0.015em] text-pretty transition-colors group-hover:text-accent">
+            {question.question}
+          </span>
+        </span>
+
+        {/* The chart, on a track of its own, so every card in the row starts
+            its bars on the same line as its neighbours.
+
+            No width cap here. A cap is the wrong instrument: it holds the
+            chart at one size while the card around it keeps growing, so a wide
+            screen buys nothing but a strip of empty card to the right of every
+            bar. The chart fills the card, and the card is kept to a sane width
+            by the column count instead — see CardGrid. */}
+        <span className="block">
+          <UnitRows question={question} split={split} field={field} />
+        </span>
+
+        {/* THE FOOTER IS THE INVITATION
+            It used to be a caption — "9 of 9 answered · 8 comments" — set in
+            muted ink beside a chevron, which describes what is behind the card
+            without ever asking the reader to go there. A count is not a call
+            to action, and a card that hides a dozen candidates' own words
+            deserves one: the ask leads, in the accent, and the denominator
+            follows it as the supporting fact it always was. */}
+        <span className="type-caption mt-3 flex flex-wrap items-center gap-x-1.5 border-t border-border-light pt-2.5 pb-3">
+          <ChevronDown className="size-3 flex-none text-text-muted opacity-45 transition-transform group-data-[state=open]:rotate-180" />
+          {split.answered === 0 ? (
+            <span className="text-text-muted">
+              Nobody has answered this one
+            </span>
+          ) : (
+            <>
+              <span className="font-medium text-accent group-hover:underline">
+                <span className="group-data-[state=open]:hidden">
+                  {notes > 0
+                    ? `See comments from candidates (${notes})`
+                    : "See who chose what"}
+                </span>
+                <span className="hidden group-data-[state=open]:inline">
+                  Hide
+                </span>
+              </span>
+              <span className="text-border-light">·</span>
+              <span className="text-text-muted">
+                {split.answered} of {field} answered
+              </span>
+            </>
+          )}
+        </span>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <div className="px-4 pt-1 pb-5">
+          <Who question={question} picks={picks} />
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+/* The two ends of the ranking, given the top of the page and a headline number
+   each. Same object as the grid's cards — same bar, same key, same colours —
+   sized so the one thing a reader takes away is legible from across the room,
+   and so a screenshot of this block is a complete statement on its own: the
+   share, what it is a share of, and the field it came out of. */
+function Feature({
+  eyebrow,
+  row,
+  field,
+  className = "",
+}: {
+  eyebrow: string;
+  row: { question: FieldQuestion; split: Split };
+  field: number;
+  className?: string;
+}) {
+  const { question, split } = row;
+  const lead = split.lead >= 0 ? question.options[split.lead] : null;
+  const share = Math.round(split.leadShare * 100);
+
+  return (
+    /* THE CLAIM ON THE LEFT, THE EVIDENCE ON THE RIGHT
+       A feature gets half the page, which is far more width than a chart of
+       thirty-two cells should ever take. Stacked down that column — number,
+       then option, then question, then chart — every one of those lines ran
+       out well before the column did, and the block was mostly the empty
+       right-hand half of itself.
+
+       Set as two columns, the width is spent instead of left over: the claim
+       reads as a sentence at a comfortable measure, the chart sits beside it
+       at the same size the grid's cards draw, and the whole thing is shorter
+       than the stack it replaces. Below `lg` there is no width to divide and
+       it stacks, which is the arrangement the cards use anyway. */
+    <div className={`px-6 md:px-14 py-6 ${className}`}>
+      <div className="grid gap-x-10 gap-y-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,26rem)] lg:items-start">
+        <div>
+          <p className="type-label text-accent mb-3">{eyebrow}</p>
+          <p className="flex items-baseline gap-3">
+            <span className="font-sans font-semibold leading-[0.8] tracking-[-0.045em] tabular-nums text-[clamp(2.5rem,4vw,3.25rem)]">
+              {share}%
+            </span>
+            {lead && (
+              <span className="min-w-0 font-sans font-medium leading-[1.2] tracking-[-0.02em] text-[1.02rem] text-pretty">
+                {lead}
+              </span>
+            )}
+          </p>
+          <p className="mt-3 font-serif text-[1.02rem] leading-[1.4] text-dark/85 max-w-[42ch] text-pretty">
+            {question.question}
+          </p>
+        </div>
+
+        <div>
+          <UnitRows question={question} split={split} field={field} />
+          <p className="type-caption text-text-muted mt-3 pt-2.5 border-t border-border-light">
+            {split.answered} of {field} answered
+            {split.answered < field
+              ? ` · ${field - split.answered} skipped it`
+              : ""}
+            {" · "}
+            {temperature(split.division)}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** How a split reads in a word. Thresholds on the entropy rather than on the
+ *  leader's share, so a three-way question and a four-way one are described on
+ *  the same scale — 50% of four options is a much stronger lead than 50% of
+ *  two. */
+function temperature(division: number): string {
+  if (division < 0.45) return "Broad agreement";
+  if (division < 0.8) return "Leaning";
+  return "Split";
+}
+
+/** Who picked what, once a card is opened — the full wording each option was
+ *  offered under, the candidates filed beneath it, and what each of them wrote
+ *  about their own answer.
+ *
+ *  That wording used to print under the chart on every card, and it was most
+ *  of the page's height: two dozen cards each carrying three sentences nobody
+ *  had asked for yet. It belongs here, next to the candidates who chose it,
+ *  where a reader wanting to know exactly what "Public delivery" meant is
+ *  already asking. */
+function Who({
+  question,
+  picks,
+}: {
+  question: FieldQuestion;
+  picks: FieldPick[];
+}) {
+  const colors = optionColors(question);
+  const unplaced = picks.filter((pick) => pick.choice === null);
+
+  return (
+    <div className="grid gap-3.5 sm:grid-cols-2">
+      {question.options.map((option, i) => {
+        const chose = picks
+          .filter((pick) => pick.choice === i)
+          /* Ordered by surname — a reader checking on one candidate needs
+             somewhere to look them up — but printed in full, which is how the
+             ballot and every other page in the tracker names them. */
+          .sort(
+            (a, b) =>
+              a.surname.localeCompare(b.surname) ||
+              a.name.localeCompare(b.name),
+          );
+        return (
+          <div
+            key={i}
+            className="border-t-2 pt-2.5"
+            style={{ borderColor: chose.length ? colors[i] : EMPTY }}
+          >
+            <p className="type-label-sm text-text-secondary text-pretty">
+              {option}
+            </p>
+            {question.details[i] && (
+              <p className="font-serif text-[0.9rem] leading-[1.35] text-text-secondary mt-1 text-pretty">
+                {question.details[i]}
+              </p>
+            )}
+            {chose.length === 0 ? (
+              <p className="type-caption text-text-muted mt-1.5">Nobody</p>
+            ) : (
+              <ul className="m-0 mt-1.5 p-0 list-none grid gap-2">
+                {chose.map((pick) => (
+                  <li key={pick.key}>
+                    <span className="block font-sans font-medium text-[0.92rem] leading-[1.3] tracking-[-0.01em]">
+                      {pick.name}
+                      <span className="type-caption text-text-muted ml-1.5 font-normal">
+                        {pick.race === "mayor" ? "Mayor" : `Ward ${pick.ward}`}
+                      </span>
+                    </span>
+                    {/* Their own words, verbatim, set against a rule so it is
+                        never mistaken for ours. Most candidates who answered
+                        also wrote something, and the writing is the part that
+                        says why — a chart can show that nine picked the same
+                        option and cannot show that they meant nine different
+                        things by it. */}
+                    {pick.note?.trim() && (
+                      <span className="mt-1 block border-l-2 border-border-light pl-2.5 font-serif text-[1.02rem] leading-[1.5] text-text-secondary text-pretty">
+                        {pick.note.trim()}
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        );
+      })}
+      {unplaced.length > 0 && (
+        <div className="border-t-2 border-border-light pt-2.5">
+          <p className="type-label-sm text-text-secondary mb-1.5">
+            Answered in their own words
+          </p>
+          <ul className="m-0 p-0 list-none grid gap-1.5">
+            {unplaced.map((pick) => (
+              <li key={pick.key}>
+                <span className="block font-serif text-[1.08rem] leading-[1.45] text-dark/85">
+                  {pick.name}: &ldquo;{pick.answer}&rdquo;
+                </span>
+                {pick.note?.trim() && (
+                  <span className="mt-1 block border-l-2 border-border-light pl-2.5 font-serif text-[1.02rem] leading-[1.5] text-text-secondary text-pretty">
+                    {pick.note.trim()}
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/elections/QuestionRollCall.tsx b/src/components/elections/QuestionRollCall.tsx
new file mode 100644
index 00000000..56afa464
--- /dev/null
+++ b/src/components/elections/QuestionRollCall.tsx
@@ -0,0 +1,412 @@
+import { rollCall } from "@/lib/elections/candidate-answers";
+import { EMPTY, optionColors } from "@/lib/elections/option-colors";
+import type {
+  ComparedQuestion,
+  RollCallName,
+} from "@/lib/elections/candidate-answers";
+
+/* One question as a card, with the field sorted into the answers they gave.
+ *
+ * FORM
+ *   The answer leads and the candidates sit inside it. That is the inversion
+ *   the ward page needed: the grid it replaces gave every candidate a column
+ *   and every question a row, which reads "what did this one person say" and
+ *   makes the comparison — the thing the page is for — something a reader has
+ *   to assemble across a sideways drag.
+ *
+ *   Grouped, the comparison is the layout. Three panels is a three-way split
+ *   and one panel is a field that agrees, without a number, a chart, or a
+ *   click. Nothing is behind a disclosure here for the same reason: a question
+ *   whose answers are collapsed is a question the reader has to open to
+ *   compare, which is the failure being fixed.
+ *
+ * WHY A PANEL PER ANSWER, AND A NAME PLATE PER CANDIDATE
+ *   The first pass drew the groups as a left rule against a flat list of
+ *   surnames, and the two things a reader has to pick out — which answer, and
+ *   who gave it — were both just runs of text at slightly different weights.
+ *   So an answer is now an enclosed, tinted block that a reader can see the
+ *   edges of, and a candidate is a plate with their own border inside it. Both
+ *   become objects you can count at a glance rather than sentences to read.
+ *
+ *   Names in full, never the surname. This page names the same handful of
+ *   people thirty times over, which is the usual argument for cutting them
+ *   down — but a surname is exactly what fails when the field is unfamiliar,
+ *   and it fails worst on the names most likely to be misread ("Walied
+ *   Khogali Ali" is not "Ali", and "Peter De Marco" is not "Marco").
+ *
+ * COLOUR
+ *   Option position, from the ramps in lib/elections/option-colors — the same
+ *   ones /issues and the mayoral page use, so an option is the same colour
+ *   wherever a reader meets it. Yes/no scales take the diverging ramp rather
+ *   than three unrelated hues, which is both the honest encoding of a scale
+ *   and the thing that makes a direct question look different from a
+ *   three-way one at a glance.
+ */
+
+export function QuestionRollCall({
+  question,
+  silent = [],
+  nameTheSilent = true,
+  seats,
+  notes = true,
+  yourKey,
+  headingId,
+}: {
+  question: ComparedQuestion;
+  /** on the ballot, but never returned the questionnaire */
+  silent?: { key: string; name: string }[];
+  /** false where nobody in the race answered anything — see below */
+  nameTheSilent?: boolean;
+  /** which seat each candidate is running for, keyed by candidate key. A ward
+   *  page passes none: everyone named on it is running for the same seat, and
+   *  printing it on every plate would be the page's own title, repeated a few
+   *  hundred times. City-wide, it is the difference between a name and a
+   *  ballot line the reader can act on — and it is also what splits a panel
+   *  of thirty plates into the two races a voter actually holds. */
+  seats?: Record<string, Seat>;
+  /** print what each candidate wrote about their own answer.
+   *
+   *  A ward's four respondents leave four notes under a question and every
+   *  one of them is worth the line. The city-wide page puts the same question
+   *  to thirty-odd people, and a note under each turns a card a reader can
+   *  take in at a glance into a page of prose they have to read to find the
+   *  split — which is the comparison the form exists to make. So /issues
+   *  files the names and leaves the writing to the ward and mayoral pages,
+   *  where the field is small enough to read it.
+   *
+   *  An answer given in the candidate's own words is not a note and prints
+   *  either way: it is the whole of what they said, and dropping it would
+   *  leave a plate under a heading with nothing behind it. */
+  notes?: boolean;
+  /** the reader's own answers, filed among the candidates' — the survey
+   *  results page passes themselves through the same pivot as everyone else,
+   *  so "who agreed with me" is a plate sitting in the same block rather than
+   *  a column to compare against. Their plate is marked; nobody else's is. */
+  yourKey?: string;
+  /** the id the scroll rail scrolls to. A question is a level-3 entry under
+   *  its section, which is what makes the rail nest rather than run thirty-odd
+   *  headings down one list. */
+  headingId?: string;
+}) {
+  const { groups, verbatim, unanswered } = rollCall(
+    question,
+    nameTheSilent ? silent : [],
+  );
+
+  const colors = optionColors(question.options.length, question.ordinal);
+  const hue = (option: number) => colors[option] ?? EMPTY;
+
+  const empty = groups.length === 0 && verbatim.length === 0;
+
+  return (
+    /* A column rather than a grid, so the "did not answer" foot can take
+       `mt-auto` and sit on the bottom edge. Cards in a row stretch to the
+       tallest of them, and with the foot floating directly under whatever
+       content each card happened to have, the same line landed at a different
+       height in every card — the one piece of every card that says the same
+       thing was the piece a reader could never find twice in the same place. */
+    <article className="flex flex-col gap-4 border border-border-light p-6 md:p-7">
+      <h3
+        id={headingId}
+        className="scroll-mt-24 font-sans font-medium leading-[1.2] tracking-[-0.025em] text-[1.45rem] text-dark text-pretty"
+      >
+        {question.question}
+      </h3>
+
+      {empty ? (
+        <p className="type-caption text-text-muted">
+          No answers to this one yet.
+        </p>
+      ) : (
+        <ul className="grid list-none gap-3 m-0 p-0">
+          {groups.map((group) => (
+            <AnswerPanel
+              key={group.option}
+              color={hue(group.option)}
+              label={group.label}
+              detail={group.detail}
+              candidates={group.candidates}
+              seats={seats}
+              notes={notes}
+              yourKey={yourKey}
+            />
+          ))}
+
+          {/* On no option, because none of them fit what they wrote. Their own
+              words are the whole of what they said here, so they are printed
+              rather than summarised away. */}
+          {verbatim.length > 0 && (
+            <AnswerPanel
+              color={EMPTY}
+              label="In their own words"
+              muted
+              candidates={verbatim}
+              seats={seats}
+              notes={notes}
+              yourKey={yourKey}
+            />
+          )}
+        </ul>
+      )}
+
+      {/* One line, not a plate each. A ward can have ten registered candidates
+          and two respondents, and a plate per silent name per question is
+          three hundred cells of nothing — the grid's problem, restated. Named
+          all the same, on every question: a reader deciding how to vote is
+          owed the fact that their ballot line said nothing.
+
+          Unless nobody answered anything, which `nameTheSilent` turns off.
+          Then the line is the whole ballot, thirty times over, and it says
+          nothing the "No answers to this one yet." above it did not — the
+          roster at the top of the section is where those names belong. */}
+      {unanswered.length > 0 && (
+        <p className="type-caption mt-auto border-t border-border-light pt-3 text-text-muted text-pretty">
+          <span className="type-label-sm">Did not answer</span>{" "}
+          {unanswered.map((candidate) => candidate.name).join(" · ")}
+        </p>
+      )}
+    </article>
+  );
+}
+
+/** A candidate's ballot line: which race, and the seat within it. */
+export type Seat = {
+  race: "mayor" | "councillor";
+  /** how the seat prints on a plate — "Ward 9". Mayoral candidates carry
+   *  none: the run they sit in is already headed "For mayor". */
+  label?: string;
+};
+
+/* One answer, enclosed, with everyone who gave it inside it.
+ *
+ * The tint is the option's own hue at 7% — enough for the block to have an
+ * inside and an outside at a glance, light enough that the names on top of it
+ * are still the darkest thing in the card. */
+function AnswerPanel({
+  color,
+  label,
+  detail,
+  candidates,
+  seats,
+  notes = true,
+  yourKey,
+  muted = false,
+}: {
+  color: string;
+  label: string;
+  detail?: string | null;
+  candidates: (RollCallName & { answer?: string })[];
+  seats?: Record<string, Seat>;
+  notes?: boolean;
+  yourKey?: string;
+  /** the "own words" panel, which is a caveat rather than an option */
+  muted?: boolean;
+}) {
+  /* The reader comes out of the run and sits above it.
+
+     Filed by surname among the candidates, "You" is one plate in a line of a
+     dozen, and the reader has to scan every panel on the card to find out
+     which one they are in — on a page whose entire question is "where am I",
+     that is the one thing that should never need looking for. Lifted to the
+     top of the block it is the first thing under the answer, in the same
+     place in every panel, so the panel a reader belongs to announces itself
+     before they read a single name. */
+  const you = yourKey
+    ? candidates.find((candidate) => candidate.key === yourKey)
+    : undefined;
+  const field = you
+    ? candidates.filter((candidate) => candidate.key !== yourKey)
+    : candidates;
+
+  /* Mayor first — one seat, and the race the whole city votes in. Both runs
+     keep the surname order they arrived in. */
+  const races = (["mayor", "councillor"] as const)
+    .map(
+      (race) =>
+        [
+          race,
+          field.filter((candidate) => seats?.[candidate.key]?.race === race),
+        ] as const,
+    )
+    .filter(([, named]) => named.length > 0);
+
+  return (
+    <li
+      className="grid gap-2.5 border-l-[3px] p-3.5 pl-4"
+      style={{
+        borderColor: color,
+        background: `color-mix(in oklab, ${color} 8%, transparent)`,
+      }}
+    >
+      {/* The answer as it was put to the candidates, in full.
+
+          The questionnaire gives most options a short handle and the real
+          wording underneath — "Public delivery" over "Build or finance
+          substantially more affordable and supportive housing" — and this
+          panel used to title itself with the handle and print the wording as
+          a caption below. That is a summary of the answer standing where the
+          answer should be, and on a page whose whole job is what a candidate
+          said, the reader gets the sentence they actually endorsed. Options
+          with no expansion ("Yes") are already their own full wording.
+
+          Set like a title all the same: the biggest thing inside the block,
+          in serif rather than the question's sans, so the two read as heading
+          and sub-heading instead of competing at one size. */}
+      <p
+        className={`leading-[1.25] text-pretty ${
+          muted
+            ? "type-label-sm text-text-muted"
+            : "font-serif text-[1.28rem] font-medium tracking-[-0.015em] text-dark"
+        }`}
+      >
+        {detail || label}
+      </p>
+
+      {/* BY RACE, WHERE THERE IS MORE THAN ONE
+
+          A ward panel is one run of plates: everyone in it is running for the
+          same seat, so a heading over them would say what the page says. The
+          city-wide page puts thirty-odd plates in a panel drawn from two
+          ballot lines a voter holds separately — the mayor they get one vote
+          for, and the councillor they get one vote for — and undivided, the
+          two are a single wall of names in which the handful that matter to
+          any one reader are hidden. Split, a panel answers "did the mayoral
+          field agree with my councillor" without being read end to end.
+
+          Only where both races are actually present: a panel that happens to
+          be all councillors gets no heading, because a heading over the whole
+          of something is not a division. */}
+      {you && (
+        <Plates
+          candidates={[you]}
+          seats={seats}
+          notes={notes}
+          color={color}
+          yourKey={yourKey}
+        />
+      )}
+
+      {races.length > 1 ? (
+        <div className="grid gap-2.5">
+          {races.map(([race, named]) => (
+            <div key={race} className="grid gap-1.5">
+              <p className="type-label-sm text-text-muted">
+                {race === "mayor" ? "For mayor" : "For council"}
+              </p>
+              <Plates
+                candidates={named}
+                seats={seats}
+                notes={notes}
+                color={color}
+                yourKey={yourKey}
+              />
+            </div>
+          ))}
+        </div>
+      ) : (
+        field.length > 0 && (
+          <Plates
+            candidates={field}
+            seats={seats}
+            notes={notes}
+            color={color}
+            yourKey={yourKey}
+          />
+        )
+      )}
+    </li>
+  );
+}
+
+/* One run of candidates.
+ *
+ * Not a row of plates and a stack of notes under it: split in two, a candidate
+ * who explained their answer got their plate printed twice, which is the
+ * repetition the plates were meant to end.
+ *
+ * So each candidate appears once. The ones who only picked the option flow
+ * inline as plates; the ones who wrote something take a line of their own,
+ * with their words set underneath their plate — a plate is a label and a
+ * sentence is not, and running the two along one line makes the plate read as
+ * the first few words of the sentence. A candidate who took the trouble to
+ * explain has left the most useful thing on the page, so it prints in the
+ * open: a note behind a disclosure is a note nobody reads. */
+function Plates({
+  candidates,
+  seats,
+  notes,
+  color,
+  yourKey,
+}: {
+  candidates: (RollCallName & { answer?: string })[];
+  seats?: Record<string, Seat>;
+  notes: boolean;
+  color: string;
+  yourKey?: string;
+}) {
+  return (
+    <ul className="flex list-none flex-wrap items-baseline gap-1.5 m-0 p-0">
+      {candidates.map((candidate) => {
+        const note = notes ? candidate.note : null;
+        const words = candidate.answer || note;
+        return (
+          <li key={candidate.key} className={words ? "basis-full" : ""}>
+            <NamePlate
+              name={candidate.name}
+              seat={seats?.[candidate.key]?.label}
+              color={color}
+              you={candidate.key === yourKey}
+            />
+            {words && (
+              <p className="mt-1.5 font-serif text-[1.02rem] leading-[1.5] text-text-secondary text-pretty">
+                {candidate.answer && <>&ldquo;{candidate.answer}&rdquo;</>}
+                {candidate.answer && note && " "}
+                {note}
+              </p>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+/* A candidate, as an object rather than a word: their own border on the card's
+   own background, so a name lifts off the tinted panel behind it. */
+function NamePlate({
+  name,
+  seat,
+  color,
+  you = false,
+}: {
+  name: string;
+  seat?: string;
+  color: string;
+  /** the reader's own plate — filled in the option's hue rather than outlined
+   *  in it, so the one plate they are looking for is the one plate that is a
+   *  solid block of colour in a panel of outlines. */
+  you?: boolean;
+}) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 border px-2 py-1 align-middle font-sans text-[0.9rem] leading-none tracking-[-0.01em] ${
+        you ? "font-semibold text-bg" : "bg-bg font-medium text-dark"
+      }`}
+      style={
+        you
+          ? { background: color, borderColor: color }
+          : { borderColor: `color-mix(in oklab, ${color} 45%, transparent)` }
+      }
+    >
+      <span
+        className="size-1.5 flex-none rounded-full"
+        style={{ background: you ? "var(--color-bg)" : color }}
+        aria-hidden="true"
+      />
+      {name}
+      {seat && (
+        <span className="font-normal text-text-muted">{seat}</span>
+      )}
+    </span>
+  );
+}
diff --git a/src/components/elections/QuestionnaireCards.tsx b/src/components/elections/QuestionnaireCards.tsx
new file mode 100644
index 00000000..fdcf0fff
--- /dev/null
+++ b/src/components/elections/QuestionnaireCards.tsx
@@ -0,0 +1,186 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+import type { Heading } from "@/components/custom/signpost/config";
+import type { GridCandidate } from "./SurveyGrid";
+import { QuestionRollCall } from "./QuestionRollCall";
+import type { Seat } from "./QuestionRollCall";
+import type { ComparedGroup } from "@/lib/elections/candidate-answers";
+
+/* One race's questionnaire, read question by question — a card per question,
+ * the candidates filed under the answer they gave.
+ *
+ * WHAT THIS REPLACED
+ *   A grid: candidates across, thirty-odd questions down, sticky heads, and a
+ *   horizontally scrolling region with a chart behind every row. It answered
+ *   "what did this candidate say" well and "how do these four differ" badly,
+ *   and the second question is the one a voter arrives with. So the page is
+ *   now a question at a time, with the candidates filed under the answer they
+ *   gave — see QuestionRollCall for the form itself.
+ *
+ * THE ORDER IS THE QUESTIONNAIRE'S
+ *   Sections in the order the questions were asked, everything open. Ranking
+ *   them by how divided the field is would put the interesting ones on top,
+ *   and it would also mean the page reshuffles between wards and between
+ *   visits, so a reader who found something cannot find it again. The
+ *   questionnaire's own topics are a table of contents that holds still.
+ *
+ * THE BALLOT IS NOT HERE
+ *   The cards name candidates in full but do not link them: a campaign link
+ *   per name per question is several hundred outbound links on one page. The
+ *   links live once, in the CandidateRoster beside the section heading, where
+ *   a reader gets the whole ballot before reading thirty cards about it.
+ *
+ * `silent` IS A JUDGEMENT THE PAGE MAKES
+ *   A ward passes its non-respondents in, and every card names them: the
+ *   field is a dozen people and a reader deciding how to vote is owed the
+ *   fact that their ballot line said nothing. The mayoral page passes none,
+ *   because forty-four names under each of thirty-four questions is fifteen
+ *   hundred names saying one thing that the stats row and the roster page
+ *   already say once.
+ */
+
+/** The id a section heading answers to, and the one the rail scrolls at. */
+export function sectionId(stepId: string, prefix?: string): string {
+  return prefix ? `${prefix}-${stepId}` : stepId;
+}
+
+/** The questionnaire's sections, as the scroll rail wants them.
+ *
+ * Sections only. Hanging every question off its section was tried and is
+ * wrong for this rail: a level-3 entry on a memo is three words of a
+ * sub-heading, where a question here is a full sentence — "Should Toronto
+ * permit substantially more housing as-of-right in every ward, including
+ * areas currently dominated by detached and semi-detached homes?" — and
+ * thirty-three of those turn a navigation aid into a second copy of the page
+ * you have to read to navigate.
+ *
+ * The questions still carry their ids, so a deep link into one works and the
+ * rail can be given them later if the case for it changes. */
+export function questionnaireHeadings(
+  groups: ComparedGroup[],
+  { prefix }: { prefix?: string } = {},
+): Heading[] {
+  return groups.map((group) => ({
+    id: sectionId(group.stepId, prefix),
+    text: group.stepTitle,
+    level: 2 as const,
+  }));
+}
+
+export function QuestionnaireCards({
+  groups,
+  respondents,
+  silent,
+  issuesHref,
+  seats,
+  notes = true,
+  yourKey,
+  idPrefix,
+}: {
+  groups: ComparedGroup[];
+  /** the candidates who returned the questionnaire */
+  respondents: GridCandidate[];
+  /** on the ballot, and yet to */
+  silent: GridCandidate[];
+  /** the whole city's answers, where this election has that page */
+  issuesHref?: string;
+  /** the seat each candidate is running for, keyed by candidate key — see
+   *  QuestionRollCall. Only the city-wide page passes one. */
+  seats?: Record<string, Seat>;
+  /** print each candidate's own words about their answer — see
+   *  QuestionRollCall. The city-wide page turns them off. */
+  notes?: boolean;
+  /** the reader's own row, where they have answered the same questionnaire —
+   *  see QuestionRollCall. */
+  yourKey?: string;
+  /** namespaces the section headings' ids. A page showing one questionnaire
+   *  needs none; the survey results show two, a mayoral race and a ward one,
+   *  built from the same question set — without a prefix both would put an
+   *  element called "housing" in the document and the scroll rail would only
+   *  ever find the first. */
+  idPrefix?: string;
+}) {
+  const silentNames = silent.map((candidate) => ({
+    key: candidate.key,
+    name: candidate.name,
+  }));
+
+  return (
+    /* Sections sit well apart. The cards inside one are a gap-4 grid, so a
+       section break that was only a little wider read as another row of the
+       same grid rather than a change of subject. */
+    <div className="grid gap-12">
+      {groups.map((group) => (
+        <section key={group.stepId} className="grid gap-4 scroll-mt-24">
+          {/* The rule that opens a section, on one line. Five headings should
+              not be five screens — but they do have to sit above the question
+              headings inside the cards, which sit above the answer titles
+              inside those, so the three are set a step apart. */}
+          <h2
+            id={sectionId(group.stepId, idPrefix)}
+            className="scroll-mt-24 border-b border-border-light pb-2 font-sans font-medium leading-none tracking-[-0.03em] text-[1.8rem]"
+          >
+            {group.stepTitle}
+          </h2>
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            {group.questions.map((question) => (
+              <QuestionRollCall
+                key={question.questionId}
+                question={question}
+                silent={silentNames}
+                nameTheSilent={respondents.length > 0}
+                headingId={sectionId(question.questionId, idPrefix)}
+                seats={seats}
+                notes={notes}
+                yourKey={yourKey}
+              />
+            ))}
+          </div>
+        </section>
+      ))}
+
+      <WardAnswerNote issuesHref={issuesHref} notes={notes} />
+    </div>
+  );
+}
+
+/* How to read the blocks above. Short, because the form is nearly
+ * self-explanatory now — what it still has to say is what is NOT on the page:
+ * the options nobody picked, and the candidates who are not in any group. */
+function WardAnswerNote({
+  issuesHref,
+  notes,
+}: {
+  issuesHref?: string;
+  notes?: boolean;
+  /** the reader's own row, where they have answered the same questionnaire —
+   *  see QuestionRollCall. */
+  yourKey?: string;
+  /** namespaces the section headings' ids. A page showing one questionnaire
+   *  needs none; the survey results show two, a mayoral race and a ward one,
+   *  built from the same question set — without a prefix both would put an
+   *  element called "housing" in the document and the scroll rail would only
+   *  ever find the first. */
+  idPrefix?: string;
+}) {
+  return (
+    <div className="grid gap-2 border-t border-border-light pt-4">
+      <p className="type-label-sm text-text-muted text-pretty">
+        Candidates are grouped by the answer they gave. Options nobody in this
+        ward picked are not shown, and a candidate who answered in their own
+        words sits on no option.
+        {notes ? " Notes are the candidates’ own words." : ""}
+      </p>
+      {issuesHref && (
+        <Link
+          href={issuesHref}
+          className="type-label-sm inline-flex items-center gap-1.5 text-accent transition-colors hover:text-dark"
+        >
+          How the whole city answered
+          <ArrowRight className="size-3.5" />
+        </Link>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/elections/QuestionnaireRail.tsx b/src/components/elections/QuestionnaireRail.tsx
new file mode 100644
index 00000000..7eb13d14
--- /dev/null
+++ b/src/components/elections/QuestionnaireRail.tsx
@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+
+import { Signpost } from "@/components/custom/signpost";
+import type { Heading } from "@/components/custom/signpost/config";
+
+/**
+ * The memo pages' scroll rail, around a questionnaire.
+ *
+ * WHY THESE PAGES WANT IT
+ *   A questionnaire read is thirty-odd cards in eight or nine titled sections,
+ *   which is memo-length without being a memo: a reader who wants housing has
+ *   to scroll past transit to find out whether they have passed it. The rail
+ *   is the same answer it is on a memo — where am I, what is left, and a way to
+ *   jump — and using the same component means it behaves identically on both,
+ *   rather than being a second thing that looks like the first.
+ *
+ * THE TWO CONTRACTS IT HAS TO HONOUR
+ *   · Every heading in `headings` must exist in the document under that id, or
+ *     the rail lists a section it cannot scroll to. QuestionnaireCards puts the
+ *     ids on for us — see `questionnaireHeadings`, which is the only supported
+ *     way to build the list.
+ *   · Reading progress is measured off `[data-memo-content]`, and the hook
+ *     takes the first one in the document. So this marks the content once, and
+ *     a page must not nest two of these.
+ *
+ * THE COLUMN
+ *   Only at `2xl-memo` (1200px), the same breakpoint the memos use, and below
+ *   it the rail becomes the sticky bar and the content takes the full width.
+ *   The tracker's pages are already padded by their section, so this adds none
+ *   of its own — it divides the width it is handed.
+ */
+export function QuestionnaireRail({
+  headings,
+  children,
+}: {
+  headings: Heading[];
+  children: ReactNode;
+}) {
+  /* Nothing to point at — a rail listing no sections is a 220px hole down the
+     side of the page. */
+  if (headings.length === 0) return <>{children}</>;
+
+  return (
+    <div className="2xl-memo:grid 2xl-memo:grid-cols-[220px_minmax(0,1fr)] 2xl-memo:gap-12">
+      <Signpost headings={headings} showTopBorder={false} />
+      <div data-memo-content className="min-w-0">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/elections/SurveyCta.tsx b/src/components/elections/SurveyCta.tsx
new file mode 100644
index 00000000..ad8e336f
--- /dev/null
+++ b/src/components/elections/SurveyCta.tsx
@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+/* An invitation to answer the same questions the candidates did.
+ *
+ * It sits beside "Know Your Candidates" rather than under it, because it is
+ * the other half of the same idea: the grid says where the candidates stand,
+ * and the only thing that turns that into a decision is where the reader
+ * stands. A reader who has just read a column of answers is the likeliest
+ * person on the site to have an opinion about them.
+ *
+ * Loud on purpose. It was a bordered card in the page's own colours, at the
+ * page's own type size, which is the shape of a footnote: beside a heading set
+ * at three times its weight it read as something already dealt with. So on a
+ * desktop it takes the accent as a fill and the heading as a size — the only
+ * solid block of colour on the page, and the only thing on it that is not
+ * either a question or an answer. On a phone it keeps the same colours at a
+ * smaller size, stacked under the heading, where there is no room for a second
+ * column and nothing to compete with anyway.
+ */
+export function SurveyCta({
+  href,
+  className = "lg:min-w-[380px] lg:max-w-[440px]",
+}: {
+  href: string;
+  /** width and placement, which differ by slot — beside a heading on the
+   *  candidate pages, filling a panel or centred on the landing page */
+  className?: string;
+}) {
+  return (
+    <Link
+      href={href}
+      className={`group/cta block border-2 border-dark bg-accent p-6 text-bg transition-colors hover:bg-dark lg:p-8 ${className}`}
+    >
+      <p className="type-label text-bg/70">Voter survey</p>
+
+      <p className="mt-3 font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[1.75rem] lg:text-[2.125rem] text-balance">
+        Where do you stand?
+      </p>
+
+      <p className="mt-3 font-serif text-[1.05rem] leading-[1.4] text-bg/85 text-pretty">
+        Answer the same questions we put to the candidates and see who lines up
+        with you.
+      </p>
+
+      {/* A button rather than a link with an arrow: the card is the control,
+          and this is what says so at a glance. */}
+      <span className="type-button mt-5 inline-flex items-center gap-2 bg-bg px-5 py-3 text-dark">
+        Take the survey
+        <ArrowRight className="size-3.5 transition-transform group-hover/cta:translate-x-0.5" />
+      </span>
+    </Link>
+  );
+}
diff --git a/src/components/elections/SurveyGrid.tsx b/src/components/elections/SurveyGrid.tsx
new file mode 100644
index 00000000..cbf4d3e0
--- /dev/null
+++ b/src/components/elections/SurveyGrid.tsx
@@ -0,0 +1,755 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { CSSProperties } from "react";
+import { ArrowUpRight, ChevronDown } from "lucide-react";
+
+import { WedgeGlyph, palette } from "@/components/charts/trilemma";
+import { AnswerChart, isDial, sharedRadius } from "./AnswerChart";
+import { CandidateSiteLink } from "./CandidateSiteLink";
+import { lastName } from "@/lib/elections/names";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import type {
+  AnswerCell,
+  ComparedGroup,
+  ComparedQuestion,
+} from "@/lib/elections/candidate-answers";
+
+/* A ward's questionnaire, read across: one row per question, one column per
+ * candidate.
+ *
+ * WHY NOT PER CANDIDATE
+ *   The answers used to live on each candidate's card, in full — the question,
+ *   the option they picked, every alternative in its own wording, a dial of the
+ *   field's split, their note. That is the right shape for one candidate and it
+ *   does not survive being repeated: one respondent ran a ward page to nineteen
+ *   screens, and a ward with four would have run to sixty. Worse, the thing a
+ *   voter is on the page to do — hold two candidates against each other on a
+ *   question — meant scrolling between cards a screen apart and remembering
+ *   what the first one said.
+ *
+ *   Read across, the comparison is the layout. Two candidates who agree show
+ *   as the same glyph in the same colour side by side; a row of three different
+ *   colours is a question the ward is split on, visible without reading a word
+ *   of it.
+ *
+ * WHAT A CLOSED ROW SHOWS
+ *   The question, and each candidate's pick as its wedge glyph and the head of
+ *   the option's wording. Not the full option — a row has a column's width for
+ *   it, and "Permit substantially more housing as-of-right in every ward" does
+ *   not go there. The head is enough to tell the options apart, and the full
+ *   wording is one click away, which is where the option list, the field's
+ *   chart and the candidates' own notes are too.
+ *
+ *   Nothing is hidden by default: every question on the questionnaire is a row
+ *   on the page, answered or not. An empty cell is a finding.
+ *
+ * ON A PHONE
+ *   There is no width for a column per candidate, and a table that scrolls
+ *   sideways puts the answers off screen behind the questions — the one thing
+ *   the reader came for. So the row stops being a row: the question, then a
+ *   line per candidate, each naming who it belongs to. The comparison survives
+ *   because the answers are still gathered under their question; only the
+ *   direction changes.
+ *
+ * COLOUR
+ *   Option position, from the chart palette's corner hues — the first option is
+ *   the same colour on all thirty-odd questions, and the same colour it has on
+ *   the survey page's charts. That is what lets a column be scanned for
+ *   "always the first option" without reading the labels.
+ */
+
+/** A column of the grid: one candidate on the ballot, answered or not. */
+export type GridCandidate = {
+  key: string;
+  name: string;
+  website?: string;
+  /** a line about who they are, where we have one — hand-maintained, and for
+   *  most of a ballot we do not */
+  bio?: string;
+};
+
+export function SurveyGrid({
+  groups,
+  candidates,
+  election,
+  race = "councillor",
+  ward,
+  wardName,
+  yourKey,
+}: {
+  groups: ComparedGroup[];
+  /** every candidate on this ballot, in the order the clerk lists them —
+   *  not only the ones who wrote back */
+  candidates: GridCandidate[];
+  /** York Factory election slug, for the outbound-link tracking */
+  election: string;
+  /** which ballot line these candidates are on, for the same tracking */
+  race?: "mayor" | "councillor" | "trustee";
+  /** the ward, where the race has one — a mayoral field does not */
+  ward?: string;
+  wardName?: string;
+  /**
+   * The column that is the reader's own, where the grid has one. It is a
+   * column like any other to look at, and no part of any count: the tallies
+   * under each question are how the ward's candidates answered, and folding
+   * the reader into them would have them agreeing with themselves.
+   */
+  yourKey?: string;
+}) {
+  /* The column heads are as tall as the longest name plus its link, which is
+     not a number this component can know: it depends on the names, the column
+     width and the reader's font size. The section titles park directly under
+     the heads, so the offset they stick at is measured rather than guessed —
+     a hardcoded height was fine when a head was a name on two short lines and
+     is not fine now that it carries a full name and a campaign link. */
+  const head = useRef<HTMLDivElement>(null);
+  const [headHeight, setHeadHeight] = useState<number | null>(null);
+  useEffect(() => {
+    const el = head.current;
+    if (!el) return;
+    const measure = () => setHeadHeight(el.getBoundingClientRect().height);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const questions = groups.flatMap((group) => group.questions);
+
+  /* The columns by key, so a stacked answer can name its candidate the way
+     the column heads do — in full, and linked where there is a campaign site.
+     A phone has no heads to carry that, and a surname on its own was the one
+     place the two layouts said different things about the same candidate. */
+  const roster = new Map(candidates.map((candidate) => [candidate.key, candidate]));
+
+  /* Who wrote back. Every question's cells carry it, and they all agree — the
+     first question is as good a witness as any. */
+  const responded = new Set(
+    questions[0]?.cells.filter((cell) => cell.responded).map((cell) => cell.key),
+  );
+  // One radius for every dial behind every row, so the expanded charts stay
+  // comparable with each other and with the ones on the survey page.
+  const radius = sharedRadius(questions);
+
+  /* Columns: the question takes the room it needs to stay readable and the
+     candidates split what is left evenly, down to a floor.
+
+     The floor is what makes this scroll sideways, and it is not optional now
+     that the columns are the whole ballot rather than the handful who wrote
+     back: a Toronto ward runs to a dozen registered candidates, and twelve
+     columns sharing a laptop's width are 80px each — a column too narrow to
+     print a surname, let alone an answer. Better to hold every column at a
+     readable width and let the reader drag.
+
+     230px a candidate, which is about 30 characters of the answer type: a
+     column that breaks a two-word option over two lines is still squeezed,
+     and the reader is dragging either way — the only thing a tighter floor
+     buys is a couple of extra columns on screen, each of them harder to
+     read.
+
+     The ceiling stays too: it keeps a ward of one respondent from setting its
+     single column adrift at the right-hand edge of a very wide page — the grid
+     grows with the number of candidates rather than with the window. */
+  const columns = `minmax(0,1.6fr) repeat(${candidates.length}, minmax(0,1fr))`;
+
+  /* The widths and the pinning offset ride on custom properties so the
+     breakpoint can decide whether they apply at all: below `md` the grid is
+     not a grid — the answers stack and name their own candidate — so a floor
+     meant for columns would only push the page off the side of the screen. */
+  const vars = {
+    "--cols": columns,
+    "--grid-min": `${368 + candidates.length * 230}px`,
+    "--grid-max": `${640 + candidates.length * 260}px`,
+    /* Where the section titles park: the measured height of the head row, or
+       nothing at all before the first measurement and on a phone, where the
+       heads are not rendered and nothing sticks. */
+    "--head-h": headHeight === null ? "0px" : `${headHeight}px`,
+  } as CSSProperties;
+
+  return (
+    /* A scroll region of its own on wide screens. It is what carries the
+       sideways scroll the column floor forces, and it is also the only thing
+       the heads and section titles can pin to: `position: sticky` resolves
+       against the nearest scrolling ancestor, and an `overflow-x` on its own
+       would make this that ancestor anyway — the axes cannot be separated.
+       Capped just under the viewport so the pinned rows sit at the top of the
+       box while the questions run under them. Below `md` the grid is not a
+       grid, every answer names its own candidate, and the cap, the floor and
+       the scrolling all go away. */
+    /* `min-w-0` matters as much as the overflow does: as a grid or flex item —
+       which is how the survey page's results place it — this box would
+       otherwise be sized to its own content's minimum, which is the whole
+       twelve-thousand-pixel width of the columns. It would then push its
+       parent wide instead of scrolling inside it, and the scrollbar this box
+       exists for would never appear. */
+    <div
+      className="min-w-0 max-w-full md:max-h-[calc(100vh-6rem)] md:overflow-auto"
+      style={vars}
+    >
+      <div className="md:[max-width:var(--grid-max)] md:[min-width:var(--grid-min)]">
+        {/* What a phone gets instead of column heads.
+
+            Stacked, there are no columns to head, and for a while that meant
+            the ballot appeared on a phone only as surnames scattered through
+            thirty questions: no full names, no campaign links, and no way to
+            see who is running without reading the whole questionnaire. So the
+            roster is printed once, at the top, in the order the columns take —
+            answered first, then the rest — with the same names and the same
+            links the heads carry. */}
+        <ul className="grid list-none gap-2 border-b-2 border-dark pb-4 m-0 p-0 md:hidden">
+          {candidates.map((candidate) => (
+            <li key={candidate.key} className="grid gap-0.5">
+              <span className="flex items-baseline justify-between gap-3">
+                <CandidateName
+                  candidate={candidate}
+                  election={election}
+                  race={race}
+                  ward={ward}
+                  wardName={wardName}
+                />
+                <span className="type-caption flex-none text-text-muted">
+                  {responded.has(candidate.key) ? "Answered" : "Did not respond"}
+                </span>
+              </span>
+              {/* The bio row's job on a phone, where there are no columns to
+                  put a row across. */}
+              {candidate.bio && (
+                <span className="font-serif text-[0.95rem] leading-[1.4] text-text-secondary text-pretty">
+                  {candidate.bio}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+
+        {/* The column heads, once, at the top of the grid and pinned there.
+            They were repeated per section on the reasoning that a reader
+            arriving in the middle of a page needs to know whose column is
+            whose — which is true, and is the job of a sticky header rather
+            than of five copies of one. */}
+        <div
+          ref={head}
+          className="hidden items-end gap-x-4 gap-y-1 border-b border-dark bg-bg pt-1 pb-2 md:sticky md:top-0 md:z-20 md:grid md:[grid-template-columns:var(--cols)]"
+        >
+          {/* The question column pins to the left edge as well as the top, so
+              the corner cell has to sit above its own row's other cells —
+              which come after it in the DOM and would otherwise paint over
+              it — while the row as a whole stays above the grid. It fills the
+              row's height and steps out into the column gutter for the same
+              reason the question cells below it do: the names are two lines
+              deep and were sliding past above a label one line tall. */}
+          <span className="type-label-sm flex items-end bg-bg text-text-muted md:sticky md:left-0 md:z-[1] md:-mr-4 md:h-full md:pr-4">
+            Question
+          </span>
+          {candidates.map((candidate) => (
+            <span key={candidate.key} className="grid gap-0.5">
+              <CandidateName
+                candidate={candidate}
+                election={election}
+                race={race}
+                ward={ward}
+                wardName={wardName}
+              />
+            </span>
+          ))}
+        </div>
+
+        {/* Who they are, in their own column, once.
+
+            A row rather than a section of its own or a line inside the head:
+            under the column is where a bio belongs — it is about that
+            candidate and nothing else — and the head is a sticky bar whose
+            height every section title is measured against, so a sentence in it
+            would push the whole grid down for as long as the page is open.
+
+            The row appears only where somebody has a bio, and cells for the
+            candidates without one are left blank rather than filled with a
+            dash: we have nothing to say about them, which is not the same as
+            them having nothing to say. */}
+        {candidates.some((candidate) => candidate.bio) && (
+          <div className="hidden gap-x-4 border-b border-border-light py-3 md:grid md:[grid-template-columns:var(--cols)]">
+            <span className="type-label-sm bg-bg text-text-muted md:sticky md:left-0 md:z-[1] md:-mr-4 md:h-full md:pr-4">
+              About
+            </span>
+            {candidates.map((candidate) => (
+              <span
+                key={candidate.key}
+                className="font-serif text-[0.95rem] leading-[1.4] text-text-secondary text-pretty"
+              >
+                {candidate.bio}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {groups.map((group) => (
+          <section key={group.stepId} className="mt-10 first:mt-3 last:mb-0">
+            {/* The section rule needs air on both sides of the title: above it
+                so the heavy line reads as the start of a section rather than
+                as the bottom of the last row of the previous one, and below it
+                so the title is not sitting on the first question's hairline.
+
+                It sticks under the column heads, so a reader thirty rows into
+                a section can still see which part of the questionnaire they
+                are in — the same argument that pinned the names. The air above
+                it is margin rather than padding on purpose: the rule is the
+                element's own top edge, so when the title parks under the heads
+                there is no transparent band for rows to show through. */}
+            <h4 className="border-t-2 border-dark bg-bg pt-3.5 pb-2.5 font-sans font-medium leading-[1.15] tracking-[-0.025em] text-[clamp(1.3rem,2vw,1.6rem)] text-dark md:sticky md:top-[var(--head-h)] md:z-10">
+              {/* The heading is as wide as the grid, so its background covers
+                  the row however far it is scrolled; the words themselves ride
+                  the left edge, where the question column is. */}
+              <span className="md:sticky md:left-0 md:inline-block">
+                {group.stepTitle}
+              </span>
+            </h4>
+
+            {group.questions.map((question) => (
+              <QuestionRow
+                key={question.questionId}
+                question={question}
+                radius={radius}
+                roster={roster}
+                yourKey={yourKey}
+                election={election}
+                race={race}
+                ward={ward}
+                wardName={wardName}
+              />
+            ))}
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A candidate's name, and where they have a campaign site the name is the way
+ * to it — a name is what a reader is looking for and what they will click, and
+ * "Campaign site" on a line of its own spent a second line of a narrow column
+ * saying so. The arrow is the whole tell that a name is a link, so it only
+ * appears where there is somewhere to go.
+ *
+ * Shared by the column heads, the roster a phone gets instead of them, and the
+ * list of candidates who never wrote back, so the three cannot drift apart.
+ */
+export function CandidateName({
+  candidate,
+  election,
+  race,
+  ward,
+  wardName,
+}: {
+  candidate: GridCandidate;
+  election: string;
+  race: "mayor" | "councillor" | "trustee";
+  ward?: string;
+  wardName?: string;
+}) {
+  const type =
+    "font-sans text-[1rem] font-medium leading-[1.15] tracking-[-0.015em] text-dark text-balance";
+
+  if (!candidate.website) return <span className={type}>{candidate.name}</span>;
+
+  return (
+    <CandidateSiteLink
+      href={candidate.website}
+      candidate={candidate.name}
+      candidateKey={candidate.key}
+      election={election}
+      race={race}
+      ward={ward}
+      wardName={wardName}
+      className={`group/site transition-colors hover:text-accent ${type}`}
+    >
+      {candidate.name}
+      <ArrowUpRight className="ml-1 inline size-3 align-[1px] transition-transform group-hover/site:translate-x-0.5 group-hover/site:-translate-y-0.5" />
+    </CandidateSiteLink>
+  );
+}
+
+function QuestionRow({
+  question,
+  radius,
+  roster,
+  yourKey,
+  election,
+  race,
+  ward,
+  wardName,
+}: {
+  question: ComparedQuestion;
+  radius?: number;
+  /** the columns by key, for the names a phone prints beside each answer */
+  roster: Map<string, GridCandidate>;
+  /** the reader's own column, kept out of the counts */
+  yourKey?: string;
+  election: string;
+  race: "mayor" | "councillor" | "trustee";
+  ward?: string;
+  wardName?: string;
+}) {
+  const full = palette(question.options.length);
+
+  return (
+    <Collapsible className="border-t border-border-light">
+      {/* The whole row is the control, so a reader does not have to find a
+          disclosure arrow in a grid of thirty-odd of them. */}
+      <CollapsibleTrigger className="group flex w-full flex-col items-start gap-5 py-3 text-left transition-colors md:grid md:items-start md:gap-x-4 md:gap-y-0 md:[grid-template-columns:var(--cols)]">
+        {/* Pinned to the left edge: a reader dragging sideways to reach the
+            twelfth candidate is doing it to read that candidate's answer to a
+            particular question, and an answer whose question has scrolled off
+            the screen is an answer to nothing. Opaque, so the answers pass
+            underneath it, and it carries the row's hover state itself — a
+            sticky cell has its own background and would otherwise stay
+            unhighlighted while the rest of its row lit up — which is why the
+            row no longer fills on hover at all: the mark of the pointer is on
+            the question itself, where the disclosure arrow already is.
+
+            Full height and a step out into the column gap, because the cover
+            has to be the size of what it covers: sized to its own text, the
+            pinned cell let the taller answers beside it slide past above and
+            below the question, and the 1rem gutter let a sliver through.
+
+            Stacked on a phone it pins to the top instead, under the site's
+            nav, and holds there for as long as its own answers run. A row is
+            one question and a dozen replies to it; scrolled a screen into
+            them, a reader was reading answers to a question that had left the
+            screen — the same failure the left-hand pin fixes on a desktop,
+            turned ninety degrees. It lets go at the end of its row, because
+            sticky only holds within its own box, so the next question takes
+            over rather than stacking up behind it. */}
+        <span className="sticky top-[4.75rem] z-[2] flex w-full items-start gap-2 bg-bg py-1.5 pr-4 md:left-0 md:top-auto md:z-[1] md:-mr-4 md:h-full md:py-0">
+          <ChevronDown
+            className="mt-[3px] size-3.5 flex-none text-text-muted transition-[transform,color] group-hover:text-accent group-data-[panel-open]:rotate-180"
+            aria-hidden="true"
+          />
+          {/* The question is set exactly as the answers beside it — same
+              family, size, weight and measure. A row is one sentence and the
+              replies to it, and typing the question in serif at a smaller size
+              made it read as a caption for its own answers rather than as the
+              first cell of the row. */}
+          <span className="font-sans text-[1.2rem] font-medium leading-[1.3] tracking-[-0.015em] text-dark text-pretty transition-colors group-hover:text-accent">
+            {question.question}
+          </span>
+        </span>
+
+        {/* On a phone a candidate who never wrote back is dropped from every
+            question rather than repeating "Did not respond" down thirty rows
+            of a single column — the roster at the top of the grid has already
+            said so once, which is the right number of times. `contents` keeps
+            the wrapper out of the grid's way where the columns do exist. */}
+        {question.cells.map((cell) => (
+          <span
+            key={cell.key}
+            className={cell.responded ? "contents" : "hidden md:contents"}
+          >
+            <Cell
+              cell={cell}
+              colors={full}
+              candidate={roster.get(cell.key)}
+              election={election}
+              race={race}
+              ward={ward}
+              wardName={wardName}
+            />
+          </span>
+        ))}
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <QuestionDetail
+          question={question}
+          radius={radius}
+          yourKey={yourKey}
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+/**
+ * One candidate's answer to one question, at row width: the option's wedge,
+ * the head of its wording, and whatever they wrote about it.
+ *
+ * The note goes in the column, under the answer it is about, rather than
+ * waiting behind the row's disclosure. It is the part of a questionnaire a
+ * candidate actually wrote, and a reader comparing three candidates on a
+ * question wants the three sentences side by side — which is exactly what a
+ * grid is for, and exactly what a disclosure per row prevents. Everything a
+ * candidate wrote prints in full — the option they picked, any answer in
+ * their own wording, and the note — because a truncated answer is a different
+ * answer. A long note makes its row taller; that is the cost of printing what
+ * was said, and it is the right one.
+ *
+ * The name rides along, hidden wherever the column heads carry it. Stacked on a
+ * phone there are no heads, and an answer that does not say whose it is on a
+ * page comparing several candidates is worse than no answer.
+ */
+function Cell({
+  cell,
+  colors,
+  candidate,
+  election,
+  race,
+  ward,
+  wardName,
+}: {
+  cell: AnswerCell;
+  colors: string[];
+  /** their column, for the name a phone prints above the answer */
+  candidate?: GridCandidate;
+  election: string;
+  race: "mayor" | "councillor" | "trustee";
+  ward?: string;
+  wardName?: string;
+}) {
+  const answer = cell.answer;
+
+  /* Stacked on a phone the name leads its own line rather than sharing a
+     baseline with the answer: an option runs to a sentence, and a name tucked
+     in front of one reads as the first words of it. It is the same name the
+     column heads print — in full, and linked to their campaign site where they
+     have one — because a reader on a phone is owed what a reader on a laptop
+     gets. Above `md` the heads carry it and this is not rendered at all. */
+  const name = (
+    <span className="md:hidden">
+      {candidate ? (
+        <CandidateName
+          candidate={candidate}
+          election={election}
+          race={race}
+          ward={ward}
+          wardName={wardName}
+        />
+      ) : (
+        <span className="type-caption text-text-muted">
+          {lastName(cell.candidateName)}
+        </span>
+      )}
+    </span>
+  );
+
+  /* Answers sit under their question on a phone, indented and ruled, so a
+     screen of them reads as replies to the question above rather than as more
+     questions. In the grid the columns do that job and the rule would only be
+     a line down the middle of a row.
+
+     They also stand well apart from each other. Stacked, the only thing
+     separating one candidate's answer from the next is white space, and at a
+     tight gap four candidates read as one long paragraph with names in it —
+     the row's own gap does most of that work, and the block holds together
+     because its name, option and note are closer to each other than the block
+     is to its neighbours. */
+  const wrap =
+    "grid gap-1.5 border-l border-border-light pl-4 md:gap-1 md:border-0 md:pl-0";
+
+  /* The answer type steps down on a phone. In the grid it matches the
+     question exactly — one row, one voice — but stacked, a question and its
+     answers in the same size is a wall with no way in. */
+  const optionType =
+    "font-sans text-[1.05rem] md:text-[1.2rem] font-medium leading-[1.3] tracking-[-0.015em]";
+
+  /* Two different silences, and the difference matters to a voter: one
+     candidate answered our questionnaire and left this question alone, the
+     other never wrote back at all. The second is about them rather than about
+     the question, so it says so in as many words. */
+  if (!answer) {
+    return (
+      <span className={wrap}>
+        {name}
+        <span className={`${optionType} text-text-muted`}>
+          {cell.responded ? "Not answered" : "Did not respond"}
+        </span>
+      </span>
+    );
+  }
+
+  /* Their note, and — where their answer was prose of its own — the answer
+     itself, which is the only wording they gave and so belongs in the column
+     rather than being summarised as "in their own words". */
+  const said = (
+    <>
+      {answer.verbatim && answer.answer && (
+        <span className="font-serif text-[1.2rem] leading-[1.45] text-dark text-pretty">
+          &ldquo;{answer.answer}&rdquo;
+        </span>
+      )}
+      {answer.explanation && (
+        <span className="font-serif text-[1.08rem] leading-[1.5] text-text-secondary">
+          {answer.explanation}
+        </span>
+      )}
+    </>
+  );
+
+  if (answer.choice === null) {
+    return (
+      <span className={wrap}>
+        {name}
+        <span className={`${optionType} text-text-secondary`}>
+          In their own words
+        </span>
+        {said}
+      </span>
+    );
+  }
+
+  return (
+    <span className={wrap}>
+      {name}
+      <span className="flex items-start gap-2">
+        <span className="mt-[3px] flex-none">
+          <WedgeGlyph
+            index={answer.choice}
+            count={answer.options.length}
+            color={colors[answer.choice]}
+          />
+        </span>
+        {/* The option in the wording it was offered in. It used to take the
+            rim label's stub — the short form that exists so three options can
+            sit around a circle — and a stub is not an answer: "Decrease after
+            inflation…" and "Decrease after inflation, with some
+            responsibilities transferred to civilian services" are different
+            positions, and the ellipsis was standing where the difference was.
+            The column wraps instead. */}
+        <span className={`${optionType} text-dark text-pretty`}>
+          {answer.options[answer.choice]}
+        </span>
+      </span>
+      {said}
+    </span>
+  );
+}
+
+/**
+ * The row opened up: the options in the wording the questionnaire offered
+ * them, what each one actually says, and how many of the ward's respondents
+ * picked it.
+ *
+ * Not a second copy of the row. It used to be one — the same candidates, the
+ * same notes, the same wording, pivoted from by-candidate to by-option — which
+ * was worth opening back when the row above showed a stub of the option and
+ * four lines of the note. The row prints all of it now, so what is left in
+ * here is the part a grid of answers cannot carry:
+ *
+ *   · the fine print. Several options are a headline plus a sentence of
+ *     detail, and the cells have room for the headline only.
+ *   · the options nobody picked. A cell can only show a position someone
+ *     took; that a whole ward declined one is a finding of its own, and it
+ *     only exists as an empty row in a list of every option.
+ *   · the count, as a shape. Twelve cells tallied by eye against a dial that
+ *     does the tallying.
+ */
+function QuestionDetail({
+  question,
+  radius,
+  yourKey,
+}: {
+  question: ComparedQuestion;
+  radius?: number;
+  /** the reader's own column, which is nobody's candidate */
+  yourKey?: string;
+}) {
+  const full = palette(question.options.length);
+
+  /* The candidates, which on the survey page is every column but the reader's
+     own. Everything below counts these and only these. */
+  const field = question.cells.filter((cell) => cell.key !== yourKey);
+  const answered = field.filter((cell) => cell.answer);
+
+  /* Respondents, not candidates: nobody can pick an option on a form they did
+     not fill in, and counting the silent ones in the denominator would make
+     every option look less popular than the answers say it is. */
+  const respondents = field.filter((cell) => cell.responded).length;
+
+  /* The dial draws this ward on this question, not the election. It was the
+     whole field's split — thirty-odd respondents — sitting beside the ward's
+     four, which put two different populations a centimetre apart under one
+     question and left the reader to notice that the numbers could not be
+     compared. The page is a ward page: the candidates on this ballot are the
+     subject, and the chart should have the same subject as everything around
+     it. */
+  const wardCounts = question.options.map(
+    (_, i) => answered.filter((cell) => cell.answer?.choice === i).length,
+  );
+
+  return (
+    /* Held to a reading width and pinned to the left edge, rather than being
+       laid out across the grid.
+
+       An opened row is a child of the grid's inner wrapper, which is as wide
+       as every column put together — 12,000px on a mayoral field of fifty-odd.
+       Left to fill that, an option list and a dial were stretched across a
+       dozen screens of nothing, and a reader who had dragged sideways to reach
+       a column found the detail they opened somewhere off to the left. It is
+       one block about one question; it does not get wider because the ballot
+       did. */
+    <div className="grid gap-8 pb-7 pt-1 md:sticky md:left-0 md:w-[min(100%,58rem)] lg:grid-cols-[minmax(0,1fr)_minmax(0,380px)] lg:gap-10">
+      {/* Every option in full, in the order they were offered — including the
+          ones nobody took. The rule down the left carries the option's hue on
+          the three-way questions, which is what ties this list to the dial
+          beside it and to the wedge glyphs in the cells above; the ordered
+          questions keep a neutral rule, since their options are points on a
+          scale rather than three rivals. */}
+      <ul className="grid content-start list-none gap-2.5 m-0 p-0">
+        {question.options.map((option, i) => (
+          <li
+            key={option}
+            className={`grid gap-1 border-l-2 pl-3 ${
+              isDial(question) ? "" : "border-border-light"
+            }`}
+            style={isDial(question) ? { borderColor: full[i] } : undefined}
+          >
+            <div className="flex items-baseline gap-3">
+              <span className="flex-1 font-serif text-[1rem] leading-[1.35] text-dark text-pretty">
+                {option}
+                {question.details[i] && (
+                  <span className="text-text-secondary">
+                    : {question.details[i]}
+                  </span>
+                )}
+              </span>
+              <span className="type-caption flex-none tabular-nums text-text-secondary">
+                {wardCounts[i]} of {respondents}
+              </span>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      <div className="grid content-start gap-2">
+        {/* The ward's split, all three thirds in their own colour: nobody's
+            position is being picked out here, so muting two of them would say
+            something the chart does not mean.
+
+            Counts rather than shares. A ward has two to six respondents, and
+            "50%" of four people is a statistic with nothing behind it — the
+            same reason the list beside it prints "2 of 4". */}
+        <AnswerChart
+          shape={question}
+          counts={wardCounts}
+          choice={null}
+          colors={full}
+          valueColors={full}
+          fieldSize={respondents}
+          radius={radius}
+          valueFormat={(n) => `${n}`}
+          ariaLabel={`${question.question} — how the ward's ${respondents} responding candidates answered: ${question.options
+            .map((option, i) => `${option} ${wardCounts[i]}`)
+            .join(", ")}`}
+        />
+        <p className="type-caption text-center text-text-secondary text-pretty">
+          Candidates in this ward who picked each option, out of the{" "}
+          {respondents} who returned the questionnaire
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/elections/WardDetail.tsx b/src/components/elections/WardDetail.tsx
index b9df38ad..cb61108d 100644
--- a/src/components/elections/WardDetail.tsx
+++ b/src/components/elections/WardDetail.tsx
@@ -3,7 +3,22 @@ import Image from "next/image";
 import type { ReactNode } from "react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import CountdownDays from "./CountdownDays";
+import { CandidateRoster } from "./CandidateRoster";
+import {
+  QuestionnaireCards,
+  questionnaireHeadings,
+} from "./QuestionnaireCards";
+import { QuestionnaireRail } from "./QuestionnaireRail";
+import { SurveyCta } from "./SurveyCta";
 import { IncumbentBadge, SiteLink } from "./ElectionLanding";
+import {
+  comparedQuestions,
+  surveyRoster,
+} from "@/lib/elections/candidate-answers";
+import type {
+  CandidateAnswers,
+  ComparedGroup,
+} from "@/lib/elections/candidate-answers";
 import { daysUntil } from "@/lib/elections/dates";
 import type { SupportedElection } from "@/lib/elections/registry";
 import type {
@@ -27,6 +42,8 @@ export function WardDetail({
   nominationCloseLabel,
   wardMapDefs,
   wardMap,
+  surveyAnswers,
+  surveyShape,
 }: {
   election: SupportedElection;
   data: WardDetailData;
@@ -36,6 +53,19 @@ export function WardDetail({
   wardMapDefs?: ReactNode;
   /** this region's locator map for this ward, when it has ward geometry */
   wardMap?: ReactNode;
+  /**
+   * Published questionnaire answers for this ward's candidates, keyed by
+   * `nameKey`. A candidate with no entry simply shows no answers — for most of
+   * the campaign that is most of them.
+   */
+  surveyAnswers?: Record<string, CandidateAnswers>;
+  /**
+   * The questionnaire's questions with nobody's answers on them, used where a
+   * ward's whole field stayed quiet — there are no returned questionnaires to
+   * read the questions off, and a ward of non-respondents still deserves to
+   * show which questions they did not answer.
+   */
+  surveyShape?: ComparedGroup[];
 }) {
   const { ward, wards, councilRaces, trusteeRaces } = data;
   const idx = wards.findIndex((w) => w.number === ward.number);
@@ -43,9 +73,27 @@ export function WardDetail({
   const next = wards[(idx + 1) % wards.length];
 
   // With one council race the heading would only repeat the page title, so the
-  // candidates run straight down — which is how Toronto's page has always read.
+  // grid runs straight under it — which is how Toronto's page has always read.
   const showRaceHeadings = councilRaces.length > 1;
 
+  /* The whole council ballot, and the part of it that wrote back.
+
+     The questionnaire grid is the ward's candidate list now — there is no
+     separate roster of cards above it to agree or disagree with. So its
+     columns are every candidate still standing, and one we never heard from is
+     a column that says exactly that, which is more use to a voter than a name
+     quietly left out of the comparison.
+
+     Withdrawn candidates are the exception, and are dropped: they cannot be
+     voted for, so a column of theirs is a column of a ballot line that does
+     not exist, and in a grid this wide every column costs the reader a drag. */
+  const councilCandidates = councilRaces
+    .flatMap((race) => race.candidates)
+    .filter((candidate) => !candidate.withdrawn);
+  const respondents = councilCandidates.filter(
+    (candidate) => surveyAnswers?.[candidate.key],
+  );
+
   return (
     <div className={`${election.themeClass ?? ""} bg-bg text-dark`}>
       <div className="mx-[10px] my-[10px] border border-border-light bg-bg overflow-x-clip">
@@ -108,48 +156,72 @@ export function WardDetail({
           </div>
         </section>
 
-        {/* ── Council candidates ─────────────────────────────── */}
-        <section>
-          <div className="px-6 md:px-14 pt-11 pb-2">
-            <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.75rem,3vw,2.5rem)]">
-              Candidates
-            </h2>
+        {/* ── Questionnaire ──────────────────────────────────── */}
+        <section id="questionnaire">
+          {/* The heading, what it amounts to, and the ballot it is about —
+              one column, with the survey beside it. The ballot used to sit in
+              a band of its own under this one, which left the heading's column
+              as a line of type and a sentence against a survey card three
+              times its height: a rectangle of nothing exactly where the names
+              a reader came for should have been. */}
+          <div className="px-6 md:px-14 pt-11 pb-7 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start lg:gap-12">
+            <div className="grid content-start gap-5">
+              <h2 className="font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[clamp(1.75rem,3vw,2.5rem)] max-w-[24ch] text-balance">
+                Know Your Candidates
+              </h2>
+              {/* Only the empty states get a sentence. Where candidates have
+                  answered, the roster underneath names both halves of the
+                  ballot — "2 of 11 answered" was the same count, spelled out,
+                  immediately above the list it was counting. */}
+              {respondents.length === 0 && (
+                <p className="font-serif text-[1.08rem] leading-[1.5] text-dark/85 max-w-[64ch] text-pretty">
+                  {councilCandidates.length === 0
+                    ? "No one has registered in this ward yet."
+                    : "Nobody in this ward has answered yet. These are the questions we asked."}
+                </p>
+              )}
+              {councilCandidates.length > 0 && (
+                <CandidateRoster
+                  respondents={respondents}
+                  silent={councilCandidates.filter(
+                    (candidate) => !surveyAnswers?.[candidate.key],
+                  )}
+                  election={election.slug}
+                  race="councillor"
+                  ward={ward.n}
+                  wardName={ward.name}
+                />
+              )}
+            </div>
+
+            <SurveyCta href={`${election.basePath}/survey`} />
           </div>
 
-          {councilRaces.length === 0 && (
+          {councilCandidates.length === 0 ? (
             <EmptyRace
               wardName={ward.name}
               nominationCloseLabel={nominationCloseLabel}
             />
+          ) : (
+            councilRaces.map((race) => (
+              <RaceQuestionnaire
+                key={race.id}
+                race={race}
+                surveyAnswers={surveyAnswers}
+                surveyShape={surveyShape}
+                showHeading={showRaceHeadings}
+                issuesHref={`${election.basePath}/issues`}
+              />
+            ))
           )}
 
-          {councilRaces.map((race) => (
-            <div key={race.id}>
-              {showRaceHeadings && <RaceHeading race={race} />}
-              {race.candidates.length === 0 ? (
-                <EmptyRace
-                  wardName={ward.name}
-                  nominationCloseLabel={nominationCloseLabel}
-                />
-              ) : (
-                race.candidates.map((cand) => (
-                  <CouncilCandidate
-                    key={cand.key}
-                    candidate={cand}
-                    election={election.slug}
-                    ward={ward.n}
-                    wardName={ward.name}
-                  />
-                ))
-              )}
-            </div>
-          ))}
-
-          <p className="px-6 md:px-14 py-4 type-label-sm text-text-muted border-t border-border-light">
-            Registered candidates from the City Clerk&rsquo;s list. The field is
-            not final until nominations close
-            {nominationCloseLabel ? ` on ${nominationCloseLabel}` : ""}.
-          </p>
+          <div className="px-6 md:px-14 py-4 border-t border-border-light grid gap-2.5">
+            <p className="type-label-sm text-text-muted">
+              Registered candidates from the City Clerk&rsquo;s list, less
+              anyone who has withdrawn. The field is not final until nominations
+              close{nominationCloseLabel ? ` on ${nominationCloseLabel}` : ""}.
+            </p>
+          </div>
         </section>
 
         {/* ── School board races ─────────────────────────────── */}
@@ -215,6 +287,83 @@ export function WardDetail({
   );
 }
 
+/**
+ * One race's questionnaire, question by question.
+ *
+ * One per race rather than one for the ward, because a ward can elect more
+ * than one councillor — Brampton's wards elect a city and a regional
+ * councillor — and two rival fields read together would compare candidates who
+ * are not running against each other.
+ *
+ * A race nobody answered has no questions to draw, since the questions come
+ * from the returned questionnaires. That case still names the candidates: they
+ * are on the ballot, and the page is now the only place that says so.
+ */
+function RaceQuestionnaire({
+  race,
+  surveyAnswers,
+  surveyShape,
+  showHeading,
+  issuesHref,
+}: {
+  race: RaceView;
+  surveyAnswers?: Record<string, CandidateAnswers>;
+  surveyShape?: ComparedGroup[];
+  showHeading: boolean;
+  issuesHref?: string;
+}) {
+  /* Two lists, not one. The candidates who wrote back are the ones the
+     questions can group, and the rest are named beside them — a reader can
+     still see everyone on their ballot and go to their site, without a
+     ward's dozen registrants turning thirty questions into three hundred
+     cells of "did not respond". */
+  const roster = surveyRoster(
+    race.candidates.map((candidate) => ({
+      ...candidate,
+      // "" for most of the ballot; the grid only draws the row when something
+      // in it is non-empty, so pass through rather than filtering here.
+      bio: candidate.bio || undefined,
+    })),
+    surveyAnswers,
+  );
+  const answered = roster.filter((candidate) => candidate.answers);
+  const silent = roster.filter((candidate) => !candidate.answers);
+  const groups = comparedQuestions(
+    answered.map((candidate) => candidate.answers!),
+    answered,
+    surveyShape,
+  );
+
+  return (
+    <div>
+      {showHeading && <RaceHeading race={race} />}
+      <div className="px-6 md:px-14 pb-10">
+        {groups.length > 0 ? (
+          <QuestionnaireRail headings={questionnaireHeadings(groups)}>
+            <QuestionnaireCards
+              groups={groups}
+              respondents={answered}
+              silent={silent}
+              issuesHref={issuesHref}
+            />
+          </QuestionnaireRail>
+        ) : (
+          /* Only two ways to get here now: nobody has filed for the seat, or
+             the questionnaire itself could not be fetched. Either way there is
+             no grid to draw, and the candidates are still worth naming. */
+          <p className="font-serif text-[1.05rem] leading-[1.5] text-dark/80 max-w-[62ch] text-pretty">
+            {roster.length === 0
+              ? "No one has filed for this seat yet."
+              : `On the ballot, and yet to respond to us: ${roster
+                  .map((candidate) => candidate.name)
+                  .join(", ")}.`}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
 function RaceHeading({ race }: { race: RaceView }) {
   return (
     <div className="px-6 md:px-14 pt-8 pb-3 border-t border-border-light flex justify-between items-end gap-5 flex-wrap">
@@ -251,6 +400,8 @@ function EmptyRace({
   );
 }
 
+/* A candidate card, which only the school-board races use now: the council
+   ballot is the questionnaire grid, and trustees have no questionnaire. */
 function CouncilCandidate({
   candidate,
   election,
@@ -266,53 +417,55 @@ function CouncilCandidate({
 }) {
   return (
     <div
-      className={`flex gap-5 sm:gap-7 items-center px-6 md:px-14 py-7 border-t border-border-light ${
+      className={`px-6 md:px-14 py-7 border-t border-border-light ${
         candidate.withdrawn ? "opacity-55" : ""
       }`}
     >
-      <div className="flex-none size-16 bg-dark relative overflow-hidden flex items-center justify-center font-sans font-medium text-[1.35rem] tracking-[-0.02em] text-bg">
-        {candidate.image ? (
-          <Image
-            src={candidate.image}
-            alt={candidate.name}
-            fill
-            sizes="64px"
-            className="object-cover object-center"
-          />
-        ) : (
-          candidate.initials
-        )}
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-baseline gap-3.5 flex-wrap mb-2">
-          <h3
-            className={`font-sans font-medium text-[1.5rem] tracking-[-0.02em] leading-[1.1] ${
-              candidate.withdrawn ? "line-through decoration-1" : ""
-            }`}
-          >
-            {candidate.name}
-          </h3>
-          {candidate.tag === "Incumbent" && <IncumbentBadge />}
-          {candidate.withdrawn && (
-            <span className="type-label-sm !text-[10px] !tracking-[0.12em] px-2 py-1 border border-border-light text-text-secondary">
-              Withdrawn
-            </span>
+      <div className="flex gap-5 sm:gap-7 items-center">
+        <div className="flex-none size-16 bg-dark relative overflow-hidden flex items-center justify-center font-sans font-medium text-[1.35rem] tracking-[-0.02em] text-bg">
+          {candidate.image ? (
+            <Image
+              src={candidate.image}
+              alt={candidate.name}
+              fill
+              sizes="64px"
+              className="object-cover object-center"
+            />
+          ) : (
+            candidate.initials
           )}
         </div>
-        {candidate.bio && (
-          <p className="font-serif text-[1.08rem] leading-[1.45] text-dark/80 max-w-[64ch]">
-            {candidate.bio}
-          </p>
-        )}
-      </div>
-      <div className="hidden sm:block flex-none">
-        <SiteLink
-          candidate={candidate}
-          election={election}
-          race={race}
-          ward={ward}
-          wardName={wardName}
-        />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-baseline gap-3.5 flex-wrap">
+            <h3
+              className={`font-sans font-medium text-[1.5rem] tracking-[-0.02em] leading-[1.1] ${
+                candidate.withdrawn ? "line-through decoration-1" : ""
+              }`}
+            >
+              {candidate.name}
+            </h3>
+            {candidate.tag === "Incumbent" && <IncumbentBadge />}
+            {candidate.withdrawn && (
+              <span className="type-label-sm !text-[10px] !tracking-[0.12em] px-2 py-1 border border-border-light text-text-secondary">
+                Withdrawn
+              </span>
+            )}
+          </div>
+          {candidate.bio && (
+            <p className="font-serif text-[1.08rem] leading-[1.45] text-dark/80 max-w-[64ch] mt-2">
+              {candidate.bio}
+            </p>
+          )}
+        </div>
+        <div className="hidden sm:block flex-none">
+          <SiteLink
+            candidate={candidate}
+            election={election}
+            race={race}
+            ward={ward}
+            wardName={wardName}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/elections/WardLookup.tsx b/src/components/elections/WardLookup.tsx
index 3d6abc12..32ede208 100644
--- a/src/components/elections/WardLookup.tsx
+++ b/src/components/elections/WardLookup.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useState, type ReactNode } from "react";
+import { ArrowRight } from "lucide-react";
+
 import type { WardView } from "@/lib/elections/election-data";
 import type { WardLookupResponse } from "@/lib/elections/ward-lookup";
 
@@ -11,14 +13,25 @@ type State =
   | { status: "failed" };
 
 /**
- * Postal code → ward lookup for the wards section. The result is a best guess
- * — postal centroids sit off-line near ward boundaries — so it reads as "looks
- * like Ward 19", always offers the full ward list beside it, and never
- * navigates on its own. See docs/WARD_LOOKUP_API_SPEC.md.
+ * Postal code → ward, for the wards section.
+ *
+ * THE CONTROL IS ONE OBJECT
+ *   It was a labelled field and a detached button, each with its own border
+ *   and its own height, sitting on a baseline they only roughly shared. Two
+ *   boxes with a gap between them read as two controls, and the gap is where
+ *   the roughness was. They are one bordered box now, split by a single rule:
+ *   type on the left, act on the right, one outline around the pair that takes
+ *   the focus ring for both.
+ *
+ * IT IS A GUESS, AND SAYS SO
+ *   A postal code's stored point is the centroid of its delivery area, so a
+ *   code sitting on a ward line resolves to the neighbour. It reads as "looks
+ *   like Ward 19", never navigates on its own, and always offers the full list
+ *   beside itself. See docs/WARD_LOOKUP_API_SPEC.md.
  *
  * `cards` holds this region's ward tiles pre-rendered on the server, keyed by
  * ward number, because the tile's locator map is server-rendered geometry that
- * can't be built here.
+ * cannot be built here.
  */
 export default function WardLookup({
   wards,
@@ -32,6 +45,7 @@ export default function WardLookup({
 }) {
   const [postalCode, setPostalCode] = useState("");
   const [state, setState] = useState<State>({ status: "idle" });
+  const busy = state.status === "loading";
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
@@ -54,12 +68,20 @@ export default function WardLookup({
   };
 
   return (
-    <div className="max-w-[46ch]">
-      <form onSubmit={handleSubmit} className="flex flex-wrap items-end gap-3">
-        <div className="flex flex-col gap-2">
-          <label htmlFor="ward-postal-code" className="type-label text-accent">
-            Enter your postal code
-          </label>
+    <div className="max-w-[30rem]">
+      <form onSubmit={handleSubmit}>
+        <label
+          htmlFor="ward-postal-code"
+          className="type-label-sm mb-2 block text-text-muted"
+        >
+          Find it by postal code
+        </label>
+
+        {/* The box is the control. The input and the button are flush inside
+            it, divided by one rule, and `focus-within` moves the ring to the
+            whole thing so tabbing into the field lights the object the reader
+            sees rather than an inner edge of it. */}
+        <div className="flex items-stretch border border-dark bg-bg transition-shadow focus-within:ring-1 focus-within:ring-accent focus-within:border-accent">
           <input
             id="ward-postal-code"
             name="postal_code"
@@ -68,23 +90,19 @@ export default function WardLookup({
             autoComplete="postal-code"
             placeholder="M4C 1S9"
             aria-describedby="ward-lookup-result"
-            className="w-[13ch] border border-dark bg-bg px-4 py-3 font-sans text-[1.05rem] tracking-[0.02em] uppercase placeholder:text-text-muted placeholder:normal-case focus:outline-none focus:ring-1 focus:ring-accent"
+            className="min-w-0 flex-1 bg-transparent px-4 py-3 font-sans text-[1.05rem] uppercase tracking-[0.04em] text-dark placeholder:normal-case placeholder:tracking-normal placeholder:text-text-muted focus:outline-none"
           />
+          <button
+            type="submit"
+            disabled={!postalCode.trim() || busy}
+            className="type-label-sm flex-none cursor-pointer border-l border-dark bg-dark px-5 !tracking-[0.1em] text-bg transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-35"
+          >
+            {busy ? "Checking…" : "Find"}
+          </button>
         </div>
-        <button
-          type="submit"
-          disabled={!postalCode.trim() || state.status === "loading"}
-          className="type-button text-bg bg-dark px-5 py-3.5 transition-colors hover:bg-black disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
-        >
-          {state.status === "loading" ? "Checking…" : "Find my ward"}
-        </button>
       </form>
 
-      <div
-        id="ward-lookup-result"
-        aria-live="polite"
-        className="mt-4 empty:mt-0"
-      >
+      <div id="ward-lookup-result" aria-live="polite" className="empty:hidden">
         {state.status === "done" && (
           <Result
             result={state.result}
@@ -115,41 +133,41 @@ function Result({
       // ward_number is never null for numbered municipal wards, but the type
       // allows null for named ones — without it there is nothing to match.
       const number = result.ward?.ward_number;
-      // Matched against our own roster so the card shows the live candidate
+      // Matched against our own roster so the tile shows the live candidate
       // count and the same ward name as the grid below it.
       const ward = number ? wards.find((w) => w.number === number) : undefined;
       const card = number ? cards[number] : undefined;
       if (!ward || !card) return <Unavailable />;
       return (
-        <div>
-          <p className="font-serif text-[1.05rem] leading-[1.45] mb-3">
-            Looks like you&rsquo;re in{" "}
-            <span className="text-accent">Ward {number}</span>.
+        <div className="mt-5">
+          <p className="type-label-sm mb-2.5 text-text-muted">
+            Looks like <span className="text-accent">Ward {number}</span>
           </p>
           {card}
           <a
             href="#wards"
-            className="mt-3 inline-block type-label-sm text-text-secondary hover:underline"
+            className="type-label-sm mt-2.5 inline-flex items-center gap-1.5 text-text-secondary transition-colors hover:text-accent"
           >
-            Not right? Browse all {wards.length} wards
+            Not right? All {wards.length} wards
+            <ArrowRight className="size-3 flex-none" />
           </a>
         </div>
       );
     }
     case "malformed_postal_code":
-      return <FieldError>That doesn&rsquo;t look like a postal code.</FieldError>;
+      return <Note accent>That doesn&rsquo;t look like a postal code.</Note>;
     case "unknown_postal_code":
       return (
-        <FieldError>
-          We don&rsquo;t recognize that postal code. Double-check it?
-        </FieldError>
+        <Note accent>
+          We don&rsquo;t recognize that one. Worth a second look?
+        </Note>
       );
     case "outside_boundary":
       return (
-        <p className="font-serif text-[1.05rem] leading-[1.45] text-dark/80">
-          That postal code looks like it&rsquo;s outside {cityLabel} — so there
-          won&rsquo;t be a {cityLabel} ward for it.
-        </p>
+        <Note>
+          That code looks like it is outside {cityLabel}, so there is no{" "}
+          {cityLabel} ward for it.
+        </Note>
       );
     // boundary_data_unavailable, plus any reason added later.
     default:
@@ -157,9 +175,23 @@ function Result({
   }
 }
 
-function FieldError({ children }: { children: React.ReactNode }) {
+/* One line under the field, at the field's own weight. These were set at the
+   body serif's full size, which made "that isn't a postal code" the loudest
+   sentence in the section — a validation message shouting over the heading it
+   sits beneath. */
+function Note({
+  children,
+  accent = false,
+}: {
+  children: ReactNode;
+  accent?: boolean;
+}) {
   return (
-    <p className="font-serif text-[1.05rem] leading-[1.45] text-accent">
+    <p
+      className={`mt-2.5 font-serif text-[0.95rem] leading-[1.4] text-pretty ${
+        accent ? "text-accent" : "text-text-secondary"
+      }`}
+    >
       {children}
     </p>
   );
@@ -167,9 +199,8 @@ function FieldError({ children }: { children: React.ReactNode }) {
 
 function Unavailable() {
   return (
-    <p className="font-serif text-[1.05rem] leading-[1.45] text-dark/80">
-      We can&rsquo;t look that up right now. Try again shortly, or find your ward
-      in the list below.
-    </p>
+    <Note>
+      We can&rsquo;t look that up right now — the ward list below still works.
+    </Note>
   );
 }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 00000000..74041a88
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { Check, ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/* A dropdown in the main site's design language: square corners, hairline
+   border, serif face, accent-coloured check on the selected row.
+ *
+ * Note there are two other `select.tsx` files in this repo — under
+ * app/bills/components/ui and components/tracker/ui. Both are stock shadcn on
+ * Radix and are themed for those sub-apps (rounded, shadowed, and keyed to the
+ * tracker's semantic tokens). They render incorrectly outside their scope:
+ * `--color-accent` is Toronto blue on the main site while
+ * `--color-accent-foreground` stays near-black, so a highlighted row comes out
+ * dark-on-dark. Use this one anywhere on the main site.
+ *
+ * Built on Base UI, matching the site's other primitives (dialog, accordion,
+ * collapsible). Renders a hidden input when `name` is set, so it submits
+ * inside a plain <form> like a native <select>. */
+
+export type SelectOption = {
+  value: string;
+  label: string;
+};
+
+export function Select({
+  id,
+  name,
+  value,
+  onValueChange,
+  options,
+  placeholder = "Select one",
+  disabled,
+  required,
+  invalid,
+  className,
+}: {
+  id?: string;
+  /** Set to submit with a surrounding form, as a native <select> would. */
+  name?: string;
+  /** "" means nothing selected. */
+  value: string;
+  onValueChange: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** Draws the error border; pair with your own message below the field. */
+  invalid?: boolean;
+  /** Applied to the trigger — use it to set width. */
+  className?: string;
+}) {
+  return (
+    <SelectPrimitive.Root
+      items={options}
+      // Base UI models "nothing selected" as null; the empty string is what
+      // form state elsewhere in the app uses. Translate at the boundary.
+      value={value === "" ? null : value}
+      onValueChange={(next) => onValueChange((next as string | null) ?? "")}
+      name={name}
+      disabled={disabled}
+      required={required}
+    >
+      <SelectPrimitive.Trigger
+        id={id}
+        className={cn(
+          "flex w-full cursor-pointer items-center justify-between gap-3 border bg-white px-4 py-3.5 text-left font-serif text-[17px] text-dark transition-colors",
+          "hover:border-dark focus-visible:border-dark focus-visible:outline-none data-[popup-open]:border-dark",
+          "disabled:cursor-not-allowed disabled:opacity-60",
+          invalid ? "border-accent" : "border-border-light",
+          className,
+        )}
+      >
+        <SelectPrimitive.Value
+          placeholder={placeholder}
+          className="truncate data-[placeholder]:text-text-muted"
+        />
+        {/* Rotation keys off the trigger's `data-popup-open` rather than the
+            icon's own state: Base UI maps the icon through the collapsible
+            mapping, so it emits `data-panel-open` here, which is an internal
+            quirk not worth depending on. */}
+        <SelectPrimitive.Icon className="shrink-0 text-text-secondary transition-transform duration-200 [[data-popup-open]_&]:rotate-180">
+          <ChevronDown className="size-4" />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Positioner
+          sideOffset={4}
+          // Anchor below the trigger rather than overlaying the selected item
+          // on top of it — with 25 wards the native-style overlay jumps around.
+          alignItemWithTrigger={false}
+          className="z-50"
+        >
+          <SelectPrimitive.Popup
+            className={cn(
+              "max-h-[min(20rem,var(--available-height))] w-[var(--anchor-width)] overflow-y-auto border border-dark bg-white py-1",
+              "origin-[var(--transform-origin)] transition-[transform,opacity] duration-150",
+              "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0",
+              "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0",
+            )}
+          >
+            {options.map((option) => (
+              <SelectPrimitive.Item
+                key={option.value}
+                value={option.value}
+                className={cn(
+                  "flex cursor-pointer items-center justify-between gap-3 px-4 py-2.5 font-serif text-[17px] text-dark outline-none",
+                  "data-[highlighted]:bg-linen-200 data-[selected]:font-medium",
+                )}
+              >
+                <SelectPrimitive.ItemText>
+                  {option.label}
+                </SelectPrimitive.ItemText>
+                <SelectPrimitive.ItemIndicator className="shrink-0 text-accent">
+                  <Check className="size-4" />
+                </SelectPrimitive.ItemIndicator>
+              </SelectPrimitive.Item>
+            ))}
+          </SelectPrimitive.Popup>
+        </SelectPrimitive.Positioner>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}
diff --git a/src/lib/elections/alignment.ts b/src/lib/elections/alignment.ts
new file mode 100644
index 00000000..ccfc3e25
--- /dev/null
+++ b/src/lib/elections/alignment.ts
@@ -0,0 +1,302 @@
+// Comparing one resident's survey answers to the candidates' answers in their
+// ward.
+//
+// The candidate side mirrors York Factory's
+// warehouse.election_candidate_survey_responses: `answers` is {question_id =>
+// string}, `explanations` is a parallel map of prose published verbatim beside
+// the choice, and `source`/`enteredBy` record provenance because a published
+// position has to be traceable to how it was obtained. Nothing here reads that
+// table yet — see candidate-responses.fixture.ts.
+//
+// One property of that table shapes every rule below: York Factory
+// deliberately does NOT validate a candidate's answer against the offered
+// options (see the model's `answers_match_the_survey`, which checks the key and
+// not the value). Staff transcribe what candidates actually say, and "supports
+// with caveats" is a wanted value, not a defect. So an answer that isn't one of
+// the options is reported as `unclear` and left out of the score. Folding it
+// into "differs" would invent a disagreement the candidate never stated, which
+// is the one error this comparison must not make.
+
+import type { Survey, SurveyQuestion } from "./survey";
+
+/**
+ * Steps that ask who someone is rather than what they think. Excluded by step
+ * rather than by question id so that a consent or contact question added in the
+ * CMS later is excluded automatically — the likelier edit, and the one that
+ * would otherwise quietly show up as a policy position.
+ */
+const NON_POLICY_STEPS = new Set(["about-you", "stay-in-touch"]);
+
+/**
+ * Belt and braces for the two consent questions that exist today: they are
+ * choice-typed and would read as policy if their step were ever renamed.
+ */
+const NON_POLICY_QUESTIONS = new Set(["volunteer", "updates"]);
+
+/** Question types with a fixed option list, so two answers can be compared. */
+const CHOICE_TYPES = new Set(["yesno", "radio", "select"]);
+
+/**
+ * True when a question's options are a yes/no scale — "Yes", "Yes, with
+ * conditions", "No" — rather than distinct alternatives.
+ *
+ * It decides which chart the answer gets, and the two are not interchangeable.
+ * A dial puts three options at 120° from each other, which says they are
+ * competing choices of equal standing; a yes-scale is ordered, and drawing it
+ * that way loses the order and invents a three-way contest. Those get a bar,
+ * where "mostly yes with a bloc of noes" is the shape you actually see.
+ *
+ * Matched on the labels because that is where the distinction lives: the
+ * questionnaire types both kinds as `radio` with three options, so nothing in
+ * the schema separates them.
+ */
+export function isYesNoScale(labels: string[]): boolean {
+  if (labels.length < 2) return false;
+  return labels.every((label) => /^(yes|no)\b/i.test(label.trim()));
+}
+
+/** One candidate's answers to a questionnaire, as York Factory stores them. */
+export type CandidateSurveyResponse = {
+  candidateName: string;
+  /** ward key as candidates.ts stores it, "01".."25" */
+  ward: string;
+  surveySlug: string;
+  surveyVersion: string;
+  /** {question_id => stored value}; verbatim, so not always an option value */
+  answers: Record<string, string>;
+  /** {question_id => prose}, published beside the choice */
+  explanations?: Record<string, string>;
+  /** how the answers reached us — provenance for a published position */
+  source: "admin" | "email" | "form" | "phone" | "other";
+  enteredBy?: string;
+};
+
+export type Verdict =
+  /** same option as the respondent */
+  | "agree"
+  /** a different option from the respondent */
+  | "differ"
+  /** answered, but not with one of the offered options */
+  | "unclear"
+  /** no answer on record for this question */
+  | "unanswered";
+
+export type CandidateCell = {
+  candidateName: string;
+  verdict: Verdict;
+  /** the option's label, or the raw transcription when it matched no option */
+  answer?: string;
+  explanation?: string;
+  /**
+   * Index into `QuestionRow.options`, or null when there is nothing to point
+   * at — an unanswered question, or prose that matched no option. Charts key
+   * off this rather than off the label, so a reworded option still lines up.
+   */
+  choice: number | null;
+};
+
+export type QuestionRow = {
+  questionId: string;
+  question: string;
+  stepId: string;
+  stepTitle: string;
+  /** the respondent's own answer, as a label */
+  yourAnswer: string;
+  /** the option labels exactly as they were offered, in order */
+  options: string[];
+  /** each option's expansion, where it has one; parallel to `options` */
+  details: (string | null)[];
+  /** the respondent's own pick, as an index into `options` */
+  yourChoice: number | null;
+  /**
+   * How many of this ward's candidates picked each option. `unclear` and
+   * `unanswered` are in no bucket, so this sums to the number of candidates
+   * who gave a usable answer rather than to the size of the field.
+   */
+  counts: number[];
+  cells: CandidateCell[];
+};
+
+export type CandidateScore = {
+  candidateName: string;
+  agreed: number;
+  differed: number;
+  /** agreed + differed — the denominator the share is actually out of */
+  compared: number;
+  unclear: number;
+  unanswered: number;
+  /** 0–1 over `compared`, or null when nothing was comparable */
+  share: number | null;
+};
+
+export type Alignment = {
+  rows: QuestionRow[];
+  /** ranked, most aligned first */
+  scores: CandidateScore[];
+};
+
+/**
+ * "ward-5" (York Factory's `derived_region`) → "05" (candidates.ts's key).
+ * Returns null for a missing or unrecognised region, which callers treat as
+ * "we could not place this respondent in a ward" rather than as ward zero.
+ */
+export function wardKeyFromRegion(
+  region: string | null | undefined,
+): string | null {
+  if (typeof region !== "string") return null;
+  const match = /^ward-(\d{1,2})$/.exec(region.trim());
+  if (!match) return null;
+  const number = parseInt(match[1], 10);
+  if (!Number.isFinite(number) || number < 1) return null;
+  return String(number).padStart(2, "0");
+}
+
+/** The policy questions of a survey, in the order a respondent meets them. */
+export function comparableQuestions(
+  survey: Survey,
+): { question: SurveyQuestion; stepId: string; stepTitle: string }[] {
+  return survey.steps.flatMap((step) =>
+    NON_POLICY_STEPS.has(step.id)
+      ? []
+      : step.questions
+          .filter(
+            (question) =>
+              CHOICE_TYPES.has(question.type) &&
+              !NON_POLICY_QUESTIONS.has(question.id) &&
+              (question.options?.length ?? 0) > 0,
+          )
+          .map((question) => ({
+            question,
+            stepId: step.id,
+            stepTitle: step.title,
+          })),
+  );
+}
+
+/**
+ * Compares one set of resident answers against several candidate responses.
+ *
+ * Only questions the respondent actually answered are included: this reads as
+ * "here is where you and they differ", and a question the respondent skipped
+ * has no "you" to compare against. Questions no candidate has answered are
+ * dropped too, since a row of four dashes tells a reader nothing.
+ */
+export function alignToCandidates(
+  survey: Survey,
+  answers: Record<string, string>,
+  responses: CandidateSurveyResponse[],
+): Alignment {
+  const tallies = new Map<string, CandidateScore>(
+    responses.map((response) => [
+      response.candidateName,
+      {
+        candidateName: response.candidateName,
+        agreed: 0,
+        differed: 0,
+        compared: 0,
+        unclear: 0,
+        unanswered: 0,
+        share: null,
+      },
+    ]),
+  );
+
+  const rows: QuestionRow[] = [];
+
+  for (const { question, stepId, stepTitle } of comparableQuestions(survey)) {
+    const yourValue = (answers[question.id] ?? "").trim();
+    if (!yourValue) continue;
+
+    const options = question.options ?? [];
+    const indexOf = (value: string) =>
+      options.findIndex((option) => option.value === value);
+    const labelFor = (value: string) =>
+      options.find((option) => option.value === value)?.label;
+    const yourAnswer = labelFor(yourValue) ?? yourValue;
+    const yourIndex = indexOf(yourValue);
+
+    const counts = options.map(() => 0);
+
+    const cells = responses.map((response): CandidateCell => {
+      const tally = tallies.get(response.candidateName)!;
+      const raw = (response.answers[question.id] ?? "").trim();
+      const explanation = response.explanations?.[question.id];
+
+      if (!raw) {
+        tally.unanswered += 1;
+        return {
+          candidateName: response.candidateName,
+          verdict: "unanswered",
+          explanation,
+          choice: null,
+        };
+      }
+
+      const label = labelFor(raw);
+      if (label === undefined) {
+        // Transcribed prose rather than one of the options — reportable, but
+        // not a disagreement we get to assert on the candidate's behalf.
+        tally.unclear += 1;
+        return {
+          candidateName: response.candidateName,
+          verdict: "unclear",
+          answer: raw,
+          explanation,
+          choice: null,
+        };
+      }
+
+      const agrees = raw === yourValue;
+      if (agrees) tally.agreed += 1;
+      else tally.differed += 1;
+      tally.compared += 1;
+
+      const choice = indexOf(raw);
+      counts[choice] += 1;
+
+      return {
+        candidateName: response.candidateName,
+        verdict: agrees ? "agree" : "differ",
+        answer: label,
+        explanation,
+        choice,
+      };
+    });
+
+    if (cells.every((cell) => cell.verdict === "unanswered")) continue;
+
+    rows.push({
+      questionId: question.id,
+      question: question.label,
+      stepId,
+      stepTitle,
+      yourAnswer,
+      options: options.map((option) => option.label),
+      details: options.map((option) => option.detail ?? null),
+      yourChoice: yourIndex === -1 ? null : yourIndex,
+      counts,
+      cells,
+    });
+  }
+
+  const scores = [...tallies.values()].map((tally) => ({
+    ...tally,
+    share: tally.compared > 0 ? tally.agreed / tally.compared : null,
+  }));
+
+  // Most aligned first. A candidate with nothing comparable sorts last rather
+  // than as 0%, because "we can't say" is not the same claim as "agrees on
+  // nothing". Ties break on the number compared — a 4/5 is better evidenced
+  // than a 1/1 — and then on name, so the order is stable across renders.
+  scores.sort((a, b) => {
+    if (a.share === null || b.share === null) {
+      if (a.share === b.share) return a.candidateName.localeCompare(b.candidateName);
+      return a.share === null ? 1 : -1;
+    }
+    if (b.share !== a.share) return b.share - a.share;
+    if (b.compared !== a.compared) return b.compared - a.compared;
+    return a.candidateName.localeCompare(b.candidateName);
+  });
+
+  return { rows, scores };
+}
diff --git a/src/lib/elections/candidate-answers.ts b/src/lib/elections/candidate-answers.ts
new file mode 100644
index 00000000..af099af6
--- /dev/null
+++ b/src/lib/elections/candidate-answers.ts
@@ -0,0 +1,465 @@
+// One ward's candidates, each with the answers they gave the questionnaire.
+//
+// The alignment view (alignment.ts) is question-first and needs a resident to
+// compare against. A ward page has no resident: it is the roster, and what
+// belongs on a candidate's card is simply what that candidate said. So this
+// module pivots the same source data candidate-first and drops the comparison.
+//
+// It reuses `comparableQuestions` so the two views can never disagree about
+// which questions count as policy — a consent question added in the CMS is
+// excluded from both by the same rule.
+//
+// The per-question `counts` are the split across EVERY candidate who answered
+// the questionnaire, not just the ward's. That is what makes a single answer
+// legible — "21 of 30 said this too" — and a ward is far too small a field to
+// carry it: most wards have one or two respondents, where a per-ward count
+// says only that the candidate agrees with themselves.
+
+import { comparableQuestions, isYesNoScale } from "./alignment";
+import type { CandidateSurveyResponse } from "./alignment";
+import { nameKey } from "./election-data";
+import { lastName } from "./names";
+import type { Survey } from "./survey";
+
+export type CandidateAnswer = {
+  questionId: string;
+  question: string;
+  /** the option labels exactly as they were offered, in order */
+  options: string[];
+  /**
+   * Each option's expansion, where it has one. Kept apart from the label so a
+   * chart can stay terse while the list beside it reads in full — which is how
+   * the questionnaire actually put the choice.
+   */
+  details: (string | null)[];
+  /**
+   * How many candidates picked each option, across everyone who answered the
+   * questionnaire. Answers that matched no option are in no bucket, so this
+   * sums to the candidates who chose something rather than to the whole field.
+   */
+  counts: number[];
+  /** index into `options`, or null when the answer matched none */
+  choice: number | null;
+  /**
+   * The options are an ordered yes/no scale rather than competing
+   * alternatives, so this answer is drawn as a bar and not a dial.
+   */
+  ordinal: boolean;
+  /** the option's label, or the raw transcription when it matched no option */
+  answer: string;
+  /** true when `answer` is the candidate's own words rather than an option */
+  verbatim: boolean;
+  explanation?: string;
+};
+
+export type AnswerGroup = {
+  stepId: string;
+  stepTitle: string;
+  answers: CandidateAnswer[];
+};
+
+export type CandidateAnswers = {
+  candidateName: string;
+  /** `nameKey(candidateName)` — how a roster CandidateView is matched */
+  key: string;
+  /** questions this candidate gave any answer to */
+  answered: number;
+  /**
+   * Candidates on file, the whole field — the top of the value scale every
+   * chart is drawn against. One shared maximum is the point: a wedge reaching
+   * the rim is the most lopsided answer on the questionnaire, and every other
+   * wedge is measured against it. A per-question scale would make every answer
+   * look unanimous.
+   */
+  fieldSize: number;
+  groups: AnswerGroup[];
+};
+
+/**
+ * Pivots published responses into one entry per candidate.
+ *
+ * Pass every response for the election, not one ward's: the counts on each
+ * answer are the whole field's split, and a caller narrows to a ward by
+ * keeping the entries whose `key` is on that ward's roster.
+ *
+ * Candidates who answered nothing are dropped rather than returned empty: a
+ * card with a "Survey answers (0)" disclosure on it is worse than a card with
+ * no disclosure at all.
+ */
+export function candidateAnswers(
+  survey: Survey,
+  responses: CandidateSurveyResponse[],
+): CandidateAnswers[] {
+  const byCandidate = new Map<string, AnswerGroup[]>(
+    responses.map((response) => [response.candidateName, []]),
+  );
+
+  for (const { question, stepId, stepTitle } of comparableQuestions(survey)) {
+    const options = question.options ?? [];
+    const counts = options.map(() => 0);
+
+    // First pass: the field's split, so every candidate's chart is drawn
+    // against the same denominator.
+    const picks = responses.map((response) => {
+      const raw = (response.answers[question.id] ?? "").trim();
+      if (!raw) return null;
+      const index = options.findIndex((option) => option.value === raw);
+      if (index !== -1) counts[index] += 1;
+      return { raw, index };
+    });
+
+    responses.forEach((response, i) => {
+      const pick = picks[i];
+      if (!pick) return;
+
+      const groups = byCandidate.get(response.candidateName)!;
+      const answer: CandidateAnswer = {
+        questionId: question.id,
+        question: question.label,
+        options: options.map((option) => option.label),
+        details: options.map((option) => option.detail ?? null),
+        ordinal: isYesNoScale(options.map((option) => option.label)),
+        counts,
+        choice: pick.index === -1 ? null : pick.index,
+        answer:
+          pick.index === -1 ? pick.raw : (options[pick.index]?.label ?? pick.raw),
+        verbatim: pick.index === -1,
+        explanation: response.explanations?.[question.id],
+      };
+
+      const last = groups.at(-1);
+      if (last?.stepId === stepId) last.answers.push(answer);
+      else groups.push({ stepId, stepTitle, answers: [answer] });
+    });
+  }
+
+  return responses
+    .map((response) => {
+      const groups = byCandidate.get(response.candidateName)!;
+      return {
+        candidateName: response.candidateName,
+        key: nameKey(response.candidateName),
+        answered: groups.reduce((n, group) => n + group.answers.length, 0),
+        fieldSize: responses.length,
+        groups,
+      };
+    })
+    .filter((entry) => entry.answered > 0);
+}
+
+/** Keyed by `nameKey`, ready to look up against a roster `CandidateView.key`. */
+export function byCandidateKey(
+  entries: CandidateAnswers[],
+): Record<string, CandidateAnswers> {
+  return Object.fromEntries(entries.map((entry) => [entry.key, entry]));
+}
+
+/* ------------------------------------------------------------------ */
+/* Question-first                                                      */
+/* ------------------------------------------------------------------ */
+
+/** One candidate's cell in a question's row; `answer` is null where they
+ *  answered the questionnaire but skipped this question. */
+export type AnswerCell = {
+  /** `nameKey(candidateName)` — matches a roster `CandidateView.key` */
+  key: string;
+  candidateName: string;
+  /** false where they never returned the questionnaire at all — which is a
+   *  different fact from answering it and skipping this question, and the two
+   *  print differently */
+  responded: boolean;
+  answer: CandidateAnswer | null;
+};
+
+/** One question, with every candidate's answer to it side by side. */
+export type ComparedQuestion = {
+  questionId: string;
+  question: string;
+  options: string[];
+  details: (string | null)[];
+  /** the whole field's split, the same figure every candidate's card used */
+  counts: number[];
+  ordinal: boolean;
+  /** one per candidate, in the order the candidates were handed in */
+  cells: AnswerCell[];
+};
+
+export type ComparedGroup = {
+  stepId: string;
+  stepTitle: string;
+  questions: ComparedQuestion[];
+};
+
+/**
+ * Pivots a ward's candidates into one row per question.
+ *
+ * The candidate-first shape (`candidateAnswers`) answers "what does this
+ * candidate think", and a ward page asked it once per candidate: the same
+ * thirty-odd questions, the same option wording, the same charts, repeated in
+ * full for everyone on the ballot. That is the right shape for one card and
+ * the wrong shape for a page — it ran to tens of thousands of pixels, and the
+ * one thing a voter is there to do, hold two candidates against each other on
+ * a question, meant scrolling between two cards a screen or more apart.
+ *
+ * Same data, read across instead of down. Questions keep the order and the
+ * grouping the questionnaire gave them, taken from the first candidate who
+ * answered each — a candidate who skipped a question simply has an empty cell
+ * in that row, which is itself worth seeing.
+ *
+ * The columns come from `roster` where one is given, which is how the whole
+ * ballot gets into the grid rather than only the part of it that wrote back.
+ * A candidate who never returned the questionnaire is a column of "did not
+ * respond", and that is the single most useful thing the page can tell a voter
+ * about them. Without a roster the columns are the entries themselves.
+ */
+export function comparedQuestions(
+  entries: CandidateAnswers[],
+  roster?: { key: string; name: string }[],
+  shape?: ComparedGroup[],
+): ComparedGroup[] {
+  const groups: ComparedGroup[] = [];
+  const byStep = new Map<string, ComparedGroup>();
+  const byQuestion = new Map<string, ComparedQuestion>();
+
+  const responded = new Set(entries.map((entry) => entry.key));
+  const columns = (
+    roster ??
+    entries.map((entry) => ({ key: entry.key, name: entry.candidateName }))
+  ).map((candidate) => ({
+    key: candidate.key,
+    candidateName: candidate.name,
+    responded: responded.has(candidate.key),
+  }));
+
+  for (const entry of entries) {
+    for (const group of entry.groups) {
+      let compared = byStep.get(group.stepId);
+      if (!compared) {
+        compared = {
+          stepId: group.stepId,
+          stepTitle: group.stepTitle,
+          questions: [],
+        };
+        byStep.set(group.stepId, compared);
+        groups.push(compared);
+      }
+
+      for (const answer of group.answers) {
+        let question = byQuestion.get(answer.questionId);
+        if (!question) {
+          question = {
+            questionId: answer.questionId,
+            question: answer.question,
+            options: answer.options,
+            details: answer.details,
+            counts: answer.counts,
+            ordinal: answer.ordinal,
+            cells: columns.map((column) => ({ ...column, answer: null })),
+          };
+          byQuestion.set(answer.questionId, question);
+          compared.questions.push(question);
+        }
+
+        const cell = question.cells.find((c) => c.key === entry.key);
+        if (cell) cell.answer = answer;
+      }
+    }
+  }
+
+  /* Nobody in this ward wrote back, so the questions have nowhere to come
+     from: they are read off the returned questionnaires, and there are none.
+     The questionnaire itself supplies them instead, and every cell is a "did
+     not respond" — which is the whole point of the page in a ward like that.
+     Silence from a whole field is a finding, and it reads as one only when a
+     reader can see the thirty questions nobody answered. */
+  if (groups.length === 0 && shape) {
+    return shape.map((group) => ({
+      ...group,
+      questions: group.questions.map((question) => ({
+        ...question,
+        cells: columns.map((column) => ({ ...column, answer: null })),
+      })),
+    }));
+  }
+
+  return groups;
+}
+
+/**
+ * The columns of a survey grid, in the order they should print.
+ *
+ * Answered first, then the rest, each half by surname. The clerk's order is a
+ * filing order and reads as noise in a grid: it puts the one candidate who
+ * answered thirty questions somewhere in the middle of eleven columns of "did
+ * not respond", so the columns worth reading are the ones a reader has to go
+ * looking for. Sorting by name alone would do the same. Alphabetical within
+ * each half because a reader checking on one candidate needs somewhere to look
+ * them up.
+ *
+ * Withdrawn candidates are dropped: they cannot be voted for, so a column of
+ * theirs is a column of a ballot line that does not exist, and in a grid this
+ * wide every column costs the reader a drag.
+ */
+export function surveyRoster<
+  T extends { key: string; name: string; withdrawn?: boolean },
+>(
+  candidates: T[],
+  answers?: Record<string, CandidateAnswers>,
+): (T & { answers?: CandidateAnswers })[] {
+  return candidates
+    .filter((candidate) => !candidate.withdrawn)
+    .map((candidate) => ({ ...candidate, answers: answers?.[candidate.key] }))
+    .sort((a, b) => {
+      if (!!a.answers !== !!b.answers) return a.answers ? -1 : 1;
+      return (
+        lastName(a.name).localeCompare(lastName(b.name)) ||
+        a.name.localeCompare(b.name)
+      );
+    });
+}
+
+/**
+ * Every comparable question in the questionnaire, with the whole field's split
+ * on each and no candidate attached — the shape of the grid, for a ward whose
+ * candidates have all stayed quiet.
+ *
+ * The counts come from every response in the election, exactly as they do on a
+ * candidate's own answers: what the rest of the field said is the one thing a
+ * ward of non-respondents can still tell a reader.
+ */
+export function questionnaireShape(
+  survey: Survey,
+  responses: CandidateSurveyResponse[],
+): ComparedGroup[] {
+  const groups: ComparedGroup[] = [];
+
+  for (const { question, stepId, stepTitle } of comparableQuestions(survey)) {
+    const options = question.options ?? [];
+    const counts = options.map(() => 0);
+    for (const response of responses) {
+      const raw = (response.answers[question.id] ?? "").trim();
+      if (!raw) continue;
+      const index = options.findIndex((option) => option.value === raw);
+      if (index !== -1) counts[index] += 1;
+    }
+
+    const compared: ComparedQuestion = {
+      questionId: question.id,
+      question: question.label,
+      options: options.map((option) => option.label),
+      details: options.map((option) => option.detail ?? null),
+      counts,
+      ordinal: isYesNoScale(options.map((option) => option.label)),
+      cells: [],
+    };
+
+    const last = groups.at(-1);
+    if (last?.stepId === stepId) last.questions.push(compared);
+    else groups.push({ stepId, stepTitle, questions: [compared] });
+  }
+
+  return groups;
+}
+
+/* ------------------------------------------------------------------ */
+/* Roll call                                                           */
+/* ------------------------------------------------------------------ */
+
+/** A candidate under the answer they gave. */
+export type RollCallName = {
+  key: string;
+  /** their name in full — the page names the same handful of people many
+   *  times over, and a surname is not enough to tell them apart at a glance */
+  name: string;
+  /** their own words about why, where they wrote any */
+  note: string | null;
+};
+
+/** One answer, and everyone who gave it. */
+export type RollCallGroup = {
+  /** index into the question's options */
+  option: number;
+  label: string;
+  detail: string | null;
+  candidates: RollCallName[];
+};
+
+export type RollCall = {
+  /** the options at least one candidate picked, in the order they were offered */
+  groups: RollCallGroup[];
+  /** answered, but in words that matched no option — so on no option */
+  verbatim: (RollCallName & { answer: string })[];
+  /** skipped this question, or never returned the questionnaire at all */
+  unanswered: RollCallName[];
+};
+
+/**
+ * One question's respondents, grouped by the answer they gave.
+ *
+ * The grid pivot above puts a candidate in every question and a question in
+ * every candidate, which is the shape that answers "what did this one person
+ * say" — and the shape a reader has to drag sideways to compare anybody. A
+ * ward page's question is the other one: how did these four differ. So this
+ * pivots once more, to the answer itself, and files the candidates under it.
+ *
+ * Only the options somebody picked get a group. The grid printed all of them,
+ * unclaimed rows included, on the argument that a position nobody will take is
+ * a finding; at thirty questions it is mostly whitespace, and the reader came
+ * to compare people rather than to audit the option list. The full list of
+ * what was offered is on the questionnaire page.
+ *
+ * `silent` are the candidates who never wrote back. They join the unanswered
+ * line rather than getting a place of their own, because on this question the
+ * two facts read the same: nothing from them.
+ */
+export function rollCall(
+  question: ComparedQuestion,
+  silent: { key: string; name: string }[] = [],
+): RollCall {
+  const named = (cell: AnswerCell): RollCallName => ({
+    key: cell.key,
+    name: cell.candidateName,
+    note: cell.answer?.explanation?.trim() || null,
+  });
+
+  /* Surname order inside every group, so a candidate sits in the same relative
+     place on all thirty questions and a reader stops having to look. */
+  const bySurname = (a: AnswerCell, b: AnswerCell) =>
+    lastName(a.candidateName).localeCompare(lastName(b.candidateName)) ||
+    a.candidateName.localeCompare(b.candidateName);
+
+  const cells = question.cells.filter((cell) => cell.responded).sort(bySurname);
+
+  const groups: RollCallGroup[] = [];
+  question.options.forEach((label, option) => {
+    const candidates = cells
+      .filter((cell) => cell.answer?.choice === option)
+      .map(named);
+    if (candidates.length === 0) return;
+    groups.push({
+      option,
+      label,
+      detail: question.details[option] ?? null,
+      candidates,
+    });
+  });
+
+  const verbatim = cells
+    .filter((cell) => cell.answer && cell.answer.choice === null)
+    .map((cell) => ({ ...named(cell), answer: cell.answer!.answer }));
+
+  const unanswered = [
+    ...cells.filter((cell) => !cell.answer).map(named),
+    ...silent.map((candidate) => ({
+      key: candidate.key,
+      name: candidate.name,
+      note: null,
+    })),
+  ].sort(
+    (a, b) =>
+      lastName(a.name).localeCompare(lastName(b.name)) ||
+      a.name.localeCompare(b.name),
+  );
+
+  return { groups, verbatim, unanswered };
+}
diff --git a/src/lib/elections/candidate-responses.ts b/src/lib/elections/candidate-responses.ts
new file mode 100644
index 00000000..a7ba5fb5
--- /dev/null
+++ b/src/lib/elections/candidate-responses.ts
@@ -0,0 +1,90 @@
+// Published candidate questionnaire answers, from York Factory.
+//
+// These replace candidate-responses.fixture.ts, which stood in while the read
+// endpoint did not exist. The source of truth is
+// warehouse.election_candidate_survey_responses, entered in the CMS from
+// replies staff transcribe by hand.
+//
+// TWO PUBLISH GATES, AND WHY AN EMPTY LIST IS NORMAL
+//   The API serves a response only when both its survey and the response
+//   itself are published. A candidate's answers are attributed public
+//   statements about what they will do in office, so releasing them is an
+//   editorial decision made in the CMS after review — not something a page
+//   gets to bypass. For most of the campaign most wards will have nothing, so
+//   every caller must handle the empty case rather than treat it as a fault.
+//
+//   An admin's own token widens both gates to include drafts, which is how
+//   staff preview. That is York Factory's `preview_mode?`, applied here for
+//   free: apiFetch attaches whatever access token the request carries.
+
+import { apiFetch } from "@/lib/api/client";
+import type { CandidateSurveyResponse } from "./alignment";
+
+/** The Toronto candidate questionnaire — the candidate-audience counterpart of
+ *  CITY_PRIORITIES_SLUG, sharing all but a handful of its question ids. */
+export const CANDIDATE_QUESTIONNAIRE_SLUG = "candidate-questionnaire";
+
+type ApiCandidateResponse = {
+  /** "First Last", already matching how the tracker renders a roster name */
+  candidate_name: string | null;
+  full_name: string | null;
+  /** council district number, or null for a city-wide race */
+  ward: number | null;
+  survey_slug: string;
+  survey_version: string | null;
+  answers: Record<string, string> | null;
+  explanations: Record<string, string> | null;
+  source: CandidateSurveyResponse["source"];
+  published_at: string | null;
+};
+
+/**
+ * Published responses for one election, optionally narrowed to a ward.
+ *
+ * Returns [] when York Factory is unreachable. A ward page's job is its
+ * roster; losing the questionnaire should cost the answers, not the page.
+ */
+export async function fetchCandidateResponses(
+  electionSlug: string,
+  options: { ward?: string; surveySlug?: string } = {},
+): Promise<CandidateSurveyResponse[]> {
+  const { ward, surveySlug = CANDIDATE_QUESTIONNAIRE_SLUG } = options;
+
+  try {
+    const { data } = await apiFetch<{ data: ApiCandidateResponse[] }>(
+      `/elections/${electionSlug}/candidate_responses`,
+      {
+        params: {
+          survey_slug: surveySlug,
+          // The API takes a number; the tracker keys wards as "04".
+          ...(ward ? { ward: String(parseInt(ward, 10)) } : {}),
+        },
+        revalidate: 300,
+        tags: [`candidate-responses:${electionSlug}`],
+      },
+    );
+
+    return data.flatMap((row) => toResponse(row));
+  } catch {
+    return [];
+  }
+}
+
+/** Drops a row we cannot attribute — a response with no candidate name has
+ *  nobody to show it against, and guessing is not an option here. */
+function toResponse(row: ApiCandidateResponse): CandidateSurveyResponse[] {
+  const candidateName = row.candidate_name?.trim();
+  if (!candidateName) return [];
+
+  return [
+    {
+      candidateName,
+      ward: row.ward === null ? "" : String(row.ward).padStart(2, "0"),
+      surveySlug: row.survey_slug,
+      surveyVersion: row.survey_version ?? "",
+      answers: row.answers ?? {},
+      explanations: row.explanations ?? undefined,
+      source: row.source,
+    },
+  ];
+}
diff --git a/src/lib/elections/field-sentiment.ts b/src/lib/elections/field-sentiment.ts
new file mode 100644
index 00000000..9c7ef654
--- /dev/null
+++ b/src/lib/elections/field-sentiment.ts
@@ -0,0 +1,227 @@
+// The whole field's answers to the questionnaire, question-first.
+//
+// The grid pages (SurveyGrid) answer "what did THIS ballot say" — a ward's
+// candidates, or the mayoral field, one column each. That shape stops working
+// at city scale: thirty-two respondents is thirty-two columns, which is a
+// kilometre of sideways drag and no picture at all.
+//
+// City-wide, the interesting object is not the candidate — it is the question.
+// Across everyone who answered, where does the field converge and where does
+// it split? So this module drops the columns and keeps the distribution: one
+// entry per question, with every candidate filed under the option they picked.
+//
+// It reuses `comparableQuestions` so this page and the grids can never
+// disagree about which questions count as policy.
+
+import { comparableQuestions, isYesNoScale } from "./alignment";
+import type { CandidateSurveyResponse } from "./alignment";
+import { nameKey } from "./election-data";
+import { lastName } from "./names";
+import type { Survey } from "./survey";
+
+/** Which ballot line a respondent is on. A response with no ward is city-wide,
+ *  which in Toronto means the mayoral race. */
+export type Race = "mayor" | "councillor";
+
+/** One candidate's answer to one question, filed under that question. */
+export type FieldPick = {
+  /** `nameKey(name)` — matches a roster `CandidateView.key` */
+  key: string;
+  name: string;
+  /** for the surname-first lists the charts print */
+  surname: string;
+  race: Race;
+  /** "01".."25", or "" for a city-wide candidate */
+  ward: string;
+  /** index into the question's options, or null when the answer matched none */
+  choice: number | null;
+  /** the option's label, or their own words where it matched none */
+  answer: string;
+  /** what they wrote alongside the choice, where they wrote anything */
+  note?: string;
+};
+
+export type FieldQuestion = {
+  questionId: string;
+  question: string;
+  stepId: string;
+  stepTitle: string;
+  /** the option labels exactly as they were offered, in order */
+  options: string[];
+  /** each option's expansion, where it has one */
+  details: (string | null)[];
+  /** the options are an ordered scale (Yes / Yes, with conditions / No) rather
+   *  than competing alternatives — drawn as a band, never as a dial */
+  ordinal: boolean;
+  /** everyone who answered this question, in no particular order */
+  picks: FieldPick[];
+};
+
+export type FieldGroup = {
+  stepId: string;
+  stepTitle: string;
+  questions: FieldQuestion[];
+};
+
+/** One candidate who returned the questionnaire. */
+export type Respondent = {
+  key: string;
+  name: string;
+  surname: string;
+  race: Race;
+  ward: string;
+  /** how many policy questions they gave an answer to */
+  answered: number;
+};
+
+export type FieldSentiment = {
+  /** candidates who returned the questionnaire at all */
+  respondents: Respondent[];
+  groups: FieldGroup[];
+  /** every question, flat, in questionnaire order */
+  questions: FieldQuestion[];
+};
+
+/**
+ * Pivots every published response in an election into one entry per question.
+ *
+ * Pass the whole election's responses, not one ward's: the point of this view
+ * is the city-wide distribution, and a ward is far too small a field to have
+ * one — most wards have a single respondent, where a distribution says only
+ * that the candidate agrees with themselves.
+ */
+export function fieldSentiment(
+  survey: Survey,
+  responses: CandidateSurveyResponse[],
+): FieldSentiment {
+  const respondents: Respondent[] = responses.map((response) => ({
+    key: nameKey(response.candidateName),
+    name: response.candidateName,
+    surname: lastName(response.candidateName),
+    race: response.ward ? "councillor" : "mayor",
+    ward: response.ward,
+    answered: 0,
+  }));
+
+  const groups: FieldGroup[] = [];
+  const questions: FieldQuestion[] = [];
+
+  for (const { question, stepId, stepTitle } of comparableQuestions(survey)) {
+    const options = question.options ?? [];
+    const picks: FieldPick[] = [];
+
+    responses.forEach((response, i) => {
+      const raw = (response.answers[question.id] ?? "").trim();
+      if (!raw) return;
+
+      const index = options.findIndex((option) => option.value === raw);
+      respondents[i].answered += 1;
+      picks.push({
+        key: respondents[i].key,
+        name: respondents[i].name,
+        surname: respondents[i].surname,
+        race: respondents[i].race,
+        ward: respondents[i].ward,
+        choice: index === -1 ? null : index,
+        answer: index === -1 ? raw : (options[index]?.label ?? raw),
+        note: response.explanations?.[question.id],
+      });
+    });
+
+    const entry: FieldQuestion = {
+      questionId: question.id,
+      question: question.label,
+      stepId,
+      stepTitle,
+      options: options.map((option) => option.label),
+      details: options.map((option) => option.detail ?? null),
+      ordinal: isYesNoScale(options.map((option) => option.label)),
+      picks,
+    };
+    questions.push(entry);
+
+    const last = groups.at(-1);
+    if (last?.stepId === stepId) last.questions.push(entry);
+    else groups.push({ stepId, stepTitle, questions: [entry] });
+  }
+
+  return {
+    // Somebody who returned the form and answered no policy question is not a
+    // respondent for this page's purposes: they contribute to no distribution,
+    // and counting them would quietly deflate every share on the page.
+    respondents: respondents
+      .filter((r) => r.answered > 0)
+      .sort((a, b) => a.surname.localeCompare(b.surname)),
+    groups,
+    questions,
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/* Reading a distribution                                              */
+/* ------------------------------------------------------------------ */
+
+/** One question's split, once a filter has been applied to the field. */
+export type Split = {
+  /** how many picked each option, in option order */
+  counts: number[];
+  /** candidates who answered but matched no option — in no bucket */
+  unplaced: FieldPick[];
+  /** everyone in a bucket; the denominator every share on the row uses */
+  answered: number;
+  /** index of the most-picked option, or -1 when nobody answered */
+  lead: number;
+  /** the leading option's share of `answered`, 0..1 */
+  leadShare: number;
+  /**
+   * How split the field is, 0..1 — normalised Shannon entropy over the options
+   * that were OFFERED, not the ones that were picked.
+   *
+   * 0 is unanimity and 1 is a dead-even split across every option. Entropy
+   * rather than "everyone but the leader" because the two read differently on
+   * a three-way question: 60/40/0 and 60/20/20 have the same leader and the
+   * same runner-up total, and only one of them is a field that has actually
+   * fractured. Measured against the offered options so a question whose third
+   * option nobody chose is scored as the narrower field it is.
+   */
+  division: number;
+};
+
+export function splitOf(question: FieldQuestion, picks: FieldPick[]): Split {
+  const counts = question.options.map(() => 0);
+  const unplaced: FieldPick[] = [];
+
+  for (const pick of picks) {
+    if (pick.choice === null) unplaced.push(pick);
+    else counts[pick.choice] += 1;
+  }
+
+  const answered = counts.reduce((a, b) => a + b, 0);
+  if (answered === 0)
+    return { counts, unplaced, answered, lead: -1, leadShare: 0, division: 0 };
+
+  let lead = 0;
+  for (let i = 1; i < counts.length; i += 1)
+    if (counts[i] > counts[lead]) lead = i;
+
+  const k = Math.max(2, question.options.length);
+  const entropy = counts.reduce((sum, count) => {
+    if (count === 0) return sum;
+    const p = count / answered;
+    return sum - p * Math.log(p);
+  }, 0);
+
+  return {
+    counts,
+    unplaced,
+    answered,
+    lead,
+    leadShare: counts[lead] / answered,
+    division: entropy / Math.log(k),
+  };
+}
+
+/** The picks belonging to one ballot line, or all of them. */
+export function forRace(picks: FieldPick[], race: Race | "all"): FieldPick[] {
+  return race === "all" ? picks : picks.filter((pick) => pick.race === race);
+}
diff --git a/src/lib/elections/names.ts b/src/lib/elections/names.ts
new file mode 100644
index 00000000..d70ecbd1
--- /dev/null
+++ b/src/lib/elections/names.ts
@@ -0,0 +1,19 @@
+/* A candidate's name, cut down for the places that talk about them repeatedly.
+ *
+ * Both the ward pages and the survey's comparison view label things with the
+ * candidate's name over and over — every note, every quoted answer, every
+ * badge on an option list. Written out in full each time it reads as a
+ * database column heading; the surrounding card has already said who this is.
+ */
+
+/** "Chris Moise" → "Chris". Falls back to the whole string for a mononym. */
+export const firstName = (name: string) => name.trim().split(/\s+/)[0] || name;
+
+/** "Vanessa Raponi" → "Raponi". Falls back to the whole string for a mononym.
+ *  For the places that name a candidate the way a ballot or a headline does. */
+export const lastName = (name: string) => name.trim().split(/\s+/).at(-1) || name;
+
+/** "Chris" → "Chris’s", "Chris Adams" → "Chris Adams’" — a name already
+ *  ending in s takes the bare apostrophe. */
+export const possessive = (name: string) =>
+  name.endsWith("s") || name.endsWith("S") ? `${name}’` : `${name}’s`;
diff --git a/src/lib/elections/option-colors.ts b/src/lib/elections/option-colors.ts
new file mode 100644
index 00000000..6892ffe3
--- /dev/null
+++ b/src/lib/elections/option-colors.ts
@@ -0,0 +1,59 @@
+/* Option colours for the election surfaces that draw a question's field.
+ *
+ * Lifted out of FieldSentiment so /issues, the mayoral page and the ward cards
+ * cannot drift: an option's colour has to be the same colour wherever a reader
+ * meets it, or the second channel stops being readable across pages.
+ *
+ * The set is the one the palette validator passes on these surfaces — lake,
+ * copper and the lighter pine step, which clear the colour-blind separation
+ * floor as a trio where the darker pine did not: deep green beside copper is
+ * ΔE 3.4 under protanopia, which is to say the same colour. The fourth is the
+ * national brand's auburn, and it is written as a literal rather than as
+ * `--color-auburn-800` on purpose: these pages run under `.theme-election`,
+ * which repaints auburn to Toronto blue, and a fourth option that arrived as
+ * blue would land on top of the first one.
+ *
+ * Everything else is a custom property, so the ramps stay theme-following.
+ */
+export const CATEGORICAL = [
+  "var(--color-lake-700)",
+  "var(--color-copper-600)",
+  "var(--color-pine-400)",
+  "#932f2f",
+];
+
+/* The Yes / Yes-with-conditions / No questions are not categories, they are a
+ * scale with two poles — so they get the diverging treatment that shape calls
+ * for: a hue at each end and a neutral in the middle, never a third hue. It
+ * also gives the reader a second thing to scan on. On a page where every
+ * question is blue-and-orange, the direct ones read as a different kind of
+ * question at a glance, which is what they are. */
+export const DIVERGING = [
+  "var(--color-lake-700)",
+  "var(--color-charcoal-300)",
+  "var(--color-copper-600)",
+];
+
+/** An option nobody chose, and the hollow cells for candidates who skipped the
+ *  question: quiet, and never a further colour a reader might try to read as a
+ *  category. */
+export const EMPTY = "color-mix(in oklab, var(--color-dark) 12%, transparent)";
+
+/**
+ * One colour per option, by position.
+ *
+ * Never runs short: a question with more options than the ramp has colours
+ * takes the ramp's last colour for the overflow rather than `undefined`, so a
+ * long option list degrades to a repeated hue instead of an unpainted cell.
+ */
+export function optionColors(count: number, ordinal: boolean): string[] {
+  if (ordinal && count <= DIVERGING.length)
+    /* A two-option scale takes the poles and skips the neutral. */
+    return count === 2 ? [DIVERGING[0], DIVERGING[2]] : DIVERGING.slice(0, count);
+
+  const ramp = CATEGORICAL;
+  return Array.from(
+    { length: Math.max(2, count) },
+    (_, i) => ramp[Math.min(i, ramp.length - 1)],
+  );
+}
diff --git a/src/lib/elections/postal-code.ts b/src/lib/elections/postal-code.ts
new file mode 100644
index 00000000..9e9119f5
--- /dev/null
+++ b/src/lib/elections/postal-code.ts
@@ -0,0 +1,18 @@
+// Canadian postal code handling shared by the public election form endpoints
+// (pledge, survey). Lifted out of the pledge route when the survey route became
+// the second caller, so the two can't drift on what counts as valid.
+
+export const POSTAL_PATTERN = /^[A-Za-z]\d[A-Za-z] ?\d[A-Za-z]\d$/;
+
+/**
+ * "M5V1A1" / "m5v 1a1" → "M5V 1A1". Anything malformed returns undefined
+ * rather than being stored dirty — the caller decides whether that's an error
+ * or just a field to drop.
+ */
+export function normalizePostalCode(raw: unknown): string | undefined {
+  if (typeof raw !== "string" || !POSTAL_PATTERN.test(raw.trim())) {
+    return undefined;
+  }
+  const compact = raw.trim().toUpperCase().replace(" ", "");
+  return `${compact.slice(0, 3)} ${compact.slice(3)}`;
+}
diff --git a/src/lib/elections/registry.ts b/src/lib/elections/registry.ts
index b037d093..6473fe81 100644
--- a/src/lib/elections/registry.ts
+++ b/src/lib/elections/registry.ts
@@ -63,13 +63,6 @@ export type SupportedElection = {
    * leaves this unset rather than borrowing Toronto's colours.
    */
   themeClass?: string;
-  /**
-   * Whether to offer the postal-code → ward lookup on this election's page.
-   * Off unless we've confirmed the upstream lookup returns *this* city's
-   * municipal wards — a lookup that silently resolves to another city's ward
-   * number would match our roster and show a confidently wrong ward.
-   */
-  wardLookup: boolean;
   /**
    * Whether this region's coverage is switched off. The config stays here so
    * the routes keep type-checking and the pages can be turned back on in one
@@ -77,6 +70,10 @@ export type SupportedElection = {
    * redirect there (see next.config.ts). Only Toronto is live right now.
    */
   hidden?: boolean;
+  /** the region has postal-code → ward boundary data upstream, so the wards
+   *  section can offer the lookup. False is not "no map": it is "asking for a
+   *  postal code here would answer with boundary_data_unavailable". */
+  wardLookup?: boolean;
 };
 
 const TORONTO_2026: SupportedElection = {
@@ -96,8 +93,8 @@ const TORONTO_2026: SupportedElection = {
   nominationCloseIso: "2026-08-21",
   advanceVote: { iso: "2026-10-06", label: "Oct 6 – 11" },
   mailIn: { iso: "2026-09-24", label: "Thu, Sept 24" },
-  themeClass: "theme-election",
   wardLookup: true,
+  themeClass: "theme-election",
 };
 
 const BRAMPTON_2026: SupportedElection = {
@@ -114,7 +111,6 @@ const BRAMPTON_2026: SupportedElection = {
   pollHoursLabel: "10:00 a.m. – 8:00 p.m.",
   // Brampton hasn't published its advance-vote or vote-by-mail dates yet;
   // those countdowns stay off the page rather than guess at them.
-  wardLookup: false,
   hidden: true,
 };
 
@@ -131,7 +127,6 @@ const HAMILTON_2026: SupportedElection = {
   electionDayLabel: "Mon, Oct 26",
   pollHoursLabel: "10:00 a.m. – 8:00 p.m.",
   // As with Brampton — not yet published by the city.
-  wardLookup: false,
   hidden: true,
 };
 
@@ -148,7 +143,6 @@ const OTTAWA_2026: SupportedElection = {
   electionDayLabel: "Mon, Oct 26",
   pollHoursLabel: "10:00 a.m. – 8:00 p.m.",
   // As with Brampton and Hamilton — not yet published by the city.
-  wardLookup: false,
   hidden: true,
 };
 
diff --git a/src/lib/elections/survey-answers.ts b/src/lib/elections/survey-answers.ts
new file mode 100644
index 00000000..5e6e2c96
--- /dev/null
+++ b/src/lib/elections/survey-answers.ts
@@ -0,0 +1,68 @@
+// The questionnaire, fetched once and cut to a roster.
+//
+// Both the ward pages and the mayoral page draw the same grid from the same
+// two York Factory resources, and both need the same two things out of them:
+// the answers belonging to the candidates on the page, and the shape of the
+// questionnaire itself for the case where none of them wrote back.
+//
+// Both halves are publish-gated, so an empty result is the normal case for
+// most of the campaign — not a failure. The questionnaire is a nice-to-have on
+// these pages besides: if York Factory is unreachable the page still has to
+// render its roster, so a failed fetch costs the answers rather than the page.
+// That is the opposite of the survey page, where a missing survey means there
+// is nothing to show at all.
+
+import {
+  byCandidateKey,
+  candidateAnswers,
+  questionnaireShape,
+  type CandidateAnswers,
+  type ComparedGroup,
+} from "./candidate-answers";
+import {
+  CANDIDATE_QUESTIONNAIRE_SLUG,
+  fetchCandidateResponses,
+} from "./candidate-responses";
+import { fetchSurvey } from "./survey";
+
+export type RosterSurvey = {
+  /** the roster's own answers, keyed by `nameKey` */
+  answers: Record<string, CandidateAnswers>;
+  /** every question, with nobody attached — the grid's shape when the whole
+   *  roster stayed quiet */
+  shape: ComparedGroup[];
+};
+
+/**
+ * Every published answer belonging to `candidateKeys`, plus the questionnaire's
+ * shape.
+ *
+ * Answers we cannot match to a candidate on the roster are dropped. The join is
+ * on name, and a response we cannot place is one we must not attribute.
+ *
+ * The fetch is deliberately for the whole election rather than the roster: the
+ * counts beside each answer are the whole field's split ("21 of 30 said this
+ * too"), which a ward of one or two respondents — or a mayoral field of
+ * three — cannot supply on its own. The roster narrows who gets a column, not
+ * what they are measured against.
+ */
+export async function rosterSurvey(
+  electionSlug: string,
+  candidateKeys: Set<string>,
+): Promise<RosterSurvey> {
+  try {
+    const [survey, responses] = await Promise.all([
+      fetchSurvey(electionSlug, CANDIDATE_QUESTIONNAIRE_SLUG),
+      fetchCandidateResponses(electionSlug),
+    ]);
+    const entries = candidateAnswers(survey, responses).filter((entry) =>
+      candidateKeys.has(entry.key),
+    );
+    return {
+      answers: byCandidateKey(entries),
+      shape: questionnaireShape(survey, responses),
+    };
+  } catch {
+    return { answers: {}, shape: [] };
+  }
+}
diff --git a/src/lib/elections/survey.ts b/src/lib/elections/survey.ts
new file mode 100644
index 00000000..424fc806
--- /dev/null
+++ b/src/lib/elections/survey.ts
@@ -0,0 +1,119 @@
+// Survey definitions, fetched from York Factory.
+//
+// These questions used to live in this repo as a hand-written surveyData.ts.
+// They moved into York Factory because candidates answer surveys too, and a
+// candidate questionnaire is entered in that app's CMS — a question set that
+// only exists in the front end can't be rendered as an admin form. So the
+// database is now the source of truth and this file only describes what comes
+// back over the wire.
+//
+// The renderer (SurveyClient) is still generic: it derives step count,
+// progress, validation and the submitted payload from whatever steps arrive.
+// Adding a question or rewording one is a CMS edit with no deploy here.
+
+import { apiFetch } from "@/lib/api/client";
+
+export type SurveyOption = {
+  /** stored value — stable; the label can be reworded freely */
+  value: string;
+  label: string;
+  /** optional expansion shown under the label */
+  detail?: string;
+};
+
+export type SurveyQuestionType =
+  | "text"
+  | "email"
+  | "textarea"
+  | "select"
+  | "radio"
+  | "yesno";
+
+export type SurveyQuestion = {
+  /** payload key — answers are stored under this, so it is stable once live */
+  id: string;
+  type: SurveyQuestionType;
+  label: string;
+  /**
+   * Background a voter needs before they can answer: what the city is already
+   * doing, what the trade-off is, which powers Toronto actually holds. A
+   * paragraph, not a hint — several of these questions are unanswerable
+   * without it.
+   *
+   * Distinct from `help`, which is guidance about the field itself.
+   */
+  context?: string;
+  /** Shown under the label, for context or a caveat. */
+  help?: string;
+  topic?: string;
+  placeholder?: string;
+  /** Required questions block advancing past their step. */
+  required?: boolean;
+  rows?: number;
+  /**
+   * Choices for select and radio. Also populated for yesno, where the API
+   * supplies the implied Yes/No pair — so the renderer never has to carry its
+   * own copy of the labels that results are grouped by.
+   *
+   * Absent for free-text questions.
+   */
+  options?: SurveyOption[];
+};
+
+export type SurveyStep = {
+  id: string;
+  title: string;
+  intro?: string;
+  questions: SurveyQuestion[];
+};
+
+/** Page furniture — headings and the thank-you copy. Authored in the CMS. */
+export type SurveyMeta = {
+  eyebrow?: string;
+  kicker?: string;
+  title?: string;
+  intro?: string;
+  submitLabel?: string;
+  thankYou?: {
+    title?: string;
+    body?: string;
+    restartLabel?: string;
+  };
+};
+
+export type Survey = {
+  slug: string;
+  audience: "resident" | "candidate";
+  /** Stamped on every response so answers stay interpretable after an edit. */
+  version: string;
+  meta: SurveyMeta;
+  steps: SurveyStep[];
+};
+
+/** The resident survey for the Toronto 2026 election. */
+export const CITY_PRIORITIES_SLUG = "city-priorities";
+
+/**
+ * One survey with its questions, ready to render.
+ *
+ * Cached for five minutes rather than fetched per request: the question set
+ * changes about as often as someone edits it in the CMS, and the ISR cache
+ * doubles as the failure story — a blip at York Factory keeps serving the last
+ * good copy instead of taking the survey down. Throws when there is no cached
+ * copy to fall back on, which the page turns into a notFound().
+ */
+export async function fetchSurvey(
+  electionSlug: string,
+  surveySlug: string,
+): Promise<Survey> {
+  const { data } = await apiFetch<{ data: Survey }>(
+    `/elections/${electionSlug}/surveys/${surveySlug}`,
+    { revalidate: 300, tags: [`survey:${electionSlug}:${surveySlug}`] },
+  );
+  return data;
+}
+
+/** Every question across every step, in the order a respondent meets them. */
+export function surveyQuestions(survey: Survey): SurveyQuestion[] {
+  return survey.steps.flatMap((step) => step.questions);
+}