feat(brand): adopt the schoolcompare identity across the site

Implements the supplied brand guideline: the pin-and-leaf mark, the lowercase
schoolcompare wordmark, Manrope for headings and Inter for everything a person
reads a number from, the deep-teal/coral/mustard/sage palette, and the rounder
geometry the guideline asks for.

The landing hero is rebuilt to the concept: a Sand panel carrying the
proposition, the search and a trust line, with the brand landscape bleeding to
the panel's right edge, followed by the four value props.

Concept vs reality — where the guideline describes something this product does
not have, the real feature takes its place and the decision is recorded in a
code comment next to it:

- The Thriving Score is not implemented. Four of its five sub-scores (pastoral,
  enrichment, community, facilities) have no source in DfE or Ofsted data, and
  its band names are Ofsted's own, which would sit beside the real Ofsted grade
  and be indistinguishable from it.
- Guides, About, Favourites and Sign in are not added to the nav — there are no
  such pages and no accounts system. Rankings and Admissions, which the
  guideline omits, keep their places because they exist.
- The fourth value prop is "Never miss a deadline" rather than "Save & revisit",
  which would need shortlisting.

Two deviations from the supplied swatches, both forced by contrast and both
confined to text and fills. Coral #F97360 under a white label measures 2.75:1
against a 4.5 floor, so --action is a darkened #BE3C27 and the original coral
survives as --coral for tints, borders and illustration. Mustard #F2C94C is
1.5:1 as text, so --mustard-ink carries labels while --mustard stays exact for
fills and rings. Every token clears AA on all three light grounds; Sand is the
binding one, so several values sit a step darker than white alone would need.

The guideline is light-only, but the site already ships a dark theme, so it is
rebuilt from the same tokens rather than dropped.

Verified: tsc clean, 159/159 unit tests, production build green, and the
generated share card and app icon render from the new mark. The hero and the
site chrome were rendered from the compiled CSS and the prerendered markup to
confirm Manrope and Inter actually resolve — a font token that silently falls
back has shipped here before.

nextjs-app/components/HomeView.module.css

@@ -2,12 +2,68 @@
   width: 100%;
 }
 
-.heroSection {
-  text-align: center;
+/* ── Hero ──────────────────────────────────────────────────────────────────
+   A Sand panel: proposition and search on the left, the brand landscape
+   bleeding to the panel's right edge. The illustration is decorative, so on
+   phones it drops to a short band under the content rather than competing
+   with the search for the fold. */
+.heroPanel {
+  display: grid;
+  grid-template-columns: 1.12fr 0.88fr;
+  align-items: stretch;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
   margin-bottom: 1.5rem;
-  padding-top: 2.5rem;
 }
 
+.heroContent {
+  align-self: center;
+  padding: 3rem 1.5rem 3rem 3rem;
+  min-width: 0;
+}
+
+.heroArt {
+  position: relative;
+  min-width: 0;
+  /* The scene needs height to read; without a floor it collapses to the
+     content column's height on short viewports. */
+  min-height: 24rem;
+}
+
+.heroArt svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.heroTrust {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  margin-top: 1.4rem;
+  font-size: var(--step--1);
+  color: var(--text-secondary);
+}
+
+.heroTrustDots {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.heroTrustDot {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+  border: 2px solid var(--bg-secondary);
+  margin-right: -0.55rem;
+}
+.heroTrustDot:nth-child(1) { background: var(--sage); }
+.heroTrustDot:nth-child(2) { background: var(--mustard); }
+.heroTrustDot:nth-child(3) { background: var(--sky); }
+
 .heroEyebrow {
   display: inline-flex;
   align-items: center;
@@ -32,78 +88,175 @@
 }
 
 .heroTitle {
-  font-size: 3rem;
+  font-size: var(--step-4);
   font-weight: 700;
   color: var(--text-primary);
-  margin-bottom: 0.85rem;
-  line-height: 1.08;
-  letter-spacing: -0.015em;
+  margin-bottom: 0.75rem;
+  line-height: 1.12;
+  letter-spacing: -0.03em;
   font-family: var(--font-display);
-  max-width: 840px;
-  margin-left: auto;
-  margin-right: auto;
+  max-width: 18ch;
 }
 
+/* The em is a colour change, not an emphasis change — Manrope has no italic
+   in the loaded weights, so leaving font-style alone would synthesise a slant. */
 .heroEmph {
-  color: var(--brand-strong);
-  font-style: italic;
+  color: var(--brand);
+  font-style: normal;
 }
 
 .heroDescription {
-  font-size: 1.05rem;
+  font-size: var(--step-1);
   color: var(--text-secondary);
-  margin: 0 auto 0.5rem;
-  max-width: 680px;
+  margin: 0 0 1.5rem;
+  max-width: 46ch;
   line-height: 1.55;
 }
 
 .heroDescription strong {
   color: var(--text-primary);
-  font-weight: 700;
+  font-weight: 600;
 }
 
-/* Copy variants: full paragraph ≥641px, compact merged line on phones. */
-.heroDescriptionCompact {
-  display: none;
+@media (max-width: 1024px) {
+  .heroContent {
+    padding: 2.25rem 1.5rem 2.25rem 2rem;
+  }
+  .heroArt {
+    min-height: 20rem;
+  }
 }
 
-@media (max-width: 768px) {
-  .heroSection {
-    padding-top: 1.5rem;
+/* One column: content first, then a short band of landscape. */
+@media (max-width: 860px) {
+  .heroPanel {
+    grid-template-columns: 1fr;
+  }
+  .heroContent {
+    padding: 2rem 1.5rem 1.75rem;
+  }
+  .heroArt {
+    min-height: 11rem;
+    order: 2;
   }
   .heroTitle {
-    font-size: 2rem;
+    font-size: var(--step-3);
+    max-width: none;
   }
   .heroDescription {
-    font-size: 0.95rem;
+    font-size: var(--step-0);
+    max-width: none;
   }
 }
 
-/* Above the fold on phones, every line costs. Drop the eyebrow tag and swap
-   the long descriptive paragraph for one compact line that carries coverage
-   ("24,000+ schools") and freshness ("updated for 2026/27") — a first-time
-   visitor otherwise sees only a poetic h1 and a bare box, with no reason to
-   trust the data (audit P1.7, feeds the 46% home exit rate). */
+/* Above the fold on phones, every line costs. Drop the eyebrow tag and the
+   long coverage sentence, leaving the proposition and the search — a
+   first-time visitor still gets the trust line beneath the box, which carries
+   the data provenance the coverage sentence used to (audit P1.7, feeds the
+   46% home exit rate). */
 @media (max-width: 640px) {
-  .heroSection {
-    padding-top: 0.75rem;
+  .heroPanel {
     margin-bottom: 1rem;
+    border-radius: var(--radius-lg);
+  }
+  .heroContent {
+    padding: 1.25rem 1.1rem 1.5rem;
   }
   .heroEyebrow,
   .heroDescriptionFull {
     display: none;
   }
-  .heroDescriptionCompact {
-    display: block;
-  }
   .heroDescription {
-    font-size: 0.85rem;
-    line-height: 1.4;
-    max-width: 320px;
-    margin-bottom: 0.25rem;
+    font-size: 0.9rem;
+    line-height: 1.45;
+    margin-bottom: 1rem;
   }
   .heroTitle {
-    font-size: 1.65rem;
+    font-size: 1.75rem;
+    margin-bottom: 0.5rem;
+  }
+  .heroTrust {
+    margin-top: 1rem;
+    font-size: var(--step--2);
+  }
+  .heroArt {
+    min-height: 8.5rem;
+  }
+}
+
+/* ── Value props ───────────────────────────────────────────────────────────
+   Four reasons, straight from the guideline. The fourth is ours rather than
+   theirs — see the comment on VALUE_PROPS in HomeView.tsx. */
+.valueProps {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.25rem;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 2rem;
+}
+
+.valueProp {
+  display: flex;
+  gap: 0.8rem;
+  align-items: flex-start;
+}
+
+.propIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 2.6rem;
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: var(--radius-md);
+}
+
+.propIconTrust {
+  background: var(--brand-bg);
+  color: var(--brand);
+}
+.propIconCompare {
+  background: rgba(var(--sage-rgb), 0.42);
+  color: var(--status-above);
+}
+.propIconContext {
+  background: rgba(242, 201, 76, 0.26);
+  color: var(--mustard-ink);
+}
+.propIconDeadline {
+  background: rgba(221, 216, 245, 0.6);
+  color: var(--phase-nursery);
+}
+
+.propTitle {
+  font-family: var(--font-display);
+  font-size: var(--step-0);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 0.15rem;
+  letter-spacing: -0.01em;
+}
+
+.propBody {
+  font-size: var(--step--1);
+  color: var(--text-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+@media (max-width: 900px) {
+  .valueProps {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem 1.25rem;
+  }
+}
+
+@media (max-width: 560px) {
+  .valueProps {
+    grid-template-columns: 1fr;
+    gap: 0.85rem;
+    margin-bottom: 1.5rem;
   }
 }