diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css
index 9641f41..cb10582 100644
--- a/nextjs-app/components/HomeView.module.css
+++ b/nextjs-app/components/HomeView.module.css
@@ -1361,3 +1361,35 @@
     grid-template-columns: repeat(2, 1fr);
   }
 }
+
+/* On phones the 2×2 grid cramped each chip so badly the "Secondary ·
+   Deadline" track label dropped to 9.6px. Switch to a horizontal
+   snap-scroller — each card is full-width-ish and stays readable,
+   and the rightmost card peeks past the edge to signal there's more. */
+@media (max-width: 640px) {
+  .countdownRail {
+    display: flex;
+    grid-template-columns: none;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    gap: 0.75rem;
+    padding-right: 1.25rem;
+    margin-inline: -1rem;
+    padding-inline: 1rem;
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+  }
+  .countdownRail::-webkit-scrollbar {
+    display: none;
+  }
+  .countdownChip {
+    flex: 0 0 auto;
+    width: 78%;
+    min-width: 220px;
+    scroll-snap-align: start;
+  }
+  .chipTrack {
+    font-size: 0.7rem;
+  }
+}
diff --git a/nextjs-app/components/MetricTooltip.module.css b/nextjs-app/components/MetricTooltip.module.css
index a11b84f..22324f6 100644
--- a/nextjs-app/components/MetricTooltip.module.css
+++ b/nextjs-app/components/MetricTooltip.module.css
@@ -81,3 +81,13 @@
     width: 180px;
   }
 }
+
+/* On phones the icon was rendering at ~9px and the tooltip relied on
+   :hover, which doesn't fire on touch. Rather than build a tap-to-show
+   layer with backdrop dismissal, hide the helper entirely — the metric
+   labels themselves carry the meaning. */
+@media (max-width: 640px) {
+  .wrapper {
+    display: none;
+  }
+}
diff --git a/nextjs-app/components/RankingsView.module.css b/nextjs-app/components/RankingsView.module.css
index c12c452..0a392c5 100644
--- a/nextjs-app/components/RankingsView.module.css
+++ b/nextjs-app/components/RankingsView.module.css
@@ -396,6 +396,16 @@
     min-width: 60px;
   }
 
+  /* Long metric labels like "Reading, Writing & Maths Combined %" used to
+     force the whole column wide; let them wrap onto 2 short lines with a
+     tighter font so the value cell can stay compact. */
+  .valueHeader {
+    font-size: 0.625rem;
+    white-space: normal;
+    line-height: 1.15;
+    letter-spacing: 0.03em;
+  }
+
   .rankHeader {
     width: 40px;
   }
diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 56b0154..3f42cd8 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -1077,6 +1077,20 @@
         min-width: 100%;
     }
 
+    /* Collapse the "Ofsted pending / No inspection on record" empty state
+       into a single compact line on phones — it's a non-result, not worth
+       a full hero card. */
+    .heroChip[data-ofsted-state="none"] {
+        padding: 0.5rem 0.75rem;
+    }
+    .heroChip[data-ofsted-state="none"] .heroChipSub {
+        display: none;
+    }
+    .heroChip[data-ofsted-state="none"] .heroChipTitle {
+        font-size: 0.85rem;
+        color: var(--text-muted, #6d685f);
+    }
+
     .heroStats {
         gap: 1rem 1.5rem;
     }
diff --git a/nextjs-app/components/SchoolDetailView.tsx b/nextjs-app/components/SchoolDetailView.tsx
index ed18a5e..23e98f6 100644
--- a/nextjs-app/components/SchoolDetailView.tsx
+++ b/nextjs-app/components/SchoolDetailView.tsx
@@ -295,7 +295,10 @@ export function SchoolDetailView({
 
         {/* Hero signal chip strip */}
         <div className={styles.heroChips}>
-          <div className={`${styles.heroChip} ${styles[`tone-${ofstedHeroChip.tone}`]}`}>
+          <div
+            className={`${styles.heroChip} ${styles[`tone-${ofstedHeroChip.tone}`]}`}
+            data-ofsted-state={ofstedHeroChip.state}
+          >
             <div className={styles.heroChipTitle}>{ofstedHeroChip.title}</div>
             <div className={styles.heroChipSub}>{ofstedHeroChip.subtitle}</div>
             {ofstedHeroChip.detail && (
diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css
index b087c9e..c1f7659 100644
--- a/nextjs-app/components/SchoolRow.module.css
+++ b/nextjs-app/components/SchoolRow.module.css
@@ -225,8 +225,14 @@
     white-space: normal;
   }
 
+  /* Promote the headline metric onto its own line; secondary stats
+     (delta vs LA, pupils) wrap below with a visible row gap. */
   .line3 {
-    gap: 0 1rem;
+    row-gap: 0.25rem;
+    column-gap: 1rem;
+  }
+  .line3 > .stat:first-child {
+    flex-basis: 100%;
   }
 
   .rowActions {
diff --git a/nextjs-app/components/SecondarySchoolRow.module.css b/nextjs-app/components/SecondarySchoolRow.module.css
index dccf6c7..65d56bd 100644
--- a/nextjs-app/components/SecondarySchoolRow.module.css
+++ b/nextjs-app/components/SecondarySchoolRow.module.css
@@ -236,8 +236,15 @@
     white-space: normal;
   }
 
+  /* Promote the headline metric (Attainment 8) onto its own line so
+     the secondary stats — delta vs LA, pupils — wrap below it with
+     visible row gap instead of crowding the same row. */
   .line3 {
-    gap: 0 1rem;
+    row-gap: 0.25rem;
+    column-gap: 1rem;
+  }
+  .line3 > .stat:first-child {
+    flex-basis: 100%;
   }
 
   .rowActions {